@charset "UTF-8";
:root {
  color-scheme:light;
  --paper:#f7f6f0;
  --ink:#222620;
  --muted:#75776e;
  --blue:#2864ef;
  --green:#28754f;
  --line:#e2e3d9;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button:disabled {
  cursor:default
}

svg {
  width:24px;
  height:24px;
  flex-shrink:0
}

img {
  display:block;
  max-width:100%;
  object-fit:cover
}

h1,h2,h3,p {
  margin:0
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px
}

::selection {
  background:#cbdcfa;
  color:#143c92
}

[hidden] {
  display:none!important
}

.skip-link {
  position:absolute;
  top:-60px;
  left:20px;
  z-index:100;
  background:white;
  padding:14px
}

.skip-link:focus {
  top:10px
}

.site-header {
  height:100px;
  max-width:1440px;
  margin:auto;
  padding:0 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:10;
  border-bottom:1px solid var(--line)
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:750;
  font-size:30px;
  letter-spacing:-1.6px
}

.wordmark>svg {
  width:36px;
  height:36px;
  color:var(--blue)
}

.brand-period {
  color:var(--blue)
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px;
  font-weight:500
}

.site-header nav>a:not(.nav-cta) {
  padding:12px 0
}

.site-header nav>a:not(.nav-cta):hover {
  color:var(--blue)
}

.nav-cta {
  display:flex;
  align-items:center;
  gap:24px;
  padding:13px 18px;
  background:#fffefa;
  border:1px solid #dedfd6;
  border-radius:9px;
  transition:box-shadow .2s,transform .2s
}

.nav-cta:hover {
  box-shadow:0 6px 15px #3037200c;
  transform:translateY(-2px)
}

.nav-cta svg {
  width:18px;
  height:18px
}

.hero {
  position:relative;
  max-width:1440px;
  margin:auto;
  min-height:750px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  padding:72px 6% 75px;
  overflow:hidden;
  isolation:isolate
}

.hero-copy {
  z-index:2;
  position:relative
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.9px;
  font-weight:600;
  display:block;
  line-height:1.6
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:29px
}

.status-dot {
  width:6px;
  height:6px;
  flex:none;
  background:var(--blue);
  border-radius:50%;
  box-shadow:0 0 0 4px #2864ef0d
}

.hero h1 {
  font-size:clamp(53px,5.5vw,80px);
  line-height:1.04;
  letter-spacing:-4.7px;
  font-weight:600
}

.blue-phrase {
  display:inline-block;
  position:relative;
  color:var(--blue);
  font-size:.89em;
  white-space:nowrap;
  letter-spacing:-3.9px
}

.handline {
  position:absolute;
  left:0;
  bottom:-12px;
  width:99%;
  height:14px;
  border-top:2px solid #2864ef8c;
  border-radius:50%;
  transform:rotate(-1deg);
  transform-origin:left
}

.hero-description {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin-top:35px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:52px;
  padding:16px 21px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:13px;
  font-weight:550;
  transition:transform .25s var(--ease),box-shadow .25s,background .2s
}

.button svg {
  width:19px;
  height:19px;
  transition:transform .3s
}

.button:hover {
  transform:translateY(-3px)
}

.button:hover svg {
  transform:translateX(4px)
}

.button-blue {
  background:var(--blue);
  color:white;
  border-color:#ffffff40;
  box-shadow:0 4px 8px #2255d028,0 0 0 3px #2864ef09,inset 0 1px 1px #ffffff40
}

.button-blue:hover {
  background:#1a52d9;
  box-shadow:0 9px 24px #2255d031
}

.button-ink {
  background:var(--ink);
  color:white
}

.text-button {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap
}

.text-button:hover {
  color:var(--blue)
}

.play-icon {
  height:29px;
  width:29px;
  border:1px solid #d2d5ca;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px;
  padding-left:2px
}

.hero-footnote {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:21px;
  font-size:10px;
  color:var(--muted)
}

.mini-check svg {
  width:14px;
  height:14px;
  color:var(--green);
  display:block
}

.botanical {
  position:absolute;
  pointer-events:none;
  color:#627346;
  opacity:.15;
  filter:blur(8px);
  z-index:-1;
  transform-origin:top right
}

.botanical svg {
  width:100%;
  height:100%
}

.botanical-hero {
  height:610px;
  width:460px;
  right:-155px;
  top:-145px;
  transform:rotate(123deg)
}

.hero-halo {
  position:absolute;
  width:540px;
  height:570px;
  right:0;
  top:70px;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(ellipse,#e6e9d2b0,transparent 69%)
}

.hero-scene {
  height:565px;
  position:relative;
  margin-left:10px;
  perspective:1300px;
  transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0);
  transition:transform .6s var(--ease)
}

.floating-card {
  position:absolute;
  background:#fffefa;
  border:1px solid #fff;
  border-radius:16px;
  box-shadow:0 3px 5px #29342006,0 15px 25px #3d452010,0 32px 60px #3d45200c
}

.scene-orbit {
  position:absolute;
  top:75px;
  left:1%;
  width:98%;
  height:440px;
  border:1px dashed #cfd4c7;
  border-radius:50%;
  transform:rotate(-22deg);
  opacity:.7
}

.scene-business {
  width:310px;
  left:12%;
  top:120px;
  padding:9px 9px 0;
  transform:rotate(-7deg);
  z-index:2
}

.scene-photo {
  position:relative;
  height:252px;
  overflow:hidden;
  border-radius:10px
}

.scene-photo>img {
  width:100%;
  height:100%;
  object-position:50% 55%
}

.photo-location {
  position:absolute;
  left:12px;
  top:12px;
  display:inline-flex;
  gap:5px;
  padding:6px 9px;
  background:#fffdf1e6;
  backdrop-filter:blur(8px);
  font-size:9px;
  border-radius:5px
}

.scene-business-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 9px 12px
}

.micro-label {
  display:block;
  font-size:7px;
  letter-spacing:1px;
  font-weight:500;
  color:var(--muted)
}

.scene-business-info h2 {
  font-size:23px;
  letter-spacing:-.7px;
  margin-top:5px
}

.round-arrow {
  height:32px;
  width:32px;
  background:var(--ink);
  color:white;
  border-radius:50%;
  display:grid;
  place-items:center
}

.round-arrow svg {
  width:17px;
  height:17px;
  transform:rotate(-35deg)
}

.scene-business-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 9px 16px;
  border-top:1px solid #edeee5;
  font-size:9px;
  color:var(--muted)
}

.scene-business-bottom b {
  font-size:16px;
  color:var(--ink)
}

.scene-calendar {
  width:200px;
  top:38px;
  right:0;
  padding:19px 15px;
  transform:rotate(8deg);
  z-index:4
}

.calendar-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  font-weight:550;
  margin-bottom:15px
}

.calendar-arrows {
  color:var(--muted);
  font-size:14px
}

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  font-size:8px;
  text-align:center
}

.calendar-grid>b {
  font-size:6px;
  color:var(--muted);
  padding-bottom:6px;
  font-weight:400
}

.calendar-grid>span {
  height:19px;
  display:grid;
  place-items:center
}

.calendar-grid .chosen {
  background:var(--blue);
  color:white;
  border-radius:50%;
  box-shadow:0 2px 7px #2864ef40
}

.scene-message {
  left:-9%;
  top:323px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 21px;
  z-index:5;
  transform:rotate(-3deg);
  border-radius:12px
}

.spark-tile {
  width:38px;
  height:38px;
  background:#edf2ff;
  color:var(--blue);
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:none
}

.spark-tile svg {
  width:25px;
  height:25px
}

.scene-message p {
  font-size:13px;
  line-height:1.4;
  margin-top:5px;
  letter-spacing:-.2px
}

.scene-message .micro-label {
  font-size:6px;
  letter-spacing:.8px
}

.scene-confirm {
  bottom:4px;
  right:3%;
  padding:18px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:6;
  transform:rotate(4deg);
  width:268px;
  border-radius:13px
}

.confirm-check {
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border-radius:50%;
  background:#2bb974;
  color:white;
  flex:none;
  box-shadow:0 0 0 5px #2bb9740b
}

.confirm-check svg {
  width:23px;
  height:23px
}

.scene-confirm b {
  display:block;
  font-size:15px;
  letter-spacing:-.3px
}

.scene-confirm div>span {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:5px
}

.confirmation-spark {
  color:#c1d7b7;
  margin-left:auto
}

.confirmation-spark svg {
  width:21px;
  height:21px
}

.scene-caption {
  position:absolute;
  bottom:-28px;
  right:4%;
  font-size:6px;
  letter-spacing:1.1px;
  color:#858b78
}

.small-star {
  position:absolute;
  color:var(--blue);
  opacity:.75
}

.star-one {
  top:70px;
  left:17%;
  transform:rotate(14deg)
}

.star-one svg {
  width:23px;
  height:23px
}

.star-two {
  right:1%;
  top:342px
}

.star-two svg {
  width:17px;
  height:17px
}

.conversation-strip {
  max-width:1268px;
  margin:0 auto;
  padding:29px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.conversation-strip>span {
  font-size:8px;
  letter-spacing:1.25px;
  color:var(--muted);
  max-width:170px;
  line-height:1.7
}

.assistant-names {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:23px;
  font-weight:550;
  letter-spacing:-.8px
}

.assistant-names .assistant-divider {
  font-size:16px;
  color:#c7cbbf;
  font-weight:300
}

.assistant-names .and-more {
  font-size:17px;
  font-weight:400;
  color:var(--muted)
}

.conversation-strip>a {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:12px
}

.conversation-strip>a svg {
  width:17px;
  height:17px
}

.section-shell {
  max-width:1440px;
  margin:0 auto;
  padding:112px 6%
}

.section-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:46px
}

.section-intro .eyebrow {
  color:var(--muted);
  margin-bottom:19px
}

.section-intro h2,.owner-copy h2,.faq-section h2 {
  font-size:clamp(36px,3.7vw,53px);
  line-height:1.1;
  letter-spacing:-2.4px;
  font-weight:550
}

.blue-text {
  color:var(--blue)
}

.section-intro>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.85;
  padding-bottom:4px
}

.story-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:center
}

.story-steps {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.story-step {
  text-align:left;
  padding:27px 10px 27px 0;
  background:none;
  border:0;
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  gap:20px;
  position:relative
}

.story-step:nth-child(3) {
  border-bottom:1px solid var(--line)
}

.step-number {
  font-size:10px;
  padding-top:4px;
  color:#a0a497;
  transition:color .3s
}

.story-step>span:nth-child(2) {
  display:block
}

.story-step strong {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.5px;
  color:#858a7c;
  transition:color .3s
}

.story-step>span>span {
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:10px;
  max-width:295px
}

.story-step i {
  margin-left:auto;
  padding-top:3px;
  color:#a4ad99;
  transition:transform .3s
}

.story-step i svg {
  width:18px;
  height:18px
}

.story-step.is-active strong {
  color:var(--ink)
}

.story-step.is-active .step-number,.story-step.is-active i {
  color:var(--blue)
}

.story-step.is-active i {
  transform:rotate(-35deg)
}

.story-step.is-active:before {
  position:absolute;
  content:"";
  height:2px;
  background:var(--blue);
  top:-1px;
  left:0;
  width:65px
}

.story-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:23px
}

.story-controls>span {
  font-size:6px;
  letter-spacing:.8px;
  color:var(--muted)
}

.story-controls>button {
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  font-size:10px;
  padding:5px 0;
  color:var(--muted)
}

.story-stage {
  background:#efefe6;
  border:1px solid #e4e5d8;
  border-radius:22px;
  padding:25px 29px;
  min-height:420px;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 80px #e6e8d840
}

.stage-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px
}

.stage-topline>span:first-child {
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:600;
  font-size:15px;
  letter-spacing:-.5px
}

.stage-topline svg {
  color:var(--blue);
  width:23px;
  height:23px
}

.stage-demo {
  font-size:8px;
  color:var(--muted);
  border:1px solid #d8dccd;
  border-radius:50px;
  padding:5px 8px
}

.story-panel {
  min-height:279px;
  animation:panel-enter .5s var(--ease)
}

.chat-question {
  background:#fffefa;
  padding:14px 16px;
  border-radius:13px 13px 3px 13px;
  font-size:12px;
  margin-left:50px;
  position:relative;
  box-shadow:0 5px 13px #454f2c06
}

.chat-question .avatar {
  position:absolute;
  right:-9px;
  bottom:-16px;
  transform:scale(.75)
}

.avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  background:#dcd3c0;
  color:#726b55;
  font-size:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border:2px solid var(--paper)
}

.chat-answer {
  display:flex;
  align-items:center;
  gap:11px;
  margin:24px 0 18px
}

.assistant-spark {
  color:var(--blue);
  width:30px
}

.assistant-spark svg {
  width:22px;
  height:22px
}

.chat-answer p {
  font-size:13px;
  line-height:1.6
}

.chat-business {
  padding:8px;
  background:#fffefa;
  border:1px solid white;
  border-radius:12px;
  display:flex;
  gap:13px;
  align-items:center;
  box-shadow:0 10px 20px #3b442b0a
}

.chat-business>img {
  width:80px;
  height:88px;
  object-position:45% 50%;
  border-radius:6px
}

.chat-business>div {
  flex:1
}

.chat-business strong {
  display:block;
  font-size:17px;
  letter-spacing:-.5px;
  margin:8px 0
}

.chat-business div>span:last-child {
  display:block;
  font-size:9px;
  color:var(--muted)
}

.chat-business>svg {
  margin:0 6px;
  width:16px;
  height:16px
}

.data-pills {
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:17px
}

.data-pills>span {
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 9px;
  background:#f9faf5;
  border-radius:5px;
  font-size:8px;
  box-shadow:0 3px 5px #30392008
}

.data-pills svg {
  color:#329b62;
  width:12px;
  height:12px
}

.stage-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:24px;
  font-size:8px;
  color:var(--muted)
}

.stage-status {
  display:flex;
  align-items:center;
  gap:6px
}

.stage-status i {
  width:4px;
  height:4px;
  background:var(--blue);
  border-radius:50%
}

.stage-footer>span:last-child {
  font-size:8px;
  letter-spacing:1px
}

.preview-service {
  display:flex;
  align-items:center;
  gap:12px;
  margin:28px 0
}

.preview-service h3 {
  font-size:21px;
  font-weight:500;
  margin-top:4px;
  letter-spacing:-.7px
}

.preview-service>strong {
  font-size:26px;
  letter-spacing:-1px;
  margin-left:auto
}

.preview-service>strong span {
  display:block;
  font-size:9px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  text-align:right;
  margin-top:3px
}

.time-options {
  border-radius:12px;
  background:#fffefa;
  padding:18px
}

.time-options>div {
  display:flex;
  gap:9px;
  margin-top:13px
}

.time-options button {
  flex:1;
  background:#f1f2eb;
  border:1px solid transparent;
  border-radius:5px;
  padding:10px 2px;
  font-size:11px
}

.time-options button.selected {
  background:var(--blue);
  color:white
}

.time-options button:hover {
  border-color:var(--blue)
}

.preview-policy {
  font-size:9px;
  color:var(--muted);
  line-height:1.6;
  margin:12px 0
}

.preview-confirm {
  width:100%;
  min-height:40px;
  padding:11px 15px;
  font-size:11px
}

.booking-notification {
  background:#fffefa;
  border-radius:12px;
  padding:17px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 8px 16px #343b290a;
  margin:18px 0
}

.booking-notification strong {
  display:block;
  font-size:17px;
  letter-spacing:-.5px
}

.booking-notification div>span {
  display:block;
  font-size:9px;
  margin-top:5px;
  color:var(--muted)
}

.schedule-preview {
  background:#fffefa;
  border-radius:12px;
  padding:16px
}

.schedule-preview>div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  margin-bottom:18px
}

.schedule-preview>div:first-child span {
  color:var(--muted);
  font-size:8px
}

.schedule-row {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:39px
}

.schedule-row time {
  font-size:8px;
  color:var(--muted);
  width:27px
}

.schedule-row>span {
  flex:1;
  border-top:1px solid #f0f0e9
}

.schedule-row .scheduled-booking {
  background:#e4f1e5;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px;
  color:#46744e;
  font-size:10px
}

.scheduled-booking svg {
  width:17px;
  height:17px
}

.scheduled-booking small {
  display:block;
  font-size:7px;
  margin-top:4px
}

.scheduled-booking>b {
  margin-left:auto;
  font-size:11px
}

.business-section {
  border-top:1px solid var(--line);
  padding-top:90px
}

.business-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}

.business-card {
  display:block;
  min-width:0
}

.business-photo {
  height:300px;
  border-radius:13px;
  overflow:hidden;
  position:relative;
  background:#e7eadc
}

.business-photo>img {
  height:100%;
  width:100%;
  transition:transform .8s var(--ease)
}

.business-card:hover .business-photo>img {
  transform:scale(1.055)
}

.demo-tag {
  position:absolute;
  left:14px;
  top:14px;
  background:#fffef4e6;
  color:#5d6456;
  padding:6px 9px;
  border-radius:5px;
  font-size:8px;
  backdrop-filter:blur(8px)
}

.card-arrow {
  position:absolute;
  bottom:15px;
  right:15px;
  background:#fffefa;
  border-radius:50%;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  box-shadow:0 4px 10px #00000009;
  transition:transform .3s
}

.card-arrow svg {
  width:17px;
  height:17px;
  transform:rotate(-40deg)
}

.business-card:hover .card-arrow {
  transform:rotate(40deg)
}

.business-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:20px;
  font-size:8px;
  color:var(--muted)
}

.business-meta>span:first-child {
  color:var(--blue)
}

.business-card h3 {
  font-size:24px;
  letter-spacing:-.8px;
  font-weight:550;
  margin:11px 0 8px
}

.business-card>p {
  font-size:12px;
  color:var(--muted)
}

.demo-disclosure {
  font-size:9px;
  line-height:1.7;
  color:var(--muted);
  margin-top:27px
}

.empty-catalog {
  font-size:15px;
  line-height:1.8
}

.empty-catalog a {
  text-decoration:underline
}

.business-lead-banner {
  max-width:1320px;
  margin:0 auto 105px;
  padding:35px 42px;
  display:flex;
  align-items:center;
  gap:25px;
  border-radius:23px;
  color:#fff;
  background:linear-gradient(112deg,#172844 0%,#2359c9 58%,#3b82ee 100%);
  box-shadow:0 20px 42px #2255d01c;
  position:relative;
  overflow:hidden
}
.business-lead-banner:after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:10%;
  top:-150px;
  border:1px solid #ffffff24;
  border-radius:50%;
  box-shadow:0 0 0 35px #ffffff08,0 0 0 70px #ffffff05
}
.lead-banner-spark {
  width:46px;
  height:46px;
  border-radius:15px;
  background:#ffffff18;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  z-index:1
}
.lead-banner-spark svg { width:20px; height:20px; color:#bfe0ff }
.business-lead-banner>div:nth-child(2) { flex:1; z-index:1 }
.business-lead-banner .eyebrow { color:#b8d4ff; font-size:8px; margin-bottom:10px }
.business-lead-banner h2 { font-size:clamp(23px,2.5vw,34px); line-height:1.08; letter-spacing:-1.3px; font-weight:500; margin:0 }
.business-lead-banner h2 span { color:#9bd1ff }
.business-lead-banner p { color:#d5e2fa; font-size:11px; margin:10px 0 0 }
.business-lead-banner .button { z-index:1; white-space:nowrap; background:#fff; color:#1748b1; box-shadow:none }
.business-lead-banner .button:hover { background:#eaf2ff }

.owner-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  padding-top:15px;
  padding-bottom:115px
}

.owner-visual {
  background:#eceedf;
  border-radius:22px;
  min-height:482px;
  padding:34px 31px;
  position:relative;
  overflow:hidden
}

.owner-visual>.eyebrow {
  font-size:8px;
  color:#7d8870;
  text-align:center;
  letter-spacing:1.5px
}

.owner-chat {
  display:flex;
  gap:12px;
  align-items:flex-end;
  margin-top:36px
}

.owner-chat p {
  padding:15px 17px;
  border-radius:13px 13px 13px 2px;
  background:#fffefa;
  font-size:12px;
  line-height:1.7;
  box-shadow:0 6px 10px #33452b05
}

.owner-reply {
  display:flex;
  align-items:center;
  gap:12px;
  margin:25px 0 22px 45px
}

.owner-reply svg {
  color:var(--blue);
  width:21px;
  height:21px
}

.owner-reply p {
  font-size:14px;
  letter-spacing:-.3px
}

.owner-mini-card {
  background:#fffefa;
  border:1px solid white;
  padding:7px;
  max-width:280px;
  margin:0 auto;
  border-radius:13px;
  position:relative;
  box-shadow:0 15px 30px #34402310;
  transform:rotate(-4deg)
}

.owner-mini-card>img {
  width:100%;
  height:130px;
  border-radius:8px
}

.owner-mini-card>div {
  padding:13px 8px 9px
}

.owner-mini-card b {
  display:block;
  font-size:13px;
  letter-spacing:-.3px;
  margin:7px 0
}

.owner-mini-card div>span:last-child {
  font-size:8px;
  color:var(--muted)
}

.ready-seal {
  position:absolute;
  bottom:30px;
  right:-19px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:#30b878;
  color:white;
  border-radius:50%;
  border:4px solid #f9faf5;
  transform:rotate(4deg)
}

.owner-copy>.eyebrow {
  font-size:8px;
  color:var(--muted);
  margin-bottom:22px
}

.owner-copy h2 {
  font-size:49px;
  line-height:1.1
}

.owner-copy>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:26px;
  max-width:365px
}

.owner-copy ul {
  list-style:none;
  margin:24px 0 28px;
  padding:0
}

.owner-copy li {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  margin:14px 0
}

.owner-copy li svg {
  width:14px;
  height:14px;
  color:var(--green)
}

.owner-note {
  display:block;
  font-size:9px;
  margin-top:14px;
  color:var(--muted)
}

.faq-section {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  padding-top:78px;
  padding-bottom:90px
}

.faq-section .eyebrow {
  color:var(--muted);
  font-size:8px;
  margin-bottom:19px
}

.faq-section h2 {
  font-size:39px;
  letter-spacing:-1.6px
}

.faq-list details {
  border-bottom:1px solid var(--line);
  padding:24px 0
}

.faq-list details:first-child {
  padding-top:5px
}

.faq-list summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  letter-spacing:-.15px
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary>span {
  color:var(--muted);
  font-size:20px;
  font-weight:300;
  transition:transform .2s
}

.faq-list details[open] summary>span {
  transform:rotate(45deg);
  color:var(--blue)
}

.faq-list p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  max-width:470px;
  padding-top:17px
}

.faq-list p a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px
}

.final-cta {
  text-align:center;
  padding:85px 25px 95px;
  background:#eeefe5;
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.final-cta>.eyebrow {
  color:#7e8874;
  font-size:8px;
  margin-bottom:23px
}

.final-cta h2 {
  font-size:clamp(36px,4.5vw,64px);
  line-height:1.14;
  letter-spacing:-2.6px;
  font-weight:500
}

.final-cta h2>span {
  color:var(--blue)
}

.final-cta>.button {
  margin-top:31px
}

.final-cta>p {
  font-size:10px;
  color:var(--muted);
  margin-top:17px
}

.botanical-footer {
  height:470px;
  width:400px;
  left:-145px;
  bottom:-65px;
  opacity:.13;
  transform:rotate(-18deg);
  filter:blur(6px)
}

.final-star {
  position:absolute;
  right:12%;
  top:25%;
  color:#a3b896;
  transform:rotate(12deg)
}

.final-star svg {
  width:40px;
  height:40px
}

.site-footer {
  max-width:1440px;
  margin:auto;
  padding:35px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.site-footer .wordmark {
  font-size:25px
}

.site-footer .wordmark>svg {
  width:30px;
  height:30px
}

.site-footer>span {
  font-size:10px;
  color:var(--muted)
}

.site-footer>div {
  display:flex;
  gap:23px;
  align-items:center
}

.site-footer>div>a {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px
}

.site-footer>div>a>svg {
  width:15px;
  height:15px
}

#motion-toggle {
  background:none;
  border:1px solid #dce0d2;
  padding:7px 10px;
  border-radius:5px;
  font-size:9px;
  color:var(--muted)
}

.connection-footnote {
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1268px;
  margin:0 auto;
  padding:14px 0 23px;
  border-top:1px solid var(--line);
  color:#858b7b;
  font-size:8px;
  line-height:1.6
}

.connection-footnote a {
  text-decoration:underline;
  text-underline-offset:3px
}

.motion-on .scene-business {
  animation:float-business 8s ease-in-out infinite
}

.motion-on .scene-calendar {
  animation:float-calendar 7s ease-in-out infinite
}

.motion-on .scene-message {
  animation:float-message 7.5s ease-in-out infinite
}

.motion-on .scene-confirm {
  animation:float-confirm 6.5s ease-in-out infinite
}

.motion-on .botanical-hero {
  animation:leaf-drift 14s ease-in-out infinite alternate
}

.motion-on .hero-copy {
  animation:copy-enter .85s var(--ease) both
}

.motion-on .handline {
  animation:underline-enter 1.3s .3s var(--ease) both
}

.motion-on .reveal {
  transition:opacity .8s var(--ease),transform .8s var(--ease)
}

.motion-on .reveal.waiting {
  opacity:0;
  transform:translateY(26px)
}

.motion-paused * {
  animation-play-state:paused!important
}

.motion-paused .reveal.waiting {
  opacity:1;
  transform:none
}

.motion-paused .story-panel {
  animation:none
}

@keyframes float-business {
  0%,100% {
    transform:translateY(0) rotate(-7deg)
  }
  50% {
    transform:translateY(-10px) rotate(-5deg)
  }
}

@keyframes float-calendar {
  0%,100% {
    transform:translateY(0) rotate(8deg)
  }
  50% {
    transform:translateY(9px) rotate(5deg)
  }
}

@keyframes float-message {
  0%,100% {
    transform:translateY(0) rotate(-3deg)
  }
  50% {
    transform:translateY(6px) rotate(-1deg)
  }
}

@keyframes float-confirm {
  0%,100% {
    transform:translateY(0) rotate(4deg)
  }
  50% {
    transform:translateY(-7px) rotate(2deg)
  }
}

@keyframes leaf-drift {
  from {
    transform:rotate(122deg)
  }
  to {
    transform:rotate(128deg)
  }
}

@keyframes copy-enter {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes underline-enter {
  from {
    transform:scaleX(0) rotate(-1deg)
  }
  to {
    transform:scaleX(1) rotate(-1deg)
  }
}

@keyframes panel-enter {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(min-width:1441px) {
  .hero h1 {
    font-size:80px
  }
  .conversation-strip,.connection-footnote {
    max-width:1268px
  }
}

@media(max-width:1250px) {
  .hero {
    min-height:690px;
    padding-top:50px;
    padding-bottom:50px
  }
  .hero h1 {
    letter-spacing:-3.6px
  }
  .blue-phrase {
    letter-spacing:-3px;
    font-size:.84em
  }
  .hero-scene {
    transform:scale(.9);
    transform-origin:center right;
    margin-left:-30px
  }
  .hero-actions {
    gap:18px
  }
  .button {
    gap:15px;
    font-size:12px;
    padding:15px 17px
  }
  .conversation-strip,.connection-footnote {
    margin-left:6%;
    margin-right:6%
  }
  .story-layout {
    gap:55px
  }
  .business-photo {
    height:255px
  }
  .owner-section {
    gap:65px
  }
  .business-lead-banner { margin-left:5%; margin-right:5%; padding:30px }
  .hero-footnote {
    font-size:9px
  }
}

@media(max-width:1000px) {
  .site-header {
    height:84px;
    padding:0 5%
  }
  .site-header nav {
    gap:24px
  }
  .hero {
    padding:55px 5% 50px;
    min-height:650px;
    grid-template-columns:1fr .9fr
  }
  .hero h1 {
    font-size:57px;
    letter-spacing:-3.3px
  }
  .blue-phrase {
    font-size:.78em;
    letter-spacing:-2.6px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.2px
  }
  .hero-description {
    font-size:14px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  .hero-scene {
    width:440px;
    transform:scale(.82);
    margin-left:-55px;
    transform-origin:center left
  }
  .scene-business {
    left:11%
  }
  .scene-calendar {
    right:0
  }
  .scene-confirm {
    right:0
  }
  .section-shell {
    padding:80px 5%
  }
  .story-layout {
    gap:35px
  }
  .story-stage {
    padding:22px;
    min-height:411px
  }
  .story-step strong {
    font-size:16px
  }
  .story-step {
    gap:13px
  }
  .story-controls {
    align-items:flex-start;
    flex-direction:column
  }
  .section-intro h2 {
    font-size:43px
  }
  .section-intro>p {
    font-size:11px
  }
  .business-photo {
    height:220px
  }
  .business-meta {
    flex-direction:column;
    gap:5px
  }
  .business-card h3 {
    font-size:22px
  }
  .owner-section {
    gap:40px;
    padding-top:5px
  }
  .owner-copy h2 {
    font-size:41px
  }
  .owner-visual {
    padding:27px 20px
  }
  .owner-chat {
    gap:5px
  }
  .owner-chat p {
    font-size:11px;
    padding:14px
  }
  .faq-section {
    gap:40px
  }
  .conversation-strip {
    gap:20px
  }
  .assistant-names {
    font-size:19px;
    gap:17px
  }
  .conversation-strip>a {
    max-width:130px;
    line-height:1.7
  }
  .conversation-strip>span {
    max-width:135px;
    font-size:7px
  }
  .assistant-names .and-more {
    font-size:13px
  }
  .site-footer>span {
    font-size:9px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:30px
  }
  .site-header {
    height:77px;
    padding:0 6%
  }
  .wordmark {
    font-size:27px
  }
  .site-header nav>a:not(.nav-cta) {
    display:none
  }
  .site-header .nav-cta {
    font-size:11px;
    padding:10px 13px;
    gap:16px
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:45px 6% 36px;
    min-height:0
  }
  .hero-copy {
    text-align:center
  }
  .hero .eyebrow {
    justify-content:center;
    font-size:7px;
    letter-spacing:1.25px;
    margin-bottom:24px
  }
  .hero h1 {
    font-size:clamp(46px,9.7vw,67px);
    letter-spacing:-3px;
    line-height:1.04
  }
  .blue-phrase {
    font-size:.86em;
    letter-spacing:-2.5px
  }
  .hero-description {
    font-size:13px;
    margin-top:29px;
    line-height:1.8
  }
  .hero-actions {
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:19px;
    margin-top:24px
  }
  .button {
    font-size:11px;
    min-height:48px;
    padding:13px 15px;
    gap:13px
  }
  .text-button {
    font-size:10px;
    gap:7px
  }
  .play-icon {
    width:25px;
    height:25px
  }
  .hero-footnote {
    justify-content:center;
    font-size:8px;
    margin-top:16px
  }
  .hero-scene {
    width:390px;
    height:490px;
    margin:28px auto 0;
    transform:none;
    transform-origin:center
  }
  .scene-business {
    width:263px;
    left:15%;
    top:87px;
    border-radius:13px
  }
  .scene-photo {
    height:214px
  }
  .scene-business-info {
    padding:13px 6px 9px
  }
  .scene-business-info h2 {
    font-size:21px
  }
  .scene-business-bottom {
    padding:11px 6px 14px
  }
  .scene-calendar {
    width:160px;
    right:0;
    top:18px;
    padding:14px 12px;
    border-radius:12px
  }
  .calendar-header {
    font-size:9px;
    margin-bottom:11px
  }
  .calendar-grid {
    font-size:6px;
    gap:3px
  }
  .calendar-grid>span {
    height:17px
  }
  .calendar-grid>b {
    font-size:5px
  }
  .scene-message {
    left:0;
    top:277px;
    padding:14px 17px;
    gap:10px
  }
  .scene-message p {
    font-size:12px
  }
  .scene-confirm {
    bottom:20px;
    right:2%;
    width:237px;
    padding:15px
  }
  .scene-caption {
    bottom:-3px;
    right:6%;
    font-size:5px
  }
  .scene-orbit {
    top:40px;
    height:370px;
    left:0;
    width:100%
  }
  .star-one {
    top:28px;
    left:18%
  }
  .star-two {
    top:289px;
    right:0
  }
  .botanical-hero {
    width:350px;
    height:500px;
    right:-172px;
    top:-95px;
    opacity:.11
  }
  .hero-halo {
    width:100%;
    height:600px;
    top:auto;
    bottom:-80px
  }
  .conversation-strip {
    flex-direction:column;
    text-align:center;
    gap:20px;
    padding:26px 0;
    margin:0 6%
  }
  .conversation-strip>span {
    max-width:none;
    font-size:7px;
    letter-spacing:1.3px
  }
  .assistant-names {
    font-size:23px;
    gap:23px
  }
  .assistant-names .and-more {
    font-size:16px
  }
  .conversation-strip>a {
    max-width:none;
    font-size:9px
  }
  .section-shell {
    padding:66px 6%
  }
  .section-intro {
    display:block;
    margin-bottom:30px
  }
  .section-intro .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
    margin-bottom:16px
  }
  .section-intro h2 {
    font-size:39px;
    letter-spacing:-1.9px
  }
  .section-intro>p {
    font-size:12px;
    margin-top:20px;
    line-height:1.8
  }
  .story-layout {
    grid-template-columns:1fr;
    gap:27px
  }
  .story-step {
    padding:21px 0;
    gap:17px
  }
  .story-step strong {
    font-size:17px
  }
  .story-step>span>span {
    font-size:11px;
    max-width:300px;
    margin-top:7px
  }
  .story-controls {
    flex-direction:row;
    align-items:center;
    margin-top:17px
  }
  .story-controls>span {
    font-size:5px
  }
  .story-stage {
    min-height:408px;
    padding:23px
  }
  .story-panel {
    min-height:279px
  }
  .chat-question {
    margin-left:34px
  }
  .story-section {
    padding-bottom:65px
  }
  .business-grid {
    grid-template-columns:1fr;
    gap:34px
  }
  .business-photo {
    height:290px
  }
  .business-meta {
    flex-direction:row;
    font-size:8px;
    margin-top:17px
  }
  .business-card h3 {
    font-size:24px
  }
  .business-card>p {
    font-size:12px
  }
  .demo-disclosure {
    font-size:8px;
    margin-top:24px
  }
  .owner-section {
    display:flex;
    flex-direction:column-reverse;
    gap:35px;
    padding-top:5px
  }
  .owner-copy {
    width:100%
  }
  .owner-copy h2 {
    font-size:43px;
    letter-spacing:-2px
  }
  .owner-copy>p {
    max-width:none;
    font-size:13px
  }
  .owner-copy li {
    font-size:11px
  }
  .owner-visual {
    width:100%;
    min-height:454px;
    padding:27px
  }
  .owner-chat {
    gap:10px;
    margin-top:30px
  }
  .owner-chat p {
    font-size:12px
  }
  .owner-mini-card {
    max-width:260px
  }
  .owner-mini-card>img {
    height:142px
  }
  .owner-reply {
    margin:24px 0 22px 42px
  }
  .faq-section {
    display:block;
    padding-top:52px;
    padding-bottom:55px
  }
  .faq-section h2 {
    font-size:38px;
    letter-spacing:-1.8px
  }
  .faq-section h2 br {
    display:none
  }
  .faq-list {
    margin-top:30px
  }
  .faq-list summary {
    font-size:13px
  }
  .faq-list details {
    padding:21px 0
  }
  .final-cta {
    padding:68px 6% 72px
  }
  .final-cta h2 {
    font-size:38px;
    letter-spacing:-1.8px;
    line-height:1.14
  }
  .final-cta>.eyebrow {
    font-size:6px;
    letter-spacing:1.3px
  }
  .final-cta>.button {
    margin-top:27px
  }
  .final-cta>p {
    font-size:9px
  }
  .final-star {
    right:5%;
    top:15%
  }
  .final-star svg {
    width:20px;
    height:20px
  }
  .botanical-footer {
    left:-180px;
    bottom:-150px;
    opacity:.11
  }
  .site-footer {
    flex-wrap:wrap;
    padding:28px 6%;
    gap:20px
  }
  .site-footer>span {
    order:3;
    flex-basis:100%;
    font-size:9px
  }
  .site-footer>div {
    gap:15px
  }
  .site-footer>div>a {
    font-size:9px
  }
  #motion-toggle {
    font-size:8px;
    padding:7px
  }
  .connection-footnote {
    margin:0 6%;
    font-size:7px;
    flex-direction:column;
    gap:5px;
    padding-bottom:22px
  }
}

@media(max-width:420px) {
  .hero-scene {
    width:340px;
    margin-left:50%;
    transform:translateX(-50%) scale(.93);
    transform-origin:top center;
    margin-bottom:-25px
  }
  .scene-calendar {
    right:-10px
  }
  .scene-business {
    left:11%
  }
  .scene-message {
    left:-6px
  }
  .hero h1 {
    font-size:49px;
    letter-spacing:-2.7px
  }
  .blue-phrase {
    font-size:.81em;
    letter-spacing:-2px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    gap:10px;
    padding:13px 12px;
    font-size:10px
  }
  .hero-actions .text-button {
    font-size:9px
  }
  .hero-footnote {
    font-size:7px
  }
  .hero .eyebrow {
    font-size:6px
  }
  .business-photo {
    height:245px
  }
  .assistant-names {
    gap:18px;
    font-size:21px
  }
  .assistant-names .and-more {
    font-size:14px
  }
  .story-stage {
    padding:20px 17px
  }
  .chat-business>img {
    width:66px
  }
  .chat-business strong {
    font-size:15px
  }
  .chat-business .micro-label {
    font-size:6px
  }
  .chat-business div>span:last-child {
    font-size:8px
  }
  .owner-visual {
    padding:26px 19px
  }
  .business-lead-banner { margin:0 6% 65px; padding:25px 22px; display:grid; grid-template-columns:auto 1fr; gap:16px }
  .business-lead-banner .button { grid-column:1 / -1; justify-self:start }
  .owner-chat p {
    font-size:11px
  }
  .final-cta h2 {
    font-size:32px
  }
  .site-footer>div {
    gap:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .motion-on .reveal.waiting {
    opacity:1;
    transform:none
  }
  .hero-scene {
    --tilt-x:0px!important;
    --tilt-y:0px!important
  }
}

/* Shared customer discovery and clear business entry points. */
.site-header nav [aria-current="page"] { color:var(--blue); }
.catalog-more { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:35px; }
.catalog-card-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); margin-top:18px; padding-top:16px; font-size:12px; line-height:1.5; }
.catalog-card-bottom>span:last-child { color:var(--blue); }
.catalog-placeholder { height:100%; display:grid; place-items:center; font-size:90px; color:#73947a; }
.business-card>p { line-height:1.7; }
.business-meta { font-size:11px; line-height:1.5; flex-wrap:wrap; }
.explore-shell { max-width:1440px; padding:0 6%; margin:auto; }
.explore-intro { padding:65px 0 35px; }
.explore-intro h1 { font-size:clamp(44px,5.5vw,76px); line-height:1.04; letter-spacing:-3px; font-weight:600; margin:22px 0; }
.explore-intro>p { color:var(--muted); line-height:1.7; }
.catalog-results { padding:25px 0 60px; }
.catalog-heading { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-bottom:30px; }
.catalog-heading h2 { font-size:26px; font-weight:550; margin-right:auto; }
.catalog-heading>span { color:var(--muted); font-size:13px; }
.catalog-heading>a { color:var(--blue); font-size:13px; }
.catalog-empty { padding:50px 25px; border:1px solid var(--line); border-radius:16px; text-align:center; }
.catalog-empty p { color:var(--muted); line-height:1.7; margin:15px 0 25px; }
.catalog-assistant { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:30px; border-radius:16px; background:#e9eddf; margin:10px 0 60px; }
.catalog-assistant h2 { font-size:24px; font-weight:550; }
.catalog-assistant p { font-size:14px; color:#626e5b; margin-top:10px; line-height:1.7; }
.journey-links { display:flex; flex-wrap:wrap; gap:15px; margin-top:25px; }
#for-business { border-top:1px solid var(--line); padding-top:75px; }
@media(max-width:1000px) {
  .site-header nav { gap:18px; font-size:12px; }
}
@media(max-width:760px) {
  .site-header { height:auto; min-height:100px; padding-top:20px; padding-bottom:16px; flex-wrap:wrap; gap:16px; }
  .site-header nav { width:100%; justify-content:space-between; gap:10px; }
  .site-header nav>a:not(.nav-cta) { display:block; font-size:11px; }
  .site-header .nav-cta { font-size:11px; padding:10px; gap:6px; }
  .catalog-card-bottom { font-size:12px; }
  .business-meta { font-size:11px; }
  .explore-intro { padding-top:40px; }
  .explore-intro h1 { letter-spacing:-2px; }
  .catalog-assistant { flex-direction:column; align-items:flex-start; }
  .site-footer>div { flex-wrap:wrap; }
}
@media(min-width:761px) and (max-width:1000px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero-scene { margin-left:0; transform:scale(.75); }
  .scene-message { left:0; }
}

/* Both sides of Awning are visible from the first screen. */
.hero-paths { display:flex; flex-wrap:wrap; gap:22px 16px; margin-top:30px; }
.hero-path { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-path>span { max-width:205px; font-size:11px; line-height:1.6; color:var(--muted); }
.hero-paths .button { gap:12px; padding:16px 18px; font-size:12px; }
.hero-footnote a:hover { color:var(--blue); }
@media(max-width:1000px) {
  .hero-paths { gap:20px; }
  .hero-path { flex-direction:row; align-items:center; width:100%; gap:14px; }
  .hero-path .button { flex-shrink:0; }
  .hero-path>span { max-width:115px; font-size:10px; }
}
@media(max-width:760px) {
  .hero-paths { justify-content:center; gap:20px 14px; }
  .hero-path { width:auto; flex-direction:column; }
  .hero-paths .button { font-size:11px; padding:14px 12px; gap:8px; }
  .hero-path>span { max-width:145px; }
  .hero-footnote { font-size:10px; }
}