.home-section { padding: 112px 0; background: var(--surface); }
.home-section-heading { margin-bottom: 48px; }
.home-section-heading > .eyebrow { color: var(--muted); }
.home-section-heading h2 { margin: 20px 0 24px; font-size: clamp(42px, 5vw, 68px); line-height: 1.08; letter-spacing: -.055em; font-weight: 720; }
.home-section-heading h2 > span, .pricing-heading h2 > span { color: var(--muted); }
.home-section-heading > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.home-section-ending { text-align: center; margin-top: 36px; }
.home-section-ending > p { margin: 0; font-size: 18px; line-height: 1.7; }
.home-section-ending > span { display: block; max-width: 660px; margin: 15px auto 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.conversation-demo { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--page); overflow: hidden; }
.demo-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.demo-chat { min-width: 0; background: white; border-right: 1px solid var(--line); }
.demo-chat-header { display: flex; align-items: center; gap: 10px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.demo-chat-header > strong { font-size: 17px; }
.demo-chat-header > span { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: var(--muted); }
.demo-chat-header .icon { width: 14px; height: 14px; }
.demo-transcript { list-style: none; padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.demo-message { max-width: 94%; font-size: 14px; line-height: 1.65; transition: opacity .45s, transform .45s; }
.demo-user { align-self: flex-end; background: var(--surface-muted); border-radius: 14px 14px 3px 14px; padding: 13px 17px; }
.demo-assistant { padding: 0 6px; }
.demo-preview-label { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: transparent; width: 100%; text-align: left; }
.demo-preview-label:enabled:hover { background: var(--page); border-color: #aeb5c5; }
.demo-example[hidden], .demo-industry-switch[hidden] { display: none; }
.demo-example-title { font-size: 20px; margin: 0; padding: 24px; border-bottom: 1px solid var(--line); }
.demo-has-selector .demo-example-title { display: none; }
.demo-message.demo-done { align-items: flex-start; }
.demo-done > .icon { flex-shrink: 0; margin-top: 3px; }
.demo-example-link { color: #1761cb; text-decoration: underline; text-underline-offset: 3px; }
.demo-message.is-typing .demo-example-link { opacity: 0; }
.demo-message.is-typing .demo-pdf { display: none; }
.demo-thinking { display: flex; align-items: center; align-self: flex-start; gap: 9px; width: fit-content; max-width: 90%; padding: 10px 13px; border-radius: 13px 13px 13px 4px; background: #eef0f3; color: #7b808b; font-size: 12px; line-height: 1.35; animation: demo-thinking-in .35s ease both; }
.demo-thinking[hidden] { display: none; }
.demo-thinking-dots { display: inline-flex; align-items: center; gap: 3px; }
.demo-thinking-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: demo-thinking-dot 1s ease-in-out infinite; }
.demo-thinking-dots i:nth-child(2) { animation-delay: .12s; }
.demo-thinking-dots i:nth-child(3) { animation-delay: .24s; }
.demo-pdf { display: flex; align-items: center; gap: 11px; padding-top: 13px; margin-top: 12px; border-top: 1px solid #00003d12; font-size: 12px; font-weight: 550; }
.demo-pdf > svg { flex-shrink: 0; }
.demo-industry-switch { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
.demo-industry-select { position: relative; width: 220px; }
.demo-industry-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 25px; padding: 0 42px 0 22px; background: #fff; color: var(--primary); font: inherit; font-size: 15px; cursor: pointer; }
.demo-industry-select > .icon { position: absolute; right: 18px; top: 16px; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
.demo-industry-select select:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.demo-industry-switch > button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: white; transition: border-color .2s, background .2s; }
.demo-industry-switch > button:hover { border-color: #aeb5c5; background: var(--page); }
.demo-industry-switch > button > .icon { transform: rotate(180deg); width: 20px; height: 20px; }
.demo-enhanced .demo-transcript { height: 560px; overflow-y: auto; scrollbar-width: thin; }
.demo-enhanced .demo-message:not(.is-shown) { display: none; }
.demo-enhanced .demo-message.is-shown { animation: demo-message-in .42s var(--ease) both; }
.demo-message-body { display: grid; }
.demo-message-measure, .demo-message-live { grid-area: 1 / 1; min-width: 0; white-space: pre-wrap; }
.demo-message-measure { visibility: hidden; pointer-events: none; }
.demo-message.is-typing .demo-message-text::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: demo-caret .8s steps(1, end) infinite; }
.industry-slide { position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; container-type: inline-size; }
.industry-slide-brand { position: absolute; top: 7%; left: 6%; font-size: 2cqw; font-weight: 700; letter-spacing: .16em; }
.industry-slide-brand > span { opacity: .6; font-weight: 450; }
.industry-slide-eyebrow { position: absolute; top: 20%; left: 6%; font-size: 1.6cqw; letter-spacing: .13em; }
.industry-slide-footer { position: absolute; bottom: 6%; left: 6%; right: 6%; display: flex; justify-content: space-between; gap: 10px; padding-top: 2.4%; border-top: 1px solid currentColor; font-size: 1.45cqw; letter-spacing: .05em; }
.office-slide { background: #e8edf6; color: var(--primary); }
.office-meeting { position: absolute; inset: 0; opacity: 1; transition: opacity .65s ease, visibility .65s; }
.office-brand { position: absolute; top: 8%; left: 5.5%; font-size: 1.8cqw; font-weight: 450; letter-spacing: .16em; }
.office-brand > span { color: var(--muted); }
.office-meeting-copy { position: absolute; top: 25%; left: 5.5%; right: 5.5%; }
.office-eyebrow { display: block; font-size: 2.4cqw; line-height: 1.2; letter-spacing: .07em; }
.office-slide-title { display: block; margin-top: 1.8cqw; font-size: 7cqw; line-height: 1.05; letter-spacing: -.05em; font-weight: 690; }
.office-meeting-footer { position: absolute; bottom: 7%; left: 5.5%; right: 5.5%; display: flex; flex-direction: column; gap: .8cqw; border-top: 1px solid #00003d26; padding-top: 1.8cqw; font-size: 2.35cqw; line-height: 1.3; }
.office-attendees { font-size: 1.9cqw; color: #526078; transition: opacity .5s ease; }
.demo-example:not(.office-show-second) .office-meeting[data-office-meeting="1"],
.office-show-second .office-meeting[data-office-meeting="0"] { opacity: 0; visibility: hidden; }
.demo-enhanced:not(.demo-is-changed) .office-meeting { transition: none; }
.demo-enhanced:not(.demo-is-changed) .office-attendees { opacity: 0; visibility: hidden; }
.retail-slide { background: #edf0f5; color: #122549; }
.retail-kicker { position: absolute; top: 12%; right: 6%; font-size: 1.6cqw; letter-spacing: .12em; }
.retail-title { position: absolute; top: 20%; left: 6%; font-size: 6cqw; line-height: 1; font-weight: 750; letter-spacing: -.06em; }
.retail-products { position: absolute; top: 32%; bottom: 15%; left: 6%; right: 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.retail-product { position: relative; min-width: 0; display: flex; align-items: center; border-top: 1px solid #14274820; }
.retail-product > svg { width: 50%; height: 100%; }
.retail-product-copy { flex: 1; }
.retail-product-copy > span { display: none; font-size: 1.3cqw; letter-spacing: .1em; }
.retail-product-copy > strong { display: block; font-size: 2.7cqw; line-height: 1.1; letter-spacing: -.045em; }
.retail-product-copy > div { margin-top: 1.8cqw; font-size: 4.5cqw; font-weight: 650; letter-spacing: -.06em; white-space: nowrap; }
.retail-product-copy > div > span, .retail-product-copy s { font-size: 1.6cqw; font-weight: 450; letter-spacing: 0; }
.retail-product-copy s { margin-left: .8cqw; color: #68758a; }
.demo-enhanced.demo-is-changed .retail-products { top: 30%; display: block; }
.demo-enhanced.demo-is-changed .retail-product { position: absolute; inset: 0; border-top: 0; transition: opacity .45s ease, transform .6s var(--ease); }
.demo-enhanced.demo-is-changed .retail-product > svg { order: 2; width: 54%; }
.demo-enhanced.demo-is-changed .retail-product-copy > span { display: block; margin-bottom: 1.5cqw; }
.demo-enhanced.demo-is-changed .retail-product-copy > strong { font-size: 5.2cqw; }
.demo-enhanced.demo-is-changed .retail-product-copy > div { font-size: 6cqw; }
.demo-enhanced.demo-is-changed .retail-product-copy s, .demo-enhanced.demo-is-changed .retail-product-copy > div > span { font-size: 2cqw; }
.demo-enhanced.demo-is-changed .demo-example:not(.retail-show-second) .retail-speaker,
.demo-enhanced.demo-is-changed .retail-show-second .retail-headphones { opacity: 0; visibility: hidden; transform: translateX(10px); }
.school-slide { background: #f4f0e6; color: #304b3e; }
.school-meals { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #d9d3c5; }
.school-meal { display: grid; grid-template-rows: 64% 36%; min-width: 0; min-height: 0; background: #f4f0e6; }
.school-meal > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: opacity .7s; }
.school-meal-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2cqw; padding: 2.5cqw 2.6cqw 2.3cqw; min-width: 0; }
.school-meal-copy > strong { font-size: 3.8cqw; font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.school-meal-price { align-self: flex-end; white-space: nowrap; font-size: 3.2cqw; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.school-meal-price > span { font-size: 1.8cqw; font-weight: 500; letter-spacing: .025em; margin-right: .35cqw; }
.demo-enhanced:not(.demo-is-changed) .school-meal > img { opacity: 0; visibility: hidden; }
.demo-preview-label .icon { width: 17px; height: 17px; }
.demo-done { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.demo-done .icon { width: 18px; height: 18px; }
.demo-preview-pane { min-width: 0; display: flex; flex-direction: column; }
.demo-preview-top { display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 23px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.demo-preview-top .icon { width: 16px; height: 16px; }
.demo-window-dots { letter-spacing: 3px; color: #b8bfcc; }
.demo-result-room { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px; min-height: 300px; }
.demo-result-room > .room-lines, .design-room > .room-lines { inset: 0; width: 100%; height: 100%; color: #a8b2c5; opacity: .3; z-index: -1; }
.demo-screen { width: 100%; transition: transform 1s var(--ease), box-shadow 1s; }
.demo-offer, .design-screen { border: 3px solid #49494b; box-shadow: 0 12px 24px #00003d10; background: #e8edf6; }
.demo-offer .raclette-slide, .design-screen .raclette-slide { aspect-ratio: 16 / 9; }
.demo-screen-caption { margin-top: 14px; text-align: center; font-size: 11px; color: var(--muted); }
.demo-preview-status { display: flex; align-items: center; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--line); font-size: 12px; }
.demo-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.demo-offer .raclette-photo { transition: filter 1.4s ease; }
.demo-is-warm .demo-offer .raclette-photo { filter: sepia(.24) saturate(1.16); }
.demo-is-published .demo-screen { transform: scale(.93); box-shadow: 0 0 60px #609bed20; }
.demo-controls { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 18px 24px; }
.demo-controls[hidden] { display: none; }
.demo-controls button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: transparent; font-size: 12px; }
.demo-controls button .icon { width: 15px; height: 15px; }
.demo-progress { height: 2px; flex: 1; background: var(--line); }
.demo-progress > span { display: block; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; }
.demo-enhanced .demo-message:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(8px); }
.demo-enhanced .demo-offer > * { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.demo-enhanced:not(.demo-has-preview) .demo-offer > * { opacity: 0; visibility: hidden; transition: none; }
@keyframes demo-message-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demo-caret {
  50% { opacity: 0; }
}
@keyframes demo-thinking-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes demo-thinking-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-2px); opacity: 1; }
}
.design-story { background: var(--page); }
.design-pair { display: grid; grid-template-columns: minmax(0, .7fr) 60px minmax(0, 1.3fr); align-items: center; gap: 20px; }
.design-pair figure { margin: 0; min-width: 0; }
.source-photo { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transform: rotate(-3deg); }
.source-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 7px; }
.design-pair figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; }
.design-pair figcaption > span { color: var(--muted); font-size: 11px; }
.design-direction { text-align: center; color: #a4aabc; }
.design-room { position: relative; isolation: isolate; min-height: 330px; padding: 50px 28px; display: grid; place-items: center; border-radius: 16px; background: #f0f2f7; overflow: hidden; }
.design-screen { width: 100%; }
.automation-example { display: grid; grid-template-columns: minmax(0, .75fr) 60px minmax(0, 1.25fr); align-items: center; gap: 20px; padding: 44px; background: var(--page); border: 1px solid var(--line); border-radius: 16px; }
.automation-schedule { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.automation-schedule .icon { width: 16px; height: 16px; }
.calendar-card { display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.calendar-date { display: flex; flex-direction: column; gap: 5px; font-size: 9px; letter-spacing: 1px; padding-right: 18px; border-right: 1px solid var(--line); }
.calendar-date strong { font-size: 23px; letter-spacing: -.6px; }
.calendar-card > div { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.calendar-card > div > span { font-size: 11px; color: var(--muted); }
.automation-connector { display: grid; place-items: center; color: #a4aabc; }
.meeting-screen { display: flex; flex-direction: column; aspect-ratio: 16/10; padding: 30px; background: #e8edf6; border: 3px solid #49494b; color: var(--primary); box-shadow: 0 12px 24px #00003d10; container-type: inline-size; }
.meeting-brand { font-size: 10px; letter-spacing: 2px; }
.meeting-brand > span { color: var(--muted); }
.meeting-eyebrow { margin-top: auto; padding-top: 28px; font-size: 2.8cqw; letter-spacing: .1em; }
.meeting-screen > strong { margin: 12px 0 25px; font-size: 8cqw; font-weight: 650; line-height: 1.1; letter-spacing: -.05em; }
.meeting-footer { border-top: 1px solid #00003d26; padding-top: 14px; font-size: 2.8cqw; }
.meeting-screen { transition: opacity .9s ease .35s, transform 1.1s var(--ease) .35s; }
.js-motion .automation-example:not(.is-visible) .meeting-screen { opacity: 0; transform: translateY(14px); }
.pricing-followup { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.pricing-requirements { margin-top: 24px; font-size: 13px; color: var(--muted); line-height: 1.75; max-width: 800px; }
.pricing-requirements > p { margin: 8px 0; }
.pricing-requirements a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1050px) {
  .demo-workspace { grid-template-columns: 1fr 1fr; }
  .demo-chat-header { padding: 18px; flex-wrap: wrap; }
  .demo-preview-top { height: 62px; padding-inline: 18px; }
  .demo-transcript { padding: 18px; }
  .demo-result-room { padding: 20px; }
  .automation-example { padding: 28px; grid-template-columns: minmax(0, .9fr) 32px minmax(0, 1.1fr); gap: 14px; }
  .calendar-card { padding: 18px; gap: 12px; }
}
@media (max-width: 760px) {
  .home-section { padding: 72px 0; }
  .home-section-heading { margin-bottom: 32px; }
  .home-section-heading h2 { font-size: clamp(36px, 8.6vw, 54px); margin: 16px 0 20px; }
  .home-section-heading > p, .home-section-ending > p { font-size: 16px; }
  .home-section-heading .eyebrow { font-size: 8px; letter-spacing: 1.25px; }
  .demo-workspace { grid-template-columns: 1fr; }
  .demo-chat { border-right: 0; border-bottom: 1px solid var(--line); }
  .demo-message { font-size: 14px; max-width: 95%; }
  .demo-enhanced .demo-transcript { height: 302px; overflow-y: auto; scrollbar-width: thin; }
  .demo-enhanced .demo-message:not(.is-shown) { display: none; }
  .demo-enhanced .demo-message.is-shown { animation: demo-message-in .42s var(--ease) both; }
  .demo-preview-top { height: 62px; padding-inline: 20px; }
  .demo-result-room { min-height: 235px; padding: 26px 20px; }
  .demo-preview-status { padding: 16px 20px; }
  .demo-controls { padding: 14px 16px; flex-wrap: wrap; gap: 16px; }
  .demo-controls button { font-size: 11px; }
  .demo-progress { flex-basis: 100%; }
  .design-pair { grid-template-columns: 1fr; gap: 26px; }
  .design-source { width: 65%; margin-inline: auto !important; }
  .source-photo > img { aspect-ratio: 4/3; }
  .design-direction { transform: rotate(90deg); }
  .design-room { min-height: 240px; padding: 34px 20px; }
  .design-pair figcaption { margin-top: 18px; }
  .automation-example { padding: 24px; grid-template-columns: 1fr; gap: 28px; }
  .automation-connector { transform: rotate(90deg); }
  .meeting-screen { padding: 22px; }
  .meeting-brand { font-size: 8px; letter-spacing: 1.4px; }
  .meeting-eyebrow, .meeting-footer { font-size: 10px; }
  .meeting-screen > strong { font-size: 28px; }
}
