@font-face { font-family: Inter; src: url('./assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('./assets/fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url('./assets/fonts/GoogleSansFlex-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./assets/fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root { color-scheme: light; font-family: Inter, -apple-system, sans-serif; color: #242832; background: #f5f5f4; --outer-bg: #f5f5f4; --outer-text: #242832; --outer-sub: #7c8088; --outer-fill: #e2e3e4; --bubble: #fff; --bubble-shadow: #2428320a; --accent: #7c3aed; }
:root[data-theme='dark'] { color-scheme: dark; background: #171a20; --outer-bg: #171a20; --outer-text: #e9eaee; --outer-sub: #9ba1ad; --outer-fill: #30353e; --bubble: #252931; --bubble-shadow: #00000015; --accent: #b299fa; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { overscroll-behavior-y: none; }
.scroll-story { height: calc(var(--story-length, 22.4) * 100vh); height: calc(var(--story-length, 22.4) * 100svh); }
.stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 400px; overflow: hidden; }
.topbar { position: absolute; z-index: 4; top: max(26px, env(safe-area-inset-top)); left: max(40px, env(safe-area-inset-left)); right: max(40px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 24px; pointer-events: none; }
h1 { margin: 0; font: 600 23px 'Google Sans', sans-serif; letter-spacing: -.8px; color: var(--outer-text); }
.brand-logo { display: block; position: relative; width: 132px; aspect-ratio: 1923 / 818; }
.brand-logo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; }
.logo-colour { display: none !important; clip-path: ellipse(12.4% 28.4% at 56.2% 51.7%); }
:root[data-theme='dark'] .logo-base { filter: invert(1); }
:root[data-theme='dark'] .logo-colour { display: block !important; }
.topbar h1 { line-height: 0; }

.viewer { position: absolute; inset: 76px 4vw 74px 47%; pointer-events: none; transform-origin: 50% 90%; }
.viewer > canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.unavailable { position: absolute; inset: 40% 24px auto; text-align: center; font-size: 16px; line-height: 1.6; color: var(--outer-sub); }
[hidden] { display: none !important; }
.story-copies { position: absolute; left: max(7vw, 40px); width: min(35vw, 480px); top: 50%; transform: translateY(-50%); height: 490px; z-index: 3; pointer-events: none; }
.story-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; will-change: transform, opacity; }
.story-kicker { margin: 0 0 20px; color: var(--outer-sub); font: 400 10px 'JetBrains Mono', monospace; letter-spacing: 1.25px; text-transform: uppercase; }
.story-kicker span { color: var(--accent); margin-right: 12px; }
.story-copy h2 { margin: 0; color: var(--outer-text); font: 600 clamp(27px, 3.1vw, 46px)/1.12 'Google Sans', sans-serif; letter-spacing: -1.4px; max-width: 450px; text-wrap: balance; }
.prompt-wrap { margin: 32px 0 0; transform-origin: top right; }
.user-label { display: block; margin: 0 6px 9px 0; text-align: right; color: var(--outer-sub); font: 400 10px 'JetBrains Mono', monospace; letter-spacing: .4px; }
.prompt-bubble { position: relative; margin: 0; padding: 22px 24px; background: var(--bubble); color: var(--outer-text); border: 1px solid var(--outer-fill); border-radius: 22px 22px 5px 22px; box-shadow: 0 8px 32px var(--bubble-shadow); font: 400 clamp(15px, 1.45vw, 20px)/1.55 Inter, sans-serif; letter-spacing: -.25px; }
.services { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 24px 0 0; color: var(--outer-sub); font: 400 11px Inter, sans-serif; }
.services span { display: flex; align-items: center; gap: 6px; }
.services i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .7; }
.followup { margin: 16px 0 0 auto; max-width: 88%; display: flex; flex-direction: column; gap: 10px; }
.followup p { align-self: end; margin: 0; padding: 12px 18px; border-radius: 18px 18px 4px 18px; background: var(--bubble); border: 1px solid var(--outer-fill); font: 400 15px/1.45 Inter, sans-serif; color: var(--outer-text); }
.story-beat { margin: 24px 0 0; color: var(--accent); font: 400 12px Inter, sans-serif; min-height: 18px; }
.story-beat::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 9px; vertical-align: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-display { pointer-events: none; user-select: none; position: absolute; z-index: 1; width: 390px; height: 845.747px; transform-origin: top left; border-radius: 59.77px; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink); font-family: Inter, sans-serif; --paper: #fdfdfe; --paper2: #f5f6f9; --ink: #000; --sub: #5e6470; --graphite: #242832; --line: #0000000c; --fill: #171a210d; --card: #fff; --green: #268858; --violet: #7c3aed; }
.app-display[data-theme='dark'] { --paper: #0b0d12; --paper2: #13151c; --ink: #fff; --sub: #9ba1ad; --graphite: #e9eaee; --line: #ffffff0f; --fill: #ffffff0d; --card: #191c24; --green: #80cca4; --violet: #b299fa; }
.status-bar { position: absolute; top: 34px; left: 29px; right: 26px; display: flex; justify-content: space-between; align-items: center; height: 22px; color: var(--ink); font: 600 17px -apple-system, sans-serif; letter-spacing: -.4px; }
.status-icons { display: flex; align-items: center; gap: 6px; }
.status-icons svg { width: 18px; height: 16px; }
.status-icons .cellular { width: 16px; height: 15px; }
.status-icons .battery { width: 27px; height: 16px; }
.app-home { position: absolute; top: 76px; bottom: 34px; left: 16px; right: 16px; }
.app-header { position: relative; height: 68px; display: flex; align-items: center; justify-content: center; padding-top: 24px; }
.app-icon-button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--sub); padding: 12px; }
.app-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.settings-entry { position: absolute; left: 0; bottom: 0; }
.app-header-trailing { position: absolute; right: 0; bottom: 0; display: flex; }
.browser-entry { order: 1; }
.orb-group { position: absolute; top: 230px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; transform: translateY(var(--orb-dock-y, 0px)) scale(var(--orb-dock-scale, 1)); transform-origin: 50% 0; }
.orb-button { width: 164px; height: 164px; position: relative; border-radius: 50%; box-shadow: 0 3px 11px #00000017; transform: scale(var(--orb-scale, 1)); }
.app-display[data-theme='dark'] .orb-button { box-shadow: 0 3px 11px #00000042; }
.orb-crop { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; }
.orb-crop img { position: absolute; width: 135.1%; height: 135.1%; max-width: none; top: -17.55%; left: -17.55%; user-select: none; transform: rotate(var(--orb-angle, 0deg)); }
.orb-crop::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -2px 4px #0000001f, inset 0 1px 1px #ffffff38; }
.voice-state { margin: 24px 0 0; color: var(--sub); font: 400 14px/17px Inter, sans-serif; text-align: center; }
.orb-ring { position: absolute; inset: -14px; border: 1px solid #8798f2; border-radius: 50%; opacity: var(--ring-opacity, 0); transform: scale(var(--ring-scale, 1)); }
.voice-glow { position: absolute; height: 230px; left: -25%; right: -25%; bottom: -140px; opacity: var(--glow-opacity, 0); background: radial-gradient(ellipse at 30% 75%,#8127ff50,transparent 55%), radial-gradient(ellipse at 60% 90%,#00dceb50,transparent 50%), radial-gradient(ellipse at 80% 65%,#ff529a38,transparent 50%); filter: blur(28px); }
.demo-workspace { position: absolute; top: 240px; left: 4px; right: 4px; bottom: 40px; }
.demo-chapter { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; opacity: 0; }
.demo-element { will-change: transform, opacity; }
.demo-chapter > div { flex-shrink: 0; }
.workflow { overflow: hidden; display: flex; flex-direction: column; gap: 11px; padding: 0 8px 3px; }
.workflow-row { display: flex; align-items: center; gap: 11px; min-height: 35px; }
.service-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 9px; color: var(--violet); background: var(--fill); }
.service-icon svg, .card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-icon.calendar { color: #e7616d; }
.service-icon.mail { color: #4a93e0; }
.service-icon.memory { color: #a483e7; }
.workflow-copy { flex: 1; }
.workflow-copy strong { display: block; color: var(--graphite); font: 500 12px/16px Inter, sans-serif; }
.workflow-copy small { color: var(--sub); font: 400 10px/15px Inter, sans-serif; }
.check { color: var(--green); font-size: 13px; }
.demo-card { background: var(--paper2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--sub); font: 400 9px/13px 'JetBrains Mono', monospace; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 9px; }
.card-eyebrow .tiny-orb { width: 16px; height: 16px; background: url('./assets/aroa-orb.png') center / 135.1%; border-radius: 50%; }
.demo-card h3 { margin: 0; color: var(--graphite); font: 600 17px/22px 'Google Sans', sans-serif; letter-spacing: -.35px; }
.demo-card p { margin: 7px 0 0; color: var(--sub); font: 400 12px/18px Inter, sans-serif; }
.notification { padding: 13px 16px; background: var(--card); box-shadow: 0 4px 18px #00000008; }
.notification .card-eyebrow { margin-bottom: 5px; }
.notification h3 { font-size: 13px; line-height: 17px; }
.notification p { margin-top: 4px; font-size: 11px; line-height: 16px; }
.gift-list { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.gift-row { display: flex; gap: 11px; align-items: center; }
.gift-art { flex: 0 0 37px; width: 37px; height: 37px; border-radius: 10px; display: grid; place-items: center; background: #bca6ef30; color: #8b65c4; }
.gift-art svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gift-art.book { background: #72bfdc25; color: #5b9ab3; }
.gift-art.tiles { background: #efb06925; color: #c1874b; }
.gift-row strong { display: block; font: 500 12px/17px Inter, sans-serif; color: var(--graphite); }
.gift-row small { color: var(--sub); font: 400 10px/14px Inter, sans-serif; }
.location-line { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 12px; font: 400 10px Inter, sans-serif; color: var(--violet); }
.location-line svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.aroa-response { display: flex; gap: 9px; align-items: flex-start; padding: 2px 6px; }
.response-mark { flex: 0 0 20px; height: 20px; border-radius: 50%; background: url('./assets/aroa-orb.png') center / 135.1%; margin-top: 2px; }
.aroa-response p { margin: 0; color: var(--graphite); font: 400 13px/20px Inter, sans-serif; letter-spacing: -.1px; }
.event-card { display: flex; gap: 13px; align-items: center; padding: 14px 16px; }
.date-tile { flex: 0 0 43px; text-align: center; padding: 6px 0; border-radius: 10px; background: var(--card); color: var(--graphite); }
.date-tile span { display: block; color: #e66a76; font: 500 8px Inter, sans-serif; }
.date-tile strong { font: 600 22px 'Google Sans', sans-serif; }
.event-card h3 { font-size: 14px; line-height: 19px; }
.time-change { margin-top: 4px; color: var(--green); font: 500 12px Inter, sans-serif; }
.time-change s { color: var(--sub); font-weight: 400; margin-right: 10px; }
.message-card { padding: 15px 16px; }
.message-card p { color: var(--graphite); font-size: 12px; line-height: 18px; }
.approval-line { position: relative; margin-top: 12px; height: 27px; }
.approval-label { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 20px; padding: 7px 12px; font: 500 10px Inter, sans-serif; position: absolute; inset: 0; color: var(--violet); background: var(--fill); }
.approval-label.approved { color: var(--green); background: #67bb8b18; }
.brief-title { font-size: 19px !important; line-height: 24px !important; }
.brief-points { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 14px; }
.brief-points li { color: var(--graphite); font: 400 12px/18px Inter, sans-serif; padding-left: 12px; border-left: 2px solid #a58ace55; }
.brief-points strong { font-weight: 500; }
.document-chip { margin-top: 16px; padding: 11px; display: flex; gap: 9px; border-radius: 12px; background: var(--card); }
.document-chip .service-icon { width: 26px; height: 30px; flex-basis: 26px; background: transparent; color: #739bdf; }
.document-chip strong { font: 500 11px/16px Inter, sans-serif; color: var(--graphite); display: block; }
.document-chip small { font: 400 9px/13px Inter, sans-serif; color: var(--sub); }
.source-tags { margin-top: 14px; display: flex; gap: 6px; }
.source-tags span { padding: 5px 7px; background: var(--fill); border-radius: 5px; font: 400 8px 'JetBrains Mono', monospace; color: var(--sub); }
.browser-card { padding: 0; overflow: hidden; }
.browser-bar { padding: 11px 13px; display: flex; align-items: center; gap: 7px; background: var(--fill); font: 400 10px Inter, sans-serif; color: var(--sub); }
.browser-bar svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.browser-page { height: 186px; position: relative; }
.browser-view { position: absolute; inset: 17px; }
.browser-page .dental-hero { font: 600 20px/24px 'Google Sans', sans-serif; color: #458b83; letter-spacing: -.5px; }
.browser-page p { font-size: 10px; line-height: 14px; }
.dental-cta { display: inline-block; padding: 9px 13px; border-radius: 6px; color: #fff; background: #458b83; font: 500 10px Inter, sans-serif; margin-top: 12px; }
.dentist-wordmark { color: #458b83; font: 600 14px 'Google Sans', sans-serif; letter-spacing: -.4px; margin-bottom: 13px; }
.browser-page h3 { font: 500 13px/18px Inter, sans-serif; }
.browser-date { display: flex; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 12px; color: var(--graphite); font: 400 10px Inter, sans-serif; }
.slot-list { display: flex; gap: 7px; margin-top: 12px; }
.slot { flex: 1; text-align: center; padding: 10px 0; border: 1px solid #65afa650; color: #458b83; background: #65afa610; border-radius: 8px; font: 500 11px Inter, sans-serif; }
.slot.chosen { background: #458b83; color: white; border-color: transparent; }
.booking-detail { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: var(--sub); font: 400 10px/15px Inter, sans-serif; }
.booking-detail strong { display: block; color: var(--graphite); font-size: 12px; font-weight: 500; }
.memory-excerpt { padding: 14px 16px; }
.memory-excerpt .card-eyebrow { font-size: 8px; }
.memory-excerpt p { color: var(--graphite); font: 400 12px/18px Inter, sans-serif; margin-top: 6px; }
.map-card { padding: 0; overflow: hidden; }
.map-preview { position: relative; height: 139px; background: #e8eee7; overflow: hidden; }
.app-display[data-theme='dark'] .map-preview { background: #26332e; }
.map-block { position: absolute; border-radius: 7px; background: #d1decf; }
.app-display[data-theme='dark'] .map-block { background: #31433a; }
.map-block.one { top: 12px; left: 12px; width: 62px; height: 67px; transform: rotate(-18deg); }
.map-block.two { top: 85px; right: 20px; width: 95px; height: 67px; transform: rotate(-18deg); }
.map-road { position: absolute; background: #fafbf8; box-shadow: 0 0 0 1px #b2c1b120; }
.app-display[data-theme='dark'] .map-road { background: #45534c; }
.map-road.a { top: 41px; left: -15px; width: 400px; height: 16px; transform: rotate(-18deg); }
.map-road.b { top: -45px; left: 110px; width: 14px; height: 240px; transform: rotate(-18deg); }
.map-road.c { top: 112px; left: -15px; width: 400px; height: 10px; transform: rotate(-18deg); }
.map-route { position: absolute; width: 98px; height: 51px; border: 4px solid #598feb; border-left: 0; border-bottom: 0; top: 62px; left: 77px; transform: rotate(-18deg); border-radius: 0 8px 0 0; }
.map-you { position: absolute; width: 12px; height: 12px; top: 99px; left: 83px; background: #598feb; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 5px #598feb20; }
.map-pin { position: absolute; top: 26px; left: 164px; width: 27px; height: 27px; background: #dc6865; border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: -1px 3px 7px #00000015; }
.map-pin span { display: block; color: #fff; transform: rotate(45deg); text-align: center; font: 500 12px/20px Inter, sans-serif; }
.map-place { padding: 13px 16px 15px; }
.map-place h3 { font-size: 16px; }
.map-place p { margin-top: 4px; font-size: 10px; line-height: 15px; }
.maps-direction { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 16px; color: #fff; background: #598feb; font: 500 10px Inter, sans-serif; }
@media (min-width: 1500px) { .viewer { right: 9vw; left: 46%; } }
@media (max-width: 800px) {
  .topbar { left: 24px; right: 24px; top: 12px; gap: 18px; }
  .story-copies { top: 90px; left: 24px; width: calc(100% - 48px); height: 230px; transform: none; }
  .story-copy { justify-content: start; }
  .story-kicker { margin-bottom: 11px; font-size: 9px; }
  .story-copy h2 { font-size: clamp(23px, 4.6vw, 33px); line-height: 1.1; letter-spacing: -.8px; max-width: 100%; }
  .prompt-wrap { margin-top: 17px; opacity: var(--mobile-prompt-opacity, 1); transform: translateY(var(--mobile-prompt-y, 0px)); }
  .user-label { font-size: 8px; margin-bottom: 5px; }
  .prompt-bubble { padding: 13px 16px; font-size: 14px; line-height: 1.5; border-radius: 17px 17px 4px 17px; }
  .services { margin-top: 12px; gap: 12px; font-size: 9px; opacity: var(--mobile-prompt-opacity, 1); }
  .story-beat { margin-top: 13px; font-size: 10px; position: absolute; top: 80px; opacity: var(--mobile-beat-opacity, 0); }
  .followup { position: absolute; top: 92px; right: 0; margin: 0; max-width: 100%; }
  .followup { width: 100%; }
  .followup p { position: absolute; top: 0; right: 0; width: max-content; max-width: 100%; padding: 9px 13px; font-size: 12px; }
  .viewer { inset: 340px 4px 75px; transform: translateY(var(--viewer-offset, 0px)) scale(var(--viewer-scale, 1)); }
}
@media (max-width: 440px) {
  .story-copies { top: 76px; }
  .story-copy h2 { font-size: 25px; }
  .story-kicker { font-size: 8px; }
  .prompt-bubble { font-size: 13px; }
  .viewer { top: 320px; }
}
@media (max-height: 700px) and (min-width: 801px) { .story-copies { height: 390px; } .story-copy h2 { font-size: 30px; } .prompt-bubble { padding: 16px 20px; font-size: 16px; } .prompt-wrap { margin-top: 22px; } }
@media (max-height: 700px) and (max-width: 800px) { .story-copies { top: 65px; } .story-copy h2 { font-size: 20px; } .story-kicker { margin-bottom: 8px; } .prompt-wrap { margin-top: 11px; } .prompt-bubble { font-size: 12px; line-height: 1.4; } .viewer { top: 275px; bottom: 62px; } .topbar { top: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }