/* Homepage composition. Tokens and components come from brandkit/; this file only lays sections out. */
.dark { --mark-tile: #fff; --mark-bubble: #000; --mark-ink: #fff; }
.logo-mark { flex: none; }
.logo-mark.on-dark { --mark-tile: #fff; --mark-bubble: #000; --mark-ink: #fff; }
.logo .logo-mark { width: 32px; height: 32px; }
.on-grad { color: rgb(255 255 255 / .9) !important; }
.overline.on-grad::before { background: #fff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }

/* ── Hero ───────────────────────────────── */
.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 72px); }
.hero-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(70% 80% at 85% 35%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 80% at 85% 35%, #000 0%, transparent 70%); opacity: .35; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy .t-display { max-width: 12.5em; font-size: clamp(2.375rem, 1rem + 3.7vw, 3.875rem); }
.hero-copy .t-lead { margin-top: var(--sp-5); }
.hero-actions { margin-top: var(--sp-6); max-width: 540px; }
.hero-secondary { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.hero-secondary .btn-text { padding-left: 0; }
.hero-stage { position: relative; }
.stage-panel { position: relative; isolation: isolate; clip-path: inset(0 round var(--r-panel)); transform: translateZ(0); min-height: 560px; border-radius: var(--r-panel); overflow: hidden; background: linear-gradient(135deg, var(--cb-violet-a) 0%, var(--cb-cyan-b) 100%); box-shadow: var(--sh-3); }
.stage-panel .lava i { filter: blur(54px); opacity: .95; }
.shop { position: absolute; left: 6%; top: 8%; width: 66%; background: var(--cb-white); border-radius: var(--r-card); box-shadow: var(--sh-3); overflow: hidden; }
.shop-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.shop-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--cb-grey-200); }
.shop-bar b { margin-left: 10px; flex: 1; height: 18px; max-width: 150px; border-radius: var(--r-pill); background: var(--cb-grey-100); }
.shop-body { padding: 14px; display: grid; gap: 12px; }
.shop-hero { height: 86px; padding: 16px; border-radius: var(--r-ui-2); background: var(--cb-grey-50); display: grid; gap: 8px; align-content: center; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prod { display: grid; gap: 6px; }
.prod .img { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-ui-2); background: var(--c-accent-tint); color: #4b5563; }
.prod:nth-child(2) .img { background: rgb(0 210 255 / .12); } .prod:nth-child(3) .img { background: rgb(255 77 0 / .09); }
.prod .img svg { width: 26px; height: 26px; }
.sk { display: block; height: 8px; border-radius: 4px; background: var(--cb-grey-200); }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.hero-widget { position: absolute; right: 5%; bottom: 7%; width: min(320px, 62%); }
.hero-widget .widget-body { min-height: 218px; }
.hero-widget .widget-input { margin-top: 2px; }
.float-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: var(--cb-white); border-radius: var(--r-pill); box-shadow: var(--sh-2); font-size: 12.5px; line-height: 1.25; color: var(--c-text-2); animation: cb-float 7s ease-in-out infinite alternate; }
.float-chip b { display: block; font-size: 15px; color: var(--cb-black); letter-spacing: -.01em; }
.float-chip .icon-tile { width: 38px; height: 38px; } .float-chip .icon-tile svg { width: 20px; height: 20px; }
.fc-1 { left: 4%; bottom: 22%; } .fc-2 { left: 4%; bottom: 8%; animation-delay: -3.5s; }
@keyframes cb-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.fact-bar { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 72px); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-7); flex-wrap: wrap; }
.fact-bar .overline { margin: 0; }
.fact-bar ul { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; padding: 0; list-style: none; }
.fact-bar li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--fw-medium); color: #374151; }
.fact-bar li svg { width: 20px; height: 20px; color: var(--cb-black); }

/* ── Pain (dark) ───────────────────────── */
.pain { display: grid; gap: 0; align-content: start; overflow: hidden; }
.pain .icon-tile { margin-top: var(--sp-5); margin-bottom: var(--sp-4); }
.pain .t-h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.pain-viz { height: 130px; display: grid; align-items: end; padding: 14px; border-radius: var(--r-card); background: var(--cb-night); border: 1px solid var(--cb-line-dark); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 100%; }
.bars i { flex: 1; height: var(--h); border-radius: var(--r-ui) var(--r-ui) 2px 2px; background: #2c2c33; transform-origin: bottom; }
.bars i:last-child { background: var(--cb-white); }
.bubble.mini { font-size: 13px; padding: 8px 12px; } .bubble.ghost { background: transparent; border: 1px dashed #3a3a42; color: var(--cb-grey-400); }
.dark .bubble.user { background: var(--cb-white); color: var(--cb-black); }
.pain-viz .chat { align-self: center; } .night { display: flex; align-items: center; gap: 14px; align-self: center; } .night > svg { width: 30px; height: 30px; color: var(--cb-grey-400); flex: none; }

/* ── Steps ─────────────────────────────── */
.step { background: var(--cb-grey-50); box-shadow: none; display: grid; align-content: start; }
.step:hover { background: var(--cb-white); }
.step-viz { height: 190px; margin-bottom: var(--sp-5); border-radius: var(--r-card); background: var(--cb-white); border: 1px solid var(--c-border); position: relative; overflow: hidden; display: grid; place-items: center; }
.step-number { display: block; margin-bottom: 10px; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--tr-over); color: var(--c-accent); }
.scan { position: relative; width: 74%; display: grid; gap: 12px; }
.scan-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-ui-2); }
.scan-row svg { width: 20px; height: 20px; color: #4b5563; flex: none; } .scan-row .sk { flex: 1; }
.scanline { position: absolute; left: -6%; right: -6%; top: 0; height: 2px; background: var(--grad-sweep); box-shadow: 0 0 18px 4px rgb(191 90 242 / .35); animation: cb-scan 4.2s ease-in-out infinite; z-index: 1; }
@keyframes cb-scan { 0%, 100% { top: -4%; opacity: 0; } 12%, 88% { opacity: 1; } 50% { top: 100%; } }
.learn { position: relative; width: 100%; height: 100%; }
.pill { position: absolute; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--r-pill); font-size: 12px; font-weight: var(--fw-medium); color: #374151; background: var(--cb-white); box-shadow: var(--sh-1); animation: cb-float 6s ease-in-out infinite alternate; }
.pill:nth-child(1) { left: 8%; top: 16%; } .pill:nth-child(2) { right: 8%; top: 30%; animation-delay: -2s; } .pill:nth-child(3) { left: 14%; bottom: 14%; animation-delay: -4s; }
.core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; background: var(--cb-white); box-shadow: 0 0 0 8px rgb(138 43 226 / .08), 0 0 0 18px rgb(138 43 226 / .04), var(--sh-2); }
.live { width: 66%; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--cb-white); box-shadow: var(--sh-2); justify-items: start; }
.live-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .live-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 0 rgb(22 163 74 / .5); animation: cb-ping 2s ease-out infinite; }
.live .sk { width: 100%; } .live .btn { pointer-events: none; }
@keyframes cb-ping { 0% { box-shadow: 0 0 0 0 rgb(22 163 74 / .45); } 80%, 100% { box-shadow: 0 0 0 8px rgb(22 163 74 / 0); } }

/* ── Demo (dark section, gradient card) ── */
.demo-card { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; border-radius: var(--r-panel); padding: clamp(28px, 5vw, 72px); background: linear-gradient(135deg, var(--cb-violet-a), var(--cb-cyan-b)); }

.demo-copy .t-h2 { color: #fff; } .demo-copy .t-lead { margin-top: var(--sp-4); }
.demo-panel { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card-lg); background: rgb(255 255 255 / .96); color: var(--cb-black); box-shadow: var(--sh-dark); }
.demo-label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: var(--fw-semibold); }
.demo-panel .url-row { box-shadow: none; }
.demo-panel .url-status { color: var(--c-text-2); }

/* ── Handles ───────────────────────────── */
.handle { display: flex; align-items: center; gap: var(--sp-4); padding: 24px; }
.handle .t-h3 { margin: 0 0 2px; font-size: 1.0625rem; } .handle p { font-size: 14px; }
.handoff { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.handoff .icon-tile { width: 40px; height: 40px; } .handoff .icon-tile svg { width: 20px; height: 20px; }
.grid-note { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); letter-spacing: -.012em; }

/* ── Comparison (dark) ─────────────────── */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.compare-col { padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--cb-line-dark); border-radius: var(--r-card-lg); background: var(--cb-night-2); transition: transform var(--dur-base) var(--ease-out); }
.compare-col:hover { transform: translateY(-3px); }
.compare-col .t-h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-5); font-size: 1.25rem; }
.compare-col ul { list-style: none; margin: 0; padding: 0; }
.compare-col li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cb-line-dark); font-size: 15px; }
.compare-col li span { color: var(--cb-grey-400); } .compare-col li b { font-weight: var(--fw-medium); text-align: right; color: #d4d4d8; }
.compare-col.us { background: var(--cb-white); color: var(--cb-black); border-color: var(--cb-white); box-shadow: 0 30px 90px -20px rgb(191 90 242 / .4); }
.compare-col.us li { border-top-color: var(--c-border); } .compare-col.us li span { color: var(--c-text-2); }
.compare-col.us .logo-mark { --mark-tile: #000; --mark-bubble: #fff; --mark-ink: #000; }
.compare-col .ok { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--cb-black); color: var(--cb-white); stroke-width: 2; }

/* ── Proof (gradient feature card on white) ─ */
.proof-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 440px; border-radius: var(--r-panel); background: linear-gradient(120deg, var(--cb-violet-a), var(--cb-magenta-a) 55%, var(--cb-coral-a)); }

.proof-h { color: #fff; font-size: clamp(2.25rem, 1rem + 4.4vw, 4.25rem); max-width: 12ch; }
.proof-lead { margin: var(--sp-5) 0 var(--sp-2); font-size: 1.375rem; font-weight: var(--fw-semibold); letter-spacing: -.015em; }
.proof-body { margin: 0; color: rgb(255 255 255 / .92); max-width: 44ch; }
.viz-card { padding: 22px; border-radius: var(--r-card-lg); background: rgb(255 255 255 / .96); color: var(--cb-black); box-shadow: var(--sh-dark); }
.viz-title { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); }
.viz-bars { display: flex; gap: 22px; align-items: flex-end; height: 190px; margin-top: 18px; }
.viz-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-text-2); text-align: center; }
.viz-bars i { display: block; border-radius: 10px 10px 4px 4px; transform-origin: bottom; }
.viz-bars .before { height: 100%; background: repeating-linear-gradient(180deg, #e5e7eb 0 12px, transparent 12px 18px); border-radius: 6px; -webkit-mask-image: linear-gradient(#000, #000); } .viz-bars .after { height: 18%; background: var(--grad-violet); }
.proof-card.rv.in .after { animation: cb-grow 1.4s var(--ease-out) .3s both; }
@keyframes cb-grow { from { transform: scaleY(5); } to { transform: none; } }

/* ── FAQ ───────────────────────────────── */
.faq-wrap { display: grid; gap: clamp(56px, 8vw, 104px); }
.faq-block { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq-title { align-self: stretch; } .faq-title .t-h2 { position: sticky; top: 110px; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }

/* ── Final CTA (dark + gradient shapes) ── */
.final-cta { padding-block: clamp(96px, 14vw, 200px); text-align: center; }
.cta-shapes { position: absolute; inset: 0; z-index: 0; }
.cta-shapes .lava { opacity: 1; -webkit-mask-image: radial-gradient(75% 85% at 50% 100%, #000 5%, transparent 72%); mask-image: radial-gradient(75% 85% at 50% 100%, #000 5%, transparent 72%); }
.cta-shapes .lava i { width: 38%; filter: blur(70px); }
.cta-shapes .lava i:nth-child(1) { left: 4%; top: auto; bottom: -20%; } .cta-shapes .lava i:nth-child(2) { left: 30%; right: auto; top: auto; bottom: -26%; }
.cta-shapes .lava i:nth-child(3) { left: auto; right: 22%; bottom: -24%; } .cta-shapes .lava i:nth-child(4) { left: auto; right: 2%; bottom: -18%; }
.cta-inner { position: relative; z-index: 1; max-width: 860px; }
.cta-inner .t-lead { margin: var(--sp-5) auto 0; color: rgb(255 255 255 / .8); }
.cta-actions { margin-top: var(--sp-6); } .cta-note { margin: var(--sp-5) 0 0; font-size: 14px; color: var(--cb-grey-400); }

/* ── Footer ────────────────────────────── */
.footer { background: var(--cb-black); color: #fff; border-top: 1px solid var(--cb-line-dark); }
.footer-inner { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; padding-block: 36px; }
.footer-inner p { margin: 0; color: var(--cb-grey-400); font-size: 14px; }
.footer-inner nav { margin-left: auto; display: flex; gap: var(--sp-5); }
.footer-inner nav a { color: var(--cb-grey-400); font-size: 14px; text-decoration: none; padding: 8px 2px; }
.footer-inner nav a:hover { color: #fff; }

/* ── Responsive ────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy .t-display { max-width: none; }
  .stage-panel { min-height: 520px; }
  .grid-3, .compare { grid-template-columns: 1fr; }
  .demo-card, .proof-card { grid-template-columns: 1fr; }
  .faq-block { grid-template-columns: 1fr; gap: var(--sp-5); } .faq-title .t-h2 { position: static; }
  .nav-inner { display: flex; justify-content: space-between; }
  .nav-links, .nav-call { display: none; }
  .fact-bar { align-items: flex-start; }
}
@media (max-width: 560px) {
  :root { --section-y: 64px; }
  .stage-panel { min-height: 480px; }
  .shop { width: 74%; left: 5%; } .hero-widget { width: 78%; right: 4%; bottom: 5%; }
  .fc-1, .fc-2 { display: none; }
  .url-row { padding-left: 16px; } .url-row .prefix { display: none; }
  .url-row .btn { padding: 0 18px; }
  .footer-inner nav { margin-left: 0; width: 100%; }
  .hero-secondary { gap: var(--sp-2); }
}

.hero-grid > *, .demo-card > *, .proof-card > *, .faq-block > * { min-width: 0; }
@media (max-width: 560px) {
  .url-row .btn svg { display: none; }
  .hero-widget .widget-body { min-height: 150px; }
  .cta-shapes .lava i { width: 80%; }
}

@media (max-width: 960px) { .card-gradient.scrim-left::before { background: rgb(0 0 0 / .46); } .footer-inner nav a { padding: 12px 6px; } }
/* generated by build/csp_clean.py: inline styles moved out for CSP style-src self */

.u-38ed6c1 { position:absolute; }
.u-fc24b54 { --d:60ms; }
.u-177bb59 { --d:120ms; }
.u-c95716b { --d:180ms; }
.u-ceff85a { --d:140ms; }
.u-b87a65d { --d:100ms; }
.u-7493617 { --d:0ms; }
.u-57e1017 { --h:38%; }
.u-f60aa7e { --h:62%; }
.u-4f3fddf { --h:48%; }
.u-eb5199d { --h:80%; }
.u-1c335d5 { --h:56%; }
.u-9f23c89 { --h:92%; }
.u-a69d257 { --d:90ms; }
.u-1613d38 { --d:80ms; }
.u-235c592 { --d:160ms; }
.u-d238d0c { --d:200ms; }

.demo-card, .proof-card { clip-path: inset(0 round var(--r-panel)); }