/* =========================================================
   MedFin — Financial Intelligence for Healthcare Practices
   Design system: ledger-inspired layout, navy/teal brand,
   Space Grotesk (display) + Public Sans (body).
   ========================================================= */

:root{
  /* --- Color tokens (from brand mark) --- */
  --navy-900:#12392c;
  --navy-800:#1a4a3a;
  --navy-700:#215c48;
  --teal-600:#12805c;
  --teal-500:#159c8e;
  --teal-400:#3fc0ae;
  --mint-100:#e9f6f0;
  --mint-50:#f1f8f5;
  --paper:#ffffff;
  --ink:#101d1a;
  --ink-soft:#5a6b61;
  --line:#dceae1;
  --line-strong:#c3ddd0;
  --amber:#c98a2b;
  --white:#ffffff;

  --grad-brand: linear-gradient(120deg, var(--navy-700) 0%, var(--teal-600) 62%, var(--teal-400) 100%);

  /* --- Type --- */
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Manrope', 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius-sm:4px;
  --radius-md:8px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.2;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
  color:var(--navy-900);
}
p{margin:0 0 1em;max-width:62ch;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
section{padding:clamp(40px,5.5vw,64px) 0;}
:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* Equal-height content sections (every page, excluding hero/page-hero banners) */
.eqh{
  min-height:clamp(500px, 60vh, 650px);
  display:flex;
  align-items:center;
}
.eqh > .container{width:100%;}
.section-alt{background:var(--mint-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* Dark section — alternates with light sections down each page */
.section-dark{
  background:var(--navy-900);
  color:rgba(255,255,255,0.8);
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white);}
.section-dark p{color:rgba(255,255,255,0.65);}
.section-dark .kicker{color:var(--teal-400);}
.section-dark .kicker::before{background:var(--teal-400);}
.section-dark .text-muted{color:rgba(255,255,255,0.6);}
.section-dark .btn-ghost{color:var(--white);border-color:rgba(255,255,255,0.28);}
.section-dark .btn-ghost:hover{border-color:var(--teal-400);color:var(--teal-400);}
.section-dark .divider{background:rgba(255,255,255,0.12);}

/* Grid cards on a dark section: white card with a dark icon chip,
   consistent with the white-card / dark-chip pattern used everywhere
   else on the site, rather than a dark-on-dark panel. */
.section-dark .g-item{background:var(--white);border-color:var(--line);}
.section-dark .g-item:hover{border-color:var(--teal-500);box-shadow:0 16px 36px -20px rgba(0,0,0,0.25);transform:translateY(-4px);}
.section-dark .g-item h3{color:var(--navy-900);}
.section-dark .g-item p{color:var(--ink-soft);}
.section-dark .g-item .mark{color:var(--teal-600);}
.section-dark .g-bar{background:var(--teal-500);}
.section-dark .g-item.g-item--chip .mark{background:var(--navy-900);color:var(--white);}
.section-dark .chevron-sm{border-color:var(--navy-800);}
.section-dark .sc-body{border-color:var(--line);color:var(--ink-soft);}

/* Navy widgets flip to light cards when placed on a dark section,
   so they still stand out instead of blending into the background */
.section-dark .ledger-card,
.section-dark .flow-card,
.section-dark .cycle-card,
.section-dark .impact-card{
  background:var(--white);color:var(--ink);
  box-shadow:0 22px 54px -26px rgba(0,0,0,0.5);
}
.section-dark .ledger-card::before,
.section-dark .flow-card::before,
.section-dark .cycle-card::before,
.section-dark .impact-card::before{opacity:0.05;}
.section-dark .ledger-head .label,.section-dark .flow-card .label,.section-dark .cycle-card .label,.section-dark .impact-card .label{color:var(--ink-soft);}
.section-dark .ledger-total{color:var(--navy-900);}
.section-dark .impact-donut-label{color:var(--navy-900);}
.section-dark .impact-donut-cap{color:var(--ink-soft);}
.section-dark .id-track{stroke:rgba(16,31,54,0.1);}
.section-dark .ledger-payer{color:var(--ink);}
.section-dark .ledger-row{border-color:var(--line);}
.section-dark .ledger-foot{border-color:var(--line);color:var(--ink-soft);}
.section-dark .ledger-check{border-color:var(--line-strong);}
.section-dark .flow-note{color:var(--ink-soft);}
.section-dark .flow-steps::before{background:var(--line);}
.section-dark .flow-dot{background:var(--mint-100);border-color:var(--line-strong);color:var(--ink-soft);}
.section-dark .flow-step.is-active .flow-dot{background:var(--teal-500);border-color:var(--teal-500);color:var(--white);}
.section-dark .flow-step span.f-label{color:var(--ink-soft);}
.section-dark .flow-step.is-active span.f-label{color:var(--ink);font-weight:600;}
.section-dark .cycle-stage h3{color:var(--navy-900);}
.section-dark .cycle-stage p{color:var(--ink-soft);}
.section-dark .cycle-progress{background:var(--line);}
.section-dark .cycle-count{color:var(--teal-600);}
.section-dark .cycle-icons-row .ci{background:var(--mint-100);color:var(--ink-soft);}
.section-dark .cycle-icons-row .ci.active{background:var(--teal-500);color:var(--white);}
.section-dark .impact-row{border-color:var(--line);}
.section-dark .impact-row .i-cap{color:var(--ink-soft);}
.section-dark .impact-row .i-num{color:var(--teal-600);}
.section-dark .photo-frame{border-color:rgba(255,255,255,0.14);}

/* Stat strip — sits as a dark accent band under the hero */
.stat-strip{
  border-top:1px solid rgba(255,255,255,0.08);
  background:var(--navy-900);
}

/* Icon micro-interaction */
.g-item .mark svg,.ledger-list-item .mark svg{transition:transform .25s ease;}
.g-item:hover .mark svg{transform:scale(1.12) rotate(-2deg);}

/* Card variant B — chip icon + left accent, used for visual variety
   across grids instead of repeating the same card everywhere */
.g-item--chip{border-left:3px solid var(--teal-500);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:13px 16px;gap:4px;min-height:92px;justify-content:center;}
.g-item--chip .g-bar{display:none;}
.g-item.g-item--chip .mark{
  width:42px;height:42px;border-radius:11px;
  background:var(--navy-900);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0;
}
.g-item--chip .mark svg{width:24px;height:24px;}
.g-item--chip h3{font-size:0.9rem;margin-bottom:0;line-height:1.2;}
.g-item--chip p{font-size:0.8rem;line-height:1.4;margin-bottom:0;}

/* Card variant C — icon and title sit side by side in a header row
   instead of stacked, with the accent on the bottom edge. Genuinely
   different structure from both variant A and B, not just a recolour. */
.g-item--row{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "desc desc";
  column-gap:14px;row-gap:8px;
  align-items:center;
  border-bottom:3px solid var(--teal-500);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.g-item--row .mark{grid-area:icon;margin-bottom:0;}
.g-item--row .g-bar{display:none;}
.g-item--row h3{grid-area:title;margin-bottom:0;}
.g-item--row p{grid-area:desc;}
.section-dark .g-item--row{border-bottom-color:var(--teal-400);}

/* Scroll-reveal (single consistent treatment, staggered via nth-child) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-group .reveal:nth-child(1){transition-delay:0ms;}
.reveal-group .reveal:nth-child(2){transition-delay:70ms;}
.reveal-group .reveal:nth-child(3){transition-delay:140ms;}
.reveal-group .reveal:nth-child(4){transition-delay:210ms;}
.reveal-group .reveal:nth-child(5){transition-delay:280ms;}
.reveal-group .reveal:nth-child(6){transition-delay:350ms;}

/* --- Eyebrow / kicker (used sparingly, only where it labels a genuine section) --- */
.kicker{
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:600;
  color:var(--teal-600);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.kicker::before{
  content:"";
  width:22px;height:1px;
  background:var(--teal-500);
  display:inline-block;
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,246,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand img{height:40px;width:40px;transition:transform .2s ease;}
.brand:hover img{transform:rotate(-4deg) scale(1.03);}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-0.02em;color:var(--navy-900);}
.brand-word span{color:var(--teal-600);font-weight:800;}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{
  text-decoration:none;font-weight:500;font-size:0.88rem;color:var(--navy-800);
  padding:6px 2px;border-bottom:2px solid transparent;
  text-transform:uppercase;letter-spacing:0.03em;
  transition:border-color .15s ease, color .15s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-color:var(--teal-500);color:var(--teal-600);}
.nav-links .nav-cta:hover,.nav-links .nav-cta[aria-current="page"]{color:var(--white);}
.nav-links .nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy-900);color:var(--white);
  padding:10px 18px;border-radius:var(--radius-sm);
  text-decoration:none;font-weight:600;font-size:0.92rem;
  border-bottom:none;
  transition:background .15s ease, transform .15s ease;
}
.nav-links .nav-cta:hover{background:var(--teal-600);color:var(--white);border-color:transparent;transform:translateY(-1px);}

/* Solutions dropdown */
.has-dropdown{position:relative;}
.has-dropdown > a::after{
  content:"";display:inline-block;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:6px;margin-bottom:2px;
}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);
  min-width:210px;padding:8px;margin:0;list-style:none;
  box-shadow:0 20px 44px -20px rgba(16,31,54,0.3);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:60;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown li{width:auto;border:0;}
.dropdown a{
  display:block;padding:10px 12px;border-radius:6px;
  font-size:0.9rem;font-weight:500;color:var(--navy-800);
  text-decoration:none;border-bottom:0;
}
.dropdown a:hover{background:var(--mint-100);color:var(--teal-600);border-color:transparent;}
.dropdown li:last-child a{border-top:1px solid var(--line);margin-top:4px;padding-top:12px;color:var(--teal-600);font-weight:600;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;position:relative;z-index:2;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy-900);margin:5px 0;transition:transform .2s ease, opacity .2s ease;}

@media (max-width:860px){
  .nav-toggle{display:block;}
  /* The desktop dropdown nav is fully hidden on mobile — the separate
     #mobileNav overlay below (a direct <body> child, outside the header's
     stacking context) handles mobile navigation instead. This avoids any
     ambiguity about whether a fixed child can escape an ancestor's
     stacking context: it simply isn't nested inside one. */
  .nav-links{display:none;}
}

/* =========================================================
   Mobile navigation overlay — a top-level, full-screen panel
   ========================================================= */
.mobile-nav{display:none;}
@media (max-width:860px){
  .mobile-nav{
    display:block;
    position:fixed;inset:0;
    z-index:1000;
    background:var(--paper);
    padding:74px 28px 40px;
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-nav.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .mobile-nav-close{
    position:absolute;top:20px;right:20px;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    color:var(--navy-900);cursor:pointer;
  }
  .mobile-nav-close:hover{border-color:var(--teal-500);color:var(--teal-600);}
  .mobile-nav > ul{list-style:none;margin:0;padding:0;}
  .mobile-nav > ul > li{border-bottom:1px solid var(--line);}
  .mobile-nav > ul > li > a,
  .mobile-nav-row > a{display:block;padding:18px 2px;text-decoration:none;color:var(--navy-800);font-weight:500;font-size:1.05rem;}
  .mobile-nav .nav-cta{
    display:inline-block;margin-top:18px;border:0;
    background:var(--navy-900);color:var(--white);
    padding:12px 20px;border-radius:var(--radius-sm);font-weight:600;
  }

  /* Solutions: a real collapsible accordion, closed by default,
     rather than an always-open nested list */
  .mobile-nav-row{display:flex;align-items:center;justify-content:space-between;}
  .mobile-nav-row > a{flex:1;padding-right:8px;}
  .mobile-sub-toggle{
    width:38px;height:38px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:none;border:0;color:var(--ink-soft);cursor:pointer;
    transition:transform .2s ease, color .2s ease;
  }
  .mobile-sub-toggle[aria-expanded="true"]{transform:rotate(180deg);color:var(--teal-600);}
  .mobile-dropdown{
    list-style:none;margin:0;padding:0 0 0 4px;
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
  }
  .mobile-has-sub.is-open .mobile-dropdown{max-height:320px;}
  .mobile-dropdown li{border:0;}
  .mobile-dropdown a{
    display:block;padding:12px 2px;text-decoration:none;
    color:var(--ink-soft);font-size:0.95rem;
  }
  .mobile-dropdown li:last-child a{
    color:var(--teal-600);font-weight:600;border-top:1px solid var(--line);margin-top:2px;padding-top:14px;
  }
}

/* =========================================================
   Hero
   ========================================================= */
/* iMac photo mockup — the hero widget content is warped via a
   computed homography matrix to sit precisely inside the screen of
   a real (neutral, unbranded) monitor photo. The corner coordinates
   below were measured from the actual photo's pixel data, not
   eyeballed. The inner assembly is built at the photo's native
   615x615px and scaled responsively via JS (see main.js) because a
   perspective matrix3d is not itself percentage/scale-safe. */
.imac-mock-wrap{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1;}
.imac-mock-inner{position:absolute;left:0;top:0;width:1600px;height:1600px;transform-origin:top left;backface-visibility:hidden;-webkit-font-smoothing:antialiased;}
.imac-mock-photo{width:1600px;height:1600px;display:block;user-select:none;-webkit-user-drag:none;}
.imac-mock-screen{position:absolute;left:296px;top:283px;width:910px;height:731px;overflow:hidden;}
.imac-mock-content{
  width:910px;height:731px;transform-origin:0 0;
  transform:matrix3d(0.6633138100810005,-0.2497516990480867,0,-0.0002788773095541801, -0.1033701933763058,0.6209461779212111,0,-0.00009327661116561133, 0,0,1,0, 75.5,227.2,0,1);
  background:#ffffff;padding:52px 60px;display:flex;flex-direction:column;justify-content:center;
  color:#12392c;
}
.imac-bar-row{margin-bottom:22px;}
.imac-bar-row:last-child{margin-bottom:0;}
.imac-bar-label{display:block;font-size:22px;font-weight:600;color:#12392c;margin-bottom:8px;}
.imac-bar-track{width:100%;height:20px;border-radius:10px;background:#eef3f0;overflow:hidden;}
.imac-bar-fill{
  height:100%;border-radius:10px;background:#12805c;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}
.imac-mock-content.bars-in .imac-bar-fill{transform:scaleX(1);}

/* Taller variant for sections the client wants more visual weight */
.eqh-lg{min-height:clamp(520px, 62vh, 680px);}
.pay-widget-lg{display:flex;justify-content:center;}
.pay-widget-lg .pos-widget{transform:scale(1.12);margin:20px 0;}

.hero{
  padding:clamp(40px,6vw,64px) 0 clamp(32px,5vw,52px);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;}
  .hero-media .ledger-card{margin-left:0;max-width:440px;}
}
.hero-media{position:relative;}
.hero-media::before{
  content:"";
  position:absolute;
  inset:-40px -30px auto auto;
  width:280px;height:280px;
  background:radial-gradient(circle, rgba(63,192,174,0.35), rgba(63,192,174,0) 70%);
  filter:blur(10px);
  animation:float-blob 9s ease-in-out infinite alternate;
  z-index:0;
  pointer-events:none;
}
.hero-media .ledger-card{position:relative;z-index:1;max-width:360px;margin-left:auto;}
@keyframes float-blob{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-14px,18px) scale(1.08);}
}
.hero h1{
  font-size:clamp(2.1rem,3.8vw,3rem);
  max-width:19ch;
  line-height:1.16;
}
.hero .lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:56ch;
  white-space:nowrap;
}
@media (max-width:900px){.hero .lede{white-space:normal;}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:0.95rem;
  padding:13px 22px;border-radius:var(--radius-sm);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--navy-900);color:var(--white);}
.btn-primary:hover{background:var(--teal-600);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--navy-900);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--teal-500);color:var(--teal-600);}

.hero-note{
  margin-top:22px;font-size:0.85rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;
}
.hero-note svg{flex:none;color:var(--teal-600);}

/* --- Reconciliation panel (hero widget) --- */
.ledger-card{
  background:var(--white);
  color:var(--ink);
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:17px 19px 15px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px -16px rgba(16,31,54,0.14);
}
.ledger-card::before{
  content:"";position:absolute;inset:0;
  background:var(--grad-brand);
  opacity:0.03;
  pointer-events:none;
}
.ledger-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;margin-bottom:12px;position:relative;
}
.ledger-head .label{font-size:0.78rem;letter-spacing:0.02em;color:var(--ink-soft);}
.ledger-total{font-family:var(--font-display);font-size:1.65rem;font-weight:700;margin-top:2px;color:var(--navy-900);}
.ledger-total sup{font-size:0.9rem;font-weight:500;color:var(--teal-600);margin-left:8px;vertical-align:middle;}
.pulse-badge{
  display:flex;align-items:center;gap:6px;
  background:var(--mint-100);color:var(--teal-600);
  padding:6px 10px;border-radius:20px;font-size:0.78rem;font-weight:600;
}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-400);animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(0.75);}}

.ledger-rows{position:relative;display:flex;flex-direction:column;gap:0;}
.ledger-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-6px);
  transition:opacity .5s ease, transform .5s ease;
}
.ledger-row.is-in{opacity:1;transform:translateX(0);}
.ledger-row:last-child{border-bottom:0;}
.ledger-row-left{display:flex;align-items:center;gap:10px;}

/* Compact row for inside the warped iMac screen — checkmark, label
   and amount all sit close together rather than spanning the full
   width, because a true perspective (matrix3d) warp does not keep
   a horizontal line straight across a wide span: content anchored
   far-left and far-right on the same row visibly drifts apart
   vertically. Keeping the row narrow avoids that entirely. */
.imac-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-6px);
  transition:opacity .5s ease, transform .5s ease;
}
.imac-row.is-in{opacity:1;transform:translateX(0);}
.imac-row:last-child{border-bottom:0;}
.imac-row .ledger-check{margin:0;width:26px;height:26px;}
.imac-row .ledger-check svg{width:15px;height:15px;}
.imac-row .ledger-payer{font-size:1.4rem;}
.imac-row-amount{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--navy-900);font-variant-numeric:tabular-nums;}
/* Hero screen content stays on its dark green background (matching
   the photographed monitor), so its rows need their own dark-context
   colors rather than the light-card defaults used elsewhere. */
.imac-mock-content .imac-row{border-bottom-color:rgba(255,255,255,0.1);}
.imac-mock-content .ledger-check{border-color:rgba(255,255,255,0.3);}
.imac-mock-content .ledger-payer{color:rgba(255,255,255,0.88);}
.imac-mock-content .imac-row-amount{color:#ffffff;}

.ledger-check{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .3s ease, border-color .3s ease;
}
.ledger-row.is-checked .ledger-check,.imac-row.is-checked .ledger-check{background:var(--teal-400);border-color:var(--teal-400);}
.ledger-check svg{width:11px;height:11px;opacity:0;transition:opacity .2s ease .1s;color:var(--white);}
.ledger-row.is-checked .ledger-check svg,.imac-row.is-checked .ledger-check svg{opacity:1;}

/* Solution-icon variant of the ledger-check circle — bigger, holds a
   real per-solution icon instead of a checkmark, with a wave pulse */
.ledger-check.sol-ic{
  width:36px;height:36px;background:rgba(63,192,174,0.22);
  border-color:rgba(63,192,174,0.4);
  animation:solIconWave 5.4s ease-in-out infinite;
}
.ledger-check.sol-ic svg{width:20px;height:20px;opacity:1;color:var(--white);}
.ledger-row:nth-child(1) .sol-ic{animation-delay:0s;}
.ledger-row:nth-child(2) .sol-ic{animation-delay:.4s;}
.ledger-row:nth-child(3) .sol-ic{animation-delay:.8s;}
.ledger-row:nth-child(4) .sol-ic{animation-delay:1.2s;}
.ledger-row:nth-child(5) .sol-ic{animation-delay:1.6s;}
.ledger-row:nth-child(6) .sol-ic{animation-delay:2s;}
@keyframes solIconWave{
  0%,88%,100%{background:rgba(63,192,174,0.22);border-color:rgba(63,192,174,0.4);transform:scale(1);}
  4%{background:var(--teal-500);border-color:var(--teal-500);transform:scale(1.12);}
  10%{background:rgba(63,192,174,0.22);border-color:rgba(63,192,174,0.4);transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){.ledger-check.sol-ic{animation:none !important;}}
.ledger-payer{font-size:0.92rem;color:var(--ink);}
.ledger-amount{font-family:var(--font-display);font-size:0.95rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy-900);}
.ledger-foot{
  margin-top:10px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:0.76rem;color:var(--ink-soft);
}
.ledger-foot strong{color:var(--teal-600);font-weight:600;}

/* --- Animated income-trend line chart, sits above the payer rows
   in the hero widget: drawn stroke + gradient fill + a dot that
   travels continuously along the line once drawing finishes --- */
.ledger-chart{position:relative;margin-bottom:10px;}
.lc-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:0.74rem;color:var(--ink-soft);margin-bottom:8px;position:relative;
}
.lc-head strong{color:var(--teal-600);font-weight:600;font-size:0.78rem;}
.lc-svg{width:100%;height:46px;display:block;position:relative;}
.lc-line{
  fill:none;stroke:var(--teal-400);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;
  transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1);
}
.ledger-card.chart-drawn .lc-line,.imac-mock-content.chart-drawn .lc-line{stroke-dashoffset:0;}
.lc-fill{opacity:0;transition:opacity 1s ease .5s;}
.ledger-card.chart-drawn .lc-fill,.imac-mock-content.chart-drawn .lc-fill{opacity:1;}
.lc-dot{opacity:0;transition:opacity .3s ease;}
.ledger-card.chart-drawn .lc-dot,.imac-mock-content.chart-drawn .lc-dot{opacity:1;}

/* =========================================================
   Stat strip — modern icon+counter cards on the dark band
   ========================================================= */
.stat-strip .container{padding:34px var(--gutter);}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.stat{
  padding:22px 18px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
  background:var(--navy-800);
  position:relative;
  overflow:hidden;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-brand);opacity:0.9;
}
.stat:hover{background:#124038;border-color:rgba(63,192,174,0.5);transform:translateY(-3px);}
.stat .mark{
  color:var(--teal-400);margin-bottom:12px;
  width:40px;height:40px;border-radius:10px;
  background:rgba(63,192,174,0.14);
  display:flex;align-items:center;justify-content:center;
}
.stat .mark svg{width:24px;height:24px;}
.stat .num{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums;}
.stat .cap{font-size:0.84rem;color:rgba(255,255,255,0.6);margin-top:2px;}
@media (max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Section headings
   ========================================================= */
.section-head{max-width:920px;margin-bottom:32px;}
.section-head h2{font-size:clamp(1.5rem,2.4vw,1.9rem);white-space:normal;}
.section-head p{color:var(--ink-soft);font-size:1.02rem;}
.section-head p.kicker{font-size:0.8rem;color:var(--teal-600);}
.section-head.center p{margin-left:auto;margin-right:auto;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .kicker{justify-content:center;}
.section-head.center .kicker::before{display:none;}

/* =========================================================
   Ledger list (replaces generic card grid) — used for
   "who we serve" and "why it matters"
   ========================================================= */
.ledger-list{border-top:1px solid var(--line);}
.ledger-list-item{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.ledger-list-item .mark{color:var(--teal-600);}
.ledger-list-item h3{font-size:1.08rem;margin-bottom:6px;}
.ledger-list-item p{color:var(--ink-soft);font-size:0.96rem;margin-bottom:0;}

/* =========================================================
   Bullet list — minimalist, no card borders. Structurally
   different from the grid, not just a recoloured version of it.
   ========================================================= */
.bullet-list{list-style:none;margin:0;padding:0;}
.bullet-list li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);}
.bullet-list li:first-child{padding-top:0;}
.bullet-list li:last-child{border-bottom:0;}
.bl-bullet{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--teal-500);color:var(--white);
  display:flex;align-items:center;justify-content:center;margin-top:3px;
}
.bl-bullet svg{width:14px;height:14px;}
.bullet-list h3{font-size:1rem;margin-bottom:2px;display:inline;}
.bullet-list p{color:var(--ink-soft);font-size:0.92rem;margin:3px 0 0;}
.section-dark .bullet-list li{border-color:rgba(255,255,255,0.14);}
.section-dark .bullet-list h3{color:var(--white);}
.section-dark .bullet-list p{color:rgba(255,255,255,0.65);}

/* Icon bullet list — same structure as bullet-list, but each item
   carries its own themed icon in a chip instead of a generic
   checkmark, for when the icon itself carries meaning. */
.icon-bullet-list{list-style:none;margin:0;padding:0;}
.icon-bullet-list li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);}
.icon-bullet-list li:first-child{padding-top:0;}
.icon-bullet-list li:last-child{border-bottom:0;}
.ibl-icon{
  flex:none;width:46px;height:46px;border-radius:13px;
  background:var(--mint-100);color:var(--teal-600);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  animation:iblPulse 4.8s ease-in-out infinite;
}
.icon-bullet-list li:nth-child(1) .ibl-icon{animation-delay:0s;}
.icon-bullet-list li:nth-child(2) .ibl-icon{animation-delay:.5s;}
.icon-bullet-list li:nth-child(3) .ibl-icon{animation-delay:1s;}
.icon-bullet-list li:nth-child(4) .ibl-icon{animation-delay:1.5s;}
.icon-bullet-list li:nth-child(5) .ibl-icon{animation-delay:2s;}
.icon-bullet-list li:nth-child(6) .ibl-icon{animation-delay:2.5s;}
@keyframes iblPulse{
  0%,88%,100%{background:var(--mint-100);color:var(--teal-600);transform:scale(1);}
  4%{background:var(--teal-500);color:var(--white);transform:scale(1.12);}
  10%{background:var(--mint-100);color:var(--teal-600);transform:scale(1);}
}
.section-dark .ibl-icon{animation-name:iblPulseDark;}
@keyframes iblPulseDark{
  0%,88%,100%{background:rgba(255,255,255,0.1);color:var(--teal-400);transform:scale(1);}
  4%{background:var(--teal-500);color:var(--white);transform:scale(1.12);}
  10%{background:rgba(255,255,255,0.1);color:var(--teal-400);transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){.ibl-icon{animation:none !important;}}
.ibl-icon svg{width:26px;height:26px;}
.icon-bullet-list h3{font-size:1rem;margin-bottom:2px;}
.icon-bullet-list p{color:var(--ink-soft);font-size:0.92rem;margin:0;}
.section-dark .icon-bullet-list li{border-color:rgba(255,255,255,0.14);}
.section-dark .icon-bullet-list h3{color:var(--white);}
.section-dark .icon-bullet-list p{color:rgba(255,255,255,0.65);}
.section-dark .ibl-icon{background:rgba(255,255,255,0.1);color:var(--teal-400);}

/* Check-list — a single-line-per-item modern bullet style, used
   wherever a plain browser <ul><li> list would otherwise appear
   (feature lists under an intro paragraph, etc.) */
.check-list{list-style:none;margin:18px 0 0;padding:0;}
.check-list li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;color:var(--ink-soft);font-size:0.96rem;}
.cl-bullet{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:var(--mint-100);color:var(--teal-600);
  display:flex;align-items:center;justify-content:center;
}
.cl-bullet svg{width:12px;height:12px;}
.section-dark .check-list li{color:rgba(255,255,255,0.68);}
.section-dark .cl-bullet{background:rgba(255,255,255,0.1);color:var(--teal-400);}

/* =========================================================
   Row list — full-width horizontal rows with a filled circular
   icon. A third distinct structure alongside the grid and the
   bullet list, for genuine layout variety across the homepage.
   ========================================================= */
.row-list{border-top:1px solid var(--line);}
.rl-item{
  display:flex;align-items:center;gap:16px;
  padding:16px 6px;border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.rl-item:hover{background:var(--mint-50);}
.rl-icon{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--navy-900);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.rl-icon svg{width:26px;height:26px;}
.rl-text h3{font-size:1rem;margin-bottom:2px;}
.rl-text p{color:var(--ink-soft);font-size:0.9rem;margin:0;}
.section-dark .row-list{border-color:rgba(255,255,255,0.14);}
.section-dark .rl-item{border-color:rgba(255,255,255,0.14);}
.section-dark .rl-item:hover{background:rgba(255,255,255,0.05);}
.section-dark .rl-icon{background:var(--teal-500);}
.section-dark .rl-text h3{color:var(--white);}
.section-dark .rl-text p{color:rgba(255,255,255,0.65);}

/* =========================================================
   Ledger grid — card grid replacing tall vertical lists,
   used for Who We Serve / Why It Matters / Solutions preview
   ========================================================= */
.ledger-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.g-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 24px;
  display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.g-item:hover{
  transform:translateY(-4px);
  border-color:var(--teal-500);
  box-shadow:0 16px 36px -20px rgba(16,31,54,0.25);
}
.g-item .mark{color:var(--teal-600);}
.g-item h3{font-size:1.02rem;margin-bottom:2px;}
.g-item p{font-size:0.92rem;color:var(--ink-soft);margin-bottom:0;}
.g-bar{width:30px;height:3px;background:var(--teal-500);border-radius:2px;}
@media (max-width:900px){ .ledger-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .ledger-grid{grid-template-columns:1fr;} }

/* Grids inside a half-width split column: 2 columns from the start,
   since 3-across is cramped regardless of viewport width */
.ledger-grid--2col{grid-template-columns:repeat(2,1fr);}
@media (max-width:480px){ .ledger-grid--2col{grid-template-columns:1fr;} }

/* =========================================================
   Process / flow widget — used on Home + Solutions
   ========================================================= */
.flow-card{
  background:var(--navy-900);color:var(--white);
  border-radius:var(--radius-md);
  padding:24px 24px;
  position:relative;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(16,31,54,0.55);
}
.flow-card::before{content:"";position:absolute;inset:0;background:var(--grad-brand);opacity:0.14;pointer-events:none;}
.flow-card .label{font-size:0.78rem;color:rgba(255,255,255,0.6);margin-bottom:10px;position:relative;}
.flow-note{font-size:0.88rem;line-height:1.5;color:rgba(255,255,255,0.7);position:relative;margin-bottom:24px;max-width:42ch;}
.flow-steps{display:flex;justify-content:space-between;position:relative;gap:6px;}
.flow-steps::before{
  content:"";position:absolute;top:17px;left:17px;right:17px;height:1px;
  background:rgba(255,255,255,0.16);
}
.flow-track{
  content:"";position:absolute;top:17px;left:17px;height:2px;
  background:var(--teal-400);width:0%;
  transition:width 1.6s cubic-bezier(.4,0,.2,1);
}
.flow-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;text-align:center;}
.flow-dot{
  width:36px;height:36px;border-radius:50%;background:var(--navy-800);
  border:1.5px solid rgba(255,255,255,0.24);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.55);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
  position:relative;z-index:1;
}
.flow-dot svg{width:22px;height:22px;}
.flow-step.is-active .flow-dot{background:var(--teal-500);border-color:var(--teal-400);color:var(--white);}
.flow-step.is-active .flow-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--teal-400);opacity:0;
  animation:flowPulse 1.8s ease-out infinite;
}
@keyframes flowPulse{
  0%{transform:scale(1);opacity:.65;}
  100%{transform:scale(1.7);opacity:0;}
}
.section-dark .flow-step.is-active .flow-dot::after{border-color:var(--teal-500);}
.flow-step span.f-label{font-size:0.78rem;color:rgba(255,255,255,0.72);max-width:11ch;}
.flow-step.is-active span.f-label{color:var(--white);font-weight:600;}

/* =========================================================
   Cycling highlight widget — Who We Serve
   ========================================================= */
.cycle-card{
  background:var(--navy-900);color:var(--white);
  border-radius:var(--radius-md);
  padding:26px 24px;position:relative;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(16,31,54,0.55);
  min-height:230px;display:flex;flex-direction:column;justify-content:space-between;
}
.cycle-card::before{content:"";position:absolute;inset:0;background:var(--grad-brand);opacity:0.14;pointer-events:none;}
.cycle-card::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 100% 0%, rgba(0,0,0,0.8), rgba(0,0,0,0) 60%);
  mask-image:radial-gradient(circle at 100% 0%, rgba(0,0,0,0.8), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.cycle-card .label{font-size:0.78rem;color:rgba(255,255,255,0.6);position:relative;display:flex;justify-content:space-between;align-items:center;}
.cycle-count{font-family:var(--font-display);font-weight:600;color:var(--teal-400);font-variant-numeric:tabular-nums;}
.cycle-icons-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px;position:relative;}
.cycle-icons-row .ci{
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.4);
  transition:background .3s ease, color .3s ease, transform .25s ease;
}
.cycle-icons-row .ci svg{width:20px;height:20px;}
.cycle-icons-row .ci.active{background:var(--teal-500);color:var(--white);transform:scale(1.12);}
.cycle-stage{position:relative;display:flex;align-items:center;gap:16px;margin:0 0 16px;min-height:64px;}
.cycle-mark-lg{
  flex:none;width:52px;height:52px;border-radius:14px;
  background:rgba(63,192,174,0.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal-400);
  position:relative;
}
.cycle-mark-lg::after{
  content:"";position:absolute;inset:-5px;border-radius:18px;
  border:1.5px solid rgba(63,192,174,0.5);
  animation:flowPulse 2.2s ease-out infinite;
}
.cycle-mark-lg svg{width:30px;height:30px;position:relative;}
.cycle-stage h3{color:var(--white);font-size:1.1rem;margin-bottom:4px;transition:opacity .3s ease;}
.cycle-stage p{color:rgba(255,255,255,0.68);font-size:0.88rem;margin:0;transition:opacity .3s ease;}
.cycle-progress{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,0.12);overflow:hidden;}
.cycle-progress-fill{height:100%;background:var(--teal-400);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1);}
.section-dark .cycle-card::after{
  background-image:radial-gradient(circle, rgba(16,31,54,0.06) 1px, transparent 1.4px);
}

/* =========================================================
   Impact / stat trio widget — Home "why it matters"
   ========================================================= */
.impact-card{
  background:var(--white);color:var(--ink);
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:24px 24px;position:relative;overflow:hidden;
  box-shadow:0 8px 24px -16px rgba(16,31,54,0.14);
}
.impact-card::before{content:"";position:absolute;inset:0;background:var(--grad-brand);opacity:0.03;pointer-events:none;}
.impact-card .label{font-size:0.78rem;color:var(--ink-soft);margin-bottom:18px;position:relative;}
.impact-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);position:relative;}
.impact-row:last-child{border-bottom:0;}
.impact-row .i-mark{
  flex:none;color:var(--teal-600);
  width:44px;height:44px;border-radius:12px;
  background:rgba(63,192,174,0.14);
  display:flex;align-items:center;justify-content:center;
  animation:impactIconWave 5.4s ease-in-out infinite;
}
.impact-row:nth-child(3) .i-mark{animation-delay:0s;}
.impact-row:nth-child(4) .i-mark{animation-delay:.45s;}
.impact-row:nth-child(5) .i-mark{animation-delay:.9s;}
@keyframes impactIconWave{
  0%,88%,100%{background:rgba(63,192,174,0.14);transform:scale(1);}
  4%{background:var(--teal-500);transform:scale(1.1);}
  10%{background:rgba(63,192,174,0.14);transform:scale(1);}
}
.impact-row .i-mark svg{width:24px;height:24px;}
.impact-row .i-num{flex:none;min-width:58px;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--teal-600);font-variant-numeric:tabular-nums;}
.impact-row .i-cap{flex:1;font-size:0.86rem;color:var(--ink-soft);text-align:left;}
@media (prefers-reduced-motion: reduce){.impact-row .i-mark{animation:none !important;}}

/* --- Donut ring, the primary stat gets a real animated chart
   instead of just another text row --- */
.impact-donut-row{
  display:flex;align-items:center;gap:16px;
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.1);position:relative;
}
.impact-donut{position:relative;flex:none;width:70px;height:70px;}
.impact-donut svg{width:100%;height:100%;transform:rotate(-90deg);}
.id-track{fill:none;stroke:var(--line);stroke-width:7;}
.id-fill{
  fill:none;stroke:var(--teal-400);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:188.5;stroke-dashoffset:188.5;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .2s;
}
.impact-card.chart-drawn .id-fill{stroke-dashoffset:var(--id-offset, 5.6);}
.impact-donut-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--navy-900);
}
.impact-donut-cap{flex:1;font-size:0.9rem;color:var(--ink-soft);}

/* =========================================================
   Fragments diagram — "the problem" (About page). A compact
   dark analytics-style screen (same panel language as the hero
   iMac widget and the POS terminal elsewhere on the site) with
   income sources shown as small icon circles in a row, joined
   by a dashed — not solid — connector. Each icon's status dot
   pulses on its own independent rhythm. Broken line + async
   pulse together represent sources that aren't really talking
   to each other, the deliberate visual opposite of the site's
   pipeline/backbone diagrams, where a solid line and one
   coordinated pulse represent a genuinely connected system.
   ========================================================= */
.frag-screen{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 0 34px;
  max-width:520px;margin:0 auto;
  box-shadow:0 20px 44px -20px rgba(16,31,54,0.16);
  overflow:hidden;
}
.frag-bar{display:flex;align-items:center;gap:6px;padding:14px 18px;background:var(--mint-50);border-bottom:1px solid var(--line);}
.frag-bar span{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.frag-caption{padding:22px 26px 4px;font-size:0.82rem;letter-spacing:0.03em;color:var(--ink-soft);text-transform:uppercase;}
.frag-wrap{position:relative;width:100%;padding:10px 20px 0;}
.frag-wrap svg{display:block;width:100%;height:auto;overflow:visible;}
.frag-node{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.frag-wrap.in-view .frag-node{opacity:1;transform:translateY(0);}
.frag-connector{stroke:var(--line-strong);stroke-width:2;stroke-dasharray:4 7;}
.frag-chip{stroke:none;}
.frag-chip--a1{fill:var(--teal-500);}
.frag-chip--a2{fill:var(--teal-600);}
.frag-chip--a3{fill:var(--navy-900);}
.frag-chip--a4{fill:#2bb6a3;}
.frag-icon{color:var(--white);stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.frag-label{font-family:var(--font-display);font-size:14px;font-weight:700;fill:var(--navy-900);}
.frag-status{fill:var(--teal-500);opacity:0.3;}
.frag-wrap.in-view .frag-status{animation:fragPulse var(--dur, 3s) ease-in-out infinite;}
@keyframes fragPulse{
  0%,100%{opacity:0.25;r:5;}
  50%{opacity:1;r:6.5;}
}
@media (prefers-reduced-motion: reduce){.frag-wrap.in-view .frag-status{animation:none !important;opacity:0.7;}}

/* =========================================================
   Backbone diagram — vertical spine illustration (About page).
   Deliberately not a hub-and-spoke pattern: a straight line that
   draws downward, nodes fading in in sequence, an ambient dot
   travelling the line — reads as "backbone", not "ecosystem".
   ========================================================= */
.bb-wrap{position:relative;max-width:360px;margin:0 auto;padding:4px 0;}
@media (max-width:700px){.bb-wrap{margin-left:0;margin-right:0;}}
.bb-line{position:absolute;left:20px;top:20px;bottom:20px;width:2px;background:var(--line);}
.bb-line::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  background:var(--teal-500);transform-origin:top;transform:scaleY(0);
  transition:transform 1.6s ease-out;
}
.bb-wrap.in-view .bb-line::after{transform:scaleY(1);}
.bb-dot{
  position:absolute;left:15px;top:20px;width:12px;height:12px;
  border-radius:50%;background:var(--teal-400);opacity:0;
}
.bb-wrap.in-view .bb-dot{animation:bbDotTravel 3.4s ease-in-out infinite 1.7s;}
@keyframes bbDotTravel{
  0%{top:20px;opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{top:calc(100% - 32px);opacity:0;}
}
.bb-node{
  position:relative;margin-bottom:32px;
  opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.bb-node:last-child{margin-bottom:0;}
.bb-wrap.in-view .bb-node{opacity:1;transform:translateX(0);}
.bb-node-row{display:flex;align-items:center;gap:16px;}
.bb-node-ic{
  position:relative;z-index:1;flex:none;
  width:42px;height:42px;border-radius:50%;
  background:var(--navy-900);color:var(--teal-400);
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--white);box-shadow:0 0 0 2px var(--teal-500);
  animation:bbIconPulse 4.8s ease-in-out infinite;
}
.bb-node:nth-child(2) .bb-node-ic{animation-delay:.5s;}
.bb-node:nth-child(3) .bb-node-ic{animation-delay:1s;}
.bb-node:nth-child(4) .bb-node-ic{animation-delay:1.5s;}
@keyframes bbIconPulse{
  0%,88%,100%{box-shadow:0 0 0 2px var(--teal-500);}
  4%{box-shadow:0 0 0 5px var(--teal-500);}
  10%{box-shadow:0 0 0 2px var(--teal-500);}
}
.bb-node-ic svg{width:19px;height:19px;}
.bb-node-title{font-family:var(--font-display);font-size:0.95rem;font-weight:600;color:var(--navy-900);}
.bb-node-sub{font-size:0.78rem;color:var(--ink-soft);margin-top:1px;}
.section-dark .bb-node-title{color:var(--white);}
.section-dark .bb-node-sub{color:rgba(255,255,255,0.65);}
.section-dark .bb-line{background:rgba(255,255,255,0.18);}
.section-dark .bb-node-ic{border-color:var(--navy-900);}
@media (prefers-reduced-motion: reduce){.bb-dot,.bb-node-ic{animation:none !important;}}

/* =========================================================
   Ecosystem diagram — branded illustration (About page)
   ========================================================= */
.eco-wrap{position:relative;width:100%;}
.eco-wrap svg{display:block;width:100%;height:auto;overflow:visible;}
.eco-line{fill:none;stroke:var(--teal-500);stroke-width:1.4;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);}
.eco-wrap.in-view .eco-line{stroke-dashoffset:0;}
.eco-wrap.in-view .eco-line.e2{transition-delay:.12s;}
.eco-wrap.in-view .eco-line.e3{transition-delay:.24s;}
.eco-wrap.in-view .eco-line.e4{transition-delay:.36s;}
.eco-outer{fill:var(--white);stroke:var(--line-strong);stroke-width:1.4;filter:drop-shadow(0 6px 14px rgba(16,31,54,0.08));transition:stroke .4s ease;}
.eco-wrap.in-view .eco-outer{stroke:var(--teal-500);}
.eco-icon{color:var(--teal-600);stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.eco-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;fill:var(--ink-soft);}
.eco-center{fill:var(--navy-900);stroke:var(--navy-900);stroke-width:1.6;}
.eco-center-dot{fill:var(--teal-400);opacity:0;transition:opacity .4s ease .5s;}
.eco-wrap.in-view .eco-center-dot{opacity:1;}
.eco-icon-wrap{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);}
.eco-wrap.in-view .eco-icon-wrap{opacity:1;transform:scale(1);}
.eco-wrap.in-view .eco-icon-wrap.ic2{transition-delay:.12s;}
.eco-wrap.in-view .eco-icon-wrap.ic3{transition-delay:.24s;}
.eco-wrap.in-view .eco-icon-wrap.ic4{transition-delay:.36s;}
.eco-wrap.in-view .eco-icon-wrap{animation:ecoBreathe 3.4s ease-in-out infinite;}
.eco-wrap.in-view .eco-icon-wrap.ic1{animation-delay:.6s;}
.eco-wrap.in-view .eco-icon-wrap.ic2{animation-delay:1.4s;}
.eco-wrap.in-view .eco-icon-wrap.ic3{animation-delay:2.2s;}
.eco-wrap.in-view .eco-icon-wrap.ic4{animation-delay:3s;}
@keyframes ecoBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@media (prefers-reduced-motion: reduce){.eco-icon-wrap{animation:none !important;}}

/* =========================================================
   Payment widget — animated POS terminal illustration, used
   anywhere a "card payment terminal" photo would otherwise go
   ========================================================= */
.pos-widget{position:relative;width:220px;height:300px;max-width:100%;margin:0 auto;}
.pos-body{
  position:absolute;left:40px;top:70px;width:140px;height:210px;
  background:#e8ede9;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -14px rgba(16,31,54,0.5);
}
.pos-body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.5),rgba(255,255,255,0) 40%);}
.pos-teal{position:absolute;inset:0;clip-path:polygon(0 62%, 100% 46%, 100% 100%, 0 100%);background:linear-gradient(160deg,#2bb6a3,var(--teal-600));}
.pos-slot{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:36px;height:6px;border-radius:3px;background:#071510;}
.pos-screen{
  position:absolute;left:14px;top:26px;width:112px;height:64px;
  background:#071510;border-radius:6px;border:1px solid rgba(63,192,174,0.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pos-amount{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--white);}
.pos-confirm{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  opacity:0;animation:posConfirm 3.4s ease-in-out infinite;
}
.pos-confirm .tick{
  width:11px;height:11px;border-radius:50%;background:var(--teal-400);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.pos-confirm .tick svg{width:7px;height:7px;color:#071510;}
.pos-confirm span{font-size:0.5rem;color:var(--teal-400);}
@keyframes posConfirm{0%,32%{opacity:0;}40%,92%{opacity:1;}100%{opacity:0;}}
.pos-keypad{position:absolute;left:14px;top:100px;width:112px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;z-index:2;}
.pos-key{height:15px;border-radius:4px;background:#c7d3cd;}
.pos-key.alt{background:#b6c5bd;}
.pos-key.wide{grid-column:span 2;}
.pos-key.enter{background:#f4d98a;}
.pos-brand{position:absolute;left:14px;bottom:12px;font-family:var(--font-display);font-size:0.56rem;font-weight:600;letter-spacing:.04em;color:rgba(8,17,31,0.55);z-index:2;}
.pos-card{
  position:absolute;left:75px;top:0;width:78px;height:48px;border-radius:9px;
  background:linear-gradient(135deg,#4fd0bd,var(--teal-600));overflow:hidden;
  animation:posTap 3.4s ease-in-out infinite;
  box-shadow:0 10px 18px -8px rgba(34,165,151,0.5);z-index:3;
}
.pos-card-sheen{position:absolute;top:-20px;left:-30px;width:60px;height:110px;background:rgba(255,255,255,0.18);transform:rotate(25deg);}
.pos-card-chip{position:absolute;left:10px;top:10px;width:14px;height:11px;border-radius:2px;background:linear-gradient(135deg,#fbe6ab,#e0b95c);}
.pos-card-stripe{position:absolute;left:10px;bottom:9px;width:44px;height:5px;border-radius:2px;background:rgba(255,255,255,0.6);}
@keyframes posTap{
  0%,10%{transform:translateY(0);}
  22%,34%{transform:translateY(62px);}
  46%,100%{transform:translateY(0);}
}
.pos-ring{
  position:absolute;left:114px;top:62px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;border:1.5px solid var(--teal-400);opacity:0;z-index:2;
}
.pos-ring.r1{animation:posRing 3.4s ease-out infinite;}
.pos-ring.r2{animation:posRing 3.4s ease-out infinite;animation-delay:.25s;}
@keyframes posRing{
  0%,20%{opacity:0;transform:scale(1);}
  26%{opacity:.8;transform:scale(1);}
  46%{opacity:0;transform:scale(6);}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .pos-card,.pos-ring,.pos-confirm{animation:none !important;}
  .pos-confirm{opacity:1;}
}

/* =========================================================
   Specialities showcase — animated illustration used in place
   of a generic clinician photo (Home "Who We Serve" preview)
   ========================================================= */
.spec-showcase{display:flex;flex-direction:column;align-items:center;gap:24px;}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:340px;width:100%;}
.spec-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px;border-radius:14px;background:var(--mint-100);
  animation:specTileWave 4.9s ease-in-out infinite;
}
.spec-tile-ic{
  width:50px;height:50px;border-radius:14px;background:var(--white);
  display:flex;align-items:center;justify-content:center;color:var(--teal-600);
  animation:specIconWave 4.9s ease-in-out infinite;
}
.spec-tile-ic svg{width:26px;height:26px;}
.spec-tile-label{font-size:0.72rem;font-weight:500;color:var(--ink);text-align:center;}
@keyframes specTileWave{
  0%,86%,100%{background:var(--mint-100);transform:translateY(0);}
  6%{background:var(--teal-500);transform:translateY(-4px);}
  12%{background:var(--mint-100);transform:translateY(0);}
}
@keyframes specIconWave{
  0%,86%,100%{color:var(--teal-600);}
  6%{color:var(--teal-500);}
  12%{color:var(--teal-600);}
}
.spec-status{
  background:var(--navy-900);border-radius:var(--radius-md);
  padding:12px 22px;display:flex;align-items:center;gap:10px;
}
.spec-status span:last-child{font-size:0.82rem;color:var(--white);}
.spec-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-400);flex:none;animation:specBlink 1.6s ease-in-out infinite;}
@keyframes specBlink{0%,100%{opacity:1;}50%{opacity:.4;}}
@media (prefers-reduced-motion: reduce){
  .spec-tile,.spec-tile-ic,.spec-dot{animation:none !important;}
}

/* =========================================================
   Pipeline diagram — branded illustration (Solutions page)
   ========================================================= */
.pipe-wrap{position:relative;width:100%;}
.pipe-wrap svg{display:block;width:100%;height:auto;overflow:visible;}
.pipe-line{fill:none;stroke:var(--line-strong);stroke-width:2;}
.pipe-fill{fill:none;stroke:var(--teal-500);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);}
.pipe-wrap.in-view .pipe-fill{stroke-dashoffset:0;}
.pipe-node{fill:var(--white);stroke:var(--line-strong);stroke-width:1.6;transition:stroke .3s ease, fill .3s ease;}
.pipe-node-group{opacity:0;transform:scale(.5);transform-origin:center;transform-box:fill-box;transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);}
.pipe-wrap.in-view .pipe-node-group{opacity:1;transform:scale(1);}
.pipe-wrap.in-view .pipe-node-group.n1{transition-delay:0s;}
.pipe-wrap.in-view .pipe-node-group.n2{transition-delay:.3s;}
.pipe-wrap.in-view .pipe-node-group.n3{transition-delay:.6s;}
.pipe-wrap.in-view .pipe-node-group.n4{transition-delay:.9s;}
.pipe-wrap.in-view .pipe-node-group.n5{transition-delay:1.2s;}
.pipe-wrap.in-view .pipe-node-group.n1 .pipe-node,
.pipe-wrap.in-view .pipe-node-group.n2 .pipe-node,
.pipe-wrap.in-view .pipe-node-group.n3 .pipe-node,
.pipe-wrap.in-view .pipe-node-group.n4 .pipe-node,
.pipe-wrap.in-view .pipe-node-group.n5 .pipe-node{stroke:var(--teal-500);}
.pipe-icon{color:var(--teal-600);stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.pipe-label{font-family:var(--font-display);font-size:11px;font-weight:600;fill:var(--ink-soft);text-anchor:middle;}
.pipe-dot{fill:var(--teal-400);opacity:0;}
.pipe-wrap.in-view .pipe-dot{opacity:1;animation:pipeTravel 3.4s linear infinite 1.6s;offset-path:path('M30,40 L390,40');}
@keyframes pipeTravel{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@media (prefers-reduced-motion: reduce){.pipe-dot{animation:none !important;opacity:0 !important;}}

/* =========================================================
   Photography
   ========================================================= */
.photo-frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/3;
  position:relative;
}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(16,31,54,0.28), rgba(16,31,54,0) 55%);
}
.photo-caption{
  display:flex;align-items:center;gap:10px;margin-top:14px;font-size:0.86rem;color:var(--ink-soft);
}
.photo-caption .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-500);flex:none;}

/* Quick-facts row — a small pair of icon+stat items that add substance
   to an intro split section without another full widget */
.quick-facts{display:flex;gap:26px;margin:18px 0 4px;flex-wrap:wrap;}
.qf-item{display:flex;align-items:center;gap:10px;}
.qf-item .mark{color:var(--teal-600);flex:none;}
.qf-item .mark svg{width:22px;height:22px;}
.qf-item strong{display:block;font-size:0.92rem;color:var(--navy-900);font-family:var(--font-display);}
.qf-item span{display:block;font-size:0.8rem;color:var(--ink-soft);}
.section-dark .qf-item strong{color:var(--white);}
.section-dark .qf-item span{color:rgba(255,255,255,0.65);}
.section-dark .qf-item .mark{color:var(--teal-400);}

.solution-card{cursor:pointer;}
.solution-card summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:10px;}
.solution-card summary::-webkit-details-marker{display:none;}
.solution-card .s-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.chevron-sm{width:9px;height:9px;border-right:2px solid var(--navy-800);border-bottom:2px solid var(--navy-800);transform:rotate(45deg);transition:transform .2s ease;flex:none;margin-top:6px;}
.solution-card[open] .chevron-sm{transform:rotate(-135deg);}
.sc-body{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:0.9rem;}
.sc-body ul{margin:10px 0 0;padding-left:18px;}
.sc-body li{margin-bottom:6px;}

@media (max-width:700px){
  .flow-steps{flex-direction:column;align-items:flex-start;gap:20px;}
  .flow-steps::before,.flow-track{display:none;}
  .flow-step{flex-direction:row;text-align:left;}
  .flow-step span.f-label{max-width:none;}
}

/* =========================================================
   Solutions accordion rows
   ========================================================= */
.solution-row{
  border-bottom:1px solid var(--line);
}
.solution-row:first-child{border-top:1px solid var(--line);}
.solution-row summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:44px 1fr auto 24px;
  align-items:center;gap:18px;
  padding:24px 0;
}
.solution-row summary::-webkit-details-marker{display:none;}
.solution-row .mark{color:var(--teal-600);}
.solution-row .s-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--navy-900);}
.solution-row .s-tag{font-size:0.92rem;color:var(--ink-soft);display:none;}
.solution-row .chevron{
  width:11px;height:11px;border-right:2px solid var(--navy-800);border-bottom:2px solid var(--navy-800);
  transform:rotate(45deg);transition:transform .2s ease;justify-self:end;
}
.solution-row[open] .chevron{transform:rotate(-135deg);}
.solution-body{padding:0 0 30px 62px;color:var(--ink-soft);}
.solution-body p{margin-bottom:14px;}
.solution-body ul{margin:0;padding-left:18px;}
.solution-body li{margin-bottom:6px;}
@media (min-width:760px){
  .solution-row .s-tag{display:block;}
}

/* =========================================================
   Two column feature blocks (About / Solutions detail)
   ========================================================= */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);
  align-items:center;
}
/* When a kicker + heading open the left-hand column of a split, keep their
   sizing/spacing consistent with standalone section-head headings, and give
   them room before the image/widget that follows in the same column. */
.split h2{font-size:clamp(1.5rem,2.4vw,1.9rem);white-space:normal;margin-bottom:20px;}
.split > .reveal > .kicker,
.split > .reveal > h2{margin-left:0;margin-right:0;}
.split > .reveal > h2 + .photo-frame,
.split > .reveal > h2 + ul,
.split > .reveal > h2 + div{margin-top:4px;}
/* Widgets and photos are centered next to the text column at their own
   natural height — nothing is force-stretched to match the other side. */
.split .photo-frame{
  aspect-ratio:4/3;
  max-height:440px;
  align-self:center;
  width:100%;
}
.split.reverse .split-media{order:2;}
@media (max-width:820px){
  .split{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
  .split .photo-frame{min-height:220px;}
}
@media (max-width:600px){
  .ledger-card,.flow-card,.cycle-card,.impact-card{padding:22px 20px 18px;}
  .cycle-icons-row .ci{width:30px;height:30px;}
  .cycle-mark-lg{width:44px;height:44px;}
  .cycle-mark-lg svg{width:22px;height:22px;}
  .ledger-total{font-size:1.7rem;}
  .flow-steps{gap:14px;}
}
.split-media{
  background:var(--mint-100);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px;
}

/* =========================================================
   Locations list
   ========================================================= */
.loc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.loc-list > div{padding:26px 24px;border-left:1px solid var(--line);}
.loc-list > div:first-child{border-left:0;}
.loc-list h3{font-size:1.05rem;margin-bottom:6px;}
.loc-list p{color:var(--ink-soft);font-size:0.92rem;margin:0;}
@media (max-width:760px){
  .loc-list{grid-template-columns:1fr;}
  .loc-list > div{border-left:0;border-top:1px solid var(--line);}
  .loc-list > div:first-child{border-top:0;}
}

/* =========================================================
   CTA banner
   ========================================================= */
.cta-wrap{border-top:1px solid var(--line);background:var(--mint-50);}
.cta-banner{
  background:var(--navy-900);color:var(--white);
  border-radius:var(--radius-md);
  padding:clamp(36px,5vw,56px);
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-banner::before{content:"";position:absolute;inset:0;background:var(--grad-brand);opacity:0.16;}
.cta-banner h2{color:var(--white);margin-bottom:6px;position:relative;}
.cta-banner p{color:rgba(255,255,255,0.72);margin-bottom:0;position:relative;}
.cta-banner .btn-primary{background:var(--teal-500);position:relative;}
.cta-banner .btn-primary:hover{background:var(--teal-400);}

/* =========================================================
   Forms
   ========================================================= */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr;}
}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:0;}
.form-field.full{grid-column:1 / -1;}
label{font-size:0.86rem;font-weight:600;color:var(--navy-800);}
input,select,textarea{
  font-family:var(--font-body);font-size:0.96rem;
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--white);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--teal-500);}
textarea{resize:vertical;min-height:120px;}
.hp-field{position:absolute;left:-9999px;}
.form-note{font-size:0.82rem;color:var(--ink-soft);margin-top:16px;}
.form-status{margin-top:16px;font-size:0.92rem;font-weight:600;display:none;}
.form-status.ok{display:block;color:var(--teal-600);}
.form-status.err{display:block;color:#b5453b;}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--navy-900);color:rgba(255,255,255,0.75);
  padding:60px 0 30px;
}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:10px;
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand img{height:32px;width:32px;}
.footer-brand-word{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.1rem;}
.site-footer p{color:rgba(255,255,255,0.6);font-size:0.92rem;}
.footer-col h4{color:var(--white);font-size:0.8rem;margin-bottom:14px;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:rgba(255,255,255,0.68);text-decoration:none;font-size:0.92rem;}
.footer-contact{font-size:0.88rem;line-height:1.7;margin-top:14px;}
.footer-contact a{color:rgba(255,255,255,0.75);text-decoration:none;}
.footer-col a:hover{color:var(--teal-400);}
.footer-bottom{
  text-align:center;
  padding-top:0;font-size:0.82rem;color:var(--ink-soft);
}
.footer-bottom .disclaimer{max-width:640px;margin:0 auto;}
.footer-bottom-bar{background:var(--white);border-top:1px solid var(--line);}
.footer-bottom-bar .container{padding-top:18px;padding-bottom:18px;}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* =========================================================
   Page hero (inner pages, no ledger widget)
   ========================================================= */
.page-hero{
  min-height:280px;
  display:flex;align-items:center;
  padding:clamp(56px,8vw,80px) 0 clamp(48px,6.5vw,64px);
  background:var(--navy-900);
  color:rgba(255,255,255,0.82);
  position:relative;
  overflow:hidden;
}
.page-hero > .container{width:100%;}
.page-hero::before{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:320px;height:320px;
  background:radial-gradient(circle, rgba(63,192,174,0.35), rgba(63,192,174,0) 70%);
  filter:blur(6px);
  animation:float-blob 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.page-hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1.4px);
  background-size:28px 28px;
  background-position:-10px -10px;
  -webkit-mask-image:linear-gradient(120deg, rgba(0,0,0,0.9), rgba(0,0,0,0) 65%);
  mask-image:linear-gradient(120deg, rgba(0,0,0,0.9), rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.page-hero .ring{
  position:absolute;
  right:-40px;bottom:-90px;
  width:220px;height:220px;
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:50%;
  pointer-events:none;
}
.page-hero .ring::before{
  content:"";position:absolute;inset:26px;
  border:1.5px solid rgba(63,192,174,0.18);
  border-radius:50%;
}
.page-hero .container{position:relative;}
.page-hero .kicker{color:var(--teal-400);}
.page-hero .kicker::before{background:var(--teal-400);}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3vw,2.5rem);max-width:36ch;line-height:1.18;margin-bottom:0;}
.page-hero .lede{font-size:1.02rem;color:rgba(255,255,255,0.66);max-width:60ch;}

/* =========================================================
   Utility
   ========================================================= */
.mt-0{margin-top:0;}
.text-muted{color:var(--ink-soft);}
.small-caps{font-size:0.8rem;letter-spacing:0.02em;color:var(--teal-600);font-weight:600;}
.divider{height:1px;background:var(--line);border:0;margin:0;}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;
  padding:10px 16px;z-index:100;
}
.skip-link:focus{left:10px;top:10px;}

/* =========================================================
   FAQ accordion — single-open, icon-tag pattern
   ========================================================= */
.faq-acc{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto;}
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--white);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
.faq-item.visible{opacity:1;transform:translateY(0);}
.faq-item.open{border-color:var(--teal-500);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;background:none;border:none;cursor:pointer;text-align:left;
  color:var(--navy-900);transition:background .2s ease;
}
.faq-q:hover{background:var(--mint-50);}
.faq-item.open .faq-q{background:var(--mint-50);}
.faq-q-left{display:flex;align-items:center;gap:13px;min-width:0;}
.faq-q-ic{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:var(--mint-100);color:var(--teal-600);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, transform .25s ease;
}
.faq-q-ic svg{width:23px;height:23px;}
.faq-item.open .faq-q-ic{background:rgba(63,192,174,0.22);transform:scale(1.08);}
.faq-q-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.faq-tag{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-soft);transition:color .25s ease;}
.faq-item.open .faq-tag{color:var(--teal-600);}
.faq-title{font-family:var(--font-display);font-size:0.95rem;font-weight:600;color:var(--navy-900);line-height:1.3;}
.faq-chevron{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--mint-50);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-chevron{background:rgba(63,192,174,0.14);border-color:rgba(63,192,174,0.4);transform:rotate(180deg);}
.faq-chevron svg{width:18px;height:18px;color:var(--ink-soft);}
.faq-item.open .faq-chevron svg{color:var(--teal-600);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1);}
.faq-item.open .faq-a{max-height:260px;}
.faq-a-inner{
  padding:14px 18px 18px 65px;font-size:0.9rem;color:var(--ink-soft);line-height:1.6;
  border-top:1px solid var(--line);margin:0 18px 18px;
}
.section-dark .faq-item{background:var(--navy-800);border-color:rgba(255,255,255,0.16);}
.section-dark .faq-q{color:var(--white);}
.section-dark .faq-q:hover,.section-dark .faq-item.open .faq-q{background:rgba(255,255,255,0.05);}
.section-dark .faq-q-ic{background:rgba(63,192,174,0.16);color:var(--teal-400);}
.section-dark .faq-item.open .faq-q-ic{background:rgba(63,192,174,0.25);}
.section-dark .faq-title{color:var(--white);}
.section-dark .faq-tag{color:rgba(255,255,255,0.55);}
.section-dark .faq-item.open .faq-tag{color:var(--teal-400);}
.section-dark .faq-chevron{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);}
.section-dark .faq-chevron svg{color:rgba(255,255,255,0.6);}
.section-dark .faq-item.open .faq-chevron svg{color:var(--teal-400);}
.section-dark .faq-a-inner{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.14);}
@media (max-width:600px){
  .faq-q{padding:14px;}
  .faq-a-inner{padding-left:18px;}
}

/* Lock background scroll while the mobile menu overlay is open */
body.nav-open{overflow:hidden;}

/* =========================================================
   Legal pages — two-column layout with sticky table of contents
   ========================================================= */
.legal-meta-card{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--mint-50);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:20px 22px;
  margin-bottom:44px;max-width:900px;
}
.legal-meta-card .mark{color:var(--teal-600);flex:none;}
.legal-meta-card strong{display:block;font-family:var(--font-display);color:var(--navy-900);font-size:0.95rem;margin-bottom:4px;}
.legal-meta-card p{color:var(--ink-soft);font-size:0.9rem;margin:0;max-width:60ch;}

.legal-layout{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;}
.legal-toc{position:sticky;top:100px;}
.legal-toc ul{list-style:none;margin:12px 0 20px;padding:0;border-left:2px solid var(--line);}
.legal-toc li{margin:0;}
.legal-toc a{
  display:block;padding:8px 0 8px 16px;margin-left:-2px;
  border-left:2px solid transparent;
  font-size:0.88rem;color:var(--ink-soft);text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.legal-toc a:hover{color:var(--teal-600);border-color:var(--teal-500);}
.legal-toc-cta{
  display:inline-block;font-size:0.86rem;font-weight:600;color:var(--teal-600);
  text-decoration:none;
}
.legal-toc-cta:hover{color:var(--teal-700, var(--teal-600));text-decoration:underline;}

.prose{max-width:70ch;}
.prose h2{font-size:1.2rem;margin-top:2em;scroll-margin-top:100px;}
.prose h2:first-of-type{margin-top:0;}
.prose p,.prose li{color:var(--ink-soft);font-size:0.98rem;max-width:70ch;}
.prose ul{padding-left:20px;margin-bottom:1.4em;}
.prose li{margin-bottom:8px;}

@media (max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:8px;}
  .legal-toc{position:static;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:32px;}
  .legal-toc ul{margin:8px 0 14px;}
}

/* =========================================================
   Desktop icon enlargement — icons were reading as too small
   on larger viewports relative to card size; scale every icon
   chip up further above the tablet breakpoint.
   ========================================================= */
@media (min-width:901px){
  .g-item--chip .mark{width:52px;height:52px;border-radius:13px;}
  .g-item--chip .mark svg{width:30px;height:30px;}
  .ibl-icon{width:56px;height:56px;border-radius:15px;}
  .ibl-icon svg{width:32px;height:32px;}
  .faq-q-ic{width:50px;height:50px;border-radius:13px;}
  .faq-q-ic svg{width:28px;height:28px;}
  .spec-tile-ic{width:58px;height:58px;border-radius:16px;}
  .spec-tile-ic svg{width:32px;height:32px;}
  .bb-node-ic{width:50px;height:50px;}
  .bb-node-ic svg{width:24px;height:24px;}
  .impact-row .i-mark{width:50px;height:50px;border-radius:13px;}
  .impact-row .i-mark svg{width:28px;height:28px;}
  .rl-icon{width:48px;height:48px;}
  .rl-icon svg{width:28px;height:28px;}
}

/* =========================================================
   Blog "coming soon" — centered layout with an animated
   clock (ticking second/minute hands) instead of plain text
   ========================================================= */
.blog-soon{max-width:560px;margin:0 auto;text-align:center;}
.blog-clock{width:120px;height:120px;margin:0 auto 28px;}
.blog-clock svg{width:100%;height:100%;}
.bc-face{fill:var(--mint-100);stroke:var(--teal-500);stroke-width:2;}
.bc-tick{fill:var(--teal-600);}
.bc-hand-min{stroke:var(--navy-900);stroke-width:3;stroke-linecap:round;transform-origin:60px 60px;animation:bcMin 6s linear infinite;}
.bc-hand-hr{stroke:var(--navy-900);stroke-width:3;stroke-linecap:round;transform-origin:60px 60px;animation:bcHr 24s linear infinite;}
.bc-center{fill:var(--teal-600);}
@keyframes bcMin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes bcHr{from{transform:rotate(60deg);}to{transform:rotate(420deg);}}
.blog-soon h2{margin-top:6px;}
.blog-soon p{color:var(--ink-soft);margin:14px 0 26px;}
@media (prefers-reduced-motion: reduce){.bc-hand-min,.bc-hand-hr{animation:none !important;}}

/* Dark variant of the ledger-card — used where the widget needs to
   stay dark regardless of the section's own background (light-on-
   light doesn't read well for this specific "connected system"
   widget on the homepage Solution section). */
.ledger-card--dark{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);}
.ledger-card--dark .ledger-head{border-bottom-color:rgba(255,255,255,0.14);}
.ledger-card--dark .ledger-head .label{color:rgba(255,255,255,0.62);}
.ledger-card--dark .ledger-total{color:var(--white);}
.ledger-card--dark .pulse-badge{background:rgba(63,192,174,0.16);color:var(--teal-400);}
.ledger-card--dark .ledger-row{border-bottom-color:rgba(255,255,255,0.1);}
.ledger-card--dark .ledger-payer{color:rgba(255,255,255,0.88);}
.ledger-card--dark .ledger-amount{color:var(--white);}
.ledger-card--dark .ledger-check{border-color:rgba(255,255,255,0.3);}
.ledger-card--dark .sol-ic{background:rgba(63,192,174,0.18);border-color:rgba(63,192,174,0.35);}

/* =========================================================
   Connect row — "How it connects" section on product pages.
   Two cards in a single row with a connector arrow between
   them, replacing the earlier vertical spine diagram.
   ========================================================= */
.connect-row{display:flex;align-items:stretch;gap:20px;max-width:820px;margin:0 auto;}
.connect-card{
  flex:1;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:28px 26px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.connect-card.is-visible{opacity:1;transform:translateY(0);}
.connect-card .mark{
  width:52px;height:52px;border-radius:14px;
  background:var(--navy-900);color:var(--white);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.connect-card .mark svg{width:28px;height:28px;}
.connect-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--navy-900);margin:0 0 6px;}
.connect-card p{color:var(--ink-soft);font-size:0.92rem;margin:0;}
.connect-explore{display:inline-block;margin-top:14px;color:var(--teal-600);font-weight:600;font-size:0.9rem;text-decoration:none;}
.connect-explore:hover{text-decoration:underline;}
.connect-link{
  flex:none;width:44px;display:flex;align-items:center;justify-content:center;
  color:var(--teal-400);opacity:0;transition:opacity .5s ease .3s;
}
.connect-link.is-visible{opacity:1;}
.connect-link svg{width:36px;height:14px;}
@media (max-width:700px){
  .connect-row{flex-direction:column;}
  .connect-link{width:auto;height:32px;transform:rotate(90deg);}
}