/* MedspAI site styles. Rules for how things should look live in
   .claude/skills/medspai-site-design. Tokens first, then layout, then sections. */

:root {
  --ink: #10201a;          /* headlines, primary button */
  --text: #1e3028;         /* body text */
  --muted: #4d5a50;
  --subtle: #33423a;
  --line: #e8e4dd;
  --brand: #2d6a4f;        /* logo and app details only, never page buttons */
  --chip: #f3f1ec;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wrap: 1264px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: #334155; }
a:hover { color: var(--text); }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }

.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- type ---------- */
.display { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.lede { font-size: 18px; line-height: 1.5; color: var(--muted); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--brand); }

/* ---------- buttons: pills, near-black primary ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 999px; font-size: 16.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-secondary { padding: 0 24px; border: 1px solid #cfcac0; background: #fff; color: var(--ink); }
.btn-secondary:hover { color: var(--ink); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.lift { transition: transform 180ms ease, box-shadow 180ms ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(30, 48, 40, 0.45); }
.lift:active { transform: scale(0.98); }

/* ---------- header ---------- */
:root { --hdr: 72px; }
.site-header-bar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow 200ms ease; }
.site-header-bar.is-scrolled { box-shadow: 0 1px 0 rgba(16, 32, 26, 0.08); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; height: var(--hdr); }
[id] { scroll-margin-top: calc(var(--hdr) + 12px); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: 4px 30px; font-size: 14.5px; }
.nav-link { text-decoration: none; padding: 13px 0; }
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 11px; border-radius: 999px; border: 1px solid #cfcac0; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 200ms ease; }
.nav-menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-menu-panel { position: absolute; right: 0; top: 52px; min-width: 200px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 24px 48px -20px rgba(16, 32, 26, 0.4); display: flex; flex-direction: column; animation: menu-in 180ms var(--ease-out); transform-origin: top right; }
.nav-menu-panel a { padding: 13px 14px; border-radius: 12px; font-size: 16px; text-decoration: none; color: var(--ink); }
.nav-menu-panel a:hover { background: var(--chip); }
@keyframes menu-in { from { opacity: 0; transform: scale(0.96); } }
@media (max-width: 760px) {
  .nav-link { display: none; }
  .nav-menu { display: block; }
  .site-nav { gap: 10px; }
}

/* ---------- footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer-links a { text-decoration: none; padding: 12px 0; }

/* ---------- product scene panels ---------- */
.grain { opacity: 0.75; mix-blend-mode: soft-light; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.scene-panel { container-type: inline-size; }
.scene-inner { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background-color: var(--tint); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%), radial-gradient(100% 90% at 100% 100%, rgba(16, 32, 26, 0.1), rgba(16, 32, 26, 0) 60%); }
.scene-inner > .grain { grid-area: 1 / 1; }

/* ---------- hero ---------- */
.hero { padding-top: 56px; padding-bottom: 50px; display: flex; flex-direction: column; align-items: center; gap: 52px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-title { text-align: center; font-size: clamp(40px, 6.2vw, 86px); line-height: 1.03; font-weight: 700; letter-spacing: -0.038em; color: var(--ink); animation: rise-in 900ms var(--ease-out) both; }
.hero-title[hidden] { display: none; }
.hero-lead { display: block; }
.hero-ends { display: grid; justify-items: center; align-items: start; transition: height 500ms var(--ease-out); }
.hero-end { grid-area: 1 / 1; text-wrap: balance; opacity: 0; transform: translateY(0.35em); transition: opacity 480ms ease, transform 620ms var(--ease-out); }
.hero-end.is-on { opacity: 1; transform: none; }
.hero-end.is-prev { opacity: 0; transform: translateY(-0.35em); }
.hero-joiner { color: var(--ink); }
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: rise-in 900ms var(--ease-out) 140ms both; }

/* The stage holds four panels in one spot. Wide layout: a 1216x400 design
   scaled down to the page width (site.js sets --s). Below 968px the stacked
   phone layout is shown instead. */
.hero-stage { --s: 1; width: 100%; max-width: 1216px; display: grid; overflow: hidden; border-radius: calc(32px * var(--s)); aspect-ratio: 1216 / 400; animation: stage-in 1100ms var(--ease-out) 200ms both; }
.hero-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 760ms var(--ease-out); pointer-events: none; }
.hero-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hero-frame { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: hidden; text-align: left; color: var(--text); background-color: var(--tint); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%), radial-gradient(100% 90% at 100% 100%, rgba(16, 32, 26, 0.1), rgba(16, 32, 26, 0) 60%); }
.hero-frame > .grain { grid-area: 1 / 1; align-self: stretch; }
.hero-frame--wide { width: 1216px; height: 400px; padding: 24px 40px; border-radius: 32px; transform: scale(var(--s)); transform-origin: top left; }
.hero-frame--wide > .grain { margin: -24px -40px; }
.hero-frame--phone { display: none; height: 566px; padding: 16px; border-radius: 26px; }
.hero-frame--phone > .grain { margin: -16px; }
@media (max-width: 967px) {
  .hero-stage { aspect-ratio: auto; height: 566px; border-radius: 26px; }
  .hero-frame--wide { display: none; }
  .hero-frame--phone { display: grid; }
}

/* ---------- tabs ---------- */
.showcase-section { padding-top: 90px; padding-bottom: 130px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.showcase-section > .display { max-width: 900px; text-align: center; }
.showcase { width: 100%; max-width: 1180px; container-type: inline-size; display: flex; flex-direction: column; gap: 26px; min-height: 640px; }
.showcase-subs { display: grid; justify-items: center; text-align: center; min-height: 58px; max-width: 640px; margin: 0 auto; padding: 0 8px; font-size: clamp(18px, 2.2cqw, 22px); line-height: 1.35; color: var(--subtle); }
/* Tab changes cross-fade like Clay's: the old line and picture fade out, then
   the new ones fade in, slow enough that you see it change. */
.showcase-sub { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 0s linear 450ms; }
.showcase-sub.is-on { opacity: 1; visibility: visible; transition: opacity 700ms ease 350ms, visibility 0s; }
.tabrow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px; justify-content: safe center; scrollbar-width: none; }
.tabrow::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; scroll-snap-align: center; height: 52px; padding: 0 22px; border: 0; border-radius: 16px; font-size: 17px; font-weight: 500; white-space: nowrap; background: var(--chip); color: var(--muted); cursor: pointer; transition: background 220ms ease, color 220ms ease, transform 160ms ease; }
.tab:hover { transform: translateY(-1px); }
.tab:active { transform: scale(0.97); }
.tab.is-on { background: var(--pill); color: var(--ink); }
.showcase-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.showcase-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(0.99); transition: opacity 450ms ease, transform 450ms ease, visibility 0s linear 450ms; }
.showcase-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 700ms ease 350ms, transform 900ms var(--ease-out) 350ms, visibility 0s; }
.showcase-panel .scene-inner { height: clamp(600px, calc(900px - 30cqw), 640px); border-radius: 28px; }
/* Tab row as a continuous loop with faded edges. */
.tabloop { position: relative; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.tabloop.is-dragging { cursor: grabbing; }
.tabloop .tabrow { display: flex; gap: 10px; width: max-content; padding: 0; overflow: visible; justify-content: flex-start; will-change: transform; }
.tabloop .tabrow.is-moving { transition: transform 800ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (max-width: 700px) { .tabloop { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); } }

/* ---------- statement and layers ---------- */
.statement { max-width: 1040px; padding-bottom: 90px; text-align: center; }
.layer { display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 28px 80px; padding-bottom: 110px; }
.layer--flip { flex-wrap: wrap; flex-direction: row; }
.layer-text { flex: 1 1 340px; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.layer-media { flex: 1 1 420px; max-width: 600px; min-width: 0; }
.layer-panel .scene-inner { height: clamp(450px, calc(690px - 44cqw), 540px); border-radius: 24px; }
.go { display: flex; align-items: center; gap: 6px; padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--brand); text-decoration: none; }
.go:hover { color: var(--brand); }
.go svg { transition: transform 200ms ease; }
.go:hover svg { transform: translateX(4px); }

.closer { max-width: 1040px; padding-top: 30px; padding-bottom: 130px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.closer .display { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; }
.closer .hero-cta { margin-top: 0; animation: none; }

/* ---------- motion ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes sfade { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 800ms ease, transform 900ms var(--ease-out); }
.js .rv.rv-late { transition-delay: 140ms; }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}



/* ---------- Ask us anything (prompt box, then a short lead step) ---------- */
.ask { max-width: 1140px; padding-top: 10px; padding-bottom: 130px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ask > .display { font-size: clamp(30px, 4.3vw, 56px); }
@media (min-width: 700px) { .ask > .display { white-space: nowrap; } }
.ask-sub { font-size: 18px; line-height: 1.45; color: var(--muted); margin-bottom: 14px; }
.ask-box, .ask-step, .ask-done { width: 100%; max-width: 680px; text-align: left; }
.ask-box { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 26px; }
.ask-box[hidden], .ask-step[hidden], .ask-err[hidden], .ask-done[hidden] { display: none; }
.ask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ask-box textarea { position: relative; z-index: 2; display: block; width: 100%; min-height: 150px; resize: none; padding: 22px 24px; border: 1px solid #ddd8cf; border-radius: 26px; background: transparent; font: inherit; font-size: 18px; line-height: 1.45; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 32, 26, 0.04), 0 18px 40px -28px rgba(16, 32, 26, 0.35); transition: border-color 160ms ease, box-shadow 160ms ease; }
.ask-box textarea:focus { outline: none; border-color: #9fc3b0; box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.1), 0 18px 40px -28px rgba(16, 32, 26, 0.35); }
.ask-ph { position: absolute; z-index: 1; left: 25px; right: 24px; top: 23px; font-size: 18px; line-height: 1.45; color: #93908a; pointer-events: none; transition: opacity 400ms ease; }
.ask-ph.is-out { opacity: 0; }
.ask-box.has-text .ask-ph { display: none; }
.ask-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.ask-tray { display: flex; align-items: center; gap: 8px; margin: 0 22px; padding: 10px; border-radius: 0 0 20px 20px; background: #f3f1ec; }
.ask-chip { height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color 160ms ease, transform 120ms ease; }
.ask-chip:hover { color: var(--ink); }
.ask-chip:active { transform: scale(0.97); }
.ask-send { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 40px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; cursor: pointer; transition: transform 120ms ease; }
.ask-send:active { transform: scale(0.96); }
@media (max-width: 700px) { .ask-tray { flex-wrap: wrap; margin: 0 14px; } .ask-chip { height: 34px; padding: 0 12px; font-size: 13.5px; } }

.ask-step { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; border: 1px solid #e3ded5; border-radius: 26px; background: #fff; box-shadow: 0 18px 40px -28px rgba(16, 32, 26, 0.35); animation: sfade 420ms ease both; }
.ask-quote { align-self: flex-end; max-width: 85%; margin-bottom: 6px; padding: 11px 15px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: #fff; font-size: 16px; line-height: 1.45; }
.ask-step-h { font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.ask-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.ask-f-email { grid-column: 1 / -1; }
@media (max-width: 560px) { .ask-fields { grid-template-columns: minmax(0, 1fr); } }
.ask-fields label { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ask-fields input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #ddd8cf; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.ask-fields input:focus { outline: none; border-color: #9fc3b0; box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1); }
.ask-fields input[aria-invalid="true"] { border-color: #c2410c; }
.ask-err { font-size: 14px; color: #b42318; }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.ask-back { padding: 10px 2px; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ask-fine { font-size: 12.5px; line-height: 1.4; color: #6f6c66; }
.ask-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 24px 30px; border: 1px solid #e3ded5; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 18px 40px -28px rgba(16, 32, 26, 0.35); animation: sfade 420ms ease both; }
.ask-done-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 22px; background: #e8f5ed; color: var(--brand); }
.ask-done-h { font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ask-done-s { font-size: 15px; color: var(--muted); }
.ask-done .btn { margin-top: 8px; }

/* ---------- Platform sections as a stack (Clay-style) ---------- */
.stack { --tab: 58px; --top: 150px; --ph: max(280px, min(500px, calc(100vh - var(--hdr) - var(--top) - (var(--n) * var(--tab)) - 76px))); position: relative; padding-bottom: 110px; }
.stack-mark { height: 0; }
/* The section title stays pinned above the cards while they stack, and
   site.js moves it up with them when the stack leaves. */
.stack-title { position: sticky; top: var(--hdr); z-index: 0; height: var(--top); will-change: transform; }
.stack-title > span { display: flex; align-items: center; justify-content: center; height: var(--top); max-width: 1040px; margin: 0 auto; box-sizing: border-box; padding-bottom: 6px; background: #ffffff; text-align: center; font-size: clamp(34px, 4.4vw, 58px); text-wrap: balance; }
/* Earlier cards are taller by one strip per card after them, so every card
   reaches the end of the stack at the same moment and they leave together. */
/* The swipe-row wrapper for phones must not exist on wider screens: the sticky
   cards need .stack as their parent so the last card can slide all the way up. */
.stack-track { display: contents; }
.stack-card { position: sticky; z-index: 1; top: calc(var(--hdr) + var(--top) + var(--i) * var(--tab)); height: calc(var(--tab) + var(--ph) + 54px + (var(--n) - 1 - var(--i)) * var(--tab)); margin-bottom: 40px; pointer-events: none; }
/* The visible card. The wrapper above is taller (invisible) so every card lets
   go of the stack at the same moment; the face is only as tall as its content. */
.stack-face { height: calc(var(--tab) + var(--ph) + 54px); border-radius: 32px; background: color-mix(in srgb, var(--tint) 14%, #ffffff); border: 1px solid color-mix(in srgb, var(--tint) 35%, #ffffff); box-shadow: 0 -16px 36px -28px rgba(16, 32, 26, 0.3); pointer-events: auto; overflow: hidden; }
.stack-tab { width: 100%; height: var(--tab); display: flex; align-items: center; gap: 14px; padding: 0 26px; border: 0; border-radius: 32px 32px 0 0; background: transparent; font: inherit; text-align: left; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.stack-card.is-covered .stack-tab { opacity: 1; pointer-events: auto; }
.stack-pill { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; background: var(--tint); font-size: 14px; font-weight: 600; color: var(--ink); }
.stack-tab-h { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--muted); }
.stack-num { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.stack-tab:hover .stack-tab-h { color: var(--ink); }
.stack-body { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 28px 80px; padding: 0 48px; height: calc(var(--ph) + 20px); }
.stack-body--flip { flex-direction: row; }
.stack-body .layer-text { flex: 1 1 320px; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.stack-body .layer-media { flex: 1 1 420px; max-width: 600px; min-width: 0; }
.stack-body .layer-panel .scene-inner { height: var(--ph); }
@media (max-width: 899px) {
  .stack-card { position: static; height: auto; margin-bottom: 24px; pointer-events: auto; }
  .stack-face { height: auto; padding: 24px 20px; box-shadow: none; }
  .stack-title { position: static; height: auto; margin: 0; }
  .stack-title > span { height: auto; padding: 0 0 28px; font-size: clamp(30px, 8vw, 40px); }
  .stack-tab { display: none; }
  .stack-body, .stack-body--flip { flex-direction: column; height: auto; padding: 0; gap: 24px; }
  .stack-body .layer-text, .stack-body .layer-media { flex: 0 0 auto; width: 100%; max-width: 600px; }
  .stack-body .layer-panel .scene-inner { height: clamp(450px, calc(690px - 44cqw), 540px); }
  .stack { padding-bottom: 60px; }
  .stack-card + .stack-mark + .stack-card { margin-top: 40px; }
}
.stack-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }
.stack-go { color: color-mix(in srgb, var(--tint) 30%, #1e293b); }
.stack-go:hover { color: color-mix(in srgb, var(--tint) 20%, #0f172a); }

/* ---------- Demo page ---------- */
.demo { padding-top: 36px; padding-bottom: 110px; display: flex; flex-direction: column; gap: 28px; }
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; }
.demo-head .display { font-size: clamp(34px, 4vw, 54px); }
.demo-head .lede { max-width: 460px; }
.demo-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
/* Vertical video, like a phone. */
.demo-video { position: relative; display: grid; aspect-ratio: 9 / 16; width: 100%; border-radius: 26px; overflow: hidden; background: #10201a; box-shadow: 0 30px 60px -36px rgba(16, 32, 26, 0.55); }
.demo-video video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.demo-video.has-sound video { cursor: auto; }
.demo-video--empty { place-items: center; background-color: #86c5a2; background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%), radial-gradient(100% 90% at 100% 100%, rgba(16, 32, 26, 0.12), rgba(16, 32, 26, 0) 60%); }
.demo-video--empty > .grain { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; }
.demo-sound { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(16, 32, 26, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 200ms ease, transform 160ms ease; }
.demo-sound:active { transform: scale(0.96); }
.demo-video.has-sound .demo-sound { opacity: 0; pointer-events: none; }
.demo-video-note { grid-area: 1 / 1; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); font-size: 13px; font-weight: 600; color: var(--muted); }
.demo-cal-frame { min-height: 604px; border: 1px solid var(--line); border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 24px 50px -36px rgba(16, 32, 26, 0.4); padding: 8px; }
.demo-cal-frame:has(iframe) .demo-cal-loading { display: none; }
.demo-cal-loading { padding: 40px; text-align: center; color: var(--muted); }
@media (max-width: 900px) {
  .demo-head { flex-direction: column; align-items: flex-start; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-video { max-width: 420px; width: 100%; margin: 0 auto; }
  .demo-cal-frame { padding: 0; }
}

/* ================= Feature pages ================= */
/* Hero: a workflow canvas with the headline in the middle (Clay-style). */
.fhero { position: relative; max-width: 1360px; margin: 0 auto; aspect-ratio: 1200 / 660; display: grid; place-items: center; }
.flow { position: absolute; inset: 0 24px 20px; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-wires path { fill: none; stroke: #d9d4cb; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flow-ends circle { fill: #c9c3b8; }
.pulse rect { fill: #3b6fe0; filter: drop-shadow(0 0 4px rgba(59, 111, 224, 0.7)); }
.flow-node { position: absolute; left: var(--x); top: var(--y); width: var(--w); box-sizing: border-box; border-radius: 14px; background: #fff; border: 1px solid #ece8e1; box-shadow: 0 10px 26px -18px rgba(16, 32, 26, 0.35); overflow: hidden; }
.flow-tag { display: block; padding: 5px 12px; border-bottom: 1px solid #f1eee8; font-size: 11.5px; color: #93908a; text-align: center; }
.flow-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.flow-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.flow-txt { min-width: 0; display: flex; flex-direction: column; }
.flow-txt b { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-txt span { font-size: 12.5px; color: #7d8a7e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fhero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 760px; }
.fhero-badge { padding: 6px 14px; border-radius: 999px; background: var(--chip); font-size: 14px; font-weight: 600; color: var(--muted); }
.fhero-copy .display { font-size: clamp(42px, 6vw, 80px); line-height: 1.02; }
.fhero-copy .lede { max-width: 600px; }
.fhero-copy .hero-cta { margin-top: 8px; animation: none; }
@media (max-width: 1100px) {
  .fhero { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; gap: 36px; padding: 40px 0 70px; }
  .fhero-copy { order: 0; }
  .flow { order: 1; position: relative; inset: auto; width: min(420px, calc(100% - 40px)); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
  .flow-wires { display: none; }
  .flow-node { position: relative; left: auto; top: auto; width: 100%; }
  .flow-node:not(:last-child)::after { content: ''; position: absolute; left: 30px; bottom: -23px; width: 2px; height: 22px; background: #d9d4cb; }
  .flow-node:nth-child(n+5) { display: none; }
  .flow-node:nth-child(4)::after { display: none; }
}

/* Stack without a pinned title. */
.stack--plain { --top: 56px; }

/* Card pictures: everything loops every 9s, items appear one after another. */
@keyframes om-in { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.om { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(440px, calc(100% - 40px)); display: flex; flex-direction: column; gap: 12px; color: var(--text); text-align: left; }
.om [style*="--i"] { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.om.is-play [style*="--i"] { opacity: 1; transform: none; transition-delay: calc(0.25s + var(--i) * var(--step, 0.85s)); }
.om-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--tint) 45%, #10201a); }
.om-step { position: relative; display: flex; align-items: center; gap: 12px; }
.om-step:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 36px; bottom: -14px; width: 2px; background: rgba(255, 255, 255, 0.85); }
.om-dot { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; background: #fff; color: #b3560a; box-shadow: 0 0 0 1px rgba(179, 86, 10, 0.18); }
.om-step.is-done .om-dot { background: #c2620f; color: #fff; box-shadow: 0 0 0 4px rgba(194, 98, 15, 0.18); }
.om-card { flex: 1 1 0; min-width: 0; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -18px rgba(120, 60, 10, 0.55); display: flex; flex-direction: column; gap: 1px; }
.om-card b { font-size: 14.5px; color: var(--ink); }
.om-card span { font-size: 13px; color: #5f6b61; }
.om-thread { width: min(470px, calc(100% - 40px)); padding: 14px 16px 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -24px rgba(16, 32, 26, 0.45); gap: 7px; }
.om-th-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1eee8; }
.om-th-h b { display: block; font-size: 15px; color: var(--ink); }
.om-th-h span span { display: block; font-size: 12.5px; color: #6f6c66; }
.om-av { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; background: #e8f5ed; color: var(--brand); font-size: 13px; font-weight: 700; }
.om-b { max-width: 84%; display: flex; flex-direction: column; }
.om-b p { margin: 0; padding: 7px 12px; font-size: 13.5px; line-height: 1.4; }
.om-b span { margin-top: 3px; font-size: 11px; color: #93908a; }
.om-b--in { align-self: flex-start; }
.om-b--in p { background: #f5f1eb; border-radius: 14px 14px 14px 4px; }
.om-b--out { align-self: flex-end; align-items: flex-end; }
.om-b--out p { background: #e8f5ed; border-radius: 14px 14px 4px 14px; }
.om-gap { align-self: center; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #e7f5f3; font-size: 12.5px; font-weight: 600; color: #1f5f58; }
.om-token { padding: 0 5px; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 600; color: var(--brand); }

/* Use cases */
.uses { padding-top: 40px; padding-bottom: 100px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.uses > .display { text-align: center; font-size: clamp(30px, 3.6vw, 48px); }
.uses-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.use { padding: 26px 24px 28px; border-radius: 24px; background: color-mix(in srgb, var(--tint) 16%, #fff); border: 1px solid color-mix(in srgb, var(--tint) 34%, #fff); display: flex; flex-direction: column; gap: 10px; }
.use-dot { width: 12px; height: 12px; border-radius: 6px; background: var(--tint); margin-bottom: 6px; }
.use h3 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.use p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) { .uses-grid { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { max-width: 860px; padding-top: 20px; padding-bottom: 100px; display: flex; flex-direction: column; gap: 28px; }
.faq > .display { text-align: center; font-size: clamp(30px, 3.6vw, 48px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 220ms var(--ease-out); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-item p { margin: 0; padding: 0 4px 24px; font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 720px; }
.om-thread { --step: 1s; }
.om-chat { position: relative; width: min(480px, calc(100% - 36px)); padding: 14px 16px 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -24px rgba(16, 32, 26, 0.45); gap: 8px; }
.om-chat .om-h { padding-bottom: 8px; border-bottom: 1px solid #f1eee8; }
.om-c { display: flex; align-items: flex-end; gap: 7px; max-width: 88%; }
.om-c p { margin: 0; padding: 7px 12px; font-size: 13px; line-height: 1.4; }
.om-c--me { align-self: flex-end; }
.om-c--ai { align-self: flex-start; }
.om-c--ai > p { background: #f5f1eb; border-radius: 14px 14px 14px 4px; }
.om-c-av { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: #e8f5ed; box-shadow: inset 0 0 0 1px rgba(45, 106, 79, 0.15); }
.om-c-av img { display: block; width: 14px; height: auto; }
.om-draft { max-width: 94%; }
.om-draft-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #f5f1eb; }
.om-draft-card p { padding: 0; font-size: 12.5px; line-height: 1.45; color: #2a332e; }
.om-token { padding: 0 5px; border-radius: 4px; background: #fff; font-size: 11.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.om:not(.is-play) [style*="--i"] { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .om [style*="--i"] { opacity: 1; transform: none; transition: none; } }
@media (max-width: 700px) { .om-thread, .om-chat { zoom: 0.82; width: calc(100% - 36px); } .om-seq { zoom: 0.9; } }
.om-c { position: relative; }
.om-c--me p { background: #14231c; color: #fff; border-radius: 14px 14px 4px 14px; }
.om-x { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.om-x.is-on { opacity: 1; transform: none; }
.om-dots { display: none; position: absolute; left: 29px; bottom: 0; gap: 4px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #f5f1eb; }
.om-dots i { width: 6px; height: 6px; border-radius: 3px; background: #a39e95; animation: om-dot 1s infinite; }
.om-dots i:nth-child(2) { animation-delay: 0.15s; } .om-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes om-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.om-x.is-typing .om-dots { display: flex; }
.om-x.is-typing > p, .om-x.is-typing .om-draft-card { visibility: hidden; }
.om-send { align-self: flex-end; display: grid; padding: 6px 14px; border-radius: 999px; background: #14231c; color: #fff; font-size: 12.5px; font-weight: 600; transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease; }
.om-send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; justify-content: center; transition: opacity 0.25s ease; }
.om-send-b { opacity: 0; }
.om-send.is-press { transform: scale(0.92); }
.om-send.is-sent { background: #d6efe0; color: #1d4a35; }
.om-send.is-sent .om-send-a { opacity: 0; } .om-send.is-sent .om-send-b { opacity: 1; }
.om-compose { display: flex; align-items: center; min-height: 34px; margin-top: 2px; padding: 0 12px; border-radius: 999px; border: 1px solid #e6e2db; font-size: 13px; color: var(--ink); }
.om-compose-txt:empty::before { content: 'Message MedspAI'; color: #a19d96; }
.om-caret { width: 1.5px; height: 15px; margin-left: 1px; background: var(--ink); animation: om-caret 1s steps(1) infinite; }
@keyframes om-caret { 50% { opacity: 0; } }
.om-cursor { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.om-cursor.is-on { opacity: 1; }
.om-cursor.is-click { scale: 0.85; }
@media (prefers-reduced-motion: reduce) { .om-x { opacity: 1; transform: none; } }
.om-compose-txt:empty + .om-caret { order: -1; margin: 0 2px 0 0; }
.om-care .om-gap { background: #fff3d1; color: #7a5410; }

/* ---------- AI Receptionist page ---------- */
.rhero { padding-top: 44px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.rhero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 960px; }
.rhero-panel { width: 100%; max-width: 1216px; }
.rhero-panel .scene-inner { position: relative; border-radius: 32px; place-items: center; padding: 40px 48px; }
.rc { position: relative; width: min(900px, 100%); display: grid; grid-template-columns: 260px minmax(0, 1fr); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 40px 80px -30px rgba(16, 32, 26, 0.5); overflow: hidden; text-align: left; }
.rc-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 22px; background: #f6faf7; border-right: 1px solid #edf1ee; }
.rc-ring { position: relative; display: grid; place-items: center; width: 76px; height: 76px; }
.rc-ring::before, .rc-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #86c5a2; opacity: 0; }
.rc.is-ringing .rc-ring::before { animation: rc-ring 1.4s ease-out infinite; }
.rc.is-ringing .rc-ring::after { animation: rc-ring 1.4s 0.5s ease-out infinite; }
@keyframes rc-ring { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.rc-av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e8f5ed; color: var(--brand); font-size: 24px; font-weight: 700; transition: transform 0.3s ease; }
.rc.is-ringing .rc-av { animation: rc-shake 1.4s ease-in-out infinite; }
@keyframes rc-shake { 0%, 40%, 100% { transform: none; } 10%, 30% { transform: rotate(-6deg); } 20% { transform: rotate(6deg); } }
.rc-who { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-who b { font-size: 17px; color: var(--ink); }
.rc-state { font-size: 13px; color: #6b746d; }
.rc-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; width: 100%; }
.rc-wave i { width: 3px; height: 100%; border-radius: 2px; background: #cfd8d2; transform: scaleY(0.12); transition: background 0.3s ease; }
.rc.is-live .rc-wave i { animation: rc-bar 0.9s var(--d) ease-in-out infinite alternate; }
.rc[data-spk="m"] .rc-wave i { background: #2d6a4f; }
.rc[data-spk="c"] .rc-wave i { background: #9a8f80; }
.rc[data-spk=""] .rc-wave i { animation-play-state: paused; }
@keyframes rc-bar { 0% { transform: scaleY(0.12); } 100% { transform: scaleY(calc(0.3 + var(--b) * 0.7)); } }
.rc-meta { display: flex; align-items: center; gap: 10px; }
.rc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: #e8f5ed; font-size: 12px; font-weight: 600; color: #1d4a35; }
.rc-pill img { display: block; }
.rc-timer { font-size: 13px; font-variant-numeric: tabular-nums; color: #6b746d; }
.rc-log { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; }
.rc-line { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 86%; opacity: 0.0; transition: opacity 0.3s ease; }
.rc-line.is-on { opacity: 1; }
.rc-line--m { align-self: flex-end; align-items: flex-end; }
.rc-spk { font-size: 11.5px; font-weight: 600; color: #8b877f; }
.rc-line p { margin: 0; padding: 8px 13px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.rc-line--c p { background: #f5f1eb; border-radius: 12px 12px 12px 4px; }
.rc-line--m p { background: #e8f5ed; border-radius: 12px 12px 4px 12px; }
.rc-line .w { opacity: 0; transition: opacity 0.18s ease; }
.rc-line .w.on { opacity: 1; }
.rc-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed #e3e0d9; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc.is-done .rc-end { opacity: 1; transform: none; }
.rc-end-h { display: inline-flex; align-items: center; gap: 6px; width: 100%; font-size: 13px; font-weight: 700; color: #1d4a35; }
.rc-chip { padding: 4px 10px; border-radius: 999px; background: #f3f1ec; font-size: 12.5px; color: #4b524d; }
@media (max-width: 800px) {
  .rhero { padding-top: 40px; gap: 32px; }
  .rhero-panel .scene-inner { padding: 20px; min-height: 0; border-radius: 24px; }
  .rc { grid-template-columns: minmax(0, 1fr); }
  .rc-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 4px 12px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #edf1ee; }
  .rc-ring { width: 48px; height: 48px; grid-row: span 2; }
  .rc-av { width: 42px; height: 42px; font-size: 17px; }
  .rc-who { align-items: flex-start; }
  .rc-who b { font-size: 15px; }
  .rc-wave { grid-column: 2 / 4; height: 22px; justify-content: flex-start; gap: 2px; }
  .rc-wave i { width: 2px; }
  .rc-meta { grid-row: 1; grid-column: 3; gap: 6px; }
  .rc-log { padding: 16px 14px; gap: 9px; }
  .rc-line { max-width: 92%; }
  .rc-line p { font-size: 13.5px; padding: 7px 11px; }
}

/* After hours: the sky turns from night to morning while the calls come in. */
.rn-sky { grid-area: 1 / 1; position: relative; place-self: stretch; background: linear-gradient(180deg, #1d2547 0%, #3b3f78 60%, #6a5c9a 100%); overflow: hidden; }
.rn-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #b9cdf6 0%, #e7d9f2 55%, #ffd9b0 100%); opacity: 0; transition: opacity 2.6s ease; }
.scene-inner:has(.rn.is-play) .rn-sky::after { opacity: 1; transition-delay: 3.2s; }
.rn-moon { position: absolute; top: 26px; right: 30px; color: #f4ecc8; transition: opacity 1.2s ease, transform 2.4s ease; z-index: 1; }
.scene-inner:has(.rn.is-play) .rn-moon { opacity: 0; transform: translateY(-20px); transition-delay: 3s; }
.rn-sun { position: absolute; left: 50%; bottom: -70px; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0%, rgba(255, 210, 122, 0.5) 45%, rgba(255, 210, 122, 0) 70%); opacity: 0; transform: translateY(40px); transition: opacity 2s ease, transform 3s ease; z-index: 1; }
.scene-inner:has(.rn.is-play) .rn-sun { opacity: 1; transform: none; transition-delay: 3.6s; }
.rn { --step: 0.9s; position: relative; z-index: 2; width: min(430px, calc(100% - 40px)); gap: 10px; }
.rn-h { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 12.5px; font-weight: 600; color: #fff; backdrop-filter: blur(6px); }
.rn-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 10px; }
.rn-time { font-size: 12.5px; font-weight: 600; color: #fff; text-align: right; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums; }
.rn-card { display: flex; flex-direction: column; gap: 2px; padding: 9px 13px; border-radius: 14px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 14px 30px -18px rgba(10, 14, 40, 0.7); }
.rn-card b { font-size: 14px; color: var(--ink); }
.rn-card > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #2d6a4f; font-weight: 600; }
.rn-sum { align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #6a4210; box-shadow: 0 14px 30px -18px rgba(120, 70, 10, 0.6); }
.rn .rn-sum[style*="--i"] { transition-delay: calc(0.25s + 4.6s); }
.om:not(.is-play).rn .rn-sum { transition-delay: 0s; }

/* Busy afternoons: callers wired to whoever picked up. */
.wf { grid-area: 1 / 1; position: relative; place-self: center; width: min(520px, calc(100% - 40px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 70px; text-align: left; }
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wf-svg path { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; }
.wf-svg .pulse rect { fill: #10201a; }
.wf-col { position: relative; display: flex; flex-direction: column; gap: 14px; }
.wf-col--to { gap: 48px; }
.wf-node { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -20px rgba(20, 60, 100, 0.7); }
.wf-node b { display: block; font-size: 14px; color: var(--ink); }
.wf-node > span:nth-child(2) > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #6b746d; }
.wf-ring { position: relative; display: grid; place-items: center; }
.wf-ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #82c2ec; animation: rc-ring 1.6s ease-out infinite; }
.wf-caller:nth-child(2) .wf-ring::after { animation-delay: 0.4s; }
.wf-caller:nth-child(3) .wf-ring::after { animation-delay: 0.8s; }
.wf-dest-av { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f3eee6; color: #8a5a1c; font-size: 14px; font-weight: 700; }
.wf-dest--ai .wf-dest-av { background: #e8f5ed; }
.wf-dest--ai .wf-dest-av img { display: block; }
.wf-dest { padding: 12px 14px; }
.wf-live i { width: 7px; height: 7px; border-radius: 50%; background: #3aa66b; animation: wf-blink 1.4s ease-in-out infinite; }
.wf-dest:not(.wf-dest--ai) .wf-live i { background: #e0a23a; }
@keyframes wf-blink { 50% { opacity: 0.3; } }
@media (max-width: 700px) {
  .wf { grid-template-columns: minmax(0, 1fr); gap: 56px; width: calc(100% - 28px); }
  .wf-col--to { flex-direction: row; gap: 10px; }
  .wf-col--to .wf-node { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .wf-node b { font-size: 13px; }
}

/* Your prices: question, price list scanned, answer. */
.rm { --step: 0.85s; width: min(420px, calc(100% - 40px)); gap: 12px; }
.rm .om-b p { font-size: 14px; }
.rm .om-b--in p { background: #fff; }
.rm .om-b span { color: rgba(16, 32, 26, 0.6); }
.rm-list { padding: 12px 14px 10px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.08), 0 24px 50px -26px rgba(60, 30, 110, 0.55); }
.rm-list-h { display: block; padding-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7d7a74; }
.rm-rows { position: relative; }
.rm-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 10px; font-size: 14px; color: #3d4540; border-top: 1px solid #f1eee8; }
.rm-row:first-of-type { border-top: 0; }
.rm-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-hl { position: absolute; left: 0; right: 0; top: 0; height: 36px; border-radius: 10px; background: #efe6fd; box-shadow: inset 0 0 0 1.5px #bd9df0; opacity: 0; }
.om.is-play .rm-hl { animation: rm-scan 1.9s 1.6s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes rm-scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; transform: translateY(0); } 34% { transform: translateY(36px); } 58% { transform: translateY(72px); } 76% { transform: translateY(108px); } 100% { opacity: 1; transform: translateY(72px); } }

/* Urgent: the transcript marked up, then handed to a person. */
.ru { --step: 0.85s; width: min(440px, calc(100% - 40px)); gap: 12px; }
.ru-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -22px rgba(120, 30, 40, 0.6); }
.ru-h b { display: block; font-size: 14px; color: var(--ink); }
.ru-h span span { display: block; font-size: 12.5px; color: #6f6c66; }
.ru-call { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f5f1eb; color: #5f5a52; }
.ru-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #fde2e3; color: #b42332; font-size: 12px; font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.om.is-play .ru-flag { opacity: 1; transform: none; transition-delay: 3.9s; }
.ru-t { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -22px rgba(120, 30, 40, 0.6); }
.ru-t p { margin: 0; font-size: 14px; line-height: 1.5; color: #2a332e; }
.ru-t p > span { display: block; font-size: 11.5px; font-weight: 700; color: #8b877f; }
.ru-m > span { color: #2d6a4f !important; }
.ru-mk { padding: 0 2px; border-radius: 3px; color: inherit; background: linear-gradient(#ffc9cd, #ffc9cd) left / 0% 100% no-repeat; transition: background-size 0.5s ease; }
.om.is-play .ru-mk { background-size: 100% 100%; transition-delay: calc(0.25s + var(--m) * 0.85s); }
.om:not(.is-play) .ru-mk, .om:not(.is-play) .ru-flag { transition-delay: 0s; }
.ru-task { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px #ee8f95, 0 16px 34px -22px rgba(120, 30, 40, 0.6); }
.ru-task-av { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f3eee6; color: #8a5a1c; font-size: 13px; font-weight: 700; }
.ru-task b { display: block; font-size: 14px; color: var(--ink); }
.ru-task span span { display: block; font-size: 12.5px; color: #6f6c66; }
.ru-done { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #1d4a35; }
@media (max-width: 700px) { .rn, .rm, .ru { zoom: 0.86; width: calc(100% - 36px); } }
.rn-time, .rn-h { transition: color 1.2s ease, background 1.2s ease, text-shadow 1.2s ease; }
.scene-inner:has(.rn.is-play) .rn-time { color: #3b3550; text-shadow: none; transition-delay: 4s; }
.scene-inner:has(.rn.is-play) .rn-h { color: #3b3550; background: rgba(255, 255, 255, 0.6); transition-delay: 4s; }
.rhero .hero-cta { margin-top: 4px; }
.rc-log { padding-top: 22px; padding-bottom: 20px; gap: 10px; }
.wf-to { display: none; }
@media (max-width: 700px) {
  .wf-svg { display: none; }
  .wf { gap: 18px; }
  .wf-to { display: inline-flex; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #e8f5ed; font-size: 11.5px; font-weight: 700; color: #1d4a35; }
  .wf-to::before { content: '\2192'; margin-right: 4px; }
}
@media (max-width: 800px) {
  .rc-pill { display: none; }
  .rc-side { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Client at the desk */
.rf-pair { display: flex; flex-shrink: 0; }
.rf-a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; font-size: 13px; font-weight: 700; }
.rf-a--j { background: #f3eee6; color: #8a5a1c; }
.rf-a--m { margin-left: -10px; background: #e8f5ed; color: var(--brand); }
.rc-view { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: #10201a; color: #fff; font-size: 12.5px; font-weight: 600; }
.rc-end-h { width: auto; margin-right: 4px; }

.rot .hero-ends { display: grid; justify-items: center; align-items: start; transition: height 500ms var(--ease-out); }
.rot .hero-end { display: block; }
/* Client at the desk: two lanes at once */
.rf { --step: 0.95s; width: min(560px, calc(100% - 36px)); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.rf-lane { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(4px); }
.rf-lane-h { display: flex; align-items: center; gap: 9px; padding: 4px 4px 8px; }
.rf-lane-h b { display: block; font-size: 13.5px; color: var(--ink); }
.rf-lane-h > span:nth-child(2) > span { display: block; font-size: 12px; color: #6a5a48; }
.rf-ai { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f5ed; }
.rf-ai img { display: block; }
.rf-mini { margin-left: auto; display: flex; align-items: center; gap: 2px; height: 20px; }
.rf-mini i { width: 2px; height: 100%; border-radius: 1px; background: #2d6a4f; transform: scaleY(0.2); }
.om.is-play .rf-mini i { animation: rc-bar 0.8s var(--d) ease-in-out infinite alternate; }
.rf-step { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -18px rgba(120, 60, 10, 0.6); }
.rf-step b { display: block; font-size: 13px; color: var(--ink); }
.rf-step span span { display: block; font-size: 11.5px; color: #7a746b; }
.rf-tick { flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #10201a; color: #fff; }
.rf-say { max-width: 92%; padding: 7px 11px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.rf-say--c { align-self: flex-start; background: #f5f1eb; border-radius: 12px 12px 12px 4px; }
.rf-say--m { align-self: flex-end; background: #e8f5ed; border-radius: 12px 12px 4px 12px; }
.rf-booked { align-self: stretch; display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 12px; background: #10201a; color: #fff; font-size: 12.5px; font-weight: 600; }
.om .rf-booked[style*="--i"] { transform: translateY(8px) scale(0.96); }
.om.is-play .rf-booked[style*="--i"] { transform: none; transition-timing-function: ease, cubic-bezier(0.3, 1.5, 0.5, 1); }
@media (max-width: 700px) { .rf { zoom: 0.9; grid-template-columns: minmax(0, 1fr); width: calc(100% - 36px); } .rf-lane:first-child .rf-step:not(:last-child) { display: none; } }

/* Knows your business: tiles of knowledge, one lights up per question */
.rk { grid-area: 1 / 1; place-self: center; width: min(470px, calc(100% - 36px)); display: flex; flex-direction: column; gap: 16px; text-align: left; }
.rk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rk-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1.5px transparent; transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; }
.rk-tile span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6c5a8e; }
.rk-tile b { font-size: 13px; font-weight: 600; color: var(--ink); }
.rk-qa { display: grid; min-height: 130px; }
.rk-pair { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.rk-pair .om-b p { font-size: 14px; }
.rk-pair .om-b--in p { background: #fff; }
.rk-pair .om-b span { color: rgba(16, 32, 26, 0.6); }
.rk-pair .om-b--out { opacity: 0; transition: opacity 0.35s ease 0s; }
.rk-pair.is-on { opacity: 1; transform: none; }
.rk-pair.is-ans .om-b--out { opacity: 1; }
.rk-tile.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px #8d63e0, 0 14px 30px -18px rgba(70, 30, 140, 0.7); transform: translateY(-2px); }
@media (max-width: 700px) { .rk { zoom: 0.88; width: calc(100% - 36px); } .rk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ru { width: min(400px, calc(100% - 48px)); gap: 9px; }
.ru-h, .ru-task { padding: 9px 12px; border-radius: 14px; gap: 9px; }
.ru-h b, .ru-task b { font-size: 13px; }
.ru-h span span, .ru-task span span { font-size: 11.5px; }
.ru-call, .ru-task-av { width: 28px; height: 28px; }
.ru-flag { font-size: 11.5px; padding: 3px 8px; }
.ru-t { gap: 8px; padding: 11px 13px; border-radius: 14px; }
.ru-t p { font-size: 13px; line-height: 1.45; }
.ru-t p > span { font-size: 11px; }
.ru-done { padding: 6px 12px; font-size: 12.5px; }
.rhero { padding-bottom: 60px; }
.rk-qa { min-height: 150px; }
.hero-lead { text-wrap: balance; }
/* Short screens (laptops with the browser not full height): tighter title and strips so the open card has room. */
@media (min-width: 901px) and (max-height: 860px) {
  .stack { --top: 100px; --tab: 46px; }
  .stack--plain { --top: 40px; }
  .stack-title > span { font-size: clamp(30px, 3.4vw, 44px); }
}
@media (min-width: 901px) and (max-height: 700px) {
  .stack { --top: 84px; --tab: 46px; }
  .stack-title > span { font-size: 34px; }
}
/* Screens too short for the stacking effect: plain cards, side by side. */
@media (min-width: 900px) {
  .stack--flat .stack-card { position: static; height: auto; margin-bottom: 28px; pointer-events: auto; }
  .stack--flat .stack-face { height: auto; padding: 36px 0; box-shadow: none; }
  .stack--flat .stack-title { position: static; height: auto; transform: none !important; }
  .stack--flat .stack-title > span { height: auto; padding: 0 0 32px; }
  .stack--flat .stack-tab { display: none; }
  .stack--flat .stack-body { height: auto; }
  .stack--flat .stack-body .layer-panel .scene-inner { height: 440px; }
}
.stack-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--tint) 45%, #10201a); }
.stack-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }

/* ---------- Call Intelligence page ---------- */
.ci-f { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ci-f--miss { background: #fdf0d6; color: #8a5a0c; }
.ci-f--price { background: #fde2e3; color: #b42332; }
.ci-f--qs { background: #eeece8; color: #5f5a52; }
.ci-f--great { background: #e3f3e8; color: #1d6a3f; }
.ci-f--cb { background: #e6f2ec; color: #2d6a4f; }
.ci-green { color: #2d6a4f; }

/* Hero dashboard */
.ci-dash { width: min(1000px, 100%); padding: 22px 24px 24px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 40px 80px -30px rgba(50, 20, 100, 0.5); gap: 18px; }
.ci-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-top > div { display: flex; align-items: center; gap: 16px; }
.ci-title { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.ci-seg-ctl { display: inline-flex; padding: 3px; border-radius: 10px; background: #f3f1ec; font-size: 12.5px; color: #7a766f; }
.ci-seg-ctl span { padding: 4px 10px; border-radius: 8px; }
.ci-seg-ctl .is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ci-rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fdf3dc; font-size: 12.5px; font-weight: 700; color: #7a5410; }
.ci-rec svg { animation: wf-blink 1.6s ease-in-out infinite; }
.ci-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #f0ede7; border-radius: 16px; }
.ci-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.ci-stat + .ci-stat { border-left: 1px solid #f0ede7; }
.ci-stat b { font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ci-stat b.ci-green { color: #2d6a4f; }
.ci-stat span { font-size: 13px; color: #6b746d; }
.ci-stat em { font-style: normal; font-size: 12px; color: #9a958d; }
.ci-cols { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 14px; }
.ci-box { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid #f0ede7; border-radius: 16px; }
.ci-box-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ci-box-h em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: #efe6fd; font-size: 11.5px; color: #5b3fb0; }
.ci-why { display: flex; align-items: center; gap: 22px; }
.ci-donut-wrap { position: relative; flex-shrink: 0; display: grid; place-items: center; }
.ci-donut-wrap > span { position: absolute; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #8a857d; }
.ci-donut-wrap b { font-size: 28px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ci-seg { stroke-dasharray: 0 999; transition: stroke-dasharray 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.om.is-play .ci-seg { stroke-dasharray: var(--len) 999; transition-delay: var(--d); }
.om:not(.is-play) .ci-seg { transition: none; }
.ci-legend { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: #3d4540; }
.ci-legend li { display: flex; align-items: center; gap: 8px; }
.ci-legend i { width: 9px; height: 9px; border-radius: 3px; }
.ci-legend span { margin-left: auto; color: #8a857d; font-variant-numeric: tabular-nums; }
.ci-flags { gap: 0; }
.ci-flags .ci-box-h { margin-bottom: 4px; }
.ci-row { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-top: 1px solid #f3f1ec; }
.ci-box-h + .ci-row { border-top: 0; }
.ci-row-h { display: flex; align-items: baseline; gap: 8px; }
.ci-row-h b { font-size: 14px; color: var(--ink); }
.ci-row-h span { font-size: 12px; color: #8a857d; }
.ci-row p { margin: 0; font-size: 13px; color: #3d4540; }
@media (max-width: 860px) {
  .ci-hero .scene-inner { padding: 14px; }
  .ci-dash { padding: 16px; gap: 14px; }
  .ci-seg-ctl { display: none; }
  .ci-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-stat:nth-child(3) { border-left: 0; }
  .ci-stat:nth-child(n + 3) { border-top: 1px solid #f0ede7; }
  .ci-stat { padding: 12px 14px; }
  .ci-stat b { font-size: 26px; }
  .ci-cols { grid-template-columns: minmax(0, 1fr); }
  .ci-why { gap: 14px; }
  .ci-donut { width: 120px; height: 120px; }
  .ci-donut-wrap b { font-size: 22px; }
  .ci-legend { font-size: 12px; gap: 5px; }
}

/* Card 1: the call, transcript following the recording */
.ci-call { width: min(450px, calc(100% - 40px)); padding: 14px 16px 16px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -26px rgba(60, 30, 110, 0.5); gap: 11px; }
.ci-call-h { display: flex; align-items: center; gap: 10px; }
.ci-call-h b { display: block; font-size: 14px; color: var(--ink); }
.ci-call-h span span { display: block; font-size: 12px; color: #7a766f; }
.ci-call-ico { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f5f1eb; color: #5f5a52; }
.ci-staff { margin-left: auto; flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: #ece5fb; color: #5b3fb0; font-size: 11.5px; font-weight: 700; }
.ci-sum { padding: 10px 12px; border-radius: 12px; background: #f7f4fd; font-size: 13px; line-height: 1.45; color: #2a332e; }
.ci-sum span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6c5a8e; }
.ci-player { display: flex; align-items: center; gap: 10px; }
.ci-play { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #10201a; color: #fff; }
.ci-bars { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 2px; height: 28px; }
.ci-bars i { flex: 1 1 0; height: calc(var(--h) * 100%); border-radius: 2px; background: #ddd5ec; }
.ci-head { position: absolute; left: 0; top: -2px; bottom: -2px; width: 2px; border-radius: 1px; background: #5b3fb0; }
.ci-bars::before { content: ''; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, rgba(141, 99, 224, 0.28), rgba(141, 99, 224, 0.28)); border-radius: 4px; }
.om.is-play .ci-head { animation: ci-head 8s 0.4s linear both; }
.om.is-play .ci-bars::before { animation: ci-fill 8s 0.4s linear both; }
@keyframes ci-head { from { left: 0; } to { left: 100%; } }
@keyframes ci-fill { from { width: 0; } to { width: 100%; } }
.ci-time { font-size: 12px; color: #7a766f; font-variant-numeric: tabular-nums; }
.ci-trans { display: flex; flex-direction: column; gap: 4px; }
.ci-tl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 10px; transition: background 0.3s ease; }
.ci-tl span { font-size: 12px; font-weight: 700; color: #8a857d; padding-top: 1px; }
.ci-tl span.is-staff { color: #5b3fb0; }
.ci-tl p { margin: 0; font-size: 13px; line-height: 1.45; color: #9a958d; transition: color 0.3s ease; }
.om.is-play .ci-tl { animation: ci-hl 8s calc(0.4s + var(--k) * 2s) both; }
.om.is-play .ci-tl p { animation: ci-hlt 8s calc(0.4s + var(--k) * 2s) both; }
@keyframes ci-hl { 0% { background: transparent; } 2%, 24% { background: #f3edfd; } 27%, 100% { background: transparent; } }
@keyframes ci-hlt { 0% { color: #9a958d; } 2%, 100% { color: #1f2a24; } }

/* Card 2: flagged list */
.ci-list { width: min(450px, calc(100% - 40px)); padding: 14px 16px 6px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -26px rgba(30, 40, 110, 0.5); gap: 0; }
.ci-list-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #f1eee8; }
.ci-list-h b { font-size: 14px; color: var(--ink); }
.ci-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #10201a; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ci-chips { display: flex; gap: 5px; margin-left: auto; }
.ci-chips i { font-style: normal; padding: 3px 8px; border-radius: 999px; border: 1px solid #e6e2db; font-size: 11px; font-weight: 600; color: #6f6c66; }
.ci-lrow { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid #f3f1ec; }
.ci-list-h + .ci-lrow { border-top: 0; }
.ci-lrow > div { flex: 1 1 0; min-width: 0; }
.ci-lrow b { font-size: 13.5px; color: var(--ink); }
.ci-lrow > div > span { margin-left: 6px; font-size: 11.5px; color: #8a857d; }
.ci-lrow p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: #3d4540; }
.ci-stamp { flex-shrink: 0; opacity: 0; transform: scale(0.5) rotate(-6deg); transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.om.is-play .ci-stamp { opacity: 1; transform: none; transition-delay: calc(0.85s + var(--s) * 0.85s); }
.om:not(.is-play) .ci-stamp { transition-delay: 0s; }
.ci-list { --step: 0.85s; }

/* Card 3: callbacks */
.ci-cbs { --step: 0.8s; width: min(420px, calc(100% - 40px)); gap: 10px; }
.ci-cb-top { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px -22px rgba(20, 70, 40, 0.6); }
.ci-cb-top b { display: block; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ci-cb-top > div > span { font-size: 12.5px; color: #6b746d; }
.ci-ring-fill { stroke-dashoffset: calc(var(--c) * 0.3333); transition: stroke-dashoffset 0.8s cubic-bezier(0.45, 0, 0.2, 1); }
.om.is-play .ci-ring-fill { stroke-dashoffset: calc(var(--c) * 0.2667); transition-delay: 3.2s; }
.om:not(.is-play) .ci-ring-fill { transition: none; }
.ci-cb { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.ci-cb b { display: block; font-size: 13.5px; color: var(--ink); transition: color 0.3s ease; }
.ci-cb > div > span { font-size: 12px; color: #7a766f; }
.ci-box-check { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #cfd8d2; color: transparent; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ci-cb.is-done .ci-box-check { background: #2d6a4f; border-color: #2d6a4f; color: #fff; }
.ci-cb.is-done b { color: #8a857d; text-decoration: line-through; }
.ci-cb--live { box-shadow: 0 0 0 2px #86c5a2, 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.om.is-play .ci-cb--live .ci-box-check { background: #2d6a4f; border-color: #2d6a4f; color: #fff; transform: scale(1.1); transition-delay: 3s; }
.om.is-play .ci-cb--live b { color: #8a857d; transition-delay: 3s; }
.om:not(.is-play) .ci-cb--live .ci-box-check, .om:not(.is-play) .ci-cb--live b { transition-delay: 0s; }

/* Card 4: reasons as bars */
.ci-rep { --step: 0.85s; width: min(440px, calc(100% - 40px)); padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -26px rgba(120, 60, 10, 0.5); gap: 9px; }
.ci-rep-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.ci-rep-h b { font-size: 15px; color: var(--ink); }
.ci-rep-h span { font-size: 12px; color: #8a857d; }
.ci-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 13px; color: #3d4540; }
.ci-bar > div { height: 10px; border-radius: 5px; background: #f3f1ec; overflow: hidden; }
.ci-bar i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.om.is-play .ci-bar i { width: var(--w); transition-delay: var(--bd); }
.om:not(.is-play) .ci-bar i { transition: none; }
.ci-bar b { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ci-insight { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #fdf3dc; font-size: 13px; line-height: 1.45; color: #4a3a18; }
.ci-insight span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8a5a0c; }
@media (max-width: 700px) { .ci-call, .ci-list, .ci-cbs, .ci-rep { zoom: 0.88; width: calc(100% - 36px); } .ci-chips { display: none; } }
.ci-call { gap: 9px; padding: 12px 14px 12px; } .ci-tl { padding: 4px 8px; } .ci-sum { padding: 8px 11px; }
.ci-legend i { flex-shrink: 0; }
.ci-legend li { white-space: nowrap; }
.ci-rec, .ci-title { white-space: nowrap; }
@media (max-width: 860px) { .ci-title { font-size: 17px; } .ci-rec { font-size: 11.5px; padding: 4px 9px; } .ci-donut { width: 104px; height: 104px; } .ci-donut-wrap b { font-size: 19px; } }
.ci-bars::before { display: none; }
.ci-bars i { transition: background 0.25s ease; }
.om.is-play .ci-bars i { background: #8d63e0; transition-delay: var(--t); }
.om:not(.is-play) .ci-bars i { transition: none; }

/* ---------- Organization page ---------- */
.og-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; }
.og-tag img { display: block; }
.og-tag--camp { background: #fdeedd; color: #9a5a0c; }
.og-tag--ai { background: #e3f3e8; color: #1d6a3f; }
.og-tag--staff { background: #f0ede8; color: #6f6a62; }
.og-tag--note { background: #fff4c9; color: #7a5a00; }
.og-m { display: flex; flex-direction: column; gap: 3px; max-width: 80%; }
.og-m p { margin: 0; padding: 8px 12px; font-size: 13.5px; line-height: 1.42; color: var(--ink); }
.og-m--in { align-self: flex-start; }
.og-m--in p { background: #f5f1eb; border-radius: 12px 12px 12px 4px; }
.og-m--out { align-self: flex-end; align-items: flex-end; }
.og-m--out p { background: #e8f5ed; border-radius: 12px 12px 4px 12px; }
.og-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #93908a; }
.og-call { align-self: center; width: min(360px, 92%); padding: 10px 12px; border-radius: 14px; border: 1px solid #ece8e1; background: #faf9f6; }
.og-call-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5f5a52; }
.og-call-h b { color: var(--ink); }
.og-call-h > span { color: #93908a; }
.og-call-h .og-tag { margin-left: auto; }
.og-call p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: #3d4540; }
.og-note { align-self: stretch; display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: #fff8d9; border: 1px dashed #ecd88a; color: #7a5a00; }
.og-note svg { flex-shrink: 0; margin-top: 2px; }
.og-note p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #3e3517; }
.og-note b { color: #3e3517; }
.og-note p span { padding: 0 4px; border-radius: 4px; background: #fbe9a6; font-weight: 600; color: #6a4e00; }
.og-av { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f5ed; color: var(--brand); font-size: 13px; font-weight: 700; }
.og-av--lg { width: 38px; height: 38px; font-size: 15px; }

/* Hero inbox */
.og { position: relative; width: min(1000px, 100%); height: 470px; display: grid; grid-template-columns: 290px minmax(0, 1fr); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 40px 80px -30px rgba(20, 60, 100, 0.55); overflow: hidden; text-align: left; }
.og-side { display: flex; flex-direction: column; border-right: 1px solid #efece6; background: #fcfbf9; }
.og-side-h { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 10px; }
.og-side-h b { font-size: 17px; color: var(--ink); }
.og-side-h span { font-size: 12px; color: #93908a; }
.og-search { display: flex; align-items: center; gap: 7px; margin: 0 12px 8px; padding: 8px 11px; border-radius: 10px; background: #f3f1ec; font-size: 12.5px; color: #9a958d; }
.og-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f3f1ec; transition: background 0.3s ease; }
.og-row.is-on { background: #e9f4ee; }
.og-row-t { flex: 1 1 0; min-width: 0; }
.og-row-t b { display: block; font-size: 13.5px; color: var(--ink); }
.og-row-t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #7a766f; transition: color 0.3s ease; }
.og-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.og-row-r em { font-style: normal; font-size: 11px; color: #9a958d; white-space: nowrap; }
.og-dot { width: 7px; height: 7px; border-radius: 50%; background: #e04848; }
.og-row.is-flash .og-row-t span { color: var(--ink); }
.og-main { display: flex; flex-direction: column; min-width: 0; }
.og-main-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #efece6; }
.og-main-h b { display: block; font-size: 15px; color: var(--ink); }
.og-main-h > span:nth-child(2) > span { display: block; font-size: 12px; color: #7a766f; }
.og-chan { margin-left: auto; display: flex; gap: 6px; color: #8a857d; }
.og-chan svg { padding: 6px; box-sizing: content-box; border-radius: 8px; background: #f5f3ef; }
.og-thread { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 18px; overflow: hidden; }
.og-step { display: flex; flex-direction: column; }
.og-step:not(.is-on) { display: none; }
.og-step.is-on { animation: og-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes og-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.og-compose { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px solid #e6e2db; font-size: 13px; color: #9a958d; }
.og-compose-r { display: flex; align-items: center; gap: 8px; }
.og-compose-r b { padding: 6px 14px; border-radius: 10px; background: #10201a; color: #fff; font-size: 12.5px; }
@media (max-width: 860px) {
  .og-hero .scene-inner { padding: 14px; }
  .og { grid-template-columns: minmax(0, 1fr); height: 520px; }
  .og-side { display: none; }
  .og-chan { display: none; }
  .og-thread { padding: 12px; }
  .og-m { max-width: 88%; }
  .og-m p { font-size: 13px; }
}

/* Card 1: channels wired into one thread */
.og-wf { width: min(520px, calc(100% - 40px)); gap: 60px; }
.og-wf .wf-col { gap: 10px; }
.og-src { padding: 8px 11px; gap: 9px; }
.og-src b { font-size: 13px; }
.og-src-ico { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eaf3fb; color: #2b6cb0; }
.og-dest { flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; text-align: center; }
.og-dest > b { font-size: 15px; }
.og-dest > span:not(.og-av) { font-size: 12px; color: #7a766f; }
.og-dest-c { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; }
.og-dest-c i { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: #f3f1ec; font-style: normal; font-size: 11px; font-weight: 600; color: #5f5a52; }
@media (max-width: 700px) { .og-wf { gap: 16px; } .og-wf .wf-col--to { justify-content: center; } }

/* Card 2: who said what, notes */
.og-who { --step: 0.85s; width: min(430px, calc(100% - 40px)); padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.1), 0 30px 60px -26px rgba(60, 30, 110, 0.5); gap: 9px; }

/* Card 3: assignments */
.og-tasks { --step: 0.85s; width: min(430px, calc(100% - 40px)); gap: 10px; }
.og-tasks-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.og-tasks-h b, .og-notes-h b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink); }
.og-tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.6); font-size: 12px; color: #5f5a52; }
.og-tabs i { font-style: normal; padding: 4px 10px; border-radius: 8px; }
.og-tabs i.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.og-tabs em { font-style: normal; margin-left: 3px; color: #8a857d; font-variant-numeric: tabular-nums; }
.og-task { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.og-task b { font-size: 14px; color: var(--ink); }
.og-task-src { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: #e3f3e8; font-size: 11px; font-weight: 700; color: #1d6a3f; }
.og-task-src img { display: block; }
.og-task-src--staff { background: #f0ede8; color: #6f6a62; }
.og-task-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a766f; }
.og-who-chip { padding: 1px 8px; border-radius: 999px; background: #f3f1ec; font-weight: 600; color: #4b524d; }
.og-done { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 10px; background: #2d6a4f; color: #fff; font-size: 12px; font-weight: 600; transition: transform 0.15s ease; }
.og-task--new { box-shadow: 0 0 0 2px #86c5a2, 0 16px 34px -24px rgba(20, 70, 40, 0.6); transition: opacity 0.4s ease, box-shadow 0.4s ease; }
.og-task--new b { transition: color 0.3s ease; }
.om.is-play .og-task--new .og-done { animation: og-press 0.4s 4.2s both; }
@keyframes og-press { 40% { transform: scale(0.9); } 100% { transform: none; background: #2d6a4f; color: #fff; box-shadow: none; } }
.og-tt { background: linear-gradient(currentColor, currentColor) 0 55% / 0% 1.5px no-repeat; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.og-task--new .og-tt { transition: background-size 0.7s ease; }
.om.is-play .og-task--new b { color: #9a958d; transition-delay: 4.5s; }
.om.is-play .og-task--new .og-tt { background-size: 100% 1.5px; transition-delay: 4.5s; }
.om:not(.is-play) .og-task--new b, .om:not(.is-play) .og-task--new .og-tt { transition-delay: 0s; }

/* Card 4: notifications */
.og-notes { --step: 0.85s; width: min(440px, calc(100% - 40px)); gap: 10px; }
.og-notes-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.og-n { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(120, 60, 10, 0.6); transition: opacity 0.4s ease; }
.og-n-ico { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fdf0dc; color: #9a5a0c; }
.og-n--live .og-n-ico::after { content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: #2d6a4f; border: 2px solid #fff; }
.om.is-play .og-n--live .og-n-ico { animation: rc-shake 1.2s 0.9s ease-in-out 1; }
.og-n > div { flex: 1 1 0; min-width: 0; }
.og-n-h { display: flex; align-items: baseline; gap: 7px; }
.og-n-h b { font-size: 13.5px; color: var(--ink); }
.og-n-h i { font-style: normal; padding: 1px 7px; border-radius: 6px; background: #f3f1ec; font-size: 11px; font-weight: 600; color: #5f5a52; }
.og-n-h span { margin-left: auto; font-size: 11.5px; color: #9a958d; }
.og-n p { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.45; color: #3d4540; }
.og-n-act { display: flex; align-items: center; gap: 6px; }
.og-n-act em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid #ece8e1; color: #6f6a62; }
.og-n-act strong { margin-left: auto; padding: 4px 11px; border-radius: 8px; border: 1px solid #ece8e1; font-size: 12px; color: var(--ink); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.om.is-play .og-n--live .og-n-act strong { animation: og-press2 0.45s 3.9s both; }
@keyframes og-press2 { 40% { transform: scale(0.9); } 100% { transform: none; background: #2d6a4f; color: #fff; border-color: #2d6a4f; } }
.og-n--live > div p, .og-n--live .og-n-h { transition: opacity 0.4s ease; }
.om.is-play .og-n--live > div p, .om.is-play .og-n--live .og-n-h { opacity: 0.45; transition-delay: 4.4s; }
@media (max-width: 700px) { .og-who, .og-tasks, .og-notes { zoom: 0.88; width: calc(100% - 36px); } }
.og-task b { padding-right: 104px; }
.og-done { background: #eef6f1; color: #2d6a4f; box-shadow: inset 0 0 0 1px #cfe6d8; }
.og-n--urgent .og-n-ico, .og-n--live .og-n-ico { background: #fde2e3; color: #b42332; }
.og-n--live .og-n-h i { background: #fde2e3; color: #b42332; }
.og-n--live { box-shadow: 0 0 0 2px #f2a8ad, 0 16px 34px -24px rgba(120, 30, 40, 0.6); }
.og-n-act strong { display: grid; }
.og-n-act strong > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: opacity 0.2s ease; }
.og-r-b { opacity: 0; }
.om.is-play .og-n--live .og-r-a { opacity: 0; transition-delay: 4.1s; }
.om.is-play .og-n--live .og-r-b { opacity: 1; transition-delay: 4.1s; }
.om:not(.is-play) .og-r-a, .om:not(.is-play) .og-r-b { transition-delay: 0s; }
.og-n--live { max-height: 220px; overflow: hidden; }
.om.is-play .og-n--live { animation: og-out 0.55s 5s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
@keyframes og-out { 0% { opacity: 1; } 40% { opacity: 0; transform: translateX(24px); max-height: 220px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 0; } 100% { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; } }
.og-notes { min-height: 330px; justify-content: flex-start; }

/* Product dropdown: a full-width sheet under the header, page dims behind it */
.nav-drop { position: static; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.nav-drop-btn svg { transition: transform 200ms ease; opacity: 0.6; }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #f0ede7; box-shadow: 0 30px 50px -30px rgba(16, 32, 26, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms; }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-drop-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 18px; padding-bottom: 24px; }
.nav-drop-in a { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; text-decoration: none; color: var(--ink); transition: background 160ms ease; }
.nav-drop-in a:hover { background: color-mix(in srgb, var(--c) 14%, #fff); }
.nav-drop-in i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in srgb, var(--c) 28%, #fff); color: color-mix(in srgb, var(--c) 40%, #10201a); transition: transform 200ms var(--ease-out); }
.nav-drop-in a:hover i { transform: translateY(-2px); }
.nav-drop-in b { font-size: 16px; letter-spacing: -0.01em; }
.nav-drop-in span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.nav-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(16, 32, 26, 0.16); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
html.nav-open .nav-scrim { opacity: 1; }
html.nav-open .site-header-bar { background: #fff; }
@media (max-width: 760px) { .nav-drop { display: none; } }
.nav-menu-h { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.nav-menu-sub { display: flex; align-items: center; gap: 10px; }
.nav-menu-sub i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.nav-menu-sep { height: 1px; margin: 6px 10px; background: #eee9e1; }
@media (max-width: 760px) { .nav-drop { display: none; } }

/* ---------- Plans ---------- */
.pl-hero { padding-top: 64px; padding-bottom: 36px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.pl-hero .lede { max-width: 620px; }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-bottom: 20px; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px 22px 26px; border-radius: 26px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); transition-property: opacity, transform, box-shadow; }
.pl-card.is-popular { background: #fff; border: 2px solid var(--ink); box-shadow: 0 30px 60px -36px rgba(16, 32, 26, 0.45); }
.pl-badge { position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; }
.pl-name { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.pl-name i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.pl-line { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.pl-calls { display: flex; align-items: baseline; gap: 8px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--c) 30%, #eee); border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, #eee); }
.pl-calls b { font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-calls span { display: flex; flex-direction: column; font-size: 14px; color: var(--text); }
.pl-calls em { font-style: normal; font-size: 12px; color: var(--muted); }
.pl-cta { justify-content: center; }
.pl-inc { display: flex; flex-direction: column; gap: 10px; }
.pl-lead { font-size: 13px; font-weight: 700; color: var(--ink); }
.pl-inc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pl-inc li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.pl-inc li svg { flex-shrink: 0; margin-top: 2px; color: color-mix(in srgb, var(--c) 45%, #10201a); }
.pl-enterprise { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 8px; margin-bottom: 90px; padding: 22px 26px; border-radius: 22px; border: 1px solid var(--line); }
.pl-enterprise b { font-size: 18px; color: var(--ink); }
.pl-enterprise p { margin: 4px 0 0; max-width: 720px; font-size: 15px; color: var(--muted); }
.pl-compare { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-bottom: 80px; }
.pl-compare > .display { font-size: clamp(30px, 3.6vw, 46px); }
.pl-table { width: 100%; }
.pl-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; min-height: 50px; border-bottom: 1px solid #f0ede7; }
.pl-tr > span { padding: 10px 12px; font-size: 15px; color: var(--text); }
.pl-tr > span:not(:first-child) { text-align: center; }
.pl-th { position: sticky; top: var(--hdr); z-index: 2; background: #fff; border-bottom: 1px solid #e6e2db; }
.pl-th > span { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.pl-th i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.pl-group { padding: 28px 12px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #e6e2db; }
.pl-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e3f3e8; color: #1d6a3f; }
.pl-no { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: #d9d4cb; vertical-align: middle; }
.pl-tr b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 60px; }
.pl-note { padding: 24px 26px; border-radius: 22px; background: #f7f5f1; }
.pl-note b { font-size: 18px; color: var(--ink); }
.pl-note p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
@media (max-width: 960px) { .pl-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; row-gap: 28px; } }
@media (max-width: 700px) {
  .pl-hero { padding-top: 36px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-enterprise { flex-direction: column; align-items: flex-start; }
  .pl-notes { grid-template-columns: minmax(0, 1fr); }
  .pl-tr { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.7fr)); }
  .pl-tr > span { padding: 8px 4px; font-size: 13px; }
  .pl-th > span { flex-direction: column; gap: 4px; font-size: 12px; }
  .pl-tr b { font-size: 12.5px; }
  .pl-yes { width: 22px; height: 22px; }
  .pl-yes svg { width: 13px; height: 13px; }
}

/* ---------- Get pricing ---------- */
.gp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: start; padding-top: 64px; padding-bottom: 100px; }
.gp-copy { display: flex; flex-direction: column; gap: 32px; padding-top: 12px; }
.gp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.gp-steps li { display: flex; gap: 16px; align-items: flex-start; }
.gp-steps li > span { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f3f1ec; font-weight: 700; color: var(--ink); }
.gp-steps li:first-child > span { background: var(--ink); color: #fff; }
.gp-steps b { font-size: 17px; color: var(--ink); }
.gp-steps p { margin: 3px 0 0; font-size: 15px; color: var(--muted); }
.gp-form { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(16, 32, 26, 0.45); }
.hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.gp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gp-field { display: flex; flex-direction: column; gap: 6px; }
.gp-field span { font-size: 14px; font-weight: 600; color: var(--ink); }
.gp-field input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid #ddd8cf; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; }
.gp-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 32, 26, 0.08); }
.gp-needs { margin: 4px 0 0; padding: 0; border: 0; }
.gp-needs legend { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.gp-needs legend em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip { position: relative; cursor: pointer; }
.gp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: 999px; border: 1px solid #ddd8cf; font-size: 14px; line-height: 1.3; color: var(--text); transition: background 160ms ease, border-color 160ms ease, color 160ms ease; user-select: none; }
.gp-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.gp-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(16, 32, 26, 0.18); }
.gp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.gp-consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.gp-consent a { color: inherit; }
.gp-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fde2e3; font-size: 14px; color: #8a1c26; }
.gp-submit { justify-content: center; }
@media (max-width: 900px) { .gp { grid-template-columns: minmax(0, 1fr); padding-top: 36px; } }
@media (max-width: 560px) { .gp-row { grid-template-columns: minmax(0, 1fr); } .gp-form { padding: 20px; } }

/* ---------- Pricing calendar ---------- */
.gs { padding-top: 56px; padding-bottom: 90px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.gs-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.gs-done { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: #e3f3e8; font-size: 14px; font-weight: 600; color: #1d6a3f; }
.gs-cal { width: 100%; max-width: 1000px; }

.gp-copy { gap: 20px; }
.gp-video { width: 300px; max-width: 100%; }
@media (max-width: 900px) { .gp { display: flex; flex-direction: column; } .gp-copy { display: contents; } .gp-copy > h1 { order: 1; } .gp-copy > .lede { order: 2; } .gp-form { order: 3; } .gp-copy > div { order: 4; align-self: center; } }
@media (max-width: 900px) { .gp-video { width: 100%; max-width: 420px; } }

/* Plans: hover */
.js .pl-card, .pl-card { transition: opacity 0.7s ease, transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s ease, background 0.3s ease; }
.pl-card::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); transform: scaleX(0); transition: transform 0.45s var(--ease-out); }
@media (hover: hover) {
  .pl-card.is-in:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--c) 80%, #10201a); border-color: color-mix(in srgb, var(--c) 70%, #fff); }
  .pl-card.is-popular.is-in:hover { border-color: var(--ink); }
  .pl-card:hover::before { transform: scaleX(1); }
  .pl-card:hover .pl-name i { transform: rotate(45deg) scale(1.15); }
  .pl-card .pl-inc li svg { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .pl-card:hover .pl-inc li svg { transform: scale(1.25); }
  .pl-card:hover .pl-inc li:nth-child(2) svg { transition-delay: 40ms; } .pl-card:hover .pl-inc li:nth-child(3) svg { transition-delay: 80ms; } .pl-card:hover .pl-inc li:nth-child(4) svg { transition-delay: 120ms; } .pl-card:hover .pl-inc li:nth-child(5) svg { transition-delay: 160ms; } .pl-card:hover .pl-inc li:nth-child(6) svg { transition-delay: 200ms; } .pl-card:hover .pl-inc li:nth-child(7) svg { transition-delay: 240ms; }
  .pl-card:hover .btn-secondary { background: var(--ink); border-color: var(--ink); color: #fff; }
  .pl-tr:not(.pl-th):hover { background: #faf8f5; }
}
.pl-name i { transition: transform 0.4s var(--ease-out); }

/* Plans: three roomier cards, Scale and Enterprise band, picker */
.pl-grid { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.pl-card { padding: 30px 28px 32px; gap: 22px; }
.pl-name { font-size: 26px; }
.pl-name i { width: 14px; height: 14px; }
.pl-line { font-size: 16px; }
.pl-cta { min-height: 50px; font-size: 16px; }
@media (max-width: 760px) { .pl-cta { min-height: 44px; height: 44px; font-size: 15px; } }
.pl-lead { font-size: 14px; }
.pl-inc ul { gap: 12px; }
.pl-inc li { font-size: 15.5px; }
.pl-enterprise { width: calc(100% - 2 * var(--gutter, 24px)); max-width: 1216px; box-sizing: border-box; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.pl-ent-col { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 24px 28px; }
.pl-ent-col + .pl-ent-col { border-left: 1px solid var(--line); }
.pl-ent-col p { margin: 0 !important; }
.pl-ent-col .go { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pl-ent-col .go:hover { text-decoration: underline; }
@media (max-width: 700px) { .pl-enterprise { grid-template-columns: minmax(0, 1fr); } .pl-ent-col + .pl-ent-col { border-left: 0; border-top: 1px solid var(--line); } }

/* Plans: included in every plan */
.pl-every { width: calc(100% - 2 * var(--gutter)); max-width: 1216px; box-sizing: border-box; margin: 8px auto 20px; padding: 40px 44px 44px; border-radius: 32px; background: #f3f6f4; }
.pl-every h2 { margin: 0 0 30px; text-align: center; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.03em; color: var(--ink); }
.pl-every-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.pl-every-h { display: block; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #d9e2dc; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #4b5a51; }
.pl-every ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pl-every li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text); }
.pl-every li svg { flex-shrink: 0; margin-top: 2px; color: #2d6a4f; }
@media (max-width: 860px) { .pl-every { padding: 28px 22px; } .pl-every-cols { grid-template-columns: minmax(0, 1fr); } }

/* Plans: feature explanations */
.pl-feat { display: flex; align-items: center; gap: 6px; }
.pl-tip { position: relative; display: inline-flex; flex-shrink: 0; }
.pl-tip-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: #a39e95; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.pl-tip-btn:hover, .pl-tip-btn:focus-visible, .pl-tip.is-open .pl-tip-btn { color: var(--ink); background: #efece6; outline: none; }
.pl-tip-box { position: absolute; left: -8px; top: calc(100% + 8px); z-index: 5; width: 280px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: rgba(255, 255, 255, 0.9); font-size: 13.5px; line-height: 1.5; text-align: left; box-shadow: 0 20px 40px -20px rgba(16, 32, 26, 0.6); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.pl-tip-box::before { content: ''; position: absolute; left: 14px; top: -5px; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.pl-tip-box a { color: #a9dcc0; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pl-tip-box a:hover { text-decoration: underline; }
.pl-tip.is-open .pl-tip-box { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .pl-tip:hover .pl-tip-box, .pl-tip:focus-within .pl-tip-box { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
@media (max-width: 700px) { .pl-tip-box { width: min(260px, calc(100vw - 60px)); } .pl-tip-btn { width: 22px; height: 22px; } }
.pl-th { z-index: 6; }

/* ---------- Phone System page ---------- */
.ps { position: relative; width: min(980px, 100%); display: grid; grid-template-columns: 210px 220px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 70px; row-gap: 28px; align-items: center; text-align: left; }
.ps-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-svg path { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; transition: stroke 0.3s ease, opacity 0.3s ease; }
.ps-svg path.is-dash { stroke-dasharray: 5 6; }
.ps-svg path.is-live { stroke: #fff; }
.ps-svg path.is-dim { opacity: 0.35; }
.ps-svg .pulse rect { fill: #10201a; filter: none; }
.ps-node { position: relative; z-index: 1; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.08), 0 24px 44px -26px rgba(30, 40, 110, 0.6); transition: opacity 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; }
.ps-call, .ps-hours { grid-row: 1 / 3; display: flex; align-items: center; gap: 11px; padding: 14px; }
.ps-t b { display: block; font-size: 14.5px; color: var(--ink); }
.ps-t > span { display: block; font-size: 12.5px; color: #6f6c66; }
.ps-ring { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eef0fc; color: #4a5bc4; }
.ps-ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #8ea2ee; animation: rc-ring 1.5s ease-out infinite; }
.ps-hours-ico { position: relative; flex-shrink: 0; display: grid; width: 40px; height: 40px; border-radius: 12px; background: #fff4d6; color: #b07a0c; transition: background 0.4s ease, color 0.4s ease; }
.ps-hours-ico i { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.3s ease, transform 0.4s ease; }
.ps-moon { opacity: 0; transform: rotate(-40deg); }
.ps[data-mode="night"] .ps-hours-ico { background: #e6e9fb; color: #3d4aa8; }
.ps[data-mode="night"] .ps-sun { opacity: 0; transform: rotate(40deg); }
.ps[data-mode="night"] .ps-moon { opacity: 1; transform: none; }
.ps-night { display: none; }
.ps[data-mode="night"] .ps-night { display: inline; }
.ps[data-mode="night"] .ps-day { display: none; }
.ps-team, .ps-ai { grid-column: 3; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-head b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--ink); }
.ps-head img { display: block; }
.ps-timer { padding: 2px 8px; border-radius: 999px; background: #f3f1ec; font-size: 11.5px; font-weight: 600; color: #6f6c66; font-variant-numeric: tabular-nums; }
.ps-devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-dev { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px; background: #f7f6f3; transition: background 0.3s ease, box-shadow 0.3s ease; }
.ps-dev b { display: block; font-size: 12.5px; color: var(--ink); }
.ps-dev em { display: block; font-style: normal; font-size: 11px; color: #8a857d; }
.ps-dev-ico { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #4a5bc4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.ps.is-ringing .ps-dev { box-shadow: inset 0 0 0 1.5px #8ea2ee; background: #f3f4fd; }
.ps.is-ringing .ps-dev-ico { animation: rc-shake 1.2s ease-in-out infinite; }
.ps.is-ringing .ps-dev:nth-child(2) .ps-dev-ico { animation-delay: 0.2s; }
.ps.is-ringing .ps-dev:nth-child(3) .ps-dev-ico { animation-delay: 0.4s; }
.ps-ai-sub { font-size: 12.5px; color: #6f6c66; }
.ps-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e3f3e8; font-size: 12px; font-weight: 700; color: #1d6a3f; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.35s ease; }
.ps.team-ok .ps-team .ps-ok, .ps.ai-ok .ps-ai .ps-ok { opacity: 1; transform: none; }
.ps[data-mode="day"] .ps-ai { opacity: 0.55; }
.ps[data-mode="night"] .ps-team { opacity: 0.45; }
.ps[data-mode="night"] .ps-ai { box-shadow: 0 0 0 2px #10201a, 0 24px 44px -26px rgba(30, 40, 110, 0.6); }
.ps[data-mode="day"] .ps-team { box-shadow: 0 0 0 2px #10201a, 0 24px 44px -26px rgba(30, 40, 110, 0.6); }
@media (max-width: 860px) {
  .ps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .ps-svg { display: none; }
  .ps-call, .ps-hours, .ps-team, .ps-ai { grid-row: auto; grid-column: auto; }
  .ps-devs { grid-template-columns: minmax(0, 1fr); }
}

/* Card 1: your number, your phones */
.ps-wf { width: min(500px, calc(100% - 40px)); gap: 60px; }
.ps-wf .wf-col { gap: 10px; }
.ps-num { flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; text-align: center; }
.ps-num b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ps-num > span:last-child { font-size: 12px; color: #7a766f; }
.ps-num-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px; background: #eef0fc; color: #4a5bc4; }
.ps-line { padding: 9px 11px; gap: 9px; transition: opacity 0.3s ease; }
.ps-line b { font-size: 13px; }
.ps-line .ps-dev-ico { background: #eef0fc; box-shadow: none; }
.ps-tog { margin-left: auto; flex-shrink: 0; position: relative; width: 30px; height: 18px; border-radius: 9px; background: #2d6a4f; transition: background 0.3s ease; }
.ps-tog i { position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.3s ease; }
.ps-line.is-off { opacity: 0.6; }
.ps-line.is-off .ps-tog { background: #cfcac0; }
.ps-line.is-off .ps-tog i { left: 2px; }
@media (max-width: 700px) { .ps-wf { gap: 16px; } }

/* Card 2: live calls */
.ps-live { --step: 0.85s; width: min(430px, calc(100% - 40px)); gap: 10px; }
.ps-live-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.ps-live-h b { font-size: 15px; color: var(--ink); }
.ps-live-h span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3d4540; }
.ps-live-h i { width: 7px; height: 7px; border-radius: 50%; background: #e04848; animation: wf-blink 1.4s ease-in-out infinite; }
.ps-lrow, .ps-in-h { display: flex; align-items: center; gap: 10px; }
.ps-lrow { padding: 11px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 60, 100, 0.6); }
.ps-lrow b, .ps-in-h b { display: block; font-size: 14px; color: var(--ink); }
.ps-lrow > span:nth-child(2) > span, .ps-in-h > span:nth-child(2) > span { display: block; font-size: 12px; color: #7a766f; }
.ps-lrow em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #7a766f; font-variant-numeric: tabular-nums; }
.ps-av { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e8f5ed; color: var(--brand); font-size: 13px; font-weight: 700; }
.ps-av--ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #82c2ec; animation: rc-ring 1.4s ease-out infinite; }
.ps-in { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 2px #10201a, 0 20px 40px -24px rgba(20, 60, 100, 0.6); }
.ps-mem { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #f3f8fc; }
.ps-mem span { position: relative; padding-left: 14px; font-size: 12.5px; color: #2a332e; }
.ps-mem span::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #82c2ec; }
.ps-in-act { display: flex; justify-content: flex-end; }
.ps-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; border: 1px solid #e6e2db; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ps-btn--go { background: #2d6a4f; border-color: #2d6a4f; color: #fff; }

/* Card 3: hold and transfer */
.ps-xfer { --step: 0.85s; width: min(420px, calc(100% - 40px)); gap: 10px; }
.ps-x-card { display: flex; flex-direction: column; gap: 11px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -24px rgba(60, 30, 110, 0.6); }
.ps-x-h { display: flex; align-items: center; gap: 10px; }
.ps-x-h b { display: block; font-size: 14px; color: var(--ink); }
.ps-x-h span span { display: block; font-size: 12px; color: #7a766f; }
.ps-x-say { margin: 0; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #f5f1eb; font-size: 13px; color: var(--ink); align-self: flex-start; }
.ps-x-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-hold { background: #fff6dd; border-color: #f2dea0; color: #7a5410; }
.ps-xbtn { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease; }
.om.is-play .ps-xbtn { animation: og-press2 0.45s 2.9s both; }
.ps-x-done { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #1d4a35; }
.ps-x-ai { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 12.5px; color: #3b2a66; }
.ps-x-ai img { display: block; }

/* Card 4: cell shows the business number */
.ps-cells { --step: 0.85s; width: min(470px, calc(100% - 40px)); flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.ps-phone { flex: 0 1 190px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px 20px; border-radius: 30px; background: #10201a; color: #fff; text-align: center; box-shadow: 0 30px 50px -30px rgba(10, 40, 20, 0.8), inset 0 0 0 5px #1d2f27; aspect-ratio: 9 / 15; justify-content: center; }
.ps-phone--in { background: #f7f6f2; color: var(--ink); box-shadow: 0 30px 50px -30px rgba(10, 40, 20, 0.6), inset 0 0 0 5px #e4e1da; }
.ps-ph-l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.55; margin-bottom: 10px; }
.ps-ph-from { font-size: 11.5px; opacity: 0.75; }
.ps-ph-from b { font-weight: 700; }
.ps-ph-name { font-size: 17px; letter-spacing: -0.01em; }
.ps-ph-sub { font-size: 12px; opacity: 0.65; font-variant-numeric: tabular-nums; }
.ps-ph-end { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 16px; border-radius: 50%; background: #e04848; color: #fff; transform: rotate(135deg); }
.ps-ph-btns { display: flex; gap: 22px; margin-top: 16px; }
.ps-ph-btns i { width: 38px; height: 38px; border-radius: 50%; background: #e04848; }
.ps-ph-btns i.go { background: #2fa463; animation: rc-shake 1.2s ease-in-out infinite; }
.ps-arrow { flex-shrink: 0; width: 26px; height: 2px; background: #10201a; position: relative; }
.ps-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid #10201a; border-right: 2px solid #10201a; transform: rotate(45deg); }
@media (max-width: 700px) { .ps-live, .ps-xfer { zoom: 0.88; width: calc(100% - 36px); } .ps-cells { zoom: 0.85; } }
@media (max-width: 860px) { .ps-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ps-dev { flex-direction: column; align-items: flex-start; gap: 6px; } .ps-dev em { display: none; } .ps-call, .ps-hours { padding: 11px 12px; } }
.ps-in-t { margin-left: auto; font-style: normal; font-size: 12.5px; color: #7a766f; font-variant-numeric: tabular-nums; }
.ps-mem { gap: 7px; }
.ps-mem-h { display: flex; align-items: center; gap: 6px; padding-left: 0 !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #3a6a8e !important; }
.ps-mem-h::before { display: none; }
.ps-mem-h img { display: block; }
/* Card 4: call from the app */
.ps-app { --step: 0.85s; width: min(420px, calc(100% - 40px)); gap: 10px; }
.ps-app-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.ps-app-h b { display: block; font-size: 14px; color: var(--ink); }
.ps-app-h > span:nth-child(2) > span { display: block; font-size: 12px; color: #7a766f; }
.ps-call-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; background: #2d6a4f; color: #fff; font-size: 12.5px; font-weight: 600; }
.om.is-play .ps-call-btn { animation: ps-tap 0.45s 0.9s both; }
@keyframes ps-tap { 40% { transform: scale(0.9); } 100% { transform: none; } }
.ps-app-live { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 18px; background: #10201a; color: #fff; }
.ps-app-live b { display: block; font-size: 13.5px; }
.ps-app-t { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; }
.ps-app-t i { font-style: normal; }
.ps-app-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #3fbf77; box-shadow: 0 0 0 4px rgba(63, 191, 119, 0.25); animation: wf-blink 1.4s ease-in-out infinite; }
.ps-app-ctl { margin-left: auto; display: flex; gap: 6px; }
.ps-app-ctl em { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; }
.ps-app-ctl em.end { background: #e04848; }
.ps-app-ctl em.end svg { transform: rotate(135deg); }
.ps-app-card { padding: 11px 13px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.ps-app-card p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: #3d4540; }
@media (max-width: 700px) { .ps-app { zoom: 0.9; width: calc(100% - 36px); } }

/* Internal pricing page */
.pl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1280px; gap: 16px; }
.pl-grid--4 .pl-card { padding: 26px 22px 28px; }
.pl-grid--4 .pl-name { font-size: 23px; }
.pl-price { display: flex; align-items: flex-end; gap: 10px; }
.pl-price b { font-size: 44px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-price span { padding-bottom: 3px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.pl-table--4 .pl-tr { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
.pl-enterprise--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .pl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 640px) { .pl-grid--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .pl-table--4 .pl-tr { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 0.55fr)); } }

/* AI Receptionist: website chat, seen by the visitor */
.rw { --step: 0.9s; width: min(380px, calc(100% - 40px)); gap: 10px; }
.rw-site { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; color: #1d4a35; }
.rw-win { border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.08), 0 30px 60px -30px rgba(20, 70, 40, 0.6); overflow: hidden; }
.rw-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #10201a; color: #fff; }
.rw-h b { display: block; font-size: 14px; }
.rw-h > span:last-child > span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
.rw-av { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.rw-av img { display: block; }
.rw-on { width: 7px; height: 7px; border-radius: 50%; background: #4cc485; }
.rw-body { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 14px; }
.rw-me, .rw-them { display: flex; }
.rw-me { justify-content: flex-end; }
.rw-me p, .rw-them p { margin: 0; max-width: 84%; padding: 8px 12px; font-size: 13px; line-height: 1.42; }
.rw-me p { background: #10201a; color: #fff; border-radius: 14px 14px 4px 14px; }
.rw-them p { background: #f3f1ec; color: var(--ink); border-radius: 14px 14px 14px 4px; }
.rw-form { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 12px; border-radius: 14px; border: 1px solid #e6e2db; background: #fbfaf8; }
.rw-form > b { font-size: 12.5px; color: var(--ink); }
.rw-f { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 11px; border-radius: 9px; background: #fff; border: 1px solid #e3dfd8; }
.rw-f i { flex-shrink: 0; width: 38px; font-style: normal; font-size: 11px; color: #9a958d; }
.rw-type { overflow: hidden; white-space: nowrap; width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; border-right: 1.5px solid transparent; }
.om.is-play .rw-type { animation: rw-type calc(var(--n) * 0.06s) var(--d) steps(var(--n)) forwards; }
@keyframes rw-type { from { width: 0; } to { width: calc(var(--n) * 1ch); } }
.rw-go { align-self: flex-end; padding: 6px 14px; border-radius: 999px; background: #10201a; color: #fff; font-size: 12px; font-weight: 600; }
.om.is-play .rw-go { animation: ps-tap 0.4s 4.2s both; }
.rw-inbox { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px -24px rgba(20, 70, 40, 0.6); }
.rw-inbox b { display: block; font-size: 13.5px; color: var(--ink); }
.rw-inbox > span:nth-child(2) > span { display: block; font-size: 12px; color: #7a766f; }
.rw-inbox .og-tag { margin-left: auto; }
@media (max-width: 700px) { .rw { zoom: 0.88; width: calc(100% - 36px); } }

/* Homepage hero: each picture plays its moment while it is on screen */
.hero-slide [data-hm] { opacity: 0; transform: translateY(8px); transition: opacity 0s linear 0.7s, transform 0s linear 0.7s; }
.hero-slide.is-on [data-hm] { opacity: 1; transform: none; transition: opacity 0.45s ease var(--d, 0s), transform 0.55s var(--ease-out) var(--d, 0s); }
.hero-slide [data-hm="0"] { --d: 0.25s; } .hero-slide [data-hm="1"] { --d: 0.7s; } .hero-slide [data-hm="2"] { --d: 1.1s; }
.hero-slide [data-hm="3"] { --d: 1.5s; } .hero-slide [data-hm="4"] { --d: 1.9s; } .hero-slide [data-hm="5"] { --d: 2.3s; }
.hero-slide [data-hm="6"] { --d: 2.7s; } .hero-slide [data-hm="7"] { --d: 3.1s; } .hero-slide [data-hm="8"] { --d: 3.5s; }
.hero-slide [data-hm="9"] { --d: 3.9s; } .hero-slide [data-hm="10"] { --d: 4.3s; }
.hero-slide [data-hm-wave] > span { transform-origin: center; }
.hero-slide.is-on [data-hm-wave] > span { animation: hm-wave 0.9s ease-in-out infinite alternate; }
.hero-slide [data-hm-wave] > span:nth-child(3n) { animation-delay: -0.3s; } .hero-slide [data-hm-wave] > span:nth-child(3n + 1) { animation-delay: -0.6s; } .hero-slide [data-hm-wave] > span:nth-child(4n) { animation-duration: 0.7s; }
@keyframes hm-wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.hero-slide.is-on [data-hm-ring] { animation: hm-ring 1.6s ease-out 0.7s 1; }
@keyframes hm-ring { 0% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(45, 106, 79, 0); } }
.hero-slide [data-hm-wire] { position: relative; }
.hero-slide [data-hm-wire]::after { content: ''; position: absolute; top: 50%; left: 0; width: 18px; height: 4px; margin-top: -2px; border-radius: 2px; background: #10201a; opacity: 0; }
.hero-slide.is-on [data-hm-wire]::after { animation: hm-pulse 1s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d) + 0.15s) 1 both; }
@keyframes hm-pulse { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-slide [data-hm] { opacity: 1; transform: none; transition: none; } .hero-slide [data-hm-wave] > span, .hero-slide [data-hm-ring], .hero-slide [data-hm-wire]::after { animation: none !important; } }
.hero-slide.hm-prep [data-hm] { opacity: 0; transform: translateY(8px); transition: none; }

/* ---------- Phone sizing pass (one type scale, tighter panels) ---------- */
@media (max-width: 760px) {
  .display, .ask > .display, .showcase-section > .display, .closer .display, .pl-compare > .display { font-size: 29px; line-height: 1.1; letter-spacing: -0.03em; }
  .h2 { font-size: 25px; line-height: 1.12; }
  .lede, .ask-sub { font-size: 16px; line-height: 1.5; }

  /* Hero: the headline on two lines, a smaller picture */
  .hero { padding-top: 32px; padding-bottom: 36px; gap: 30px; }
  .hero-copy { width: 100%; min-width: 0; }
  .hero-title { font-size: min(7vw, 34px); line-height: 1.12; letter-spacing: -0.035em; }
  .hero-title .hero-lead, .hero-title .hero-end { white-space: nowrap; }
  .hero-cta { margin-top: 22px; }
  .hero-stage { height: calc(566px * 0.86); }
  .hero-frame--phone { zoom: 0.86; }

  /* Busy med spas: smaller tabs and panel */
  .showcase-section { padding-top: 48px; padding-bottom: 72px; gap: 12px; }
  .showcase { min-height: 0; gap: 16px; }
  .showcase-subs { min-height: 66px; font-size: 16px; padding: 0; }
  .tab { height: 38px; padding: 0 15px; border-radius: 12px; font-size: 14.5px; }
  .tabloop .tabrow { gap: 8px; }
  .showcase-panel .scene-inner { height: 470px; border-radius: 24px; }

  /* Ask box */
  .ask { padding-bottom: 72px; gap: 10px; }
  .ask-sub { margin-bottom: 8px; }
  .ask-box { border-radius: 20px; }
  .ask-box textarea { min-height: 104px; padding: 16px 18px; border-radius: 20px; font-size: 16px; }
  .ask-ph { left: 19px; right: 18px; top: 17px; font-size: 16px; }
  .ask-tray { margin: 0 12px; padding: 8px; gap: 6px; border-radius: 0 0 16px 16px; }
  .ask-chip { height: 32px; padding: 0 11px; border-radius: 10px; font-size: 13px; }
  .ask-send { width: 40px; height: 34px; border-radius: 10px; }
  .ask-step, .ask-done { padding: 18px 16px; border-radius: 20px; }

  /* Stacked cards: compact and structured */
  .stack-title > span { padding: 0 0 20px; font-size: 29px; }

  .closer { padding-bottom: 80px; gap: 20px; }
}
@media (max-width: 700px) { .pl-tip-box { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; z-index: 60; font-size: 14px; } .pl-tip-box::before { display: none; } }

/* ---------- Phones: buttons, one-line headings, cards as a swipe row ---------- */
.stack-dots { display: none; }
@media (max-width: 760px) {
  .btn, .btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
  .btn-secondary { padding: 0 19px; }
  .btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }
  .hero-cta { gap: 10px; }
  [data-fit] { white-space: nowrap; text-wrap: nowrap; }

  .ask { gap: 8px; padding-bottom: 64px; }
  .ask-sub { font-size: 15px; margin-bottom: 6px; }
  .ask-box textarea { min-height: 92px; }

  .closer { gap: 18px; padding-top: 10px; padding-bottom: 72px; }

  /* Cards: a horizontal swipe row, each card a compact column with the button at the bottom */
  .stack { padding-bottom: 56px; }
  .stack-title > span { font-size: 26px; padding-bottom: 18px; }
  .stack-track { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stack-track::-webkit-scrollbar { display: none; }
  .stack-mark { display: none; }
  .stack-card { flex: 0 0 84%; max-width: 360px; margin: 0 !important; scroll-snap-align: start; display: flex; }
  .stack-face { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 16px 16px; border-radius: 22px; }
  .stack-body, .stack-body--flip { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; }
  .stack-body .layer-text { display: contents; }
  .stack-eyebrow { order: 1; margin-bottom: 6px; font-size: 13.5px; }
  .stack-body .h2 { order: 2; font-size: 21px; line-height: 1.15; margin: 0 0 6px; }
  .stack-body .lede { order: 3; font-size: 14.5px; line-height: 1.45; margin: 0 0 14px; }
  .stack-body .layer-media { order: 4; flex: 0 0 auto; width: 100%; max-width: none; }
  .stack-body .layer-panel .scene-inner { height: 330px; border-radius: 16px; }
  .stack-cta { order: 5; margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .stack-cta .btn { width: 100%; height: 44px; font-size: 15px; }
  .stack-cta .go { justify-content: center; padding: 10px 0 2px; font-size: 14.5px; }
  .stack-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .stack-dots i { width: 6px; height: 6px; border-radius: 3px; background: #d9d4cb; transition: width 200ms ease, background 200ms ease; }
  .stack-dots i.is-on { width: 18px; background: var(--ink); }
}
@media (max-width: 760px) { .stack-eyebrow { align-self: flex-start; } }

/* Phones: card text left aligned; ask box line and chips on one line */
@media (max-width: 760px) {
  .stack-body .h2, .stack-body .lede { align-self: stretch; text-align: left; }
  .ask-tray { flex-wrap: nowrap; align-items: center; }
  .ask-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 96%); mask-image: linear-gradient(90deg, #000 72%, transparent 96%); padding-right: 24px; }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex: 0 0 auto; }
}
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .ask-chips { flex-wrap: nowrap; } }

/* Outreach hero on phones and tablets: the sequence as a compact flow on an orange panel, a pulse running down */
@media (max-width: 1100px) {
  .fhero { gap: 28px; padding: 28px 0 56px; }
  .flow { width: min(440px, calc(100% - 2 * var(--gutter))); gap: 18px; padding: 24px 20px; box-sizing: border-box; border-radius: 24px; background-color: #f4b074; background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%), radial-gradient(100% 90% at 100% 100%, rgba(16, 32, 26, 0.1), rgba(16, 32, 26, 0) 60%); }
  .flow-node { border: 0; border-radius: 14px; box-shadow: 0 12px 24px -18px rgba(120, 60, 10, 0.6); }
  .flow-node:nth-child(n+5) { display: flex; }
  .flow-node:nth-child(n+5) { display: block; }
  .flow-node:nth-child(6) { display: none; }
  .flow-node:nth-child(4)::after { display: block; }
  .flow-node:nth-child(6)::after, .flow-node:nth-child(7)::after { display: none; }
  .flow-node:last-child::after { display: none; }
  .flow-node:not(:last-child)::after { left: 27px; bottom: -19px; height: 18px; background: linear-gradient(#10201a, #10201a) 0 -10px / 2px 8px no-repeat, rgba(255, 255, 255, 0.9); animation: flow-drip 2.8s linear infinite; }
  .flow-node:nth-child(3)::after { animation-delay: 0.5s; } .flow-node:nth-child(4)::after { animation-delay: 1s; } .flow-node:nth-child(5)::after { animation-delay: 1.5s; }
  .flow-tag { padding: 4px 12px; font-size: 11px; text-align: left; }
  .flow-row { padding: 9px 12px; gap: 10px; }
  .flow-ico { width: 30px; height: 30px; }
  .flow-txt b { font-size: 14px; }
  .flow-txt span { font-size: 12px; }
}
@keyframes flow-drip { 0% { background-position: 0 -10px, 0 0; } 30% { background-position: 0 20px, 0 0; } 100% { background-position: 0 20px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .flow-node::after { animation: none !important; } }

/* Phone System hero on phones: call and hours side by side, then who answers.
   The highlighted card (team by day, MedspAI after hours) tells the story. */
@media (max-width: 860px) {
  .ps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px; }
  .ps-call, .ps-hours { gap: 8px; padding: 10px; border-radius: 16px; min-width: 0; }
  .ps-ring, .ps-hours-ico { width: 30px; height: 30px; }
  .ps-ring svg, .ps-hours-ico svg { width: 15px; height: 15px; }
  .ps-t { min-width: 0; }
  .ps-t b { font-size: 12.5px; white-space: nowrap; }
  .ps-t > span { font-size: 11.5px; white-space: nowrap; }
  .ps-team, .ps-ai { grid-column: 1 / -1; gap: 9px; padding: 12px 14px; }
  .ps-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ps-dev { padding: 7px; gap: 6px; }
  .ps-dev em { display: none; }
  .ps-dev-ico { width: 24px; height: 24px; }
  .ps-team .ps-ok { position: absolute; top: 11px; right: 12px; }
  .ps-ai .ps-ok { flex-shrink: 0; }
  .ps-by { display: none; }
  .ps-ai .ps-head b { white-space: nowrap; }
  .ps.team-ok .ps-team .ps-timer { opacity: 0; }
  .ps-ai { flex-direction: row; align-items: center; justify-content: space-between; }
  .ps-ai .ps-ai-sub { display: none; }
}
.ps-x-ai { white-space: nowrap; }

/* Assignments: the completed one leaves the Open list */
.om.is-play .og-task--new { animation: og-out 0.6s 5.4s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
.og-tasks { min-height: 300px; justify-content: flex-start; }

/* Organization channels card on phones: channels as small chips, an arrow, then the thread */
@media (max-width: 700px) {
  .og-wf { display: flex; flex-direction: column; align-items: center; gap: 0; width: calc(100% - 28px); }
  .og-wf .wf-col:first-child { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .og-src { padding: 6px 10px 6px 6px; gap: 6px; border-radius: 999px; }
  .og-src > span:last-child > span { display: none; }
  .og-src b { font-size: 12.5px; }
  .og-src-ico { width: 24px; height: 24px; border-radius: 50%; }
  .og-src-ico svg { width: 13px; height: 13px; }
  .og-wf .wf-col--to { width: 100%; margin-top: 30px; position: relative; }
  .og-wf .wf-col--to::before { content: ''; position: absolute; left: 50%; top: -24px; width: 2px; height: 18px; margin-left: -1px; background: linear-gradient(#10201a, #10201a) 0 -8px / 2px 6px no-repeat, rgba(255, 255, 255, 0.95); animation: flow-drip 2.2s linear infinite; }
  .og-dest { width: 100%; box-sizing: border-box; padding: 16px 14px; }
}

/* Call Intelligence hero on phones: shorter dashboard */
@media (max-width: 860px) {
  .ci-dash { gap: 10px; padding: 14px; }
  .ci-top .ci-title { font-size: 16px; }
  .ci-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ci-stat { padding: 9px 8px; }
  .ci-stat:nth-child(3) { border-left: 1px solid #f0ede7; }
  .ci-stat:nth-child(n + 3) { border-top: 0; }
  .ci-stat b { font-size: 19px; }
  .ci-stat span { font-size: 10.5px; line-height: 1.25; }
  .ci-stat em { display: none; }
  .ci-box { padding: 12px; gap: 8px; }
  .ci-box-h { font-size: 13px; }
  .ci-donut { width: 76px !important; height: 76px !important; }
  .ci-donut-wrap b { font-size: 15px !important; }
  .ci-donut-wrap > span { font-size: 10px; }
  .ci-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px !important; }
  .ci-flags .ci-row:nth-of-type(n + 2) { display: none; }
  .ci-row { padding: 6px 0; gap: 4px; }
  .ci-row p { font-size: 12px; }
}

/* Homepage AI Receptionist card: a call, a text and a web chat answered at once */
.ha { width: min(420px, calc(100% - 32px)); gap: 10px; }
.ha-row { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.06), 0 16px 30px -22px rgba(20, 70, 45, 0.55); }
.ha-top { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #77736c; white-space: nowrap; }
.ha-top b { font-size: 13.5px; color: var(--ink); }
.ha-top time { margin-left: auto; font-variant-numeric: tabular-nums; }
.ha-ch { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #e3f3e8; color: #2d6a4f; }
.ha-q { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.ha-a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: #eef7f1; font-size: 13px; line-height: 1.35; color: #1d3a2c; }
.ha-a img { flex-shrink: 0; }
.ha-a span { flex: 1 1 auto; min-width: 0; }
.ha-a em { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: #fff; font-style: normal; font-size: 11px; font-weight: 700; color: #2d6a4f; white-space: nowrap; }
.ha-sum { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #10201a; font-size: 12.5px; font-weight: 600; color: #fff; }
@media (max-width: 760px) {
  .ha { width: calc(100% - 36px); gap: 8px; }
  .ha-row { padding: 9px 11px 10px; gap: 5px; }
  .ha-top time, .ha-a em { display: none; }
  .ha-q { font-size: 13.5px; }
  .ha-a { padding: 7px 9px; font-size: 12.5px; }
}
@media (max-width: 380px) { .ps { column-gap: 8px; } .ps-call, .ps-hours { gap: 6px; padding: 9px 8px; } .ps-t b { font-size: 12px; } .ps-t > span { font-size: 11px; } }
@media (max-width: 760px) { .stack-go { white-space: nowrap; font-size: 15px; gap: 6px; } }
@media (max-width: 380px) { .stack-go { font-size: 14px; } }
@media (max-width: 760px) { .rn-moon { top: 14px; right: 18px; } .rn-moon svg { width: 20px; height: 20px; } }

/* Nothing may ever make the page wider than the screen (iPhone opens such pages zoomed in) */
html, body { overflow-x: clip; }
/* After-hours card on phones: the moon fades in place instead of drifting up */
@media (max-width: 760px) { .scene-inner:has(.rn.is-play) .rn-moon { transform: none; } }
/* Phones: every card's color panel stretches so all panels end at the same line */
@media (max-width: 760px) {
  .stack-body .layer-media { flex: 1 1 auto; display: flex; flex-direction: column; }
  .stack-body .layer-panel { flex: 1 1 auto; display: flex; flex-direction: column; }
  /* Height 0 + min-height: the picture can never push its panel taller, so it is
     always scaled to fit with room around it; the panel then stretches to line up. */
  .stack-body .layer-panel .scene-inner { flex: 1 1 0; height: 0; min-height: 440px; }
}
@media (max-width: 760px) { .wf-busy { zoom: 0.84; } .wf-busy .wf-caller b { white-space: nowrap; } }
@media (max-width: 760px) { .ci-lrow { flex-direction: column; align-items: flex-start; gap: 4px; } .ci-lrow .ci-stamp { order: -1; } }

/* ---------- Polish pass (Apple design review, Oct 2026): one type scale, two radii, one button height ---------- */
/* Type. Page headline (H1): home hero 80, every other page 64; phones 32.
   Section headline (H2): 52, secondary sections (Questions, Compare) 44; phones 26. Card headline 22 on phones. */
.hero-title { font-size: clamp(32px, 5.6vw, 80px); }
.display, .demo-head .display, .fhero-copy .display { font-size: clamp(32px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.showcase-section > .display, .ask > .display, .closer .display, .statement .display, .stack-title > span { font-size: clamp(26px, 3.6vw, 52px); line-height: 1.06; }
.faq > .display, .uses > .display, .pl-compare > .display { font-size: clamp(26px, 3.1vw, 44px); }
@media (max-width: 760px) {
  .hero-title { font-size: 32px; line-height: 1.1; }
  .display, .demo-head .display, .fhero-copy .display { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
  .showcase-section > .display, .ask > .display, .closer .display, .statement .display, .faq > .display, .uses > .display, .pl-compare > .display, .stack-title > span { font-size: 26px; line-height: 1.12; }
  .h2 { font-size: 24px; }
  .stack-body .h2 { font-size: 22px; }
  .pl-every h2 { font-size: 24px; }
}

/* Radii. Panels (hero stage, scene panels, plan band, form, video) 32 on desktop, 24 on phones. Cards 24 on desktop, 20 on phones. */
:root { --r-panel: 32px; --r-card: 24px; }
@media (max-width: 760px) { :root { --r-panel: 24px; --r-card: 20px; } }
.rhero-panel .scene-inner, .showcase-panel .scene-inner, .pl-every, .demo-video, .demo-cal-frame, .flow { border-radius: var(--r-panel); }
.pl-card, .pl-enterprise, .pl-note, .gp-form, .ask-box, .ask-box textarea, .ask-step, .ask-done, .use { border-radius: var(--r-card); }
.stack-face { border-radius: var(--r-panel); }
.stack-tab { border-radius: var(--r-panel) var(--r-panel) 0 0; }
@media (max-width: 967px) { .hero-stage, .hero-frame--phone { border-radius: var(--r-panel); } }
@media (max-width: 1100px) { .flow { border-radius: var(--r-panel); } }
@media (max-width: 760px) {
  .showcase-panel .scene-inner, .rhero-panel .scene-inner { border-radius: var(--r-panel); }
  .stack-face { border-radius: var(--r-card); }
  .ask-box, .ask-box textarea { border-radius: var(--r-card); }
}

/* Buttons. One page button: 50 on desktop, 44 on phones. The header button and tabs are the only smaller pills. */
.btn-lg { height: 50px; padding: 0 26px; font-size: 16.5px; }
@media (max-width: 760px) {
  .btn, .btn-lg, .pl-cta { height: 44px; min-height: 44px; padding: 0 20px; font-size: 15px; }
  .btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
  .tab { height: 40px; }
  .nav-menu-panel a { min-height: 44px; display: flex; align-items: center; }
}

/* Phones: every page headline is centered, including the Demo and Get pricing pages, which stack to one column. */
@media (max-width: 900px) {
  .demo-head, .demo-head .display, .demo-head .lede { text-align: center; align-items: center; }
  .demo-head .lede { max-width: none; }
  .gp-copy > h1, .gp-copy > .lede { text-align: center; }
  .gp-copy > .lede { max-width: 560px; align-self: center; }
}

/* Phones: the menu is a full-width sheet under the header with large rows, not a small dropdown. */
@media (max-width: 760px) {
  .nav-menu { position: static; }
  .nav-menu-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--hdr) + 2px); min-width: 0; padding: 12px; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 32, 26, 0.08), 0 30px 60px -24px rgba(16, 32, 26, 0.45); transform-origin: top center; }
  .nav-menu-panel a { padding: 0 14px; font-size: 18px; border-radius: 14px; }
  .nav-menu-h { padding: 8px 14px 6px; }
  .nav-menu-sep { margin: 8px 12px; }
  .nav-menu-sub i { width: 12px; height: 12px; border-radius: 4px; }
}
@media (max-width: 760px) {
  .ask-chip { height: 36px; }
  .stack-cta .go { padding: 12px 0 4px; }
}

/* Phones: cards in a row share row heights (eyebrow, headline, text, picture, button), so every
   picture starts on the same line and every button sits on the same line, whatever the text length. */
@media (max-width: 760px) {
  .stack-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 360px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: 12px; align-items: stretch; }
  .stack-card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; flex: none; max-width: none; }
  .stack-face { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .stack-body, .stack-body--flip { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .stack-eyebrow { grid-row: 1; }
  .stack-body .h2 { grid-row: 2; }
  .stack-body .lede { grid-row: 3; }
  .stack-body .layer-media { grid-row: 4; }
  .stack-cta { grid-row: 5; margin-top: 0; }
  /* Safari can let an animating element show outside a rounded, clipped panel; this keeps the clip. */
  .stack-body .scene-inner { isolation: isolate; transform: translateZ(0); }
}

/* Phones: on the demo page the calendar comes first, the founder video below it. */
@media (max-width: 900px) { .demo-grid .demo-video { order: 1; max-width: 320px; } }

/* Generated by tools/export_design.py from design/build.py. Do not edit. */
@container (max-width: 700px){.flowsrc{display:none !important}.flowgrid{grid-template-columns:0 0 minmax(0,1fr) !important}.mem{grid-template-columns:minmax(0,1fr) !important;gap:12px !important}.memi{grid-area:auto !important;justify-self:center !important}}
@container (max-width: 520px){.nrow{flex-wrap:wrap;row-gap:6px;padding:11px 0 !important}.nav{display:none !important}.nsum{white-space:normal !important}.nchip{display:none !important}.lsc{display:none !important}.lact{white-space:normal !important}}
@container (max-width: 700px){.hwin{margin:40px 0 0 20px !important;width:calc(100% - 40px) !important}.hrow{grid-template-columns:minmax(0,1fr) !important;padding:18px 20px !important;}.hhead{padding:20px 20px 18px !important}}
@container (max-width: 700px){.ulock-c{margin-bottom:22px !important}.ulock-d{font-size:16px !important}.ulock-t{font-size:18px !important}.ulock-b{font-size:16px !important}.ulock-note{padding:16px 16px 18px !important;gap:12px !important;border-radius:24px !important}.rvcard{padding:18px 16px 14px !important;width:calc(100% - 28px) !important}.rvt{grid-template-columns:minmax(0,1fr) !important;padding-left:12px !important;padding-right:12px !important}.rvtime{display:none !important}.rvnote{grid-column:1 !important}.ulock-late{display:none !important}.rvwhen{display:none !important}.rvsub{display:none}.rvx{font-size:15px !important}.rvn{font-size:14px !important}.rvt{padding-top:6px !important;padding-bottom:6px !important;gap:2px 12px !important}.rvcard{gap:12px !important}}
@container (max-width: 900px){.hwrap > div:last-child{flex:0 0 auto !important;width:100% !important}.hwrap,.mwrap,.cwrap{flex-direction:column !important;gap:20px !important}.hwrap{flex-direction:column !important}.hstat{display:none !important}.mbub{font-size:16px !important;padding:10px 14px !important}.mcell:last-child{display:none !important}.mwrap{gap:16px !important}.mcard{flex-wrap:wrap !important}.mwho{flex:1 1 100% !important;border-right:0 !important;padding-bottom:6px !important}.mcell{flex:1 1 100% !important;padding:6px 10px !important}.mconvo{padding:0 !important}.ccard{flex:0 0 auto !important;width:100%;max-width:480px}.creplies{display:none !important}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@container (max-width: 900px){.cwrap .creplies{display:none !important}.mwrap6{flex-direction:column !important;align-items:center !important}.mthread{flex:0 0 auto !important;width:100%;max-width:520px}.mpop{flex:0 0 auto !important;width:100%;max-width:520px;box-sizing:border-box;margin:12px 0 0 !important;align-self:center !important}.mtail,.mdim,.mcallrow{display:none !important}}
@container (max-width: 760px){.ibx-list{display:none !important}.ibx{width:calc(100% - 28px) !important;height:auto !important}.pcal{display:none !important}.pmsgs-h{display:none !important}.pmsgs{padding:14px !important}.pwrap{width:calc(100% - 32px) !important}.rcl{width:calc(100% - 28px) !important;padding:14px !important}.rcl-h{display:none !important}}
@container (max-width: 480px){.l2in{display:none !important}.l2th{justify-self:center !important;align-self:center !important;margin:0 !important;width:calc(100% - 32px) !important;box-sizing:border-box}.flowgrid{width:calc(100% - 28px) !important;grid-template-rows:56px repeat(3, 78px) !important}}
@container (max-width: 480px){.l1kb{justify-self:center !important;margin:14px 0 0 !important;width:calc(100% - 28px) !important;box-sizing:border-box;padding:12px 14px !important}.l1kb > div:nth-child(n+3){display:none !important}.l1ch{justify-self:center !important;margin:0 0 14px !important;width:calc(100% - 28px) !important;box-sizing:border-box;padding:12px 14px !important}}
@container (max-width: 480px){.chd .chp{display:none !important}}