/*
 * Hia marketing site: stylesheet
 *
 * Design language: calm near-black and paper sections, light display type, muted teal panels behind
 * product mock-ups, one lime accent. Plain CSS, no framework or preprocessor.
 *
 * Design tokens are the custom properties in :root (colours, shadows, fonts, content width, gutter).
 * Breakpoints: 1080px (small laptops), 980px (tablet: single column, mobile menu), 760px (phones).
 *
 * Order matters. Later sections refine earlier ones (for example the journey stepper, routines and
 * integrations orbit are defined, then adjusted further down). When changing a component, search for
 * its class name and edit the last matching rule, or add your change at the end of its section.
 *
 * Contents
 *   Tokens and base · Primitives (buttons, labels, tags, avatars, icon tiles) · Section layouts · Navigation
 *   Hero · Problem cards · Statement · Teal panels · Feature rows and product mock-ups (profile, EHR,
 *   mind map, content plan, partnerships board, contracts, phone, payments) · Ask Hia · Professions
 *   Privacy bento · Network band · FAQ · Forms · Footer · Brands page · Legal pages · Reveal · Responsive
 *   Refinements: dark-section surfaces, hero details, motion, trust, footer card, brand logos,
 *   professions preview, journey stepper, integrations orbit, routines panel, Ask Hia chips
 */
:root {
  --ink: #0c1617;
  --ink-2: #2a3a3b;
  --muted: #5f6f6f;
  --muted-2: #8a9897;
  --black: #071012;
  --deep: #0b1a1c;
  --deep-2: #102426;
  --teal: #133739;
  --teal-2: #0f4a48;
  --panel: #5f8f8b;
  --panel-2: #7ea7a3;
  --lime: #d4f06a;
  --lime-2: #eef8c9;
  --mint: #5fae86;
  --mint-2: #e2f1e8;
  --sky: #e3edf3;
  --peach: #f6e6d8;
  --lav: #ebe7f6;
  --sand: #f3efe6;
  --paper: #fbfbf9;
  --grey: #f3f3f1;
  --white: #fff;
  --line: rgba(12,22,23,.1);
  --line-2: rgba(12,22,23,.06);
  --dline: rgba(255,255,255,.09);
  --on-dark: #eef3f2;
  --on-dark-2: #9fb1ae;
  --shadow-sm: 0 1px 2px rgba(7,16,18,.06),0 2px 6px rgba(7,16,18,.04);
  --shadow: 0 2px 4px rgba(7,16,18,.04),0 14px 36px -12px rgba(7,16,18,.18);
  --shadow-lg: 0 4px 10px rgba(7,16,18,.06),0 34px 80px -24px rgba(7,16,18,.4);
  --font: "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display: "Inter Tight","Inter",system-ui,sans-serif;
  --wrap: 1200px;
  --g: 24px;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg {
  display: block;
  max-width: 100%;
}
svg.i {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.lg {
  width: 1em;
  height: 1em;
  flex: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
p {
  margin: 0;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--g);
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========== Primitives: buttons, labels, tags, avatars, icon tiles ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .2s,background .2s,border-color .2s,box-shadow .2s;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn svg.i {
  width: 16px;
  height: 16px;
}
.btn-lime {
  background: var(--lime);
  color: var(--ink);
}
.btn-lime:hover {
  background: #dff58a;
  box-shadow: 0 10px 26px -10px rgba(212,240,106,.7);
}
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover {
  background: #1c2a2b;
}
.btn-ghost {
  border-color: rgba(255,255,255,.16);
  color: #fff;
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.09);
}
.btn-line {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}
.btn-sm {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 10px;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.label svg.i {
  width: 14px;
  height: 14px;
  color: var(--mint);
}
.dark .label {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--on-dark);
  box-shadow: none;
}
.dark .label svg.i {
  color: var(--lime);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.4;
}
.tag.g {
  background: var(--mint-2);
  color: #226a46;
}
.tag.y {
  background: #fbf1cf;
  color: #86650c;
}
.tag.b {
  background: var(--sky);
  color: #2a5a78;
}
.tag.p {
  background: var(--peach);
  color: #97502a;
}
.tag.v {
  background: var(--lav);
  color: #59479a;
}
.tag.n {
  background: #efefec;
  color: #55605f;
}
.tag.d {
  background: var(--ink);
  color: #fff;
}
.av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  object-fit: cover;
}
.a1 {
  background: linear-gradient(135deg,#7bb79a,#3f7f66);
}
.a5 {
  background: linear-gradient(135deg,#b8a3dc,#7b62ad);
}
.ic {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  width: 34px;
  height: 34px;
}
.ic svg.i {
  width: 17px;
  height: 17px;
}
.i-mint {
  background: var(--mint-2);
  color: #226a46;
}
.i-sky {
  background: var(--sky);
  color: #2a5a78;
}
.i-peach {
  background: var(--peach);
  color: #97502a;
}
.i-lav {
  background: var(--lav);
  color: #59479a;
}
.i-lime {
  background: var(--lime-2);
  color: #4b6110;
}

/* ========== Section layouts and headings ========== */
section {
  position: relative;
}
.sec {
  padding: 128px 0;
}
.sec-sm {
  padding: 88px 0;
}
.dark {
  background: var(--black);
  color: var(--on-dark);
}
.dark h1, .dark h2, .dark h3, .dark h4 {
  color: #fff;
}
.guides {
  position: relative;
}
.guides::before, .guides::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dline);
  pointer-events: none;
  z-index: 0;
}
.guides::before {
  left: max(12px,calc(50% - var(--wrap)/2 - 32px));
}
.guides::after {
  right: max(12px,calc(50% - var(--wrap)/2 - 32px));
}
.grey {
  background: var(--grey);
}
.sky-fade {
  background: linear-gradient(180deg,#dde7ec 0%,#edf2f4 45%,var(--paper) 100%);
}
.head {
  max-width: 720px;
  margin-bottom: 60px;
}
.head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.head .label {
  margin-bottom: 22px;
}
.head h2 {
  font-size: clamp(34px,4.3vw,56px);
}
.head p {
  font-size: 18px;
  color: var(--muted);
  margin-top: 20px;
  line-height: 1.6;
}
.dark .head p {
  color: var(--on-dark-2);
}

/* ========== Navigation ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .35s,border-color .35s;
}
.nav .wrap {
  display: flex;
  align-items: center;
  height: 74px;
  gap: 30px;
  transition: height .35s;
}
.nav.scrolled, .nav.light {
  background: rgba(251,251,249,.9);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--line);
}
.nav.scrolled .wrap {
  height: 64px;
}
.nav .logo {
  position: relative;
  display: block;
}
.nav .logo img {
  width: auto;
  transition: opacity .3s;
}
.nav .logo .on-light {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.nav.scrolled .logo .on-dark, .nav.light .logo .on-dark {
  opacity: 0;
}
.nav.scrolled .logo .on-light, .nav.light .logo .on-light {
  opacity: 1;
}
.nav-links {
  display: flex;
  gap: 2px;
}
.nav-links a {
  color: rgba(238,243,242,.78);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 9px;
  transition: color .2s,background .2s;
}
.nav-links a:hover, .nav-links a.on {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.nav.scrolled .nav-links a, .nav.light .nav-links a {
  color: #45524f;
}
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.on,
.nav.light .nav-links a:hover,
.nav.light .nav-links a.on {
  color: var(--ink);
  background: rgba(12,22,23,.05);
}
.nav-cta {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav.scrolled .btn-ghost, .nav.light .btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}
.nav.scrolled .btn-lime, .nav.light .btn-lime {
  background: var(--ink);
  color: #fff;
}
.region {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: rgba(238,243,242,.78);
  font-size: 13.5px;
  font-weight: 500;
}
.region svg.i {
  width: 16px;
  height: 16px;
}
.region select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
}
.region:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.nav.scrolled .region, .nav.light .region {
  color: #45524f;
}
.nav.scrolled .region:hover, .nav.light .region:hover {
  background: rgba(12,22,23,.05);
}
.menu-btn {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  place-items: center;
}
.menu-btn svg.i {
  width: 22px;
  height: 22px;
}
.nav.scrolled .menu-btn, .nav.light .menu-btn {
  color: var(--ink);
}
.mobile-menu {
  display: none;
}

/* ========== Hero ========== */
.hero {
  padding: 168px 0 72px;
  overflow: hidden;
  background: radial-gradient(900px 480px at 50% -8%,rgba(95,174,134,.16),transparent 65%),var(--black);
}
.hero-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(44px,6.4vw,80px);
  margin: 22px 0 22px;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.hero .lede {
  font-size: clamp(17px,1.5vw,19px);
  color: var(--on-dark-2);
  max-width: 640px;
  margin: 0 auto;
}
.hero-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--on-dark-2);
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-note span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.hero-note svg.i {
  width: 14px;
  height: 14px;
  color: var(--lime);
}
.hero-media {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.55fr 1fr;
  gap: 14px;
  margin-top: 64px;
}
.photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #1a2b2c;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media .photo {
  aspect-ratio: 16/8.4;
}
.glass {
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 30px -14px rgba(7,16,18,.4);
  border-radius: 14px;
  color: var(--ink);
}
.photo .glass.tl {
  position: absolute;
  left: 22px;
  top: 22px;
  max-width: 300px;
  padding: 14px 16px;
}
.glass h4 {
  font-size: 18px;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.glass p {
  font-size: 13.5px;
  color: #3b4a4a;
  line-height: 1.5;
}
.side-card {
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg,#2f5f6a,#1b3b45 55%,#13303a);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.side-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(300px 200px at 80% 0%,rgba(212,240,106,.18),transparent 70%);
  pointer-events: none;
}
.side-card .k {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 600;
}
.side-card h4 {
  font-size: 24px;
  margin: 10px 0 auto;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.feed {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.feed div {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 13px;
}
.feed svg.i {
  width: 15px;
  height: 15px;
  color: var(--lime);
}
.feed b {
  font-weight: 600;
}
.feed span {
  margin-left: auto;
  font-size: 11px;
  color: var(--on-dark-2);
}
.ticker {
  margin-top: 44px;
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: tick 40s linear infinite;
}
.ticker-track span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 18px;
  color: rgba(238,243,242,.55);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -.01em;
}
.ticker-track svg.i {
  width: 20px;
  height: 20px;
}
@keyframes tick { to{transform:translateX(-50%)} }

/* ========== Problem cards ========== */
.pcards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}
.pcard {
  background: linear-gradient(180deg,#fff,rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 22px 22px 26px;
  box-shadow: var(--shadow-sm);
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.pcard:nth-child(2) {
  margin-top: 44px;
}
.pcard:nth-child(3) {
  margin-top: -12px;
}
.pcard .label {
  align-self: flex-start;
  height: 26px;
  font-size: 12px;
  box-shadow: none;
}
.pcard .big {
  font: 500 58px/1 var(--display);
  letter-spacing: -.05em;
  margin: 26px 0 auto;
}
.pcard .big small {
  font-size: 24px;
  letter-spacing: -.02em;
}
.pcard p {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: 30px;
  line-height: 1.5;
}

/* ========== Statement (words light up on scroll) ========== */
.statement {
  font: 500 clamp(28px,3.6vw,46px)/1.22 var(--display);
  letter-spacing: -.03em;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  text-wrap: balance;
}
.statement .w {
  color: rgba(12,22,23,.16);
  transition: color .3s;
}
.statement .w.on {
  color: var(--ink);
}
.statement .w.hl.on {
  color: #2f8a5d;
}

/* ========== Teal panels and the 'one system' hub diagram ========== */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.duo>* {
  min-width: 0;
}
.duo-c .tp {
  aspect-ratio: 1.18/1;
}
.tp {
  border-radius: 18px;
  background: linear-gradient(160deg,var(--panel-2),var(--panel));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 28px;
}
.tp.sand {
  background: linear-gradient(160deg,#ebe4d4,#ddd3bd);
}
.tp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.tp > * {
  position: relative;
}
.tp .stackv {
  display: grid;
  justify-items: center;
  width: 100%;
}
.duo-c h3 {
  font-size: 19px;
  margin: 20px 0 8px;
  letter-spacing: -.02em;
}
.duo-c p {
  color: var(--muted);
  font-size: 15px;
  max-width: 480px;
}
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--ink);
  border: 1px solid rgba(12,22,23,.04);
}
.card-pad {
  padding: 16px;
}
.card h5 {
  font: 600 13px/1.3 var(--font);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.card h5 span {
  font-weight: 500;
  color: var(--muted-2);
  font-size: 11.5px;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
}
.row:first-of-type {
  border-top: 0;
}
.row .nm {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
}
.row .sub {
  color: var(--muted-2);
  font-size: 11.5px;
  line-height: 1.35;
}
.row .grow {
  flex: 1;
  min-width: 0;
}
.row .t {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  width: 44px;
  font-size: 12px;
}
.row .amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* hub diagram */
.hub {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
}
.hub svg.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hub .core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 92px;
  height: 92px;
  border-radius: 26px;
  background: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px rgba(255,255,255,.14),0 20px 40px -14px rgba(0,0,0,.5);
}
.hub .n {
  position: absolute;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border-radius: 10px;
  padding: 7px 11px 7px 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.hub .n .ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.hub .n .ic svg.i {
  width: 13px;
  height: 13px;
}

/* ========== Feature rows (dark section) and product mock-ups ========== */
.frows {
  display: grid;
  gap: 120px;
  position: relative;
  z-index: 1;
}
.frow {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 72px;
  align-items: center;
}
.frow>* {
  min-width: 0;
}
.frow.flip .fvis {
  order: 2;
}
.fvis .tp {
  min-height: 470px;
  padding: 36px;
}
.dark .tp {
  background: linear-gradient(160deg,#145653,#0c3c3b);
}
.dark .tp.alt {
  background: linear-gradient(160deg,#1d5163,#103545);
}
.dark .tp.warm {
  background: linear-gradient(160deg,#4a5a45,#28322a);
}
.dark .tp.plum {
  background: linear-gradient(160deg,#4b4566,#2a2740);
}
.fcopy h3 {
  font-size: clamp(28px,3vw,40px);
  margin: 18px 0 16px;
}
.fcopy > p {
  color: var(--on-dark-2);
  font-size: 17px;
  margin-bottom: 24px;
}
.checks {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.checks li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
}
.checks svg.i {
  width: 19px;
  height: 19px;
  color: var(--lime);
  margin-top: 1px;
}
.dark .checks li {
  color: var(--on-dark);
}
.light .checks svg.i {
  color: #2f8a5d;
}

/* profile mock */
.prof-mock {
  width: 100%;
  max-width: 470px;
}
.pm-top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 16px;
}
.pm-top img {
  width: 92px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
}
.pm-top h4 {
  font-size: 18px;
  display: flex;
  gap: 6px;
  align-items: center;
  letter-spacing: -.02em;
}
.pm-top h4 svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
}
.pm-top .role {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 8px;
}
.pm-top .tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pm-sv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 14px;
}
.pm-sv div {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.pm-sv b {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: var(--ink);
  font-size: 12.5px;
  margin-bottom: 1px;
}
.pm-slots {
  border-top: 1px solid var(--line-2);
  padding: 12px 16px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
}
.pm-slots span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.pm-slots span.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.serp {
  width: 100%;
  max-width: 470px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 12px;
}
.serp .q {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 11px;
  color: #3b4a4a;
  margin-bottom: 9px;
}
.serp .q .lg {
  width: 14px;
  height: 14px;
}
.serp small {
  color: #2f6f4f;
  font-size: 11px;
}
.serp b {
  display: block;
  color: #1a4fa0;
  font-size: 13.5px;
  font-weight: 500;
  margin: 1px 0;
}
.serp p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* EHR mock */
.ehr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
}
.ehr>* {
  min-width: 0;
}
.ehr-l {
  padding: 16px;
  border-right: 1px solid var(--line-2);
}
.ehr-r {
  padding: 16px;
  background: #fafaf8;
  border-radius: 0 14px 14px 0;
}
.rec {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--grey);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
}
.rec b {
  white-space: nowrap;
}
.rec .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e0554b;
  box-shadow: 0 0 0 4px rgba(224,85,75,.15);
  animation: pulse 1.6s infinite;
  flex: none;
}
@keyframes pulse { 50%{box-shadow:0 0 0 7px rgba(224,85,75,.04)} }
.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.wave i {
  width: 3px;
  border-radius: 3px;
  background: var(--mint);
  flex: none;
}
.tx p {
  font-size: 11.5px;
  line-height: 1.55;
  margin-bottom: 7px;
  color: #3b4a4a;
}
.tx p b {
  display: block;
  color: var(--ink);
  font-size: 11px;
  margin-bottom: 1px;
}
.create {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.create span {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.create span.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.create svg.i {
  width: 11px;
  height: 11px;
}
.note h6 {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2f8a5d;
  margin: 11px 0 3px;
  font-weight: 700;
}
.note h6:first-of-type {
  margin-top: 0;
}
.note p {
  font-size: 11.5px;
  line-height: 1.55;
  color: #33484a;
}
.note .src {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  color: #4f67a8;
  background: #e8eefb;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 3px;
  vertical-align: 1px;
}

/* Hia mind map (matches the app: typed bubbles, origin rings) */
.mm-card {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
}
.mm-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
}
.mm-top b {
  font-size: 13px;
}
.mm-top .seg {
  margin-left: auto;
  display: flex;
  background: var(--grey);
  border-radius: 8px;
  padding: 2px;
}
.mm-top .seg span {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--muted);
}
.mm-top .seg span.on {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.mm-svg {
  background: #f7f8f6;
  width: 100%;
  height: auto;
}
.mm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  font-size: 11px;
  color: var(--ink-2);
}
.mm-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.mm-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mm-legend i.inf {
  background: none;
  border: 1.5px dashed #7d8b8a;
}

/* content calendar with real logos */
.cplan {
  width: 100%;
  max-width: 540px;
}
.cplan-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
}
.cplan-h b {
  font-size: 13.5px;
}
.cal {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  padding: 14px 16px 16px;
}
.cal>* {
  min-width: 0;
}
.cal .d {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.post {
  border: 1px solid var(--line-2);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
}
.post .th {
  background-size: cover;
}
.post .bd {
  padding: 8px 9px 9px;
}
.post b {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  margin-bottom: 6px;
}
.post .pl {
  display: flex;
  gap: 5px;
}
.post .pl .lg {
  width: 15px;
  height: 15px;
}
.adcard {
  width: 100%;
  max-width: 540px;
  margin-top: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.adcard .top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.adcard .top b {
  flex: 1;
}
.adcard .top .lg {
  width: 18px;
  height: 18px;
}
.am {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.am div {
  background: var(--grey);
  border-radius: 10px;
  padding: 8px 10px;
}
.am small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}
.am strong {
  font: 600 16px var(--display);
  letter-spacing: -.02em;
}
.bar {
  height: 6px;
  border-radius: 9px;
  background: var(--grey);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 62%;
  background: var(--mint);
  border-radius: 9px;
}
.adcard .who {
  font-size: 11.5px;
  color: var(--muted);
}

/* connections board */
.board {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.board>* {
  min-width: 0;
}
.lane {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px;
}
.lane h6 {
  margin: 2px 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  justify-content: space-between;
}
.deal {
  background: #fff;
  color: var(--ink);
  border-radius: 11px;
  padding: 10px 11px;
  margin-bottom: 8px;
  font-size: 11.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.deal b {
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.deal .sub {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 7px;
  line-height: 1.4;
}
.deal .ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.deal .v {
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
}
.hia-tip {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: rgba(7,16,18,.4);
  border: 1px solid rgba(212,240,106,.3);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-top: 10px;
  max-width: 560px;
  width: 100%;
}
.hia-tip svg.i {
  width: 16px;
  height: 16px;
  color: var(--lime);
  margin-top: 1px;
}

/* contracts */
.ctable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ctable th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted-2);
  font-weight: 600;
  text-align: left;
  padding: 0 8px 8px;
}
.ctable td {
  padding: 10px 8px;
  border-top: 1px solid var(--line-2);
  vertical-align: middle;
}
.ctable td b {
  font-weight: 600;
  display: block;
  font-size: 12.5px;
}
.ctable td small {
  color: var(--muted);
  font-size: 11px;
}
.ctable .ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.ctable .ic svg.i {
  width: 14px;
  height: 14px;
}
.read {
  margin: -26px 0 0 auto;
  width: 300px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  position: relative;
  z-index: 2;
}
.read b {
  color: #fff;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12.5px;
  margin-bottom: 7px;
}
.read b svg.i {
  width: 14px;
  height: 14px;
  color: var(--lime);
}
.read ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
  color: var(--on-dark-2);
}

/* phone */
.phone {
  width: 258px;
  flex: none;
  background: #0b1718;
  border-radius: 42px;
  padding: 9px;
  box-shadow: var(--shadow-lg);
}
.phone .scr {
  background: #f4f4f1;
  border-radius: 34px;
  overflow: hidden;
  height: 520px;
  display: flex;
  flex-direction: column;
}
.phone .top {
  background: #fff;
  padding: 30px 14px 11px;
  display: flex;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
}
.phone .top b {
  font-size: 13px;
  display: block;
  line-height: 1.3;
}
.phone .top span {
  font-size: 11px;
  color: #2f8a5d;
}
.thread {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  flex: 1;
  overflow: hidden;
}
.thread>* {
  flex: none;
}
.msg {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 15px;
  line-height: 1.45;
}
.msg.in {
  background: #fff;
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-sm);
}
.msg.out {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.cc {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  max-width: 94%;
  border: 1px solid var(--line-2);
}
.cc .hd {
  padding: 9px 11px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.cc .hd .ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.cc .hd .ic svg.i {
  width: 14px;
  height: 14px;
}
.cc .hd b {
  font-size: 12px;
  display: block;
  line-height: 1.3;
}
.cc .hd small {
  font-size: 10.5px;
  color: var(--muted);
}
.cc .bd {
  padding: 0 11px 10px;
  font-size: 11px;
  color: #3b4a4a;
  line-height: 1.45;
}
.cc .go {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 11.5px;
  padding: 8px;
  border-top: 1px solid var(--line-2);
  color: var(--teal);
}
.breath {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breath .ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--mint-2);
  border-top-color: var(--mint);
  flex: none;
  animation: spin 4s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.mood {
  display: flex;
  justify-content: space-between;
}
.mood span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grey);
  font-size: 14px;
}
.mood span.on {
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(212,240,106,.4);
}
.spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 38px;
  margin: 4px 0 6px;
}
.spark i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: var(--mint-2);
}
.spark i.on {
  background: var(--mint);
}
.phones {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
}
.phones .phone.p2 {
  margin-top: 44px;
}

/* payments */
.pay {
  width: 100%;
  max-width: 520px;
  padding: 18px;
}
.pay h4 {
  font: 500 13px var(--font);
  color: var(--muted);
  letter-spacing: 0;
}
.pay strong {
  font: 500 36px/1.15 var(--display);
  letter-spacing: -.04em;
  display: block;
  margin: 2px 0 14px;
}
.stack {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  gap: 3px;
  margin-bottom: 12px;
}
.stack i {
  display: block;
  height: 100%;
}
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  margin-bottom: 8px;
}
.legend div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.legend b {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rails {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.rails .r {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--ink);
  font-weight: 600;
}
.rails .lg {
  width: 14px;
  height: 14px;
}

/* ========== Ask Hia demo ========== */
.ask {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.ask>* {
  min-width: 0;
}
.ask h2 {
  font-size: clamp(32px,3.8vw,50px);
  margin-top: 22px;
}
.ask .sub {
  color: var(--muted);
  font-size: 17px;
  margin-top: 18px;
}
.prompts {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}
.prompt {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 15px;
  transition: border-color .2s,box-shadow .2s;
  color: var(--ink);
}
.prompt:hover {
  border-color: rgba(12,22,23,.25);
}
.prompt.on {
  border-color: var(--ink);
  box-shadow: var(--shadow);
}
.prompt svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
}
.chat {
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.chat-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.chat-hd img {
  width: 28px;
  height: 28px;
}
.chat-hd b {
  font-size: 14px;
}
.chat-hd span {
  font-size: 12px;
  color: #2f8a5d;
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.chat-hd span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb27a;
}
.chat-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  background: linear-gradient(180deg,#fff,#fafaf7);
  min-height: 330px;
}
.u {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 15px 15px 5px 15px;
  max-width: 80%;
}
.h {
  max-width: 94%;
  line-height: 1.55;
}
.h p {
  margin-bottom: 8px;
}
.acard {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  margin-top: 4px;
}
.acard .t {
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: #f6f6f3;
  display: flex;
  gap: 6px;
  align-items: center;
}
.acard .t svg.i {
  width: 13px;
  height: 13px;
}
.acard .b {
  padding: 11px 13px;
  font-size: 13px;
  color: #33484a;
  line-height: 1.55;
}
.acard .a {
  display: flex;
  gap: 8px;
  padding: 0 13px 12px;
}
.acard .a span {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 9px;
}
.acard .a .y {
  background: var(--ink);
  color: #fff;
}
.acard .a .n {
  border: 1px solid var(--line);
}
.chat-in {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--line-2);
}
.chat-in div {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 14px;
  color: var(--muted-2);
  font-size: 13.5px;
}
.chat-in span {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--lime);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.fade-in {
  animation: fadeup .45s ease both;
}
@keyframes fadeup { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }

/* ========== Professions ========== */
[hidden] {
  display: none!important;
}

/* ========== Privacy bento ========== */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}
.bento>* {
  min-width: 0;
}
.bc {
  background: var(--grey);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.bc small {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.bc h4 {
  font-size: 21px;
  margin-top: 8px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.bc p {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 26px;
  line-height: 1.5;
}
.bc.span2 {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  padding: 0;
  overflow: hidden;
}
.bc.span2 .t {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.bc.span2 .t p {
  margin-top: 12px;
  padding-top: 0;
}
.duo-img {
  background: #cfe2e4;
  overflow: hidden;
}
.duo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.05);
  mix-blend-mode: multiply;
}
.laws {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
}
.laws span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.laws svg.i {
  width: 14px;
  height: 14px;
  color: #2f8a5d;
}

/* ========== Hia Network band ========== */
.band {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--deep-2);
  color: var(--on-dark);
}
.band>* {
  min-width: 0;
}
.band-l {
  padding: 52px;
}
.band-l h2 {
  font-size: clamp(30px,3.4vw,44px);
  margin: 20px 0 14px;
  color: #fff;
}
.band-l p {
  color: var(--on-dark-2);
  font-size: 17px;
  margin-bottom: 26px;
}
.band-r {
  position: relative;
  min-height: 360px;
}
.band-r img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band-r .stackc {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 8px;
}
.req {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px 13px;
  font-size: 12.5px;
}
.req b {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}
.req span {
  color: var(--muted);
  font-size: 11.5px;
}
.req .tag {
  margin-left: auto;
}

/* ========== FAQ ========== */
.faq {
  max-width: 780px;
  margin: 0 auto;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: 16.5px;
  font-weight: 500;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg.i {
  width: 20px;
  height: 20px;
  transition: transform .25s;
}
.faq details[open] summary svg.i {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 40px 22px 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ========== Early access and partner forms ========== */
.formwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.formwrap>* {
  min-width: 0;
}
.formwrap h2 {
  font-size: clamp(40px,5vw,64px);
  letter-spacing: -.045em;
  margin-top: 22px;
}
.formwrap .l {
  color: var(--on-dark-2);
  font-size: 18px;
  margin-top: 20px;
}
.perks {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.perks div {
  display: flex;
  gap: 11px;
  align-items: center;
  color: var(--on-dark);
  font-size: 15.5px;
}
.perks svg.i {
  width: 19px;
  height: 19px;
  color: var(--lime);
}
form.f {
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 14px;
}
form.f h3 {
  font-size: 22px;
}
form.f .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
form.f label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3b4a4a;
}
form.f input:not([type=checkbox]), form.f select, form.f textarea {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fafaf8;
  width: 100%;
}
form.f textarea {
  height: 90px;
  padding: 11px 13px;
  resize: vertical;
}
form.f input:not([type=checkbox]):focus, form.f select:focus, form.f textarea:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(95,174,134,.15);
  background: #fff;
}
.wants {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.wants label {
  display: inline-flex;
  flex-direction: row;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  position: relative;
}
.wants input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wants span {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fafaf8;
  transition: all .15s;
}
.wants input:checked+span {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.wants input:focus-visible+span {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
form.f .btn {
  width: 100%;
  height: 50px;
  border: 0;
}
form.f small {
  color: var(--muted-2);
  font-size: 12.5px;
  text-align: center;
}
.thanks {
  display: none;
  text-align: center;
  padding: 28px 8px;
}
.thanks .ic {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  margin: 0 auto 14px;
}
.thanks .ic svg.i {
  width: 24px;
  height: 24px;
}
.thanks h3 {
  font-size: 24px;
  margin-bottom: 8px;
}
.thanks p {
  color: var(--muted);
}
form.f.sent > :not(.thanks) {
  display: none;
}
form.f.sent .thanks {
  display: block;
}

/* ========== Footer ========== */
footer {
  color: var(--on-dark-2);
  font-size: 14px;
}
footer .region {
  margin-top: 20px;
}

/* ========== Brands page: verification, integration tabs, flow, use cases ========== */
.uses {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.uses span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: rgba(238,243,242,.72);
  padding: 8px 13px;
  border: 1px solid var(--dline);
  border-radius: 10px;
}
.uses svg.i {
  width: 16px;
  height: 16px;
  color: var(--lime);
}
.verify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.verify>* {
  min-width: 0;
}
.verify h2 {
  font-size: clamp(32px,3.8vw,50px);
  margin-top: 22px;
}
.verify .sub {
  color: var(--muted);
  font-size: 17px;
  margin-top: 18px;
}
.vlist {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.vitem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.vitem b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.vitem p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.vprof {
  width: 100%;
  max-width: 400px;
}
.vprof .hd {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line-2);
}
.vprof .hd img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
}
.vprof .hd b {
  font-size: 16px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.vprof .hd b svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
}
.vprof .hd span {
  font-size: 12.5px;
  color: var(--muted);
}
.vprof .vk {
  padding: 6px 16px 12px;
}
.vprof .vk div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
}
.vprof .vk div:first-child {
  border-top: 0;
}
.vprof .vk svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
}
.vprof .vk em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}
.vprof .foot2 {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
  background: #fafaf8;
  border-radius: 0 0 14px 14px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.vprof .foot2 b {
  color: var(--ink);
}
.itabs {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.itab {
  border: 1px solid var(--dline);
  background: transparent;
  color: var(--on-dark-2);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.itab svg.i {
  width: 16px;
  height: 16px;
}
.itab[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.ipanel {
  display: none;
  position: relative;
  z-index: 1;
}
.ipanel.on {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.ipanel>* {
  min-width: 0;
}
.ipanel h3 {
  font-size: 30px;
  margin-bottom: 14px;
}
.ipanel p {
  color: var(--on-dark-2);
  font-size: 16.5px;
  margin-bottom: 22px;
}
.code {
  background: #040b0c;
  border: 1px solid var(--dline);
  border-radius: 14px;
  overflow: hidden;
  font: 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #cfe0dc;
}
.code .cbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dline);
  font-family: var(--font);
  font-size: 12px;
  color: var(--on-dark-2);
}
.code .cbar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.code .cbar span {
  margin-left: 8px;
}
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
}
.code .k {
  color: #d4f06a;
}
.code .s {
  color: #9fd8b8;
}
.code .c {
  color: #6f8582;
}
.code .n {
  color: #9fc4f0;
}
.flow {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.fstep {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  position: relative;
}
.fstep .ic {
  margin-bottom: 18px;
}
.fstep b {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.fstep p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
.fstep em {
  position: absolute;
  right: 18px;
  top: 20px;
  font-style: normal;
  font: 500 13px var(--display);
  color: var(--muted-2);
}
.ucgrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.ucgrid>* {
  min-width: 0;
}
.uc {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.uc .ph {
  background-size: cover;
  background-position: center;
  position: relative;
}
.uc .ph .ic {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.uc .bd {
  padding: 20px 20px 22px;
  flex: 1;
}
.uc h3 {
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.uc p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
.uc.text {
  background: var(--grey);
  border: 0;
  padding: 22px;
  min-height: 240px;
}
.uc.text h3 {
  margin-top: auto;
  padding-top: 40px;
}

/* ========== Legal pages ========== */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 150px var(--g) 110px;
}
.doc h1 {
  font-size: clamp(36px,4.4vw,54px);
  margin-bottom: 10px;
}
.doc .meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 40px;
}
.doc h2 {
  font-size: 24px;
  margin: 40px 0 12px;
  letter-spacing: -.02em;
}
.doc h3 {
  font-size: 18px;
  margin: 26px 0 8px;
  letter-spacing: -.015em;
}
.doc p, .doc li {
  color: #2f3d3d;
  font-size: 16px;
  line-height: 1.7;
}
.doc p {
  margin: 0 0 14px;
}
.doc ul {
  padding-left: 20px;
  margin: 0 0 14px;
}
.doc .draft {
  background: var(--lime-2);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 28px;
  color: #3b4d10;
}
.doc a {
  text-decoration: underline;
}

/* ========== Reveal on scroll ========== */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.d1 {
  transition-delay: .08s;
}
.d2 {
  transition-delay: .16s;
}
.d3 {
  transition-delay: .24s;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ticker-track, .breath .ring, .rec .dot {
    animation: none;
  }
  .statement .w {
    color: var(--ink);
  }
}

/* ========== Responsive ========== */

@media (max-width:1080px) {
  .frow, .frow.flip {
    gap: 48px;
  }
  .nav-links a {
    padding: 8px 9px;
  }
  .nav .wrap {
    gap: 20px;
  }
}

@media (max-width:980px) {
  .nav-links, .nav-cta .btn-ghost, .nav-cta .region {
    display: none;
  }
  .menu-btn {
    display: grid;
  }
  .mobile-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 49;
    background: rgba(251,251,249,.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--g) 22px;
    display: grid;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: all .25s;
  }
  .mobile-menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-menu a {
    font-size: 17px;
    font-weight: 500;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu .btn {
    margin-top: 16px;
    border: 0;
  }
  .mobile-menu .region {
    color: var(--ink);
    border: 1px solid var(--line);
    margin-top: 14px;
    justify-self: start;
  }
  .hero-media {
    grid-template-columns: 1fr;
  }
  .duo, .frow, .frow.flip, .ask, .verify, .ipanel.on, .formwrap, .band {
    grid-template-columns: 1fr;
  }
  .frow.flip .fvis {
    order: 0;
  }
  .frows {
    gap: 88px;
  }
  .pcards {
    grid-template-columns: 1fr 1fr;
  }
  .pcard:nth-child(n) {
    margin-top: 0;
  }
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .bc.span2 {
    grid-column: 1/-1;
  }
  .flow {
    grid-template-columns: 1fr 1fr;
  }
  .ucgrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:760px) {
  :root {
    --g: 16px;
  }
  .sec {
    padding: 84px 0;
  }
  .sec-sm {
    padding: 64px 0;
  }
  .head {
    margin-bottom: 38px;
  }
  .head p {
    font-size: 16.5px;
  }
  .nav .wrap, .nav.scrolled .wrap {
    height: 64px;
  }
  .nav .logo img {
    height: 19px;
  }
  .nav-cta .btn {
    height: 38px;
    padding: 0 13px;
    font-size: 13.5px;
  }
  .hero {
    padding: 116px 0 48px;
  }
  .hero-media {
    margin-top: 40px;
  }
  .hero-media .photo {
    aspect-ratio: 4/4.4;
  }
  .hero-media .photo img {
    object-position: 68% 50%;
  }
  .photo .glass.tl {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    max-width: none;
  }
  .ticker-track span {
    font-size: 16px;
  }
  .pcards {
    grid-template-columns: 1fr;
  }
  .pcard {
    min-height: 0;
  }
  .pcard .big {
    margin: 18px 0 0;
  }
  .fvis .tp {
    min-height: 0;
    padding: 18px;
  }
  .tp {
    padding: 16px;
    border-radius: 16px;
  }
  .duo-c .tp {
    aspect-ratio: auto;
    min-height: 330px;
  }
  .board {
    grid-template-columns: 1fr 1fr;
  }
  .lane.l3 {
    display: none;
  }
  .ehr {
    grid-template-columns: 1fr;
  }
  .ehr-l {
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .ehr-r {
    border-radius: 0 0 14px 14px;
  }
  .cal {
    grid-template-columns: 1fr 1fr;
  }
  .cal>div:nth-child(3) {
    display: none;
  }
  .ctable td:first-child, .ctable th:first-child {
    display: none;
  }
  .read {
    width: auto;
    margin: 12px 0 0;
  }
  .phones .phone.p2 {
    display: none;
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .bc.span2 {
    grid-template-columns: 1fr;
  }
  .duo-img {
    aspect-ratio: 4/3;
  }
  .band-l {
    padding: 30px 22px;
  }
  .band-r {
    min-height: 400px;
  }
  .flow, .ucgrid {
    grid-template-columns: 1fr;
  }
  form.f {
    padding: 20px;
  }
  form.f .two {
    grid-template-columns: 1fr;
  }
  .faq details p {
    padding-right: 0;
  }
  .itab {
    flex: 1 1 40%;
    justify-content: center;
    padding: 9px 10px;
  }
  .hub .n {
    font-size: 11px;
    padding: 5px 8px 5px 6px;
  }
  .hub .n .ic {
    width: 20px;
    height: 20px;
  }
}

/* light surfaces inside dark sections keep dark ink */
.dark .card, .dark .phone .scr, .dark .cc, .dark .glass, .dark form.f, .dark .deal {
  color: var(--ink);
}
.dark .card h3, .dark .card h4, .dark .glass h4, .dark form.f h3, .dark .thanks h3 {
  color: var(--ink);
}
.grey .bc, .grey .uc.text {
  background: #fff;
  border: 1px solid var(--line);
}
.feed b em {
  font-style: normal;
}

/* phones in feature panels fit the panel */
.fvis .phone {
  width: 226px;
  padding: 8px;
  border-radius: 38px;
}
.fvis .phone .scr {
  border-radius: 31px;
}
.fvis .phones {
  gap: 14px;
}
.phone .top .av {
  color: #fff;
}

/* hero photo settles in, side card detail */
@keyframes settle { from{transform:scale(1.07)}to{transform:none} }
.hero-media .photo img {
  animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.ring-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
.ring-row .ring {
  width: 44px;
  height: 44px;
  flex: none;
}
.ring-row b {
  display: block;
  font: 500 20px/1.1 var(--display);
  letter-spacing: -.02em;
}
.ring-row span {
  font-size: 12.5px;
  color: var(--on-dark-2);
}
.side-card h4 {
  margin-bottom: 0;
}
.side-card .feed {
  margin-top: auto;
  padding-top: 18px;
}

/* flowing hub lines */
.hub svg.lines path {
  stroke-dasharray: 1.2 1.2;
  animation: flow 2.4s linear infinite;
}
@keyframes flow { to{stroke-dashoffset:-4.8} }
.hub .n {
  transition: transform .3s;
}
.hub .n:hover {
  transform: translate(-50%,-50%) scale(1.06);
}

/* panel cards lift on hover */
.tp .card, .tp .board, .tp .phones {
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.tp:hover .card, .tp:hover .board, .tp:hover .phones {
  transform: translateY(-4px);
}
.pcard, .bc, .uc, .fstep, .vitem {
  transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.pcard:hover, .uc:hover, .fstep:hover, .vitem:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.uc .ph, .band-r img {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.band:hover .band-r img {
  transform: scale(1.03);
}

/* typing indicator */
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
  background: #f1f1ee;
  border-radius: 12px;
  align-self: flex-start;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a9897;
  animation: blink 1s infinite;
}
.typing i:nth-child(2) {
  animation-delay: .15s;
}
.typing i:nth-child(3) {
  animation-delay: .3s;
}
@keyframes blink { 0%,80%,100%{opacity:.25}40%{opacity:1} }

/* mind map scrolls on small screens */
.mm-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.mm-scroll::-webkit-scrollbar {
  display: none;
}

/* footer clips decorative overflow */
footer {
  overflow: hidden;
}

/* hero headline highlight: soft lime gradient */
.hero h1 span {
  background: linear-gradient(180deg,#e2f68f,#c4e34f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion:reduce) {
  .hero-media .photo img, .hub svg.lines path, .typing i {
    animation: none;
  }
}

@media (max-width:760px) {
  .mm-svg {
    min-width: 520px;
  }
  .fvis .phone {
    width: 230px;
  }
}

/* ========== Refinement: region-aware trust chips and safeguards row ========== */
.laws span.local {
  background: var(--ink);
  color: #fff;
}
.laws span.local svg.i {
  color: var(--lime);
}
.bc.span2 h4 {
  font-size: 22px;
}
.safe {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  max-width: 1000px;
  margin: 12px auto 0;
}
.safe div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.safe svg.i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: #2f8a5d;
}
.safe b {
  font-size: 14px;
  font-weight: 600;
}
.safe span {
  font-size: 12.5px;
  color: var(--muted);
}

/* ========== Refinement: footer card ========== */
footer {
  background: var(--black);
  padding: 28px 0 28px;
  border-top: 0;
}
.fcard {
  background: var(--paper);
  color: var(--ink);
  border-radius: 26px;
  padding: 48px 48px 0;
  overflow: hidden;
  position: relative;
}
.fcard::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(212,240,106,.35),transparent);
  pointer-events: none;
}
.fc-top {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.fc-brand {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fc-brand img {
  width: auto;
  align-self: flex-start;
}
.fc-line {
  font: 500 30px/1.15 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: auto;
}
.fc-cols {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.fc-cols h6 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
}
.fc-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--muted);
}
.fc-cols a:hover {
  color: var(--ink);
}
.fc-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 18px 0 20px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.fc-comp {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.fc-comp span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.fc-comp svg.i {
  width: 13px;
  height: 13px;
  color: #2f8a5d;
}
footer .region {
  color: var(--ink);
  border: 1px solid var(--line);
  margin: 0;
}
footer .region:hover {
  background: var(--grey);
  color: var(--ink);
}

@media (max-width:980px) {
  .fc-top {
    grid-template-columns: 1fr;
  }
  .safe {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:760px) {
  footer {
    padding: 12px 0;
  }
  .fcard {
    padding: 30px 22px 0;
    border-radius: 20px;
  }
  .fc-cols {
    grid-template-columns: 1fr 1fr;
  }
  .fc-line {
    font-size: 24px;
  }
  .fc-comp {
    margin-left: 0;
  }
  .safe {
    grid-template-columns: 1fr;
  }
}

/* use-case photo cards: real images with per-card focal points */
.uc .ph {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #e9ece9;
}
.uc .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.uc:hover .ph img {
  transform: scale(1.04);
}
.uc h3 {
  font-size: 18.5px;
}

/* logo sizing (tight SVG: mark + wordmark, no built-in padding) */
.nav .logo img {
  height: 25px;
}
.nav.scrolled .logo img {
  height: 24px;
}
.fc-brand img {
  height: 46px;
  margin: 0;
}
.hub .core img {
  width: 58px;
}
.chat-hd img {
  border-radius: 8px;
}

/* contracts table numbers */
.ctable .num {
  text-align: right;
  white-space: nowrap;
}
.ctable th.num {
  padding-right: 12px;
}
.ctable td.num {
  padding-right: 12px;
}
.ctable s {
  color: var(--muted-2);
  font-weight: 500;
  margin-right: 2px;
}

@media (max-width:760px) {
  .nav .logo img, .nav.scrolled .logo img {
    height: 21px;
  }
}

/* platform agreements table */
.ccard {
  width: 100%;
  max-width: 600px;
}
.ctable.plat {
  table-layout: fixed;
}
.ctable.plat col.c-num {
  width: 104px;
}
.ctable.plat col.c-st {
  width: 124px;
}
.ctable.plat td:first-child, .ctable.plat th:first-child {
  display: table-cell;
  padding-left: 4px;
}
.ctable .mob {
  display: none;
}

@media (max-width:760px) {
  .ctable.plat {
    table-layout: auto;
  }
  .ctable.plat th:last-child, .ctable.plat td:last-child {
    display: none;
  }
  .ctable .mob {
    display: flex;
    width: fit-content;
    margin-top: 6px;
  }
}

/* ========== Refinement: brand logos as image files ========== */
img.lg {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* ========== Refinement: professions picker and live preview ========== */
.pro {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}
.pro>* {
  min-width: 0;
}
.pro-list {
  display: grid;
  gap: 4px;
  position: sticky;
  top: 90px;
}
.pro-tab {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  transition: background .2s,border-color .2s,box-shadow .2s;
}
.pro-tab:hover {
  background: rgba(255,255,255,.6);
}
.pro-tab b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.pro-tab small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.pt-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-2);
}
.pt-ic svg.i {
  width: 18px;
  height: 18px;
}
.pro-tab[aria-selected="true"] {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.pro-tab[aria-selected="true"] .pt-ic {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--lime);
}
.pro-stage {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
  min-height: 520px;
}
.pro-panel {
  display: none;
}
.pro-panel.on {
  display: block;
  animation: fadeup .45s ease both;
}
.pp-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.pt-ic.big {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--ink);
  border: 0;
  color: var(--lime);
}
.pt-ic.big svg.i {
  width: 24px;
  height: 24px;
}
.pp-head small {
  font-size: 12.5px;
  color: var(--muted);
}
.pp-head h3 {
  font-size: 28px;
  letter-spacing: -.03em;
}
.pp-words {
  margin: 24px 0 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--grey);
}
.pp-words small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pp-words div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-words span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 500;
}
.pp-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: start;
}
.pp-grid>* {
  min-width: 0;
}
.pp-doc {
  padding: 18px;
  box-shadow: var(--shadow);
}
.pp-doc-h {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  margin-bottom: 8px;
}
.pp-doc-h b {
  font-size: 15px;
}
.pp-doc-h small {
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
}
.pp-doc-h .tag {
  grid-row: 1/3;
  grid-column: 2;
  align-self: start;
}
.pprow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px;
}
.pprow span {
  color: var(--muted);
}
.pprow b {
  font-weight: 600;
  text-align: right;
}
.ppk {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ppk b {
  color: var(--ink);
  font-weight: 600;
}
.ppbars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 54px;
  margin-top: 8px;
}
.ppbars i {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--mint-2);
}
.ppbars i.on {
  background: var(--mint);
}
.ppprog {
  margin-top: 12px;
}
.ppprog div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.ppprog div b {
  font-weight: 600;
}
.ppprog>i {
  display: block;
  height: 8px;
  border-radius: 9px;
  background: var(--grey);
  overflow: hidden;
}
.ppprog>i i {
  display: block;
  height: 100%;
  background: var(--mint);
  border-radius: 9px;
}
.pp-lists h4 {
  font: 600 11.5px var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2f8a5d;
  margin: 4px 0 12px;
}
.pp-lists h4+ul+h4 {
  margin-top: 22px;
}
.pp-lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pp-lists li {
  display: flex;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.45;
}
.pp-lists li svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
  margin-top: 3px;
}

/* ========== Refinement: journey stepper (base) ========== */
.jr-steps {
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin-bottom: 28px;
}
.jstep {
  color: var(--ink);
}
.jstep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--line);
}
.jbar {
  left: 0;
  right: 0;
  top: 0;
}
.jstep.on .jbar i {
  animation: jfill 6s linear forwards;
}
.jr.paused .jstep.on .jbar i {
  animation-play-state: paused;
}
@keyframes jfill { to{width:100%} }
.jstep b {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 8px;
  transition: color .3s;
}
.jstep p {
  font-size: 15px;
  color: var(--muted-2);
  line-height: 1.55;
  transition: color .3s;
}
.jstep:not(.on) b {
  color: var(--muted);
}
.jstep.on p {
  color: var(--ink-2);
}
.jr-stage {
  position: relative;
  overflow: hidden;
  background: #1a2223;
}
.jpanel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.jpanel.on {
  opacity: 1;
  pointer-events: auto;
}
.jpanel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 6s ease;
}
.jpanel.on img {
  transform: none;
}
.jcard {
  position: absolute;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
  border: 1px solid #fff;
}
.jc-h {
  display: flex;
  gap: 11px;
  align-items: center;
}
.jc-h b {
  display: block;
  font-size: 15px;
}
.jc-h small {
  font-size: 12px;
  color: var(--muted);
}
.jcard ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.jcard li {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s,transform .4s;
}
.jcard li svg.i {
  width: 16px;
  height: 16px;
  color: #2f8a5d;
}
.jcard li em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.jpanel.on .jcard li {
  opacity: 1;
  transform: none;
}
.jpanel.on .jcard li:nth-child(2) {
  transition-delay: .15s;
}
.jpanel.on .jcard li:nth-child(3) {
  transition-delay: .3s;
}
.jpanel.on .jcard li:nth-child(4) {
  transition-delay: .45s;
}

/* ========== Refinement: integrations shared tile styles ========== */
@keyframes halo { from{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.35)} }
.ht {
  z-index: 1;
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100%{margin-top:0}50%{margin-top:-7px} }
.ig-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.ig-ic svg.i {
  width: 17px;
  height: 17px;
}
.ig-l {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center;
}
.ig-l img.lg {
  width: 22px;
  height: 22px;
}
.ig-l span {
  display: inline-flex;
}

@media (prefers-reduced-motion:reduce) {
  .ht, .jstep.on .jbar i {
    animation: none;
  }
}

@media (max-width:980px) {
  .pro {
    grid-template-columns: 1fr;
  }
  .pro-list {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 6px;
    margin: 0 calc(-1*var(--g));
    padding: 0 var(--g) 4px;
    scrollbar-width: none;
  }
  .pro-list::-webkit-scrollbar {
    display: none;
  }
  .pro-tab {
    flex: none;
    width: auto;
    padding: 8px 12px 8px 8px;
  }
  .pro-tab small {
    display: none;
  }
  .pt-ic {
    width: 30px;
    height: 30px;
  }
  .jcard {
    width: 320px;
  }
}

@media (max-width:760px) {
  .pro-stage {
    padding: 18px;
    min-height: 0;
  }
  .pp-head h3 {
    font-size: 22px;
  }
  .pp-grid {
    grid-template-columns: 1fr;
  }
  .jr-steps {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 18px;
  }
  .jstep {
    padding-top: 16px;
  }
  .jcard {
    top: auto;
    transform: none;
    padding: 14px;
  }
}

/* ========== Refinement: integrations orbit and job list ========== */
.intg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.intg>* {
  min-width: 0;
}
.orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}
.oring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(12,22,23,.16);
  animation: orbit 80s linear infinite;
  border-color: rgba(12,22,23,.12);
}
.oring.r1 {
  animation-duration: 60s;
  animation-direction: reverse;
  inset: 25%;
}
.sat {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}
.ht {
  position: absolute;
  left: 50%;
  top: 0;
  background: #fff;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transform: rotate(calc(-1 * var(--a)));
}
.ht img {
  object-fit: contain;
}
.r1 .ht img {
  animation-duration: 60s;
  animation-direction: normal;
}
.ht:hover {
  box-shadow: var(--shadow-lg);
}
@keyframes orbit { to{transform:rotate(360deg)} }
.o-core {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  z-index: 2;
}
.o-core::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 38px;
  border: 1px solid rgba(95,174,134,.35);
  animation: halo 3.2s ease-out infinite;
}
.jobs-l {
  display: grid;
  gap: 10px;
}
.jl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  transition: transform .3s,box-shadow .3s;
}
.jl:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
}
.jl b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.jl p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.jl .ig-l {
  margin: 0;
  gap: 8px;
  flex-wrap: nowrap;
}
.jl .ig-l img.lg {
  width: 22px;
  height: 22px;
}

@media (prefers-reduced-motion:reduce) {
  .oring, .ht img {
    animation: none;
  }
}

@media (max-width:980px) {
  .intg {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .orbit {
    max-width: 440px;
  }
}

@media (max-width:760px) {
  .ht {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 12px;
  }
  .ht img {
    width: 21px;
    height: 21px;
  }
  .o-core {
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 22px;
  }
  .o-core img {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }
  .jl {
    grid-template-columns: auto 1fr;
    padding: 14px;
  }
  .jl .ig-l {
    grid-column: 2;
    flex-wrap: wrap;
  }
}

/* ========== Refinement: routine toggle ========== */
.tgl {
  width: 34px;
  height: 20px;
  border-radius: 99px;
  background: #5fae86;
  position: relative;
  flex: none;
  margin-top: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.tgl::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  right: 2px;
  top: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* orbit: keep whole tiles upright while rings turn */
.ht img {
  animation: none;
}
.oring.r2 .ht {
  animation: upright-r2 80s linear infinite;
}
.oring.r1 .ht {
  animation: upright-r1 60s linear infinite;
}
@keyframes upright-r2 { to{rotate:-360deg} }
@keyframes upright-r1 { to{rotate:360deg} }

@media (prefers-reduced-motion:reduce) {
  .oring .ht {
    animation: none;
  }
}

/* ========== Refinement: journey stepper as a vertical timeline ========== */
.jr {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.jr>* {
  min-width: 0;
}
.jr-steps {
  display: block;
  margin: 0;
  position: relative;
}
.jr-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--line);
}
.jstep {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  width: 100%;
  padding: 16px 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.jstep::before {
  display: none;
}
.jstep:focus {
  outline: none;
}
.jstep:focus-visible .jtx b {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jdot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font: 600 14px var(--display);
  color: var(--muted);
  position: relative;
  z-index: 1;
  transition: all .3s;
}
.jstep.on .jdot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--lime);
}
.jtx b {
  display: block;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--muted);
  margin: 6px 0 0;
  transition: color .3s;
}
.jtx p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease,opacity .45s ease,margin .45s ease;
}
.jstep.on .jtx b {
  color: var(--ink);
}
.jstep.on .jtx p {
  max-height: 120px;
  opacity: 1;
  margin-top: 8px;
}
.jbar {
  position: static;
  display: block;
  height: 2px;
  margin-top: 14px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s;
}
.jstep.on .jbar {
  opacity: 1;
}
.jbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
.jr-stage {
  aspect-ratio: 4/3.5;
  border-radius: 22px;
}
.jcard {
  right: auto;
  left: 18px;
  bottom: 18px;
  top: auto;
  transform: none;
  width: 330px;
  max-width: calc(100% - 36px);
}

@media (max-width:980px) {
  .jr {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width:760px) {
  .jr-steps {
    display: block;
  }
  .jstep {
    padding: 12px 0;
  }
  .jstep:not(.on) p {
    display: block;
  }
  .jr-stage {
    aspect-ratio: 4/4.6;
  }
  .jcard {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* ========== Refinement: routines settings panel ========== */
.rpanel {
  margin-top: 64px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rp-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-2);
}
.rp-h b {
  display: block;
  font: 500 19px var(--display);
  letter-spacing: -.02em;
}
.rp-h span:not(.tag) {
  font-size: 14px;
  color: var(--muted);
}
.rp-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rrow {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-2);
  grid-template-columns: auto 1fr 78px auto;
}
.rrow:nth-child(odd) {
  border-right: 1px solid var(--line-2);
}
.rrow:nth-last-child(-n+2) {
  border-bottom: 0;
}
.rr-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--grey);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.rr-ic svg.i {
  width: 17px;
  height: 17px;
}
.rr-t b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.rr-t span {
  font-size: 13px;
  color: var(--muted);
}
.rr-m {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.rr-m.m-auto {
  color: #2f8a5d;
}
.rr-m.m-ask {
  color: #a0760e;
}

@media (max-width:760px) {
  .rp-h {
    padding: 16px;
  }
  .rp-rows {
    grid-template-columns: 1fr;
  }
  .rrow {
    padding: 14px 16px;
    border-right: 0!important;
    border-bottom: 1px solid var(--line-2)!important;
  }
  .rrow:last-child {
    border-bottom: 0!important;
  }
  .rr-m {
    grid-column: 2;
    grid-row: 2;
    margin-top: -6px;
    text-align: left;
  }
  .tgl {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ========== Refinement: Ask Hia prompt chips ========== */
.prompts.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.prompts.chips .prompt {
  width: auto;
  border-radius: 999px;
  padding: 9px 15px 9px 12px;
  font-size: 14.5px;
  border-color: var(--line);
  box-shadow: none;
  background: #fff;
}
.prompts.chips .prompt svg.i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.prompts.chips .prompt.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.prompts.chips .prompt.on svg.i {
  color: var(--lime);
}
.prompt:focus {
  outline: none;
}
.prompt:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ========== Refinement: integrations orbit sizes and spacing ========== */
.orbit {
  max-width: 470px;
  background: radial-gradient(closest-side,rgba(95,174,134,.12),transparent 70%);
}
.oring.r2 {
  inset: 5%;
}
.ht {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(7,16,18,.06),0 6px 16px -8px rgba(7,16,18,.18);
}
.ht img {
  width: 26px;
  height: 26px;
}
.o-core {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 27px;
}
.o-core img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
}
img.lg[src$="applepay.svg"] {
  width: 40px!important;
}

@media (max-width:760px) {
  .rrow {
    grid-template-columns: auto 1fr auto;
  }
}
.post .th {
  height: 66px;
  background-position: center 18%;
}

/* rotating rings must never widen the page */
.orbit {
  overflow: hidden;
  border-radius: 50%;
}

@media (max-width:760px) {
  .oring.r2 {
    inset: 8%;
  }
  .oring.r1 {
    inset: 27%;
  }
}
.fvis .phone .scr {
  height: auto;
  min-height: 470px;
}
.fvis .phone .thread {
  overflow: visible;
  padding-bottom: 18px;
}

/* Video session mock (telehealth) */
.vcall {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
}
.vcall>* {
  min-width: 0;
}
.vc-stage {
  position: relative;
  width: 100%;
  min-height: 340px;
  background: var(--deep);
  border-radius: 14px 0 0 14px;
  overflow: hidden;
}
.vc-stage>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 35%;
}
.vc-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(7,16,18,.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.vc-pill svg {
  width: 13px;
  height: 13px;
}
.vc-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0554b;
}
.vc-self {
  position: absolute;
  right: 10px;
  bottom: 62px;
  width: 26%;
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow);
}
.vc-self img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-bar {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  bottom: 12px;
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 99px;
  background: rgba(7,16,18,.62);
  backdrop-filter: blur(6px);
}
.vc-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  color: #fff;
}
.vc-btn svg {
  width: 16px;
  height: 16px;
}
.vc-btn.end {
  background: #e0554b;
}
.vc-side {
  padding: 16px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-side small {
  color: var(--muted);
  font-size: 11.5px;
}
.vc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vc-row b {
  font-size: 12.5px;
}
.vc-gap {
  margin-top: 12px;
}
.vc-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-marks li {
  background: var(--grey);
  border-radius: 8px;
  padding: 6px 8px;
  line-height: 1.35;
}
.vc-marks em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 10.5px;
}
.vc-note {
  margin-top: auto;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: var(--lime-2);
  border-radius: 8px;
  padding: 8px;
  font-size: 11.5px;
  line-height: 1.35;
}
.vc-note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
}
@media (max-width:760px) {
  .vcall {
    grid-template-columns: 1fr;
  }
  .vc-stage {
    aspect-ratio: 4/3;
    border-radius: 14px 14px 0 0;
  }
  .vc-self {
    width: 22%;
  }
}

/* ========== Pricing ========== */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 0 auto; }
.plans>* { min-width: 0; }
.plan { background: var(--grey); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.plan small { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.plan .pp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .pp b { font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.plan .pp span { font-size: 14px; color: var(--ink-2); }
.plan p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.plan li svg.i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--mint); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.pro { background: var(--deep); color: #fff; }
.plan.pro small, .plan.pro p, .plan.pro .pp span { color: rgba(255,255,255,.72); }
.plan.pro li svg.i { color: var(--lime); }
.plan-note { text-align: center; font-size: 13.5px; color: var(--ink-2); max-width: 640px; margin: 20px auto 0; line-height: 1.5; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan { padding: 22px; } }

/* Journey on phone: taller stage, photo anchored to the top so faces sit above the card */
@media (max-width:760px) {
  .jr-stage { aspect-ratio: 4/5.6; }
  .jpanel img { object-position: 72% 0 !important; }
}

/* Honeypot field for bots: kept off-screen, never shown to people */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }


/* ========== Motion v2 (2026-11-12): calmer hovers, premium reveals ========== */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }

/* Reveal: a longer, softer rise with a touch of focus-in */
.rv {
  transform: translateY(28px);
  filter: blur(4px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.rv.in { filter: none; }

/* Headings rise word by word */
h1.words .w, h2.words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
h1.words .w > span, h2.words .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
h1.words.in .w > span, h2.words.in .w > span { transform: none; }

/* Photos settle from a slight zoom */
.rvm img, .rvm > img { transition: transform 1.6s var(--ease-out); }
.rvm:not(.in) img { transform: scale(1.08); }

/* No movement on hover: photos and mockups stay still; cards only deepen their shadow */
.band:hover .band-r img, .uc:hover .ph img { transform: none; }
.tp:hover .card, .tp:hover .board, .tp:hover .phones { transform: none; }
.pcard:hover, .uc:hover, .fstep:hover, .vitem:hover { transform: none; }
.hub .n:hover { transform: translate(-50%,-50%); }

@media (prefers-reduced-motion:reduce) {
  .rv { filter: none; }
  h1.words .w > span, h2.words .w > span { transform: none; transition: none; }
  .rvm:not(.in) img { transform: none; }
}