/* Approved BILLIA public website. Light product sections, navy hero and pricing. */
:root,:root[data-theme=light] { --bg:#f8fafc; --surface:#fff; --surface-2:#edf4ff; --ink:#12213a; --muted:#53627a; --line:#dbe2ec; --blue:#2563eb; --orange:#ff791c; --radius:14px; --maxw:1320px; }
:root[data-theme=dark] { --bg:#091020; --surface:#111d30; --surface-2:#172942; --ink:#f4f7ff; --muted:#bdcbe0; --line:#2a3b55; --blue:#76a7ff; }
body { background:var(--bg); }.wrap { padding:0 40px; }
section { padding:88px 0; } h2 { font-size:clamp(28px,3.4vw,44px); }
.nav { background:#091020; color:#fff; backdrop-filter:none; border-bottom:1px solid #26334b; }
.nav .row { height:80px; }.nav .links { color:#bdcbe0; gap:24px; }.nav .links a:hover { color:#fff; }
.nav .btn-ghost { color:#fff; border-color:#3e506d; }.nav .brand { font-size:28px; }
.brand .bill,.brand .ia { border:0; }.brand .ia { color:#5395ff; }
.btn { border-radius:8px; min-height:46px; padding:12px 22px; box-shadow:none; }
.btn-orange { background:#ff791c; color:#091020; box-shadow:none; }
.btn-blue { background:#2563eb; color:#fff; box-shadow:none; }
.btn:hover { transform:none; box-shadow:none; filter:brightness(.97); }
.hero { background:#091020; color:#fff; padding:64px 0 42px; }
.hero .grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); gap:40px; }
.hero h1 { font-size:clamp(38px,4.6vw,66px); font-weight:700; letter-spacing:-.035em; line-height:1.06; }
.hero h1 .hl { color:#5395ff; background:none; -webkit-text-fill-color:currentColor; animation:none; }
.hero p.lead { color:#bdcbe0; font-size:19px; max-width:36ch; line-height:1.6; }
.hero .eyebrow { color:#bdcbe0; font-size:11px; display:block; margin-bottom:22px; }
.hero .btn-ghost { border-color:#8a9bb5; color:#f8fafc; }.hero .btn-ghost:hover { background:#17253c; }
.hero .trust { color:#bdcbe0; font-size:12px; gap:8px; line-height:1.7; }
.hero .trust b { color:#fff; }
.hero-media { min-width:0; display:block; }
.hero .strip { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:56px; }
.strip .item { background:none; border:0; border-radius:0; padding:12px 0; box-shadow:none; }
.strip .item b { color:#fff; font-size:16px; }.strip .item span { color:#bdcbe0; }
.strip .item+.item { padding-left:28px; border-left:1px solid #34445e; }
.preview { display:grid; grid-template-columns:120px minmax(0,1fr); background:#f8fafc; color:#12213a; border:1px solid #8095b4; border-radius:14px; overflow:hidden; font-size:12px; text-align:left; box-shadow:0 18px 48px #0003; }
.preview-nav { background:#101d31; color:#bdcbe0; padding:24px 12px; display:flex; flex-direction:column; gap:9px; }
.preview-nav .brand { font-size:20px; padding-bottom:22px; }.preview-nav span:not(.brand):not(.bill):not(.ia) { padding:10px 8px; border-radius:6px; }
.preview-nav .selected { background:#233b5e; color:#fff; }
.preview-body { padding:22px; min-width:0; }.preview-meta { color:#53627a; font-size:10px; text-align:right; margin-bottom:24px; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.preview-heading h2 { font-size:23px; letter-spacing:-.025em; }.preview-action { background:#ff791c; color:#12213a; border-radius:6px; padding:9px 12px; font-weight:700; white-space:nowrap; }
.preview-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:26px; }
.preview-kpis div { background:#fff; padding:12px; border:1px solid #e0e6ef; border-radius:8px; color:#53627a; font-size:10px; }
.preview-kpis strong { display:block; color:#12213a; font-size:23px; margin-top:6px; white-space:nowrap; }
.preview-table { width:100%; border-collapse:collapse; font-size:11px; margin:14px 0 22px; }
.preview-table th,.preview-table td { padding:10px 4px; border-bottom:1px solid #e0e6ef; text-align:left; }
.preview-table th { color:#53627a; font-weight:500; }.preview-table td:last-child { text-align:right; }.preview-state { color:#166534; background:#e7f6ed; padding:3px 7px; border-radius:20px; font-size:10px; }
.preview-billy { display:flex; gap:10px; align-items:center; background:#e7f0ff; padding:10px 12px; border-radius:8px; color:#34445e; }.preview-billy svg { width:36px; height:46px; }.preview-billy b { color:#1d4ed8; }.preview-billy span { display:block; font-size:11px; }
.reveal { opacity:1; transform:none; }.ai-card,.feat .f,.app-plat,.rubro,.plan,.faq .q { box-shadow:none; background:var(--surface); border-color:var(--line); border-radius:12px; }
.ai-card:hover,.feat .f:hover,.app-plat:hover,.rubro:hover,.plan:hover { transform:none; box-shadow:none; }
.ai-card::before,.ai-card::after,.feat .f::before,.feat .f::after,.plan::before,.plan::after,.rubro::before,.rubro::after { display:none; }
.ai-card .ico,.feat .f .d { background:var(--surface-2); color:var(--blue); box-shadow:none; }
.ai-card:nth-child(2),.feat .f:first-child { background:var(--surface); border-color:var(--line); }
.feat .f { text-align:left; padding:26px; }.feat .f .d { margin:0 0 20px; }
.ai-grid { gap:24px; }.ai-card p,.feat .f p { line-height:1.75; }
.rubro { text-align:left; }.rubro .ico { margin-left:0; }.faq .q { border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0; background:none; }.faq { gap:16px 48px; }
.cta-band { background:#101d31; box-shadow:none; border-radius:14px; }
#planes { background:#091020; color:#fff; --muted:#bdcbe0; --line:#34445e; --surface:#111d30; --ink:#fff; }
#planes .shead h2 { color:#fff; }.price { gap:16px; }.plan { padding:28px 22px; background:#111d30; border:1px solid #34445e; }.plan.pop { border-color:#ff791c; box-shadow:none; }.plan .badge { background:#ff791c; color:#12213a; border-radius:5px; font-size:10px; }.plan .amt { font-size:38px; margin-top:22px; }.plan .amt small { display:block; font-size:13px; margin-top:4px; }.plan li { line-height:1.65; }.plan li svg { color:#76a7ff; }.plan .btn-ghost { color:#9bc0ff; border-color:#679def; }.plan-note { font-size:12px; color:#bdcbe0; margin:0 0 16px; }.pays .pay { box-shadow:none; }.pays .pay svg { color:#9bc0ff; }
:focus-visible { outline:3px solid #397cf5; outline-offset:4px; } ::selection { background:#bad5ff; color:#091020; }
.product-tabs { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.product-tabs button { background:none; color:var(--muted); font:600 16px var(--f); padding:14px 0; border:0; border-bottom:3px solid transparent; cursor:pointer; }
.product-tabs [aria-selected=true] { color:var(--ink); border-bottom-color:#ff791c; }
.product-workflow { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:56px; align-items:center; }
.workflow-demo { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.workflow-bar { background:#101d31; color:#fff; display:flex; justify-content:space-between; padding:16px 24px; }.workflow-bar span { font-size:12px; color:#bdcbe0; }
.workflow-demo [role=tabpanel] { padding:28px; min-height:410px; }.workflow-demo h3 { font-size:24px; }
.demo-search { padding:12px 16px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:14px; margin:20px 0; }
.workflow-demo table { border-collapse:collapse; width:100%; font-size:14px; }.workflow-demo th,.workflow-demo td { padding:13px 8px; border-bottom:1px solid var(--line); text-align:left; }.workflow-demo th { font-size:12px; color:var(--muted); }.workflow-demo td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.demo-total { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }.demo-total strong { font-size:28px; }.demo-explainer { padding:22px 0; color:var(--muted); font-size:14px; }
.workflow-notes>div { padding:26px 0; border-bottom:1px solid var(--line); }.workflow-notes h3 { font-size:23px; margin-bottom:12px; }.workflow-notes p { color:var(--muted); }.workflow-notes>p { font-size:12px; margin-top:24px; }
[hidden] { display:none !important; }
@media(max-width:820px) { .product-workflow { grid-template-columns:1fr; gap:20px; }.workflow-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.workflow-notes h3 { font-size:18px; }.workflow-notes>p { grid-column:1/-1; margin:0; }.workflow-notes p { font-size:14px; } }
@media(max-width:560px) { .product-tabs { gap:16px; }.product-tabs button { font-size:13px; }.workflow-demo [role=tabpanel] { padding:20px 16px; }.workflow-demo table { font-size:12px; }.workflow-notes { display:block; }.workflow-notes>div { padding:20px 0; } }
@media(max-width:1100px) { .nav .links { gap:16px; font-size:13px; }.nav .row { gap:14px; }.nav .btn { padding:10px 14px; }.wrap { padding:0 28px; }.hero .grid { gap:24px; }.preview-nav { display:none; }.preview { grid-template-columns:1fr; }.preview-body { padding:20px; } }
@media(max-width:820px) { section { padding:56px 0; }.hero { padding:36px 0; }.hero .grid { grid-template-columns:1fr; text-align:left; gap:32px; }.hero-media { order:0; }.hero h1 { max-width:15ch; }.hero p.lead { margin-left:0; }.hero .cta,.hero .trust { justify-content:flex-start; }.hero .strip { gap:16px; margin-top:32px; }.strip .item+.item { padding-left:16px; }.preview-nav { display:flex; }.preview { grid-template-columns:110px minmax(0,1fr); }.nav .row { height:68px; }.nav .brand { font-size:24px; } }
@media(max-width:560px) { .wrap { padding:0 20px; }.hero h1 { font-size:42px; }.hero p.lead { font-size:17px; }.hero .eyebrow { margin-bottom:16px; }.hero .cta { gap:10px; }.hero .cta .btn { padding:12px 15px; font-size:14px; }.hero .strip { grid-template-columns:1fr; gap:0; }.strip .item+.item { border-left:0; border-top:1px solid #34445e; padding:16px 0; }.strip .item { padding:16px 0; }.preview-nav { display:none; }.preview { grid-template-columns:1fr; }.preview-heading h2 { font-size:20px; }.preview-body { padding:16px; }.preview-kpis strong { font-size:21px; }.preview-meta { margin-bottom:16px; }.nav .right { gap:8px; }.nav .btn { font-size:12px; padding:10px; }.plan .amt small { display:inline; font-size:13px; }.plan { padding:30px 24px; } }
/* The first impression is a product experience, with one brief entrance. */
.hero { padding:54px 0 34px; background:radial-gradient(ellipse at 85% 35%,#152f52 0,transparent 52%),#091020; }
.hero .grid { grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:42px; }
.hero h1 { font-size:clamp(48px,5.5vw,78px); line-height:1.02; font-weight:700; letter-spacing:-.035em; }
.hero-line { display:block; }
.hero h1 .hl { color:#5395ff; }
.hero p.lead { font-size:18px; margin:24px 0; max-width:37ch; }
.hero .eyebrow { margin-bottom:22px; }
.hero .cta .btn { min-height:52px; padding:14px 24px; }
.hero .trust { max-width:49ch; }
.hero .strip { margin-top:38px; border-top:1px solid #2a3b55; padding-top:20px; }
.hero-stage { position:relative; perspective:1400px; padding:12px 0 24px; }
.hero-stage .preview { border-color:#647e9f; box-shadow:0 32px 70px -24px #0009; transform:rotateY(-5deg) rotateX(2deg); transform-origin:center; }
.hero-stage .preview-nav { width:auto; }
.hero-stage .preview-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; font-size:10px; margin-bottom:22px; }
.demo-indicator { width:6px; height:6px; border-radius:50%; background:#2563eb; }
.hero-stage .preview-action { font:700 12px var(--f); border:0; cursor:pointer; min-height:38px; transition:background .18s; }
.hero-stage .preview-action:hover { background:#ff933f; }
.hero-stage .preview-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hero-stage .preview-kpis div { min-width:0; padding:12px 10px; }
.hero-stage .preview-kpis strong { font-size:clamp(18px,1.7vw,23px); font-variant-numeric:tabular-nums; }
.hero-stage .preview-billy { min-height:78px; }
.hero-stage .preview-billy span { line-height:1.6; }
.hero-demo-caption { margin:20px 0 0; text-align:center; font-size:12px; color:#bdcbe0; }
.hero-receipt { position:absolute; right:-12px; bottom:64px; display:flex; gap:12px; align-items:center; border:1px solid #9bb5d7; background:#fff; color:#12213a; padding:18px 22px; border-radius:12px; box-shadow:0 18px 34px #0003; pointer-events:none; }
.hero-receipt svg { width:30px; height:30px; color:#2563eb; }.hero-receipt b { display:block; font-size:16px; }.hero-receipt span { display:block; color:#53627a; font-size:12px; margin-top:4px; }
#hero-sample-row { background:#e7f0ff; }
@media(prefers-reduced-motion:no-preference) {
  .hero-line { animation:hero-title-in .8s cubic-bezier(.16,1,.3,1) both; }
  .hero-line:nth-child(2) { animation-delay:.07s; }.hero-line:nth-child(3) { animation-delay:.14s; }
  .hero-stage .preview { animation:hero-product-in 1.1s cubic-bezier(.16,1,.3,1) both; }
  .hero-receipt { animation:hero-receipt-in .4s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes hero-title-in { from { opacity:.35; transform:translateY(18px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes hero-product-in { from { opacity:.35; transform:rotateY(-12deg) rotateX(5deg) translateY(28px); } to { opacity:1; transform:rotateY(-5deg) rotateX(2deg); } }
@keyframes hero-receipt-in { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
@media(min-width:1101px) and (max-width:1350px) { .hero-stage .preview { grid-template-columns:90px minmax(0,1fr); }.hero-stage .preview-nav { padding:22px 8px; font-size:11px; }.hero-stage .preview-body { padding:18px; }.hero-stage .preview-heading h2 { font-size:21px; } }
@media(max-width:1100px) { .hero .grid { gap:28px; }.hero h1 { font-size:60px; }.hero-stage .preview { transform:none; }.hero-stage .preview-heading { flex-wrap:wrap; } }
@media(max-width:820px) {
  .hero { padding:36px 0 24px; }.hero .grid { grid-template-columns:1fr; gap:24px; }
  .hero h1 { font-size:clamp(48px,8.8vw,70px); max-width:none; }
  .hero-stage { padding:8px 0 0; }.hero-stage .preview { transform:none; animation-name:hero-title-in; }
  .hero .trust { max-width:48ch; }.hero-receipt { right:8px; bottom:64px; }
}
@media(max-width:560px) {
  .hero h1 { font-size:clamp(42px,11.7vw,60px); }.hero .eyebrow { margin-bottom:20px; }
  .hero p.lead { font-size:16px; margin:20px 0; }.hero .cta .btn { padding:13px 15px; font-size:14px; min-height:48px; }
  .hero-stage .preview-body { padding:16px; }.hero-stage .preview-heading h2 { font-size:21px; }.hero-stage .preview-heading { gap:10px; }
  .hero-stage .preview-kpis strong { font-size:18px; }.hero .strip { margin-top:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }.hero-stage .preview { transform:none; } }
/* Spatial product stage. CSS 3D keeps the live demo interactive without a rendering dependency. */
.hero { overflow:hidden; }
.hero-stage { perspective:1600px; isolation:isolate; padding:40px 6px 20px; }
.hero-scene { position:relative; transform-style:preserve-3d; transform:rotateX(var(--hero-rx,7deg)) rotateY(var(--hero-ry,-12deg)); transition:transform .65s cubic-bezier(.16,1,.3,1); }
.hero-stage .preview { position:relative; z-index:2; overflow:visible; border-radius:16px; transform:translateZ(30px); animation:none; background:#f8fafc; box-shadow:12px 28px 45px -12px #0009; }
.hero-stage .preview-nav { border-radius:16px 0 0 16px; }
.hero-stage .preview-body { border-radius:0 16px 16px 0; }
.hero-backplate { position:absolute; inset:0; border:1px solid #5686c3; border-radius:18px; background:linear-gradient(125deg,#203d66,#0c192b); transform:translateZ(-38px) translate(24px,24px); box-shadow:20px 45px 60px #0005; }
.hero-stage .preview-kpis { transform:translateZ(24px); }
.hero-stage .preview-kpis>div { background:#fff; box-shadow:0 10px 20px -12px #17335780; }
.hero-stage .preview,.hero-stage .preview-body { transform-style:preserve-3d; }
.hero-stage .preview-billy { transform:translateZ(18px); background:#e5eeff; }
.hero-stage .preview-action { transform:translateZ(15px); }
.hero-orbit { position:absolute; width:115%; height:70%; left:-7%; top:12%; border:1px solid #3b71b8; border-radius:50%; transform:rotate(-28deg); opacity:.45; pointer-events:none; z-index:-1; }
.hero-orbit-second { width:95%; height:105%; left:2%; top:-5%; transform:rotate(35deg); border-color:#ff791c; opacity:.22; }
.hero-cube-anchor { position:absolute; top:-10px; right:16px; width:66px; height:66px; transform:translateZ(100px); z-index:4; pointer-events:none; }
.hero-cube { width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(35deg); }
.hero-cube i { position:absolute; inset:0; border:1px solid #ffb579; border-radius:5px; background:linear-gradient(135deg,#ffb065,#ff791c 70%); backface-visibility:hidden; }
.hero-cube i:nth-child(1) { transform:translateZ(33px); }
.hero-cube i:nth-child(2) { transform:rotateY(180deg) translateZ(33px); }
.hero-cube i:nth-child(3) { transform:rotateY(90deg) translateZ(33px); background:#d95308; }
.hero-cube i:nth-child(4) { transform:rotateY(-90deg) translateZ(33px); background:#e96812; }
.hero-cube i:nth-child(5) { transform:rotateX(90deg) translateZ(33px); background:#ffc087; }
.hero-cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(33px); background:#b84408; }
.hero-stage .hero-receipt { z-index:5; transform:translateZ(100px); bottom:30px; right:-10px; }
.hero-scene-footer { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:44px; position:relative; }
.hero-scene-footer .hero-demo-caption { margin:0; text-align:left; }
.hero-motion { flex-shrink:0; border:1px solid #516784; color:#d5e3f7; background:#111e32; border-radius:6px; padding:9px 11px; font:600 11px var(--f); cursor:pointer; min-height:36px; }
.hero-motion:hover { background:#243e61; }
@media(prefers-reduced-motion:no-preference) {
 .hero-stage .preview { animation:hero-unfold .85s cubic-bezier(.16,1,.3,1) both; }
 .hero-cube { animation:hero-cube-turn 18s linear infinite; }
 .hero-cube-anchor { animation:hero-cube-float 6s ease-in-out infinite; }
 .hero-backplate { animation:hero-plate-arrive .85s cubic-bezier(.16,1,.3,1) both; }
 .hero-stage .hero-receipt { animation:hero-receipt-pop .5s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes hero-unfold { from { transform:translateZ(-80px) rotateY(14deg); opacity:.5; } to { transform:translateZ(30px); opacity:1; } }
@keyframes hero-plate-arrive { from { transform:translateZ(-100px) translate(0,0); opacity:.3; } to { transform:translateZ(-38px) translate(24px,24px); opacity:1; } }
@keyframes hero-cube-turn { from { transform:rotateX(-22deg) rotateY(35deg); } to { transform:rotateX(-22deg) rotateY(395deg); } }
@keyframes hero-cube-float { 0%,100% { transform:translateZ(100px) translateY(0); } 50% { transform:translateZ(100px) translateY(-14px); } }
@keyframes hero-receipt-pop { from { transform:translateZ(20px) translateY(12px); opacity:0; } to { transform:translateZ(100px); opacity:1; } }
.hero-stage.motion-paused *, .hero-stage.motion-offscreen * { animation-play-state:paused !important; }
.hero-stage.motion-paused .hero-scene { transform:rotateX(7deg) rotateY(-12deg); }
@media(max-width:1100px) { .hero-stage .preview-body { border-radius:16px; } }
@media(max-width:820px) {
 .hero-stage { padding:40px 12px 12px; perspective:1800px; }
 .hero-scene { transform:rotateX(5deg) rotateY(-6deg); }
 .hero-stage .preview { transform:translateZ(0); animation:none; }
 .hero-stage .preview-kpis,.hero-stage .preview-billy,.hero-stage .preview-action { transform:none; }
 .hero-stage .hero-receipt { right:4px; }
 .hero-cube-anchor { top:-26px; right:30px; scale:.7; }
 .hero-scene-footer { flex-wrap:wrap; margin-top:35px; gap:10px; }
 .hero-scene-footer .hero-demo-caption { font-size:11px; }
 .hero-stage.motion-paused .hero-scene { transform:rotateX(5deg) rotateY(-6deg); }
}
@media(prefers-reduced-motion:reduce) {
 .hero-scene,.hero-stage.motion-paused .hero-scene { transform:none; transition:none; }
 .hero-stage .preview { transform:none; }
 .hero-motion { display:none; }
}
/* An explorable sale, from product to business insight. */
.hero-stage .experience-demo { display:block; background:#f7f9fc; color:#17283f; overflow:hidden; transform-style:flat; }
.experience-bar { display:flex; align-items:center; gap:14px; padding:14px 20px; background:#101f35; color:#becfe4; font-size:10px; }
.experience-bar .brand { font-size:21px; }.experience-live { margin-left:auto; display:flex; gap:6px; align-items:center; }.experience-live i { width:6px; height:6px; background:#72d5b1; border-radius:50%; }
.experience-content { padding:22px; }
.experience-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.experience-small { color:#586d88; font-size:9px; font-weight:700; letter-spacing:.08em; }
.experience-title h2 { font-size:23px; letter-spacing:-.025em; line-height:1.15; margin:6px 0 0; }
#experience-reset { border:0; background:none; color:#355886; font:600 11px var(--f); cursor:pointer; padding:10px 0 10px 10px; }
.experience-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.experience-products button { appearance:none; border:1px solid #d6e0ed; background:#fff; border-radius:10px; color:#233550; padding:9px; cursor:pointer; text-align:left; font:12px var(--f); transition:border-color .18s,background .18s; }
.experience-products button[aria-pressed=true] { border:2px solid #397cf5; padding:8px; background:#edf4ff; }
.experience-products button:hover { background:#eaf1fb; }.experience-products b,.experience-products button>span:last-child { display:block; margin-top:5px; }.experience-products button>span:last-child { color:#516580; font-size:11px; }
.product-art { height:65px; display:flex; justify-content:center; align-items:center; border-radius:6px; background:#f5eee4; }.product-art svg { height:65px; width:80px; }.water-art { background:#e9f4f9; }.rice-art { background:#eff2e7; }
.experience-checkout { display:flex; justify-content:space-between; align-items:center; margin:16px 0 12px; gap:16px; }.experience-checkout>div>span { display:block; font-size:10px; color:#52677f; }.experience-checkout strong { display:block; font-size:27px; margin-top:3px; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.hero-stage .experience-checkout .preview-action { padding:13px 20px; border-radius:8px; font-size:12px; transform:none; min-height:44px; }
.experience-checkout .preview-action:disabled { opacity:1; color:#215a49; background:#dcefe6; cursor:default; }
.experience-flow { list-style:none; padding:12px 0; margin:0; display:flex; justify-content:space-between; gap:8px; border-top:1px solid #dae3ee; border-bottom:1px solid #dae3ee; }
.experience-flow li { font-size:10px; font-weight:600; color:#60728b; display:flex; align-items:center; gap:6px; transition:color .2s; }
.experience-flow li:before { content:''; width:7px; height:7px; border-radius:50%; border:1px solid #91a2b8; }
.sale-complete .experience-flow li { color:#23664e; }.sale-complete .experience-flow li:before { background:#328163; border-color:#328163; }
.experience-results { display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:10px; padding:15px 0; }.experience-results span { font-size:10px; color:#596d87; display:block; }.experience-results strong { display:block; font-size:20px; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums; }.experience-results small { font-size:11px; }
.experience-billy { display:flex; gap:12px; align-items:flex-start; padding:14px; background:#e7efff; border-radius:10px; }.experience-billy>svg { width:36px; height:47px; flex-shrink:0; }.experience-billy>div { flex:1; min-width:0; }.experience-billy-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.experience-billy-header b { color:#215aa8; font-size:13px; }.experience-billy-header span { font-size:9px; color:#536e98; }.experience-billy p { font-size:12px; line-height:1.5; margin:6px 0 9px; color:#314c72; min-height:36px; }
#experience-ask { font:600 11px var(--f); color:#245dac; background:#fff; border:1px solid #adc6ea; border-radius:5px; padding:8px 10px; cursor:pointer; }
.experience-receipt { border-top:1px dashed #a2b6cd; margin-top:12px; padding-top:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; color:#285d4c; font-size:11px; }.experience-receipt small { width:100%; font-size:9px; color:#62778d; }
@media(prefers-reduced-motion:no-preference) { .sale-complete .experience-flow li:before { animation:experience-confirm .45s both; }.sale-complete .experience-flow li:nth-child(2):before { animation-delay:.15s; }.sale-complete .experience-flow li:nth-child(3):before { animation-delay:.3s; }.sale-complete .experience-receipt { animation:hero-title-in .35s both; } }
@keyframes experience-confirm { from { transform:scale(.5); background:#91a2b8; } to { transform:scale(1); background:#328163; } }
@media(min-width:821px) { .hero-stage:has(.experience-demo) { padding-top:8px; }.hero .grid:has(.experience-demo) { align-items:center; }.hero-scene:has(.experience-demo) { transform:rotateX(var(--hero-rx,3deg)) rotateY(var(--hero-ry,-6deg)); } }
@media(max-width:560px) { .experience-content { padding:15px; }.experience-bar { padding:12px 15px; gap:8px; }.experience-bar>span[data-ex=sample] { display:none; }.experience-title h2 { font-size:20px; }.experience-products { gap:7px; }.experience-products button { font-size:11px; }.product-art,.product-art svg { height:53px; }.experience-results { gap:6px; }.experience-results strong { font-size:16px; }.experience-results span { font-size:9px; }.experience-flow li { font-size:9px; gap:4px; }.experience-billy { padding:11px; gap:8px; }.experience-billy-header span { font-size:8px; }.hero-stage:has(.experience-demo) { padding:10px 0; }.hero-stage .experience-checkout .preview-action { padding:12px; }.experience-billy p { font-size:11px; } }
.hero-stage.motion-paused .hero-scene:has(.experience-demo) { transform:rotateX(3deg) rotateY(-6deg); }
@media(prefers-reduced-motion:reduce) { .hero-scene:has(.experience-demo),.hero-stage.motion-paused .hero-scene:has(.experience-demo) { transform:none; } }

/* Commercial launch: quoted plans preserve existing subscription terms. */
#planes .commercial-plans {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.commercial-plans .plan {display:flex;flex-direction:column;min-width:0;}
.commercial-plans .sub {min-height:76px;margin:16px 0 24px;}
.commercial-plans .btn {margin-top:auto;text-align:center;}
.commercial-total {color:#dbe7ff;font-size:14px;margin:12px 0 0;font-variant-numeric:tabular-nums;}
.commercial-terms {font-size:14px;line-height:1.7;color:var(--muted);max-width:85ch;margin:24px auto 0;}
.commercial-free {display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #34445e;padding-top:28px;margin-top:32px;}
.commercial-free h3 {margin:0 0 8px;}.commercial-free p {color:#bdcbe0;margin:0;}
.onboarding-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.onboarding-options article {border-top:2px solid var(--line);padding-top:24px;display:flex;flex-direction:column;align-items:flex-start;}
.onboarding-options h3 {font-size:24px;margin:0 0 12px;}.setup-price {font-size:28px;font-weight:700;margin:0;}
.onboarding-options p,.onboarding-options li {line-height:1.65;}.onboarding-options ul {padding-left:20px;margin:12px 0 24px;}.onboarding-options .btn {margin-top:auto;}
@media(max-width:1000px){#planes .commercial-plans{grid-template-columns:repeat(2,minmax(0,1fr));}.onboarding-options{grid-template-columns:1fr;}}
@media(max-width:560px){#planes .commercial-plans{grid-template-columns:1fr;}.commercial-free{align-items:flex-start;flex-direction:column;}.commercial-plans .sub{min-height:0;}.commercial-plans .amt small{display:block;}}