/* ==========================================================================
   Tabia website — styles
   Converted from the Claude Design export ("Tabia Website.html").
   Breakpoints (from the original JS): 480, 560, 600, 768, 900, 1000, 1024,
   1100, 1180, 1260 px.
   ========================================================================== */

/* Fonts
   -------------------------------------------------------------------------- */
/* WOFF2 subsets (Latin + Latin Extended): only the Fira Sans faces the site uses — upright 400–700
   and italic 400/500 (results footnote and testimonial quotes). FA7Pro only the five journey icons. */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/FiraSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/FiraSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/FiraSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/FiraSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/FiraSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/FiraSans-MediumItalic.woff2") format("woff2"); }

/* Page edge
   --page-pad is the page gutter. --page-x is where the navbar logo and the hero text start: the gutter, or,
   from 1100px (where the stats sit on one row), the left edge of the Mayo Clinic logo in the first stats cell.
   That logo is 220px wide, centred in a cell that is 222.7/1189.3 of the stats grid, and never closer than
   the cell's 24px padding; so its left edge is the gutter + max(24px, half the cell - 110px).
   -------------------------------------------------------------------------- */
:root {
  --page-pad: clamp(20px, 7vw, 100px);
  --page-x: var(--page-pad);
}
@media (min-width: 1100px) {
  :root { --page-x: calc(var(--page-pad) + max(24px, (100vw - 2 * var(--page-pad)) * 0.093627 - 110px)); }
}

/* Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #213145; -webkit-font-smoothing: antialiased; }
a { color: #0479FE; text-decoration: none; }
a:hover { color: #015BC1; }
button, input, textarea { font-family: inherit; }

.page { overflow-x: clip; }
main:focus { outline: none; }

/* Keyboard users see this link on the first Tab; everyone else never does. */
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 200; padding: 12px 20px; border-radius: 8px; background: #0479FE; color: #fff; font-weight: 600; font-size: 15px; }
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow { font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 1px; color: #0479FE; }

/* Scroll reveal (only when JS is running; see .js on <html>)
   -------------------------------------------------------------------------- */
/* Once revealed and settled, the element's own transition rules apply again (e.g. card hover). */
.js [data-reveal]:not(.is-settled) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms), transform 900ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed:not(.is-settled) { opacity: 1; transform: none; }

/* Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transform: none;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.header.is-hidden { transform: translateY(-100%); }

.navbar {
  height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* The logo lines up with the hero text and the Mayo Clinic logo below (--page-x) */
  padding: 0 var(--page-x);
  background: rgba(255,255,255,0.5); box-shadow: none;
  transition: background 240ms ease-out, box-shadow 240ms ease-out;
}
.header.is-menu-open .navbar { background: #FFFFFF; }
/* Scrolled: frosted glass, so the page shows through softly while the links stay readable */
.header.is-scrolled .navbar { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(217,223,241,0.8); }
.header.is-scrolled.is-menu-open .navbar { background: #FFFFFF; } /* the open mobile menu stays solid */
.navbar__brand { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo { width: 124.4px; height: 32px; display: block; }
.navbar__nav { display: none; align-items: center; gap: 34px; }
.navbar__link { font-weight: 500; font-size: 14px; line-height: 18px; color: #0479FE; white-space: nowrap; transition: color 140ms ease-out; }
.navbar__link:hover { color: #015BC1; }
.navbar__actions { display: flex; align-items: center; gap: 14px; }

.lang { display: flex; align-items: center; padding: 2px; border: 1px solid #D9DFF1; border-radius: 8px; background: #fff; }
.lang__btn {
  border: 0; cursor: pointer; height: 28px; min-width: 34px; padding: 0 8px; border-radius: 6px;
  font-weight: 600; font-size: 12px; letter-spacing: .5px;
  background: transparent; color: #52637A;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.lang__btn[aria-pressed="true"] { background: #0479FE; color: #fff; }

.navbar__demo {
  display: none; height: 40px; padding: 11px 20px; border: 0; border-radius: 8px;
  background: #0479FE; color: #fff; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 140ms ease-out;
}
.navbar__demo:hover { background: #015BC1; }

.navbar__burger {
  width: 44px; height: 44px; border: 1px solid #D9DFF1; border-radius: 8px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.navbar__burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #213145; }
.navbar__burger span:nth-child(1) { transition: transform 200ms ease-out; }
.navbar__burger span:nth-child(2) { transition: opacity 200ms ease-out; }
.navbar__burger span:nth-child(3) { transition: transform 200ms ease-out; }
.header.is-menu-open .navbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.is-menu-open .navbar__burger span:nth-child(2) { opacity: 0; }
.header.is-menu-open .navbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column;
  background: #fff; border-top: 1px solid #D9DFF1; border-bottom: 1px solid #D9DFF1;
  box-shadow: 0 0 16px 8px rgba(0,0,0,0.08);
  padding: 8px clamp(20px, 7vw, 100px) 24px;
}
.header.is-menu-open .mobile-menu { display: flex; }
.mobile-menu__link { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid #F4F6FC; font-weight: 500; font-size: 17px; color: #213145; }
.mobile-menu__link:hover { color: #213145; }

@media (min-width: 1024px) {
  .navbar__nav { display: flex; }
  .navbar__demo { display: block; }
  .navbar__burger { display: none; }
  .header.is-menu-open .mobile-menu { display: none; }
}
/* Below 1024px the "Request a demo" button stays in the bar, a little more compact, between the language
   switch and the menu button. Below 500px there is no room for it on that line, so it drops to a full-width
   second row under the logo, language switch and menu button. */
@media (max-width: 1023.98px) {
  .navbar__demo { display: block; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 499.98px) {
  /* A grid, so the logo, language switch and menu button always share the first row (never wrap) */
  .navbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 12px; row-gap: 10px; height: auto; padding-top: 13px; padding-bottom: 14px; }
  .navbar__brand { grid-column: 1; grid-row: 1; }
  .navbar__actions { display: contents; }
  .lang { grid-column: 2; grid-row: 1; }
  .navbar__burger { grid-column: 3; grid-row: 1; }
  .navbar__demo { grid-column: 1 / -1; grid-row: 2; height: 44px; font-size: 15px; }
  /* a more compact language switch */
  .lang__btn { height: 26px; min-width: 30px; padding: 0 6px; font-size: 11px; }
}

/* Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; padding-top: 70px;
  /* 56.25vw is the photo's 16:9, so wide screens show all of it; below ~1100px the 620px floor crops from the left */
  height: max(56.25vw, 620px);
  height: round(max(56.25vw, 620px), 1px); /* the design rounds to whole pixels */
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  --hero-shift: calc(var(--page-x) - var(--page-pad)); /* how far the text sits in from the page gutter */
  --hero-drop: clamp(48px, 6.5vw, 88px); /* the photo sits this much lower, so her gaze meets the headline */
  --hero-pos: 78% 35%;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero picture { display: contents; }
/* The photo fills the hero, lowered by --hero-drop (its bottom runs off the hero); when the screen is narrower
   than 16:9 it crops from the left, keeping her in view */
.hero__img { position: absolute; left: 0; top: var(--hero-drop); width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos); }
/* Portuguese: the Brazilian photo (same framing, her eyes at the same height) fades in over the English one.
   html[data-hero="br"] is set in the <head> for Portuguese visitors and by js/main.js when switching; the
   Brazilian image shows once loaded (.is-loaded), and the English one fades out under it. */
.hero__img, .hero__mobile-img { transition: opacity .8s ease; }
.hero__img--br { opacity: 0; }
html[data-hero="br"] .hero__img--br.is-loaded { opacity: 1; }
html[data-hero="br"] .hero__img:not(.hero__img--br), html[data-hero="br"] .hero__mobile-img:not(.hero__img--br) { opacity: 0; }
html[data-hero="br"] .hero__bg::before { background-image: url("../assets/img/hero-br-2000.webp"); }
@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__mobile-img { transition: none; }
}
/* The gap the drop leaves at the top (mostly under the header) is filled with the photo's top rows stretched
   upward (a 30x vertical stretch), so the sky and leaves run on with no seam. Its width matches the photo's
   rendered width: the full width, or 620px x 16/9 where the 620px floor makes it crop from the left. */
.hero__bg::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--hero-drop) + 8px);
  background: url("../assets/img/hero-2000.webp") right top / max(100%, 1102px) calc(var(--hero-drop) * 30) no-repeat;
  filter: blur(6px); /* softens the streaks; the extra 8px runs under the photo so the blurred edge never shows */
}
/* White veil behind the text: 65% white under the headline, easing off before her face so she stays clear.
   It follows the text column: same stops up to 1440px, shifted with the text beyond that. */
.hero__fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.65) calc(var(--hero-shift) + min(30%, 430px)), rgba(255,255,255,0.47) calc(var(--hero-shift) + min(44%, 635px)), rgba(255,255,255,0) calc(var(--hero-shift) + min(62%, 895px))); }
.hero__content {
  position: relative; z-index: 1;
  padding: 0 clamp(20px, 7vw, 100px) 0 calc(clamp(20px, 7vw, 100px) + var(--hero-shift));
  display: flex; flex-direction: column; gap: 32px; max-width: calc(clamp(860px, 64vw, 1000px) + var(--hero-shift));
  /* above 1280px the text block rises (half this margin), toward the line of her gaze */
  margin-bottom: clamp(0px, calc((100vw - 1280px) * 0.15), 120px);
}
.hero__hl, .gap__hl { color: #0479FE; }
.hero__hl { white-space: nowrap; } /* "Into Action." / "em ação." never splits, so the title never ends on a lone word */
.hero__title { margin: 0; font-weight: 700; font-size: clamp(44px, 6.8vw, 116px); line-height: 1.03; letter-spacing: -0.01em; color: rgb(9,53,98); white-space: pre-line; text-wrap: balance; }
html[lang="pt-BR"] .hero__title { font-size: clamp(40px, 6.05vw, 94px); } /* the Portuguese title is longer; 10% smaller keeps it on the same lines as English */
.hero__sub { margin: 0; font-weight: 400; font-size: clamp(21px, 2vw, 36px); line-height: 1.35; color: rgb(12,57,104); max-width: 22em; text-wrap: balance; } /* ends before her sleeve */
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cta {
  display: inline-flex; align-items: center; height: 3.06em; padding: 0 1.75em; border-radius: 8px;
  background: #0479FE; color: #fff; font-weight: 600; font-size: clamp(16px, 1.1vw, 22px); line-height: 1; white-space: nowrap;
  transition: background 140ms ease-out;
}
.hero__cta:hover { background: #015BC1; color: #fff; }
.hero__cta { gap: 10px; }
.hero__cta-arrow { font-size: 1.25em; font-weight: 400; line-height: 1; transition: transform 140ms ease-out; }
.hero__cta:hover .hero__cta-arrow { transform: translateX(3px); }
.hero__mobile { display: none; position: relative; aspect-ratio: 4 / 3; }
.hero__mobile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }

/* Very large screens (above 1920px, e.g. 2560, 3440 ultrawide, 4K, 5K): the type keeps growing with the width
   instead of stopping at its caps, and the block is placed so the first headline line sits just above her eye
   line, as it does at 1920px. Her eyes are 12.34vw + 88px down the hero (the photo's 21.93% height mark plus
   the 88px drop); the first line's centre is 70px + margin + half a line (0.515em). The values
   match 1920px exactly, so nothing jumps at the breakpoint. */
@media (min-width: 1921px) {
  .hero { justify-content: flex-start; }
  .hero__content { margin: calc(18px + 7.66vw) 0 0; gap: 1.67vw; max-width: calc(var(--hero-shift) + 200px + 46vw); }
  html[lang="pt-BR"] .hero__content { margin-top: calc(18px + 9.39vw); } /* PT sits a little closer to the eye line, as at 1920px */
  .hero__title { font-size: 6.05vw; }
  html[lang="pt-BR"] .hero__title { font-size: 4.9vw; }
  .hero__sub { font-size: 1.875vw; }
  .hero__cta { font-size: 1.15vw; }
  /* the veil scales with the text instead of stopping at fixed widths */
  .hero__fade { background: linear-gradient(90deg, rgba(255,255,255,0.65) calc(var(--hero-shift) + 24%), rgba(255,255,255,0.47) calc(var(--hero-shift) + 36%), rgba(255,255,255,0) calc(var(--hero-shift) + 52%)); }
}
@media (max-width: 1099.98px) {
  .hero__content { max-width: 620px; }
  /* a size down keeps the headline on three lines and off her shoulder */
  .hero__title { font-size: min(6.2vw, 64px); }
  html[lang="pt-BR"] .hero__title { font-size: min(5.5vw, 57px); }
  .hero__sub { font-size: 22px; max-width: 420px; } /* stays on the white side of the fade, clear of the photo */
  .hero { --hero-pos: 100% 35%; } /* the photo crops from the left: keep all of its right side */
  /* the photo crops from the left here, so she sits further left: the veil reaches a little further */
  .hero__fade { background: linear-gradient(90deg, rgba(255,255,255,0.65) 34%, rgba(255,255,255,0.47) 48%, rgba(255,255,255,0) 66%); }
}
/* Up to small tablets the text stacks above the photo: side by side, the photo would sit under the words */
@media (max-width: 919.98px) {
  .hero { height: auto; }
  .hero__bg { display: none; }
  .hero__content { max-width: 100%; padding: 40px clamp(20px, 7vw, 100px); margin-bottom: 0; }
  .hero__mobile { display: block; }
  .hero__title { font-size: clamp(56px, 8.4vw, 76px); }
  html[lang="pt-BR"] .hero__title { font-size: clamp(50px, 7.4vw, 68px); }
  .hero__sub { font-size: 23px; max-width: 520px; }
}
@media (max-width: 767.98px) {
  /* phones: the title follows the screen width; the floor keeps "Opportunity" / "oportunidades" on one line at 320px */
  .hero__title { font-size: clamp(40px, 12.2vw, 64px); }
  html[lang="pt-BR"] .hero__title { font-size: clamp(36px, 10.7vw, 50px); }
}

/* Below 500px the header is taller (the demo button gets its own row): 125px navbar */
@media (max-width: 499.98px) {
  .hero { padding-top: 125px; }
}

/* Stats (#platform)
   -------------------------------------------------------------------------- */
.stats { padding: 64px clamp(20px, 7vw, 100px) 42px; scroll-margin-top: 72px; }
/* Mayo logo, three metrics, AHA logo */
.stats__grid { display: grid; grid-template-columns: minmax(0, 222.7fr) repeat(3, minmax(0, 248.2fr)) minmax(0, 222.7fr); align-items: start; padding: 0; row-gap: 32px; }
.stats__cell {
  min-width: 0; min-height: 146px; margin: 0; border: 0 solid #D9DFF1; border-left-width: 1px; padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.stats__cell:first-child { border-left-color: transparent; }
/* Metric cells hang from the top, so the numbers share one baseline and the labels start on one line even
   when a label wraps (a centred cell would lift the whole metric); slimmer sides give the labels room */
.stats__cell:not(.stats__cell--logo) { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
.stats__label { text-wrap: balance; }
.stats__value { display: inline-block; font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -1px; color: #0479FE; font-variant-numeric: tabular-nums; }
.stats__label { font-weight: 600; font-size: 20px; line-height: 1.2; color: #213145; }
.stats__logo { max-width: 100%; object-fit: cover; display: block; }
.stats__logo--mayo { width: 220px; height: 80px; object-fit: contain; }
/* Trimmed AHA mark (its artwork only), sized by width so it scales down with a narrow cell instead of cropping */
.stats__logo--aha { width: 155px; height: auto; object-fit: contain; }

/* Narrower: the three metrics on one row, the two logos on the row below */
@media (max-width: 1099.98px) {
  .stats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
  .stats__cell { grid-column: span 2; }
  .stats__cell--logo { grid-column: span 3; order: 1; }
  .stats__cell:nth-child(2) { border-left-color: transparent; }
}
/* Phone: two metrics, then 5.5x across the full row, then the logos */
@media (max-width: 599.98px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__cell, .stats__cell--logo { grid-column: span 1; }
  .stats__cell:nth-child(4) { grid-column: span 2; border-left-color: transparent; }
  .stats__cell--logo { padding-left: 8px; padding-right: 8px; }
}

/* Care journey
   -------------------------------------------------------------------------- */
.gap { padding: 24px clamp(20px, 7vw, 100px) 0; }
.gap__inner { max-width: 928px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.gap__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.19; letter-spacing: -0.02em; color: rgb(16,38,101); white-space: pre-line; text-wrap: balance; }
.gap__desc { margin: 0; font-size: 18px; line-height: 1.48; letter-spacing: -0.015em; color: rgb(83,108,159); text-wrap: pretty; }

.journey { padding: 75px 0 102px; }
.journey__scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 20px; }
.journey__scroller::-webkit-scrollbar { display: none; }
.journey__track { display: flex; align-items: flex-start; min-width: 1362px; max-width: 1411px; margin: 0 auto; padding: 4px 0 8px; }
.journey__milestone { flex: 0 0 170px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.journey__ring {
  width: 132px; height: 132px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 3px #0479FE, 0 5px 14px 0 rgba(52,90,140,0.1216);
  display: flex; align-items: center; justify-content: center;
}
.journey__disc { width: 120px; height: 120px; border-radius: 50%; background: #F0FAFF; overflow: hidden; }
.journey__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.journey__title { margin-top: 17px; font-weight: 600; font-size: 24px; line-height: 1.08; color: rgb(6,41,111); text-align: center; white-space: pre; }
.journey__desc { margin: 8px -24px 0; width: 218px; font-size: 20px; line-height: 1.12; color: rgb(83,107,145); text-align: center; white-space: pre-line; }
.journey__question { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; padding-top: 35px; }
.journey__qring {
  width: 62px; height: 62px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1px rgb(255,214,216), 0 5px 14px 0 rgba(52,90,140,0.1216);
  display: flex; align-items: center; justify-content: center;
}
.journey__qdot { width: 28px; height: 28px; border-radius: 50%; background: rgb(255,127,134); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 18px; line-height: 1; }
.journey__qtext { margin: 6px -40px 0; width: 176px; font-size: 20px; line-height: 1.12; color: rgb(83,107,145); text-align: center; white-space: pre-line; }
.journey__line { flex: 1 1 16px; min-width: 16px; margin-top: 65px; height: 2px; display: flex; }
.journey__line-solid { flex: 2; background: #0479FE; }
.journey__line-dashed { flex: 3; background: repeating-linear-gradient(90deg, rgb(255,127,134) 0 6px, transparent 6px 12px); }

.journey__controls { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding: 0 20px; }
.journey__controls.is-visible { display: flex; }
.journey__arrow { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid #D9DFF1; background: #fff; color: #0479FE; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Each dot button is a 24px touch target (WCAG 2.5.8); the visible dot is drawn inside it. */
.journey__dots, .tcar__dots { display: flex; }
.carousel-dot { position: relative; width: 24px; height: 24px; border: 0; padding: 0; cursor: pointer; background: transparent; transition: width 200ms ease-out; }
.carousel-dot::before { content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 9999px; background: #D9DFF1; transition: width 200ms ease-out, background 200ms ease-out; }
.carousel-dot.is-active { width: 40px; }
.carousel-dot.is-active::before { width: 24px; background: #0479FE; }

.journey__close { margin: 28px auto 0; padding: 0 20px; max-width: 900px; text-align: center; font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; color: #0479FE; white-space: pre-line; text-wrap: balance; }

/* How it works
   -------------------------------------------------------------------------- */
.how { padding: clamp(72px, 8vw, 112px) 0 clamp(80px, 8.5vw, 120px); scroll-margin-top: 72px; overflow: hidden; }
.how__eyebrow { display: block; margin-bottom: 14px; text-align: center; }
/* Human oversight photo with an HTML caption card over its top-left corner (stacks under the photo on small screens) */
.how__photo { position: relative; width: calc(100% - 40px); max-width: 880px; margin: 0 auto clamp(56px, 6vw, 88px); }
/* The image ships with rounded transparent corners; the % radius matches them at any width so the shadow follows the edge */
.how__photo-img { display: block; width: 100%; height: auto; border-radius: 3% / 5.1%; box-shadow: 0 18px 40px -16px rgba(22,58,92,0.25); }
.how__photo-card {
  position: absolute; left: 2.6%; top: 4.3%; max-width: min(440px, 62%);
  display: flex; flex-direction: column; gap: 6px; padding: 16px 22px 18px;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(208,220,240,0.9); border-radius: 14px; box-shadow: 0 8px 24px -10px rgba(22,58,92,0.25);
}
.how__photo-label { font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: 1.2px; color: #0479FE; }
.how__photo-title { font-weight: 600; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.25; color: #213145; text-wrap: balance; }
@media (max-width: 599.98px) {
  .how__photo-card { position: relative; left: auto; top: auto; max-width: none; margin: -28px 14px 0; padding: 14px 18px 16px; }
}
.how__title { margin: 0 auto; padding: 0 20px; max-width: 900px; text-align: center; font-weight: 600; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; color: #213145; text-wrap: balance; }
.how__sub { margin: 12px auto 0; padding: 0 20px; max-width: 760px; text-align: center; font-size: 18px; line-height: 1.48; letter-spacing: -0.015em; color: rgb(83,108,159); text-wrap: pretty; }
.how__stages { position: relative; height: 300px; margin-top: 56px; }
.how__wave { position: absolute; left: 0; top: 0; width: 100%; height: 200px; overflow: visible; }
.how__chevron { position: absolute; left: var(--x); top: 62px; transform: translateX(-50%); font-size: 28px; line-height: 1; color: #0479FE; }
.how__stage { position: absolute; left: var(--x); top: -4px; width: 260px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.how__icon { position: relative; width: 88px; height: 88px; border-radius: 9999px; background: #fff; box-shadow: 0 4px 10px 0 rgba(33,49,69,0.1216); display: flex; align-items: center; justify-content: center; transition: transform 500ms var(--how-ease), background-color 500ms var(--how-ease), box-shadow 500ms var(--how-ease); }
.how { --how-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.how__icon > * { transition: transform 500ms var(--how-ease); }
.how__icon img, .how__icon-check, .how__bar { transition: transform 500ms var(--how-ease), filter 500ms var(--how-ease), background-color 500ms var(--how-ease), color 500ms var(--how-ease); }
.how__stage-title, .how__stage-desc { transition: color 500ms var(--how-ease); }
/* Hovering a stage lifts its icon tile in Tabia blue; js/main.js also speeds up the dots on the wave */
@media (hover: hover) {
  .how__stage:hover .how__icon { transform: scale(1.12); background: #0479FE; box-shadow: 0 10px 22px -4px rgba(4,121,254,0.45); }
  .how__stage:hover .how__icon > * { transform: scale(1.15); }
  .how__stage:hover .how__stage-title, .how__stage:hover .how__stage-desc { color: #0479FE; }
  .how__stage:hover .how__icon img { filter: brightness(0) invert(1); }
  .how__stage:hover .how__icon-check { background: #fff; color: #0479FE; }
  .how__stage:hover .how__bar { background: #fff; }
}
.how__dots { animation: how-dots 9s linear infinite; }
@keyframes how-dots { to { stroke-dashoffset: -230; } }
.how__icon-search { width: 36px; height: 36px; }
.how__icon-users { width: 40px; height: 36px; }
.how__icon-check { width: 48px; height: 48px; border-radius: 50%; background: rgb(89,167,255); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 28px; line-height: 1; }
.how__icon-growth { position: relative; width: 44px; height: 42px; }
.how__bar { position: absolute; bottom: 0; width: 6px; border-radius: 2px; background: #378FEF; }
.how__bar:nth-child(1) { left: 4px; height: 10px; }
.how__bar:nth-child(2) { left: 18px; height: 16px; }
.how__bar:nth-child(3) { left: 32px; height: 22px; }
.how__icon-growth-arrow { position: absolute; left: 0; top: -1px; width: 44px; height: 32px; }
.how__stage-title { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.35; color: #213145; text-align: center; }
.how__stage-desc { margin: -2px 0 0; font-size: 19px; line-height: 1.28; color: #213145; text-align: center; white-space: pre-line; }

@media (max-width: 1099.98px) {
  .how__stages {
    position: static; height: auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); row-gap: 40px;
    max-width: 900px; margin: 44px auto 0; padding: 0 clamp(20px, 5vw, 70px);
  }
  .how__wave, .how__chevron { display: none; }
  .js .how__stages[data-reveal] { opacity: 1; transform: none; transition: none; }
  .how__stage { position: static; width: auto; transform: none; padding: 0 12px; }
}

/* A real example
   -------------------------------------------------------------------------- */
.example { background: #F4F6FC; padding: clamp(56px, 7vw, 91px) clamp(20px, 7vw, 110px); }
.example__inner { max-width: 1272px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px 20px; }
.example__intro { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 18px; }
.example__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; color: #213145; white-space: pre-line; }
.example__desc { margin: 0; max-width: 335px; font-size: 18px; line-height: 1.55; color: #213145; }
.example__play { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.example__play-btn {
  width: 48px; height: 48px; border-radius: 9999px; border: 0; background: #0479FE; color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: background 140ms ease-out;
}
.example__play-btn svg { display: block; }
.example__play-btn:hover { background: #015BC1; }
.example__play-link { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: #0479FE; font-weight: 600; font-size: 16px; cursor: pointer; transition: background 140ms ease-out; }
.example__play-link:hover { background: #F4F6FC; }

.example__hint { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #0479FE; }
.example__hint svg { flex: none; } /* hand pointing right, toward the phone */

/* Interactive check-in: .flow[data-state] = great | okay | notwell (js/main.js renders the card bodies).
   Drawn at 1.2x (zoom); js/main.js shrinks it between 768px and 1180px so the three parts stay on one row. */
.flow {
  --ex-border: #D6E2F5; --ex-muted: #4E5968; --ex-soft: #6C8798; --ex-shadow: 0 10px 30px rgba(29,36,46,0.08);
  --ex-green: #1F9D63; --ex-green-soft: #E3F6EC; --ex-green-text: #157347;
  --ex-amber: #D98A00; --ex-amber-soft: #FFF4DE; --ex-amber-text: #8A5A00;
  --ex-red: #E5484D; --ex-red-soft: #FDECEC; --ex-red-text: #B42328;
  flex: 10 1 714px; min-width: 0; zoom: 1.2;
  display: grid; grid-template-columns: 164px 40px minmax(0, 250px) 40px minmax(0, 220px); align-items: center; justify-content: center;
  color: #213145;
}
.ex-connector { display: flex; justify-content: center; color: #0479FE; }
.ex-connector svg { overflow: visible; }
.ex-dots circle { opacity: .35; }
.flow.is-pulsing .ex-dots circle { animation: ex-travel .9s ease forwards; }
.flow.is-pulsing .ex-dots circle:nth-child(2) { animation-delay: .1s; }
.flow.is-pulsing .ex-dots circle:nth-child(3) { animation-delay: .2s; }
.flow.is-pulsing .ex-connector--2 .ex-dots circle { animation-delay: .55s; }
.flow.is-pulsing .ex-connector--2 .ex-dots circle:nth-child(2) { animation-delay: .65s; }
.flow.is-pulsing .ex-connector--2 .ex-dots circle:nth-child(3) { animation-delay: .75s; }
@keyframes ex-travel { 0% { opacity: .35; } 40% { opacity: 1; } 100% { opacity: .35; } }

.ex-phone {
  position: relative; width: 164px; aspect-ratio: 9 / 18.5; display: flex; flex-direction: column;
  padding: 32px 11px 20px; background: #fff; border: 6px solid #1D242E; border-radius: 32px;
  box-shadow: 0 0 0 1.5px #3A4452, var(--ex-shadow);
}
.ex-phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 46px; height: 14px; transform: translateX(-50%); background: #1D242E; border-radius: 12px; }
.ex-phone::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 52px; height: 3px; transform: translateX(-50%); background: #1D242E; opacity: .8; border-radius: 4px; }
.ex-phone__status { position: absolute; top: 7px; left: 15px; right: 13px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 600; pointer-events: none; }
.ex-phone__icons { display: flex; gap: 3px; align-items: center; }

/* Message the patient receives before the check-in: iOS Messages (SMS) in English, WhatsApp in Portuguese. */
.ex-phone--msg { padding: 0; overflow: hidden; }
.ex-phone--msg .ex-phone__status { z-index: 1; }
.ex-msg { display: none; flex: 1; flex-direction: column; min-height: 0; }
.ex-msg__bar { display: flex; align-items: center; gap: 5px; padding: 28px 9px 6px; font-size: 10.5px; font-weight: 600; }
.ex-msg__bar img { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff; }
.ex-msg__thread { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px 8px 0; }
.ex-msg__time { font-size: 7.5px; text-align: center; }
.ex-bubble { margin: 0; max-width: 90%; padding: 6px 8px; font-size: 9.5px; line-height: 1.3; }
.ex-bubble p { margin: 0; }
.ex-replies { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.ex-reply { padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font: 600 9px "Fira Sans", sans-serif; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.ex-reply:active { transform: scale(.97); }
.ex-reply:focus-visible { outline: 3px solid rgba(4,121,254,0.4); outline-offset: 1px; }
.ex-msg__input { margin: 0 8px 14px; padding: 5px 9px; border-radius: 999px; font-size: 8.5px; }
.ex-msg--sms .ex-bubble { padding-bottom: 3px; }
.ex-msg--wa .ex-bubble { padding-bottom: 3px; }
html:not([lang="pt-BR"]) .ex-msg--sms, html[lang="pt-BR"] .ex-msg--wa { display: flex; }

.ex-msg--sms { background: #fff; color: #000; }
.ex-msg--sms .ex-msg__bar { flex-direction: column; justify-content: flex-end; gap: 2px; padding: 26px 9px 6px; background: linear-gradient(#D7EBFA, #EEF6FC); font-size: 8.5px; font-weight: 500; }
.ex-msg--sms .ex-msg__bar img { width: 24px; height: 24px; padding: 4px; border: 1px solid #E1E8F0; }
.ex-msg--sms .ex-msg__time { color: #8A8A8E; }
.ex-msg--sms .ex-bubble { align-self: flex-start; background: #E9E9EB; border-radius: 13px 13px 13px 4px; }
.ex-msg--sms .ex-reply { background: #fff; border-color: #D6D6DB; color: #0A7AFF; }
.ex-msg--sms .ex-reply:hover { border-color: #0A7AFF; }
.ex-msg--sms .ex-reply[aria-pressed="true"] { background: #0A7AFF; border-color: #0A7AFF; color: #fff; }
.ex-msg--sms .ex-msg__input { border: 1px solid #D1D1D6; color: #B0B0B5; }

.ex-msg--wa { background: #EFE7DD; color: #111B21; }
html[lang="pt-BR"] .ex-phone--msg .ex-phone__status { color: #fff; }
.ex-msg--wa .ex-msg__bar { background: #008069; color: #fff; }
.ex-msg--wa .ex-msg__bar img { padding: 3px; }
.ex-msg--wa .ex-msg__time { align-self: center; padding: 2px 7px; border-radius: 6px; background: #fff; color: #54656F; box-shadow: 0 1px 0 rgba(11,20,26,.08); }
.ex-msg--wa .ex-bubble { position: relative; align-self: flex-start; background: #fff; border-radius: 0 8px 8px 8px; box-shadow: 0 1px 0 rgba(11,20,26,.13); }
.ex-msg--wa .ex-bubble::before { content: ""; position: absolute; top: 0; left: -5px; border-top: 6px solid #fff; border-left: 6px solid transparent; }
.ex-msg--wa .ex-reply { border-radius: 7px; background: #F0F2F5; color: #027EB5; }
.ex-msg--wa .ex-reply:hover { background: #E4E8EC; }
.ex-msg--wa .ex-reply[aria-pressed="true"] { background: #D9FDD3; border-color: #25D366; color: #0B5D3B; }
.ex-bubble p { display: flow-root; }
.ex-msg--wa .ex-bubble small { float: right; margin: 4px 0 0 6px; font-size: 6.5px; color: #667781; }
.ex-msg--wa .ex-msg__input { margin: 0 6px 14px; background: #fff; color: #667781; }

.ex-card { padding: 18px; background: #fff; border: 1px solid var(--ex-border); border-radius: 16px; box-shadow: var(--ex-shadow); }
.ex-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ex-border); font-size: 15px; font-weight: 600; }
.ex-status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.ex-status__dot { flex: none; display: grid; place-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.flow[data-state="great"] .ex-status { background: var(--ex-green-soft); }
.flow[data-state="great"] .ex-status__dot { background: var(--ex-green); }
.flow[data-state="okay"] .ex-status { background: var(--ex-amber-soft); }
.flow[data-state="okay"] .ex-status__dot { background: var(--ex-amber); }
.flow[data-state="notwell"] .ex-status { background: var(--ex-red-soft); }
.flow[data-state="notwell"] .ex-status__dot { background: var(--ex-red); }
.ex-steps { margin: 0; padding: 0; list-style: none; }
.ex-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.3; opacity: 0; transform: translateY(4px); animation: ex-step-in .35s ease forwards; }
.ex-steps li:nth-child(2) { animation-delay: .12s; }
.ex-steps li:nth-child(3) { animation-delay: .24s; }
@keyframes ex-step-in { to { opacity: 1; transform: none; } }
.ex-check { flex: none; display: grid; place-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0479FE; }

.ex-avatars { display: flex; align-items: center; margin-bottom: 12px; }
.ex-avatars__group { display: flex; }
.ex-avatar { position: relative; display: grid; place-content: center; width: 28px; height: 28px; margin-left: -7px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.ex-avatar:first-child { margin-left: 0; }
.ex-avatar--1 { background: #0479FE; } .ex-avatar--2 { background: #233CFE; } .ex-avatar--3 { background: #6B8CFF; }
.ex-avatar.is-active::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--ex-ring, #0479FE); border-radius: 50%; opacity: .8; animation: ex-ping 1.6s ease-out infinite; }
@keyframes ex-ping { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ex-avatars small { margin-left: 10px; font-size: 13px; line-height: 1.3; color: var(--ex-muted); }
.ex-team__title { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.ex-team__text { display: block; font-size: 14px; line-height: 1.4; color: var(--ex-muted); }
.ex-tag { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.flow[data-state="great"] { --ex-ring: var(--ex-green); }
.flow[data-state="okay"] { --ex-ring: var(--ex-amber); }
.flow[data-state="notwell"] { --ex-ring: var(--ex-red); }
.flow[data-state="great"] .ex-tag { background: var(--ex-green-soft); color: var(--ex-green-text); }
.flow[data-state="okay"] .ex-tag { background: var(--ex-amber-soft); color: var(--ex-amber-text); }
.flow[data-state="notwell"] .ex-tag { background: var(--ex-red-soft); color: var(--ex-red-text); }
.ex-fade { animation: ex-fade .35s ease; }
@keyframes ex-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1359.98px) {
  .example__intro { max-width: 100%; }
  .example__hint svg { transform: rotate(90deg); } /* stacked: the hand points down, to the phone below */
}
/* Laptops, tablets and phones: the intro sits above the example, centred like the next section, with the
   video link above the "Try it" hint. Title on one line where it fits (balanced over two on phones),
   description on two. */
@media (max-width: 1359.98px) {
  .example__intro { align-items: center; text-align: center; gap: 14px; }
  .example__title { white-space: normal; text-wrap: balance; }
  .example__desc { max-width: 720px; text-wrap: balance; }
  .example__play { order: 1; margin-top: 8px; }
  /* inline, so if the hint wraps on a phone the hand follows the last word, the lines balanced and centred */
  .example__hint { order: 2; display: block; text-wrap: balance; }
  .example__hint svg { display: inline-block; vertical-align: middle; margin-left: 8px; }
}
@media (max-width: 767.98px) {
  .flow { grid-template-columns: 1fr; justify-items: center; max-width: 360px; margin: 0 auto; }
  .flow .ex-card { width: 100%; }
  .ex-connector { padding: 10px 0; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flow *, .flow *::before, .flow *::after { animation: none !important; transition: none !important; }
  .ex-steps li { opacity: 1; transform: none; }
}

/* Care opportunities (animated illustration in an iframe)
   -------------------------------------------------------------------------- */
.engine { padding: clamp(40px, 5vw, 72px) clamp(0px, 4vw, 64px) clamp(24px, 3vw, 40px); background: #fff; }
.engine__intro { max-width: 920px; margin: 0 auto clamp(24px, 3vw, 40px); padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.engine__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #213145; text-wrap: balance; }
.engine__desc { margin: 0; font-size: 18px; line-height: 1.48; color: rgb(83,107,145); text-wrap: pretty; }
.engine__scroller { max-width: 1200px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.engine__scroller::-webkit-scrollbar { display: none; }
.engine__frame { min-width: 0; aspect-ratio: 1270 / 640; }
.engine__iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* Phones and narrow windows: the illustration switches to its vertical layout (cards, orb, actions top to
   bottom; opportunity-engine.html picks it from the frame's shape), so it fits the width with no side scroll */
@media (max-width: 767.98px) {
  .engine__frame { aspect-ratio: 440 / 1050; max-width: 460px; margin: 0 auto; }
}

/* Use cases
   -------------------------------------------------------------------------- */
.usecases { padding: clamp(48px, 5vw, 64px) clamp(20px, 4.5vw, 64px); scroll-margin-top: 72px; }
.usecases__inner { max-width: 1312px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px 28px; align-items: flex-start; }
.usecases__intro { flex: 1 1 360px; max-width: 524px; display: flex; flex-direction: column; gap: 14px; }
.usecases__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #213145; white-space: pre-line; text-wrap: balance; }
.usecases__tagline { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #213145; }
.usecases__desc { margin: 0; font-size: 18px; line-height: 1.55; color: #52637A; text-wrap: pretty; }
.usecases__list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.usecases__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  overflow-x: visible; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 0; padding: 4px 0 12px;
}
.usecases__grid::-webkit-scrollbar { display: none; }
/* Every card as tall as the tallest one in either language (--uc-h, measured in js/main.js) */
.usecases__grid .usecase { min-height: var(--uc-h, 170px); }
.usecases__grid--probe .usecase { min-height: 0; transition: none; } /* the hidden measuring copy: natural heights */
.usecase {
  position: relative; flex: 0 1 auto; scroll-snap-align: start; min-height: 170px; border-radius: 10px;
  border: 1px solid #D9DFF1; background: #FFFFFF; box-shadow: 0 3px 10px 0 rgba(22,58,92,0.0784);
  padding: 18px 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1); will-change: transform;
}
/* Lift on hover only with a real mouse: on touch screens a tap "sticks" the hover, so a card would jump
   and grow under the finger */
@media (hover: hover) and (pointer: fine) {
  .usecase:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 36px -10px rgba(22,58,92,0.13), 0 4px 10px -3px rgba(22,58,92,0.05); z-index: 2; }
}
button.usecase { width: 100%; font: inherit; color: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
.usecase__icon { width: 31px; height: 31px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.usecase__icon--award { background-image: url("../assets/img/icon-award.svg"); }
.usecase__icon--users { background-image: url("../assets/img/icon-users.svg"); }
.usecase__icon--scalpel { background-image: url("../assets/img/icon-scalpel.svg"); }
.usecase__icon--heart { background-image: url("../assets/img/icon-heart.svg"); }
.usecase__icon--stethoscope { background-image: url("../assets/img/icon-stethoscope.svg"); }
.usecase__icon--chart { background-image: url("../assets/img/icon-chart.svg"); }
.usecase__title { font-weight: 600; font-size: 20px; line-height: 1.2; color: #213145; }
.usecase__desc { font-weight: 500; font-size: 14px; line-height: 1.4; color: rgb(102,121,141); text-wrap: pretty; }
.usecase--cta { background: #0479FE; border-color: rgb(1,91,193); cursor: pointer; }
.usecase--cta .usecase__icon { filter: brightness(0) invert(1); }
.usecase--cta .usecase__title, .usecase--cta .usecase__desc { color: #FFFFFF; }
.usecase__cta { margin-top: auto; font-weight: 600; font-size: 14px; color: #fff; text-wrap: balance; } /* the arrow is joined to the last word by a no-break space */

/* Tablets and phones: a plain grid that scrolls with the page (no sideways strip), two cards per row,
   one per row on narrow phones */
@media (max-width: 767.98px) {
  .usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519.98px) {
  .usecases__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Results
   -------------------------------------------------------------------------- */
.results { padding: 56px clamp(20px, 7vw, 100px) 24px; scroll-margin-top: 72px; }
.results__intro { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.results__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #213145; text-wrap: balance; }
.results__desc { margin: 0; font-size: 18px; line-height: 1.48; color: rgb(83,107,145); text-wrap: pretty; }
.results__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; row-gap: 32px; }
.results__cell {
  min-width: 0; min-height: 140px; margin: 0; border: 0 solid #D9DFF1; border-left-width: 1px; padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.results__cell:nth-child(4n+1) { border-left-color: transparent; }
.results__value { display: inline-block; font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -1px; color: #0479FE; font-variant-numeric: tabular-nums; }
/* After the count-up (js/main.js) the number grows a little and settles back */
.count__unit { font-size: 0.6em; } /* unit (%, M, M+, ×) at 3/5 of the number */
/* Proof band and results: the unit sits almost at the number's size, in Fira Sans SemiBold, so each metric reads as one unit */
.stats .count__unit, .results .count__unit { font-size: 0.88em; font-weight: 600; margin-left: 0.02em; }
.stats .count__unit--times { font-size: 1.75em; font-weight: 400; line-height: 0; vertical-align: -0.16em; margin-left: -0.08em; } /* the × glyph is drawn small: larger, and in Regular so its strokes stay as thin as M+ and % */
[data-count-up].is-popping { animation: count-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.results__label { font-weight: 600; font-size: 15px; line-height: 1.2; color: #213145; }
.results__footnote { margin: 24px 0 0; text-align: center; font-size: 14px; font-style: italic; line-height: 30px; color: #52637A; }

@media (max-width: 999.98px) {
  .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results__cell:nth-child(4n+1) { border-left-color: #D9DFF1; }
  .results__cell:nth-child(2n+1) { border-left-color: transparent; }
}

/* Testimonials (draggable carousel)
   -------------------------------------------------------------------------- */
.testimonials { padding: 56px clamp(20px, 4vw, 58px) 72px; scroll-margin-top: 72px; }
.testimonials__intro { max-width: 984px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.testimonials__title { margin: 0; font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #213145; text-wrap: balance; }
.tcar { max-width: 1320px; margin: 20px auto 0; --tcar-pct: 64%; }
.tcar__viewport { overflow: hidden; padding: 24px 0 44px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tcar__viewport.is-dragging { cursor: grabbing; }
.tcar__track {
  display: flex; gap: 24px;
  transform: translateX(calc((100% - var(--tcar-pct)) / 2 - var(--tcar-idx, 0) * (var(--tcar-pct) + 24px) + var(--tcar-drag, 0px)));
  transition: transform 560ms cubic-bezier(.22,.61,.36,1);
}
.tcar__viewport.is-dragging .tcar__track { transition: none; }
/* Loop: after sliding onto an edge clone, the track jumps back to the real card with no animation */
.tcar__track.is-jumping, .tcar__track.is-jumping .tcar__card { transition: none; }
.tcar__card {
  flex: 0 0 var(--tcar-pct); margin: 0; background: #fff; border: 1px solid #D9DFF1; border-radius: 16px;
  box-shadow: 0 6px 18px 0 rgba(27,79,122,0.06); opacity: .5; transform: scale(0.96);
  transition: opacity 420ms ease-out, transform 520ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms ease-out;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px); display: flex; gap: 14px; align-items: flex-start;
}
.tcar__card.is-active { opacity: 1; transform: none; box-shadow: 0 12px 32px 0 rgba(27,79,122,0.12), 0 2px 6px 0 rgba(27,79,122,0.06); }
.quote__mark { flex: 0 0 54px; font-weight: 700; font-size: 62px; line-height: .82; color: rgb(200,231,255); }
.quote__content { padding: 9px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.quote__text { margin: 0; font-weight: 500; font-style: italic; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: #213145; }
.quote__caption { display: flex; flex-direction: column; margin-top: 10px; } /* 20px below the quote, with the 10px gap */
.quote__role { font-weight: 500; font-size: 17px; line-height: 1.35; color: #213145; opacity: .7; }
.quote__role::before { content: "— "; }
/* Named author: the dash moves from the role to the name */
.quote__author { font-weight: 600; font-size: 17px; line-height: 1.35; color: #213145; }
.quote__author::before { content: "— "; }
.quote__author + .quote__role::before { content: none; }
.tcar__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.tcar__arrow {
  width: 44px; height: 44px; border-radius: 9999px; border: 1px solid #D9DFF1; background: #fff; color: #0479FE; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 140ms ease-out, opacity 140ms ease-out;
}
.tcar__arrow:hover { background: #F4F6FC; }
.tcar__toggle { margin-left: 8px; }
.tcar__toggle[hidden] { display: none; }
.tcar__toggle .tcar__icon-play, .tcar__toggle.is-paused .tcar__icon-pause { display: none; }
.tcar__toggle.is-paused .tcar__icon-play { display: block; }

@media (max-width: 1099.98px) {
  .tcar { --tcar-pct: 74%; }
}
@media (max-width: 767.98px) {
  .tcar { --tcar-pct: 86%; }
  .quote__mark { flex-basis: 32px; }
}

/* CTA
   -------------------------------------------------------------------------- */
.cta { background: rgb(244,247,251); padding: clamp(56px, 6.4vw, 92px) 20px clamp(56px, 6.4vw, 92px); }
.cta__inner { max-width: 836px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cta__title { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.7px; color: #0479FE; text-wrap: balance; }
.cta__sub { margin: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; color: #213145; text-wrap: balance; }
.cta__btn {
  margin-top: 35px; min-height: 56px; padding: 12px 32px; border: 0; border-radius: 64px;
  background: #0479FE; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; transition: background 140ms ease-out;
}
.cta__btn:hover { background: #015BC1; }
/* HIPAA and AHA side by side, centred over the Mayo banner, 60px below the button (with the 8px gap) */
.cta__marks { display: flex; align-items: center; justify-content: center; gap: 64px; margin-top: 52px; }
/* Both marks are trimmed to their artwork, so equal heights and a plain gap centre the pair. */
.cta__badge, .cta__aha { display: block; width: auto; height: 76px; }
.cta__aha { height: 86px; } /* the AHA artwork is lighter than the HIPAA badge; a touch taller balances them */
/* The badge reads as sitting high next to the AHA heart (its shield is top-heavy): nudge it down to align optically */
.cta__badge { transform: translateY(11px); }
.cta__partner { display: block; width: 100%; max-width: 640px; height: auto; margin-top: 40px; border-radius: 4px; }
.cta__arrow { font-size: 22px; font-weight: 400; line-height: 1; }
/* Phones: both marks shrink to the same smaller height */
@media (max-width: 519.98px) {
  .cta__marks { gap: 8vw; }
  .cta__badge { height: 64px; transform: translateY(9px); } /* the same nudge, scaled to the smaller marks */
  .cta__aha { height: 72px; }
}

/* Footer
   -------------------------------------------------------------------------- */
.footer { background: rgb(1,91,193); color: #fff; }
.footer__main { width: 80%; margin: 0 auto; padding: 56px 0 40px; display: grid; grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__brand { grid-column: auto; max-width: 320px; display: flex; flex-direction: column; gap: 18px; }
.footer__logo { width: 175px; max-width: 100%; height: auto; }
.footer__tagline { font-size: 14.5px; line-height: 23px; color: #BBC4DF; }
.footer__social { display: flex; gap: 12px; }
.footer__social-link { width: 38px; height: 38px; border-radius: 19px; background: #fff; box-shadow: inset 0 0 0 1px #D9DFF1; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #213145; transition: background-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; }
/* Hover and keyboard focus: the circle stays white and the icon takes its network's brand colour
   (LinkedIn blue, YouTube red, Instagram's gradient), lifting slightly */
.footer__social-link:hover, .footer__social-link:focus-visible { transform: translateY(-2px); }
.footer__social-link--linkedin:hover, .footer__social-link--linkedin:focus-visible { color: #0A66C2; }
.footer__social-link--youtube:hover, .footer__social-link--youtube:focus-visible { color: #FF0000; }
.footer__social-link--instagram:hover svg, .footer__social-link--instagram:focus-visible svg { stroke: url(#ig-brand); }
.footer__social-link--instagram:hover .ig-dot, .footer__social-link--instagram:focus-visible .ig-dot { fill: #D6249F; }
@media (prefers-reduced-motion: reduce) {
  .footer__social-link { transition: none; }
  .footer__social-link:hover, .footer__social-link:focus-visible { transform: none; }
}
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__col-title { font-weight: 600; font-size: 13px; line-height: 1; color: #fff; }
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__link { font-size: 14.5px; line-height: 1.3; color: #BBC4DF; transition: color 140ms ease-out; }
.footer__link:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgb(14,81,153); }
.footer__bottom-inner { width: 80%; margin: 0 auto; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer__copy, .footer__made { font-size: 13px; line-height: 1; color: #fff; }

@media (max-width: 1023.98px) {
  .footer__main, .footer__bottom-inner { width: calc(100% - 40px); }
}
@media (max-width: 767.98px) {
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Modals (demo form, video)
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(33,49,69,0.48); display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.modal.is-open { display: flex; }
.modal__dialog:focus { outline: none; }
.modal__dialog { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 16px; box-shadow: 0 0 16px 8px rgba(0,0,0,0.08); padding: clamp(24px, 4vw, 32px); margin: auto; }
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #52637A; font-size: 24px; line-height: 1; cursor: pointer; }
.modal__close:hover { background: #F4F6FC; }

.form__head { display: flex; flex-direction: column; gap: 6px; padding-right: 32px; }
.form__title { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.2; color: #213145; }
.modal__dialog--video { max-width: 960px; padding: 0; background: #000; border-radius: 12px; }
.modal__video { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.modal__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.modal__close--video { top: -52px; right: 0; color: #fff; font-size: 32px; }
.modal__close--video:hover { background: rgba(255,255,255,0.12); }
.modal--video { padding-top: 72px; background: rgba(12,20,33,0.85); }
.modal__focus-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.modal__hubspot { margin-top: 4px; min-height: 280px; }
.modal__fallback { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }

/* Cookie consent bar (layout of the original tabiahealth.com notice, plus the choice buttons)
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(5,23,46,0.86);
  visibility: hidden; opacity: 0;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.cookie.is-visible { visibility: visible; opacity: 1; transition: opacity 400ms ease; }
.cookie__inner { max-width: 1350px; margin: 0 auto; padding: 16px 45px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.cookie__text { margin: 0; font-size: 14px; line-height: 1.7; color: #fff; text-align: center; text-wrap: balance; }
.cookie__link { color: #0479FE; }
.cookie__link:hover { color: #015BC1; }
.cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie__btn {
  height: 36px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out;
}
.cookie__btn--accept { background: #0479FE; border-color: #0479FE; color: #fff; }
.cookie__btn--accept:hover { background: #015BC1; border-color: #015BC1; }
.cookie__btn--decline { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.cookie__btn--decline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

@media (max-width: 767.98px) {
  .cookie__inner { padding: 16px 20px; }
  .cookie__text { font-size: 13px; }
  .cookie__actions { width: 100%; justify-content: center; }
  .cookie__btn { flex: 1 1 0; max-width: 200px; }
}

/* Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal]:not(.is-settled) { opacity: 1; transform: none; transition: none; }
  .cookie, .cookie.is-visible { transition: none; }
  .how__dots { animation: none; }
  .how__icon, .how__icon > *, .how__icon img, .how__icon-check, .how__bar, .how__stage-title, .how__stage-desc { transition: none; }
}

/* Below 500px the header is 125px tall once scrolled (demo button on its own row), so menu links land
   sections below it. Kept last so it wins over each section's 72px. */
@media (max-width: 499.98px) {
  .stats, .how, .usecases, .results, .testimonials { scroll-margin-top: 128px; }
}