/* ============================================================
   Iterro — demand-test landing · v3 restyle
   Style ref: Cycle marketing site (via Mobbin preview, verified)
   Language:  white canvas · ultra-bold black grotesque with royal-blue
              highlight · blue pill CTAs · pastel tint panels · thin-border
              white cards · playful 3D sticker icons + geometric confetti
   Palette:   #FFFFFF paper · #101016 ink · #3D50F5 royal blue
              pastels: lavender #E9EDFC · pink #FBE7F6 · yellow #FCF4DF
              green #E7F5EC · panel #F2F3F8
   Type:      Manrope 800 (display) · Inter (body/UI)
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #101016;
  --ink-soft: #4E4E5A;
  --blue: #3D50F5;
  --blue-deep: #2B3CD9;
  --blue-tint: #E9EDFC;
  --lavender: #E4E8FB;          /* hero rings */
  --pink: #F2A7E1;
  --pink-tint: #FBE7F6;
  --pink-deep: #B2379B;
  --yellow: #FFC931;
  --yellow-tint: #FCF4DF;
  --green: #2EC077;
  --green-tint: #E7F5EC;
  --green-deep: #177A4C;
  --orange: #F49E3F;
  --orange-tint: #FDEEDD;
  --orange-deep: #A85A10;
  --red: #D23B2E;
  --panel: #F2F3F8;             /* big light section panels */
  --muted: #6E6E7A;
  --label: #8A8A96;
  --border: #EAEAF0;
  --border-strong: #DDDDE6;

  /* legacy aliases still referenced from inline HTML styles */
  --mist: #F6F7FB;
  --mist-deep: #EAEAF0;
  --violet-deep: #101016;
  --on-dark-muted: #C9D0F6;
  --violet-tint: #E9EDFC;
  --carmine: #3D50F5;
  --carmine-tint: #E9EDFC;
  --olive: #8A8A96;
  --silver: #DDDDE6;
  --silver-soft: #EAEAF0;

  --font-display: "Manrope", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-chip: 999px;
  --border-card: 1px solid var(--border);
  --shadow-soft: 0 1px 2px rgba(16, 16, 22, .04), 0 8px 24px rgba(16, 16, 22, .05);
  --shadow-lift: 0 2px 6px rgba(16, 16, 22, .05), 0 20px 48px rgba(16, 16, 22, .10);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --space-section: clamp(80px, 10vw, 136px);
  --content-w: 1140px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

::selection { background: var(--blue); color: #fff; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: 12px 20px;
  border-radius: 999px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.display-xl { font-size: clamp(2.6rem, 6.4vw, 4.8rem); }
.display-lg { font-size: clamp(2rem, 4.3vw, 3.2rem); }
.display-md { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }

.hl { color: var(--blue); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44em;
}

.fine {
  font-size: .84rem;
  color: var(--muted);
  letter-spacing: .01em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: var(--radius-chip);
  padding: 8px 16px;
  margin-bottom: 20px;
}

/* ---------- layout ---------- */

.wrap {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { padding-block: var(--space-section); }
.section--mist { background: var(--paper); }

/* light "panel" section — big rounded pale block (Cycle style) */
.section--dark { padding-block: calc(var(--space-section) * .55); }
.section--dark .wrap {
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding-block: clamp(48px, 6vw, 80px);
  max-width: calc(var(--content-w) + 80px);
}
.section--dark .kicker { background: #fff; }

.section-head {
  max-width: 730px;
  margin-bottom: clamp(44px, 6vw, 68px);
}
.section-head .lede { margin-top: 20px; }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lede { margin-inline: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--radius-chip);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease-spring), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover {
  background: var(--blue-deep);
  box-shadow: none;
}

.btn--ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--ondark {
  background: #fff;
  color: var(--blue);
}
.btn--ondark:hover { background: #fff; box-shadow: none; }

.btn--lg { padding: 19px 36px; font-size: 1.04rem; }
.btn .arrow { transition: transform .18s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.cta-note {
  margin-top: 16px;
  font-size: .86rem;
  color: var(--muted);
}
.cta-note strong { color: var(--ink); font-weight: 650; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, .94);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 74px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.logo:hover { text-decoration: none; }
.logo .dot { color: var(--blue); }

.nav__links {
  display: flex;
  gap: 26px;
  margin-inline: auto;
}
.nav__links a {
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.nav__login {
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__login:hover { color: var(--ink); text-decoration: none; }
.nav .btn { padding: 12px 22px; font-size: .92rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(64px, 8.5vw, 108px);
  text-align: center;
}

/* big lavender ring + dashed orbit, Cycle-style */
.hero::before {
  content: "";
  position: absolute;
  top: -22vw;
  right: -18vw;
  width: 64vw;
  height: 64vw;
  border-radius: 50%;
  border: 7vw solid var(--lavender);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  top: 6vw;
  left: -26vw;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  border: 2px dashed #C9CFEE;
  pointer-events: none;
  z-index: -1;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: var(--radius-chip);
  background: var(--pink-tint);
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 32px;
}
.badge .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: 0 0 0 0 rgba(178, 55, 155, .35);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(178, 55, 155, .35); }
  70% { box-shadow: 0 0 0 9px rgba(178, 55, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(178, 55, 155, 0); }
}

.hero .display-xl { max-width: 14.5em; margin-inline: auto; }
.hero .lede { margin: 24px auto 0; max-width: 40em; }
.hero__cta { margin-top: 36px; }

/* floating sticker icons + confetti */
.hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero__sticker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 12px 16px;
}
.hero__sticker img { width: 54px; height: 54px; object-fit: contain; }
.hero__sticker .lines { display: grid; gap: 7px; }
.hero__sticker .lines i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #ECECF2;
}
.hero__sticker .lines i:first-child { width: 76px; }
.hero__sticker .lines i:last-child { width: 52px; }
.hero__sticker--left { left: clamp(8px, 6vw, 120px); top: 172px; transform: rotate(-4deg); }
.hero__sticker--right { right: clamp(8px, 5vw, 96px); top: 320px; transform: rotate(3deg); }

.confetti {
  position: absolute;
  border: 2.5px solid var(--ink);
  pointer-events: none;
}
.confetti--dot { width: 22px; height: 22px; border-radius: 50%; }
.confetti--diamond { width: 24px; height: 24px; transform: rotate(45deg); border-radius: 5px; }
.confetti--pill { width: 26px; height: 44px; border-radius: 999px; }
.hero__decor .confetti--dot { background: var(--pink); right: 8vw; top: 210px; }
.hero__decor .confetti--diamond { background: var(--green); left: 11vw; top: 390px; }
.hero__decor .confetti--cross { left: 7vw; top: 130px; }
.confetti--cross { border: 0; width: 30px; height: 30px; transform: rotate(12deg); }
.confetti--cross::before, .confetti--cross::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 10px;
  border-radius: 5px;
  background: var(--orange);
  border: 2px solid var(--ink);
}
.confetti--cross::before { transform: translate(-50%, -50%) rotate(90deg); }
.confetti--cross::after { transform: translate(-50%, -50%); }

.hero__visual {
  position: relative;
  max-width: 1040px;
  margin: clamp(52px, 6.5vw, 84px) auto 0;
  padding-bottom: clamp(48px, 6vw, 84px);
  text-align: left;
}

.hero__float-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 44px);
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: none;
}
.hero__float-cta:hover { transform: translateX(-50%) translateY(-2px); }
.hero__float-cta:active { transform: translateX(-50%) scale(.99); }

/* ---------- designed with coaches ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.coach-built {
  padding: clamp(12px, 2vw, 24px) 0 clamp(28px, 4vw, 48px);
}
.coach-built + .section { padding-top: clamp(40px, 5vw, 64px); }
.coach-built__panel {
  padding-inline: clamp(0px, 2vw, 24px);
}
.coach-built__top {
  text-align: center;
}
.coach-built__top h2 {
  max-width: 18em;
  margin-inline: auto;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
}

.coach-quotes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: clamp(14px, 2vw, 24px);
}
.coach-quotes__viewport {
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: center;
}
.coach-quote { margin: 0; animation: quote-in .28s var(--ease-out); }
.coach-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
}
.coach-quotes__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 0;
}
.coach-quotes__dot {
  width: 28px;
  height: 28px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.coach-quotes__dot::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  inset: 50% auto auto 50%;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background-color .2s, transform .2s;
}
.coach-quotes__dot:hover::before { transform: translate(-50%, -50%) scale(1.2); }
.coach-quotes__dot.is-active::before { background: var(--blue); }

@keyframes quote-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- mockups ---------- */

.shot {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--mist);
}
.shot__bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #DDDDE6;
}
.shot__bar i:first-child { background: var(--blue); }
.shot__bar .url {
  margin-inline: auto;
  font-size: .72rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 26px;
}

.app {
  display: grid;
  grid-template-columns: 190px 1fr 285px;
  min-height: 430px;
  font-size: .8rem;
}

.app__side {
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  background: var(--mist);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app__side .logo { font-size: 1.1rem; padding: 0 10px 14px; }
.app__nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 500;
}
.app__nav-item svg { width: 15px; height: 15px; }
.app__nav-item.is-active {
  background: var(--blue-tint);
  color: var(--blue);
  font-weight: 600;
}

.app__main { padding: 22px 24px; min-width: 0; }
.app__hello { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.app__date { color: var(--muted); font-size: .74rem; margin-top: 2px; }

.app__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
  margin: 20px 0 10px;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
}
.session-row .time {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 46px;
}
.session-row .who { font-weight: 550; }
.session-row .what { color: var(--muted); font-size: .72rem; }

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 650;
  color: var(--blue);
  background: var(--blue-tint);
  flex: none;
}
.avatar--b { background: var(--pink-tint); color: var(--pink-deep); }
.avatar--c { background: var(--yellow-tint); color: var(--orange-deep); }

.chip {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--paid { background: var(--green-tint); color: var(--green-deep); }
.chip--due { background: var(--orange-tint); color: var(--orange-deep); }
.chip--soft { background: var(--panel); color: var(--muted); }

.app__aside {
  border-left: 1px solid var(--border);
  padding: 20px 18px;
  background: var(--mist);
}

.prep-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}
.prep-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.prep-card__title { font-weight: 650; font-size: .8rem; }
.prep-card__sub { color: var(--muted); font-size: .68rem; }
.prep-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: .74rem;
  line-height: 1.45;
}
.prep-item svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--green); }
.prep-card .mini-btn {
  display: block;
  text-align: center;
  margin-top: 8px;
  background: var(--blue);
  color: #fff;
  font-size: .72rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 8px 0;
  border: 1.5px solid var(--blue);
}
.prep-card .mini-btn--outline {
  margin-top: 12px;
  background: #fff;
  color: var(--blue);
}

.stat-mini {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 13px 15px;
}
.stat-mini .num { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.stat-mini .lbl { color: var(--muted); font-size: .68rem; }

/* phone */

.phone {
  position: absolute;
  right: clamp(-8px, 1vw, 26px);
  bottom: 0;
  width: clamp(180px, 22vw, 250px);
  background: var(--ink);
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--shadow-lift);
  transform: rotate(2.5deg);
}
.phone__screen {
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  font-size: .68rem;
}
.phone__notch {
  width: 74px; height: 18px;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
}
.phone__body { padding: 12px 14px 18px; }
.phone__client {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.phone__client .who { font-weight: 650; font-size: .78rem; }
.phone__client .plan { color: var(--muted); font-size: .62rem; }
.phone__goal {
  display: inline-block;
  background: var(--blue-tint);
  color: var(--blue);
  font-weight: 600;
  font-size: .6rem;
  border-radius: 999px;
  padding: 3px 8px;
  margin: 8px 4px 0 0;
}
.phone__label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
  margin: 12px 0 6px;
}
.timeline { position: relative; padding-left: 14px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 3px; top: 4px; bottom: 4px;
  width: 1.5px;
  background: var(--border);
}
.timeline__item { position: relative; padding: 3px 0 7px; color: var(--ink-soft); line-height: 1.4; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -14px; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.timeline__item:nth-child(2)::before { background: var(--green); }
.timeline__item:nth-child(3)::before { background: var(--pink); }
.timeline__item b { display: block; color: var(--ink); font-weight: 650; }

.phone__next {
  margin-top: 10px;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  padding: 9px 11px;
}
.phone__next .t { font-size: .6rem; color: var(--on-dark-muted); }
.phone__next .v { font-weight: 650; font-size: .72rem; }

/* ---------- connected system (block 2) ---------- */

.connected-section__title {
  max-width: 28ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.connected-system {
  position: relative;
  width: 100%;
  margin: 24px auto 0;
  padding: clamp(58px, 6vw, 72px) clamp(20px, 4vw, 50px) clamp(26px, 3vw, 34px);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: clamp(26px, 2.8vw, 34px);
  box-shadow: 12px 14px 0 var(--blue);
}

.system-hub {
  position: absolute;
  top: 0;
  left: 50%;
  padding-inline: clamp(22px, 4vw, 42px);
  background: var(--paper);
  transform: translate(-50%, -54%);
}
.system-hub__brand {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.system-hub__brand .dot { color: var(--blue); }

.system-nodes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
}
.system-node {
  display: grid;
  grid-template-rows: 82px auto;
  min-width: 0;
  align-items: start;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.system-node img {
  width: var(--system-icon-size, 72px);
  height: var(--system-icon-size, 72px);
  align-self: center;
  object-fit: contain;
}
.system-node--booking { --system-icon-size: 52px; }
.system-node--payments { --system-icon-size: 63px; }
.system-node--clients { --system-icon-size: 78px; }
.system-node--reminders { --system-icon-size: 70px; }
.system-node--notes { --system-icon-size: 80px; }
.system-node span {
  font-family: var(--font-body);
  font-size: clamp(.94rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
}

.connected-system .system-node {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.connected-system.is-in .system-node { opacity: 1; transform: none; }
.connected-system.is-in .system-node:nth-child(1) { transition-delay: .08s; }
.connected-system.is-in .system-node:nth-child(2) { transition-delay: .13s; }
.connected-system.is-in .system-node:nth-child(3) { transition-delay: .18s; }
.connected-system.is-in .system-node:nth-child(4) { transition-delay: .23s; }
.connected-system.is-in .system-node:nth-child(5) { transition-delay: .28s; }

.stack-tagline {
  text-align: center;
  margin: 30px auto 0;
  max-width: 44em;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink-soft);
}

/* ---------- feature sections ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.feature--flip .feature__copy { order: 2; }
.feature--flip .feature__visual { order: 1; }

.feature__promise {
  margin-top: 16px;
  font-size: 1rem;
  color: var(--ink-soft);
}

.checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.checklist li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: .97rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.checklist svg {
  width: 21px; height: 21px;
  flex: none;
  margin-top: 1px;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 50%;
  padding: 4px;
}
.feature__cta { margin-top: 32px; }

/* ---------- feature tabs (click to switch the visual) ---------- */

.tabs {
  display: grid;
  gap: 4px;
  margin-top: 30px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--label);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.tab:hover { color: var(--ink); }

.tab__arrow {
  width: 20px;
  height: 20px;
  flex: none;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}

.tab.is-active {
  color: var(--ink);
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
  cursor: default;
}
.tab.is-active .tab__arrow { opacity: 1; transform: none; }

/* Smart Notes visual sits to the left, so its active arrow points toward it. */
#ai-notes .tab__arrow {
  order: -1;
  margin-left: 0;
  transform: translateX(4px) rotate(180deg);
}
#ai-notes .tab.is-active .tab__arrow { transform: rotate(180deg); }

.panel { display: none; }
.panel.is-active { display: block; animation: panel-in .28s var(--ease-out) both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- calendar (month view) ---------- */

.cal { position: relative; padding: 22px 24px 58px; }

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal__month {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.cal__nav { display: flex; gap: 6px; }
.cal__nav i {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: var(--border-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.cal__nav svg { width: 13px; height: 13px; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal__dow span {
  text-align: center;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
  padding-bottom: 6px;
}

.cal__day {
  position: relative;
  aspect-ratio: 1 / .74;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.cal__day.is-out { color: #C6C6D0; font-weight: 500; }
.cal__day.is-off { color: var(--label); font-weight: 500; }

.cal__dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .45;
}

.cal__day.is-today {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 80, 245, .35);
}
.cal__day.is-today .cal__dot { background: #fff; opacity: 1; }

/* floating day popover — anchored under the highlighted day, free of the frame edges */
.cal__pop {
  position: absolute;
  right: 5%;
  bottom: 30px;
  width: 55%;
  background: var(--card);
  border: 1px solid rgba(16, 16, 22, .05);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 16, 22, .05), 0 16px 40px rgba(16, 16, 22, .14);
  padding: 12px 15px 10px;
}
.cal__pop-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: .82rem;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.cal__pop-title span {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 999px;
  padding: 2px 8px;
}
.cal__pop-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: .76rem;
}
.cal__pop-row .t {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
}
.cal__pop-row .n { color: var(--ink); font-weight: 600; }

/* ---------- client purchase view ---------- */

.buy { padding: 22px 22px 24px; }
.buy__head { text-align: center; margin-bottom: 18px; }
.buy__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.01em;
}
.buy__sub { display: block; font-size: .76rem; color: var(--muted); margin-top: 3px; }

.buy__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.buy-card {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 8px 14px;
  text-align: center;
  background: var(--card);
}
.buy-card__qty {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
}
.buy-card__label { display: block; font-size: .68rem; color: var(--muted); margin-top: 2px; }
.buy-card__price {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-top: 10px;
}
.buy-card__each { display: block; font-size: .64rem; color: var(--label); margin-top: 1px; }

.buy-card.is-picked {
  border-color: var(--blue);
  background: var(--blue-tint);
  box-shadow: 0 6px 18px rgba(61, 80, 245, .16);
}
.buy-card.is-picked .buy-card__price { color: var(--blue); }
.buy-card__badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.buy__pay {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 13px 0;
  box-shadow: 0 6px 18px rgba(61, 80, 245, .28);
}
.buy__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: .68rem;
  color: var(--label);
}
.buy__note svg { width: 12px; height: 12px; }

/* ---------- client notifications ---------- */

.notify {
  display: grid;
  gap: 14px;
  padding: 6px 0;
}
.notify-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(16, 16, 22, .05), 0 14px 34px rgba(16, 16, 22, .09);
  padding: 16px 20px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  width: 88%;
}
.notify-card--a { margin-right: auto; }
.notify-card--b { margin-left: auto; }
.notify-card--c { margin-right: auto; }

.notify-card__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow-tint);
  color: #B07E00;
}
.notify-card__icon svg { width: 17px; height: 17px; }
.notify-card__icon--green { background: var(--green-tint); color: var(--green-deep); }
.notify-card__icon--blue { background: var(--blue-tint); color: var(--blue); }

/* ---------- notification-style prep-brief alert ---------- */

.alert-card {
  background: var(--card);
  border: var(--border-card);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(16, 16, 22, .05), 0 18px 42px rgba(16, 16, 22, .12);
  padding: 20px 22px 18px;
}
.alert-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.alert-card__body {
  margin: 8px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.alert-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--blue);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 5px 14px rgba(61, 80, 245, .28);
}
.alert-card__cta svg { width: 14px; height: 14px; }

.brief-static {
  margin-top: 16px;
  background: var(--card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
  font-size: .78rem;
}
.brief-static p { margin: 4px 0; color: var(--ink-soft); line-height: 1.5; }

.brief-static--primary {
  margin-top: 0;
  padding: 24px;
  font-size: .84rem;
  box-shadow: var(--shadow-lift);
}

.brief-static--primary .brief-float__head {
  margin-bottom: 18px;
  font-size: .92rem;
}

.brief-static--primary .review-card__section { margin-top: 16px; }

.feature__note {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: 1.1rem;
  color: var(--ink);
}
.feature__note--below-card {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

/* pastel tint panels around feature visuals (Cycle style) */
.tint-panel {
  border-radius: var(--radius-panel);
  padding: clamp(22px, 3vw, 40px);
}

/* Tinted panels that host switchable tab panels keep one fixed height,
   so the card never resizes as you click between bullets. */
.tint-panel:has(.panel) {
  display: grid;
  align-content: center;
  min-height: var(--panel-h);
}
.tint-panel--yellow { --panel-h: 452px; }
.tint-panel--blue { --panel-h: 522px; }

/* Smart notes: both halves of the row share one height, so the tinted card
   lines up top and bottom with the copy column beside it. */
.feature--match { align-items: stretch; }
.feature--match .feature__visual {
  display: flex;
  flex-direction: column;
}
.feature--match .tint-panel:has(.panel) {
  flex: none;
  height: var(--panel-h);
  min-height: var(--panel-h);
  padding: clamp(20px, 2.2vw, 28px);
}
.tint-panel--pink { --panel-h: 460px; }

/* compact review card so it fits the shared row height */
#panel-notes-2 .review-card { padding: 17px 18px; }
#panel-notes-2 .review-card__section { margin: 11px 0 5px; }
#panel-notes-2 .quote { padding: 7px 11px; }
#panel-notes-2 .commit { padding: 3px 0; line-height: 1.4; }
#panel-notes-2 .review-card__actions { margin-top: 12px; padding-top: 11px; }

@media (max-width: 560px) {
  .tint-panel:has(.panel) { min-height: 0; }
  .feature--match .tint-panel:has(.panel) {
    --panel-h: 500px;
    height: var(--panel-h);
    min-height: var(--panel-h);
  }
}
.tint-panel--yellow { background: var(--yellow-tint); }
.tint-panel--pink { background: var(--pink-tint); }
.tint-panel--blue { background: #EAF3FC; }

/* notes split visual */

.notes-duo { display: grid; gap: 16px; }

.call-card__from {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  margin-bottom: 12px;
}
.call-card__from svg { width: 14px; height: 14px; flex: none; }
.call-card__from span {
  margin-left: auto;
  font-weight: 500;
  color: #9AA0C9;
  font-size: .66rem;
}

.call-card .call-card__tiles--three { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.call-card .call-card__tiles--three .call-tile { aspect-ratio: 1 / 1.16; }
.call-card .call-card__tiles--three .avatar { width: 34px; height: 34px; font-size: .7rem; }
.call-card .call-card__tiles--three .name { font-size: .56rem; }

.call-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.call-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 247, 251, .12);
  color: #E6E7F2;
}
.call-btn svg { width: 15px; height: 15px; }
.call-btn--end {
  background: #E5484D;
  color: #fff;
}
.call-btn--end svg { transform: rotate(135deg); }

.call-tile--ai {
  background: linear-gradient(160deg, #2C3AA8, #1B226B);
  border: 1px solid rgba(154, 160, 201, .3);
}
.ai-mark {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
}
.call-card {
  background: var(--ink);
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.call-card__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-tile {
  aspect-ratio: 16/10.5;
  border-radius: 12px;
  background: linear-gradient(160deg, #2B2B36, #1A1A22);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.call-tile .avatar { width: 44px; height: 44px; font-size: .85rem; }
.reveal.is-in .call-tile .avatar--speaking {
  animation: speaking-pulse 2.8s ease-in-out 3;
}
@keyframes speaking-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 167, 225, 0); transform: scale(1); }
  42% { box-shadow: 0 0 0 7px rgba(242, 167, 225, .26); transform: scale(1.045); }
  68% { box-shadow: 0 0 0 3px rgba(242, 167, 225, .14); transform: scale(1.015); }
}
.call-tile .name {
  position: absolute;
  left: 9px; bottom: 7px;
  font-size: .62rem;
  color: #A6A6B4;
}
.call-card__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: .74rem;
  color: #C2C2CE;
}
.call-card__status .rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink);
  animation: pulse 2s infinite;
}
.wave { display: flex; align-items: center; gap: 2.5px; margin-left: auto; height: 16px; }
.wave i {
  width: 2.5px;
  border-radius: 2px;
  background: #6E6E7E;
  height: 30%;
  animation: wave 1.1s ease-in-out infinite;
}
.wave i:nth-child(2) { height: 75%; animation-delay: .12s; background: var(--pink); }
.wave i:nth-child(3) { height: 100%; animation-delay: .24s; background: #fff; }
.wave i:nth-child(4) { height: 60%; animation-delay: .36s; background: var(--pink); }
.wave i:nth-child(5) { height: 35%; animation-delay: .48s; }
@keyframes wave { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }

.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-lift);
  font-size: .8rem;
}
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.review-card__title { font-weight: 650; font-size: .88rem; }
.review-card__section {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
  margin: 14px 0 7px;
}
.review-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.quote {
  border-left: 3px solid var(--pink-deep);
  background: var(--pink-tint);
  border-radius: 0 10px 10px 0;
  padding: 9px 12px;
  font-style: italic;
  color: var(--ink);
}
.commit {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 5px 0;
  color: var(--ink-soft);
}
.commit .box {
  width: 15px; height: 15px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.commit .box--on { background: var(--blue); border-color: var(--blue); }
.commit .box svg { width: 9px; height: 9px; color: #fff; }
.review-card__actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.review-card__actions .approve {
  background: var(--blue);
  color: #fff;
  font-weight: 650;
  font-size: .74rem;
  border-radius: 999px;
  padding: 9px 18px;
}
.review-card__actions .edit {
  color: var(--muted);
  font-weight: 550;
  font-size: .74rem;
  padding: 9px 14px;
}

/* progress visual */

.progress-visual { position: relative; }
.map-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  padding: 10px;
}
.map-card svg { width: 100%; height: auto; }

.brief-float {
  position: absolute;
  right: clamp(-10px, 0vw, 8px);
  bottom: -34px;
  width: min(64%, 300px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 15px 17px;
  font-size: .76rem;
  transform: rotate(1.4deg);
}
.brief-float__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: .8rem;
  margin-bottom: 8px;
}
.brief-float__head svg { width: 15px; height: 15px; color: var(--blue); }
.brief-float p { margin: 4px 0; color: var(--ink-soft); line-height: 1.5; }

/* ---------- how it works ---------- */

/* ---------- how it works · process cards ---------- */

.how-block {
  margin-top: clamp(72px, 9vw, 116px);
}

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 22px);
}

.step-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--panel);
  border-radius: 30px;
  padding: clamp(28px, 3.2vw, 42px) clamp(20px, 2.4vw, 30px) clamp(26px, 3vw, 38px);
}

.step-card h3 {
  font-size: clamp(1.24rem, 1.85vw, 1.62rem);
  line-height: 1.1;
}

.step-card p {
  margin: 12px auto 0;
  max-width: 27ch;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.step-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  padding-top: clamp(26px, 3.4vw, 46px);
  min-height: 74px;
}

/* curved arrow between cards */
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  width: clamp(36px, 3.8vw, 56px);
}
.step-arrow svg { width: 100%; height: auto; }

/* card 1 — booking + payment pill */
.art-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--blue);
  border-radius: 999px;
  padding: 8px 20px 8px 8px;
  border: 2.4px solid var(--ink);
  box-shadow: 0 8px 20px rgba(61, 80, 245, .22);
}
.art-pill__avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 2.4px solid var(--ink);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.art-pill__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
  color: #fff;
}
.art-pill__text b { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.art-pill__text i { font-style: normal; font-size: .68rem; color: #C9D0F6; white-space: nowrap; }

.art-pill--booking {
  width: min(100%, 310px);
  box-sizing: border-box;
  gap: 10px;
  padding-right: 8px;
}

.art-badge {
  flex: none;
  margin-left: auto;
  margin-right: 0;
  background: var(--pink);
  color: var(--ink);
  border: 2.4px solid var(--ink);
  font-size: .74rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* card 2 — notes ready pill */
.art-pill--split { padding: 7px 20px 7px 7px; gap: 14px; }
.art-chip {
  background: #fff;
  border: 2.4px solid var(--ink);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 15px;
  white-space: nowrap;
}
.art-pill__label { color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.art-dot {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--pink);
  border: 2.4px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.art-dot svg { width: 15px; height: 15px; }

/* card 3 — next-session bubble */
.art-bubble {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--pink);
  color: var(--ink);
  border: 2.4px solid var(--ink);
  border-radius: 20px;
  padding: 11px 18px 13px;
  margin-bottom: 12px;
}
.art-bubble__tail {
  position: absolute;
  left: 44%;
  bottom: -13px;
  width: 24px;
  height: 18px;
  overflow: visible;
}
.art-bubble__label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(16, 16, 22, .62);
  white-space: nowrap;
}
.art-bubble__value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}


/* ---------- trust (light panel section) ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "consent hipaa"
    "review hipaa";
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}
.trust-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 32px);
  overflow: hidden;
}
.trust-card--consent { grid-area: consent; }
.trust-card--review { grid-area: review; }
.trust-card--hipaa {
  grid-area: hipaa;
  min-height: 100%;
  background: #fff;
}
.trust-art {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
}
.trust-art--consent,
.trust-art--review { min-height: 116px; }
.consent-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 430px);
  color: #fff;
  background: var(--blue);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 11px 10px 10px;
  box-shadow: 0 10px 22px rgba(61, 80, 245, .18);
}
.consent-pill__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
}
.consent-pill__person {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}
.consent-pill__person b { font-size: .9rem; }
.consent-pill__person span { color: #DDE1FF; font-size: .74rem; margin-top: 3px; }
.consent-pill__admit {
  color: var(--ink);
  background: var(--orange);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .82rem;
  font-weight: 800;
}
.review-control {
  width: min(100%, 400px);
  color: #fff;
  background: var(--blue);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(61, 80, 245, .18);
}
.review-control__top {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}
.review-control__top b { font-size: 1.05rem; }
.review-control__top span { color: #DDE1FF; font-size: .78rem; font-weight: 400; }
.review-control__actions { display: flex; justify-content: flex-end; gap: 8px; }
.review-control__actions span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: .8rem;
  font-weight: 800;
}
.review-control__actions svg { width: 15px; height: 15px; }
.review-control__edit { color: var(--ink); background: #fff; }
.review-control__approve { color: var(--ink); background: var(--orange); }
.trust-art--hipaa {
  flex: 1;
  min-height: 290px;
}
.hipaa-badge {
  display: flex;
  width: clamp(190px, 21vw, 242px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 34% 34% 42% 42% / 28% 28% 48% 48%;
  box-shadow: 12px 14px 0 var(--blue);
  transform: rotate(-2deg);
}
.hipaa-badge__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.hipaa-badge svg { width: 58px; height: 58px; margin: 16px 0 10px; color: var(--orange); }
.hipaa-badge strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.45rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.trust-card h3 { font-size: 1.16rem; letter-spacing: -.015em; }
.trust-card p { color: var(--ink-soft); font-size: 1rem; margin: 9px 0 0; line-height: 1.58; }

/* ---------- pricing ---------- */

.price-card {
  max-width: 520px;
  margin-inline: auto;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 10px 12px 0 var(--blue);
  overflow: hidden;
}
.price-card__head {
  background: #fff;
  color: var(--ink);
  padding: 38px 42px 18px;
  text-align: left;
}
.price-card__tier {
  display: block;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
}
.price-card__intro {
  max-width: 31ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 28px;
  color: var(--ink);
}
.price-card__amount span { font-size: 1.08rem; font-family: var(--font-body); font-weight: 500; color: var(--ink); }
.price-card__after { color: var(--ink-soft); font-size: .88rem; margin-top: 8px; }
.price-card__body { padding: 18px 42px 42px; }
.price-card .checklist { gap: 16px; margin-top: 0; }
.price-card .checklist li { font-size: .96rem; color: var(--ink); }
.price-card .checklist svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  color: var(--ink);
  background: var(--orange);
  border: 2px solid var(--ink);
}
.price-card .btn {
  width: 100%;
  margin-top: 32px;
  border: 0;
  box-shadow: none;
}
.price-card .btn:hover { box-shadow: none; }
.btn--spark {
  position: relative;
  overflow: visible;
}
.cta-spark {
  position: absolute;
  z-index: 2;
  display: block;
  width: 18px;
  height: 18px;
  color: var(--orange);
  opacity: 0;
  pointer-events: none;
  transform: scale(.45) rotate(-12deg);
  transform-origin: center;
  transition: opacity .18s var(--ease-out), transform .24s var(--ease-spring);
}
.cta-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta-spark path {
  fill: currentColor;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cta-spark--sm { width: 14px; height: 14px; }
.cta-spark--md { width: 18px; height: 18px; }
.cta-spark--lg { width: 23px; height: 23px; }
.hero__cta .cta-spark--sm { width: 19px; height: 19px; }
.hero__cta .cta-spark--md { width: 25px; height: 25px; }
.hero__cta .cta-spark--lg { width: 31px; height: 31px; }
.hero__cta .cta-spark--lm { top: 41%; left: -9px; }
.hero__cta .cta-spark--bl { bottom: 3px; left: 1%; }
.price-card .cta-spark--md { width: 25px; height: 25px; }
.price-card .cta-spark--lg { width: 33px; height: 33px; }
.final-cta .cta-spark--sm { width: 21px; height: 21px; }
.final-cta .cta-spark--md { width: 28px; height: 28px; }
.final-cta .cta-spark--lg { width: 37px; height: 37px; }
.cta-spark--tl { top: -10px; left: 9%; --spark-rotation: -8deg; }
.cta-spark--tc { top: -12px; left: 47%; --spark-rotation: 5deg; }
.cta-spark--tr { top: -10px; right: 9%; --spark-rotation: 8deg; }
.cta-spark--rt { top: 13%; right: -9px; --spark-rotation: -5deg; }
.cta-spark--rb { right: -9px; bottom: 10%; --spark-rotation: 9deg; }
.cta-spark--br { right: 14%; bottom: -11px; --spark-rotation: -7deg; }
.cta-spark--bc { bottom: -12px; left: 47%; --spark-rotation: 6deg; }
.cta-spark--bl { bottom: -11px; left: 7%; --spark-rotation: 10deg; }
.cta-spark--lm { top: 32%; left: -9px; --spark-rotation: -9deg; }
.price-card .cta-spark--tr { top: -16px; right: 14%; }
.price-card .cta-spark--bl { bottom: -17px; left: 7%; }
.price-card .cta-spark--br { right: 7%; bottom: -14px; }
.btn--spark:hover .cta-spark,
.btn--spark:focus-visible .cta-spark {
  opacity: 1;
  transform: scale(1) rotate(var(--spark-rotation, 0deg));
}
.price-card .cta-note { text-align: center; }

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

.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--shadow-lift); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ind {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--ease-out), background-color .2s, border-color .2s, color .2s;
}
.faq summary .ind svg { width: 13px; height: 13px; stroke-width: 3; }
.faq details[open] summary .ind {
  transform: rotate(45deg);
}
.faq .answer {
  padding: 0 60px 22px 22px;
  color: var(--ink-soft);
  max-width: 60em;
}
.faq .answer p { margin: 0; }

/* ---------- final cta (solid blue panel, Cycle style) ---------- */

.final-cta { text-align: center; }
.cta-panel {
  position: relative;
  background: var(--blue);
  border-radius: var(--radius-panel);
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px);
  color: #fff;
}
.cta-panel h2 { color: #fff; max-width: 15em; margin-inline: auto; }
.cta-panel .lede { color: #D6DBFA; margin: 22px auto 0; max-width: 38em; }
.cta-panel .btn { margin-top: 36px; }
.cta-panel .cta-note { color: #C9D0F6; }
.cta-panel .cta-note strong { color: #fff; }

.cta-panel .dash {
  position: absolute;
  pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, .55);
}
.cta-panel .dash--left {
  left: 0; top: 44px;
  width: clamp(80px, 12vw, 150px);
  height: clamp(60px, 9vw, 110px);
  border-left: 0; border-bottom: 0;
  border-radius: 0 999px 0 0;
}
.cta-panel .dash--right {
  right: 0; bottom: 54px;
  width: clamp(80px, 12vw, 150px);
  height: clamp(60px, 9vw, 110px);
  border-right: 0; border-top: 0;
  border-radius: 0 0 0 999px;
}
.cta-panel .confetti--dot { background: var(--yellow); left: -10px; top: 130px; }
.cta-panel .confetti--diamond { background: var(--green); right: 38px; top: -13px; }
.cta-panel .confetti--pill { background: var(--pink); right: -8px; bottom: -16px; }

/* ---------- footer ---------- */

.footer {
  background: #fff;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: 40px 0 46px;
  font-size: .88rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: center;
}
.footer .logo { font-size: 1.3rem; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin-left: auto; color: var(--label); }

/* ---------- apply page ---------- */

body[data-page="checkout"] { background: #F7F8FD; }
body[data-page="checkout"] .nav { background: rgba(255, 255, 255, .94); }
body[data-page="login"],
body[data-page="privacy"] { background: #F7F8FD; }
body[data-page="login"] .nav,
body[data-page="privacy"] .nav { background: rgba(255, 255, 255, .94); }

.apply-hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(44px, 6vw, 72px);
  text-align: center;
}
.apply-hero::before {
  content: "";
  position: absolute;
  top: -30vw;
  right: -20vw;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  border: 6vw solid var(--lavender);
  pointer-events: none;
  z-index: -1;
}
.apply-hero .lede { margin: 22px auto 0; max-width: 40em; }
.checkout-step {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.checkout-section { padding-bottom: var(--space-section); }

.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(320px, 4fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: 980px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}

.form-card {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 9px 10px 0 var(--blue);
  padding: clamp(26px, 4vw, 44px);
}
.checkout-form {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.checkout-form__head { margin-bottom: 28px; }
.checkout-form__head span {
  color: var(--blue);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.checkout-form__head h2 {
  margin-top: 8px;
  font-size: clamp(1.55rem, 3vw, 2rem);
}
.checkout-form__head p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 8px;
}
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; }
.required-mark { color: var(--blue); font-weight: 700; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  min-height: 50px;
  padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
.field input[type="text"]:hover,
.field input[type="email"]:hover,
.field input[type="password"]:hover,
.field input[type="url"]:hover,
.field select:hover,
.field textarea:hover { border-color: #B9B9C8; }
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(61, 80, 245, .16);
}
.field .is-invalid { border-color: var(--red); }
.field .is-invalid:focus { box-shadow: 0 0 0 3.5px rgba(210, 59, 46, .14); }
.field-error {
  display: block;
  color: var(--red);
  font-size: .82rem;
  font-weight: 500;
  margin-top: 7px;
}

.consent {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  font-size: .93rem;
  line-height: 1.5;
  background: #fff;
}
.consent:hover { border-color: #B9B9C8; }
.consent input {
  width: 19px; height: 19px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  flex: none;
  cursor: pointer;
}
.consent--price { font-weight: 500; }

.form-card .btn { width: 100%; margin-top: 12px; }
.checkout-form .btn {
  min-height: 54px;
  border: 0;
  box-shadow: none;
}
.checkout-form .btn:hover { box-shadow: none; }
.checkout-form .btn:disabled,
.checkout-form .btn:disabled:hover {
  cursor: wait;
  opacity: .68;
  transform: none;
  box-shadow: none;
}
.checkout-form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.checkout-form__note svg { width: 15px; height: 15px; }
.form-error {
  display: none;
  color: var(--red);
  font-size: .88rem;
  font-weight: 500;
  margin-top: 12px;
  text-align: center;
}
.form-error.is-visible { display: block; }

.apply-aside { position: sticky; top: 100px; }
.summary-card {
  position: relative;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 9px 11px 0 var(--blue);
}
.summary-card__price {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 24px;
  color: var(--ink);
}
.summary-card__price span { font-size: .95rem; font-family: var(--font-body); font-weight: 500; color: var(--ink); }
.summary-card__trial {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
}
.summary-card ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.summary-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .89rem;
  color: var(--ink);
  line-height: 1.45;
}
.summary-card li svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  padding: 3px;
  color: var(--ink);
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.summary-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  font-size: .9rem;
}
.summary-card__total strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.success-card {
  display: none;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(26px, 4vw, 48px);
}
.success-card.is-visible { display: block; }
.success-card .ok {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.success-card .ok svg { width: 28px; height: 28px; }
.success-card h2 { font-size: 1.9rem; }
.success-card p { color: var(--ink-soft); max-width: 34em; margin: 14px auto 0; }
.checkout-reveal { grid-column: 1 / -1; max-width: 680px; margin-inline: auto; }
.checkout-reveal .checkout-step { margin: 0 0 8px; }
.checkout-reveal__recap {
  display: grid;
  gap: 5px;
  max-width: 430px;
  margin: 26px auto 8px;
  padding: 20px;
  background: var(--blue-tint);
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.checkout-reveal__recap span { color: var(--ink-soft); font-size: .84rem; }
.checkout-reveal__recap strong { font-family: var(--font-display); font-size: 1.08rem; }
.checkout-reveal .btn { width: auto; margin-top: 24px; }

/* ---------- login page ---------- */

.login-main {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  padding: clamp(52px, 9vw, 112px) 20px;
  position: relative;
  overflow: hidden;
}
.login-main::before {
  content: "";
  position: absolute;
  width: min(70vw, 720px);
  aspect-ratio: 1;
  right: -28%;
  top: -56%;
  border: clamp(42px, 7vw, 86px) solid var(--lavender);
  border-radius: 50%;
  pointer-events: none;
}
.login-shell { width: min(100%, 500px); position: relative; z-index: 1; }
.login-card { box-shadow: 9px 10px 0 var(--blue); }
.login-card__head { text-align: center; margin-bottom: 30px; }
.login-card__head h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.login-card__head p { margin: 12px 0 0; color: var(--ink-soft); }
.login-card .field:last-of-type { margin-bottom: 8px; }
.login-card .btn { min-height: 54px; border: 0; box-shadow: none; }
.login-help { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- privacy page ---------- */

.privacy-main { padding: clamp(54px, 8vw, 96px) 0 var(--space-section); }
.privacy-article {
  max-width: 820px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 6vw, 68px);
  font-size: 16px;
}
.privacy-back { display: inline-flex; color: var(--muted); font-weight: 600; margin-bottom: 30px; }
.privacy-article h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.privacy-updated { color: var(--muted); margin: 12px 0 34px; }
.privacy-intro { font-size: 1.08rem; color: var(--ink-soft); }
.privacy-article h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-top: 42px; line-height: 1.2; }
.privacy-article h3 { font-size: 1.05rem; margin-top: 28px; line-height: 1.35; }
.privacy-article p,
.privacy-article li { color: var(--ink-soft); }
.privacy-article ul { padding-left: 1.25rem; }
.privacy-article li + li { margin-top: 8px; }
.privacy-article a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

body[data-page="landing"] .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
body[data-page="landing"] .connected-system .system-node {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .connected-system .system-node { opacity: 1; transform: none; transition: none; }
  .badge .pulse, .call-card__status .rec, .wave i, .avatar--speaking { animation: none; }
  .btn, .btn .arrow, .step, .cta-spark { transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .app { grid-template-columns: 170px 1fr; }
  .app__aside { display: none; }
  .trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__sticker { display: none; }
}

@media (max-width: 860px) {
  .nav__links, .nav__login { display: none; }
  body[data-page="checkout"] .nav__login { display: inline-flex; }
  body[data-page="login"] .nav__login,
  body[data-page="privacy"] .nav__login { display: inline-flex; }
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__copy { order: 1; }
  .feature--flip .feature__visual { order: 2; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { justify-self: center; width: 34px; }
  .step-arrow svg { transform: rotate(135deg); }
  .trust-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "consent"
      "review"
      "hipaa";
    grid-template-rows: auto;
  }
  .trust-card--hipaa { min-height: auto; }
  .trust-art--hipaa { min-height: 260px; }
  .hipaa-badge { width: min(58vw, 220px); }
  .apply-grid { grid-template-columns: 1fr; }
  .apply-aside { position: static; order: -1; }
  .phone { display: none; }
  .brief-float { position: static; width: auto; margin-top: 14px; transform: none; }
  .hero::before { display: none; }
  .confetti { display: none; }
  .cta-panel .dash { display: none; }
  .connected-system { padding-inline: clamp(20px, 6vw, 48px); }
  .system-nodes { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; }
  .system-node { grid-column: span 2; }
  .system-node:nth-child(4) { grid-column: 2 / span 2; }
  .system-node:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 780px) {
  .stack-tagline { margin-top: 30px; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .app { grid-template-columns: 1fr; }
  .app__side { flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; }
  .app__side .logo { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .btn--lg { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .hero__float-cta { display: none; }
  .coach-built { padding: 0 0 28px; }
  .coach-built__panel { padding: 0; }
  .coach-built__top { text-align: center; }
  .coach-built__top h2 { font-size: 1.58rem; }
  .coach-quotes { margin-top: 14px; }
  .coach-quotes__viewport { min-height: 156px; }
  .coach-quote blockquote { font-size: 1.05rem; }
  .footer__legal { margin-left: 0; }
  .price-card {
    border-width: 2.5px;
    border-radius: 18px;
    box-shadow: 7px 8px 0 var(--blue);
  }
  .price-card__head { padding: 28px 24px 14px; }
  .price-card__body { padding: 18px 24px 30px; }
  .price-card__tier { margin-top: 20px; font-size: 1.5rem; }
  .price-card__amount { margin-top: 24px; font-size: 3.35rem; }
  .price-card .checklist { gap: 14px; }
  .price-card .checklist li { font-size: .92rem; }
  .apply-hero { padding-top: 38px; }
  .apply-grid { margin-top: 30px; gap: 28px; }
  .summary-card { padding: 26px 24px; box-shadow: 7px 8px 0 var(--blue); }
  .form-card { padding: 26px 22px; box-shadow: 7px 8px 0 var(--blue); }
  .checkout-form { box-shadow: var(--shadow-soft); }
  .checkout-form__head { margin-bottom: 24px; }
  .connected-system {
    margin-top: 18px;
    padding: 52px 10px 22px;
    border-radius: 26px;
    box-shadow: 8px 9px 0 var(--blue);
  }
  .system-hub { padding-inline: 14px; }
  .system-hub__brand { font-size: 2.25rem; }
  .system-nodes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 4px;
  }
  .system-node,
  .system-node:nth-child(4),
  .system-node:nth-child(5) { grid-column: span 2; }
  .system-node:nth-child(4) { grid-column: 2 / span 2; }
  .system-node:nth-child(5) { grid-column: 4 / span 2; }
  .system-node {
    grid-template-rows: 60px auto;
    gap: 6px;
  }
  .system-node--booking { --system-icon-size: 38px; }
  .system-node--payments { --system-icon-size: 46px; }
  .system-node--clients { --system-icon-size: 57px; }
  .system-node--reminders { --system-icon-size: 51px; }
  .system-node--notes { --system-icon-size: 59px; }
  .system-node span { font-size: .82rem; }
}