/* Page-specific layouts: the homepage hero, blog. Add a file per bigger page type to inc/setup.php instead of growing this one. */

.home-hero { padding: var(--space-hero-pad); background: var(--color-bg); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 526px) minmax(0, 1fr); gap: var(--space-hero-grid-gap); align-items: center; }
.home-hero h1 { max-width: 11ch; margin: var(--space-heading-to-lead) 0; font: var(--weight-display) var(--text-hero)/var(--lh-hero) var(--font-heading); letter-spacing: var(--track-hero); }
.home-hero .lead { max-width: 36rem; }
.home-hero-actions { margin-top: var(--space-lead-to-actions); }
.home-hero .actions { margin-top: 0; }
.home-note { margin-top: 16px; color: var(--color-muted); font-size: 14px; }
.pill { display: inline-flex; align-items: center; margin: 0; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font: var(--weight-label) var(--text-label)/var(--lh-label) var(--font-body); letter-spacing: var(--track-label); text-transform: uppercase; }
.home-section, .home-band { padding-block: var(--space-section-home); }
.home-center { text-align: center; }
.home-center .section-heading { max-width: 720px; margin-inline: auto; margin-bottom: var(--space-heading-block); }
.home-center .section-intro { margin-inline: auto; }
.home-center .section-heading h2, .home-section h2, .home-band h2 { font: var(--weight-display) var(--text-section)/var(--lh-section) var(--font-heading); letter-spacing: var(--track-section); }
.home-tint { background: linear-gradient(90deg, var(--color-bg-alt), var(--color-bg-warm)); }
.home-warm { background: var(--wash-warm); }
.home-alt { background: var(--wash-band); }
.home-center .eyebrow { color: var(--color-accent); }
.snap-row { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.outcome-grid, .step-grid, .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; text-align: left; }
.outcome, .step, .journey, .quote { border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow); }
.outcome, .step { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7); text-align: left; }
.outcome { box-shadow: var(--shadow-card); }
.outcome h2 { font: var(--weight-display) var(--text-card)/var(--lh-card) var(--font-heading); letter-spacing: var(--track-card); }
.step h3 { font: var(--weight-display) var(--text-card)/var(--lh-card) var(--font-heading); letter-spacing: var(--track-card); }
.outcome p, .step p, .journey > p { color: var(--color-muted); }
.icon-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--color-icon-bg); color: var(--color-accent); }
.icon-tile-sm { width: 32px; height: 32px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); }
.home #path { background: var(--color-bg); }
#stories { background: var(--color-bg); }
.home #faq { background: var(--wash-band); }
.step-grid { position: relative; }
.step-grid::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%; height: 2px; background: var(--color-accent); }
.step { position: relative; z-index: 1; align-items: center; padding: 0 var(--space-4); border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.step .step-num { order: -1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-ui); font-weight: var(--weight-ui); line-height: 1; opacity: 1; }
.step .icon-tile { order: 0; width: 40px; height: 40px; }
.step h3 { order: 1; }
.step p { order: 2; }
.poster { position: relative; max-width: 960px; margin: 56px auto 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 44px; background: var(--color-primary-bright); transform: translate(-50%, -50%); }
.play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--color-on-primary); margin-left: 4px; }
.poster-badge { position: absolute; left: 23px; bottom: 23px; padding: 8px 16px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-primary); font: var(--weight-label) var(--text-label)/var(--lh-label) var(--font-body); letter-spacing: var(--track-label); text-transform: uppercase; }
.poster-hit { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: inherit; }
.video-modal { width: min(960px, calc(100vw - 32px)); max-width: 100%; padding: 0; border: 0; background: transparent; overflow: visible; }
.video-modal::backdrop { background: color-mix(in srgb, var(--color-navy) 72%, transparent); }
.video-modal-stage { position: relative; }
.video-modal-stage video, .video-modal-stage iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-card); background: var(--color-navy); }
.video-modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.journey { display: grid; grid-template-rows: auto auto 1fr auto auto auto; align-items: start; gap: var(--space-4); height: 100%; padding: var(--space-7); border: 1px solid var(--color-border); }
.journey h3 { font: var(--weight-display) var(--text-subsection)/var(--lh-subsection) var(--font-heading); letter-spacing: var(--track-subsection); }
.journey > p:not(.eyebrow) { min-height: 0; }
.journey blockquote { margin: 0; padding: 20px; border-radius: 12px; background: var(--color-bg-alt); }
.journey blockquote span { display: block; margin-bottom: 8px; color: var(--color-muted); font-size: 12px; font-weight: 700; }
.journey figure { width: 100%; margin: 0; overflow: hidden; border-radius: 12px; }
.journey img { width: 100%; height: 180px; object-fit: cover; }
.text-link-arrow { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.knowledge-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.panel, .browser, .product-lead, .live-chat { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow); }
.panel { padding: 32px; }
.panel-head, .source-list li, .lead-row, .score { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-head span, .ready { color: var(--color-accent); font-size: 11px; font-weight: 700; }
.panel-head span { padding: 4px 10px; border-radius: 4px; background: var(--color-accent-soft); }
.source-list { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.source-list li { padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-alt); }
.source-list strong, .source-list small, .source-list em { display: block; font-style: normal; }
.source-list small, .source-list em { color: var(--color-muted); font-size: 13px; }
.source-list em { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.ready { margin: 0; padding: 16px; border: 1px solid var(--color-primary-bright); border-radius: 8px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 14px; }
.check-list { display: grid; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.check-list svg { color: var(--color-success); }
.product { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 48px; align-items: center; padding: 0; border-radius: 16px; background: var(--color-bg-warm); }
.product-tabs { grid-column: 1; grid-row: 1; display: grid; gap: 12px; align-content: start; }
.product-panel { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-width: 0; }
.product-panel > .browser { width: 100%; }
.product-panel[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.product-heading { max-width: none; margin: 0 0 var(--space-7); }
.product-tab { position: relative; display: flex; gap: 16px; align-items: center; width: 100%; padding: 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.product-tab .icon-tile { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-muted); }
.product-tab strong, .product-tab small { display: block; }
.product-tab strong { color: var(--color-muted); font-size: 15px; font-weight: 600; }
.product-tab small { color: var(--color-muted); font-size: 12px; line-height: 16px; }
.product-tab.is-active { border-color: var(--color-border); background: var(--color-surface); box-shadow: 0 4px 6px rgb(0 0 0 / 3%); }
.product-tab.is-active::before { content: ""; position: absolute; top: 11px; bottom: 11px; left: -1px; width: 4px; border-radius: 0 2px 2px 0; background: var(--color-primary-bright); }
.product-tab.is-active .icon-tile { background: var(--color-primary-soft); color: var(--color-primary-bright); }
.product-tab.is-active strong { color: var(--color-ink); }
.browser { position: relative; background: var(--color-bg-alt); box-shadow: var(--shadow-card); }
.browser-body { padding: 20px 24px 24px; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 12px 12px; background: var(--color-bg-alt); box-shadow: 0 4px 12px rgb(0 0 0 / 3%); }
.browser-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 12px 12px 0 0; background: var(--color-bg-alt); }
.metrics, .tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.address, .metrics li, .tags li, .product-action, .live-input { border: 1px solid var(--color-border); border-radius: 999px; }
.address { display: flex; justify-content: center; justify-self: center; gap: 6px; align-items: center; width: min(320px, 100%); min-height: 24px; padding: 0 12px; border-radius: 6px; background: var(--color-surface); color: var(--color-muted); font-size: 11px; font-weight: 500; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-window-close); }
.window-dots i:nth-child(2) { background: var(--color-window-min); }
.window-dots i:nth-child(3) { background: var(--color-window-max); }
.window-more { width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(circle, var(--color-muted) 1.5px, transparent 1.6px) 4px 50% / 8px 8px repeat-x; }
.metrics { margin: 12px 0; padding: 0; list-style: none; }
.metrics li, .tags li { display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; background: var(--color-surface); font-size: 12px; font-weight: 700; }
.metrics li svg { color: var(--color-primary); }
.product-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 12px; }
.live-chat, .product-lead { box-shadow: none; }
.live-chat { padding: 12px; }
.product-lead { display: grid; gap: 16px; align-content: start; padding: 18px 16px; font-size: 11px; line-height: 1.45; }
.product-lead p { margin: 0; }
.product-lead .product-lead-top { align-items: flex-start; gap: 8px; }
.product-lead .product-lead-top > span:not(.avatar) { gap: 3px; }
.product-lead .product-lead-top strong { font-size: 13px; font-weight: 600; line-height: 1.2; }
.product-lead .product-lead-top small { overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.product-lead .avatar { width: 24px; height: 24px; font-size: 10px; }
.product-lead em { margin-top: 1px; font-size: 10px; font-weight: 600; }
.product-lead .lead-row { margin: 0; font-size: 11px; font-weight: 500; }
.product-lead .lead-row strong { font-weight: 600; text-align: right; }
.product-lead .score { margin: 0; font-size: 11px; font-weight: 600; }
.product-lead .score-bar { height: 6px; }
.product-lead .tags { margin: 0; gap: 8px; }
.product-lead .tags li { padding: 5px 10px; font-size: 10px; font-weight: 600; }
.product-lead .product-action { min-height: 34px; margin-top: 2px; font-size: 12px; font-weight: 600; }
.live-head, .product-lead-top, .live-msg { display: flex; gap: 10px; align-items: center; }
.live-head > span:not(.avatar), .product-lead-top > span:not(.avatar) { display: grid; min-width: 0; line-height: 1.3; }
.live-head small, .product-lead-top small { color: var(--color-muted); font-size: 12px; font-weight: 500; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 14px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 12px; font-weight: 800; }
.live-head, .product-lead-top { justify-content: flex-start; }
.live-head em, .product-lead em { margin-left: auto; color: var(--color-success); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.live-log { display: grid; gap: 10px; margin: 12px 0; }
.live-msg span:last-child { min-width: 0; padding: 12px; border-radius: 12px; background: var(--color-bg-alt); font-size: 13px; line-height: 18px; }
.live-A .avatar { background: var(--color-primary-soft); color: var(--color-primary); }
.live-A span:last-child { background: var(--color-accent-soft); }
.live-input, .product-action { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; }
.live-input { justify-content: space-between; color: var(--color-muted); }
.live-input span { flex: 1; }
.product-action { justify-content: center; border: 0; border-radius: 12px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 800; }
.score { gap: 12px; }
.score-bar { flex: 1; height: 8px; margin: 0; border-radius: 999px; background: var(--color-border); }
.score-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary-bright); }
.tags { margin: 12px 0; padding: 0; list-style: none; }
.tags li { border: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.scene { display: grid; gap: 16px; }
.scene-head, .slot-head, .score-row, .person-card, .who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene-head { align-items: flex-start; }
.scene-head strong, .who strong { display: block; color: var(--color-ink); font-size: 16px; }
.scene-head span, .who small, .score-row small { display: block; color: var(--color-muted); font-size: 12px; }
.scene-head em, .person-card em { padding: 4px 8px; border-radius: 4px; background: var(--color-success-soft); color: var(--color-success); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.scene-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 16px; align-items: start; }
.scene-booking .scene-cols { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); }
.scene-stack { display: grid; gap: 16px; }
.scene-card { padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: 0 4px 6px rgb(0 0 0 / 3%); }
.scene-card > p:last-child { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 18px; }
.kicker { margin: 0 0 10px; color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.person-card { justify-content: flex-start; }
.person-card > div { flex: 1; min-width: 0; }
.person-card p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.person-card em { border-radius: 99px; }
.person-card small { color: var(--color-muted); font-size: 12px; }
.avatar-violet { width: 44px; height: 44px; border-radius: 22px; background: var(--color-mock-violet); color: var(--color-on-primary); font-size: 14px; }
.score-row { justify-content: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.score-row strong { display: block; font-size: 14px; }
.ring { display: grid; place-items: center; width: 52px; height: 52px; margin: 0; border-radius: 50%; background: conic-gradient(var(--color-primary-bright) calc(var(--p) * 1%), var(--color-border) 0); }
.ring strong { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary-bright); font-size: 12px; }
.check-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-rows li { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.check-rows .is-yes svg { color: var(--color-success); }
.check-rows .is-no { color: var(--color-muted); }
.slot-head { margin: 0 0 12px; }
.slot-head strong { font-size: 13px; }
.slot-head span, .scene-handoff .slot-head em { color: var(--color-primary-bright); font-size: 11px; font-style: normal; font-weight: 700; }
.slots, .channels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.slots li, .channels { display: flex; }
.slots li { justify-content: space-between; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-muted); font-size: 12px; }
.slots li:first-child { border-color: var(--color-primary-bright); color: var(--color-primary-bright); }
.slots .is-selected { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-bright); font-weight: 700; }
.wa { display: flex; flex-direction: column; min-height: 220px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-wa-bg); box-shadow: 0 4px 12px rgb(0 0 0 / 3%); }
.wa-bar { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 16px; background: var(--color-wa); color: var(--color-on-primary); }
.wa-bar .avatar { background: var(--color-wa-bright); }
.wa-bar small { display: block; color: var(--color-wa-bubble); font-size: 10px; }
.wa-log { padding: 12px; }
.wa-log p { width: min(240px, 100%); margin: 0; padding: 10px; border-radius: 0 8px 8px 8px; background: var(--color-wa-bubble); color: var(--color-ink); font-size: 12px; }
.wa-log small { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: var(--color-muted); font-size: 9px; }
.wa-log svg { color: var(--color-accent); }
.channels { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px; border-radius: 8px; background: var(--color-bg-alt); }
.channels li { display: flex; justify-content: center; padding: 6px 12px; border-radius: 6px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
.channels .is-on { background: var(--color-wa-bright); color: var(--color-on-primary); font-weight: 700; }
.transcript { margin: 0 0 8px; padding: 8px; border-radius: 6px; background: var(--color-bg-alt); color: var(--color-muted); font-size: 11px; }
.transcript.is-accent { background: var(--color-primary-soft); color: var(--color-ink); }
.who { display: grid; justify-items: start; margin: 0 0 12px; }
.agent { display: flex; gap: 10px; align-items: center; margin: 0; padding: 8px; border: 1px solid var(--color-accent); border-radius: 6px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 12px; font-weight: 600; }
.agent span:nth-child(2) { flex: 1; }
.agent .avatar { width: 24px; height: 24px; background: var(--color-accent); }
.trail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 0; padding: 10px 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 11px; }
.trail strong { color: var(--color-muted); font-weight: 600; }
.trail span { color: var(--color-border); }
.trail .is-now { color: var(--color-primary-bright); }
.trail i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-bright); }
.float-pills { position: absolute; bottom: 0; left: 50%; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; transform: translate(-50%, 50%); }
.float-pills li { padding: 8px 16px; border-radius: 99px; background: var(--color-ink); color: var(--color-on-primary); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 6px rgb(0 0 0 / 3%); }
.product-fallback { padding: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.quote-grid { align-items: stretch; }
.quote { display: flex; height: 100%; padding: 32px 32px 28px; border: 1px solid var(--color-border); text-align: left; box-shadow: var(--shadow); }
.quote blockquote { display: grid; grid-template-rows: auto auto 1fr auto; flex: 1; min-width: 0; min-height: 100%; margin: 0; }
.quote-stars { display: flex; gap: 4px; align-items: center; margin: 0 0 16px; color: var(--color-rating); }
.quote-stars .is-off { color: var(--color-border); }
.quote-mark { display: block; margin-bottom: var(--space-2); color: var(--color-accent); font-family: var(--font-heading); font-size: var(--text-subsection); line-height: 1; }
.quote blockquote > p:not(.quote-stars) { min-height: 0; font-size: 16px; line-height: 28px; }
.quote footer { display: grid; gap: 4px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.quote cite { font-style: normal; font-weight: 600; }
.quote footer span { color: var(--color-muted); font-size: 14px; }
.home-faq { max-width: 800px; margin-inline: auto; text-align: left; }
.home-faq .faq-item { margin-bottom: 16px; padding: 8px 24px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow); }
.home-faq .faq-item[open] { border-color: transparent; background: var(--color-bg-alt); }
.home-faq .faq-item summary h3 { color: var(--color-text); font-size: 16px; font-weight: var(--weight-display); line-height: var(--lh-ui); }
.home-faq .faq-item[open] summary h3 { color: var(--color-primary); }
.home-cta { padding-block: var(--space-section-home); background: var(--wash-navy); color: var(--color-on-navy); text-align: center; }
.home-cta .eyebrow { color: var(--color-primary-bright); }
.home-cta h2 { font: var(--weight-display) clamp(1.75rem, 1rem + 2.2vw, 2.75rem)/var(--lh-page-title) var(--font-heading); letter-spacing: var(--track-page-title); }
.home-cta .lead { max-width: 640px; margin: var(--space-heading-to-lead) auto 0; color: var(--color-accent-soft); }
.home-cta .button-ghost { border-color: rgb(255 255 255 / 55%); color: var(--color-on-navy); }
.home-cta .button-ghost:hover { border-color: var(--color-on-navy); background: transparent; }
.home-cta .actions { justify-content: center; }
.home-cta .home-note { color: var(--color-on-navy-muted); }
.preview-window { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow); }
.preview-bar, .chat-head, .lead-top, .lead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-bar { min-height: 56px; padding: 0 24px; border-bottom: 1px solid var(--color-border); }
.preview-brand, .chat-head { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.preview-brand img, .chat-head img { width: 24px; height: 24px; border-radius: 6px; }
.chat-head { justify-content: flex-start; }
.dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--color-success); }
.preview-nav { display: flex; gap: 16px; margin: 0; color: var(--color-muted); font-size: 13px; font-weight: 600; }
.preview-body { display: grid; gap: 16px; padding: 16px; }
.preview-title { margin: 0; font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 34px; letter-spacing: -0.4px; }
.preview-intro p { margin: 8px 0 0; color: var(--color-muted); font-size: 14px; }
.preview-stage { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.preview-stat { display: grid; gap: 8px; margin: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-alt); }
.preview-stat span { color: var(--color-muted); font-size: 13px; font-weight: 700; }
.chat { position: relative; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow); }
.chat-log { display: grid; gap: 6px; }
.bubble { max-width: 168px; margin: 0; padding: 8px; border-radius: 12px; font-size: 12px; line-height: 18px; }
.preview-desktop .bubble { width: 84%; max-width: 84%; }
.bubble-visitor { justify-self: end; background: var(--color-accent-soft); }
.bubble-agent { justify-self: start; max-width: 176px; border: 1px solid var(--color-border); background: var(--color-surface); }
.preview-desktop .bubble-visitor { justify-self: start; }
.preview-desktop .bubble-agent { justify-self: end; }
.preview-desktop .chat { grid-template-rows: auto minmax(148px, 1fr) auto; gap: 16px; min-height: 292px; padding: 16px; }
.preview-desktop .chat-log { align-content: start; gap: 14px; }
.chip { justify-self: start; margin: 0; padding: 6px 12px; border-radius: 100px; background: var(--color-primary); color: var(--color-on-primary); font-size: 12px; font-weight: 700; }
.chat-input { display: flex; gap: 10px; align-items: center; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-alt); color: var(--color-muted); font-size: 13px; }
.lead-card { align-self: end; width: min(210px, 100%); margin-top: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow); }
@media (min-width: 1101px) {
  .lead-card { position: absolute; right: 0; bottom: 8px; z-index: 2; margin: 0; }
}
.badge { padding: 3px 8px; border-radius: 4px; background: var(--color-success-soft); color: var(--color-success); font-size: 10px; font-weight: 700; }
.lead-title { margin: 8px 0; font-family: var(--font-heading); font-size: 15px; }
.lead-row { margin: 6px 0 0; font-size: 11px; }
.lead-row span { color: var(--color-muted); }
.typing { display: flex; gap: 4px; margin: 0; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); }
@media (max-width: 1100px) {
  .home-hero-grid, .knowledge-grid, .product, .product-split, .preview-stage, .scene-cols, .scene-booking .scene-cols { grid-template-columns: minmax(0, 1fr); }
  .product-tabs { grid-column: 1; grid-row: 1; }
  .product-panel { grid-column: 1; grid-row: 2; }
  .product > *, .product-split > *, .preview-stage > *, .knowledge-grid > *, .home-hero-grid > * { min-width: 0; }
  .product-tab > span:last-child, .live-msg span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote { padding: 28px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .home-hero h1 { max-width: none; }
  .lead-card { margin-top: 0; }
}
.only-mobile, .preview-mobile, .title-mobile, .lead-mobile, .note-mobile, .link-mobile { display: none; }
.preview-menu { width: 14px; height: 10px; color: var(--color-text); background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.path-chat { display: grid; gap: 12px; margin-top: 24px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.path-chat .bubble { max-width: none; }
.chip-row { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; overflow-x: auto; list-style: none; }
.chip-row li { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip-row .is-active { border-color: var(--color-navy); background: var(--color-navy); color: var(--color-on-navy); }
.home-stats { background: var(--color-navy); color: var(--color-on-navy); }
.home-stats .section-heading .eyebrow, .home-stats .section-heading h2 { color: var(--color-on-navy); }
.home-stats .section-intro { color: var(--color-on-navy-muted); }
.home-stats .outcome h2 { color: var(--color-text); }
.home-stats .snap-dot { background: rgb(255 255 255 / 28%); }
.home-stats .snap-dot.is-active { background: var(--color-on-navy); }
#results .section-heading { max-width: 720px; margin-inline: auto; margin-bottom: var(--space-heading-block); text-align: center; }
#results .snap-wrap + .stat-grid { margin-top: var(--space-7); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.stat-grid li { padding: var(--space-4); border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius-card); background: transparent; }
.stat-grid strong { display: block; color: var(--color-on-navy); font-family: var(--font-heading); font-size: var(--text-subsection); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-grid span { color: var(--color-on-navy-muted); font-size: var(--text-small); }
.snap-dots { display: none; margin: 16px 0 0; padding: 0; }
.snap-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border); }
.snap-dot.is-active { width: 16px; background: var(--color-accent); }
@media (max-width: 767px) {
  .only-desktop, .preview-desktop { display: none !important; }
  .only-mobile { display: block; }
  .preview-mobile, .title-mobile, .lead-mobile, .note-mobile { display: block; }
  .link-mobile { display: inline-flex; }
  .home-center:has(.title-mobile) .title-desktop,
  .home-cta:has(.lead-mobile) .lead-desktop,
  .home-cta:has(.note-mobile) .note-desktop,
  .journey:has(.link-mobile) .link-desktop,
  #solutions .section-intro { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .home-cta .actions { justify-content: stretch; }
  .knowledge-copy { order: -1; }
  .knowledge-grid .panel { padding: 16px; }
  #knowledge .knowledge-copy .section-heading { max-width: 720px; margin-inline: auto; margin-bottom: var(--space-heading-block); text-align: center; }
  #knowledge .knowledge-copy .section-intro { margin-inline: auto; }
  #knowledge .knowledge-copy .check-list { text-align: left; }
  .home #path .step-grid { display: flex; flex-direction: column; gap: 28px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .home #path .step-grid > * { flex: none; min-width: 0; scroll-snap-align: none; }
  .home #path .step { align-items: flex-start; gap: 6px; padding: 0 0 0 64px; text-align: left; }
  .home #path .step .step-num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; }
  .home #path .step .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
  .home #path .step h3 { font-size: 1.125rem; line-height: 1.25; }
  .home #path .step p { font-size: 15px; line-height: 1.45; }
  .home #path .step-grid::before { top: var(--line-top, 22px); right: auto; bottom: auto; left: 21px; width: 2px; height: var(--line-height, 0px); background: var(--color-accent); }
  .home #product .product { gap: 16px; padding: 12px; }
  .home #product .product-tab { gap: 12px; padding: 12px; }
  .home #product .browser-body { padding: 12px; }
  .home #product .product-action,
  .home #product .live-input,
  .home #product .agent,
  .home #product .slots li { align-items: center; width: 100%; min-height: 36px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
  .home #product .slots li strong,
  .home #product .slots li span,
  .home #product .product-action,
  .home #product .agent span { overflow: hidden; text-overflow: ellipsis; }
  .home #product .channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .home #product .channels li { display: flex; justify-content: center; align-items: center; min-height: 32px; padding: 0 4px; font-size: 10px; line-height: 1.2; white-space: nowrap; text-align: center; }
  .home #product .browser { max-width: 100%; overflow-x: auto; }
  .home #product .scene { min-width: 0; }
  .home #product .trail { width: 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; padding: 8px 10px; overflow-x: auto; font-size: 10px; line-height: 1.2; white-space: nowrap; scrollbar-width: none; }
  .home #product .trail::-webkit-scrollbar { display: none; }
  .home #product .trail strong, .home #product .trail span { white-space: nowrap; }
  .home #product .product-panel[hidden] { display: none !important; }
  .home #product .float-pills { position: static; left: auto; flex-wrap: wrap; justify-content: center; margin-top: 12px; transform: none; }
  .snap-wrap { width: 100vw; margin-left: calc(50% - 50vw); }
  .snap-row { display: flex; gap: 16px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 4px 20px 8px; scrollbar-width: none; }
  .snap-row::-webkit-scrollbar { display: none; }
  .snap-row > * { flex: 0 0 310px; scroll-snap-align: start; }
  .quote-grid > * { flex-basis: calc(100vw - 40px); }
  .snap-dots { display: flex; justify-content: center; gap: 8px; }
  .outcome, .journey, .quote { padding: 20px; }
  .journey h3 { font-size: var(--text-subsection); line-height: var(--lh-subsection); }
  .outcome .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .preview-mobile .preview-title { font-size: 22px; line-height: 28px; }
  .preview-mobile .preview-body > p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 22px; }
  .preview-mobile .bubble { max-width: 78%; }
  .home-faq .faq-item { margin-bottom: 12px; padding-inline: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
  .home-faq .faq-item:last-child { border-bottom: 1px solid var(--color-border); }
  .home-hero .actions, .home-cta .actions { flex-direction: column; }
  .home-hero .button, .home-cta .button { width: 100%; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-bottom { align-items: flex-start; }
}

.post-media { margin: var(--space-6) 0; overflow: hidden; border-radius: var(--radius-card); }
.post-media img { width: 100%; }
.nav-links { display: flex; gap: var(--space-2); margin-top: var(--space-7); }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; }
.nav-links .current { background: var(--color-primary); color: var(--color-on-primary); }
@media (prefers-reduced-motion: no-preference) {
  .will-rise { opacity: 0; transform: translateY(12px); }
  .will-rise.is-in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--rise-delay, 0ms); }
  .product-panel:not([hidden]) { animation: tavixa-rise 0.35s ease; }
  .button { transition: background-color 0.18s ease-out, border-color 0.18s ease-out, transform 0.2s ease; }
  .button:hover { transform: translateY(-2px); }
  .plan .button:hover { transform: none; }
  .outcome, .quote, .journey, .card, .contact-cards li, .setup-card, .stat-grid li { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .faq-item { transition: background-color 0.45s ease, border-color 0.45s ease; }
  .outcome:hover, .quote:hover, .journey:hover, .card:hover, .contact-cards li:hover, .setup-card:hover, .stat-grid li:hover { transform: translateY(-2px); }
  .outcome:hover, .quote:hover, .journey:hover, .card:hover { box-shadow: var(--shadow-card-hover); }
  .preview-stage.is-demo .chat-log > * { visibility: hidden; }
  .preview-stage.is-demo .chip { display: none; }
  .preview-stage.is-demo .chat-log > .is-in { visibility: visible; animation: demo-pop 0.34s ease; }
  .preview-stage.is-demo .chat-input { align-items: flex-start; padding-block: 8px; }
  .preview-stage.is-demo .chat-input svg { flex: none; margin-top: 1px; }
  .preview-stage.is-demo .chat-input span { flex: 1; min-width: 0; line-height: 1.35; }
  .preview-stage.is-demo .lead-card { opacity: 0; transform: translateY(12px) scale(0.94); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .preview-stage.is-demo.is-lead .lead-card { opacity: 1; transform: none; }
  .preview-stage.is-typing .chat-input { color: var(--color-text); }
  .preview-stage.is-typing .chat-input span { display: block; }
  .preview-stage.is-typing .chat-input span::after { content: ""; display: inline-block; width: 1px; height: 0.9em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: demo-caret 0.9s steps(1) infinite; }
  .step-grid.is-armed::before { transform: scaleX(var(--path, 0)); transform-origin: left center; transition: transform 0.4s ease-out; }
  .step-grid.is-armed .step-num { border-color: var(--color-border); background: var(--color-surface); color: var(--color-muted); transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
  .step-grid.is-armed .step.is-lit .step-num { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
  .path-mobile .check-list.is-armed li { opacity: 0.45; transition: opacity 0.35s ease; }
  .path-mobile .check-list.is-armed li.is-lit { opacity: 1; }
  .product.is-auto .product-tab.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 999px; background: var(--color-primary-bright); transform: scaleX(0); transform-origin: left center; animation: tab-progress 5s linear forwards; }
  .product.is-auto.is-paused .product-tab.is-active::after { animation-play-state: paused; }
  .home-cta { background-image: var(--wash-navy-live); background-size: 180% 100%; animation: cta-shift 16s ease-in-out infinite; }
  .home-cta .button-primary { position: relative; overflow: hidden; }
  .home-cta .button-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--color-on-primary) 50%, transparent), transparent); transform: translateX(-180%); animation: button-sheen 5.5s cubic-bezier(0.45, 0, 0.2, 1) infinite; pointer-events: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .home #path .step-grid.is-armed::before { transform: scaleY(var(--path, 0)); transform-origin: top center; transition: transform 0.55s ease-out; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  #demo .poster { width: min(840px, 100%); max-width: none; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
  #demo .poster.is-wide { width: 100%; }
}
@media (min-width: 768px) {
  .quote-grid.is-slider { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .quote-grid.is-slider::-webkit-scrollbar { display: none; }
  .quote-grid.is-slider > * { flex: 0 0 calc((100% - 24px) / 2); scroll-snap-align: start; }
}
@media (min-width: 1101px) {
  .quote-grid.is-slider > * { flex-basis: calc((100% - 48px) / 3); }
}
@keyframes tavixa-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demo-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes demo-caret { 50% { opacity: 0; } }
@keyframes tab-progress { to { transform: scaleX(1); } }
@keyframes cta-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes button-sheen { 0% { transform: translateX(-180%); } 48% { transform: translateX(340%); } 100% { transform: translateX(340%); } }