@font-face {
  font-family: Inter;
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Outfit;
  src: url('../fonts/Outfit-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #142f34;
  --ink-soft: #27464a;
  --lime: #dff45c;
  --paper: #f5f6ee;
  --white: #fff;
  --muted: #657572;
  --line: #dfe5dc;
  --blue: #dfeaf4;
  --green: #e3f0db;
  --lilac: #ece4f2;
  --shadow: 0 22px 60px rgb(10 35 37 / 14%);
  font-family: Inter, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, calc(100% - 56px)); margin-inline: auto; }
.section-pad { padding-block: 112px; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 16px; transform: translateY(-160%); border-radius: 8px; background: var(--lime); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #71850b; outline-offset: 4px; }

.site-header { position: absolute; z-index: 5; inset: 0 0 auto; color: var(--white); }
.header-inner { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(255 255 255 / 15%); }
.brand img { width: 158px; height: auto; }
.main-nav { display: flex; gap: 38px; margin-left: 60px; }
.main-nav a, .site-footer a { text-decoration: none; }
.main-nav a { color: rgb(255 255 255 / 77%); font-size: 13px; transition: color .2s ease; }
.main-nav a:hover { color: var(--lime); }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 17px; font-size: 12px; }
.button-dark { background: var(--lime); color: var(--ink); }
.button-dark:hover, .button-lime:hover { background: #edf98f; }
.button-lime { background: var(--lime); color: var(--ink); }
.button-outline { border-color: #bac7c0; background: transparent; color: var(--ink); }
.button-outline:hover { border-color: var(--ink); background: #f7f9f2; }
.eyebrow { margin: 0 0 18px; color: #52716d; font-size: 11px; font-weight: 750; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-light { color: #d1dfda; }

.hero { position: relative; overflow: hidden; min-height: 728px; padding: 158px 0 28px; background: var(--ink); color: var(--white); }
.hero::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 45%, rgb(66 107 92 / 33%), transparent 42%), radial-gradient(ellipse at 12% 95%, rgb(22 67 68 / 80%), transparent 40%); content: ''; }
.hero-orbit { position: absolute; border: 1px solid rgb(223 244 92 / 10%); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: 690px; height: 690px; top: 45px; right: -5%; }
.hero-orbit-two { width: 840px; height: 840px; top: -30px; right: -10%; }
.hero-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: center; }
.hero-copy { padding-block: 18px; }
.status-dot, .demo-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Outfit, Inter, sans-serif; }
.hero h1 { margin: 0 0 22px; font-size: clamp(54px, 6vw, 78px); font-weight: 520; letter-spacing: -.055em; line-height: .98; }
.hero-lede { max-width: 460px; margin-bottom: 26px; color: #cad5d1; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link-light { color: #edf2ec; }
.text-link span { font-size: 17px; }
.hero-footnote { margin: 18px 0 0; color: #9fb3ad; font-size: 11px; }
.hero-demo { position: relative; padding: 0 0 20px 10px; }
.demo-caption { display: flex; align-items: center; margin-bottom: 12px; color: #d5e1dc; font-size: 10px; letter-spacing: .025em; }
.demo-live-dot { width: 6px; height: 6px; margin-right: 7px; background: #b6e5a3; }
.caption-divider { height: 12px; margin-inline: 10px; border-left: 1px solid rgb(255 255 255 / 23%); }
.app-window { display: grid; min-height: 356px; grid-template-columns: 48px 1fr; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 13px; background: #fbfcf8; box-shadow: var(--shadow); color: var(--ink); transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 15px 0; background: #143438; color: #adc0b9; }
.rail-mark { display: grid; width: 25px; height: 25px; place-items: center; margin-bottom: 12px; border-radius: 7px; background: var(--lime); color: var(--ink); font-family: Outfit, sans-serif; font-weight: 800; }
.rail-icon { display: grid; width: 25px; height: 25px; place-items: center; font-size: 14px; }
.rail-icon-active { border-radius: 7px; background: rgb(255 255 255 / 12%); color: var(--lime); }
.rail-spacer { flex: 1; }
.rail-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #eacfb9; color: #58473b; font-size: 8px; font-weight: 700; }
.app-content { display: grid; grid-template-columns: 215px minmax(0, 1fr); }
.app-topbar { position: absolute; inset: 0 0 auto; display: flex; height: 43px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #e8ece5; font-size: 11px; font-weight: 700; }
.app-content { position: relative; padding-top: 43px; }
.online-label { display: inline-flex; align-items: center; gap: 5px; color: #6c8079; font-size: 8px; font-weight: 500; }
.online-label i { width: 6px; height: 6px; border-radius: 50%; background: #6fb77d; }
.conversation-list { padding: 14px 0 0 13px; border-right: 1px solid #e8ece5; }
.conversation-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 10px 0; font-size: 9px; font-weight: 750; }
.count-pill { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 6px; background: #e7efdc; color: #3f693b; font-size: 8px; }
.conversation-item { display: flex; min-height: 54px; align-items: center; gap: 8px; padding: 8px 7px 8px 0; border-bottom: 1px solid #f0f2ec; }
.conversation-selected { margin-right: 0; background: #f1f5e8; }
.person-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #43534e; font-size: 8px; font-weight: 750; }
.avatar-sand { background: #f1dfcf; }.avatar-lilac { background: #e5dced; }.avatar-blue { background: #d9e7ec; }.avatar-green { background: #dce9d1; }
.conversation-meta { display: grid; min-width: 0; gap: 4px; }
.conversation-meta b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta small { overflow: hidden; color: #85918b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-time { align-self: flex-start; margin-left: auto; color: #85918b; font-size: 7px; }
.conversation-view { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 10px 13px 0; }
.chat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #edf0e9; }
.chat-head > span:nth-child(2) { display: grid; gap: 3px; font-size: 9px; }
.chat-head small { color: #85918b; font-size: 7px; }
.more-button { margin-left: auto; border: 0; background: none; font-size: 18px; }
.chat-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 10px; }
.chat-date { align-self: center; color: #9aa59f; font-size: 7px; }
.bubble { max-width: 88%; margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 8px; line-height: 1.5; }
.bubble-in { border: 1px solid #edf0e9; background: white; }.bubble-out { align-self: flex-end; background: #eaf1dc; }
.appointment-chip { display: flex; align-items: center; gap: 7px; margin-left: 5px; padding: 7px 9px; border: 1px solid #dce8ce; border-radius: 8px; background: #f6f9f0; }
.appointment-check { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #dff0d5; color: #4d814f; font-size: 9px; }
.appointment-chip span:last-child { display: grid; gap: 3px; }.appointment-chip b { font-size: 7px; }.appointment-chip small { color: #78867d; font-size: 7px; }
.chat-compose { display: flex; height: 32px; align-items: center; justify-content: space-between; padding: 0 9px; border: 1px solid #e6ebe3; border-radius: 7px; color: #a0aaa3; font-size: 8px; }
.send-icon { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 5px; background: var(--ink); color: white; font-size: 11px; }
.patient-card { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 7px; }
.patient-card-title { color: #687a72; font-weight: 700; }.patient-stage { color: #809169; }.patient-action { color: #365a4f; font-weight: 700; }
.hero-float-card { position: absolute; right: -17px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 10px; background: #fff; box-shadow: 0 12px 34px rgb(5 29 29 / 24%); color: var(--ink); animation: float-in 700ms 180ms both; }
.float-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--lime); font-weight: 800; }
.hero-float-card > span:last-child { display: grid; gap: 4px; }.hero-float-card b { font-size: 10px; }.hero-float-card small { color: #77857f; font-size: 8px; }
.hero-bottom { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 56px; color: #97aaa3; font-size: 10px; }.hero-bottom-line { width: 44px; border-top: 1px solid #71887e; }

.flow-section { background: var(--paper); }
.section-intro-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 54px; }
.section-intro h2, .tour-copy h2, .plans-heading h2, .studio-copy h2, .faq-title h2, .closing-inner h2 { margin-bottom: 0; font-size: clamp(38px, 4.5vw, 58px); font-weight: 520; letter-spacing: -.045em; line-height: 1.04; }
.section-intro-split > p { max-width: 430px; margin-bottom: 5px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.flow-track { display: grid; grid-template-columns: 1fr 78px 1fr 78px 1fr; align-items: center; }
.flow-step { min-height: 228px; padding: 24px 26px 20px 0; }
.flow-symbol { position: relative; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 25px; border: 1px solid #dce5d9; border-radius: 13px; background: #fff; }
.flow-symbol-chat { display: flex; align-items: center; justify-content: center; gap: 3px; }.flow-symbol-chat i { width: 4px; height: 4px; border-radius: 50%; background: #77946a; }
.flow-symbol-calendar b { font-family: Outfit, sans-serif; font-size: 19px; }.flow-symbol-calendar i { position: absolute; top: 7px; right: 6px; color: #718579; font-size: 6px; font-style: normal; }
.flow-symbol-kanban { display: flex; align-items: center; gap: 4px; }.flow-symbol-kanban i { width: 8px; height: 19px; border: 1px solid #a7b8a0; border-radius: 3px; background: #eff4e9; }.flow-symbol-kanban i:nth-child(2) { height: 26px; background: #e1edcd; }
.flow-number { margin-bottom: 11px; color: #71867c; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.flow-step h3 { margin-bottom: 10px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.flow-step > p:last-child { max-width: 260px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.flow-connector { display: flex; align-items: center; justify-content: center; padding-bottom: 35px; }.flow-connector::before { width: 54px; border-top: 1px dashed #a8b8ae; content: ''; }.flow-connector span { width: 7px; height: 7px; margin-left: -4px; border-top: 1px solid #7d9185; border-right: 1px solid #7d9185; transform: rotate(45deg); }

.product-tour { overflow: hidden; background: var(--ink); color: var(--white); }
.tour-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 75px; align-items: center; }
.tour-copy h2 { margin-bottom: 19px; font-size: clamp(37px, 4.3vw, 54px); }.tour-copy > p:not(.eyebrow):not(.tour-note) { max-width: 390px; margin-bottom: 34px; color: #b8c7c0; font-size: 13px; line-height: 1.8; }
.tour-tabs { display: flex; flex-direction: column; gap: 4px; }.tour-tab { display: flex; min-height: 48px; align-items: center; gap: 18px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #a9bab3; cursor: pointer; font-size: 13px; text-align: left; transition: background .2s ease, color .2s ease, border-color .2s ease; }.tour-tab > span { color: #829a8f; font-size: 10px; }.tour-tab:hover { color: white; }.tour-tab.is-active { border-color: rgb(255 255 255 / 12%); background: rgb(255 255 255 / 8%); color: white; }.tour-tab.is-active > span { color: var(--lime); }
.tour-note { margin: 23px 0 0; color: #91a79c; font-size: 10px; }.note-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }
.tour-stage { overflow: hidden; min-height: 350px; border: 1px solid rgb(255 255 255 / 19%); border-radius: 12px; background: #f8faf5; box-shadow: 0 25px 70px rgb(4 21 22 / 28%); color: var(--ink); }
.tour-stage-top { display: flex; height: 43px; align-items: center; gap: 12px; padding-inline: 16px; border-bottom: 1px solid #e6eae2; color: #57716b; font-size: 9px; }.stage-window-dots { display: flex; gap: 4px; }.stage-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d2dbd1; }.stage-window-dots i:first-child { background: #e7a995; }.stage-window-dots i:nth-child(2) { background: #e7d39a; }.stage-window-dots i:nth-child(3) { background: #abd0a3; }.stage-demo-label { margin-left: auto; color: #84958b; font-size: 7px; letter-spacing: .1em; }
.scene { min-height: 260px; padding: 21px 24px 15px; animation: scene-in 280ms ease both; }.scene-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; font-size: 11px; font-weight: 750; }.scene-date { color: #829087; font-size: 8px; font-weight: 500; }
.scene-conversation-layout { display: grid; grid-template-columns: 1fr 150px; gap: 14px; }.scene-chat { padding: 12px; border: 1px solid #e8ece4; border-radius: 9px; background: white; }.scene-patient { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid #edf0e9; }.scene-patient > span:last-child { display: grid; gap: 4px; font-size: 9px; }.scene-patient small { color: #8d9992; font-size: 7px; }.scene-chat-message { width: fit-content; max-width: 85%; margin-top: 11px; padding: 8px 9px; border-radius: 8px; background: #f3f5f0; color: #50625a; font-size: 8px; line-height: 1.5; }.scene-chat-answer { margin-left: auto; background: #eaf1dc; }.scene-chat-footer { display: flex; justify-content: space-between; margin-top: 17px; color: #839087; font-size: 7px; }.message-check { color: #5e8960; }
.scene-side-info { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 11px; border: 1px solid #e8ece4; border-radius: 9px; background: white; }.side-info-label { color: #829087; font-size: 7px; }.scene-side-info b { font-size: 9px; }.side-info-pill { padding: 5px 7px; border-radius: 20px; background: #edf3e2; color: #617548; font-size: 7px; }.side-info-link { margin-top: auto; color: #3f6655; font-size: 8px; font-weight: 700; }
.calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }.calendar-day { display: flex; min-height: 142px; flex-direction: column; align-items: center; gap: 7px; padding: 10px 5px; border: 1px solid #e9ede5; border-radius: 8px; background: white; }.calendar-day > small { color: #809087; font-size: 7px; }.calendar-day > b { margin-bottom: 4px; font-family: Outfit, sans-serif; font-size: 16px; }.calendar-day-active { border-color: #b0c47c; background: #f3f7e9; }.calendar-event { width: 100%; padding: 5px 4px; border-radius: 4px; font-size: 6px; text-align: center; white-space: nowrap; }.event-blue { background: var(--blue); }.event-green { background: var(--green); }.event-lilac { background: var(--lilac); }.event-lime { background: #e4f2a5; }.calendar-footer { display: flex; justify-content: space-between; margin-top: 12px; color: #8a968f; font-size: 7px; }.calendar-legend { display: flex; align-items: center; gap: 5px; color: #596c61; }.calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: #91ab5b; }
.crm-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.crm-column { min-height: 159px; padding: 8px; border: 1px solid #e8ece4; border-radius: 8px; background: #f1f4ee; }.crm-column-heading { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 7px; font-weight: 700; }.crm-column-heading b { color: #829087; }.crm-card { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 5px 7px; margin-bottom: 7px; padding: 8px 6px; border: 1px solid #e5eae1; border-radius: 7px; background: white; }.crm-card .person-avatar { width: 24px; height: 24px; grid-row: span 2; }.crm-card > b { font-size: 7px; }.crm-card > small { color: #87938c; font-size: 6px; }.crm-card-tag { grid-column: 1 / -1; width: fit-content; padding: 4px 6px; border-radius: 4px; font-size: 6px; }.tag-lime { background: #ecf4d3; color: #708447; }.tag-blue { background: #e4eef4; color: #607b8b; }.tag-green { background: #e5f0df; color: #638158; }.crm-card-muted { opacity: .8; }
.stage-footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 24px; border-top: 1px solid #e7ebe3; color: #718078; font-size: 8px; }.stage-footer > span:last-child { font-family: Outfit, sans-serif; font-weight: 700; }.stage-footer-check { display: inline-grid; width: 14px; height: 14px; place-items: center; margin-right: 5px; border-radius: 50%; background: #e4efd6; color: #568054; font-size: 8px; font-style: normal; }

.plans-section { background: #fbfcf8; }.plans-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }.plans-heading h2 { margin-bottom: 12px; font-size: clamp(37px, 4vw, 52px); }.plans-subtitle { margin-bottom: 0; color: var(--muted); font-size: 13px; }.billing-toggle-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }.billing-toggle { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid #dce3d9; border-radius: 9px; background: white; }.billing-option { min-height: 35px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #77857d; cursor: pointer; font-size: 11px; font-weight: 650; }.billing-option.is-active { background: var(--ink); color: white; }.annual-saving { color: #54774f; font-size: 9px; font-weight: 650; }
.black-offer { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 15px 20px; border: 1px solid #dce9bb; border-radius: 9px; background: #f1f7dc; }.offer-sparkle { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--lime); font-size: 17px; }.black-offer p { display: grid; gap: 3px; margin: 0; }.black-offer b { font-size: 11px; }.black-offer p span { color: #67765a; font-size: 10px; }.offer-note { margin-left: auto; color: #71805d; font-size: 9px; white-space: nowrap; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }.plan-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 25px 24px 22px; border: 1px solid #dfe5dc; border-radius: 12px; background: white; }.plan-card-featured { border: 1.5px solid #667b43; box-shadow: 0 12px 32px rgb(37 68 48 / 9%); }.popular-ribbon { position: absolute; top: -12px; right: 17px; padding: 6px 10px; border-radius: 20px; background: var(--lime); color: var(--ink); font-size: 8px; font-weight: 750; }.plan-card-top { display: flex; min-height: 28px; align-items: flex-start; justify-content: space-between; }.plan-kicker { color: #77877d; font-size: 9px; font-weight: 650; }.plan-icon { display: grid; width: 27px; height: 27px; place-items: center; margin-top: -5px; border: 1px solid #e3e9df; border-radius: 8px; color: #688174; }.plan-icon-featured { border-color: #e8f0c3; background: #f4f8df; color: #718637; }.ultra-tag { padding: 5px 7px; border-radius: 5px; background: #edf0ea; color: #53645d; font-size: 7px; font-weight: 800; letter-spacing: .1em; }.plan-card h3 { min-height: 46px; margin: 11px 0 5px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }.plan-description { min-height: 38px; margin-bottom: 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }.price-block { min-height: 89px; padding: 12px 0 11px; border-top: 1px solid #edf0e9; }.price-label { color: #78877f; font-size: 9px; }.price-value { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 0; }.price-prefix { color: #53665c; font-size: 13px; font-weight: 650; }.price-value strong { font-family: Outfit, sans-serif; font-size: 36px; font-weight: 560; letter-spacing: -.045em; }.price-period { color: #829087; font-size: 10px; }.price-detail { margin: 2px 0 0; color: #617846; font-size: 8px; }.plan-cta { width: 100%; min-height: 43px; margin-top: 4px; font-size: 11px; }.plan-divider { margin: 18px 0 14px; border-top: 1px solid #edf0e9; }.feature-label { margin-bottom: 11px; color: #718078; font-size: 9px; font-weight: 700; }.feature-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.feature-list li { display: flex; align-items: flex-start; gap: 8px; color: #53645c; font-size: 9px; line-height: 1.5; }.feature-list li > span { color: #6e8c50; font-weight: 800; }.plan-footnote { margin: auto 0 0; padding-top: 17px; color: #87938c; font-size: 8px; line-height: 1.5; }.pricing-disclaimer { max-width: 850px; margin: 19px auto 0; color: #88948d; font-size: 9px; line-height: 1.7; text-align: center; }

.studio-section { padding-top: 22px; background: #fbfcf8; }.studio-card { display: grid; min-height: 340px; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid #dfe5dc; border-radius: 14px; background: #f0f2e9; }.studio-visual { position: relative; display: grid; min-height: 340px; place-items: center; overflow: hidden; background: #dfe8d5; }.studio-visual::before, .studio-visual::after { position: absolute; width: 350px; height: 350px; border: 1px solid rgb(20 47 52 / 13%); border-radius: 50%; content: ''; }.studio-visual::after { width: 270px; height: 270px; }.studio-paper { position: absolute; z-index: 1; width: 174px; height: 230px; padding: 15px; border-radius: 5px; box-shadow: 0 20px 40px rgb(20 47 52 / 18%); }.paper-back { margin: 15px 0 0 45px; background: #f6f0dc; transform: rotate(8deg); }.paper-front { display: flex; flex-direction: column; background: #f9f8ed; transform: rotate(-5deg); }.paper-topline, .paper-footer { color: #698077; font-size: 6px; letter-spacing: .11em; }.paper-orbit { position: absolute; top: 54px; right: 12px; width: 42px; height: 42px; border: 1px solid #91a96c; border-radius: 50%; }.paper-title { margin: auto 0; color: #24474a; font-family: Outfit, sans-serif; font-size: 24px; font-weight: 550; letter-spacing: -.04em; line-height: .98; }.paper-footer { margin-top: auto; letter-spacing: .02em; }.studio-float { position: absolute; z-index: 2; right: 18px; bottom: 38px; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgb(255 255 255 / 65%); border-radius: 8px; background: white; box-shadow: 0 8px 25px rgb(20 47 52 / 13%); font-size: 8px; font-weight: 650; }.studio-float span { color: #819d4c; font-size: 13px; }.studio-copy { position: relative; align-self: center; padding: 45px 10%; }.studio-copy .eyebrow { display: inline-block; margin-right: 12px; }.coming-soon { padding: 5px 8px; border: 1px solid #d8e2cd; border-radius: 20px; color: #62784e; font-size: 8px; font-weight: 700; }.studio-copy h2 { max-width: 430px; margin: 5px 0 15px; font-size: 39px; }.studio-copy > p:not(.eyebrow) { max-width: 450px; margin-bottom: 21px; color: var(--muted); font-size: 12px; line-height: 1.8; }

.faq-section { background: var(--paper); }.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }.faq-title h2 { margin-bottom: 20px; font-size: 50px; }.faq-title > p:not(.eyebrow) { max-width: 250px; color: var(--muted); font-size: 12px; line-height: 1.7; }.faq-title .text-link { margin-top: 8px; }.faq-list { border-top: 1px solid #dbe2d9; }.faq-item { border-bottom: 1px solid #dbe2d9; }.faq-item summary { position: relative; padding: 21px 35px 21px 0; cursor: pointer; font-family: Outfit, sans-serif; font-size: 17px; font-weight: 550; list-style: none; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after { position: absolute; top: 19px; right: 5px; color: #6e8175; content: '+'; font-family: Inter, sans-serif; font-size: 22px; font-weight: 400; transition: transform .2s ease; }.faq-item[open] summary::after { transform: rotate(45deg); }.faq-item p { max-width: 640px; margin: -5px 30px 21px 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.closing-cta { padding-block: 66px; background: #1b3b3e; color: white; }.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.closing-inner .eyebrow { margin-bottom: 12px; }.closing-inner h2 { font-size: 44px; }.closing-inner > .button { flex: 0 0 auto; }
.site-footer { padding: 31px 0 18px; background: #112a2e; color: #c0cec7; }.footer-main { display: flex; align-items: center; gap: 25px; padding-bottom: 24px; }.brand-footer img { width: 132px; }.footer-main p, .footer-main > a:last-child { margin: 0; color: #9eafa7; font-size: 10px; }.footer-main > a:last-child { margin-left: auto; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid rgb(255 255 255 / 12%); color: #81968c; font-size: 8px; }

@keyframes float-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-in { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: .82fr 1.18fr; gap: 30px; }.hero h1 { font-size: 64px; }.app-content { grid-template-columns: 170px minmax(0, 1fr); }.app-window { grid-template-columns: 42px 1fr; }.app-topbar { right: 0; left: 0; }.tour-grid { grid-template-columns: .65fr 1.35fr; gap: 38px; }.plan-card { padding-inline: 18px; }.plan-card h3 { font-size: 19px; }.faq-layout { gap: 60px; }
}
@media (max-width: 760px) {
  .wrap { width: min(100% - 36px, 560px); }.section-pad { padding-block: 76px; }.header-inner { height: 72px; }.main-nav { display: none; }.brand img { width: 136px; }.button-small { min-height: 39px; }
  .hero { min-height: 0; padding: 123px 0 24px; }.hero-grid { grid-template-columns: 1fr; gap: 43px; }.hero-copy { padding: 0; }.hero h1 { font-size: clamp(56px, 13vw, 74px); }.hero-lede { max-width: 500px; font-size: 14px; }.hero-demo { width: 100%; padding-left: 0; }.app-window { min-height: 326px; grid-template-columns: 38px 1fr; transform: none; }.app-content { grid-template-columns: 38% minmax(0, 1fr); }.app-topbar { font-size: 10px; }.conversation-list { padding-left: 7px; }.conversation-item { gap: 5px; }.conversation-time { display: none; }.conversation-view { padding-inline: 9px; }.hero-float-card { right: 7px; }.hero-bottom { margin-top: 35px; font-size: 8px; }
  .section-intro-split { display: block; margin-bottom: 35px; }.section-intro-split > p { margin-top: 20px; font-size: 12px; }.section-intro h2, .tour-copy h2, .plans-heading h2 { font-size: 42px; }.flow-track { grid-template-columns: 1fr; }.flow-step { min-height: 0; padding: 18px 0 26px; }.flow-symbol { margin-bottom: 17px; }.flow-connector { display: none; }
  .tour-grid { grid-template-columns: 1fr; gap: 33px; }.tour-copy > p:not(.eyebrow):not(.tour-note) { margin-bottom: 22px; }.tour-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }.tour-tab { justify-content: center; gap: 7px; padding-inline: 5px; font-size: 10px; }.tour-stage { min-height: 330px; }.scene { padding: 17px 13px 12px; }.scene-conversation-layout { grid-template-columns: 1fr 112px; gap: 8px; }.scene-side-info { padding: 9px 7px; }.calendar-grid { gap: 4px; }.calendar-day { min-height: 128px; padding-inline: 2px; }.calendar-event { font-size: 5px; }.crm-board { gap: 4px; }.crm-column { padding: 6px 4px; }.crm-column-heading { font-size: 6px; }.crm-card { padding: 6px 4px; }
  .plans-heading { display: block; }.billing-toggle-wrap { align-items: flex-start; margin-top: 24px; }.black-offer { align-items: flex-start; padding: 13px; }.offer-note { display: none; }.plan-grid { grid-template-columns: 1fr; gap: 15px; }.plan-card { padding: 23px; }.plan-card h3 { min-height: 0; font-size: 22px; }.plan-description { min-height: 0; }.price-block { min-height: 88px; }.pricing-disclaimer { text-align: left; }
  .studio-section { padding-top: 0; }.studio-card { grid-template-columns: 1fr; }.studio-visual { min-height: 280px; }.studio-copy { padding: 35px 26px 37px; }.studio-copy h2 { font-size: 34px; }.studio-float { right: 11px; bottom: 24px; }
  .faq-layout { grid-template-columns: 1fr; gap: 38px; }.faq-title h2 { font-size: 42px; }.faq-item summary { font-size: 16px; }.closing-inner { display: block; }.closing-inner h2 { margin-bottom: 24px; font-size: 39px; }.footer-main { flex-wrap: wrap; gap: 14px 20px; }.footer-main p { margin-left: auto; }.footer-main > a:last-child { width: 100%; margin-left: 0; }.footer-bottom { display: grid; gap: 8px; }
}
@media (max-width: 390px) {
  .wrap { width: calc(100% - 28px); }.hero h1 { font-size: 53px; }.app-content { grid-template-columns: 34% minmax(0, 1fr); }.person-avatar { width: 24px; height: 24px; }.conversation-meta b { font-size: 8px; }.bubble { font-size: 7px; }.hero-bottom { gap: 8px; }.hero-bottom-line { width: 22px; }.scene-conversation-layout { grid-template-columns: 1fr; }.scene-side-info { display: none; }.calendar-event { letter-spacing: -.03em; }.crm-column-heading { flex-direction: column; gap: 3px; }.crm-card .person-avatar { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}