/* Feature pages (referrals, intake, pdf-imports, insights), 2026-11-06 refresh.
   Proof strip, before/after, a sticky scroll walkthrough of real app screens,
   a clinic quote, an "included" grid and a three-card next row. */

/* ---------- proof strip (light) ---------- */
.fp-proof { padding-top: 64px; padding-bottom: 20px; }
.fp-proof-label { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 26px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.fp-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fp-proof li { display: grid; gap: 10px; align-content: start; padding: 28px 28px 8px 0; }
.fp-proof li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.fp-proof .hp-num { color: var(--ink); font-size: clamp(52px, 5vw, 76px); }
.fp-proof .hp-num small { color: var(--accent); }
.fp-proof .hp-txt { color: var(--ink-2); font-size: 15px; max-width: 260px; }

/* ---------- before / with Simplify ---------- */
.fp-shift { padding-top: 110px; padding-bottom: 40px; }
.fp-shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.fp-before, .fp-after { border-radius: 24px; padding: 34px 36px 38px; }
.fp-before { background: var(--surface); border: 1px solid var(--line); }
.fp-after { background: var(--green); color: var(--on-green); position: relative; overflow: hidden; }
.fp-after::after { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; background: radial-gradient(closest-side, #d9ec9f26, transparent); pointer-events: none; }
.fp-col-label { margin: 0 0 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.fp-after .fp-col-label { color: var(--accent-dark); }
.fp-shift ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fp-shift li { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; padding: 16px 0; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; }
.fp-after li { border-top-color: #ffffff1f; }
.fp-before li { color: var(--ink-2); }
.fp-before li::before, .fp-after li::before { flex: none; width: 18px; font-family: var(--sans); font-size: 15px; }
.fp-before li::before { content: "–"; color: var(--muted); }
.fp-after li::before { content: "✓"; color: var(--accent-dark); }
.js-motion .fp-after.reveal { transition-delay: .12s; }
.js-motion .fp-shift .reveal li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js-motion .fp-shift .reveal.is-visible li { opacity: 1; transform: none; }
.js-motion .fp-shift .reveal.is-visible li:nth-child(1) { transition-delay: .25s; }
.js-motion .fp-shift .reveal.is-visible li:nth-child(2) { transition-delay: .35s; }
.js-motion .fp-shift .reveal.is-visible li:nth-child(3) { transition-delay: .45s; }

/* ---------- sticky walkthrough ---------- */
.fp-walk { padding-top: 110px; padding-bottom: 60px; }
.fp-walk-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); margin-top: 40px; }
.fp-stage { position: sticky; top: calc(var(--nav-h) + var(--nav-top) + 110px); height: min(64vh, 580px); border-radius: 28px; background: radial-gradient(70% 60% at 70% 20%, #d9ec9f55, transparent 70%), linear-gradient(160deg, #2d5e4c, #173e35); overflow: hidden; box-shadow: 0 40px 90px -50px #173e35aa; }
.fp-stage-count { position: absolute; top: 22px; left: 26px; z-index: 3; margin: 0; font-size: 12px; letter-spacing: .14em; font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.fp-frame { position: absolute; inset: 56px 36px 36px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.fp-frame.is-active { opacity: 1; transform: none; }
.fp-frame > img, .fp-step-media > img { display: block; min-height: 0; object-fit: contain; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 16px; background: #f6f5f0; box-shadow: 0 30px 70px -28px #000b, 0 0 0 1px #ffffff2b; }
.fp-frame .fx-phone { height: 100%; width: auto; max-width: 260px; }
.fp-frame .fx-phone img { max-height: 100%; }
.fp-steps { display: grid; }
.fp-step { min-height: min(68vh, 600px); display: grid; align-content: center; padding: 24px 0; opacity: .32; transition: opacity .5s var(--ease-out); }
.fp-step.is-active { opacity: 1; }
.fp-step h3 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.01em; }
.fp-step h3 em { color: var(--accent); }
.fp-step > p:not(.eyebrow) { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 440px; }
.fp-step-media { display: none; }

/* no JS: no sticky stage, each step carries its own picture */
html:not(.js) .fp-stage { display: none; }
html:not(.js) .fp-walk-grid { grid-template-columns: 1fr; }
html:not(.js) .fp-step { opacity: 1; min-height: 0; }
html:not(.js) .fp-step-media { display: grid; }

/* ---------- quote ---------- */
.fp-quote { padding-top: 90px; padding-bottom: 40px; }
.fp-quote figure { margin: 0; padding: clamp(40px, 6vw, 80px) clamp(28px, 6vw, 96px); border-radius: 28px; background: var(--panel); text-align: center; }
.fp-quote blockquote { margin: 0 auto; max-width: 900px; font-family: var(--serif); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); }
.fp-quote blockquote em { color: var(--accent); }
.fp-quote figcaption { margin-top: 28px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.fp-quote figcaption strong { color: var(--ink); font-weight: 600; }

/* ---------- included grid ---------- */
.fp-included { padding-top: 110px; padding-bottom: 40px; }
.fp-inc-grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-inc-grid li { padding: 28px 28px 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: border-color var(--t-ui), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.fp-inc-grid li:hover { border-color: #b9c9b2; box-shadow: 0 22px 50px -30px #3e523a55; transform: translateY(-2px); }
.fp-ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--lime); color: var(--green); }
.fp-inc-grid h3 { margin: 20px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.fp-inc-grid p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fp-inc-cta { margin-top: 26px; }

/* ---------- next row ---------- */
.fp-next { padding-top: 40px; }
.fp-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.fp-next-grid .next-card { height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .fp-proof ul, .fp-next-grid { grid-template-columns: 1fr; }
  .fp-proof li, .fp-proof li + li { padding: 22px 0 18px; border-left: 0; border-bottom: 1px solid var(--line); }
  .fp-shift-grid { grid-template-columns: 1fr; }
  .fp-walk-grid { grid-template-columns: 1fr; gap: 0; }
  .fp-stage { display: none; }
  .fp-step { min-height: 0; opacity: 1; padding: 34px 0; border-top: 1px solid var(--line); }
  .fp-step-media { display: grid; place-items: center; margin-top: 26px; padding: 26px 18px; border-radius: 22px; background: linear-gradient(160deg, #2d5e4c, #173e35); }
  .fp-step-media .fx-phone { width: 210px; }
  .fp-inc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .fp-inc-grid { grid-template-columns: 1fr; }
  .fp-before, .fp-after { padding: 26px 22px 28px; }
  .fp-shift, .fp-walk, .fp-included { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-frame, .fp-step, .fp-inc-grid li { transition: none; }
  .js-motion .fp-shift .reveal li { opacity: 1; transform: none; transition: none; }
}
.fp-paths { padding-top: 110px; padding-bottom: 20px; }

/* ---------- designed hero compositions (site fonts, phone-friendly) ---------- */
.hz { position: relative; display: block; width: 100%; max-width: 500px; margin-inline: auto; padding: 54px 34px 70px; }
.hz::before { content: ""; position: absolute; inset: 0 -6%; background: radial-gradient(55% 50% at 60% 40%, #d9ec9f3a, transparent 70%), radial-gradient(40% 40% at 15% 85%, #8fd3b42a, transparent 70%); filter: blur(8px); pointer-events: none; }
.hz > * { position: relative; }
.hz .fs-card { max-width: none; box-shadow: 0 40px 80px -36px #000c, 0 0 0 1px #ffffff26; }
.hz-main { padding: 22px 22px 10px; }
.hz-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #eef1ea; }
.hz-row:last-child { border-bottom: 0; }
.hz-row strong { display: block; font-size: 14.5px; }
.hz-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.hz-row .status { font-size: 11px; white-space: nowrap; }
.hz-dots { display: flex; align-items: center; gap: 0; margin-top: 8px; width: 120px; }
.hz-dots i { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #c8d4c2; background: #fff; }
.hz-dots i + i { margin-left: 26px; }
.hz-dots i + i::before { content: ""; position: absolute; right: 100%; top: 2.5px; width: 27px; height: 1.5px; background: #dfe6d8; margin-right: 1px; }
.hz-dots i.on { background: var(--green); border-color: var(--green); }
.hz-dots i.on + i::before { background: var(--green); }
.hz-dots i.cur { border-color: var(--green); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px var(--green); }
.hz-float { position: absolute; z-index: 2; }
.hz-tr { top: 0; right: -6px; } .hz-tl { top: 0; left: -10px; } .hz-bl { bottom: 0; left: -8px; } .hz-br { bottom: 6px; right: -6px; }
.hz-chip { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 50px -20px #000c, 0 0 0 1px #ffffff40; }
.hz-chip .fp-ico { width: 36px; height: 36px; padding: 8px; }
.hz-chip strong { display: block; font-size: 13.5px; } .hz-chip small { display: block; font-size: 12px; color: var(--muted); }
.hz-chip-ok .fp-ico { background: var(--ok-bg); color: var(--ok); }
.hz-chip-wait .fp-ico { background: var(--wait-bg); color: var(--wait); }
.hz-dark { width: 230px; padding: 16px 18px 8px; border-radius: 16px; background: #0f2a22; color: var(--on-green); box-shadow: 0 24px 50px -20px #000d, 0 0 0 1px #d9ec9f40; }
.hz-dark p { margin: 0; display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; border-top: 1px solid #ffffff1a; }
.hz-dark p span { color: var(--on-green-2); font-size: 12px; }
.hz-dark .hz-dark-k { border-top: 0; padding-top: 0; font-family: var(--serif); font-size: 20px; align-items: center; }
.hz-dark .hz-dark-k b { font-family: var(--sans); font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--lime); color: var(--green); }
/* phone */
.hz-phone { width: 270px; margin-inline: auto; padding: 18px 18px 22px; border-radius: 34px; background: var(--surface); color: var(--ink); border: 8px solid #0f2a22; box-shadow: 0 40px 80px -36px #000c, 0 0 0 1px #ffffff26; }
.hz-phone-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hz-phone-top strong { display: block; font-size: 13.5px; } .hz-phone-top small { display: block; font-size: 11.5px; color: var(--muted); }
.hz-phone-title { margin: 16px 0 0; font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.hz-phone-sub { margin: 0; font-size: 12px; color: var(--muted); }
.hz-time { margin: 14px 0 8px; text-align: center; font-size: 11px; color: var(--muted); }
.hz-bubble { margin: 0 0 8px; padding: 11px 13px; border-radius: 16px 16px 16px 4px; background: #e1e8d8; font-size: 13.5px; line-height: 1.45; }
.hz-link { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--green); color: #f3f6e6; font-size: 13px; font-weight: 600; }
.hz-main-phone { width: 290px; }
/* pdf */
.hz-pdf { max-width: none; grid-template-columns: 110px minmax(0, 1fr); }
.hz-pdf .fs-page { box-shadow: 0 30px 60px -28px #000c; }
.hz-review .fs-btn { text-align: center; }
/* walkthrough designed pieces */
.fp-frame > .fs-card, .fp-step-media > .fs-card { width: 100%; max-width: 380px; box-shadow: 0 30px 70px -28px #000b, 0 0 0 1px #ffffff2b; }
.fp-frame > .hz-phone, .fp-step-media > .hz-phone { width: 260px; }
.hz-drop { padding: 18px; }
.hz-drop-zone { display: grid; justify-items: center; gap: 6px; padding: 24px 12px; border-radius: 14px; border: 1.5px dashed #b9c9b2; background: var(--panel); text-align: center; }
.hz-drop-zone strong { font-size: 14.5px; } .hz-drop-zone small { font-size: 12px; color: var(--muted); }
.hz-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.hz-files li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eef1ea; font-size: 13px; }
.hz-files li:last-child { border-bottom: 0; }
.hz-files .fp-ico { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.hz-files span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-files .status { font-size: 11px; }
.hz-year { width: 100%; max-width: 380px; padding: 22px 22px 18px; border-radius: 18px; background: #0f2a22; color: var(--on-green); box-shadow: 0 30px 70px -28px #000b, 0 0 0 1px #d9ec9f33; }
.hz-year-k { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; }
.hz-year-n { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.hz-year-n b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.hz-year-n small { font-size: 12px; color: var(--on-green-2); }
.hz-year-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 110px; margin: 18px 0 14px; padding-top: 10px; border-top: 1px solid #ffffff1a; }
.hz-year-bars i { height: var(--h); min-height: 5px; border-radius: 4px; background: #6f9d89; }
.hz-year-bars i:last-child { background: var(--lime); }
.hz-year-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid #ffffff1a; }
.hz-year-foot small { display: block; font-size: 11.5px; color: var(--on-green-2); } .hz-year-foot b { font-size: 14px; }
.fp-walk-note { margin: 20px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.fp-process { padding-top: 70px; }
/* hero motion: main first, floats after */
.js .hz > :not(.hz-float) { animation: psIn .8s .35s var(--ease-out) both; }
.js .hz > .hz-float:nth-of-type(1), .js .hz > .hz-float:first-of-type { animation: psIn .8s .8s var(--ease-out) both; }
.js .hz > .hz-float ~ .hz-float { animation: psIn .8s 1.1s var(--ease-out) both; }
@media (max-width: 640px) {
  .hz { padding: 50px 6px 64px; max-width: 360px; }
  .hz-tr, .hz-br { right: -4px; } .hz-tl, .hz-bl { left: -4px; }
  .hz-chip { padding: 10px 14px 10px 10px; } .hz-chip strong { font-size: 12.5px; } .hz-chip small { font-size: 11px; }
  .hz-chip .fp-ico { width: 30px; height: 30px; padding: 6px; }
  .hz-dark { width: 200px; }
  .hz-row .status { display: none; }
  .hz-pdf { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .hz-main-phone { width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .js .hz > * { animation: none !important; } }

/* walkthrough tracker: sticky only while the walkthrough is on screen, and it
   fills in as the steps change (feature-page.js) */
.fp-walk { position: relative; }
.fp-walk-tracker { margin-top: 34px; }
.fp-walk .fp-walk-grid { margin-top: 40px; }

/* hero "where it is now" chip, live text instead of a scaled screenshot */
.ps-chip { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 18px; padding: 14px 20px; background: #0f2a22; color: var(--on-green); width: auto !important; min-width: 300px; }
.ps-chip-k { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--accent-dark); }
.ps-chip strong { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; margin-top: 2px; }
.ps-chip-n { font-size: 12px; color: var(--on-green-2); white-space: nowrap; }
@media (max-width: 640px) { .ps-chip { min-width: 0; padding: 11px 14px; } .ps-chip strong { font-size: 18px; } }

/* next row: three equal cards, names on one line where they fit */
.fp-next-grid .next-card { align-items: center; }
.fp-next-grid .next-name { font-size: clamp(28px, 2.3vw, 36px); white-space: nowrap; }
@media (max-width: 1100px) { .fp-next-grid .next-name { white-space: normal; } }

/* phones: keep wide walkthrough pieces inside the column */
.fp-steps, .fp-step { min-width: 0; }
.fp-step-media > * { max-width: 100%; }
@media (max-width: 900px) {
  .fp-walk-grid { grid-template-columns: minmax(0, 1fr); }
  .fp-step-media .mock-card, .fp-step-media .fs-card { width: 100%; max-width: 340px; }
  .fp-step-media .hz-phone { width: min(260px, 100%); }
}

/* ---------- app screenshots in one shared window frame (2026-11-09) ----------
   A slim title bar, an inner margin in the app's own background so cropped
   edges sit inside the window, and a soft fade on long crops. */
.shot { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; border-radius: 16px; overflow: hidden; background: #f6f5f0; box-shadow: 0 34px 80px -34px #000b, 0 0 0 1px #ffffff30; }
.shot::before { content: attr(data-title); flex: none; display: flex; align-items: center; height: 34px; padding: 0 16px 0 64px; font: 600 12px/1 var(--sans); letter-spacing: .01em; color: #5d6b63; border-bottom: 1px solid #e6e9e0; background:
  radial-gradient(circle 4.5px at 18px 17px, #d6ddd1 98%, transparent) ,
  radial-gradient(circle 4.5px at 33px 17px, #d6ddd1 98%, transparent),
  radial-gradient(circle 4.5px at 48px 17px, #d6ddd1 98%, transparent),
  #fdfcf8; }
.shot img, .fp-frame .shot > img, .fp-step-media .shot > img, .p-shot .shot img, .ps-base.shot img { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: contain; object-position: top center; padding: 14px; border-radius: 0; background: #f6f5f0; box-shadow: none; }
.shot--fade img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }
.fp-frame > .shot { width: auto; }
.ps-base.shot { border-radius: 18px; }
.ps-b.shot { width: 60%; }
.ps-b.shot img { padding: 8px; }
.ps-b.shot::before { height: 26px; font-size: 10.5px; padding-left: 50px; }
.ps-b.shot::before { background: radial-gradient(circle 3.5px at 14px 13px, #d6ddd1 98%, transparent), radial-gradient(circle 3.5px at 25px 13px, #d6ddd1 98%, transparent), radial-gradient(circle 3.5px at 36px 13px, #d6ddd1 98%, transparent), #fdfcf8; }
@media (max-width: 640px) { .shot img { padding: 8px; } .shot::before { height: 28px; font-size: 11px; } }

/* ---------- coming soon (intake: insurance verification + pre-authorization) ---------- */
.fp-soon { padding-top: 90px; }
.fp-soon-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(34px, 5vw, 64px); border-radius: 28px; background: var(--green); color: var(--on-green); }
.fp-soon-card::after { content: ""; position: absolute; inset: -40% -10% auto 45%; height: 140%; background: radial-gradient(closest-side, #d9ec9f22, transparent); pointer-events: none; }
.fp-soon-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 99px; background: #d9ec9f1f; border: 1px solid #d9ec9f55; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.fp-soon-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #d9ec9f2e; }
.fp-soon h2 { margin: 20px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.01em; color: #f3f6e6; }
.fp-soon h2 em { color: var(--accent-dark); }
.fp-soon-copy > p:not(.fp-soon-tag) { margin: 18px 0 22px; max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--on-green-2); }
.fp-soon .arrow-link { color: #f3f6e6; border-color: #f3f6e655; }
.fp-soon-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fp-soon-list li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 18px; background: #ffffff0d; border: 1px solid #ffffff1f; }
.fp-soon-list .fp-ico { flex: none; background: var(--lime); color: var(--green); }
.fp-soon-list h3 { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: #f3f6e6; }
.fp-soon-list p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--on-green-2); }
@media (max-width: 900px) { .fp-soon-card { grid-template-columns: minmax(0, 1fr); } }

/* ---------- referring offices page ---------- */
.ro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ro-hero-link { display: inline-flex; align-items: center; gap: 8px; color: #f3f6e6; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid #f3f6e655; padding-bottom: 2px; }
.ro-hero-link .i { width: 16px; height: 16px; }
.ro-how { padding-top: 110px; }
.ro-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: ro; }
.ro-steps li { position: relative; padding: 30px 28px 32px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.ro-steps li + li::before { content: ""; position: absolute; top: 52px; left: -17px; width: 18px; height: 1.5px; background: var(--line); }
.ro-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--lime); font-family: var(--serif); font-size: 22px; }
.ro-steps h3 { margin: 22px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; }
.ro-steps p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.ro-how-cta { margin-top: 28px; }
.ro-share { padding-top: 90px; }
.ro-share-card { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 26px; background: var(--panel); border: 1px solid var(--line); }
.ro-share-card h2 { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.05; }
.ro-share-card h2 em { color: var(--accent); }
.ro-share-card p:not(.eyebrow) { margin: 12px 0 0; max-width: 520px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.ro-share-actions { display: grid; gap: 16px; justify-items: start; }
.ro-copy { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ro-copy-ico { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .ro-steps { grid-template-columns: minmax(0, 1fr); }
  .ro-steps li + li::before { display: none; }
  .ro-share-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- customer story ---------- */
.st-glance { width: 100%; max-width: 440px; margin-inline: auto; padding: 28px 30px 18px; border-radius: 22px; background: #0f2a22; color: var(--on-green); box-shadow: 0 40px 80px -36px #000c, 0 0 0 1px #d9ec9f33; }
.st-glance-k { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--accent-dark); }
.st-glance dl { margin: 0; }
.st-glance dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid #ffffff1a; }
.st-glance dt { font-size: 13px; color: var(--on-green-2); }
.st-glance dd { margin: 0; font-size: 15px; color: #f3f6e6; }
.st-chapter { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-top: 100px; }
.st-label { position: sticky; top: calc(var(--nav-h) + var(--nav-top) + 40px); align-self: start; display: grid; gap: 10px; }
.st-n { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--line); }
.st-text { max-width: 720px; }
.st-text h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.01em; }
.st-text h2 em { color: var(--accent); }
.st-text > p { margin: 22px 0 0; font-size: 18.5px; line-height: 1.7; color: var(--ink-2); }
.st-pull { margin: 40px 0 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--lime); }
.st-pull blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; color: var(--ink); }
.st-pull blockquote em { color: var(--accent); }
.st-pull figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 900px) {
  .st-chapter { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 70px; }
  .st-label { position: static; display: flex; align-items: baseline; gap: 14px; }
  .st-n { font-size: 40px; }
  .st-glance dl > div { grid-template-columns: 110px minmax(0, 1fr); }
}
.p-hero-visual.st-glance { display: block; }
.st-shots { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; margin-top: 70px; padding: clamp(26px, 4vw, 48px); border-radius: 28px; background: radial-gradient(70% 60% at 70% 20%, #d9ec9f40, transparent 70%), linear-gradient(160deg, #2d5e4c, #173e35); }
.st-shots .fx-phone { width: min(240px, 100%); margin-inline: auto; }
.st-shots figcaption { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; color: var(--on-green-2); text-align: center; }
@media (max-width: 700px) { .st-shots { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PDF hero: a faxed letter being scanned, details filling in (2026-11-09) ----------
   One 9s loop. The beam sweeps the letter; each row lights as it passes and the
   matching field fills in on the card. Reduced motion: everything shown, no beam. */
.scan { --loop: 9s; position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 18px 0 30px; display: grid; grid-template-columns: minmax(0, 1fr); }
.scan::before { content: ""; position: absolute; inset: 0 -8%; background: radial-gradient(55% 50% at 35% 40%, #d9ec9f33, transparent 70%); filter: blur(10px); pointer-events: none; }
.sc-doc { position: relative; width: 74%; padding: 22px 24px 26px; border-radius: 6px; background: #fbfaf4; color: #2b2b28; font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 34px 70px -30px #000c, 0 0 0 1px #00000010; transform: rotate(-2.5deg); overflow: hidden; }
.sc-doc::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #0000 0 3px, #00000006 3px 4px); pointer-events: none; }
.sc-fax { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid #c9c6ba; font: 9.5px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #6b6a63; }
.sc-from { margin: 0; font-size: 19px; font-weight: 700; }
.sc-addr { margin: 2px 0 12px; font-size: 10.5px; color: #66655f; }
.sc-title { margin: 0 0 10px; padding: 6px; border: 1.5px solid #3a3a36; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sc-table { border: 1px solid #8f8d84; }
.sc-row { display: grid; grid-template-columns: 38% 62%; font-size: 11.5px; transition: background .3s; }
.sc-row + .sc-row { border-top: 1px solid #b7b4a9; }
.sc-row span { padding: 6px 8px; }
.sc-row span:first-child { background: #00000008; border-right: 1px solid #b7b4a9; font-weight: 700; font-size: 10.5px; }
.sc-sig { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 0; padding-top: 8px; border-top: 1px solid #8f8d84; font-size: 10px; color: #66655f; }
.sc-beam { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(180deg, #d9ec9f00, #d9ec9f55 70%, #b6d86a); box-shadow: 0 2px 18px 2px #c8e27c99; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.sc-beam::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #8fb23a; }
.sc-card { position: relative; z-index: 2; width: 62%; justify-self: end; margin-top: -42%; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 34px 70px -28px #000d, 0 0 0 1px #ffffff40; }
.sc-card-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; color: var(--muted); }
.sc-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fb58f; box-shadow: 0 0 0 3px #7fb58f33; }
.sc-card-t { margin: 6px 0 8px; font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.sc-field { display: grid; gap: 1px; padding: 7px 10px; margin-top: 6px; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.sc-field span { font-size: 10.5px; color: var(--muted); }
.sc-field b { font-weight: 500; font-size: 13px; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ready { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--green); color: #f3f6e6; font-size: 12.5px; font-weight: 600; }
.sc-ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--green); font-size: 11px; }

/* motion */
@keyframes scBeam { 0% { top: 4%; opacity: 0; } 4% { opacity: 1; } 40% { top: 88%; opacity: 1; } 45%, 100% { top: 88%; opacity: 0; } }
@keyframes scRow { 0% { background: #0000; } 3% { background: #d9ec9f99; } 30% { background: #d9ec9f44; } 80%, 100% { background: #0000; } }
@keyframes scFill { 0% { opacity: 0; transform: translateY(4px); filter: blur(3px); } 4% { opacity: 1; transform: none; filter: none; } 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes scFieldEdge { 0% { border-color: var(--line); } 3% { border-color: #9fc06a; box-shadow: 0 0 0 3px #d9ec9f66; } 25%, 100% { border-color: var(--line); box-shadow: none; } }
.js-motion .sc-beam { animation: scBeam var(--loop) linear 1.2s infinite; }
.js-motion .sc-row { animation: scRow var(--loop) ease-out infinite; animation-delay: calc(1.2s + .75s + var(--i) * .5s); }
.js-motion .sc-field b { opacity: 0; animation: scFill var(--loop) var(--ease-out) infinite; animation-delay: calc(1.2s + .95s + var(--i) * .5s); }
.js-motion .sc-field { animation: scFieldEdge var(--loop) ease-out infinite; animation-delay: calc(1.2s + .95s + var(--i) * .5s); }
.js-motion .sc-ready { opacity: 0; animation: scFill var(--loop) var(--ease-out) infinite; animation-delay: calc(1.2s + 3.9s); }
@media (prefers-reduced-motion: reduce) {
  .js-motion .sc-beam { animation: none; opacity: 0; }
  .js-motion .sc-row, .js-motion .sc-field, .js-motion .sc-field b, .js-motion .sc-ready { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
  .sc-doc { width: 82%; padding: 16px 16px 18px; }
  .sc-row { font-size: 10.5px; } .sc-row span:first-child { font-size: 9.5px; }
  .sc-card { width: 72%; margin-top: -38%; padding: 14px 14px 12px; }
  .sc-card-t { font-size: 20px; }
  .sc-field b { font-size: 12px; }
}
/* scan hero, round 2: letter stays readable, card overlaps only its corner */
.scan { max-width: 600px; }
.sc-doc { width: 66%; }
.sc-card { width: 54%; margin-top: -24%; }
.sc-fax span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .sc-doc { width: 86%; }
  .sc-card { width: 76%; margin-top: -14%; }
  .sc-fax { font-size: 8.5px; }
  .sc-addr { display: none; }
}

/* ---------- Animated heroes for referrals / intake / insights / referring offices (2026-11-09) ----------
   Same pattern as the scan hero: one loop per hero (--loop), each element offset by
   animation-delay. Reduced motion shows the finished state. Illustrations, sample data only. */
.anim { --loop: 10s; position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 18px 0 30px; display: grid; grid-template-columns: minmax(0, 1fr); }
.anim::before { content: ""; position: absolute; inset: 0 -8%; background: radial-gradient(55% 50% at 40% 40%, #d9ec9f2e, transparent 70%); filter: blur(10px); pointer-events: none; }
.an-card { position: relative; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 34px 70px -30px #000c, 0 0 0 1px #ffffff30; overflow: hidden; }
.an-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f6f5f0; font-size: 11.5px; color: var(--muted); }
.an-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9d6cb; }
.an-bar b { margin-left: 8px; font-weight: 600; color: var(--ink-2); }
.an-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 18px 6px; }
.an-title { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.an-sub { font-size: 11.5px; color: var(--muted); }
.an-float { position: relative; z-index: 2; justify-self: end; display: grid; gap: 2px; margin: -34px -4% 0 0; padding: 12px 16px; border-radius: 14px; background: var(--green); color: #f3f6e6; box-shadow: 0 24px 50px -20px #000d, 0 0 0 1px #ffffff26; }
.an-float-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-green-2); }
.an-float strong { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
.an-float-n { font-size: 11.5px; color: var(--on-green-2); }
.an-stack { display: grid; }
.an-stack > * { grid-area: 1 / 1; }
@keyframes anIn { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes anFade { 0% { opacity: 0; } 3% { opacity: 1; } 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* Referrals: a new referral arrives and moves through the journey */
.rf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); }
.rf-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dfe9e1; color: var(--green); font-size: 11.5px; font-weight: 700; }
.rf-who { min-width: 0; }
.rf-who b { display: block; font-weight: 600; font-size: 14px; }
.rf-who span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-pill { justify-self: end; padding: 4px 10px; border-radius: 999px; background: #eef1e6; color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rf-pill--ready { background: var(--green); color: #f3f6e6; }
.rf-new { position: relative; background: #fbfdf3; }
.rf-new .rf-av { background: var(--lime); }
.rf-new .an-stack { justify-items: end; }
.rf-track { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -2px; }
.rf-track i { height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.rf-track i::after { content: ""; position: absolute; inset: 0; background: #7fb58f; transform: scaleX(1); transform-origin: left; }
.rf-tag { position: absolute; left: 18px; top: -9px; padding: 1px 7px; border-radius: 6px; background: #b6d86a; color: var(--green); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.js-motion .rf-new { animation: anIn var(--loop) var(--ease-out) .6s infinite both; }
.js-motion .rf-new .rf-pill { opacity: 0; animation: rfStage var(--loop) ease-out infinite; animation-delay: calc(.6s + var(--i) * 1.9s); }
.js-motion .rf-new .rf-pill:last-child { animation-name: rfStageLast; }
.js-motion .rf-track i::after { transform: scaleX(0); animation: rfSeg var(--loop) var(--ease-out) infinite; animation-delay: calc(.6s + var(--i) * 1.9s); }
.js-motion .rf .an-float { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: calc(.6s + 3 * 1.9s + .4s); }
@keyframes rfStage { 0% { opacity: 0; transform: translateY(5px); } 3% { opacity: 1; transform: none; } 18% { opacity: 1; } 19.5%, 100% { opacity: 0; } }
@keyframes rfStageLast { 0% { opacity: 0; transform: translateY(5px); } 3% { opacity: 1; transform: none; } 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes rfSeg { 0% { transform: scaleX(0); } 5% { transform: scaleX(1); } 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Intake: the patient's forms fill in on their phone */
.in { justify-items: center; }
.in-phone { position: relative; width: 250px; border-radius: 36px; padding: 9px; background: #0f2a22; box-shadow: 0 30px 70px -28px #000c, 0 0 0 1px #ffffff2e; }
.in-screen { position: relative; border-radius: 28px; background: var(--surface); color: var(--ink); padding: 26px 16px 18px; min-height: 440px; overflow: hidden; }
.in-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 70px; height: 6px; margin-left: -35px; border-radius: 6px; background: #0f2a2222; }
.in-k { margin: 0; font-size: 10.5px; color: var(--muted); }
.in-t { margin: 3px 0 10px; font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.in-prog { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.in-prog i { display: block; height: 100%; background: #7fb58f; transform-origin: left; }
.in-pct { display: flex; justify-content: space-between; margin: 5px 0 10px; font-size: 10.5px; color: var(--muted); }
.in-sec { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 7px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.in-sec b { font-size: 13px; font-weight: 600; display: block; }
.in-sec small { display: block; font-size: 10.5px; color: var(--muted); }
.in-ring { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c8d2c4; }
.in-ring::after { content: "✓"; position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 50%; background: #7fb58f; color: #fff; font-size: 12px; font-weight: 700; }
.in-sig { display: block; width: 100%; height: 26px; margin-top: 2px; }
.in-sig path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 0; }
.in-done { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--green); color: #f3f6e6; font-size: 12.5px; font-weight: 600; }
.in-done .sc-ok { flex: none; }
.in .an-float { justify-self: end; margin: -120px 0 0 0; }
.js-motion .in-prog i { animation: inProg var(--loop) var(--ease-out) .8s infinite; }
.js-motion .in-sec { animation: inSec var(--loop) ease-out infinite; animation-delay: calc(.8s + var(--i) * 1.5s); }
.js-motion .in-ring::after { opacity: 0; animation: inTick var(--loop) var(--ease-out) infinite; animation-delay: calc(.8s + var(--i) * 1.5s + 1.2s); }
.js-motion .in-sig path { animation: inSig var(--loop) ease-in-out infinite; animation-delay: calc(.8s + 3 * 1.5s + .1s); }
.js-motion .in-done { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: calc(.8s + 4 * 1.5s + .2s); }
.js-motion .in .an-float { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: calc(.8s + 4 * 1.5s + .9s); }
@keyframes inProg { 0% { transform: scaleX(.04); } 12% { transform: scaleX(.25); } 27% { transform: scaleX(.5); } 42% { transform: scaleX(.75); } 57%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(.04); } }
@keyframes inSec { 0% { border-color: var(--line); box-shadow: none; } 2% { border-color: #9fc06a; box-shadow: 0 0 0 3px #d9ec9f66; } 12% { border-color: #9fc06a; box-shadow: 0 0 0 3px #d9ec9f66; } 15%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes inTick { 0% { opacity: 0; transform: scale(.4); } 3% { opacity: 1; transform: none; } 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes inSig { 0% { stroke-dashoffset: 220; } 11% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; } 86%, 100% { stroke-dashoffset: 220; } }

/* Insights: referring offices, this month's counts grow, one goes quiet */
.ig-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 18px; border-top: 1px solid var(--line); }
.ig-row .rf-av { width: 32px; height: 32px; font-size: 11px; }
.ig-name b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.1; }
.ig-name span { display: block; font-size: 11px; color: var(--muted); }
.ig-n { font-family: var(--serif); font-size: 26px; line-height: 1; }
.ig-bar { grid-column: 2 / -1; height: 5px; border-radius: 5px; background: #eceee6; overflow: hidden; }
.ig-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--c, var(--green)); transform-origin: left; }
.ig-quiet { position: relative; }
.ig-tag { justify-self: end; padding: 3px 9px; border-radius: 999px; background: #f7e4c6; color: #6b4a14; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ig-quiet .an-stack { justify-items: end; align-items: center; }
.js-motion .ig-bar i { animation: igGrow var(--loop) var(--ease-out) infinite; animation-delay: calc(.6s + var(--i) * .35s); }
.js-motion .ig-quiet { animation: igQuiet var(--loop) ease-out infinite; animation-delay: 3.6s; }
.js-motion .ig-tag { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: 3.6s; }
.js-motion .ig-quiet .ig-n { animation: igHide var(--loop) ease-out infinite; animation-delay: 3.6s; }
.js-motion .ig .an-float { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: 4.6s; }
@keyframes igGrow { 0% { transform: scaleX(0); } 12% { transform: scaleX(1); } 88% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes igQuiet { 0% { background: #0000; } 3%, 50% { background: #fdf6ea; } 58%, 100% { background: #0000; } }
@keyframes igHide { 0% { opacity: 1; } 3%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }

/* Referring offices: the free form fills in and sends */
.ro-f { padding: 4px 18px 18px; }
.ro-fl { display: grid; gap: 3px; margin-top: 9px; }
.ro-fl > span { font-size: 10.5px; color: var(--muted); }
.ro-in { position: relative; display: flex; align-items: center; min-height: 34px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 13px; }
.ro-in em { font-style: normal; white-space: nowrap; overflow: hidden; }
.ro-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ro-file { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: 9px; border: 1px dashed #b9c4b5; font-size: 12px; color: var(--ink-2); }
.ro-file i { flex: none; width: 24px; height: 28px; border-radius: 3px; background: linear-gradient(160deg, #3c4a44, #1a2420); }
.ro-file span { flex: 1; min-width: 0; }
.ro-file small { display: block; color: var(--muted); font-size: 10.5px; }
.ro-up { display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: #7fb58f; transform-origin: left; }
.ro-send { margin-top: 12px; }
.ro-btn, .ro-sent { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.ro-btn { background: var(--green); color: #f3f6e6; }
.ro-sent { background: #e6f0de; color: var(--green); }
.ro-sent .sc-ok { background: var(--green); color: #f3f6e6; }
.js-motion .ro-type { clip-path: inset(0 100% 0 0); animation: roType var(--loop) steps(14, end) infinite; animation-delay: calc(.7s + var(--i) * .9s); }
.js-motion .ro-fl .ro-in { animation: inSec var(--loop) ease-out infinite; animation-delay: calc(.7s + var(--i) * .9s); }
.js-motion .ro-file { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: 4.4s; }
.js-motion .ro-up { animation: roUp var(--loop) ease-out infinite; animation-delay: 4.4s; }
.js-motion .ro-btn { animation: roBtn var(--loop) ease-out infinite; animation-delay: 6s; }
.js-motion .ro-sent { opacity: 0; animation: anFade var(--loop) ease-out infinite; animation-delay: 6.3s; }
.js-motion .ro .an-float { opacity: 0; animation: anIn var(--loop) var(--ease-out) infinite; animation-delay: 7s; }
@keyframes roType { 0% { clip-path: inset(0 100% 0 0); } 8% { clip-path: inset(0 0 0 0); } 85% { clip-path: inset(0 0 0 0); } 90%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes roUp { 0% { transform: scaleX(0); } 8% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes roBtn { 0% { opacity: 1; transform: none; } 1.5% { transform: scale(.96); } 3% { opacity: 0; transform: none; } 36% { opacity: 0; } 40%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .anim *, .js-motion .anim *::after { animation: none !important; }
  .js-motion .anim .an-float, .js-motion .rf-new .rf-pill:last-child, .js-motion .in-done, .js-motion .ig-tag, .js-motion .ro-file, .js-motion .ro-sent { opacity: 1; }
  .js-motion .rf-new .rf-pill:not(:last-child), .js-motion .ig-quiet .ig-n, .js-motion .ro-btn { opacity: 0; }
  .js-motion .ro-type { clip-path: none; }
  .js-motion .in-ring::after, .js-motion .rf-track i::after { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .an-float { margin-right: 0; }
  .an-title { font-size: 21px; }
  .rf-row, .ig-row { padding-inline: 14px; }
  .in-phone { width: 230px; }
  .in-screen { min-height: 410px; }
  .in .an-float { justify-self: center; margin-top: -40px; }
}
.ro-shot { max-width: 860px; margin: 48px auto 0; }
.ro-shot figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
/* animated heroes, round 2: floating note overlaps only the card's bottom edge */
.an-float { margin: -22px 18px 0 0; }
.in .an-float { position: absolute; right: 0; bottom: 110px; margin: 0; }
@media (max-width: 640px) {
  .an-float { margin-top: -10px; }
  .in .an-float { position: relative; right: auto; bottom: auto; justify-self: center; margin: 14px 0 0; }
}
@media (min-width: 641px) { .in .an-float { right: calc(50% - 125px - 96px); } }