/* ===== Fonts (lifted from superscript.nyc) ===== */
@font-face { font-family: "suisseIntl"; font-weight: 400; src: url("/assets/fonts/SuisseIntl_Regular-s.p.fbe3d914.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "suisseIntl"; font-weight: 600; src: url("/assets/fonts/SuisseIntl_SemiBold-s.p.7dc3bb91.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "suisseIntl"; font-weight: 700; src: url("/assets/fonts/SuisseIntl_Bold-s.p.e242c6e1.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "suisseIntlMono"; font-weight: 400; src: url("/assets/fonts/SuisseIntlMono_Regular-s.p.eca58c1e.otf") format("opentype"); font-display: swap; }

:root {
  --dark: #0c0c13;
  --dark-2: #1a1d2a;
  --blue: #0098ff;
  --blue-deep: #0a63d6;
  --ink: #0b1220;
  --sans: "suisseIntl", "Helvetica Neue", Arial, sans-serif;
  --mono: "suisseIntlMono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0b0b12; color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* One continuous background spanning the whole deck, windowed by scroll.
   Each slide reveals exactly one seventh, so boundaries never seam. */
.deckbg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* 7 slides in this cut (Protocol removed, "Where the money leaks" added): dark (1-3,
     hero + price equation + leakage) -> blue (4-6, eCW product + storefront + scale) ->
     white (7, CTA). Dark->blue is ~13% wide, centred on the 3/7=42.86% boundary.
     Blue->white starts at 74.3%, a fifth of the way into Scale (slide 6 spans
     71.43-85.71%), so the fade is underway through the back half of that slide and
     resolves to solid white exactly at the 6/7=85.71% boundary, letting the CTA slide
     (dark-on-white text) open clean. */
  background: linear-gradient(180deg,
    #0a0a11 0%,
    #0e0f17 12%,
    #171b26 24%,
    #171b26 36.4%,
    #0098ff 49.3%,
    #0098ff 74.3%,
    #ffffff 85.71%,
    #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 100% 700%;
  background-position: 0% 0%;
}
.mono { font-family: var(--mono); }
strong { font-weight: 700; }

/* ===== Deck scaffold ===== */
#deck { position: relative; z-index: 1; height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.slide {
  position: relative; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  padding: clamp(54px, 6vh, 74px) clamp(28px, 4.5vw, 90px) clamp(18px, 3vh, 44px);
}
/* slide canvas: scale a 1280-wide design space down on small screens */
.wrap, .hero, .prod, .store, .team, .pcalc, .scale, .roadmap { width: min(1560px, 100%); }

/* slides are transparent; the continuous .deckbg shows through */
.s-dark { background: transparent; }
.s-product { background: transparent; color: #fff; }
.s-store { background: transparent; }
.s-team { background: transparent; color: #fff; }
.s-cta { background: #fff; color: #0b1220; }
/* Removed the radial "deepening" vignette that used to sit here — it kept reading as a visual
   defect (harsh line / seam / spotty patch) against the deck's clean linear gradient rather than
   a subtle enhancement, across three separate reports. The plain deckbg gradient alone is enough. */
.s-product > * { position: relative; z-index: 1; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.slide.in-view .reveal { opacity: 1; transform: none; }
.slide.in-view .reveal[data-d="1"] { transition-delay: .12s; }
.slide.in-view .reveal[data-d="2"] { transition-delay: .24s; }
.slide.in-view .reveal[data-d="3"] { transition-delay: .36s; }
.slide.in-view .reveal[data-d="4"] { transition-delay: .48s; }
.slide.in-view .reveal[data-d="5"] { transition-delay: .6s; }

/* ===== 01 — Hero ===== */
.waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero { position: relative; z-index: 2; align-self: flex-end; margin-bottom: 4vh; }
.hero__title { font-weight: 400; font-size: clamp(28px, 3.6vw, 60px); line-height: 1.06; letter-spacing: -.01em; }
.wordmark { display: block; height: clamp(30px, 4vw, 56px); width: auto; margin-top: 16px; filter: brightness(0) invert(1); }
/* fixed header brand mark, white on any slide */
.siteheader { position: fixed; top: 20px; left: 24px; height: 20px; width: auto; z-index: 45; filter: brightness(0) invert(1); pointer-events: none; transition: filter .3s ease; }
.siteheader.on-light { filter: none; }
.hero__foot { position: absolute; z-index: 2; right: clamp(28px,4.5vw,90px); bottom: clamp(28px,4.5vw,90px); text-align: right; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.7); }
.hero__foot span { color: rgba(255,255,255,.4); }

/* ===== Shared title ===== */
.title { font-weight: 400; letter-spacing: -.015em; line-height: 1.04; }
/* every section title carries a hanging blue bullet so the text stays flush-left */
.title { position: relative; }
.dot { color: var(--blue); }
.title .dot { position: absolute; left: -.62em; }

/* ===== 02 — ABE/AIR/ART ===== */
.wrap .title { font-size: clamp(24px, 3vw, 50px); max-width: 20ch; }
.s-dark .wrap .title { max-width: none; }
.sub { color: rgba(255,255,255,.7); font-size: clamp(14px, 1.25vw, 21px); line-height: 1.6; margin-top: 18px; }
.engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 64px); margin-top: clamp(20px, 3vh, 40px); }
.evis { height: clamp(260px, 33vh, 340px); margin-bottom: clamp(20px, 3vh, 32px); display: flex; min-width: 0; }
.engine__h { font-size: clamp(14px, 1.25vw, 19px); font-weight: 600; }
.engine__h span { font-weight: 400; }
.engine__h--blue, .engine__lead--blue { color: #fff; }
.engine__lead { font-size: clamp(15px, 1.3vw, 21px); line-height: 1.36; margin-top: 10px; min-height: 2.72em; }
.engine__lead.tw-active::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -.15em; animation: caret .8s step-end infinite; }
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.engine__body { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.55; color: rgba(255,255,255,.62); margin-top: 13px; }

/* ===== 02b — Engine visuals: numbered, bracket-cornered diagram boxes, each engine an animated icon ===== */
.ebox { width: 100%; height: 100%; display: flex; flex-direction: column; min-width: 0; }
.ebox__top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .05em; margin-bottom: 8px; }
.ebox__no { color: rgba(255,255,255,.35); }
.ebox__tag { color: var(--blue); font-weight: 600; }
/* container-type:size makes cqi/cqb below track THIS box's actual rendered
   width/height, not the viewport — so the diagrams inside scale with the
   frame itself (a 480px frame vs a 300px frame get proportionally different
   text/spacing) instead of clustering at one fixed intrinsic size and
   leaving empty space in a larger box. */
.ebox__frame { position: relative; flex: 1; min-height: 0; min-width: 0; border: 1px dashed rgba(0,152,255,.45); border-radius: 2px; background: rgba(0,152,255,.03); display: flex; align-items: center; justify-content: center; overflow: hidden; container-type: size; container-name: ebox; }
.corner { position: absolute; width: 9px; height: 9px; }
.corner.tl { top: -1px; left: -1px; border-top: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.corner.tr { top: -1px; right: -1px; border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.corner.bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.corner.br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.ebox__cap { margin-top: 11px; font-size: clamp(11px, 1vw, 13px); letter-spacing: .03em; color: var(--blue); text-align: left; line-height: 1.4; min-height: 4.2em; }

/* Shared isometric claim-card stack, reused by ABE (fanned by payer) and ART (feedback loop) */
.cardstack--sm { position: relative; width: 34px; height: 24px; flex-shrink: 0; }
.cardstack--sm .cs { position: absolute; inset: 0; border: 1px solid; border-radius: 3px; background: rgba(255,255,255,.04); }
.cardstack--sm .cs:nth-child(1) { transform: perspective(400px) rotateX(50deg) rotateZ(-30deg) translate(0,0); }
.cardstack--sm .cs:nth-child(2) { transform: perspective(400px) rotateX(50deg) rotateZ(-30deg) translate(2px,2px); opacity: .75; }
.cardstack--sm .cs:nth-child(3) { transform: perspective(400px) rotateX(50deg) rotateZ(-30deg) translate(4px,4px); opacity: .5; }
.cardstack--sm .cs:nth-child(4) { transform: perspective(400px) rotateX(50deg) rotateZ(-30deg) translate(6px,6px); opacity: .3; }
.cardstack--sm { animation: stackGlow 2.4s ease-in-out infinite; transform-origin: 40% 40%; }
@keyframes stackGlow { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(2); transform: scale(1.16); } }
.cardstack--purple .cs { border-color: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,.3); }
.cardstack--blue .cs { border-color: var(--blue); box-shadow: 0 0 8px rgba(0,152,255,.3); }
.cardstack--green .cs { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.3); }

/* ABE: raw claims sorted and fanned out by payer, converging on a negotiated rate per payer — abbreviated from AbeSequence.tsx's stack→sort→fan beats */
/* fr side-columns stretch to fill the frame's full width (cqi) instead of
   snapping to content size and leaving whitespace at the box edges. */
.abefan { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24px, 9cqi) minmax(0, 1fr); align-items: center; align-content: center; justify-content: center; gap: clamp(10px, 3.2cqi, 22px); width: 100%; height: 100%; min-width: 0; padding: clamp(12px, 4cqi, 26px); overflow-x: auto; }
.abefan__src { grid-column: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.8cqi, 10px); }
.abefan__srclbl { font-size: clamp(8px, 2.4cqi, 11px); letter-spacing: .06em; color: rgba(255,255,255,.5); white-space: nowrap; }
/* JS (wireConnector) computes exact x1/y1/x2/y2 + viewBox from real element
   positions, so this just needs to overlay the full container at any size. */
.abefan__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.abefan__lines line { stroke: rgba(0,152,255,.7); stroke-width: 1.4; stroke-dasharray: 3 3; animation: lineFlow .7s linear infinite; }
.abefan__lines line:nth-child(1) { animation-delay: 0s; }
.abefan__lines line:nth-child(2) { animation-delay: .8s; }
.abefan__lines line:nth-child(3) { animation-delay: 1.6s; }
.abefan__rows { grid-column: 3; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); }
.abefan__row { position: relative; display: flex; align-items: center; gap: 14px; opacity: 0; animation: fanRowIn .6s ease forwards, rowFlash 2.4s ease-in-out infinite; border-radius: 6px; padding: 2px 10px 2px 2px; }
.abefan__row:nth-child(1) { animation-delay: .1s, 0s; } .abefan__row:nth-child(2) { animation-delay: .3s, .8s; } .abefan__row:nth-child(3) { animation-delay: .5s, 1.6s; }
@keyframes fanRowIn { to { opacity: 1; } }
@keyframes rowFlash { 0%, 100% { background: rgba(0,152,255,0); } 18% { background: rgba(0,152,255,.16); } 36% { background: rgba(0,152,255,0); } }
.abefan__row:nth-child(1) .cardstack--sm { animation-delay: 0s; }
.abefan__row:nth-child(2) .cardstack--sm { animation-delay: .8s; }
.abefan__row:nth-child(3) .cardstack--sm { animation-delay: 1.6s; }
.abefan__lbl { font-size: 9px; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.abefan__rate { margin-left: auto; font-size: 9px; color: rgba(255,255,255,0); white-space: nowrap; animation: rateReveal 2.4s ease-in-out infinite; }
.abefan__row:nth-child(1) .abefan__rate { animation-delay: 0s; }
.abefan__row:nth-child(2) .abefan__rate { animation-delay: .8s; }
.abefan__row:nth-child(3) .abefan__rate { animation-delay: 1.6s; }
@keyframes rateReveal { 0%, 8% { color: rgba(255,255,255,0); } 20%, 34% { color: var(--blue); } 46%, 100% { color: rgba(255,255,255,0); } }
.cardstack--mixed .cs { border-color: rgba(255,255,255,.55); box-shadow: 0 0 8px rgba(255,255,255,.2); }
.abefan__cpt { position: relative; height: 11px; margin-top: 3px; width: 74px; text-align: center; }
.abefan__cpt span { position: absolute; left: 0; right: 0; top: 0; font-size: 7.5px; letter-spacing: .02em; color: rgba(255,255,255,.4); opacity: 0; animation: cptCycle 4.8s ease-in-out infinite; white-space: nowrap; }
.abefan__cpt span:nth-child(1) { animation-delay: 0s; }
.abefan__cpt span:nth-child(2) { animation-delay: 1.2s; }
.abefan__cpt span:nth-child(3) { animation-delay: 2.4s; }
.abefan__cpt span:nth-child(4) { animation-delay: 3.6s; }
@keyframes cptCycle { 0%, 4% { opacity: 0; } 8%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }

/* AIR: the claim and its line items converging on one insurance card — cross-reference with insurance.
   Same fr-stretch rule as ABE: the two content columns grow to fill the frame's width (cqi). */
.airviz3 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20px, 7cqi) minmax(0, 1fr); align-items: center; align-content: center; justify-content: center; gap: clamp(6px, 2cqi, 14px); width: 100%; height: 100%; min-width: 0; padding: clamp(10px, 3.5cqi, 22px); overflow-x: auto; }
.airviz3__left { grid-column: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.8cqi, 10px); }
.airclaim { position: relative; width: clamp(56px, 16cqi, 84px); border: 1px solid rgba(0,152,255,.5); border-radius: 4px; background: rgba(0,152,255,.05); padding: clamp(5px, 1.4cqi, 8px) clamp(7px, 2cqi, 11px); }
.airclaim__hdr { display: block; font-size: clamp(6px, 1.8cqi, 8.5px); letter-spacing: .08em; color: rgba(0,152,255,.6); margin-bottom: 4px; }
.airclaim__dot { position: absolute; top: 5px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); animation: claimBlink 1.6s ease-in-out infinite; }
@keyframes claimBlink { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px var(--blue); } 50% { opacity: .2; transform: scale(2.2); box-shadow: 0 0 12px var(--blue); } }
.airclaim__line { display: block; height: 1.4px; background: rgba(0,152,255,.5); border-radius: 1px; margin-top: 3px; }
.airclaim__line.short { width: 55%; }
.airviz3__tags { display: flex; flex-direction: column; gap: clamp(5px, 1.4cqi, 8px); }
.airtag { display: flex; align-items: center; gap: 4px; font-size: clamp(7.5px, 2.2cqi, 10.5px); color: rgba(255,255,255,.75); white-space: nowrap; }
.airtag i { font-style: normal; font-size: clamp(6px, 1.8cqi, 8px); padding: 1px 4px; border-radius: 3px; letter-spacing: .02em; }
.airtag i.ded { background: rgba(0,152,255,.18); color: #7fc6ff; }
.airtag i.coins { background: rgba(255,180,64,.18); color: #ffc670; }
.airtag i.cvrd { background: rgba(90,200,140,.18); color: #7fe0ab; }
.airviz3__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.airviz3__lines line { stroke: rgba(0,152,255,.7); stroke-width: 1.4; stroke-dasharray: 3 3; animation: lineFlow .7s linear infinite; }
@keyframes lineFlow { to { stroke-dashoffset: -12; } }

/* ART: itemized adjudication receipt, fed by a continuous claim/model feedback loop — recursively self-improve.
   Different rule than ABE/AIR: these three pieces (receipt, label pair, cardstack) are discrete
   badges, not blocks meant to stretch — so instead of fr-columns, space-evenly distributes them
   across the frame's full width and the receipt's own max-width grows with the box (cqi). */
.artviz2 { position: relative; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content); align-items: center; align-content: center; justify-content: space-evenly; gap: clamp(14px, 3.5cqi, 30px); width: 100%; height: 100%; min-width: 0; padding: clamp(10px, 3.5cqi, 22px); overflow-x: auto; }
.artloop2__lbls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.artloop2__lbl { position: relative; font-size: clamp(9px, 2.4cqi, 12px); letter-spacing: .02em; color: rgba(255,255,255,.5); white-space: nowrap; animation: lblCycle 2.4s ease-in-out infinite; }
.artloop2__lbl:nth-of-type(2) { animation-delay: 1.2s; }
/* Single dashed line computed from the receipt's/cardstack's real positions (see wireConnector
   in script.js) — same robust, screen-size-independent approach as ABE/AIR, replacing the old
   short fixed-length dashed stubs that only worked at one layout. */
.artloop2__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.artloop2__line line { stroke: rgba(0,152,255,.6); stroke-width: 1.4; stroke-dasharray: 3 3; animation: lineFlow .7s linear infinite; }
@keyframes lblCycle { 0%, 100% { opacity: .15; color: rgba(255,255,255,.5); transform: translateX(0); } 50% { opacity: 1; color: var(--blue); transform: translateX(3px); } }

/* Shared: itemized receipt card (ART). font-size is set once here and everything
   below inherits it (row/code/amt/head have no font-size of their own) — bump this
   one clamp and the whole card scales together. */
.receipt { width: 100%; max-width: clamp(200px, 58cqi, 320px); border: 1px dashed rgba(0,152,255,.5); border-radius: 6px; padding: clamp(7px, 2cqi, 11px) clamp(9px, 2.6cqi, 14px); background: rgba(0,152,255,.05); font-size: clamp(8px, 2.2cqi, 11px); }
.receipt__head { display: flex; justify-content: space-between; color: rgba(255,255,255,.5); letter-spacing: .03em; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.15); }
.receipt__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 5px; padding: 4px 0; color: rgba(255,255,255,.85); }
.receipt__code { color: var(--blue); }
.receipt__amt { text-align: right; }
.tag { font-size: clamp(6.5px, 1.8cqi, 9px); padding: 1px 4px; border-radius: 3px; letter-spacing: .02em; justify-self: start; }
.tag.ded { background: rgba(0,152,255,.18); color: #7fc6ff; }
.tag.cvrd { background: rgba(90,200,140,.18); color: #7fe0ab; }
.receipt__total { display: flex; justify-content: space-between; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.15); color: #fff; font-weight: 600; animation: totalPulse 2.6s ease-in-out infinite; }
@keyframes totalPulse { 0%, 100% { opacity: 1; text-shadow: none; } 50% { opacity: .3; text-shadow: 0 0 10px var(--blue); } }

/* Shared: insurance card (AIR) */
.inscard { grid-column: 3; width: clamp(84px, 24cqi, 130px); border: 1px dashed rgba(0,152,255,.5); border-radius: 5px; background: rgba(0,152,255,.05); padding: clamp(7px, 2cqi, 11px) clamp(8px, 2.2cqi, 12px); animation: cardPulse 2.4s ease-in-out infinite; }
@keyframes cardPulse { 0%, 100% { box-shadow: 0 0 0 rgba(0,152,255,0); border-color: rgba(0,152,255,.5); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(0,152,255,.8); border-color: rgba(0,152,255,1); transform: scale(1.05); } }
.inscard__row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.inscard__chip { width: 11px; height: 8px; border-radius: 1.5px; background: rgba(0,152,255,.35); }
.inscard__rings { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,152,255,.5); box-shadow: 3px 0 0 -1px rgba(0,152,255,.5); }
.inscard__brand { font-size: 7.5px; color: var(--blue); letter-spacing: .02em; }
.inscard__meta { font-size: 6.5px; color: rgba(255,255,255,.45); margin-top: 4px; }

/* ===== 02c — Price calculator (exact port of superscript.nyc/technology's PriceEquation.tsx, black bg) ===== */
.s-pricecalc { align-items: stretch; }
.s-pricecalc .wrap { display: flex; flex-direction: column; padding-top: clamp(20px, 5vh, 64px); }
.s-pricecalc .wrap > .pcalc { margin-top: auto; margin-bottom: auto; }
.pcalc { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 40px); }
@media (min-width: 1100px) { .pcalc { flex-direction: row; align-items: center; gap: 0; } }
.pcalc__eq { display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 16px); position: relative; }
@media (min-width: 1100px) { .pcalc__eq { flex-direction: row; align-items: stretch; gap: clamp(8px, 1.2vw, 16px); } }
.pcalc__main { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 48px); }
.pcalc__row { display: flex; align-items: center; gap: clamp(6px, 1vw, 20px); margin-top: clamp(14px, 2vh, 28px); }
.pcalc__field { position: relative; flex: 1 1 0; min-width: 0; }
@media (min-width: 1100px) { .pcalc__field { flex: 0 0 auto; width: clamp(140px, 13vw, 208px); } }
.pcalc__label { position: absolute; left: 0; top: -20px; display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.pcalc__label i { display: inline-block; width: 12px; height: 1px; background: rgba(255,255,255,.3); }
.pcalc__box { position: relative; display: flex; align-items: center; height: clamp(46px, 7vh, 84px); border: 1px dashed rgba(255,255,255,.35); padding: 0 clamp(8px, 1.2vw, 18px); transition: border-color .3s ease; }
.pcalc__field--active .pcalc__box { border-color: rgba(255,255,255,.7); }
.pcalc__box span { display: block; width: 100%; font-size: clamp(11px, 1.3vw, 17px); line-height: 1.15; letter-spacing: -.01em; color: #fff; transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.pcalc__field--hidden .pcalc__box span { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.pcalc__op { flex-shrink: 0; align-self: center; font-family: var(--mono); font-weight: 300; color: rgba(255,255,255,.5); font-size: clamp(13px, 2vw, 22px); }

.pcalc__amtrow { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); }
.pcalc__eqsign { font-family: var(--mono); font-weight: 300; color: rgba(255,255,255,.5); font-size: clamp(26px, 5vw, 46px); flex-shrink: 0; }
.pcalc__amtwrap { position: relative; }
.pcalc__reslabel { display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; margin-bottom: 6px; }
.pcalc__reslabel i:not(.pcalc__dot) { display: inline-block; width: 12px; height: 1px; background: rgba(255,255,255,.3); }
.pcalc__dot { width: 6px; height: 6px; border-radius: 50%; background: #ffcf5c; box-shadow: 0 0 8px #ffcf5c; animation: pcDotPulse 1s ease-in-out infinite; }
.pcalc__dot.resolved { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: none; }
@keyframes pcDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.pcalc__amt { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(38px, 7vw, 80px); font-weight: 400; line-height: .85; letter-spacing: -.02em; color: #fff; transition: color .3s ease, filter .3s ease; }
.pcalc__amt--obscured { color: rgba(255,255,255,.55); filter: blur(.4px); }

/* Bracket enclosing the whole equation */
.pcalc__bracket { display: none; }
@media (min-width: 1100px) { .pcalc__bracket { display: block; align-self: stretch; width: 15px; border-top: 1px solid rgba(255,255,255,.45); border-right: 1px solid rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.45); margin-left: clamp(8px, 1.2vw, 16px); } }

/* Dashed leader connecting the bracket to the callout */
.pcalc__leader { display: none; }
@media (min-width: 1100px) { .pcalc__leader { display: block; flex: 1 1 auto; height: 0; border-top: 1px dashed rgba(255,255,255,.4); margin: 0 clamp(16px, 3vw, 48px); min-width: 24px; } }

.pcalc__tag { flex-shrink: 0; max-width: 10em; font-size: clamp(24px, 4vw, 52px); line-height: .9; letter-spacing: -.02em; color: #fff; font-weight: 400; text-transform: lowercase; }
.pcalc__tag em { font-style: italic; color: #ffcf5c; }

/* ===== 03 — Product ===== */
.prod { position: relative; display: grid; grid-template-columns: 38% 62%; grid-template-rows: 1fr auto; height: 100%; align-content: start; gap: 0; }
.prod__copy { padding-top: 0; max-width: 30ch; }
.eyebrow { font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.55); margin-bottom: clamp(8px, 1.2vh, 14px); }
.s-team .eyebrow { color: rgba(255,255,255,.72); text-align: center; }
.prod .title { font-size: clamp(26px, 2.7vw, 48px); margin-top: clamp(10px,1.6vh,20px); }
.dashrule { height: 0; border-top: 1.5px dashed rgba(255,255,255,.3); width: 300px; margin: 12px 0 clamp(12px,1.8vh,20px); }
.prod__intro { font-size: clamp(15px, 1.5vw, 24px); line-height: 1.32; color: #fff; max-width: 30ch; }
.feat { margin-top: clamp(8px,1.4vh,16px); }
.feat__bar { height: 6px; width: 290px; max-width: 100%; background: linear-gradient(90deg, var(--blue), rgba(0,152,255,0)); border-radius: 4px; margin-bottom: clamp(4px,0.8vh,8px); }
.feat__h { font-size: clamp(16px, 1.5vw, 23px); font-weight: 400; line-height: 1.12; }
.feat__no { color: var(--blue); margin-right: 6px; font-size: .8em; }
.feat__body { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.4; color: rgba(255,255,255,.92); margin-top: 6px; max-width: 40ch; }
.prod__stat { grid-column: 1; align-self: end; font-size: clamp(14px, 1.45vw, 24px); line-height: 1.18; font-weight: 400; margin-top: clamp(14px, 2.5vh, 32px); padding-bottom: 4px; max-width: 26ch; }
.prod__stat strong { font-weight: 700; }

/* Skylight product image */
.prod__visual { grid-column: 2; grid-row: 1; position: relative; align-self: center; width: 100%; height: 0; padding-top: 76.65%; max-height: 84%; }
/* .sko-stage carries the fade-in + floaty bob so the background image and the .sko overlay card
   (skylight-overlay.css) move together as one unit — container-type:size makes cqi/cqb inside
   .sko resolve against this box's own rendered size, same pattern as the ABE/AIR/ART engine boxes. */
.sko-stage { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease .2s; }
.s-product.in-view .sko-stage { opacity: 1; animation: floaty 7s ease-in-out 1.3s infinite alternate; }
.skylight-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 70%; }
.prod__ehrs { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(8px, 1.4vh, 16px); padding-top: clamp(10px, 1.6vh, 16px); border-top: 1px solid rgba(255,255,255,.15); }
.prod__ehrs img { height: clamp(14px, 1.6vw, 20px); width: auto; filter: brightness(0) invert(1); opacity: .8; }
/* Each EHR's logo has a different internal proportion (Experity/eCW/Epic wordmarks render much
   "louder" than athenahealth's small compact mark or NextGen's icon+text lockup at the same pixel
   height) — tuned per-logo so they read as visually the same weight, not just the same box height. */
/* eClinicalWorks leads the row: it is the EHR this prospect runs today. */
.prod__ehrs img:nth-child(1) { height: clamp(11px, 1.3vw, 16px); } /* eClinicalWorks — wide wordmark, so a shorter cap */
.prod__ehrs img:nth-child(2) { height: clamp(18px, 2.1vw, 26px); } /* athenahealth — larger */
.prod__ehrs img:nth-child(3) { height: clamp(10px, 1.15vw, 14px); } /* Epic — smaller */
.prod__ehrs img:nth-child(4) { height: clamp(15px, 1.75vw, 21px); } /* NextGen */
.prod__ehrs img:nth-child(5) { height: clamp(13px, 1.5vw, 18px); } /* ModMed */
.prod__ehrs img:nth-child(6) { height: clamp(9px, 1.05vw, 13px); } /* Experity — smaller */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-12px); } }
/* legacy composition (unused, kept harmless) */
.skylight { position: absolute; inset: 0; }
.monitor { position: absolute; inset: 4% 2% 8% 4%; color: #8fc4ff; }
.monitor svg { position: absolute !important; left: 4% !important; top: 2% !important; width: 88% !important; height: 92% !important; }
.ehr { position: absolute; left: 16%; top: 21%; width: 62%; background: #fff; border-radius: 7px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,40,.32); color: #1b1b24; font-size: 9px; }
.ehr__bar { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #e9e9ef; }
.ehr__dot { width: 7px; height: 7px; border-radius: 50%; }
.ehr__dot.r { background: #ff5f57; } .ehr__dot.y { background: #febc2e; } .ehr__dot.g { background: #28c840; }
.ehr__tab { margin-left: 8px; background: #fff; border-radius: 5px 5px 0 0; padding: 4px 10px; font-size: 8px; color: #4b5cc4; font-weight: 600; }
.ehr__tab i { color: #999; font-style: normal; margin-left: 6px; }
.ehr__plus { color: #888; margin-left: 4px; }
.ehr__head { display: flex; align-items: center; gap: 10px; background: #5a3e8e; color: #fff; padding: 6px 10px; }
.ehr__brand { font-weight: 700; font-size: 9px; }
.ehr__nav { font-size: 7px; opacity: .85; white-space: nowrap; overflow: hidden; }
.ehr__patient { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid #eee; }
.ehr__avatar { background: #5a3e8e; color: #fff; font-weight: 700; border-radius: 4px; padding: 4px 6px; font-size: 8px; }
.ehr__patient em { color: #888; font-style: normal; font-size: 8px; }
.ehr__grid { height: 90px; background:
  repeating-linear-gradient(0deg, #f4f4f8 0 18px, #fff 18px 36px),
  repeating-linear-gradient(90deg, transparent 0 24%, #ededf3 24% calc(24% + 1px)); }

.widget { position: absolute; left: -2%; top: 33%; width: 40%; background: #fff; border-radius: 12px; padding: 13px; box-shadow: 0 26px 60px rgba(0,0,40,.38); color: #14141c; }
.widget__top { display: flex; justify-content: space-between; align-items: center; }
.widget__live { display: inline-flex; align-items: center; gap: 6px; background: #f2f2f5; border-radius: 20px; padding: 3px 9px; font-size: 9px; font-weight: 600; }
.widget__live i { width: 7px; height: 7px; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 3px rgba(40,200,64,.18); }
.widget__x { color: #b8b8c0; }
.widget__title { font-weight: 700; font-size: 13px; line-height: 1.2; margin: 12px 0; }
.widget__appt { font-size: 9px; font-weight: 600; padding-bottom: 9px; border-bottom: 1px solid #eee; }
.widget__row { display: flex; justify-content: space-between; font-size: 9.5px; padding: 7px 0; border-bottom: 1px solid #f2f2f4; }
.widget__row .ins { color: #1aa84a; font-weight: 600; }
.widget__pay { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.widget__amt { font-size: 19px; font-weight: 700; }
.widget__btn { background: #111; color: #fff; border: 0; border-radius: 7px; padding: 7px 11px; font-size: 9px; font-weight: 600; cursor: pointer; }
.widget__bal { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; background: #f6f6f8; border-radius: 8px; padding: 8px 10px; font-size: 9px; }

.sidebar { position: absolute; right: 1%; top: 11%; width: 12%; min-width: 64px; background: #fff; border-radius: 30px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 18px 44px rgba(0,0,40,.3); }
.sidebar__item { position: relative; text-align: center; color: #20242c; }
.sidebar__item .ic { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto 3px; font-size: 13px; }
.sidebar__item small { font-size: 7.5px; }
.sidebar__item .badge { position: absolute; top: -2px; right: 16%; width: 5px; height: 5px; background: #ff4d4d; border-radius: 50%; }
.sidebar__logo { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 0deg, #00c0f0, #d8b8f0, #f07848, #00a070, #00c0f0); }

.pos { position: absolute; right: 1%; bottom: 6%; width: 13%; min-width: 70px; aspect-ratio: 3/4.6; background: #fff; border: 2px solid #d8e6ff; border-radius: 10px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,40,.25); }
.pos__screen { height: 100%; border-radius: 6px; background: #f6f8ff; display: grid; place-items: center; }
.pos__wave { font-size: 20px; color: #1b1b24; transform: rotate(-12deg); animation: posPulse 2.4s ease-in-out infinite; }
@keyframes posPulse { 0%,100% { opacity: .35; transform: rotate(-12deg) scale(.9); } 50% { opacity: 1; transform: rotate(-12deg) scale(1.08); } }

.cursor { position: absolute; left: 34%; top: 52%; width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 1l11 6-5 1 3 5-2 1-3-5-4 3z' fill='black' stroke='white' stroke-width='1'/></svg>") no-repeat center/contain;
  animation: cursorMove 6s ease-in-out infinite; }
@keyframes cursorMove { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-18px,-10px); } 60% { transform: translate(-18px,-10px) scale(.85); } 75% { transform: translate(-18px,-10px); } }

.metrics { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: auto auto; gap: 0 28px; justify-content: end; align-self: end; padding-bottom: 2px; font-size: clamp(12px, 1.1vw, 18px); line-height: 1.45; }
.metric { display: contents; }
.metric b { font-weight: 400; }
.metric span { color: rgba(255,255,255,.92); }

/* ===== 05 — Storefront ===== */
.store { display: grid; grid-template-columns: 41% 59%; gap: clamp(24px,3vw,60px); align-items: center; color: #fff; }
.store .eyebrow { color: rgba(255,255,255,.8); }
.store .title { font-size: clamp(26px, 2.7vw, 48px); margin: 14px 0 0; }
.store__intro { font-size: clamp(15px, 1.5vw, 24px); line-height: 1.32; margin-top: 16px; max-width: 28ch; }
.feat--light .feat__bar { background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.store .feat__h { font-weight: 600; font-size: clamp(14px, 1.2vw, 19px); }
.store .feat__body { color: rgba(255,255,255,.92); }
.store__stat { margin-top: 26px; font-size: clamp(13px, 1.4vw, 23px); line-height: 1.3; max-width: 34ch; }
.store__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.store__visual .pm { position: relative; z-index: 1; animation: floaty 7s ease-in-out 1.3s infinite alternate; }
.storedeco { position: absolute; top: 50%; transform: translateY(-50%); height: 62%; width: auto; max-width: none; opacity: .55; pointer-events: none; z-index: 0; }
/* anchored to the widget card's own half-width (max-width 420px / 2 = 210px) so it holds up across viewport widths, not just the one we happened to test at */
.storedeco--left { right: calc(50% + 190px); }
.storedeco--right { left: calc(50% + 190px); }

/* ===== 06 — Proven at Scale (now lives in the blue zone — white text, like Product/Storefront) ===== */
.s-scale { flex-direction: column; justify-content: center; align-items: center; color: #fff; }
.s-scale .eyebrow { color: rgba(255,255,255,.65); }
.s-scale .title { font-size: clamp(22px, 2.4vw, 40px); color: #fff; margin-top: 10px; max-width: 42ch; }

.scalegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(28px, 4vh, 48px); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; }
.scard { padding: clamp(16px, 2vw, 26px) clamp(14px, 1.8vw, 24px); border-right: 1px solid rgba(255,255,255,.25); display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); }
.scard:last-child { border-right: none; }
.scard__label { font-size: 10.5px; letter-spacing: .04em; color: #fff; line-height: 1.35; min-height: 2.7em; }
.scard__val { font-size: clamp(26px, 3vw, 44px); font-weight: 400; color: #fff; letter-spacing: -.01em; }
.scard__stats { display: flex; flex-direction: column; gap: 4px; }
.scard__stat { display: flex; align-items: baseline; gap: 8px; font-size: clamp(12px, 1.1vw, 15px); color: #fff; }
.scard__stat b { font-weight: 400; }
.scard__stat span { color: rgba(255,255,255,.65); }
.scard__sub { font-size: clamp(11px, 1vw, 13px); color: #fff; }

.custgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(10px, 1.6vh, 18px); }
.ccard { position: relative; padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 22px); background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,20,55,.14); display: flex; flex-direction: column; }
.ccard__logo { height: 34px; width: auto; max-width: 200px; object-fit: contain; object-position: left; margin-bottom: clamp(10px, 1.6vh, 16px); align-self: flex-start; }
.ccard__desc { font-size: clamp(11px, 1vw, 13.5px); color: rgba(11,18,32,.85); line-height: 1.4; min-height: 2.8em; }
.ccard__tag { font-size: 9px; letter-spacing: .04em; color: rgba(11,18,32,.55); border-top: 1px solid rgba(11,18,32,.15); padding-top: 10px; margin-top: 10px; }
.ccard__numrow { display: flex; align-items: baseline; gap: 7px; margin-top: clamp(10px, 1.6vh, 16px); }
.ccard__num { font-size: clamp(24px, 2.6vw, 36px); font-weight: 400; color: #0b1220; }
.ccard__loc { font-size: 9px; color: rgba(11,18,32,.55); letter-spacing: .03em; }
.ccard__status { font-size: 9.5px; color: rgba(11,18,32,.7); margin-top: 4px; }
.ccard__cs { position: absolute; right: clamp(14px, 1.8vw, 22px); bottom: clamp(14px, 1.8vw, 20px); font-size: 9.5px; letter-spacing: .02em; color: var(--blue); text-decoration: none; }
.ccard__cs:hover { text-decoration: underline; }

/* ===== 06b — Roadmap (light) ===== */
.roadmap { display: flex; flex-direction: column; }
.roadmap .eyebrow { color: rgba(11,18,32,.5); }
.roadmap .title { font-size: clamp(24px, 2.8vw, 46px); color: #0b1220; margin-top: 10px; max-width: 24ch; }
.rsub { font-size: clamp(13px, 1.15vw, 17px); color: rgba(11,18,32,.6); line-height: 1.5; margin-top: 16px; max-width: 60ch; }
.rline { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px); margin-top: clamp(28px, 4vh, 48px); padding-top: clamp(14px, 2vh, 22px); }
.rmark { position: relative; padding-top: 14px; }
.rmark__dot { position: absolute; top: -19.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(11,18,32,.25); }
.rmark--now .rmark__dot { background: #0b1220; }
.rmark--active .rmark__dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(0,152,255,.18); }
.rmark__lbl { font-size: 9px; letter-spacing: .06em; color: var(--blue); white-space: nowrap; }
.rmark--active .rmark__lbl { font-weight: 700; }
.rmark__body strong { font-weight: 600; color: #0b1220; }
.rmark__h { font-size: clamp(13px, 1.2vw, 17px); font-weight: 600; color: #0b1220; margin-top: 6px; }
.rmark__body { font-size: clamp(10.5px, .95vw, 13px); color: rgba(11,18,32,.6); line-height: 1.4; margin-top: 6px; }

/* ===== 07 — Team + CTA (light closing slide) =====
   The Rive canvas used to be position:absolute;inset:0 (full-bleed over the whole slide), which
   meant the artwork's own baked-in tagline landed at a different fraction of the slide's height
   depending on the slide's own (viewport-driven) aspect ratio — no fixed CSS offset for the
   button below it could stay correct across every viewport, and it kept overlapping or drifting
   too far at different sizes. Fix: give the canvas a fixed, bounded aspect-ratio box in normal
   flow instead, so the button just follows it in document order — guaranteed below, always,
   regardless of viewport shape, with no viewport-dependent guessing. */
.s-team { flex-direction: column; justify-content: center; align-items: center; color: #0b1220; }
.s-team--simple { gap: clamp(16px, 3vh, 32px); }
.s-team--simple .teamcta { position: relative; z-index: 1; margin-top: 0; }
/* Mobile and desktop need different box shapes to get a similar-looking crop out of Fit.Cover —
   see the media query override below for the wider desktop box. */
.closingcurves { position: relative; width: min(1100px, 94vw); aspect-ratio: 0.75 / 1; z-index: 0; opacity: .7; pointer-events: none; }
.team { text-align: center; width: 100%; }
.team__h { font-weight: 400; font-size: clamp(24px, 3.1vw, 54px); line-height: 1.06; color: #0b1220; letter-spacing: -.015em; }

/* scrolling logo marquee banner at the top */
.logobanner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: clamp(24px, 4vh, 48px); }
.logomarquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logomarquee .logos { display: flex; flex-wrap: nowrap; width: max-content; align-items: center; gap: clamp(40px, 5vw, 76px); animation: marquee 16s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logorow__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(11,18,32,.55); }
.logo-cust { height: clamp(26px, 2.6vw, 36px); width: auto; max-width: 170px; object-fit: contain; flex: 0 0 auto; opacity: .85; }

.stat { text-align: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,4vw,64px); max-width: 900px; margin: clamp(32px,4.5vh,56px) auto 0; }
.stat__pct { display: block; font-family: var(--sans); font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); color: var(--blue); letter-spacing: -.02em; line-height: 1; }
.stat__label { display: block; font-size: clamp(11.5px, .95vw, 14.5px); color: rgba(11,18,32,.7); line-height: 1.4; margin-top: 10px; }
.stat__label em { font-style: normal; font-weight: 600; color: #0b1220; }

/* Live metrics strip — echoes superscript.nyc's footer counter bar */
.livebar { display: flex; align-items: center; text-align: left; gap: clamp(16px,3vw,40px); max-width: 900px; margin: clamp(28px,4vh,44px) auto 0; padding-top: 18px; border-top: 1px dashed rgba(11,18,32,.18); }
.livebar__stats { display: flex; flex-direction: column; gap: 5px; font-family: var(--sans); font-size: clamp(14px, 1.5vw, 18px); color: rgba(11,18,32,.55); line-height: 1.5; }
.livebar__stats b { font-weight: 600; color: var(--blue); margin-right: 6px; }
.livebar__line { flex: 1; height: 1px; background: rgba(11,18,32,.15); display: none; }
@media (min-width: 700px) { .livebar__line { display: block; } }
@media (min-width: 700px) {
  /* Desktop needs a much wider/shorter box than mobile for Fit.Cover to crop in on the curves
     without either (a) barely cropping at all (too square-ish/wide a ratio) or (b) blowing up
     into a huge box that clips the top of the artwork (too narrow/tall a ratio, which is what
     mobile's 0.75:1 needs — the two viewport shapes need genuinely different box shapes here). */
  .closingcurves { width: min(760px, 62vw); aspect-ratio: 1.7 / 1; }
}

/* CTA with white space below */
.teamcta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3.6vh, 40px); text-align: center; margin-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(8px, 2vh, 20px); }
.teamcta .cta__big { color: #0b1220; font-size: clamp(22px, 2.7vw, 46px); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.teamcta__sub { margin-top: clamp(-16px, -1.6vh, -8px); color: rgba(11,18,32,.65); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.4; max-width: 46ch; }
.teamcta__btn { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); padding: clamp(12px, 1.6vh, 16px) clamp(28px, 2.4vw, 36px); border-radius: 999px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.teamcta__btn:hover { background: var(--blue-deep); transform: translateY(-1px); }

/* ===== 07 — CTA (matches Superscript report CTAs) ===== */
.cta { width: min(940px, 100%); }
.cta__big { font-family: var(--sans); font-size: clamp(26px, 3.4vw, 52px); line-height: .98; letter-spacing: -.03em; font-weight: 400; max-width: 18ch; color: #0b1220; }
.cta__big em { font-style: italic; color: var(--blue); font-weight: 400; }
.cta__row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-top: clamp(28px, 5vh, 52px); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: -.02em; color: rgba(11,18,32,.5); }
.cta__btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 36px; background: var(--blue); color: #fff; border-radius: 60px; font-family: var(--sans); font-size: clamp(15px, 1.3vw, 17px); letter-spacing: -.02em; text-decoration: none; transition: background .15s ease, color .15s ease; }
.cta__btn:hover { background: #0b1220; color: #fff; }

/* ===== Chrome ===== */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); z-index: 50; transition: width .12s linear; box-shadow: 0 0 12px rgba(0,152,255,.6); }
.counter { display: none; }
.counter__sep { opacity: .4; } #cur { display: inline-block; min-width: 1.6em; }
.dots { position: fixed; top: 50%; left: 24px; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
.dots button { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: transparent; cursor: pointer; padding: 0; transition: all .3s ease; mix-blend-mode: difference; }
.dots button:hover { transform: scale(1.25); }
.dots button.active { background: #fff; border-color: #fff; height: 22px; border-radius: 5px; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  /* Stack the deck. Keep the continuous deckbg (it's fixed + scroll-synced,
     so it stays one consistent gradient even while slides are stacked). */
  #deck { scroll-snap-type: none; }
  .slide { height: auto; min-height: 100svh; scroll-snap-align: none; padding-top: clamp(56px, 11vw, 80px); }

  /* header brand mark removed on mobile (the hero wordmark carries the brand) */
  .siteheader { display: none; }
  /* decorative storefront flanking illustrations don't scale down cleanly on a narrow stacked column */
  .storedeco { display: none; }
  /* Hero: meta to upper-left, copy lifted off the bottom */
  .hero { margin-bottom: clamp(10vh, 16vw, 18vh); }
  .hero__foot { top: clamp(36px, 9vw, 56px); bottom: auto; left: clamp(28px, 5vw, 40px); right: auto; text-align: left; }

  /* Slide 2: diagrams shrink their internal content and scroll horizontally
     within their own frame rather than overflowing the slide (see the
     min-width:0 / minmax(0,...) / overflow-x:auto rules on .abefan/.airviz3/
     .artviz2 and their ancestor chain, which apply at all widths). */
  .engines { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 48px); }
  .evis { height: clamp(260px, 85vw, 380px); margin-bottom: 24px; }
  /* ART's box needs more room on mobile now that receipt/labels/cardstack stack vertically
     instead of sitting side by side. */
  .engine:nth-child(3) .evis { height: clamp(360px, 108vw, 480px); }
  .engine__lead, .engine__body { max-width: none; }
  .abefan__lbl, .airtag, .receipt, .inscard, .artloop2__lbl { font-size: 90%; }
  /* ABE/AIR: wider middle "lines" column so the fan-out actually spans to meet the cards on
     each end, instead of stopping short in a much wider mobile box; AIR's elements sized up too
     so the diagram fills the now-square box instead of floating small in the middle of it. */
  .abefan, .airviz3 { grid-template-columns: minmax(0, max-content) 50px minmax(0, max-content); gap: clamp(10px, 2.4vw, 18px); }
  .airclaim { width: 92px; padding: 10px 12px; }
  .airclaim__hdr { font-size: 8px; }
  .airclaim__line { height: 2.5px; margin-top: 5px; }
  .airviz3 { align-content: center; }
  .abefan { align-content: center; }
  .inscard { width: 130px; padding: 12px 14px; }
  .inscard__brand { font-size: 10px; }
  .inscard__meta { font-size: 9px; }
  .inscard__chip { width: 15px; height: 11px; }
  .inscard__rings { width: 13px; height: 13px; }
  .airtag { font-size: 11px; gap: 6px; }
  /* ABE/AIR mobile: the small desktop-scale sub-elements (built for the compact side-by-side
     view) otherwise float small in the middle of the much bigger single-column mobile box. Scale
     them up so the diagram actually fills its frame. */
  .cardstack--sm { width: 36px; height: 25px; }
  .abefan__src { gap: 8px; }
  .abefan__srclbl { font-size: 10px; }
  .abefan__cpt { width: 90px; height: 14px; margin-top: 3px; }
  .abefan__cpt span { font-size: 9px; }
  .abefan__row { gap: 8px; }
  .abefan__lbl { font-size: 11px; }
  .abefan__rate { font-size: 10px; }
  /* ART: receipt / labels+line / cardstack stacked vertically on mobile — a side-by-side
     3-column layout (like desktop) has no room left for the label text at this width once the
     receipt and cardstack both need space too, so each element gets the full row instead. The
     connector line now generalizes to a vertical connection (see wireConnector's dx/dy check in
     script.js), so it still draws correctly between the stacked elements. */
  .artviz2 { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; align-content: center; gap: 14px; overflow: visible; padding: clamp(12px, 3vw, 20px); }
  .artviz2 .receipt { grid-column: 1; grid-row: 1; justify-self: center; font-size: 75%; }
  .artviz2 .artloop2__lbls { grid-row: 2; }
  .artviz2 .cardstack { grid-column: 1; grid-row: 3; }
  .receipt__row { gap: 2px; }

  /* Slide 3 + 4: flex column so DOM order (copy -> visual -> EHR logos) is preserved */
  .prod, .store { display: flex; flex-direction: column; align-items: stretch; }
  .pcalc { flex-direction: column; align-items: flex-start; gap: clamp(20px, 4vh, 32px); }
  .pcalc__tag { margin-top: 0; }
  .prod__copy, .store__copy { max-width: none; }
  /* max-width caps the jump right at this breakpoint: .prod__visual goes from ~62% of a
     two-column grid to 100% of a single stacked column, which would otherwise make the whole
     visual (and the .sko overlay card scaled to it) balloon disproportionately large for a few
     hundred px around 1100px before shrinking again as the viewport narrows further. */
  .prod__visual { position: relative; align-self: stretch; max-width: 520px; margin: 28px auto 0; order: 2; }
  .skylight-img { position: absolute; }
  .prod__ehrs { order: 3; }
  .prod__intro, .store__intro, .prod__stat, .store__stat, .feat__body { max-width: 46ch; }
  .store__visual { margin-top: 26px; }
  .pm .card { max-width: 380px; }

  /* Slide 6: scale + customer grids stack single-column */
  .scalegrid, .custgrid { grid-template-columns: 1fr; }
  .scard, .ccard { border-right: none; border-bottom: 1px solid rgba(11,18,32,.12); }
  .scard:last-child, .ccard:last-child { border-bottom: none; }
  /* Content here is shorter than a full screen once stacked — don't force a full-viewport
     floor with a big empty trailing gap after the logo row, let the slide end at its content. */
  .s-scale { min-height: auto; justify-content: flex-start; padding-bottom: clamp(24px, 5vh, 48px); }

  /* Slide 7: tighter logo marquee + more white space below the CTA */
  .logo-cust { height: 28px; }
}

@media (max-width: 600px) {
  .dots { display: none; }
  .hero__foot { font-size: 10px; }
  .stats { grid-template-columns: 1fr; max-width: 280px; gap: 28px; }
  .metrics { grid-template-columns: auto 1fr; column-gap: 18px; }
  .teamcta .cta__big { font-size: clamp(20px, 6.4vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  html, #deck { scroll-behavior: auto; }
  .reveal { transition: opacity .4s ease; transform: none; }
  .pos__wave, .cursor { animation: none; }
}