/* Watermelon-inspired motion system, adapted for BujjiAi's static site. */
:root {
  --ease-spring: cubic-bezier(.2,.9,.2,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1);
  --ink: #10251d;
  --mint: #dff8e9;
  --paper: #fbfcf9;
}

body { background: var(--paper); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.38; background-image:radial-gradient(rgba(6,78,40,.12) .7px,transparent .7px); background-size:18px 18px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.container { max-width:1240px; }
section.pad { padding:clamp(78px,9vw,132px) 0; }
.sec-head { margin-bottom:clamp(42px,5vw,72px); }
.sec-head h2 { font-size:clamp(34px,4.6vw,62px); letter-spacing:-.055em; line-height:1.02; text-wrap:balance; }
.sec-head p.lead { max-width:680px; margin-inline:auto; font-size:clamp(15px,1.35vw,18px); }
.section-eyebrow { border:1px solid rgba(8,125,62,.12); box-shadow:0 8px 24px rgba(8,125,62,.06); }

/* Morphing navigation + command search */
.nav { top:12px; left:50%; right:auto; width:min(1180px,calc(100% - 24px)); padding:10px 14px 10px 18px; border:1px solid rgba(255,255,255,.12); border-radius:22px; transform:translate(-50%,0); background:rgba(8,23,15,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.nav.visible, .nav.scrolled { transform:translate(-50%,0); background:rgba(8,23,15,.96); border-color:rgba(37,211,102,.25); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.nav-links { gap:5px; }
.nav-links > a:not(.btn-nav) { padding:9px 11px; border-radius:12px; font-size:12.5px; }
.nav-links > a:not(.btn-nav):hover,.nav-links > a.active:not(.btn-nav) { color:#fff; background:rgba(255,255,255,.08); }
.btn-nav { margin-left:4px; padding:10px 16px!important; box-shadow:inset 0 1px rgba(255,255,255,.45),0 8px 22px rgba(37,211,102,.25); }
.nav-search { display:flex; align-items:center; gap:6px; padding:8px 9px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:#d5ded8; background:rgba(255,255,255,.06); cursor:pointer; transition:.2s var(--ease-spring); }
.nav-search:hover { color:#fff; transform:translateY(-1px); background:rgba(255,255,255,.12); }
.nav-search kbd,.hero-ai-key,.command-search kbd { font:700 10px/1 var(--font); padding:4px 6px; border:1px solid rgba(255,255,255,.15); border-radius:6px; background:rgba(255,255,255,.08); }
.command-backdrop { position:fixed; inset:0; z-index:2000; display:grid; place-items:start center; padding-top:min(16vh,150px); background:rgba(4,14,9,.58); backdrop-filter:blur(12px); opacity:0; transition:opacity .22s ease; }
.command-backdrop[hidden] { display:none; }
.command-backdrop.open { opacity:1; }
.command-panel { width:min(620px,calc(100% - 28px)); overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:26px; background:rgba(250,252,249,.96); box-shadow:0 40px 120px rgba(0,0,0,.38); transform:translateY(-16px) scale(.96); transition:transform .32s var(--ease-snap); }
.command-backdrop.open .command-panel { transform:none; }
.command-search { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid #e5ece7; }
.command-search input { min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:650 16px/1.4 var(--font); }
.command-search kbd { color:#62746b; border-color:#dce4df; background:#f2f5f3; }
.command-label { padding:14px 18px 8px; color:#8a9991; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.command-results { display:grid; gap:4px; padding:0 10px 12px; max-height:360px; overflow:auto; }
.command-item { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; width:100%; padding:10px; border:0; border-radius:14px; background:transparent; text-align:left; cursor:pointer; }
.command-item:hover,.command-item.active { background:#e9f8ef; }
.command-item > i { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#087d3e; background:#d9f6e5; font-style:normal; }
.command-item b { display:block; color:#1b2e26; font-size:13.5px; }
.command-item small { display:block; margin-top:2px; color:#7d8d85; }
.command-item > span { color:#9aa8a0; }
.command-foot { display:flex; gap:18px; padding:11px 18px; border-top:1px solid #e7ede9; color:#8a9991; background:#f6f8f6; font-size:10.5px; }

/* Hero - layered poster plus contextual AI action */
.hero { min-height:min(941px,100svh); isolation:isolate; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:18%; pointer-events:none; background:linear-gradient(to top,rgba(5,2,0,.52),transparent); }
.hero-copy { animation:heroEnter .9s var(--ease-spring) both; }
@keyframes heroEnter { from { opacity:0; transform:translateY(22px); filter:blur(8px) } }
.hero-ai-bar { width:min(100%,520px); display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; margin:-8px 0 clamp(16px,1.5vw,24px); padding:10px 12px; border:1px solid rgba(255,255,255,.13); border-radius:16px; color:#fff; background:rgba(255,255,255,.07); backdrop-filter:blur(14px); text-align:left; cursor:pointer; box-shadow:0 18px 50px rgba(0,0,0,.24); transition:.3s var(--ease-spring); }
.hero-ai-bar:hover { transform:translateY(-3px); border-color:rgba(251,146,60,.5); background:rgba(255,255,255,.11); }
.ai-spark { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#2b1202; background:linear-gradient(135deg,#fbbf24,#f97316); box-shadow:0 0 26px rgba(249,115,22,.35); }
.hero-ai-copy b,.hero-ai-copy small { display:block; }
.hero-ai-copy b { font-size:12px; }
.hero-ai-copy small { color:#bdb6af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.hero-ai-key { color:#bdb6af; }

/* Rich cards and disclosure */
.tpl-banner,.journey-wrap,.message-showcase,.brain-flow,.ai-workbench,.matrix-wrap { border-radius:32px; }
.card,.price-card,.testi-card,.mini-stat,.hiw-step { border-radius:22px; }
.card,.price-card,.testi-card { box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 15px 45px rgba(20,58,39,.06); }
.card::before,.price-card::before,.testi-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.42),transparent 38%); }
.grid-3 { gap:18px; }
#features { background:linear-gradient(180deg,#f4f8f5,#fff 55%,#f8fbf9); }
.feature-handoff { display:flex; align-items:center; justify-content:center; gap:18px; margin:-24px auto 30px; color:#52685d; }
.feature-handoff > div { display:flex; align-items:center; gap:11px; padding:10px 14px; border:1px solid rgba(19,95,57,.10); border-radius:16px; background:rgba(255,255,255,.72); box-shadow:0 10px 30px rgba(23,69,46,.06); }
.feature-handoff b,.feature-handoff small { display:block; }
.feature-handoff b { color:#193b2c; font-size:12px; }
.feature-handoff small { margin-top:2px; color:#839189; font-size:9.5px; }
.handoff-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#087d3e; background:#dff8e9; }
.handoff-icon svg { width:18px; height:18px; }
.handoff-line { width:54px; height:1px; position:relative; background:linear-gradient(90deg,#9fdab6,#f2a84b); }
.handoff-line::after { content:""; position:absolute; right:0; top:50%; width:7px; height:7px; border-top:1px solid #e08a26; border-right:1px solid #e08a26; transform:translateY(-50%) rotate(45deg); }
.feature-explorer { display:grid; grid-template-columns:285px minmax(0,1fr); min-height:650px; overflow:hidden; border:1px solid rgba(19,95,57,.13); border-radius:32px; background:rgba(255,255,255,.82); box-shadow:0 38px 100px rgba(22,67,45,.12); backdrop-filter:blur(18px); }
.feature-rail { display:flex; flex-direction:column; gap:7px; padding:20px; border-right:1px solid #e2ece6; background:linear-gradient(155deg,#eaf8ef,#f8f6ee); }
.feature-tab { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; width:100%; padding:12px; border:1px solid transparent; border-radius:16px; color:#446054; background:transparent; text-align:left; cursor:pointer; transition:.28s var(--ease-spring); }
.feature-tab > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#087d3e; background:rgba(255,255,255,.72); transition:.28s var(--ease-snap); }
.feature-tab svg { width:19px; height:19px; }
.feature-tab b { display:block; color:#29483a; font-size:13px; }
.feature-tab small { color:#93a198; font-size:9px; }
.feature-tab:hover { background:rgba(255,255,255,.62); transform:translateX(3px); }
.feature-tab.active { border-color:rgba(18,140,126,.18); background:#fff; box-shadow:0 12px 30px rgba(18,140,126,.10); transform:translateX(4px); }
.feature-tab.active > span { color:#fff; background:#128c7e; transform:rotate(-3deg) scale(1.04); }
.feature-tab.active b { color:#075e54; }
.feature-detail { display:flex; flex-direction:column; padding:clamp(26px,4vw,48px); animation:featureIn .38s var(--ease-spring) both; }
@keyframes featureIn { from { opacity:.3; transform:translateY(7px); } }
.feature-detail-head { display:grid; grid-template-columns:58px 1fr; gap:18px; align-items:start; padding-bottom:28px; border-bottom:1px solid #e5ece8; }
.feature-detail-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:#087d3e; background:#dff8e9; box-shadow:inset 0 1px rgba(255,255,255,.8); }
.feature-detail-icon.orange { color:#b85208; background:#fff0d7; }.feature-detail-icon.blue { color:#1768ad; background:#e6f2ff; }.feature-detail-icon.purple { color:#6b46c1; background:#f0eaff; }.feature-detail-icon.pink { color:#a53b78; background:#fde9f4; }.feature-detail-icon.teal { color:#087d72; background:#def6f2; }
.feature-detail-icon svg { width:27px; height:27px; }
.feature-detail-head small { color:#128c7e; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.feature-detail-head h3 { max-width:650px; margin:7px 0 9px; color:#163b2b; font-size:clamp(25px,3vw,40px); line-height:1.04; letter-spacing:-.045em; }
.feature-detail-head p { max-width:670px; color:#6b7d73; font-size:13.5px; line-height:1.65; }
.feature-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; padding:27px 0; }
.feature-check-grid > div { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; padding:9px; border-radius:13px; transition:.22s var(--ease-spring); }
.feature-check-grid > div:hover { background:#f2f8f4; transform:translateY(-2px); }
.feature-check-grid > div > span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#087d3e; background:#e3f8eb; }
.feature-check-grid svg { width:14px; height:14px; }
.feature-check-grid b,.feature-check-grid small { display:block; }
.feature-check-grid b { color:#244438; font-size:11.5px; }
.feature-check-grid small { margin-top:3px; color:#819087; font-size:9.8px; line-height:1.45; }
.feature-proof { display:flex; align-items:center; gap:9px; margin-top:auto; padding:11px 13px; border:1px solid #dcece2; border-radius:13px; color:#667b70; background:#f4faf6; font-size:10px; font-weight:700; }
.feature-proof > svg.la-site-icon { flex:0 0 15px; width:15px; height:15px; color:#128c7e; }
.feature-note { display:flex; align-items:center; justify-content:center; gap:9px; margin:22px auto 0; color:#708178; font-size:11px; }
.feature-note > svg.la-site-icon { flex:0 0 16px; width:16px; height:16px; color:#128c7e; }
.feature-note b { color:#29483a; }

/* Automation step pager */
.journey-wrap { background:linear-gradient(135deg,#fff,#f5fbf7 52%,#fff8ec); border-color:rgba(18,140,126,.14); box-shadow:0 32px 90px rgba(22,67,45,.10); }
.journey-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:760px; margin:28px auto 12px; padding:6px; border:1px solid #e4ede7; border-radius:18px; background:rgba(255,255,255,.75); }
.journey-control { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:8px; border:0; border-radius:13px; color:#687b71; background:transparent; font:700 11.5px/1.2 var(--font); cursor:pointer; transition:.28s var(--ease-spring); }
.journey-control span { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#edf2ef; }
.journey-control.active { color:#075e54; background:#dff8e9; box-shadow:0 7px 18px rgba(18,140,126,.12); transform:translateY(-1px); }
.journey-control.active span { color:#fff; background:#128c7e; }
.journey-live { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:3px 18px; max-width:760px; margin:0 auto; padding:16px 18px 20px; border:1px solid #e7eee9; border-radius:16px; background:#fff; }
.journey-live b { color:#173a2e; font-size:13px; }
.journey-live span { grid-column:1; color:#73827a; font-size:11.5px; }
.journey-live::after { content:"Running"; grid-column:2; grid-row:1/3; align-self:center; padding:5px 10px; border-radius:999px; color:#087d3e; background:#e7f9ee; font-size:10px; font-weight:800; }
.journey-live i { position:absolute; left:0; bottom:0; width:var(--step); height:3px; background:linear-gradient(90deg,#25d366,#fbbf24); transition:width .45s var(--ease-spring); }

/* AI contextual workbench */
.ai-section { position:relative; background:radial-gradient(circle at 18% 25%,#17452b 0,#0b2115 36%,#06110b 76%); }
.ai-section::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle,#000,transparent 72%); }
.ai-workbench { position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr; gap:34px; align-items:center; margin-bottom:38px; padding:32px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); backdrop-filter:blur(14px); box-shadow:0 35px 100px rgba(0,0,0,.3); }
.workbench-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid rgba(37,211,102,.18); border-radius:999px; color:#9fe4b8; background:rgba(37,211,102,.08); font-size:10.5px; font-weight:800; text-transform:none; letter-spacing:.025em; }
.workbench-pill i,.composer-actions i { width:7px; height:7px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.1); }
.ai-workbench h3 { max-width:470px; margin:17px 0 11px; color:#fff; font-size:clamp(25px,3vw,40px); line-height:1.05; letter-spacing:-.04em; }
.ai-workbench-copy > p { color:#9fb1a7; font-size:13.5px; }
.agent-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.agent-chip { padding:9px 12px; border:1px solid rgba(255,255,255,.11); border-radius:11px; color:#aebbb4; background:rgba(255,255,255,.045); font:700 11px/1 var(--font); cursor:pointer; transition:.24s var(--ease-spring); }
.agent-chip:hover,.agent-chip.active { transform:translateY(-2px); color:#07130d; border-color:#80e5a5; background:#80e5a5; }
.ai-composer { padding:18px; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:#fbfcfb; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.customer-line { display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid #e7ede9; color:#283d34; font-size:12.5px; }
.customer-line img { width:34px; height:34px; border-radius:10px; }
.customer-line small { display:block; color:#90a097; font-size:9px; }
.ai-answer { min-height:104px; padding:18px 4px 12px; color:#20372d; font-size:14px; line-height:1.6; }
.typing-cursor { display:inline-block; width:7px; height:17px; border-radius:2px; background:#25d366; animation:blink .8s infinite; vertical-align:middle; }
@keyframes blink { 50% { opacity:.15 } }
.wave-row { display:none; height:48px; align-items:center; gap:3px; padding:0 4px; }
.wave-row.active { display:flex; }
.wave-row i { flex:1; max-width:5px; border-radius:999px; background:#18a75b; animation:wave 1.05s ease-in-out infinite alternate; }
@keyframes wave { to { height:7px } }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid #e7ede9; }
.composer-actions > span { display:flex; align-items:center; gap:8px; color:#6b7d73; font-size:10.5px; }
.composer-actions button { padding:8px 12px; border:0; border-radius:10px; color:#fff; background:#128c7e; font:750 11px var(--font); cursor:pointer; transition:.2s; }
.composer-actions button:hover { transform:translateY(-1px); background:#075e54; }

/* Pricing selector */
.billing-switch { position:relative; display:grid; grid-template-columns:1fr 1fr; width:max-content; margin:-24px auto 34px; padding:5px; border:1px solid #deebe3; border-radius:999px; background:#fff; box-shadow:0 14px 38px rgba(21,71,45,.09); }
.billing-switch i { position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:#123c2a; transition:transform .34s var(--ease-spring); }
.billing-switch.yearly i { transform:translateX(100%); }
.billing-switch button { position:relative; z-index:1; min-width:130px; padding:10px 16px; border:0; border-radius:999px; color:#687b71; background:transparent; font:750 12px var(--font); cursor:pointer; transition:.3s; }
.billing-switch button.active { color:#fff; }
.billing-switch button span { margin-left:4px; color:#15803d; font-size:9px; }
.billing-switch button.active span { color:#86efac; }
.plan-price { transition:transform .28s var(--ease-snap),opacity .18s; }
.plan-price.changing { transform:translateY(-8px); opacity:0; }
.price-card.popular { box-shadow:0 26px 80px rgba(18,140,126,.20); }

/* Carousel controls and feedback */
.testi-grid { transition:transform .5s var(--ease-spring); }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; }
.carousel-controls button { width:42px; height:42px; border:1px solid #dce8e0; border-radius:50%; color:#153b2b; background:#fff; font-size:18px; cursor:pointer; box-shadow:0 8px 24px rgba(17,62,39,.08); transition:.2s var(--ease-spring); }
.carousel-controls button:hover { transform:scale(1.08); color:#fff; background:#128c7e; }
.carousel-progress { width:120px; height:4px; overflow:hidden; border-radius:99px; background:#e5eee8; }
.carousel-progress i { display:block; width:33.33%; height:100%; border-radius:inherit; background:#128c7e; transition:transform .4s var(--ease-spring); }

.inline-toast { position:fixed; z-index:2100; left:50%; bottom:24px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; min-width:310px; padding:11px 12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:16px; color:#fff; background:#0d291b; box-shadow:0 24px 70px rgba(0,0,0,.35); transform:translate(-50%,calc(100% + 60px)); opacity:0; transition:.36s var(--ease-snap); }
.inline-toast.show { transform:translate(-50%,0); opacity:1; }
.toast-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#082014; background:#52dd86; font-weight:900; }
.inline-toast span { font-size:12px; font-weight:700; }
.inline-toast button { border:0; color:#94e6b1; background:transparent; font:750 11px var(--font); cursor:pointer; }
.inline-toast i { position:absolute; left:0; bottom:0; height:3px; width:100%; background:#52dd86; transform-origin:left; }
.inline-toast.show i { animation:toastTimer 4s linear both; }
@keyframes toastTimer { to { transform:scaleX(0) } }

/* Responsive */
@media (max-width:1100px) {
  .nav-links > a:not(.btn-nav) { display:none; }
  .nav-links { margin-left:auto; }
  .ai-workbench { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  section.pad { padding:72px 0; }
  .container { padding-inline:18px; }
  .nav { top:8px; width:calc(100% - 16px); }
  .nav-links { display:flex; }
  .nav-search { display:none; }
  .hero { min-height:auto; }
  .hero-inner { min-height:780px; aspect-ratio:auto; }
  .hero-poster { object-position:62% center; opacity:.58; }
  .hero-copy { top:13%; left:7%; width:86%; }
  .hero-ai-bar { margin-top:2px; }
  .hero-stats { gap:7px; }
  .hs-card { display:block; }
  .hs-ico { width:34px; height:34px; margin-bottom:8px; }
  .journey-controls { grid-template-columns:1fr 1fr; }
  .journey-control { justify-content:flex-start; }
  .journey-live { grid-template-columns:1fr; }
  .journey-live::after { display:none; }
  .ai-workbench { padding:22px; }
  .agent-chips { display:grid; grid-template-columns:1fr 1fr; }
  .billing-switch button { min-width:116px; }
  #faq .container { display:block; }
  #faq .sec-head { position:static; margin-bottom:34px; text-align:center; }
  .inline-toast { min-width:0; width:calc(100% - 28px); bottom:12px; }
  .feature-handoff { align-items:stretch; gap:7px; }
  .feature-handoff > div { flex:1; padding:8px; }
  .feature-handoff small,.handoff-line { display:none; }
  .feature-explorer { display:block; min-height:0; border-radius:24px; }
  .feature-rail { display:grid; grid-template-columns:1fr 1fr; border-right:0; border-bottom:1px solid #e2ece6; padding:12px; }
  .feature-tab { grid-template-columns:34px 1fr; padding:8px; }
  .feature-tab > span { width:34px; height:34px; border-radius:10px; }
  .feature-tab small { display:none; }
  .feature-tab b { font-size:11px; }
  .feature-tab:hover,.feature-tab.active { transform:none; }
  .feature-detail { padding:22px 17px; }
  .feature-detail-head { grid-template-columns:44px 1fr; gap:12px; }
  .feature-detail-icon { width:44px; height:44px; border-radius:14px; }
  .feature-detail-icon svg { width:22px; height:22px; }
  .feature-check-grid { grid-template-columns:1fr; gap:5px; padding:18px 0; }
  .feature-check-grid > div { padding:7px 4px; }
  .feature-note { align-items:flex-start; padding:0 8px; text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-copy,.wave-row i,.typing-cursor,.inline-toast.show i { animation:none!important; }
  .command-panel,.journey-live i,.billing-switch i,.testi-grid { transition:none!important; }
}

/* Interactive template studio */
#templates { position:relative; overflow:hidden; background:linear-gradient(180deg,#fbfcf9 0%,#f2f8f3 100%); }
#templates::before { content:""; position:absolute; width:520px; height:520px; top:-180px; right:-120px; border-radius:50%; background:rgba(37,211,102,.09); filter:blur(20px); }
.template-story { position:relative; overflow:hidden; padding:clamp(28px,4vw,54px); border:1px solid rgba(18,140,126,.15); border-radius:36px; background:rgba(255,255,255,.78); box-shadow:0 40px 110px rgba(26,72,49,.12); backdrop-filter:blur(18px); }
.template-story::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 88% 3%,rgba(251,191,36,.14),transparent 28%),linear-gradient(120deg,rgba(255,255,255,.5),transparent 38%); }
.template-story-head { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; margin-bottom:28px; }
.template-live { display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; padding:7px 12px; border:1px solid #d9ece0; border-radius:999px; color:#087d3e; background:#f3fbf6; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.template-live i { width:7px; height:7px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.12); }
.template-story-head h2 { max-width:720px; color:#142a21; font-size:clamp(37px,5.2vw,70px); line-height:.96; letter-spacing:-.065em; }
.template-story-head h2 span { color:#128c7e; }
.template-story-head > p { max-width:470px; padding-bottom:5px; color:#61746a; font-size:15px; line-height:1.7; }
.template-story-head > p strong { color:#087d3e; font-weight:850; }
.template-price-compare { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr); align-items:stretch; margin-bottom:14px; }
.compare-card { position:relative; min-width:0; padding:25px; border:1px solid #dfe8e2; background:rgba(255,255,255,.88); box-shadow:0 18px 50px rgba(23,69,46,.08); }
.compare-other { border-radius:24px 0 0 24px; background:linear-gradient(145deg,#fff,#f8f9f8); }
.compare-bujji { overflow:hidden; border-color:#20b65b; border-radius:0 24px 24px 0; background:linear-gradient(145deg,#f3fff7,#e9faef); box-shadow:0 20px 55px rgba(20,153,76,.16); }
.compare-bujji::before { content:""; position:absolute; width:190px; height:190px; right:-70px; top:-95px; border-radius:50%; background:rgba(37,211,102,.12); }
.compare-card-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:30px; }
.compare-brand { display:flex; align-items:center; gap:9px; color:#273b32; font-size:14px; font-weight:850; }
.compare-brand > svg.la-site-icon { flex:0 0 21px; width:21px; height:21px; color:#68766f; }
.compare-brand img { width:27px; height:27px; border-radius:8px; }
.compare-tag { padding:5px 9px; border-radius:999px; color:#6b756f; background:#eef1ef; font-size:9.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.compare-bujji .compare-tag { color:#087d3e; background:#d7f9e3; }
.compare-winner { position:absolute; z-index:2; top:0; left:50%; display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:0 0 13px 13px; color:#05351c; background:#59e187; font-size:9.5px; font-weight:800; letter-spacing:.025em; text-transform:none; transform:translateX(-50%); white-space:nowrap; }
.compare-winner > svg.la-site-icon { flex:0 0 14px; width:14px; height:14px; }
.compare-main-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:22px 0 17px; }
.compare-main-price small { width:100%; color:#839087; font-size:9.5px; font-weight:750; letter-spacing:.025em; text-transform:none; }
.compare-main-price strong { color:#17241e; font-size:clamp(34px,4vw,47px); font-weight:900; line-height:1; letter-spacing:-.055em; }
.compare-main-price span { color:#7a8680; font-size:12px; font-weight:700; }
.compare-bujji .compare-main-price strong { color:#07853d; }
.compare-message-rates,.compare-free-list { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid #e0e7e3; border-radius:14px; background:#fafcfa; }
.compare-message-rates > span,.compare-free-list > span { min-width:0; padding:12px 10px; border-left:1px solid #e0e7e3; }
.compare-message-rates > span:first-child,.compare-free-list > span:first-child { border-left:0; }
.compare-message-rates b,.compare-message-rates strong,.compare-message-rates small,.compare-free-list b,.compare-free-list small { display:block; }
.compare-message-rates b,.compare-free-list b { overflow:hidden; color:#56635d; font-size:9px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.compare-message-rates strong { margin:4px 0 2px; color:#222e28; font-size:15px; }
.compare-message-rates small,.compare-free-list small { color:#8a9690; font-size:7.5px; line-height:1.35; }
.compare-free-list { border-color:#ccebd6; background:rgba(255,255,255,.68); }
.compare-free-list > span { border-color:#ccebd6; }
.compare-free-list i { display:grid; place-items:center; width:20px; height:20px; margin-bottom:6px; border-radius:50%; color:#fff; background:#16a34a; font-size:11px; font-style:normal; font-weight:900; }
.compare-free-list b { color:#0b7138; }
.compare-example { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1px 12px; margin-top:15px; padding:12px 14px; border-radius:13px; color:#5f6b65; background:#f1f3f2; }
.compare-example span { font-size:10px; font-weight:750; }
.compare-example strong { grid-row:1/3; grid-column:2; color:#1f2924; font-size:22px; font-weight:900; letter-spacing:-.035em; }
.compare-example small { font-size:7.5px; }
.compare-bujji .compare-example { color:#12683a; background:#d7f7e2; }
.compare-bujji .compare-example strong { color:#07853d; }
.compare-versus { position:relative; z-index:3; display:grid; place-items:center; }
.compare-versus::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#d9e5de; }
.compare-versus span { position:relative; display:grid; place-items:center; width:45px; height:45px; border:5px solid #f8fbf8; border-radius:50%; color:#fff; background:#173d2b; box-shadow:0 8px 24px rgba(13,59,39,.2); font-size:10px; font-weight:900; letter-spacing:.06em; }
.compare-source-note { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 28px; color:#849189; font-size:8.5px; text-align:center; }
.compare-source-note > svg.la-site-icon { flex:0 0 13px; width:13px; height:13px; }
.template-studio { position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); overflow:hidden; min-height:580px; border:1px solid #dfeae3; border-radius:28px; background:#f7faf8; box-shadow:0 22px 65px rgba(23,69,46,.10); }
.template-picker { display:flex; flex-direction:column; gap:10px; padding:24px 18px; border-right:1px solid #dfeae3; background:linear-gradient(160deg,#ecf8f0,#f8f4e9); }
.picker-label { margin:0 8px 6px; color:#86968d; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.template-choice { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; width:100%; padding:12px; border:1px solid transparent; border-radius:15px; color:#2d463a; background:rgba(255,255,255,.58); text-align:left; cursor:pointer; transition:.28s var(--ease-spring); }
.template-choice:hover { transform:translateX(4px); background:#fff; }
.template-choice.active { border-color:rgba(18,140,126,.22); background:#fff; box-shadow:0 12px 32px rgba(18,140,126,.11); transform:translateX(5px); }
.choice-symbol { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#087d3e; background:#dff8e9; font-size:17px; font-weight:900; transition:.28s var(--ease-snap); }
.template-choice.active .choice-symbol { color:#fff; background:#128c7e; transform:rotate(-4deg) scale(1.05); }
.template-choice b,.template-choice small { display:block; }
.template-choice b { font-size:13px; }
.template-choice small { margin-top:3px; color:#84948c; font-size:10px; }
.template-choice > i { color:#a2afa8; font-size:9px; font-style:normal; }
.template-zero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:auto; padding:15px; border:1px solid rgba(18,140,126,.17); border-radius:17px; background:linear-gradient(135deg,#0d3b27,#17683e); box-shadow:0 18px 42px rgba(10,69,38,.24); }
.zero-number { color:#75ec9f; font-size:25px; font-weight:900; letter-spacing:-.04em; }
.template-zero b,.template-zero small { display:block; }
.template-zero b { color:#fff; font-size:11px; }
.template-zero small { margin-top:2px; color:#a7c5b5; font-size:8.5px; }
.zero-check { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#0a3b24; background:#75ec9f; font-weight:900; }
.template-canvas { display:flex; flex-direction:column; min-width:0; background:radial-gradient(circle at 65% 45%,#fff 0%,#edf7f1 70%); }
.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 20px; border-bottom:1px solid #dde8e1; color:#41594e; background:rgba(255,255,255,.72); font-size:10.5px; font-weight:800; }
.canvas-toolbar > span:first-child { display:flex; align-items:center; gap:8px; }
.canvas-toolbar i { width:8px; height:8px; border-radius:50%; background:#25d366; box-shadow:0 0 0 4px rgba(37,211,102,.12); }
.canvas-status { color:#86968e; font-weight:650; }
.canvas-body { display:grid; grid-template-columns:minmax(250px,1fr) 270px; gap:28px; align-items:center; flex:1; padding:28px clamp(20px,3vw,42px); }
.mini-editor { padding:22px; border:1px solid #e0e8e3; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 18px 45px rgba(25,68,46,.09); }
.editor-label { color:#97a49d; font-size:9px; font-weight:850; letter-spacing:.12em; }
.editor-title { margin:13px 0 16px; color:#1b3428; font-size:17px; font-weight:850; line-height:1.25; }
.editor-lines { display:grid; gap:7px; margin-bottom:18px; }
.editor-lines i { height:7px; border-radius:99px; background:#e6ece8; }
.editor-lines i:nth-child(2) { width:86%; }.editor-lines i:nth-child(3) { width:64%; }
.editor-options { display:flex; flex-wrap:wrap; gap:7px; }
.editor-options span { padding:7px 9px; border:1px solid #dce9e1; border-radius:9px; color:#167157; background:#f3faf6; font-size:9px; font-weight:750; }
.editor-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; padding-top:15px; border-top:1px solid #e5ebe7; color:#7b8c83; font-size:9px; font-weight:700; }
.editor-foot button { padding:9px 11px; border:0; border-radius:10px; color:#fff; background:#128c7e; font:750 9px var(--font); cursor:pointer; transition:.22s var(--ease-spring); }
.editor-foot button:hover { transform:translateY(-2px); background:#075e54; }
.template-phone { overflow:hidden; width:255px; height:460px; border:7px solid #202523; border-radius:34px; background:#ece6dc; box-shadow:0 24px 55px rgba(16,48,32,.25); transition:.38s var(--ease-spring); }
.template-phone.switching { transform:translateY(5px) scale(.97); filter:blur(3px); opacity:.55; }
.template-phone-top { position:relative; display:flex; justify-content:space-between; align-items:center; height:25px; padding:0 12px; color:#313d38; background:#fff; font-size:8px; font-weight:800; }
.template-phone-top i { position:absolute; top:0; left:50%; width:78px; height:16px; border-radius:0 0 12px 12px; background:#202523; transform:translateX(-50%); }
.template-wa-head { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px; padding:8px 10px; color:#fff; background:#07876e; }
.template-wa-head img { width:29px; height:29px; border:2px solid #fff; border-radius:50%; }
.template-wa-head b,.template-wa-head small { display:block; }
.template-wa-head b { font-size:9px; }.template-wa-head small { opacity:.72; font-size:6.5px; }
.template-wa-head i { font-style:normal; }
.template-wa-chat { height:358px; overflow:hidden; padding:14px 9px; background-color:#efeae2; background-image:radial-gradient(rgba(42,82,60,.10) .7px,transparent .7px); background-size:12px 12px; }
.template-today { display:block; width:max-content; margin:0 auto 11px; padding:3px 8px; border-radius:7px; color:#68766e; background:#fff; font-size:6.5px; font-weight:700; }
.template-bubble { position:relative; padding:5px 5px 18px; border-radius:8px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.05); }
.template-bubble img { width:100%; height:112px; object-fit:cover; border-radius:6px; transition:.35s ease; }
.template-bubble b { display:block; margin:7px 5px 3px; color:#202a25; font-size:9px; line-height:1.25; }
.template-bubble p { margin:0 5px; color:#38463f; font-size:7.2px; line-height:1.4; }
.template-bubble small { display:block; margin:4px 5px 0; color:#839087; font-size:5.8px; }
.template-bubble time { position:absolute; right:7px; bottom:5px; color:#89958e; font-size:5.5px; }
.template-actions { display:grid; gap:1px; margin-top:1px; }
.template-actions button { padding:7px 5px; border:0; border-radius:0; color:#00a884; background:#fff; font:750 7px var(--font); cursor:pointer; }
.template-actions button:last-child { border-radius:0 0 8px 8px; }
.template-phone-foot { display:flex; justify-content:space-between; align-items:center; margin:6px; padding:5px 8px; border-radius:999px; color:#9aa49e; background:#fff; font-size:7px; }
.template-phone-foot span { width:20px; height:20px; display:grid; place-items:center; margin:-4px; border-radius:50%; color:#fff; background:#00a884; }
.template-result { display:flex; align-items:center; gap:10px; margin:0 22px 20px; padding:11px 13px; border:1px solid #dce8e1; border-radius:14px; color:#385247; background:rgba(255,255,255,.78); }
.template-result > span { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:#076b4f; background:#dff8e9; }
.template-result b,.template-result small { display:block; }
.template-result b { font-size:10px; }.template-result small { margin-top:2px; color:#839188; font-size:8.5px; }
.template-benefits { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.template-benefits > span { display:grid; grid-template-columns:36px 1fr; align-items:center; column-gap:10px; padding:14px; border:1px solid #e0eae4; border-radius:15px; background:rgba(255,255,255,.7); }
.template-benefits i { grid-row:1/3; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#087d3e; background:#e5f8ec; font-style:normal; font-weight:850; }
.template-benefits b { color:#294237; font-size:10.5px; }.template-benefits small { color:#829087; font-size:8.5px; }

@media (max-width:900px) {
  .template-story-head { grid-template-columns:1fr; gap:18px; }
  .template-price-compare { grid-template-columns:1fr; gap:0; }
  .compare-other { border-radius:22px 22px 0 0; }
  .compare-bujji { border-radius:0 0 22px 22px; }
  .compare-versus { height:54px; }
  .compare-versus::before { top:0; bottom:0; }
  .template-studio { grid-template-columns:1fr; }
  .template-picker { display:grid; grid-template-columns:repeat(3,1fr); border-right:0; border-bottom:1px solid #dfeae3; }
  .picker-label,.template-zero { grid-column:1/-1; }
  .template-choice { grid-template-columns:38px 1fr; }
  .template-choice > i { display:none; }
  .template-choice.active { transform:translateY(-3px); }
}
@media (max-width:680px) {
  .template-story { padding:22px 14px; border-radius:26px; }
  .template-story-head { padding-inline:6px; }
  .template-story-head h2 { font-size:42px; }
  .compare-card { padding:20px 16px; }
  .compare-winner { position:relative; top:auto; left:auto; width:max-content; margin:-20px auto 17px; transform:none; }
  .compare-message-rates,.compare-free-list { grid-template-columns:1fr; }
  .compare-message-rates > span,.compare-free-list > span { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 10px; padding:10px 12px; border-top:1px solid #e0e7e3; border-left:0; }
  .compare-message-rates > span:first-child,.compare-free-list > span:first-child { border-top:0; }
  .compare-message-rates strong { grid-row:1/3; grid-column:2; margin:0; }
  .compare-message-rates small,.compare-free-list small { grid-column:1; }
  .compare-free-list i { grid-row:1/3; grid-column:1; margin:0; }
  .compare-free-list b,.compare-free-list small { grid-column:2; }
  .compare-example { grid-template-columns:1fr auto; }
  .compare-source-note { align-items:flex-start; text-align:left; }
  .template-picker { grid-template-columns:1fr; }
  .picker-label,.template-zero { grid-column:auto; }
  .canvas-body { grid-template-columns:1fr; padding:18px; }
  .mini-editor { display:none; }
  .template-phone { margin:auto; }
  .template-benefits { grid-template-columns:1fr 1fr; }
}

/* Free-template live commerce comparison */
.template-experience-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); gap:22px; align-items:stretch; }
.live-commerce,.template-pricing-panel { position:relative; min-width:0; border:1px solid #dce9e1; border-radius:28px; background:rgba(255,255,255,.82); box-shadow:0 24px 70px rgba(25,70,47,.10); }
.live-commerce { overflow:hidden; display:flex; flex-direction:column; min-height:680px; background:radial-gradient(circle at 50% 42%,#e5ffe9 0%,#f7fbf7 48%,#fff 80%); }
.live-commerce-head { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid #deebe2; color:#294338; background:rgba(255,255,255,.78); font-size:10px; font-weight:850; }
.live-commerce-head > span { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.live-commerce-head > span i { width:7px; height:7px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.12); animation:pulse 1.8s infinite; }
.live-commerce-head strong { color:#168046; font-size:9px; }
.commerce-stage { position:relative; flex:1; min-height:530px; overflow:hidden; }
.commerce-orbit { position:absolute; width:430px; height:430px; left:50%; top:47%; border:2px dashed rgba(38,143,75,.22); border-radius:50%; transform:translate(-50%,-50%); }
.commerce-orbit::before { content:""; position:absolute; inset:45px; border-radius:50%; background:rgba(199,255,212,.38); filter:blur(4px); }
.commerce-ad,.commerce-chat { position:absolute; z-index:2; overflow:hidden; border:1px solid #e2e7e3; background:#fff; box-shadow:0 22px 48px rgba(32,66,47,.18); transition:.5s var(--ease-spring); }
.commerce-ad { left:5%; top:18%; width:42%; border-radius:18px; transform:rotate(-2deg); }
.commerce-ad-account { display:grid; grid-template-columns:29px 1fr auto; align-items:center; gap:8px; padding:10px; }
.commerce-ad-account img { width:29px; height:29px; border-radius:8px; }
.commerce-ad-account b,.commerce-ad-account small { display:block; }
.commerce-ad-account b { color:#26382f; font-size:9px; }.commerce-ad-account small { color:#8b9790; font-size:7px; }
.commerce-ad-account > i { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#fff; background:#2589ed; font-size:8px; font-style:normal; }
.commerce-product { width:100%; height:175px; object-fit:cover; background:#f4f5ef; }
.commerce-ad > button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:11px; border:0; color:#fff; background:#20b65b; font:800 10px var(--font); cursor:pointer; transition:.22s ease; }
.commerce-ad > button:hover { background:#0d8f44; }
.commerce-ad > button > svg.la-site-icon { flex:0 0 14px; width:14px; height:14px; }
.commerce-ad > p { padding:10px 12px 13px; color:#5e6d65; font-size:8px; }
.commerce-ad > p b { color:#1e402f; }
.commerce-link { position:absolute; z-index:4; left:45%; top:11%; width:110px; height:130px; transform:rotate(11deg); }
.commerce-link > span { position:absolute; right:0; top:0; display:grid; place-items:center; width:50px; height:50px; border-radius:15px; color:#fff; background:#25d366; box-shadow:0 15px 30px rgba(37,211,102,.28); transform:rotate(-11deg); }
.commerce-link > span > svg.la-site-icon { width:26px; height:26px; }
.commerce-link > i { position:absolute; left:0; right:28px; bottom:0; height:90px; border-top:2px dashed rgba(24,133,68,.35); border-radius:50%; transform:rotate(25deg); }
.commerce-chat { right:4%; top:10%; width:39%; height:390px; border-radius:24px; transform:rotate(1.5deg); }
.commerce-chat header { display:grid; grid-template-columns:auto 28px 1fr auto; align-items:center; gap:7px; padding:10px 9px; background:#f8f6f2; }
.commerce-chat header > span { font-size:18px; line-height:1; }.commerce-chat header > img { width:28px; height:28px; border-radius:50%; }
.commerce-chat header b,.commerce-chat header small { display:block; }.commerce-chat header b { color:#28352f; font-size:9px; }.commerce-chat header small { color:#20a45c; font-size:6.5px; }
.commerce-chat header > i { color:#738078; font-style:normal; }
.commerce-chat-body { height:344px; padding:10px 8px; background-color:#efeae2; background-image:radial-gradient(rgba(52,85,68,.10) .6px,transparent .6px); background-size:11px 11px; }
.chat-ad-preview { overflow:hidden; margin-bottom:9px; border-radius:8px; background:#fff; }
.chat-ad-preview img { width:100%; height:82px; object-fit:cover; }.chat-ad-preview span { display:block; padding:6px 7px; color:#5b6861; font-size:6.5px; }
.flow-message { max-width:90%; margin-top:7px; padding:8px; border-radius:8px; color:#29372f; font-size:7.5px; line-height:1.4; box-shadow:0 2px 5px rgba(0,0,0,.05); opacity:0; transform:translateY(10px) scale(.96); transition:.42s var(--ease-spring); }
.flow-message small { display:block; margin-top:4px; color:#7e8b84; font-size:5.5px; text-align:right; }
.flow-message.customer { margin-left:auto; background:#d9fdd3; }
.flow-message.bujji-reply { background:#fff; transition-delay:.12s; }
.flow-message button { display:block; width:100%; margin-top:7px; padding:6px; border:0; border-top:1px solid #edf0ee; color:#0b8651; background:transparent; font:800 6.5px var(--font); cursor:pointer; }
.flow-order { display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px; border-radius:9px; background:#d7f9df; opacity:0; transform:translateY(12px) scale(.94); transition:.42s .15s var(--ease-spring); }
.flow-order > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:#16a34a; font-size:11px; font-weight:900; }
.flow-order b,.flow-order small { display:block; }.flow-order b { color:#126238; font-size:8px; }.flow-order small { color:#5b866c; font-size:6px; }
.live-commerce[data-stage="1"] .flow-message.customer:not(.final-customer),.live-commerce[data-stage="2"] .flow-message.customer:not(.final-customer),.live-commerce[data-stage="3"] .flow-message.customer,.live-commerce[data-stage="2"] .flow-message.bujji-reply,.live-commerce[data-stage="3"] .flow-message.bujji-reply,.live-commerce[data-stage="3"] .flow-order { opacity:1; transform:none; }
.live-commerce[data-stage="1"] .commerce-ad,.live-commerce[data-stage="2"] .commerce-ad,.live-commerce[data-stage="3"] .commerce-ad { transform:rotate(-2deg) scale(.96); opacity:.82; }
.live-commerce[data-stage="2"] .commerce-chat,.live-commerce[data-stage="3"] .commerce-chat { transform:rotate(0) translateY(-5px); box-shadow:0 28px 60px rgba(19,103,57,.22); }
.commerce-metric { position:absolute; z-index:5; display:grid; place-items:center; width:70px; height:70px; border-radius:16px; color:#213329; background:#fff; box-shadow:0 16px 34px rgba(35,70,51,.17); transform:rotate(-6deg); }
.commerce-metric b,.commerce-metric small { display:block; }.commerce-metric b { font-size:18px; line-height:1; }.commerce-metric small { color:#718079; font-size:7px; font-weight:800; letter-spacing:.08em; }
.metric-roas { left:8%; top:2%; }.metric-read { right:5%; bottom:4%; transform:rotate(6deg); }
.commerce-success { position:absolute; z-index:6; left:50%; bottom:5%; display:flex; align-items:center; gap:10px; min-width:220px; padding:12px 17px; border:1px solid #dce9e1; border-radius:999px; background:#fff; box-shadow:0 18px 42px rgba(21,90,51,.19); opacity:0; transform:translate(-50%,25px) scale(.9); transition:.5s var(--ease-spring); }
.commerce-success > i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:#16a34a; font-style:normal; font-weight:900; }
.commerce-success b,.commerce-success small { display:block; }.commerce-success b { color:#173c27; font-size:13px; }.commerce-success small { color:#829087; font-size:8px; }
.live-commerce[data-stage="3"] .commerce-success { opacity:1; transform:translate(-50%,0) scale(1); }
.flow-controls { position:relative; z-index:8; display:grid; grid-template-columns:repeat(4,1fr); margin:0 18px 8px; overflow:hidden; border:1px solid #dce8e0; border-radius:15px; background:#fff; }
.flow-controls button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; padding:12px 7px; border:0; border-left:1px solid #e4ebe6; color:#75847c; background:transparent; font:750 8px var(--font); cursor:pointer; transition:.22s ease; }
.flow-controls button:first-child { border-left:0; }.flow-controls button span { display:grid; place-items:center; width:19px; height:19px; border-radius:7px; background:#edf3ef; font-size:8px; }
.flow-controls button.active { color:#087d3e; background:#effbf3; }.flow-controls button.active span { color:#fff; background:#16a34a; }
.flow-controls > i { position:absolute; left:0; bottom:0; width:var(--flow-progress); height:3px; border-radius:99px; background:#25d366; transition:.45s var(--ease-spring); }
.flow-helper { padding:0 18px 14px; color:#8a9690; font-size:8px; text-align:center; }
.template-pricing-panel { overflow:hidden; padding:28px; background:linear-gradient(145deg,#103c29 0%,#08291c 100%); box-shadow:0 28px 80px rgba(5,49,29,.25); }
.template-pricing-panel::before { content:""; position:absolute; width:260px; height:260px; right:-105px; top:-110px; border-radius:50%; background:rgba(80,232,132,.13); }
.template-world-badge { position:relative; display:inline-flex; align-items:center; gap:7px; margin-bottom:19px; padding:8px 11px; border:1px solid rgba(115,242,158,.3); border-radius:999px; color:#a8f4c0; background:rgba(70,221,122,.11); font-size:9px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.template-world-badge > svg.la-site-icon { flex:0 0 14px; width:14px; height:14px; }
.template-side-kicker { position:relative; display:block; margin-bottom:6px; color:#62dd8c; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.template-pricing-panel h2 { position:relative; color:#fff; font-size:clamp(35px,4vw,50px); line-height:.98; letter-spacing:-.055em; }
.template-pricing-panel h2 span { color:#73ed9c; }
.template-pricing-panel > p { position:relative; margin:15px 0 20px; color:#a7c1b3; font-size:12px; line-height:1.65; }
.fee-hero { position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; padding:17px; border:1px solid rgba(110,239,153,.28); border-radius:18px; background:linear-gradient(135deg,rgba(47,199,100,.18),rgba(255,255,255,.04)); }
.fee-hero > span { grid-column:1/-1; color:#8cbea1; font-size:7.5px; font-weight:850; letter-spacing:.1em; }
.fee-hero strong { color:#6ff09a; font-size:56px; font-weight:900; line-height:1; letter-spacing:-.06em; }.fee-hero b { padding-bottom:6px; color:#fff; font-size:12px; }.fee-hero small { grid-column:1/-1; margin-top:5px; color:#91ad9e; font-size:7.5px; }
.side-price-compare { position:relative; overflow:hidden; margin-top:14px; border:1px solid rgba(255,255,255,.11); border-radius:17px; background:rgba(255,255,255,.05); }
.side-price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; }.side-price-row span b,.side-price-row span small { display:block; }.side-price-row span b { color:#fff; font-size:10px; }.side-price-row span small { color:#8fa99b; font-size:7px; }
.side-price-row > strong { color:#fff; font-size:20px; }.side-price-row > strong small { margin-left:3px; color:#91a69a; font-size:7px; }.side-price-row.bujji { background:rgba(50,219,107,.13); }.side-price-row.bujji > strong { color:#6ff09a; font-size:26px; }
.side-rate-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }.side-rate-grid span { padding:10px; border-left:1px solid rgba(255,255,255,.08); }.side-rate-grid span:first-child { border-left:0; }.side-rate-grid small,.side-rate-grid b { display:block; }.side-rate-grid small { color:#86a295; font-size:6.5px; }.side-rate-grid b { margin-top:3px; color:#fff; font-size:11px; }
.side-savings { position:relative; display:grid; grid-template-columns:1fr 28px 1fr; align-items:stretch; margin-top:14px; }.side-savings > span { display:flex; flex-direction:column; justify-content:center; padding:11px; border-radius:13px; background:rgba(255,255,255,.06); }.side-savings > i { align-self:center; color:#7f9b8c; font-size:7px; font-style:normal; font-weight:900; text-align:center; }.side-savings small,.side-savings b { display:block; }.side-savings small { color:#89a294; font-size:6px; }.side-savings b { color:#c5d6cd; font-size:7px; }.side-savings strong { margin-top:4px; color:#fff; font-size:18px; }.side-savings .winner { background:rgba(39,210,97,.16); }.side-savings .winner strong { color:#6ff09a; }
.template-free-actions { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }.template-free-actions span { padding:8px; border-radius:9px; color:#9fe8b6; background:rgba(255,255,255,.06); font-size:8px; font-weight:800; text-align:center; }
.template-pricing-panel .template-price-note { margin:12px 0 0; color:#718f7f; font-size:6.8px; line-height:1.45; }

@media (max-width:980px) {
  .template-experience-grid { grid-template-columns:1fr; }
  .template-pricing-panel { order:-1; }
  .live-commerce { min-height:660px; }
}
@media (max-width:680px) {
  .template-experience-grid { gap:14px; }
  .template-pricing-panel { padding:22px 17px; border-radius:22px; }
  .template-pricing-panel h2 { font-size:42px; }
  .live-commerce { min-height:640px; border-radius:22px; }
  .live-commerce-head { padding:14px 12px; }.live-commerce-head strong { max-width:110px; text-align:right; }
  .commerce-stage { min-height:505px; }
  .commerce-orbit { width:310px; height:310px; }
  .commerce-ad { left:2%; top:17%; width:49%; }.commerce-chat { right:2%; top:12%; width:48%; height:355px; }
  .commerce-product { height:125px; }.commerce-link { left:39%; top:5%; transform:scale(.8) rotate(11deg); }
  .commerce-chat-body { height:310px; }.chat-ad-preview img { height:65px; }
  .commerce-metric { width:56px; height:56px; border-radius:13px; }.commerce-metric b { font-size:14px; }.metric-roas { left:4%; top:2%; }.metric-read { right:3%; bottom:2%; }
  .commerce-success { bottom:3%; min-width:205px; padding:10px 13px; }
  .flow-controls { grid-template-columns:1fr 1fr; margin-inline:10px; }.flow-controls button:nth-child(3) { border-left:0; border-top:1px solid #e4ebe6; }.flow-controls button:nth-child(4) { border-top:1px solid #e4ebe6; }
  .flow-helper { padding-bottom:11px; }
  .side-rate-grid span { padding:9px 7px; }.side-savings { grid-template-columns:1fr 24px 1fr; }
}

/* Compact reference-led composition: ad + person + live WhatsApp result */
#templates.pad { padding:64px 0; }
#templates .container { max-width:1500px; }
#templates .template-story { padding:clamp(20px,2.2vw,32px); }
.template-experience-grid { grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr); gap:18px; }
.live-commerce { min-height:540px; }
.live-commerce-head { padding:14px 18px; }
.commerce-stage { min-height:420px; }
.commerce-orbit { width:380px; height:380px; top:50%; animation:commerceOrbit 24s linear infinite; }
.commerce-person { position:absolute; z-index:6; left:50%; bottom:-2px; width:auto; height:94%; max-width:45%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 22px 25px rgba(24,67,42,.18)); transform:translateX(-50%); transform-origin:center bottom; animation:commercePerson 5s ease-in-out infinite; pointer-events:none; }
.commerce-ad { z-index:3; left:2.5%; top:25%; width:36%; border-radius:15px; }
.commerce-product { height:132px; }
.commerce-ad-account { padding:8px; }.commerce-ad > button { padding:9px; }.commerce-ad > p { padding:8px 10px 10px; }
.commerce-chat { z-index:4; right:2.5%; top:12%; width:35%; height:315px; border-radius:20px; }
.commerce-chat header { padding:8px; }.commerce-chat-body { height:273px; padding:8px 7px; }.chat-ad-preview img { height:58px; }
.flow-message { margin-top:5px; padding:6px 7px; font-size:6.8px; }.flow-message button { margin-top:4px; padding:5px; }.flow-order { margin-top:5px; padding:6px; }
.commerce-link { left:50%; top:4%; width:88px; height:86px; transform:translateX(-50%) rotate(7deg); }
.commerce-link > span { width:46px; height:46px; animation:commerceWhatsApp 2.8s ease-in-out infinite; }.commerce-link > i { left:-18px; right:-18px; height:62px; }
.commerce-metric { width:58px; height:58px; border-radius:13px; }.commerce-metric b { font-size:15px; }.metric-roas { left:5%; top:3%; }.metric-read { right:4%; bottom:5%; }
.commerce-success { bottom:3%; min-width:194px; padding:9px 14px; }.commerce-success > i { width:29px; height:29px; }.commerce-success b { font-size:11px; }
.flow-controls { margin:0 14px 6px; }.flow-controls button { padding:9px 6px; }.flow-helper { padding:0 14px 10px; }
.template-pricing-panel { padding:20px; border-radius:26px; }
.template-world-badge { margin-bottom:11px; padding:7px 10px; font-size:7.5px; }
.template-side-kicker { margin-bottom:3px; font-size:8.5px; }
.template-pricing-panel h2 { font-size:clamp(31px,2.8vw,39px); line-height:.96; }
.template-pricing-panel > p { margin:9px 0 11px; font-size:10px; line-height:1.5; }
.fee-hero { padding:10px 13px; border-radius:14px; }.fee-hero strong { font-size:43px; }.fee-hero b { padding-bottom:4px; font-size:10px; }.fee-hero small { margin-top:2px; }
.side-price-compare { margin-top:9px; border-radius:14px; }.side-price-row { padding:8px 11px; }.side-price-row > strong { font-size:17px; }.side-price-row.bujji > strong { font-size:22px; }
.side-rate-grid span { padding:7px 8px; }.side-rate-grid b { font-size:9.5px; }
.side-savings { margin-top:9px; }.side-savings > span { padding:8px; }.side-savings strong { margin-top:2px; font-size:15px; }
.template-free-actions { margin-top:8px; gap:5px; }.template-free-actions span { padding:6px; font-size:7px; }
.template-pricing-panel .template-price-note { margin-top:7px; font-size:6px; }
.live-commerce[data-stage="1"] .commerce-ad,.live-commerce[data-stage="2"] .commerce-ad,.live-commerce[data-stage="3"] .commerce-ad { transform:rotate(-4deg) translateX(-8px) scale(.96); opacity:.82; }
.live-commerce[data-stage="2"] .commerce-chat,.live-commerce[data-stage="3"] .commerce-chat { transform:rotate(1deg) translate(7px,-5px) scale(1.02); }
.live-commerce[data-stage="3"] .commerce-person { filter:drop-shadow(0 25px 28px rgba(22,139,72,.24)); }

@keyframes commerceOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes commercePerson { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-7px); } }
@keyframes commerceWhatsApp { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(4deg) translateY(-7px) scale(1.06); } }

@media (max-width:980px) {
  #templates .container { max-width:760px; }
  .template-experience-grid { grid-template-columns:1fr; }
  .live-commerce { min-height:560px; }
  .commerce-stage { min-height:438px; }
  .template-pricing-panel { order:-1; }
}
@media (max-width:680px) {
  #templates.pad { padding:46px 0; }
  #templates .template-story { padding:14px; }
  .template-pricing-panel { padding:19px 16px; }
  .template-pricing-panel h2 { font-size:37px; }
  .live-commerce { min-height:560px; }
  .commerce-stage { min-height:430px; }
  .commerce-orbit { width:300px; height:300px; }
  .commerce-person { height:74%; max-width:55%; bottom:0; }
  .commerce-ad { left:1%; top:25%; width:45%; }.commerce-chat { right:1%; top:13%; width:44%; height:300px; }
  .commerce-product { height:105px; }.commerce-chat-body { height:259px; }.chat-ad-preview img { height:48px; }
  .commerce-link { top:6%; transform:translateX(-50%) scale(.82) rotate(7deg); }
  .commerce-metric { width:50px; height:50px; }.metric-roas { left:2%; }.metric-read { right:1%; }
  .commerce-success { min-width:180px; bottom:2%; }
}
@media (prefers-reduced-motion:reduce) {
  .commerce-orbit,.commerce-person,.commerce-link > span { animation:none!important; }
}

/* Cursor-reveal desktop navigation */
@media (min-width:861px) and (hover:hover) and (pointer:fine) {
  .nav.cursor-nav { transition:transform .34s var(--ease-spring),opacity .24s ease,background .35s ease,box-shadow .35s ease; }
  .nav.cursor-nav:not(.visible) { transform:translate(-50%,-145%); opacity:0; pointer-events:none; }
  .nav.cursor-nav.visible { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
}

/* Wider live journey + compact warm pricing rail */
.template-experience-grid { grid-template-columns:minmax(0,1fr) clamp(250px,19vw,260px); align-items:start; }
.live-commerce { min-height:690px; }
.commerce-stage { min-height:565px; }
.commerce-person { bottom:-30px; height:92%; }
.commerce-ad { top:24%; width:35%; }.commerce-product { height:158px; }
.commerce-chat { right:3.5%; top:8%; width:29%; height:410px; border-radius:24px; }.commerce-chat-body { height:368px; }.chat-ad-preview img { height:88px; }
.commerce-link { top:3%; }
.metric-read { left:3%; right:auto; bottom:3%; }
.commerce-success { left:50%; bottom:3%; }

.commerce-event-card { position:absolute; z-index:7; right:2%; bottom:3%; width:230px; overflow:hidden; padding:7px; border:1px solid rgba(28,141,75,.18); border-radius:16px; background:rgba(255,255,255,.91); box-shadow:0 20px 48px rgba(20,74,43,.17); backdrop-filter:blur(16px); animation:eventCardFloat 5.5s ease-in-out infinite; }
.commerce-event-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 5px 8px; color:#446054; font-size:8px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.commerce-event-card header span { display:flex; align-items:center; gap:6px; }.commerce-event-card header i { width:6px; height:6px; border-radius:50%; background:#25d366; box-shadow:0 0 0 4px rgba(37,211,102,.13); animation:pulse 1.5s infinite; }
.commerce-event-card header time { color:#0c8b46; font-weight:800; letter-spacing:0; }
.commerce-event-row { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:7px; padding:6px; border-radius:9px; color:#7d8d85; opacity:.52; transition:.35s var(--ease-spring); }
.commerce-event-row > i { display:grid; place-items:center; width:22px; height:22px; border-radius:8px; color:#5f7569; background:#edf3ef; font-size:7px; font-style:normal; font-weight:900; }
.commerce-event-row b,.commerce-event-row small { display:block; }.commerce-event-row b { color:#40564b; font-size:7.5px; }.commerce-event-row small { margin-top:1px; color:#96a29c; font-size:5.8px; }.commerce-event-row em { color:#91a098; font-size:5.5px; font-style:normal; }
.commerce-event-row.complete { opacity:.78; }.commerce-event-row.complete > i { color:#fff; background:#59c77e; }
.commerce-event-row.active { color:#087d3e; background:#e8faee; box-shadow:inset 0 0 0 1px rgba(29,168,83,.12); opacity:1; transform:translateX(-3px); }
.commerce-event-row.active > i { color:#fff; background:#10a44b; box-shadow:0 7px 16px rgba(16,164,75,.22); }.commerce-event-row.active b { color:#086b39; }
.live-commerce[data-stage="3"] .commerce-event-card { border-color:rgba(16,164,75,.36); box-shadow:0 24px 58px rgba(16,120,58,.22); }
@keyframes eventCardFloat { 0%,100% { transform:translateY(0) rotate(.4deg); } 50% { transform:translateY(-6px) rotate(-.4deg); } }

/* Animated live-performance indicators */
.commerce-metric { display:block; width:auto; height:auto; border:1px solid rgba(24,133,68,.14); color:#163c29; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
.metric-roas { left:3%; top:3%; width:126px; padding:10px 11px 9px; border-radius:18px; transform:rotate(-2deg); animation:metricRoasFloat 4.6s ease-in-out infinite; }
.metric-kpi-top { display:flex; align-items:center; gap:5px; }.metric-kpi-top > i { display:grid; place-items:center; width:18px; height:18px; border-radius:7px; color:#fff; background:#16a34a; font-size:10px; font-style:normal; font-weight:900; }.metric-kpi-top > small { flex:1; color:#647a6e; font-size:7.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }.metric-kpi-top > em { padding:3px 5px; border-radius:999px; color:#087d3e; background:#dcf8e6; font-size:6px; font-style:normal; font-weight:900; }
.metric-roas > b { display:block; margin:5px 0 4px; color:#123d28; font-size:29px; line-height:1; letter-spacing:-.06em; }.metric-roas > b span { color:#19ad54; font-size:16px; }
.metric-spark { display:flex; align-items:end; gap:3px; height:17px; padding:2px 3px; border-radius:6px; background:#eff8f2; }.metric-spark i { flex:1; height:35%; border-radius:3px 3px 1px 1px; background:linear-gradient(#54d981,#13a54e); transform-origin:center bottom; animation:metricBar 1.8s ease-in-out infinite; }.metric-spark i:nth-child(2){height:48%;animation-delay:.12s}.metric-spark i:nth-child(3){height:42%;animation-delay:.24s}.metric-spark i:nth-child(4){height:68%;animation-delay:.36s}.metric-spark i:nth-child(5){height:78%;animation-delay:.48s}.metric-spark i:nth-child(6){height:100%;animation-delay:.6s}
.metric-read { left:3%; right:auto; bottom:3%; display:flex; align-items:center; gap:9px; width:148px; padding:8px 10px; border-radius:18px; transform:rotate(1.5deg); animation:metricReadFloat 4.9s .4s ease-in-out infinite; }
.metric-ring { position:relative; flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#18b957 0 92%,#dfeee4 92% 100%); box-shadow:0 7px 18px rgba(24,185,87,.16); animation:metricRingPulse 2.4s ease-in-out infinite; }.metric-ring::before { content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }.metric-ring > i { position:absolute; inset:-3px; border:1px solid rgba(24,185,87,.18); border-radius:50%; animation:metricRadar 2.4s ease-out infinite; }.metric-ring > b { position:relative; color:#0b6636; font-size:11px; letter-spacing:-.03em; }
.metric-read-copy { min-width:0; }.metric-read-copy > b,.metric-read-copy > small { display:block; }.metric-read-copy > b { color:#244b38; font-size:8px; white-space:nowrap; }.metric-read-copy > small { display:flex; align-items:center; gap:5px; margin-top:4px; color:#71877a; font-size:6px; white-space:nowrap; }.metric-read-copy > small i { width:6px; height:6px; border-radius:50%; background:#24c469; box-shadow:0 0 0 4px rgba(36,196,105,.11); animation:pulse 1.4s infinite; }
.live-commerce[data-stage="0"] .metric-roas,.live-commerce[data-stage="3"] .metric-roas { border-color:rgba(16,164,75,.38); box-shadow:0 20px 44px rgba(16,120,58,.2); }.live-commerce[data-stage="1"] .metric-read,.live-commerce[data-stage="2"] .metric-read { border-color:rgba(16,164,75,.38); box-shadow:0 20px 44px rgba(16,120,58,.2); }
@keyframes metricRoasFloat { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-7px); } }
@keyframes metricReadFloat { 0%,100% { transform:rotate(1.5deg) translateY(0); } 50% { transform:rotate(-1deg) translateY(-6px); } }
@keyframes metricBar { 0%,100% { transform:scaleY(.58); opacity:.72; } 50% { transform:scaleY(1); opacity:1; } }
@keyframes metricRingPulse { 50% { box-shadow:0 8px 24px rgba(24,185,87,.28); transform:scale(1.035); } }
@keyframes metricRadar { 0% { opacity:.65; transform:scale(.82); } 100% { opacity:0; transform:scale(1.28); } }

.template-pricing-panel { align-self:start; width:100%; color:#183d2b; border-color:#cae4d2; background:linear-gradient(155deg,#fffdf5 0%,#effbea 58%,#e2f6e8 100%); box-shadow:0 24px 65px rgba(29,101,59,.14); }
.template-pricing-panel::before { background:rgba(52,211,105,.13); }
.template-world-badge { max-width:100%; color:#fff; border-color:rgba(8,125,62,.08); background:linear-gradient(135deg,#12a94f,#47cd78); box-shadow:0 9px 24px rgba(18,169,79,.2); white-space:nowrap; }
.template-side-kicker { color:#148d4a; }
.template-pricing-panel h2 { color:#173c2a; font-size:27px; line-height:.97; }.template-pricing-panel h2 span { color:#0da04b; }
.template-pricing-panel > p { color:#5f7669; }
.fee-hero { border-color:#146a40; background:linear-gradient(135deg,#0c5130,#157244); box-shadow:0 14px 30px rgba(12,81,48,.15); }.fee-hero > span,.fee-hero small { color:#9fd3b4; }.fee-hero strong { color:#75f19d; }.fee-hero b { color:#fff; }
.side-price-compare { border-color:#cee2d4; background:rgba(255,255,255,.72); box-shadow:0 10px 25px rgba(35,92,58,.07); }
.side-price-row span b { color:#234936; }.side-price-row span small,.side-price-row > strong small { color:#789083; }.side-price-row > strong { color:#203c2e; }
.side-rate-grid { border-color:#dce9e0; }.side-rate-grid span { border-color:#dce9e0; }.side-rate-grid small { color:#809488; }.side-rate-grid b { color:#244a37; }
.side-price-row.bujji { background:#d9f5e2; }.side-price-row.bujji > strong { color:#079644; }
.side-savings > span { background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px #d9e9de; }.side-savings > i { color:#759083; }.side-savings small { color:#819388; }.side-savings b { color:#436251; }.side-savings strong { color:#203e2e; }.side-savings .winner { background:#c9f1d6; box-shadow:inset 0 0 0 1px #aee6bf; }.side-savings .winner strong { color:#078e40; }
.template-free-actions span { color:#157d43; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px #d8e8dd; }
.template-pricing-panel .template-price-note { color:#71897b; }

@media (max-width:980px) {
  .template-experience-grid { grid-template-columns:1fr; }
  .template-pricing-panel { order:-1; }
  .template-pricing-panel h2 { font-size:37px; }
  .live-commerce { min-height:640px; }
  .commerce-stage { min-height:515px; }
}
@media (max-width:680px) {
  .live-commerce { min-height:610px; }
  .commerce-stage { min-height:480px; }
  .commerce-person { bottom:35px; height:68%; }
  .commerce-event-card { left:8px; right:8px; bottom:4px; width:auto; padding:5px; }
  .commerce-event-row { display:none; }.commerce-event-row.active { display:grid; }
  .commerce-event-card header { padding-bottom:5px; }
  .metric-read { left:2%; bottom:18%; }
  .commerce-success { bottom:18%; }
  .metric-roas { width:104px; padding:8px; }.metric-roas > b { font-size:24px; }.metric-spark { height:14px; }
  .metric-read { width:130px; padding:7px; }.metric-ring { flex-basis:42px; width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  .commerce-event-card,.commerce-event-card header i,.metric-roas,.metric-read,.metric-spark i,.metric-ring,.metric-ring > i,.metric-read-copy > small i { animation:none!important; }
}

/* Reference-proportioned portrait journey + visible per-message cost story */
@media (min-width:981px) {
  .template-experience-grid { align-items:stretch; }
  .live-commerce,.template-pricing-panel { height:690px; min-height:690px; }
  .template-pricing-panel { align-self:stretch; display:flex; flex-direction:column; }
  .commerce-person { left:57.5%; bottom:-132px; height:108%; max-width:50%; object-position:center bottom; }
  .commerce-ad { left:4%; top:19%; width:27%; border-radius:18px; transform:rotate(-2.5deg); }
  .commerce-product { height:226px; }
  .commerce-chat { right:4%; top:9%; width:25.5%; height:455px; border-radius:24px; }
  .commerce-chat-body { height:413px; padding:9px 8px; }
  .chat-ad-preview img { height:112px; }
  .commerce-event-card { right:2.2%; bottom:2.5%; width:216px; }
  .commerce-link { left:57%; top:2%; }
}

.message-cost-story { position:relative; margin-top:9px; overflow:hidden; border:1px solid #bddfca; border-radius:15px; background:rgba(255,255,255,.78); box-shadow:0 10px 25px rgba(35,92,58,.07); }
.message-cost-head { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:8px 10px; color:#496456; background:#f5fbf6; font-size:7.5px; font-weight:800; text-transform:none; letter-spacing:.025em; }
.message-cost-head span { display:flex; align-items:center; gap:5px; }.message-cost-head span i { width:6px; height:6px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.11); animation:costAlert 1.7s ease-in-out infinite; }.message-cost-head b { color:#a56705; font-size:6.2px; }
.message-cost-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1.08fr; align-items:center; gap:4px; padding:8px 9px; }
.message-cost-equation span,.message-cost-equation strong { min-width:0; }.message-cost-equation small,.message-cost-equation b { display:block; }.message-cost-equation small { color:#84948b; font-size:5.3px; line-height:1.2; }.message-cost-equation b { margin-top:2px; color:#294535; font-size:9px; }.message-cost-equation > i { color:#9aac9f; font-size:8px; font-style:normal; font-weight:900; }.message-cost-equation strong { color:#9a5d00; font-size:13px; line-height:1; text-align:right; }.message-cost-equation strong small { margin-bottom:3px; color:#9a7e55; font-size:5px; font-weight:700; }
.message-cost-pulses { display:flex; gap:3px; height:12px; margin:0 9px; padding:3px 5px; border-radius:99px; background:#fff3dc; }.message-cost-pulses i { flex:1; border-radius:99px; background:linear-gradient(90deg,#ffd787,#f3a31b); transform-origin:left; animation:costPulse 1.9s ease-in-out infinite; }.message-cost-pulses i:nth-child(2){animation-delay:.1s}.message-cost-pulses i:nth-child(3){animation-delay:.2s}.message-cost-pulses i:nth-child(4){animation-delay:.3s}.message-cost-pulses i:nth-child(5){animation-delay:.4s}.message-cost-pulses i:nth-child(6){animation-delay:.5s}.message-cost-pulses i:nth-child(7){animation-delay:.6s}.message-cost-pulses i:nth-child(8){animation-delay:.7s}.message-cost-pulses i:nth-child(9){animation-delay:.8s}.message-cost-pulses i:nth-child(10){animation-delay:.9s}
.message-cost-equation.bujji { grid-template-columns:1fr auto 1fr; margin-top:6px; background:#d3f5dd; }.message-cost-equation.bujji b { color:#08753c; }.message-cost-equation.bujji strong { color:#079644; font-size:17px; }.message-cost-equation.bujji strong small { color:#4f8867; }
@keyframes costPulse { 0%,100% { opacity:.35; transform:scaleX(.35); } 50% { opacity:1; transform:scaleX(1); } }
@keyframes costAlert { 50% { box-shadow:0 0 0 7px rgba(245,158,11,0); transform:scale(1.14); } }

@media (max-width:980px) {
  .template-pricing-panel { height:auto; min-height:0; align-self:auto; }
}
@media (max-width:680px) {
  .commerce-person { left:53%; bottom:30px; height:62%; max-width:62%; }
  .commerce-ad { top:24%; width:40%; }.commerce-product { height:135px; }
  .commerce-chat { top:14%; width:38%; height:340px; }.commerce-chat-body { height:299px; }.chat-ad-preview img { height:70px; }
}
@media (prefers-reduced-motion:reduce) {
  .message-cost-head span i,.message-cost-pulses i { animation:none!important; }
}

/* Animated dotted route: template CTA -> Bujji Store chat. */
.commerce-orbit { z-index:1; left:29%; top:18%; width:48%; height:300px; border:0; border-radius:0; transform:none; animation:none!important; pointer-events:none; }
.commerce-orbit::before,.commerce-orbit::after { display:none; }
.commerce-orbit svg { display:block; width:100%; height:100%; overflow:visible; }
.commerce-orbit path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.commerce-route-shadow { stroke:rgba(255,255,255,.72); stroke-width:6; }
.commerce-route-dash { stroke:#446052; stroke-width:2; stroke-dasharray:8 12; marker-end:url(#templateRouteArrow); animation:templateRouteDash 2.4s linear infinite; }
.commerce-route-dash + * { display:none; }
#templateRouteArrow path { fill:#34bb65; stroke:#1aa24f; stroke-width:.7; filter:drop-shadow(0 4px 5px rgba(25,162,79,.28)); }
.live-commerce[data-stage="1"] .commerce-route-dash,.live-commerce[data-stage="2"] .commerce-route-dash { stroke:#168b4a; stroke-width:2.4; animation-duration:1.15s; }
.commerce-link { display:none; }
@keyframes templateRouteDash { to { stroke-dashoffset:-40; } }

.commerce-ad > button { position:relative; }
.whatsapp-click-pointer { position:absolute; z-index:3; right:17%; top:7px; width:15px; height:20px; background:#102c1e; clip-path:polygon(0 0,100% 68%,58% 70%,78% 100%,63% 100%,44% 72%,16% 100%); filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 5px 5px rgba(0,0,0,.2)); transform-origin:40% 45%; animation:whatsappPointerClick 3.2s ease-in-out infinite; pointer-events:none; }
.whatsapp-click-pointer > i { position:absolute; left:-8px; top:-8px; width:28px; height:28px; border:2px solid rgba(255,255,255,.86); border-radius:50%; opacity:0; animation:whatsappClickRipple 3.2s ease-out infinite; }
@keyframes whatsappPointerClick { 0%,35% { opacity:0; transform:translate(18px,15px) scale(.9); } 48% { opacity:1; transform:translate(0,0) scale(1); } 56% { opacity:1; transform:translate(0,0) scale(.78); } 64%,82% { opacity:1; transform:translate(0,0) scale(1); } 100% { opacity:0; transform:translate(-5px,-4px) scale(1); } }
@keyframes whatsappClickRipple { 0%,54% { opacity:0; transform:scale(.2); } 57% { opacity:.9; transform:scale(.35); } 76%,100% { opacity:0; transform:scale(1.2); } }

.commerce-order-cta { position:absolute; z-index:9; left:57.5%; bottom:7%; display:flex; align-items:center; gap:8px; padding:10px 15px 10px 10px; border:1px solid #cce7d5; border-radius:999px; color:#116c3a; background:rgba(255,255,255,.96); box-shadow:0 18px 42px rgba(18,113,57,.2); font:850 10px var(--font); opacity:0; pointer-events:none; transform:translate(-50%,18px) scale(.88); transition:.45s var(--ease-spring); cursor:pointer; }
.commerce-order-cta > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:#16a34a; }.commerce-order-cta > i { color:#1aa252; font-size:13px; font-style:normal; transition:transform .2s ease; }.commerce-order-cta:hover > i { transform:translateX(3px); }
.live-commerce[data-stage="2"] .commerce-order-cta { opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); animation:orderCtaPulse 1.8s ease-in-out infinite; }
.commerce-success { left:57.5%; bottom:7%; }
@keyframes orderCtaPulse { 50% { box-shadow:0 20px 48px rgba(18,169,79,.32),0 0 0 7px rgba(37,211,102,.08); } }

@media (max-width:680px) {
  .commerce-orbit { left:25%; top:31%; width:53%; height:180px; }
  .commerce-order-cta { left:53%; bottom:19%; padding:8px 12px 8px 8px; }.commerce-order-cta > span { width:23px; height:23px; }
  .commerce-success { left:53%; bottom:18%; }
}
@media (prefers-reduced-motion:reduce) {
  .commerce-route-dash,.whatsapp-click-pointer,.whatsapp-click-pointer > i,.commerce-order-cta { animation:none!important; }
}

/* Free Templates live-demo: reference-led commerce journey composition. */
@media (min-width:981px) {
  .live-commerce { height:700px; min-height:700px; border-radius:30px; background:radial-gradient(ellipse at 54% 47%,#c8ffd5 0%,#effff2 30%,#fbfdfb 66%,#fff 100%); }
  .template-pricing-panel { height:700px; min-height:700px; }
  .live-commerce-head { min-height:56px; padding:17px 23px; font-size:11px; box-shadow:0 8px 24px rgba(26,73,48,.05); }
  .live-commerce-head strong { display:flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid #d9eee0; border-radius:999px; color:transparent; background:#fff; font-size:0; box-shadow:0 7px 20px rgba(20,95,52,.06); }
  .live-commerce-head strong::before { content:"✓"; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#fff; background:#16b856; font-size:9px; }
  .live-commerce-head strong::after { content:"Order placed · ₹1,299"; color:#087f40; font-size:10px; }
  .commerce-stage { min-height:554px; }
  .commerce-stage::before { content:""; position:absolute; z-index:0; left:50%; top:14%; width:430px; height:430px; border-radius:50%; background:radial-gradient(circle at 50% 45%,rgba(52,220,110,.72),rgba(120,248,165,.48) 45%,rgba(191,255,211,.28) 60%,rgba(226,255,235,0) 73%); transform:translateX(-50%); }

  .commerce-orbit { left:31%; top:5%; width:45%; height:286px; }
  .commerce-route-shadow { stroke-width:8; }
  .commerce-route-dash { stroke:#10a94c; stroke-width:2.6; stroke-dasharray:10 12; }

  .commerce-person { z-index:6; left:50.5%; bottom:-66px; width:auto; height:94%; max-width:43%; filter:drop-shadow(0 26px 28px rgba(21,111,61,.20)); }

  .commerce-ad { z-index:4; left:5%; top:14%; width:29%; border-radius:24px; transform:rotate(-4deg); box-shadow:0 28px 55px rgba(31,79,49,.18); }
  .commerce-ad-account { grid-template-columns:36px 1fr auto; gap:9px; padding:15px 15px 9px; }
  .commerce-ad-account img { width:36px; height:36px; border-radius:50%; }
  .commerce-ad-account b { color:#153a2a; font-size:11px; }.commerce-ad-account small { margin-top:2px; font-size:8px; }.commerce-ad-account > i { width:17px; height:17px; font-size:9px; }
  .commerce-ad-copy { padding:4px 15px 12px; }.commerce-ad-copy b { display:block; color:#073d2a; font-size:clamp(17px,1.75vw,27px); line-height:1.02; letter-spacing:-.06em; }.commerce-ad-copy span { display:block; margin-top:8px; color:#687c72; font-size:9px; }
  .commerce-product { height:162px; object-position:center; }
  .commerce-ad > button { min-height:45px; padding:12px; font-size:12px; background:linear-gradient(90deg,#0cb454,#16c965); }.commerce-ad > p { padding:12px 15px 16px; font-size:9px; }
  .whatsapp-click-pointer { display:none; }

  .commerce-chat { z-index:4; right:3%; top:7%; width:27%; height:430px; border-radius:25px; transform:rotate(1.25deg); }
  .commerce-chat header { grid-template-columns:auto 34px 1fr auto; gap:8px; padding:12px 11px; }.commerce-chat header > img { width:34px; height:34px; }.commerce-chat header b { font-size:11px; }.commerce-chat header small { font-size:7.5px; }
  .commerce-chat-body { height:381px; padding:10px 9px; }.chat-ad-preview { margin-bottom:9px; border-radius:11px; }.chat-ad-preview span { padding:8px 9px; font-size:8px; }
  .flow-message { margin-top:9px; padding:10px; border-radius:10px; font-size:8.5px; }.flow-order { padding:10px; }.flow-order b { font-size:9px; }

  .commerce-metric { z-index:5; transform:none; }
  .metric-roas { left:3%; top:3%; width:124px; min-height:132px; padding:12px; border-radius:22px; transform:rotate(-4deg); }
  .metric-roas > b { margin:12px 0 9px; font-size:37px; }.metric-roas > b span { font-size:19px; }.metric-spark { height:26px; padding:4px 5px; border-radius:9px; }
  .metric-read { left:3%; bottom:4%; width:145px; min-height:78px; padding:10px; border-radius:22px; transform:rotate(-2deg); }.metric-ring { flex-basis:51px; width:51px; height:51px; }.metric-ring > b { font-size:13px; }

  .commerce-event-card { z-index:6; right:2.5%; bottom:4.5%; width:28%; max-width:255px; padding:10px; border-radius:22px; background:rgba(255,255,255,.95); }
  .commerce-event-card header { padding:7px 7px 10px; font-size:8px; }.commerce-event-row { grid-template-columns:26px 1fr auto; gap:8px; padding:7px; }.commerce-event-row > i { width:26px; height:26px; border-radius:9px; }.commerce-event-row b { font-size:8px; }
  .commerce-order-cta,.commerce-success { left:55%; bottom:7%; }
  .commerce-order-cta { z-index:8; padding:12px 19px 12px 12px; font-size:11px; }.commerce-order-cta > span { width:31px; height:31px; }

  .flow-controls { z-index:9; margin:0 20px 7px; min-height:66px; border-radius:20px; box-shadow:0 8px 23px rgba(16,83,46,.06); }
  .flow-controls button { justify-content:flex-start; gap:9px; padding:12px; font-size:9px; }.flow-controls button span { flex:0 0 27px; width:27px; height:27px; border-radius:50%; font-size:9px; }.flow-controls button b { max-width:74px; text-align:left; }
  .flow-helper { padding:0 20px 10px; font-size:8px; }
  .live-commerce[data-stage="1"] .commerce-ad,.live-commerce[data-stage="2"] .commerce-ad,.live-commerce[data-stage="3"] .commerce-ad { transform:rotate(-4deg) scale(.96); }
  .live-commerce[data-stage="2"] .commerce-chat,.live-commerce[data-stage="3"] .commerce-chat { transform:rotate(0) translateY(-5px); }
}

/* Built, interactive version of the supplied Free Templates mockup. */
.flow-controls button b small { display:block; margin-top:3px; color:#8b9991; font-size:6.5px; font-weight:650; line-height:1.25; }
.flow-controls button.active b small { color:#58936f; }
.chat-ad-preview { display:grid; grid-template-columns:42% 1fr; gap:8px; padding:8px; }
.chat-ad-preview img { grid-row:1; border-radius:8px; }
.chat-ad-preview > span { align-self:center; padding:0; }
.chat-ad-preview > span b,.chat-ad-preview > span strong,.chat-ad-preview > span small { display:block; }
.chat-ad-preview > span b { color:#23362c; font-size:8px; line-height:1.2; }
.chat-ad-preview > span strong { margin-top:3px; color:#172b20; font-size:8px; }
.chat-ad-preview > span small { margin-top:7px; color:#09a24c; font-size:6.5px; font-weight:800; }
.chat-ad-preview > button { grid-column:1/-1; padding:7px; border:1px solid #74cf95; border-radius:7px; color:#079648; background:#fff; font:850 7px var(--font); cursor:pointer; }
.commerce-chat-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.commerce-chat-actions i { color:inherit; font-size:9px; font-style:normal; }

@media (min-width:981px) {
  .template-experience-grid { grid-template-columns:minmax(0,1fr) clamp(250px,19vw,260px); gap:20px; }
  .template-pricing-panel { display:flex; }
  .commerce-chat header { color:#fff; background:linear-gradient(135deg,#087652,#079a68); }
  .commerce-chat header b,.commerce-chat header small,.commerce-chat header > i { color:#fff; }
  .commerce-chat header small { opacity:.82; }
  .chat-ad-preview { grid-template-columns:43% 1fr; padding:9px; }
  .chat-ad-preview img { width:100%; height:94px; }
  .chat-ad-preview > span b { font-size:8px; }.chat-ad-preview > span strong { font-size:8.5px; }.chat-ad-preview > button { font-size:7.5px; }

  .commerce-event-card { right:2.2%; bottom:3.2%; width:28%; max-width:258px; padding:9px; }
  .commerce-event-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .commerce-event-row { display:flex; min-width:0; min-height:68px; padding:7px 5px; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px; border:1px solid #edf3ef; border-radius:10px; background:#fff; opacity:1; }
  .commerce-event-row > i { width:18px; height:18px; border-radius:50%; color:#11a54d; background:#e8f8ee; font-size:6px; }
  .commerce-event-row b { color:#183e2a; font-size:11px; line-height:1; }.commerce-event-row small { font-size:5.5px; line-height:1.15; }.commerce-event-row em { margin-top:auto; color:#14a653; font-size:5.5px; font-weight:850; }
  .commerce-event-row.active { transform:translateY(-3px); border-color:#64d48b; background:#f0fff5; box-shadow:0 8px 17px rgba(16,164,75,.14); }
  .commerce-event-row.complete > i { color:#fff; background:#29b85c; }
  .flow-controls button b { max-width:110px; }
}

@media (max-width:980px) {
  .commerce-event-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
}

/* Final mockup-aligned build for the left Free Templates card only. */
.flow-controls .flow-step-icon { flex:0 0 34px; width:34px; height:34px; padding:8px; border-radius:50%; color:#0b8f47; background:#edf9f1; stroke-width:2; }
.flow-controls button.active .flow-step-icon { color:#057d3c; background:#dff5e7; box-shadow:0 0 0 6px rgba(35,185,88,.06); }

@media (min-width:981px) {
  #templates .commerce-ad { left:9.8%; top:12%; width:31%; border-radius:25px; }
  #templates .commerce-person { left:52%; bottom:-82px; height:106%; max-width:45%; }
  #templates .commerce-chat { right:2%; top:6%; width:29%; height:444px; }
  #templates .commerce-chat-body { height:395px; }
  #templates .commerce-orbit { left:34%; top:3%; width:43%; height:280px; }
  #templates .metric-roas { left:1%; top:3%; width:104px; min-height:134px; }
  #templates .metric-read { left:1%; bottom:5%; width:142px; }
  #templates .commerce-event-card { right:1.2%; bottom:3.5%; width:29%; max-width:275px; }
  #templates .commerce-order-cta,#templates .commerce-success { left:53%; bottom:5.5%; }
  #templates .commerce-product { height:178px; }
  #templates .commerce-ad-copy b { font-size:clamp(18px,1.65vw,25px); }
  #templates .flow-controls { overflow:visible; }
  #templates .flow-controls button { position:relative; gap:9px; overflow:visible; }
  #templates .flow-controls button span { flex-basis:27px; }
  #templates .flow-controls button b { max-width:105px; }
  #templates .flow-controls button:not(:nth-of-type(4))::after { content:""; position:absolute; z-index:2; right:-13px; top:50%; width:26px; height:2px; background:#22bd60; transform:translateY(-50%); }
  #templates .flow-controls .flow-step-icon { flex-basis:38px; width:38px; height:38px; padding:9px; }
}

/* Pixel-matched three-card interactive suite from the supplied mockup */
.mockup-live-suite { position:relative; overflow:hidden; padding:52px 0 74px; background:linear-gradient(180deg,#f8fbf8,#fffdf8); }
.mockup-live-suite::before { content:""; position:absolute; width:700px; height:700px; left:-250px; top:70px; border-radius:50%; background:rgba(37,211,102,.07); filter:blur(35px); pointer-events:none; }
.mockup-suite-container { max-width:1580px; }
.mockup-suite-grid { position:relative; display:grid; grid-template-columns:1.25fr .85fr .95fr; gap:16px; align-items:stretch; }
.mockup-suite-card { position:relative; min-width:0; min-height:900px; overflow:hidden; padding:30px 32px; border:1px solid #dce7e0; border-radius:22px; color:#101c2d; background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(249,252,249,.92)); box-shadow:0 22px 65px rgba(25,65,46,.09); }
.mockup-suite-card::before { content:""; position:absolute; width:360px; height:360px; right:-170px; top:-150px; border-radius:50%; background:rgba(37,211,102,.05); filter:blur(10px); pointer-events:none; }
.mockup-card-badge { position:relative; z-index:5; display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; padding:7px 13px; border:1px solid #dce9e1; border-radius:999px; color:#087a32; background:rgba(255,255,255,.94); box-shadow:0 6px 16px rgba(25,73,46,.08); font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.mockup-card-badge > svg.la-site-icon { flex:0 0 15px; width:15px; height:15px; }
.mockup-corner-icon { position:absolute; z-index:5; right:20px; top:27px; display:grid; place-items:center; width:48px; height:48px; border:1px solid #dce9e1; border-radius:15px; color:#058b35; background:#fff; box-shadow:0 9px 21px rgba(24,68,45,.13); animation:mockCornerFloat 4s ease-in-out infinite; }
.mockup-corner-icon > svg.la-site-icon { width:24px; height:24px; }
.mockup-suite-card > h2 { position:relative; z-index:2; max-width:100%; margin:27px 0 15px; color:#0d1524; font-family:'Manrope','Inter',system-ui,sans-serif; font-size:29px; font-weight:850; line-height:1.08; letter-spacing:-.038em; text-wrap:balance; }
.mockup-create-card > h2 { max-width:520px; font-size:46px; font-weight:850; line-height:1.08; letter-spacing:-.04em; color:#0d1524; }
.mockup-suite-card > h2 span { color:#16a34a; font-weight:850; }
.mockup-card-lead { position:relative; z-index:2; max-width:100%; color:#4d5f7a; font-size:14.5px; line-height:1.62; }

.mockup-create-card { background:radial-gradient(circle at 58% 58%,rgba(225,255,233,.82),transparent 37%),linear-gradient(155deg,#fbfffc 0%,#f3faf4 55%,#fffdf6 100%); }
.mockup-create-demo { position:relative; min-height:700px; margin-top:18px; }
.mockup-preview-tabs { position:absolute; z-index:8; left:50%; top:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,500px); gap:8px; margin:0; transform:translateX(-50%); }
.mockup-preview-tabs .preview-tab { grid-template-columns:30px minmax(0,1fr) auto; min-width:0; min-height:52px; gap:8px; padding:7px 8px; border:1px solid #e1e5ec; border-radius:12px; color:#141b2d; background:rgba(255,255,255,.96); box-shadow:0 6px 16px rgba(24,46,72,.045); transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.mockup-preview-tabs .preview-tab:hover { border-color:#cbd2df; background:#fff; transform:translateY(-2px); }
.mockup-preview-tabs .preview-tab.active { border-color:#665cff; color:#4f46e5; background:#efefff; box-shadow:inset 0 0 0 1px #665cff,0 8px 20px rgba(102,92,255,.11); transform:translateY(-1px); }
.mockup-preview-tabs .preview-tab-icon { width:30px; height:30px; padding:6px; border:0; border-radius:8px; color:#8ea0bd; background:#f7f8fc; box-shadow:none; }
.mockup-preview-tabs .preview-tab.active .preview-tab-icon { color:#fff; background:#665cff; }
.mockup-preview-tabs .preview-tab-icon > svg.la-site-icon { width:18px; height:18px; }
.mockup-preview-tabs .preview-tab b { overflow:hidden; font-size:10px; font-weight:680; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.mockup-preview-tabs .preview-tab small { overflow:hidden; margin-top:1px; color:#94a3b8; font-size:8px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.mockup-preview-tabs .preview-tab-arrow { color:#94a3b8; font-size:13px; }
.mockup-phone-scene { position:absolute; z-index:2; right:50%; top:128px; width:430px; height:590px; transform:translateX(50%); }
.mockup-real-phone { position:absolute; z-index:2; left:42px; top:36px; width:260px; height:590px; border:5px solid #171918; border-radius:43px; background:#090b0a; box-shadow:0 0 0 1px #585d59,inset 0 0 0 1px rgba(255,255,255,.18),0 26px 58px rgba(23,52,43,.28); }
.mockup-real-phone.switching { opacity:.58; filter:blur(2px); transform:translateY(5px) scale(.975); transition:opacity .18s ease,filter .18s ease,transform .18s ease; }
.mockup-real-phone .real-phone-status { flex-basis:28px; padding:0 15px 3px; align-items:flex-end; }.mockup-real-phone .real-wa-head { flex-basis:39px; }.mockup-real-phone .real-wa-foot { flex-basis:38px; }
.mockup-real-phone .real-phone-notch { top:4px; width:70px; height:17px; border-radius:999px; background:#050505; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); }
.mockup-real-phone .real-phone-icons { display:flex; align-items:center; gap:4px; height:11px; }
.mockup-real-phone .real-phone-icons i { position:relative; display:block; flex:none; }
.mockup-real-phone .ios-cellular { width:12px; height:9px; background:linear-gradient(to top, #111 0 100%); clip-path:polygon(0 100%,0 72%,18% 72%,18% 55%,38% 55%,38% 37%,59% 37%,59% 18%,80% 18%,80% 0,100% 0,100% 100%); }
.mockup-real-phone .ios-wifi { width:12px; height:9px; border:2px solid #111; border-color:#111 transparent transparent; border-radius:50%; transform:translateY(3px); }
.mockup-real-phone .ios-wifi::after { content:""; position:absolute; left:3px; top:1px; width:3px; height:3px; border-radius:50%; background:#111; }
.mockup-real-phone .ios-battery { width:17px; height:8px; border:1px solid #111; border-radius:2px; }
.mockup-real-phone .ios-battery::before { content:""; position:absolute; inset:1px 2px 1px 1px; border-radius:1px; background:#111; }.mockup-real-phone .ios-battery::after { content:""; position:absolute; right:-3px; top:2px; width:2px; height:4px; border-radius:0 2px 2px 0; background:#111; }
.mockup-real-phone .real-msg { width:91%; }.mockup-real-phone .real-actions { width:91%; }.mockup-real-phone .real-media { height:115px; }
.mockup-real-phone .real-template-kicker { display:inline-flex; margin:0 0 8px; padding:4px 7px; border-radius:999px; color:#087b44; background:#e8f8ee; font-size:6px; font-weight:900; letter-spacing:.07em; }
.mockup-real-phone .real-template-meta { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }.mockup-real-phone .real-template-meta b { display:inline-flex; margin:0; padding:3px 6px; border:1px solid #d9ece0; border-radius:999px; color:#176c45; background:#f7fcf9; font-size:6.2px; line-height:1.2; }
.mockup-real-phone[data-preview="url"] .real-media,.mockup-real-phone[data-preview="call"] .real-media { height:106px; }
.mockup-phone-woman { position:absolute; z-index:4; right:-12px; bottom:-22px; width:290px; height:500px; object-fit:contain; object-position:center bottom; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.34) 91%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.34) 91%,transparent 100%); filter:drop-shadow(0 20px 24px rgba(32,68,47,.18)); animation:mockWomanFloat 5.2s ease-in-out infinite; pointer-events:none; }
.mockup-phone-route { position:absolute; z-index:1; inset:0; width:430px; height:590px; overflow:visible; pointer-events:none; }
.mockup-phone-route path { fill:none; stroke:#60796b; stroke-width:1.7; stroke-dasharray:7 9; stroke-linecap:round; animation:mockRouteFlow 2.3s linear infinite; }
.mockup-phone-route marker path { fill:#0fa34c; stroke:none; stroke-dasharray:none; animation:none; filter:drop-shadow(0 4px 5px rgba(15,163,76,.24)); }
.mockup-demo-feedback { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }

.broadcast-feature-list { position:relative; z-index:4; display:grid; gap:18px; margin-top:40px; }
.broadcast-feature-list button { display:grid; grid-template-columns:48px 1fr; align-items:start; gap:16px; width:100%; padding:0; border:0; color:#172233; background:transparent; text-align:left; cursor:pointer; transition:.28s var(--ease-spring); }
.broadcast-feature-list button:hover,.broadcast-feature-list button.active { transform:translateX(5px); }
.broadcast-feature-list button > span { display:grid; place-items:center; width:48px; height:48px; border:1px solid #e0e9e4; border-radius:50%; color:#078e3b; background:#fff; box-shadow:0 7px 18px rgba(25,64,44,.09); transition:.25s; }.broadcast-feature-list button:hover > span,.broadcast-feature-list button.active > span { color:#fff; background:#0aa04a; box-shadow:0 10px 24px rgba(10,160,74,.25); }
.broadcast-feature-list button > span svg.la-site-icon { width:24px; height:24px; }.broadcast-feature-list p b,.broadcast-feature-list p small { display:block; }.broadcast-feature-list p b { font-size:12px; line-height:1.35; }.broadcast-feature-list p small { margin-top:6px; color:#364255; font-size:11px; line-height:1.55; }
.broadcast-visual { position:absolute; left:15px; right:15px; bottom:0; height:405px; overflow:hidden; background:radial-gradient(circle at 50% 95%,rgba(60,211,116,.24),transparent 52%); }
.broadcast-visual::before { content:""; position:absolute; left:50%; bottom:-125px; width:320px; height:320px; border-radius:50%; background:rgba(37,211,102,.10); transform:translateX(-50%); }
.broadcast-live-count { position:absolute; z-index:5; right:2px; top:12px; display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #d8e9df; border-radius:999px; color:#197547; background:rgba(255,255,255,.92); box-shadow:0 8px 20px rgba(22,93,53,.09); font-size:7px; }.broadcast-live-count i { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:pulse 1.4s infinite; }.broadcast-live-count small { color:#85958c; }
.broadcast-phone { position:absolute; z-index:3; left:50%; bottom:-18px; width:205px; height:370px; overflow:hidden; border:6px solid #222826; border-radius:31px 31px 0 0; background:#ece5dd; box-shadow:0 20px 45px rgba(20,54,36,.24); transform:translateX(-50%); transition:.35s var(--ease-spring); }
.broadcast-phone-top { position:relative; display:flex; align-items:center; justify-content:space-between; height:22px; padding:0 10px; color:#27352f; background:#fff; font-size:6.5px; }.broadcast-phone-top i { position:absolute; left:50%; top:0; width:60px; height:14px; border-radius:0 0 10px 10px; background:#202523; transform:translateX(-50%); }.broadcast-phone-top b { font-size:6px; }
.broadcast-wa-head { display:grid; grid-template-columns:auto 23px 1fr auto; align-items:center; gap:5px; padding:6px; color:#fff; background:#07876e; }.broadcast-wa-head img { width:23px; height:23px; border-radius:50%; }.broadcast-wa-head p b,.broadcast-wa-head p small { display:block; }.broadcast-wa-head p b { font-size:7px; }.broadcast-wa-head p small { font-size:5px; opacity:.72; }.broadcast-wa-head > i { font-style:normal; }
.broadcast-chat { height:314px; padding:10px 7px; background-color:#efeae2; background-image:radial-gradient(rgba(42,82,60,.1) .6px,transparent .6px); background-size:10px 10px; }.broadcast-chat > em { display:block; width:max-content; margin:0 auto 7px; padding:2px 6px; border-radius:5px; color:#66756d; background:#fff; font-size:5px; font-style:normal; }
.broadcast-phone-foot { display:flex; align-items:center; gap:6px; height:29px; padding:4px 6px; background:#f3f0eb; }.broadcast-phone-foot span { flex:1; padding:5px 9px; border-radius:999px; color:#819089; background:#fff; font-size:6px; }.broadcast-phone-foot i { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#fff; background:#0aa578; font-size:6px; font-style:normal; }
.broadcast-card-message { padding:5px; border-radius:8px 8px 0 0; background:#fff; }.broadcast-template-media { position:relative; overflow:hidden; border-radius:6px; }.broadcast-card-message img { display:block; width:100%; height:98px; object-fit:cover; border-radius:inherit; }.broadcast-template-media > span { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:4px 6px; border-radius:999px; color:#fff; background:rgba(7,73,42,.88); box-shadow:0 4px 12px rgba(4,42,24,.22); font-size:5.2px; font-weight:850; white-space:nowrap; }.broadcast-card-message b { display:block; margin:5px 3px 2px; font-size:7px; }.broadcast-card-message p { margin:0 3px; color:#3e4c44; font-size:5.5px; line-height:1.45; }.broadcast-card-message time { display:block; color:#87948d; font-size:4px; text-align:right; }
.broadcast-template-label { display:inline-flex; align-items:center; margin:1px 3px 6px; padding:3px 6px; border-radius:999px; color:#087a3d; background:#e8f9ee; font-size:4.8px; font-weight:900; letter-spacing:.07em; }
.broadcast-actions { display:grid; gap:1px; }.broadcast-actions button { padding:7px 4px; border:0; color:#07934f; background:#fff; font:750 5.8px var(--font); cursor:pointer; transition:.2s; }.broadcast-actions button:hover { background:#e8fbef; }
.broadcast-float { position:absolute; z-index:4; display:grid; place-items:center; width:54px; height:54px; border:1px solid #dce9e1; border-radius:50%; color:#078e3b; background:#fff; box-shadow:0 12px 28px rgba(25,70,47,.13); animation:mockFloatIcon 4.2s ease-in-out infinite; }.broadcast-float svg.la-site-icon { width:26px; height:26px; }.broadcast-float-one { left:4px; top:170px; }.broadcast-float-two { right:4px; top:162px; animation-delay:.6s; }.broadcast-float-three { right:8px; top:240px; animation-delay:1.2s; }
.broadcast-visual[data-mode="cta"] .broadcast-phone { transform:translateX(-50%); }.broadcast-visual[data-mode="schedule"] .broadcast-phone { box-shadow:0 20px 55px rgba(14,153,75,.32); }
.broadcast-visual[data-mode="schedule"] { overflow:visible; }
.broadcast-visual[data-mode="schedule"] .broadcast-live-count { top:-32px; right:6px; }

.mockup-ads-card > .mockup-card-lead { max-width:400px; }.mockup-ads-copy { margin-top:20px; }
.ads-live-stage { position:absolute; left:16px; right:16px; bottom:86px; height:450px; }
.social-ad-card { position:absolute; z-index:2; left:0; top:12px; width:240px; overflow:hidden; border:1px solid #dfe6e2; border-radius:15px; background:#fff; box-shadow:0 16px 36px rgba(20,57,37,.13); }
.social-ad-card header,.ads-chat-card header { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:7px; padding:9px; color:#26352e; background:#fff; }.social-ad-card header img,.ads-chat-card header img { width:27px; height:27px; border-radius:50%; }.social-ad-card header p b,.social-ad-card header p small,.ads-chat-card header p b,.ads-chat-card header p small { display:block; }.social-ad-card header p b,.ads-chat-card header p b { font-size:7px; }.social-ad-card header p small,.ads-chat-card header p small { color:#839189; font-size:5px; }.social-ad-card header i,.ads-chat-card header i { color:#89978f; font-size:7px; font-style:normal; }
.social-ad-photo { position:relative; height:265px; overflow:hidden; }.social-ad-photo::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(7,40,23,.82)); }.social-ad-photo img { width:100%; height:100%; object-fit:cover; }.social-ad-photo strong { position:absolute; z-index:2; left:13px; bottom:11px; color:#fff; font-size:19px; line-height:1.15; letter-spacing:-.035em; }
.social-ad-card > button { position:relative; width:100%; padding:10px; border:0; color:#fff; background:#23b459; font:850 10px var(--font); cursor:pointer; animation:adCtaGlow 2.2s ease-in-out infinite; }.social-ad-card > button span { margin-left:4px; }
.ads-route { position:absolute; z-index:1; left:210px; top:45px; width:160px; height:145px; overflow:visible; }.ads-route path { fill:none; stroke:#078d3d; stroke-width:2; stroke-dasharray:7 8; animation:mockRouteFlow 2s linear infinite; }.ads-route .ads-route-head { fill:none; stroke-dasharray:none; }
.ads-chat-card { position:absolute; z-index:3; right:0; bottom:0; width:225px; overflow:hidden; border:1px solid #dfe6e2; border-radius:15px; background:#f4f0ea; box-shadow:0 18px 40px rgba(20,57,37,.14); transform:translateY(6px); transition:.5s var(--ease-spring); }
.ads-chat-body { min-height:265px; padding:11px; background-color:#efeae2; background-image:radial-gradient(rgba(42,82,60,.09) .6px,transparent .6px); background-size:11px 11px; }.ads-chat-body > p { position:relative; margin-bottom:9px; padding:10px; border-radius:8px; color:#203229; background:#d9fdd3; font-size:8px; line-height:1.45; box-shadow:0 2px 5px rgba(0,0,0,.05); }.ads-chat-body p small { display:block; margin-top:5px; color:#718179; font-size:5px; }.ads-chat-user { margin-left:15px; }.ads-chat-reply { margin:14px 18px 0 0; background:#fff!important; opacity:0; transform:translateY(12px); transition:.45s .18s var(--ease-spring); }.ads-chat-reply button { display:block; width:100%; margin-top:9px; padding:8px 4px 0; border:0; border-top:1px solid #e8edea; color:#087cf0; background:transparent; font:750 8px var(--font); cursor:pointer; }
.mockup-ads-card.demo-active .ads-chat-card { transform:none; box-shadow:0 22px 50px rgba(14,133,65,.22); }.mockup-ads-card.demo-active .ads-chat-reply { opacity:1; transform:none; }
.ads-trust-strip { position:absolute; left:22px; right:22px; bottom:24px; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border:1px solid #d6e8dc; border-radius:14px; color:#1b2934; background:linear-gradient(90deg,#effbf3,#f8fcf9); font-size:9px; }.ads-trust-strip svg.la-site-icon { width:21px; height:21px; color:#079542; }.ads-trust-strip svg.la-site-icon:last-child { margin-left:auto; }

@keyframes mockRouteFlow { to { stroke-dashoffset:-48; } }
@keyframes mockWomanFloat { 50% { transform:translateY(-7px); } }
@keyframes mockCornerFloat { 50% { transform:translateY(-5px) rotate(3deg); } }
@keyframes mockFloatIcon { 50% { transform:translateY(-8px) rotate(-4deg); } }
@keyframes adCtaGlow { 50% { box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 0 22px rgba(35,180,89,.28); } }

/* Compact desktop composition: all three cards fit a normal 100% browser viewport. */
@media (min-width:1221px) {
  section.pad.mockup-live-suite { padding:32px 0 38px; }
  .mockup-suite-card { height:790px; min-height:790px; padding:24px 26px; }
  .mockup-card-badge { padding:6px 11px; border-radius:999px; font-size:10px; }
  .mockup-corner-icon { top:21px; right:18px; width:43px; height:43px; }
  .mockup-suite-card > h2 { margin:20px 0 11px; font-size:27px; }
  .mockup-create-card > h2 { max-width:500px; font-size:42px; line-height:1.05; }
  .mockup-card-lead { font-size:12.5px; line-height:1.55; }

  .mockup-create-demo { min-height:500px; margin-top:12px; }
  .mockup-preview-tabs { left:0; top:68px; width:152px; grid-template-columns:1fr; gap:7px; transform:none; }
  .mockup-preview-tabs .preview-tab { min-height:45px; padding:6px 7px; }
  .mockup-preview-tabs .preview-tab-icon { width:28px; height:28px; padding:5px; }
  .mockup-preview-tabs .preview-tab-icon > svg.la-site-icon { width:17px; height:17px; }
  .mockup-preview-tabs .preview-tab b { font-size:9.5px; }.mockup-preview-tabs .preview-tab small { font-size:7.5px; }
  .mockup-phone-scene { right:0; top:28px; transform:scale(.82); transform-origin:top right; }
  .mockup-real-phone { top:36px; width:260px; height:590px; }
  .mockup-phone-woman { bottom:-28px; }

  .broadcast-feature-list { gap:13px; margin-top:25px; }
  .broadcast-feature-list button { grid-template-columns:41px 1fr; gap:12px; }
  .broadcast-feature-list button > span { width:41px; height:41px; }
  .broadcast-feature-list button > span svg.la-site-icon { width:21px; height:21px; }
  .broadcast-feature-list p b { font-size:10.5px; }.broadcast-feature-list p small { margin-top:4px; font-size:9.5px; line-height:1.42; }
  .broadcast-visual { height:400px; }
  .broadcast-phone { bottom:-64px; width:252px; height:454px; border-radius:31px; transform:translateX(-50%); transform-origin:bottom center; }
  .broadcast-chat { height:313px; padding:9px 7px; }
  .broadcast-card-message { padding:7px; border-radius:10px 10px 0 0; }
  .broadcast-card-message img { height:112px; }
  .broadcast-template-media > span { left:7px; bottom:7px; padding:4px 7px; font-size:6px; }
  .broadcast-template-label { margin-bottom:5px; font-size:5.8px; }
  .broadcast-card-message b { margin-top:6px; font-size:9px; }
  .broadcast-card-message p { font-size:7.2px; line-height:1.48; }
  .broadcast-card-message time { font-size:5.2px; }
  .broadcast-actions button { padding:8px 4px; font-size:7.3px; }
  .broadcast-visual[data-mode="cta"] .broadcast-phone { transform:translateX(-50%); }
  .broadcast-visual[data-mode="schedule"] .broadcast-phone { transform:translateX(-50%); }
  .broadcast-float { width:46px; height:46px; }.broadcast-float svg.la-site-icon { width:22px; height:22px; }
  .broadcast-float-one { top:175px; }.broadcast-float-two { top:168px; }.broadcast-float-three { top:235px; }

  .mockup-ads-copy { margin-top:14px; }
  .ads-live-stage { bottom:147px; height:344px; }
  .social-ad-card { top:8px; transform:scale(.78); transform-origin:top left; }
  .ads-route { left:178px; top:34px; transform:scale(.8); transform-origin:top left; }
  .ads-chat-card { transform:translateY(4px) scale(.78); transform-origin:bottom right; }
  .mockup-ads-card.demo-active .ads-chat-card { transform:scale(.78); }
  .ads-trust-strip { bottom:17px; padding:10px; }
}

/* ========================================================================== 
   Main hero — Growth Engine
   Code-built from the supplied white/mint reference. The supplied BujjiAI
   desktop capture is the only raster UI surface; all surrounding UI is live.
   ========================================================================== */
.hero.growth-hero {
  position:relative;
  min-height:0;
  margin:0;
  padding:clamp(84px,6vw,108px) clamp(18px,4vw,72px) clamp(24px,2.5vw,36px);
  overflow:hidden;
  color:#101b31;
  background:
    radial-gradient(760px 520px at 82% 40%,rgba(43,211,143,.16),transparent 68%),
    radial-gradient(620px 450px at 2% 85%,rgba(54,211,164,.16),transparent 66%),
    linear-gradient(135deg,#fff 0%,#fbfefc 46%,#f6fffb 100%);
  isolation:isolate;
}
.hero.growth-hero::before {
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.42;
  background-image:radial-gradient(circle,rgba(18,166,109,.24) 1px,transparent 1.2px);
  background-size:18px 18px;
  mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 77%,#000 100%);
}
.growth-hero-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); pointer-events:none; }
.growth-hero-orb-one { width:520px; height:520px; right:-240px; top:120px; border:1px solid rgba(19,178,117,.10); box-shadow:0 0 0 55px rgba(23,201,132,.025),0 0 0 110px rgba(23,201,132,.02); }
.growth-hero-orb-two { width:580px; height:580px; left:-360px; bottom:-380px; background:rgba(29,194,127,.08); }
.growth-hero-inner {
  position:relative; z-index:1;
  width:min(100%,1860px); margin:0 auto;
  display:grid; grid-template-columns:minmax(390px,.78fr) minmax(620px,1.35fr); gap:clamp(34px,4vw,78px); align-items:center;
}
.growth-copy { position:relative; z-index:3; padding:20px 0 10px; }
.growth-eyebrow {
  width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:12px;
  margin-bottom:clamp(22px,2vw,34px); padding:8px 20px 8px 10px; border:1px solid #d7efe5; border-radius:999px;
  color:#168c66; background:#f1fbf6; box-shadow:0 10px 26px rgba(22,103,76,.06);
  font-size:clamp(11px,.86vw,14px); font-weight:800; letter-spacing:.01em;
}
.growth-eyebrow svg,
.growth-eyebrow i.la-site-icon {
  width:32px !important; height:32px !important; padding:7px !important;
  border-radius:10px !important;
  color:#10b981 !important;
  background:linear-gradient(135deg, #e8f9ee, #d1fae5) !important;
  border:1px solid rgba(16,185,129,.3) !important;
  box-shadow:0 5px 15px rgba(16,185,129,.25) !important;
  stroke-width:2.2 !important;
  animation:pwIconGlow 3.6s ease-in-out infinite !important;
}
.growth-copy h1 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  max-width: 720px;
  margin: 0;
  color: #212529;
  font-size: clamp(48px, 4.8vw, 76px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
}
.growth-copy h1 span {
  color: #1fa548;
  position: relative;
  white-space: nowrap;
}
.growth-copy h1 span svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  width: 100%;
  height: 10px;
}
.growth-copy h1 i {
  color: #1fa548;
  font-style: normal;
}
.growth-copy > p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  max-width: 680px;
  margin: clamp(20px, 1.8vw, 30px) 0 0;
  color: #495057;
  font-size: clamp(15px, 1.25vw, 18.5px);
  line-height: 1.6;
}
.growth-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:clamp(26px,2.3vw,38px); }
.growth-primary,.growth-tour {
  min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:0 28px; border-radius:12px;
  font:800 15px/1 var(--font); text-decoration:none; cursor:pointer; transition:transform .3s var(--ease-spring),box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
.growth-primary {
  color:#fff; border:1px solid #10b981;
  background:linear-gradient(135deg,#12a04d 0%,#22c55e 100%);
  box-shadow:0 14px 30px rgba(18,160,77,.32),inset 0 1px rgba(255,255,255,.32);
}
.growth-primary b { font-size:20px; transition:transform .25s ease; }
.growth-primary:hover {
  color:#fff; transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow:0 20px 42px rgba(18,160,77,.42);
}
.growth-primary:hover b { transform:translateX(4px); }
.growth-tour { border:1px solid #d6dee8; color:#152037; background:#fff; box-shadow:0 9px 24px rgba(38,55,84,.06); }
.growth-tour i { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#16a96d; background:#ecfaf3; font-size:10px; font-style:normal; }
.growth-tour:hover,.growth-tour.is-playing { transform:translateY(-3px); border-color:#7dd6ad; background:#f7fffb; box-shadow:0 16px 34px rgba(12,139,92,.15); }
.growth-trust { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:760px; margin-top:clamp(32px,3vw,50px); }
.growth-trust span {
  min-width:0; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px;
  color:#4a5a70; font-size:11.5px; line-height:1.4;
  transition:transform .25s var(--ease-spring);
}
.growth-trust span:hover { transform:translateY(-2px); }
.growth-trust svg.la-site-icon {
  width:42px !important; height:42px !important; padding:9px !important;
  border-radius:13px !important; stroke-width:2.2 !important;
  animation:pwIconGlow 4.2s ease-in-out infinite !important;
  transition:transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease !important;
}
.growth-trust span:nth-child(1) svg { animation-delay:0s !important; }
.growth-trust span:nth-child(2) svg { animation-delay:.7s !important; }
.growth-trust span:nth-child(3) svg { animation-delay:1.4s !important; }
.growth-trust span:nth-child(4) svg { animation-delay:2.1s !important; }

.growth-trust svg.ic-green {
  color:#10b981 !important; background:linear-gradient(135deg,#e8f9ee,#d1fae5) !important;
  border:1px solid rgba(16,185,129,.25) !important; box-shadow:0 6px 18px rgba(16,185,129,.22) !important;
}
.growth-trust svg.ic-blue {
  color:#3b82f6 !important; background:linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  border:1px solid rgba(59,130,246,.25) !important; box-shadow:0 6px 18px rgba(59,130,246,.22) !important;
}
.growth-trust svg.ic-violet {
  color:#8b5cf6 !important; background:linear-gradient(135deg,#f5f3ff,#ede9fe) !important;
  border:1px solid rgba(139,92,246,.25) !important; box-shadow:0 6px 18px rgba(139,92,246,.22) !important;
}
.growth-trust svg.ic-amber {
  color:#f59e0b !important; background:linear-gradient(135deg,#fffbeb,#fef3c7) !important;
  border:1px solid rgba(245,158,11,.25) !important; box-shadow:0 6px 18px rgba(245,158,11,.22) !important;
}
.growth-trust span:hover svg.la-site-icon {
  transform:translateY(-3px) scale(1.1) rotate(-5deg) !important;
}
.growth-trust b { font-weight:750; color:#0f172a; }

.growth-platforms { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.growth-plat {
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border:1px solid #dcebe2; border-radius:999px; background:#ffffff;
  color:#1e293b; font-size:13px; font-weight:750;
  box-shadow:0 4px 14px rgba(20,60,40,.06);
  transition:transform .25s var(--ease-spring), box-shadow .25s ease, border-color .25s ease;
}
.growth-plat:hover {
  transform:translateY(-2px); border-color:#a3d9bc;
  box-shadow:0 8px 20px rgba(20,60,40,.12);
}
.growth-plat svg { width:16px; height:16px; flex:none; }
.growth-plat svg.plat-chrome { color:#f97316; }
.growth-plat svg.plat-apple { color:#f97316; }
.growth-plat svg.plat-windows { color:#f97316; }

.growth-product { position:relative; min-width:0; height:clamp(510px,42vw,700px); perspective:1500px; }
.growth-product-glow { position:absolute; inset:13% 5% 2% 8%; border-radius:50%; background:radial-gradient(circle,rgba(46,213,143,.25),rgba(46,213,143,.06) 48%,transparent 72%); filter:blur(24px); }
.growth-dashboard-shell {
  position:absolute; z-index:2; left:5%; right:7%; top:10%; bottom:8%; overflow:hidden;
  border:1px solid rgba(102,124,151,.16); border-radius:20px; background:#fff;
  box-shadow:0 36px 75px rgba(44,74,74,.18),0 8px 24px rgba(29,59,76,.10);
  transform:rotateY(-4deg) rotateX(1deg) rotateZ(.7deg); transform-origin:50% 60%;
  transition:transform .65s var(--ease-spring),box-shadow .45s ease;
}
.growth-product:hover .growth-dashboard-shell { transform:rotateY(-1deg) rotateX(0) rotateZ(0) translateY(-6px); box-shadow:0 44px 90px rgba(31,97,74,.23),0 12px 30px rgba(29,59,76,.12); }
.growth-browser-bar { height:36px; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid #edf1f5; color:#8692a3; background:#fbfcfd; font-size:9px; }
.growth-browser-bar span { width:7px; height:7px; border-radius:50%; background:#ff5f57; }
.growth-browser-bar span:nth-child(2) { background:#ffbd2e; }
.growth-browser-bar span:nth-child(3) { background:#28c840; }
.growth-browser-bar b { margin-left:8px; font-weight:700; }
.growth-browser-bar i { margin-left:auto; font-style:normal; letter-spacing:2px; }
.growth-dashboard { width:100%; height:calc(100% - 36px); display:block; object-fit:cover; object-position:center top; }
.growth-scan { position:absolute; z-index:2; inset:36px 0 auto; height:18%; pointer-events:none; opacity:0; background:linear-gradient(180deg,transparent,rgba(67,231,163,.18),transparent); transform:translateY(-120%); }
.growth-product.is-touring .growth-scan { opacity:1; animation:growthScan 2.3s ease-in-out infinite; }
@keyframes growthScan { 0%{transform:translateY(-120%)} 100%{transform:translateY(540%)} }

.growth-float,.growth-whatsapp-pulse { position:absolute; z-index:5; border:1px solid rgba(199,220,212,.75); color:#172238; background:rgba(255,255,255,.94); box-shadow:0 16px 40px rgba(37,72,64,.16); backdrop-filter:blur(15px); cursor:pointer; transition:transform .35s var(--ease-spring),box-shadow .35s ease,border-color .35s ease; }
.growth-float:hover,.growth-float[aria-pressed="true"],.growth-whatsapp-pulse:hover,.growth-whatsapp-pulse[aria-pressed="true"] { transform:translateY(-7px) scale(1.025); border-color:#61d7a1; box-shadow:0 24px 48px rgba(22,136,94,.22); }
.growth-automation { left:-3%; bottom:19%; width:min(245px,28%); min-height:120px; display:grid; grid-template-columns:46px 1fr; align-items:start; gap:12px; padding:17px; border-radius:16px; text-align:left; animation:growthFloat 5.7s .5s ease-in-out infinite; }
.growth-automation > svg.la-site-icon {
  width:46px !important; height:46px !important; padding:10px !important; border-radius:13px !important; stroke-width:2.2 !important;
  color:#f59e0b !important; background:linear-gradient(135deg,#fffbeb,#fef3c7) !important;
  border:1px solid rgba(245,158,11,.3) !important; box-shadow:0 8px 20px rgba(245,158,11,.25) !important;
  animation:pwIconGlow 4s ease-in-out infinite !important;
  transition:transform .3s cubic-bezier(.2,.9,.2,1) !important;
}
.growth-automation:hover > svg.la-site-icon { transform:translateY(-3px) scale(1.12) rotate(-5deg) !important; }
.growth-automation strong,.growth-automation small,.growth-automation b { display:block; }
.growth-automation strong { font-size:13px; }
.growth-automation small { margin:7px 0 9px; color:#647187; font-size:10px; line-height:1.4; }
.growth-automation b { width:max-content; padding:5px 10px; border-radius:999px; color:#0b9a61; background:#e7f8ef; font-size:9px; }
.growth-whatsapp-pulse { right:-4%; top:28%; width:64px; height:64px; display:grid; place-items:center; padding:0; border-radius:50%; color:#fff; background:#26c777; box-shadow:0 0 0 14px rgba(37,199,119,.10),0 18px 40px rgba(24,153,91,.25); animation:growthPulse 2.6s ease-in-out infinite; }
.growth-whatsapp-pulse svg { width:30px; height:30px; }
.growth-campaign { right:-1%; bottom:0; width:min(310px,34%); min-height:132px; display:grid; grid-template-columns:104px 1fr; align-items:center; gap:13px; padding:14px; border-radius:18px; text-align:left; animation:growthFloat 6s 1.1s ease-in-out infinite; }
.growth-ring { position:relative; width:92px; height:92px; display:grid; place-items:center; align-content:center; border-radius:50%; background:conic-gradient(#12a96a 0 82%,#e7f6ef 82%); }
.growth-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:#fff; }
.growth-ring b,.growth-ring small { position:relative; z-index:1; display:block; text-align:center; }
.growth-ring b { font-size:19px; }
.growth-ring small { color:#778393; font-size:8px; }
.growth-campaign > span:last-child > strong { display:block; margin-bottom:7px; font-size:12px; }
.growth-campaign > span:last-child > small { display:grid; grid-template-columns:6px 1fr auto; gap:5px; margin:5px 0; color:#7b8695; font-size:8px; }
.growth-campaign > span:last-child i { width:5px; height:5px; margin-top:2px; border-radius:50%; background:#15af6c; }
.growth-campaign > span:last-child small:nth-child(3) i { opacity:.66; }
.growth-campaign > span:last-child small:nth-child(4) i { opacity:.35; }
.growth-campaign > span:last-child b { color:#243248; }
@keyframes growthFloat { 0%,100%{translate:0 0} 50%{translate:0 -8px} }
@keyframes growthPulse { 0%,100%{box-shadow:0 0 0 12px rgba(37,199,119,.09),0 18px 40px rgba(24,153,91,.22)} 50%{box-shadow:0 0 0 22px rgba(37,199,119,0),0 24px 48px rgba(24,153,91,.30)} }
@keyframes growthLine { 0%{stroke-dashoffset:180} 45%,100%{stroke-dashoffset:0} }


@media (max-width:1200px) {
  .growth-hero-inner { grid-template-columns:minmax(330px,.8fr) minmax(510px,1.2fr); gap:26px; }
  .growth-copy h1 { font-size:clamp(52px,5.2vw,70px); }
  .growth-product { height:520px; }
  .growth-trust { grid-template-columns:repeat(2,1fr); }
  .growth-campaign { right:0; width:39%; }
  .growth-automation { left:0; width:32%; }
}
@media (max-width:900px) {
  .hero.growth-hero { padding:104px 18px 46px; }
  .growth-hero-inner { grid-template-columns:1fr; gap:20px; }
  .growth-copy { text-align:center; }
  .growth-eyebrow { margin-left:auto; margin-right:auto; }
  .growth-copy h1,.growth-copy > p { margin-left:auto; margin-right:auto; }
  .growth-actions { justify-content:center; }
  .growth-trust { max-width:650px; margin-left:auto; margin-right:auto; }
  .growth-product { height:570px; margin-top:10px; }
  .growth-dashboard-shell { left:8%; right:8%; }
  .growth-whatsapp-pulse { right:1%; }
  .growth-proof-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px) {
  .hero.growth-hero { padding:88px 12px 34px; }
  .growth-eyebrow { padding:9px 13px; font-size:9px; }
  .growth-copy h1 { font-size:clamp(32px,8.5vw,56px); line-height:1.08; word-break:normal; overflow-wrap:break-word; }
  .growth-copy > p { font-size:15px; }
  .growth-actions { flex-direction:column; align-items:stretch; }
  .growth-primary,.growth-tour { width:100%; }
  .growth-trust { grid-template-columns:repeat(2,1fr); gap:16px 8px; }
  .growth-trust span { grid-template-columns:34px 1fr; font-size:10px; }
  .growth-trust svg { width:34px; height:34px; }
  .growth-product { height:420px; margin:16px -5px 0; }
  .growth-dashboard-shell { left:3%; right:3%; top:11%; bottom:8%; border-radius:12px; transform:rotateY(-2deg) rotateZ(.5deg); }
  .growth-browser-bar { height:26px; padding:0 8px; font-size:7px; }
  .growth-browser-bar span { width:5px; height:5px; }
  .growth-dashboard { height:calc(100% - 26px); }
  .growth-automation { left:0; bottom:7%; width:43%; min-height:83px; grid-template-columns:30px 1fr; gap:7px; padding:10px; }
  .growth-automation > svg { width:30px; height:30px; padding:7px; }
  .growth-automation strong { font-size:9px; }
  .growth-automation small { font-size:7px; margin:4px 0; }
  .growth-automation b { padding:3px 6px; font-size:6px; }
  .growth-whatsapp-pulse { right:0; top:29%; width:42px; height:42px; }
  .growth-whatsapp-pulse svg { width:20px; height:20px; }
  .growth-campaign { right:0; bottom:0; width:50%; min-height:87px; grid-template-columns:62px 1fr; gap:7px; padding:8px; }
  .growth-ring { width:58px; height:58px; }
  .growth-ring b { font-size:12px; }
  .growth-ring small { font-size:6px; }
  .growth-campaign > span:last-child > strong { font-size:8px; margin-bottom:4px; }
}

@media (prefers-reduced-motion:reduce) {
  .growth-automation,.growth-whatsapp-pulse,.growth-campaign { animation:none !important; }
}

/* Bujji Voice — desktop companion and live-alert simulation. */
/* Bujji Voice card styles live in the rebuilt block at the end of this file. */

@media (min-width:1221px) and (max-width:1350px) {
  .mockup-preview-tabs { width:118px; }
  .mockup-preview-tabs .preview-tab { grid-template-columns:26px minmax(0,1fr) auto; gap:5px; padding-inline:5px; }
  .mockup-preview-tabs .preview-tab-icon { width:26px; height:26px; }
  .mockup-preview-tabs .preview-tab b { font-size:8.5px; }
  .mockup-preview-tabs .preview-tab small { font-size:6.6px; }
  .mockup-phone-scene { right:-17px; }
}

@media (max-width:1220px) {
  .mockup-suite-grid { grid-template-columns:1fr 1fr; }.mockup-create-card { grid-column:1/-1; }.mockup-suite-card { min-height:840px; }.mockup-create-card { min-height:820px; }
  .mockup-create-demo { max-width:820px; margin-inline:auto; }.mockup-phone-scene { right:50%; }.mockup-real-phone { top:0; }
}
@media (max-width:820px) {
  .mockup-live-suite { padding:38px 0 56px; }.mockup-suite-grid { grid-template-columns:1fr; gap:14px; }.mockup-create-card { grid-column:auto; }
  .mockup-suite-card { min-height:820px; padding:25px 22px; border-radius:20px; }.mockup-create-card { min-height:1070px; }.mockup-create-card > h2 { font-size:42px; }
  .mockup-create-demo { min-height:780px; }.mockup-preview-tabs { position:absolute; left:50%; top:0; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; }.mockup-preview-tabs .preview-tab { min-height:52px; }
  .mockup-phone-scene { right:50%; top:132px; width:430px; transform:translateX(50%); }
  .mockup-broadcast-card,.mockup-ads-card { min-height:900px; }
}
@media (max-width:480px) {
  .mockup-suite-card { padding:22px 16px; }.mockup-create-card { min-height:1110px; }.mockup-create-card > h2 { font-size:36px; }.mockup-suite-card > h2 { font-size:28px; }
  .mockup-preview-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.mockup-preview-tabs .preview-tab { min-height:49px; padding:6px 7px; }
  .mockup-phone-scene { top:178px; width:360px; height:520px; }.mockup-real-phone { left:12px; width:226px; height:490px; }.mockup-phone-woman { right:-35px; width:250px; height:430px; }.mockup-phone-route { width:360px; height:520px; }
  .broadcast-feature-list { gap:15px; margin-top:28px; }.broadcast-feature-list button { grid-template-columns:43px 1fr; gap:12px; }.broadcast-feature-list button > span { width:43px; height:43px; }
  .social-ad-card { width:210px; }.social-ad-photo { height:235px; }.ads-chat-card { width:200px; }.ads-route { left:175px; width:135px; }.ads-trust-strip { left:12px; right:12px; gap:6px; font-size:7.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .mockup-phone-route path,.mockup-phone-woman,.mockup-corner-icon,.broadcast-float,.social-ad-card > button,.ads-route path { animation:none!important; }
}

/* Enterprise Brain + WhatsApp AI Agents — coded second-row interactive card. */
.enterprise-agent-card {
  position:relative; grid-column:1/-1; display:grid; grid-template-columns:30% 40% 30%;
  min-width:0; min-height:900px; overflow:hidden; border:1px solid #dfe8e3;
  border-radius:24px; color:#111827; background:#fff;
  box-shadow:0 24px 70px rgba(24,67,44,.09);
}
.enterprise-agent-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 47%,rgba(37,211,102,.09),transparent 27%),radial-gradient(circle at 5% 86%,rgba(37,211,102,.055),transparent 23%); }
.enterprise-data-panel,.enterprise-agent-panel { position:relative; z-index:2; padding:34px 36px; background:rgba(255,255,255,.86); }
.enterprise-data-panel { border-right:1px solid #e8eeea; text-align:left; }
.enterprise-agent-panel { border-left:1px solid #e8eeea; }
.enterprise-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #dcebe2; border-radius:999px; color:#34433b; background:#f6fbf7; font-size:11px; font-weight:800; letter-spacing:.025em; }
.enterprise-pill svg { width:15px; height:15px; color:#0aae4d; }
.enterprise-data-panel h2,.enterprise-agent-panel h2 { margin:19px 0 10px; color:#070a08; font-size:35px; line-height:1.08; letter-spacing:-.048em; }
.enterprise-data-panel h2 span,.enterprise-agent-panel h2 span { color:#18ae51; }
.enterprise-data-panel > p,.enterprise-agent-panel > p { color:#455061; font-size:13px; line-height:1.62; }
.enterprise-data-panel > p { max-width:380px; margin-inline:auto; text-align:left; }

.enterprise-process { position:relative; display:grid; gap:20px; margin-top:20px; }
.enterprise-process::before { content:""; position:absolute; left:73px; top:105px; bottom:105px; border-left:2px dashed #35bd70; }
.enterprise-process-step { position:relative; display:grid; grid-template-columns:74px 1fr; min-height:190px; padding:18px 18px 16px 26px; border:1px solid #e5ece8; border-radius:20px; color:#1b1f23; background:#fff; text-align:left; box-shadow:0 14px 32px rgba(22,65,42,.08); cursor:pointer; transition:.28s var(--ease-spring); }
.enterprise-process-step:hover,.enterprise-process-step.active { transform:translateY(-3px); border-color:#bfe8cd; box-shadow:0 20px 42px rgba(21,116,59,.13); }
.enterprise-step-number { position:absolute; z-index:3; left:25px; top:13px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#fff; background:#20b85b; font-size:12px; font-weight:900; box-shadow:0 5px 12px rgba(24,174,81,.24); }
.enterprise-step-number.violet { background:#7b45e7; }
.enterprise-step-icon { align-self:center; display:grid; place-items:center; width:74px; height:86px; border-radius:18px; color:#11994a; background:linear-gradient(145deg,#e9f9ef,#f6fffa); box-shadow:0 11px 28px rgba(24,115,61,.10); }
.enterprise-step-icon.violet { color:#7242d5; background:linear-gradient(145deg,#eee6ff,#fbf8ff); }
.enterprise-step-icon svg { width:38px; height:38px; }
.enterprise-process-step > span:last-child { align-self:center; min-width:0; padding-left:17px; }
.enterprise-process-step b,.enterprise-process-step small { display:block; }
.enterprise-process-step b { margin-bottom:8px; font-size:17px; line-height:1.2; }
.enterprise-process-step small { color:#586273; font-size:11px; line-height:1.58; }
.enterprise-process-step em { display:inline-flex; flex-wrap:wrap; gap:8px; margin-top:12px; color:#108c45; font-size:9px; font-style:normal; font-weight:800; }
.enterprise-process-step em i { padding:4px 7px; border-radius:7px; background:#f1f8f3; font-style:normal; }
.enterprise-process-step em.violet { padding:5px 9px; border-radius:999px; color:#713ed0; background:#f3edff; }

.enterprise-phone-zone { position:relative; z-index:1; min-width:0; background:radial-gradient(circle at 50% 47%,rgba(54,221,115,.14),transparent 36%),linear-gradient(180deg,#fff,#fbfefc); }
.enterprise-orbit-ring { position:absolute; z-index:0; left:50%; top:50%; width:500px; height:500px; border:1px dashed rgba(26,185,84,.34); border-radius:50%; transform:translate(-50%,-48%); animation:enterpriseOrbit 24s linear infinite; }
.enterprise-orbit-ring::before,.enterprise-orbit-ring::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#69d995; box-shadow:0 0 0 5px rgba(57,204,111,.1); }
.enterprise-orbit-ring::before { left:-4px; top:36%; }.enterprise-orbit-ring::after { right:-4px; bottom:30%; }
.enterprise-orbit-tag { position:absolute; z-index:6; display:grid; justify-items:center; gap:6px; width:80px; padding:15px 8px; border:1px solid #e1e8e4; border-radius:17px; color:#101510; background:#fff; text-align:center; box-shadow:0 15px 30px rgba(24,62,40,.13); font-size:10px; line-height:1.3; animation:enterpriseFloat 4.6s ease-in-out infinite; }
.enterprise-orbit-tag svg { width:25px; height:25px; color:#14ad51; }.enterprise-orbit-tag b { font-size:10px; }
.enterprise-orbit-tag.tag-pdf { left:18px; top:220px; }.enterprise-orbit-tag.tag-url { left:20px; top:410px; animation-delay:-1.4s; }.enterprise-orbit-tag.tag-db { left:22px; top:645px; animation-delay:-2.3s; }
.enterprise-orbit-tag.tag-code { right:20px; top:220px; animation-delay:-.6s; }.enterprise-orbit-tag.tag-api { right:18px; top:425px; animation-delay:-1.9s; }.enterprise-orbit-tag.tag-kb { right:20px; top:645px; animation-delay:-3s; }
.enterprise-phone { position:absolute; z-index:4; left:50%; top:58px; display:flex; flex-direction:column; width:340px; height:758px; overflow:hidden; border:7px solid #171a18; border-radius:52px; background:#ece7df; box-shadow:0 0 0 2px #767b77,0 30px 65px rgba(19,45,31,.28); transform:translateX(-50%); }
.enterprise-phone-status { position:relative; display:flex; align-items:center; justify-content:space-between; height:42px; padding:0 25px; color:#111; background:#fbfaf7; font-size:11px; }
.enterprise-phone-status > i { position:absolute; left:50%; top:8px; width:96px; height:26px; border-radius:999px; background:#050505; transform:translateX(-50%); }
.enterprise-phone-status span { font-size:9px; letter-spacing:2px; }
.enterprise-phone > header { display:grid; grid-template-columns:24px 38px 1fr auto; align-items:center; gap:7px; padding:8px 13px; color:#15241c; background:#f7f4ee; }
.enterprise-phone > header > span { font-size:33px; line-height:1; }.enterprise-phone > header img { width:36px; height:36px; border-radius:50%; }.enterprise-phone > header p b,.enterprise-phone > header p small { display:block; }.enterprise-phone > header p b { font-size:11px; }.enterprise-phone > header p small { color:#67756c; font-size:8px; }.enterprise-phone > header > i { font-size:14px; font-style:normal; }
.enterprise-chat { flex:1; overflow:hidden; padding:17px 14px 9px; background-color:#f2ede6; background-image:radial-gradient(rgba(41,78,57,.09) .6px,transparent .6px); background-size:12px 12px; }
.enterprise-agent-intro,.enterprise-user-query,.enterprise-ai-answer { padding:12px; border-radius:12px; color:#151918; background:#fff; font-size:11px; line-height:1.45; box-shadow:0 3px 8px rgba(0,0,0,.06); }
.enterprise-role-list { display:grid; gap:6px; margin:9px 0 12px; padding:8px; border-radius:16px; background:rgba(220,250,218,.78); }
.enterprise-role-list button { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:7px; padding:9px; border:1px solid transparent; border-radius:13px; color:#1b241e; background:rgba(255,255,255,.68); text-align:left; cursor:pointer; transition:.2s var(--ease-spring); }
.enterprise-role-list button:hover,.enterprise-role-list button.active { transform:translateX(3px); border-color:#bce7c8; background:#fff; box-shadow:0 7px 16px rgba(21,106,55,.1); }
.enterprise-role-list button > span { font-size:20px; }.enterprise-role-list button b,.enterprise-role-list button small { display:block; }.enterprise-role-list button b { font-size:10.5px; }.enterprise-role-list button small { margin-top:2px; color:#637168; font-size:7px; }.enterprise-role-list button > i { font-size:19px; font-style:normal; }
.enterprise-user-query { max-width:75%; margin-left:auto; background:#d9fdd3; }.enterprise-user-query small { display:block; margin-top:5px; color:#748279; font-size:7px; text-align:right; }
.enterprise-ai-answer { max-width:86%; margin-top:9px; transition:.25s; }.enterprise-ai-answer.switching { opacity:.35; filter:blur(2px); transform:translateY(5px); }.enterprise-ai-answer p { margin-bottom:5px; }.enterprise-ai-answer ol { margin-left:17px; font-size:9px; line-height:1.42; }.enterprise-ai-answer ol b { color:#2267b5; }.enterprise-ai-answer > small { display:block; margin-top:8px; padding-top:7px; border-top:1px solid #edf0ee; color:#546159; font-size:7px; }
.enterprise-phone > footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px 10px; background:#f2ede6; }.enterprise-phone > footer span { flex:1; padding:10px 12px; border-radius:999px; color:#9aa19d; background:#fff; font-size:10px; }.enterprise-phone > footer i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; background:#12ad58; font-style:normal; }
.enterprise-private-strip { position:absolute; z-index:7; left:50%; bottom:18px; display:flex; align-items:center; gap:8px; width:max-content; padding:10px 16px; border:1px solid #bce6ca; border-radius:999px; color:#0a9c49; background:#fff; box-shadow:0 12px 28px rgba(18,117,58,.11); font-size:10px; transform:translateX(-50%); }.enterprise-private-strip svg { width:18px; height:18px; }

.enterprise-agent-panel { text-align:left; }
.enterprise-agent-panel > p { max-width:390px; }
.enterprise-agent-features { display:grid; gap:13px; margin-top:25px; }
.enterprise-agent-features button { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; padding:8px; border:1px solid transparent; border-radius:14px; color:#171b19; background:transparent; text-align:left; cursor:pointer; transition:.22s; }
.enterprise-agent-features button:hover,.enterprise-agent-features button.active { border-color:#dcebe2; background:#f8fcf9; box-shadow:0 9px 22px rgba(24,69,44,.07); }
.enterprise-agent-features button > svg { width:38px; height:38px; padding:9px; border:1px solid #e2ebe5; border-radius:12px; color:#14ae52; background:#fff; box-shadow:0 6px 14px rgba(22,77,44,.07); }
.enterprise-agent-features b,.enterprise-agent-features small { display:block; }.enterprise-agent-features b { font-size:12px; }.enterprise-agent-features small { margin-top:4px; color:#596575; font-size:10px; line-height:1.48; }
.enterprise-orchestrator { position:absolute; left:30px; right:30px; bottom:32px; height:325px; }
.orchestrator-ring { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:250px; height:250px; border:0; border-radius:50%; transform:translate(-50%,-50%); }
.orchestrator-ring::before { content:""; position:absolute; inset:0; z-index:0; border:2px dashed #28bd66; border-radius:50%; opacity:.96; animation:orchestratorRingSpin 5.5s linear infinite; pointer-events:none; }
.orchestrator-ring::after { display:none; }
.orchestrator-phone { position:relative; z-index:1; }
.orchestrator-phone { display:grid; place-items:center; width:96px; height:178px; border:4px solid #111; border-radius:20px; background:linear-gradient(180deg,#fff,#f7fff9); box-shadow:0 17px 35px rgba(20,71,43,.18); }
.orchestrator-bujji { position:relative; display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:radial-gradient(circle,#bcffd1,#eafff0 67%,transparent 69%); box-shadow:0 0 32px rgba(42,218,103,.42); animation:orchestratorPulse 2.4s ease-in-out infinite; }.orchestrator-bujji img { width:52px; height:52px; }.orchestrator-bujji svg { position:absolute; right:-10px; top:-10px; width:31px; height:31px; padding:7px; border-radius:50%; color:#fff; background:#1fbd60; }
.orchestrator-chip { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #e0e9e4; border-radius:999px; color:#202722; background:#fff; box-shadow:0 12px 26px rgba(22,62,40,.11); font-size:9px; font-weight:800; transition:.25s; }.orchestrator-chip svg { width:16px; height:16px; color:#13ac50; }.chip-top { left:50%; top:4px; transform:translateX(-50%); }.chip-bottom { left:50%; bottom:2px; transform:translateX(-50%); }.chip-left { left:0; top:50%; transform:translateY(-50%); }.chip-right { right:0; top:50%; transform:translateY(-50%); }
.enterprise-orchestrator[data-active-feature="context"] .chip-top,.enterprise-orchestrator[data-active-feature="handoff"] .chip-bottom,.enterprise-orchestrator[data-active-feature="always"] .chip-right { color:#087e3d; border-color:#8fdcab; background:#edfbf2; box-shadow:0 0 0 5px rgba(35,191,92,.08),0 12px 26px rgba(22,62,40,.11); }

@keyframes enterpriseFloat { 50% { transform:translateY(-8px); } }
@keyframes enterpriseOrbit { to { transform:translate(-50%,-48%) rotate(360deg); } }
@keyframes orchestratorPulse { 50% { transform:scale(1.06); filter:brightness(1.06); } }
@keyframes orchestratorRingSpin { to { transform:rotate(360deg); } }

@media (max-width:1220px) {
  .enterprise-agent-card { grid-template-columns:1fr 1.18fr; }
  .enterprise-agent-panel { grid-column:1/-1; min-height:620px; border-top:1px solid #e8eeea; border-left:0; }
  .enterprise-orchestrator { left:46%; right:6%; }.enterprise-agent-features { max-width:44%; }
}
@media (max-width:820px) {
  .enterprise-agent-card { display:block; }
  .enterprise-data-panel,.enterprise-agent-panel { padding:28px 20px; border:0; }
  .enterprise-phone-zone { min-height:860px; }
  .enterprise-agent-panel { min-height:720px; }
  .enterprise-agent-features { max-width:none; }
  .enterprise-orchestrator { left:10px; right:10px; bottom:25px; height:330px; }
}
@media (max-width:480px) {
  .enterprise-data-panel h2,.enterprise-agent-panel h2 { font-size:30px; }
  .enterprise-process-step { grid-template-columns:58px 1fr; padding:15px; }.enterprise-step-icon { width:58px; height:72px; }.enterprise-step-number { left:15px; }
  .enterprise-phone { width:310px; height:730px; }.enterprise-orbit-ring { width:390px; }.enterprise-orbit-tag { width:62px; padding:11px 5px; }.enterprise-orbit-tag.tag-pdf,.enterprise-orbit-tag.tag-url,.enterprise-orbit-tag.tag-db { left:3px; }.enterprise-orbit-tag.tag-code,.enterprise-orbit-tag.tag-api,.enterprise-orbit-tag.tag-kb { right:3px; }
  .enterprise-private-strip { gap:5px; padding:9px 10px; font-size:8px; }
  .chip-left { left:-2px; }.chip-right { right:-2px; }.orchestrator-chip { padding:8px 9px; font-size:7.5px; }
}
@media (prefers-reduced-motion:reduce) { .enterprise-orbit-ring,.enterprise-orbit-tag,.orchestrator-bujji,.orchestrator-ring::before,.orchestrator-ring::after { animation:none!important; } }

/* Private business knowledge workspace */
#brain { position:relative; overflow:hidden; background:linear-gradient(180deg,#f7faf7,#fffdf8); }
#brain::before { content:""; position:absolute; width:650px; height:650px; left:-250px; top:160px; border-radius:50%; background:rgba(37,211,102,.08); filter:blur(35px); }
.brain-heading { position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:end; margin-bottom:46px; }
.brain-heading .section-eyebrow { margin-bottom:18px; }
.brain-heading h2 { color:#13281f; font-size:clamp(40px,5.2vw,70px); line-height:.98; letter-spacing:-.065em; }
.brain-heading > p { max-width:500px; padding-bottom:4px; color:#607269; font-size:15px; line-height:1.75; }
.knowledge-workspace { position:relative; display:grid; grid-template-columns:255px minmax(390px,1fr) 255px; overflow:hidden; min-height:580px; border:1px solid #dce8e0; border-radius:32px; background:#f7faf8; box-shadow:0 38px 100px rgba(21,69,44,.13); }
.knowledge-library { display:flex; flex-direction:column; padding:22px 16px; border-right:1px solid #dce8e0; background:linear-gradient(165deg,#eaf7ef,#fbf6e9); }
.library-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 6px 16px; color:#314a3e; font-size:11px; font-weight:850; }
.library-title button { width:28px; height:28px; border:1px solid #d5e5db; border-radius:9px; color:#087d3e; background:#fff; font-size:16px; cursor:pointer; transition:.22s var(--ease-spring); }
.library-title button:hover { transform:rotate(90deg) scale(1.06); background:#e4f8ec; }
.knowledge-files { display:grid; gap:8px; }
.knowledge-file { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:9px; width:100%; padding:10px; border:1px solid transparent; border-radius:14px; color:#3d5348; background:rgba(255,255,255,.56); text-align:left; cursor:pointer; transition:.25s var(--ease-spring); }
.knowledge-file:hover,.knowledge-file.active { transform:translateX(3px); border-color:#d3e7da; background:#fff; box-shadow:0 10px 26px rgba(24,74,47,.08); }
.file-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; color:#fff; font-size:10px; font-weight:900; }
.file-icon.sheet { background:#1c9b56; }.file-icon.pdf { background:#f36f52; }.file-icon.doc { background:#4a83e7; }
.knowledge-file b,.knowledge-file small { display:block; }
.knowledge-file b { font-size:10.5px; }.knowledge-file small { margin-top:2px; color:#8a9991; font-size:8px; }
.knowledge-file > i { color:#26b566; font-size:10px; font-style:normal; }
.local-proof { position:relative; display:grid; grid-template-columns:37px 1fr; align-items:center; gap:10px; margin-top:auto; padding:13px; overflow:hidden; border:1px solid rgba(37,211,102,.17); border-radius:16px; color:#fff; background:#103c29; }
.proof-lock { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; color:#0d4028; background:#80e6a5; font-weight:900; }
.local-proof b,.local-proof small { display:block; }.local-proof b { font-size:9.5px; }.local-proof small { margin-top:2px; color:#a8c5b5; font-size:7.5px; line-height:1.35; }
.local-proof > i { position:absolute; right:10px; top:10px; width:6px; height:6px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.11); }
.knowledge-chat { display:flex; flex-direction:column; min-width:0; padding:22px; background:radial-gradient(circle at 50% 30%,#fff,#f3f8f5 72%); }
.knowledge-chat-top { display:flex; align-items:center; justify-content:space-between; color:#314a3e; font-size:10.5px; font-weight:850; }
.knowledge-chat-top > span:first-child { display:flex; align-items:center; gap:8px; }
.knowledge-chat-top img { width:28px; height:28px; border-radius:9px; }
.answer-ready { display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:999px; color:#14834d; background:#e7f8ed; font-size:8.5px; }
.answer-ready i { width:6px; height:6px; border-radius:50%; background:#25d366; }
.business-switcher { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:20px 0; padding:5px; border:1px solid #e0e9e3; border-radius:14px; background:#fff; }
.business-switcher button { padding:9px 7px; border:0; border-radius:10px; color:#77887e; background:transparent; font:750 9px var(--font); cursor:pointer; transition:.25s var(--ease-spring); }
.business-switcher button.active { color:#fff; background:#174d35; box-shadow:0 8px 20px rgba(23,77,53,.2); }
.knowledge-conversation { display:flex; flex-direction:column; gap:16px; flex:1; padding:8px 3px 18px; }
.team-question { align-self:flex-end; max-width:82%; }
.team-question > span { display:block; margin:0 7px 5px; color:#91a097; font-size:7.5px; text-align:right; }
.team-question p { padding:12px 14px; border-radius:16px 16px 4px 16px; color:#fff; background:#174d35; font-size:11px; line-height:1.5; box-shadow:0 10px 24px rgba(23,77,53,.16); }
.knowledge-answer { display:grid; grid-template-columns:32px 1fr; gap:10px; max-width:94%; }
.answer-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#0b3f28; background:linear-gradient(135deg,#8df0b0,#f4c95d); font-weight:900; }
.knowledge-answer > div > span { color:#83938a; font-size:7.5px; }
.knowledge-answer p { margin-top:5px; padding:13px 14px; border:1px solid #dde8e1; border-radius:4px 16px 16px; color:#344b40; background:#fff; font-size:11px; line-height:1.55; box-shadow:0 10px 28px rgba(22,63,42,.07); transition:.25s; }
.knowledge-answer.thinking p { opacity:.45; filter:blur(2px); transform:translateY(4px); }
.answer-sources { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.answer-sources button { padding:5px 7px; border:1px solid #dae7df; border-radius:7px; color:#287156; background:#f5faf7; font:700 7.5px var(--font); cursor:pointer; }
.knowledge-prompt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 7px 7px 13px; border:1px solid #dbe7df; border-radius:14px; color:#9aa69f; background:#fff; box-shadow:0 12px 30px rgba(20,61,40,.07); font-size:9.5px; }
.knowledge-prompt button { display:flex; align-items:center; gap:7px; padding:8px 10px; border:0; border-radius:10px; color:#fff; background:#128c7e; font:750 9px var(--font); cursor:pointer; transition:.2s; }
.knowledge-prompt button:hover { transform:translateY(-1px); background:#075e54; }
.knowledge-prompt button i { font-style:normal; }
.knowledge-insight { display:flex; flex-direction:column; padding:22px 17px; border-left:1px solid #dce8e0; background:#fff; }
.insight-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#3c5348; font-size:10px; font-weight:850; }
.insight-head i { padding:4px 7px; border-radius:999px; color:#14834d; background:#e8f8ed; font-size:7px; font-style:normal; }
.insight-primary { display:grid; justify-items:center; margin:28px 0 24px; text-align:center; }
.insight-primary > span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#087d3e; background:#dff8e9; font-size:18px; font-weight:900; }
.insight-primary b { margin-top:10px; color:#17392a; font-size:40px; line-height:1; letter-spacing:-.05em; }
.insight-primary small { margin-top:5px; color:#7e8f85; font-size:8.5px; }
.insight-list { display:grid; gap:14px; }
.insight-list > span { position:relative; display:grid; grid-template-columns:1fr auto; gap:6px; padding-bottom:9px; color:#40564b; font-size:8.5px; }
.insight-list > span::after,.insight-list > span i { content:""; position:absolute; left:0; bottom:0; height:4px; border-radius:99px; }
.insight-list > span::after { width:100%; background:#edf2ef; }
.insight-list > span i { z-index:1; width:var(--value); background:linear-gradient(90deg,#25d366,#f4c95d); }
.insight-list small { color:#789087; }
.insight-action { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:11px 12px; border:1px solid #d9e7de; border-radius:12px; color:#176244; background:#f3faf6; font:750 9px var(--font); cursor:pointer; transition:.22s; }
.insight-action:hover { transform:translateY(-2px); color:#fff; background:#176244; }
.knowledge-steps { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; padding:20px; border:1px solid #e1eae4; border-radius:20px; background:rgba(255,255,255,.74); }
.knowledge-steps > span { display:grid; grid-template-columns:34px 1fr; align-items:center; column-gap:10px; }
.knowledge-steps i { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#fff; background:#174d35; font-style:normal; font-size:10px; font-weight:850; }
.knowledge-steps b { color:#334c40; font-size:10px; }.knowledge-steps small { color:#89978f; font-size:8px; }
.knowledge-steps em { color:#8fc5a7; font-style:normal; }

@media (max-width:1040px) {
  .knowledge-workspace { grid-template-columns:230px 1fr; }
  .knowledge-insight { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; border-top:1px solid #dce8e0; border-left:0; }
  .insight-head { display:none; }.insight-primary { margin:0; grid-template-columns:auto auto; column-gap:10px; align-items:center; }
  .insight-primary > span { grid-row:1/3; }.insight-primary b { margin:0; font-size:30px; }.insight-primary small { margin:0; }
  .insight-list { grid-template-columns:repeat(3,1fr); }.insight-action { margin:0; }
}
@media (max-width:760px) {
  .brain-heading { grid-template-columns:1fr; gap:18px; }
  .knowledge-workspace { grid-template-columns:1fr; border-radius:24px; }
  .knowledge-library { border-right:0; border-bottom:1px solid #dce8e0; }
  .knowledge-files { grid-template-columns:1fr; }
  .knowledge-chat { padding:18px 14px; }
  .knowledge-insight { grid-column:auto; grid-template-columns:1fr; }
  .insight-list { grid-template-columns:1fr; }.insight-action { margin-top:10px; }
  .knowledge-steps { align-items:stretch; flex-direction:column; }
  .knowledge-steps em { display:none; }
}

/* Light AI story and phone-led desktop pairing */
.ai-section { background:linear-gradient(145deg,#f7f5ff 0%,#eef9f4 52%,#fffaf0 100%); }
.ai-section::before { opacity:.32; background-image:radial-gradient(rgba(108,92,231,.12) .8px,transparent .8px); background-size:20px 20px; mask-image:linear-gradient(#000,transparent 88%); }
.ai-section .section-eyebrow { color:#6452b8; border-color:#ded8f8; background:#f0edff; }
.ai-section .sec-head h2 { color:#18261f; }
.ai-section .sec-head p.lead { color:#64746b; }
.ai-workbench { border-color:#dedfec; background:rgba(255,255,255,.72); box-shadow:0 35px 90px rgba(66,57,118,.13); }
.workbench-pill { color:#6857bb; border-color:#ddd5ff; background:#f0edff; }
.workbench-pill i { background:#7c6ee6; box-shadow:0 0 0 5px rgba(124,110,230,.11); }
.ai-workbench h3 { color:#182a21; }
.ai-workbench-copy > p { color:#6c7b72; }
.agent-chip { color:#635c7e; border-color:#dedbea; background:rgba(255,255,255,.8); }
.agent-chip:hover,.agent-chip.active { color:#fff; border-color:#6d5bd0; background:#6d5bd0; box-shadow:0 9px 24px rgba(109,91,208,.22); }
.ai-section .card { background:rgba(255,255,255,.72); border-color:#e1e4e1; box-shadow:0 16px 45px rgba(47,61,53,.07); }
.ai-section .card:hover { border-color:#cfc7f4; box-shadow:0 24px 60px rgba(83,69,155,.12); }
.ai-section .card h3 { color:#1b3126; }
.ai-section .card p { color:#65756c; }
.ai-section .card .card-ico { background:linear-gradient(135deg,#ece8ff,#e5f8ec); }
.ai-section .prov-pill { color:#4d6257; border-color:#dde7e1; background:rgba(255,255,255,.75); box-shadow:0 8px 24px rgba(44,68,55,.05); }
.ai-section .prov-pill .pdot { background:#7c6ee6; box-shadow:0 0 10px rgba(124,110,230,.35); }

.desk-section { position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f6f3ff 45%,#eef8f3 100%); }
.desk-section::before { content:""; position:absolute; width:680px; height:680px; right:-250px; top:80px; border-radius:50%; background:rgba(124,110,230,.10); filter:blur(35px); }
.desktop-story { position:relative; display:grid; grid-template-columns:.82fr 1.18fr; gap:54px; align-items:center; }
.desktop-kicker { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #dcd5fb; border-radius:999px; color:#6251b8; background:#f0edff; font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.desktop-kicker i { width:7px; height:7px; border-radius:50%; background:#7c6ee6; box-shadow:0 0 0 5px rgba(124,110,230,.11); }
.desktop-copy h2 { margin:20px 0 17px; color:#182a21; font-size:clamp(39px,4.7vw,64px); line-height:.98; letter-spacing:-.065em; }
.desktop-copy h2 span { color:#6d5bd0; }
.desktop-copy > p { max-width:510px; color:#65766d; font-size:15px; line-height:1.75; }
.desktop-platforms { display:flex; flex-wrap:wrap; gap:8px; margin:23px 0 30px; }
.desktop-platforms > span { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #e0e3e1; border-radius:11px; color:#53665c; background:rgba(255,255,255,.76); box-shadow:0 8px 22px rgba(39,62,49,.05); }
.desktop-platforms b { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:#5c4bb7; background:#efecff; font-size:11px; }
.desktop-platforms small { font-size:9px; font-weight:750; }
.desktop-outcomes { display:grid; gap:8px; }
.desktop-outcomes > span { display:grid; grid-template-columns:38px 1fr; align-items:center; column-gap:11px; padding:11px 12px; border:1px solid transparent; border-radius:14px; transition:.25s var(--ease-spring); }
.desktop-outcomes > span:hover { transform:translateX(5px); border-color:#dedfea; background:rgba(255,255,255,.65); }
.desktop-outcomes i { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#5e4fb6; background:#eae6ff; font-style:normal; font-weight:900; }
.desktop-outcomes b { color:#2b4136; font-size:11.5px; }
.desktop-outcomes small { color:#829188; font-size:9px; }
.pairing-demo { overflow:hidden; border:1px solid #dedee9; border-radius:32px; background:rgba(255,255,255,.76); box-shadow:0 38px 100px rgba(72,60,132,.16); backdrop-filter:blur(18px); }
.pairing-demo-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #e4e5e7; color:#32473d; background:rgba(255,255,255,.72); font-size:10px; font-weight:850; }
.pairing-demo-head > span { display:flex; align-items:center; gap:8px; }
.pairing-demo-head i { width:7px; height:7px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.11); }
.pairing-demo-head small { color:#87968e; font-size:8px; }
.pairing-devices { position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; padding:32px 28px 24px; background:radial-gradient(circle at 50% 42%,#fff 0%,#f0eef9 55%,#e9f5ee 100%); }
.pairing-devices::before { content:""; position:absolute; width:210px; height:210px; border:1px dashed rgba(109,91,208,.2); border-radius:50%; }
.pair-phone { position:relative; z-index:2; overflow:hidden; width:245px; height:476px; border:7px solid #202523; border-radius:36px; background:#fff; box-shadow:0 28px 65px rgba(22,43,31,.26); transition:.4s var(--ease-spring); }
.pair-phone-status { position:relative; display:flex; align-items:center; justify-content:space-between; height:25px; padding:0 12px; color:#28342e; font-size:7.5px; font-weight:850; }
.pair-phone-status i { position:absolute; top:0; left:50%; width:78px; height:16px; border-radius:0 0 12px 12px; background:#202523; transform:translateX(-50%); }
.pair-wa-title { display:grid; grid-template-columns:20px 1fr auto; align-items:center; padding:12px 13px; border-bottom:1px solid #edf0ee; color:#24362d; }
.pair-wa-title > span { font-size:22px; }.pair-wa-title b { font-size:11px; }.pair-wa-title i { font-style:normal; }
.pair-wa-body { position:relative; height:402px; overflow:hidden; padding:18px 13px; background:#fbfcfb; }
.pair-wa-hero { display:grid; justify-items:center; text-align:center; }
.pair-wa-hero > span { width:54px; height:54px; display:grid; place-items:center; margin-bottom:10px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#25d366,#128c7e); font-weight:900; box-shadow:0 12px 28px rgba(18,140,126,.25); }
.pair-wa-hero b { color:#283c32; font-size:10px; }.pair-wa-hero small { max-width:170px; margin-top:5px; color:#829088; font-size:7px; }
.pair-link-button { width:100%; margin:17px 0 15px; padding:10px; border:0; border-radius:999px; color:#fff; background:#128c7e; font:800 8px var(--font); }
.pair-wa-list { padding-top:13px; border-top:1px solid #e7ece9; }
.pair-wa-list > span { display:grid; grid-template-columns:34px 1fr; align-items:center; column-gap:9px; }
.pair-wa-list i { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#17845d; background:#e5f8ec; font-style:normal; }
.pair-wa-list b { color:#3a5045; font-size:8px; }.pair-wa-list small { color:#89978f; font-size:6.5px; }
.pair-number-sheet { position:absolute; left:8px; right:8px; bottom:8px; padding:13px; border:1px solid #e3e7e4; border-radius:18px; background:#fff; box-shadow:0 18px 45px rgba(28,53,39,.18); transition:.4s var(--ease-spring); }
.sheet-handle { display:block; width:34px; height:3px; margin:-5px auto 9px; border-radius:99px; background:#d8ddda; }
.pair-number-sheet > b,.pair-number-sheet > small { display:block; text-align:center; }
.pair-number-sheet > b { color:#2a3e34; font-size:9px; }.pair-number-sheet > small { margin-top:3px; color:#8a9790; font-size:6px; }
.phone-pair-code { display:flex; align-items:center; justify-content:center; gap:3px; margin:11px 0 8px; }
.phone-pair-code span { width:20px; height:27px; display:grid; place-items:center; border:1px solid #d9e5dd; border-radius:6px; color:#11664b; background:#f1faf5; font-size:10px; font-weight:900; }
.phone-pair-code > i { color:#9aa59f; font-style:normal; }
.pair-number-sheet > em { display:flex; align-items:center; justify-content:center; gap:6px; color:#1c8156; font-size:6.5px; font-style:normal; font-weight:750; }
.pair-number-sheet > em i { width:5px; height:5px; border-radius:50%; background:#25d366; }
.pair-phone-home { position:absolute; left:50%; bottom:5px; width:80px; height:4px; border-radius:99px; background:#202523; transform:translateX(-50%); }
.desktop-app-card { position:relative; z-index:1; width:260px; margin-left:-18px; overflow:hidden; border:1px solid #d9dbe4; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(57,48,107,.18); transition:.4s var(--ease-spring); }
.desktop-app-top { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e7e8eb; color:#33463c; font-size:8px; font-weight:850; }
.desktop-app-top > span { display:flex; align-items:center; gap:6px; }.desktop-app-top img { width:20px; height:20px; border-radius:6px; }.desktop-app-top > i { color:#a6ada9; font-size:5px; font-style:normal; }
.desktop-app-body { display:grid; justify-items:center; padding:20px 18px; text-align:center; }
.desktop-device-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#5d4cb7; background:#ece8ff; font-size:18px; }
.desktop-app-body > b { margin-top:10px; color:#283d32; font-size:11px; }.desktop-app-body > small { max-width:180px; margin-top:4px; color:#85928b; font-size:7px; }
.desktop-code-line { display:flex; align-items:center; gap:7px; margin:14px 0; color:#5e4db8; font-size:17px; font-weight:900; letter-spacing:.08em; }
.desktop-code-line i { width:9px; height:1px; background:#b8b0dd; }
.desktop-connection { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:7px; border-radius:9px; color:#6d7d75; background:#f2f5f3; font-size:7px; font-weight:750; }
.desktop-connection i { width:6px; height:6px; border-radius:50%; background:#f4b740; }
.pairing-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:7px; border-top:1px solid #e1e5e2; background:#fff; }
.pairing-steps button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 7px; border:0; border-radius:11px; color:#7b8982; background:transparent; cursor:pointer; transition:.25s var(--ease-spring); }
.pairing-steps button span { width:21px; height:21px; display:grid; place-items:center; border-radius:7px; background:#eef2ef; font-size:8px; }
.pairing-steps button b { font-size:8px; }
.pairing-steps button.active { color:#fff; background:#6d5bd0; box-shadow:0 9px 24px rgba(109,91,208,.2); }
.pairing-steps button.active span { color:#5d4bb6; background:#fff; }
.pairing-demo.step-2 .pair-number-sheet { transform:translateY(-8px) scale(1.02); box-shadow:0 22px 50px rgba(109,91,208,.22); }
.pairing-demo.step-2 .desktop-app-card { transform:translateX(8px); }
.pairing-demo.step-3 .pair-phone { transform:translateX(-6px) rotate(-1deg); }
.pairing-demo.step-3 .desktop-app-card { transform:translateX(8px) scale(1.03); border-color:#8fdfad; box-shadow:0 25px 65px rgba(37,170,94,.2); }
.pairing-demo.step-3 .desktop-connection { color:#14794c; background:#e6f8ed; }
.pairing-demo.step-3 .desktop-connection i { background:#25d366; box-shadow:0 0 0 4px rgba(37,211,102,.12); }
.desktop-proof { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.desktop-proof > span { padding:18px; border:1px solid #e0e4e2; border-radius:17px; background:rgba(255,255,255,.76); text-align:center; box-shadow:0 10px 30px rgba(35,60,46,.05); }
.desktop-proof b,.desktop-proof small { display:block; }.desktop-proof b { color:#5d4cb7; font-size:19px; letter-spacing:-.03em; }.desktop-proof small { margin-top:3px; color:#85928b; font-size:8px; }

@media (max-width:1050px) {
  .desktop-story { grid-template-columns:1fr; }
  .desktop-copy { max-width:760px; }
}
@media (max-width:700px) {
  .pairing-devices { min-height:700px; flex-direction:column; gap:18px; }
  .desktop-app-card { width:min(280px,94%); margin:0; }
  .pairing-steps { grid-template-columns:1fr; }
  .pairing-steps button { justify-content:flex-start; }
  .desktop-proof { grid-template-columns:1fr 1fr; }
}

/* Real Bujji companion showcase */
.bujji-companion { position:relative; display:grid; grid-template-columns:1fr .82fr; gap:46px; align-items:center; margin-top:50px; padding:clamp(32px,5vw,64px); overflow:hidden; border:1px solid #dedee9; border-radius:34px; background:linear-gradient(135deg,#f6f3ff 0%,#eefaf4 58%,#fff8e9 100%); box-shadow:0 38px 100px rgba(62,51,119,.12); }
.bujji-companion::before { content:""; position:absolute; width:420px; height:420px; right:-80px; bottom:-140px; border-radius:50%; background:rgba(37,211,102,.13); filter:blur(22px); }
.companion-copy { position:relative; z-index:2; }
.companion-kicker { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #dcd5fb; border-radius:999px; color:#6251b8; background:rgba(255,255,255,.65); font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.companion-kicker i { width:7px; height:7px; border-radius:50%; background:#7c6ee6; box-shadow:0 0 0 5px rgba(124,110,230,.11); }
.companion-copy h3 { margin:19px 0 15px; color:#182b21; font-size:clamp(35px,4.3vw,58px); line-height:1; letter-spacing:-.06em; }
.companion-copy h3 span { color:#6d5bd0; }
.companion-copy > p { max-width:570px; color:#66776e; font-size:14.5px; line-height:1.7; }
.companion-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:26px; max-width:510px; }
.companion-actions button { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #dde3df; border-radius:13px; color:#53665c; background:rgba(255,255,255,.72); font-family:var(--font); cursor:pointer; transition:.25s var(--ease-spring); }
.companion-actions button:hover { transform:translateY(-2px); border-color:#d2caef; }
.companion-actions button.active { color:#fff; border-color:#6d5bd0; background:#6d5bd0; box-shadow:0 12px 30px rgba(109,91,208,.22); }
.companion-actions button span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(109,91,208,.10); }
.companion-actions button.active span { background:rgba(255,255,255,.16); }
.companion-actions button b { font-size:10.5px; }
.companion-small-features { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:18px; color:#839189; font-size:8.5px; font-weight:700; }
.companion-small-features i { width:4px; height:4px; border-radius:50%; background:#83d5a2; }
.companion-stage { position:relative; min-height:480px; display:grid; place-items:center; isolation:isolate; }
.companion-stage::before { content:""; position:absolute; z-index:-2; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.55) 42%,transparent 70%); }
.companion-orbit { position:absolute; z-index:-1; border:1px dashed rgba(109,91,208,.19); border-radius:50%; animation:companionSpin 18s linear infinite; }
.orbit-one { width:330px; height:330px; }.orbit-two { width:410px; height:410px; animation-direction:reverse; animation-duration:28s; }
.companion-orbit::before { content:""; position:absolute; width:10px; height:10px; top:18%; left:4%; border-radius:50%; background:#7c6ee6; box-shadow:0 0 0 7px rgba(124,110,230,.09); }
.orbit-two::before { top:auto; left:auto; right:8%; bottom:14%; background:#25d366; box-shadow:0 0 0 7px rgba(37,211,102,.09); }
@keyframes companionSpin { to { transform:rotate(360deg); } }
.real-bujji { width:min(390px,90%); filter:drop-shadow(0 26px 35px rgba(30,76,50,.22)); animation:bujjiFloat 3.6s ease-in-out infinite; transition:.35s var(--ease-spring); }
@keyframes bujjiFloat { 50% { transform:translateY(-10px) rotate(1deg); } }
.companion-stage.celebrate .real-bujji { animation:bujjiCelebrate .7s var(--ease-snap); }
@keyframes bujjiCelebrate { 35% { transform:translateY(-24px) rotate(-5deg) scale(1.06); } 65% { transform:translateY(-10px) rotate(5deg); } }
.companion-stage.focus .real-bujji { filter:drop-shadow(0 26px 35px rgba(109,91,208,.3)) saturate(.85); }
.companion-stage.break .real-bujji { transform:rotate(-3deg) scale(.97); }
.companion-bubble { position:absolute; z-index:3; top:40px; right:8px; min-width:165px; padding:12px 14px; border:1px solid #e0e2e8; border-radius:17px 17px 17px 4px; color:#32483d; background:#fff; box-shadow:0 16px 40px rgba(41,61,50,.12); transition:.3s var(--ease-spring); }
.companion-bubble::after { content:""; position:absolute; left:17px; bottom:-7px; width:13px; height:13px; border-right:1px solid #e0e2e8; border-bottom:1px solid #e0e2e8; background:#fff; transform:rotate(45deg); }
.companion-bubble b,.companion-bubble small { display:block; }.companion-bubble b { font-size:11px; }.companion-bubble small { margin-top:3px; color:#89968f; font-size:8px; }
.companion-spark { position:absolute; z-index:2; color:#f1b932; font-size:18px; animation:sparkPulse 1.8s ease-in-out infinite; }
.spark-one { left:9%; top:26%; }.spark-two { right:5%; bottom:29%; animation-delay:.7s; }
@keyframes sparkPulse { 50% { transform:scale(1.5) rotate(25deg); opacity:.45; } }
.companion-status { position:absolute; z-index:3; left:18px; right:18px; bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid rgba(255,255,255,.7); border-radius:16px; background:rgba(255,255,255,.8); box-shadow:0 15px 40px rgba(38,65,50,.1); backdrop-filter:blur(12px); }
.companion-status > span { display:grid; grid-template-columns:8px 1fr; column-gap:8px; align-items:center; }
.companion-status > span > i { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:#25d366; box-shadow:0 0 0 5px rgba(37,211,102,.11); }
.companion-status b,.companion-status small { display:block; }.companion-status b { color:#354c40; font-size:9.5px; }.companion-status small { margin-top:2px; color:#8a9890; font-size:7.5px; }
.companion-status em { padding:5px 8px; border-radius:999px; color:#5e4db8; background:#eeeaff; font-size:7.5px; font-style:normal; font-weight:800; }

@media (max-width:900px) {
  .bujji-companion { grid-template-columns:1fr; }
  .companion-copy { max-width:720px; }
}
@media (max-width:600px) {
  .bujji-companion { padding:26px 18px; border-radius:26px; }
  .companion-actions { grid-template-columns:1fr 1fr; }
  .companion-stage { min-height:410px; }
  .real-bujji { width:300px; }
  .orbit-one { width:270px; height:270px; }.orbit-two { width:340px; height:340px; }
  .companion-bubble { top:20px; right:0; }
}

/* Apple-inspired liquid-glass navigation */
.nav.visible {
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(244,247,250,.58) 48%,rgba(255,255,255,.72));
  border-color:rgba(255,255,255,.9);
  box-shadow:0 22px 60px rgba(30,42,55,.16),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(120,135,150,.12);
  backdrop-filter:blur(32px) saturate(185%);
  -webkit-backdrop-filter:blur(32px) saturate(185%);
}
.nav.visible::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(280px 80px at 18% -20%,rgba(255,255,255,.95),transparent 70%),radial-gradient(260px 90px at 76% 120%,rgba(128,151,255,.18),transparent 72%);
}
.nav.visible::after {
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  left:-12%;
  width:38%;
  height:220%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:rotate(10deg);
  animation:navGlassSweep 9s ease-in-out infinite;
}
@keyframes navGlassSweep {
  0%,68%,100% { transform:translateX(-40%) rotate(10deg); opacity:0; }
  76% { opacity:.85; }
  90% { transform:translateX(330%) rotate(10deg); opacity:0; }
}
.nav.visible .nav-logo { color:#17202a; text-shadow:0 1px 0 rgba(255,255,255,.9); }
.nav.visible .nav-logo img { border:1px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(55,70,88,.14),inset 0 1px rgba(255,255,255,.8); }
.nav.visible .nav-links > a:not(.btn-nav) { color:rgba(31,42,54,.68); }
.nav.visible .nav-links > a:not(.btn-nav):hover,
.nav.visible .nav-links > a.active:not(.btn-nav) {
  color:#111923;
  background:rgba(255,255,255,.58);
  box-shadow:0 5px 16px rgba(49,63,79,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.nav.visible .nav-links > a.active:not(.btn-nav)::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:16px;
  height:2px;
  border-radius:99px;
  background:#6d6fe8;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(109,111,232,.45);
}
.nav.visible .nav-links > a:not(.btn-nav) { position:relative; }
.nav.visible .nav-search {
  color:#4e5a68;
  border-color:rgba(115,130,148,.18);
  background:rgba(255,255,255,.48);
  box-shadow:inset 0 1px rgba(255,255,255,.9);
}
.nav.visible .nav-search:hover { color:#18212b; background:rgba(255,255,255,.72); }
.nav.visible .nav-search kbd { color:#66717d; border-color:rgba(108,122,139,.2); background:rgba(236,239,243,.7); }
.nav.visible .btn-nav {
  color:#fff!important;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg,#6e78f7,#7758d9 52%,#5a46c5);
  box-shadow:0 12px 28px rgba(91,73,205,.28),inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 1px rgba(44,30,116,.25);
}
.nav.visible .btn-nav:hover { box-shadow:0 16px 34px rgba(91,73,205,.34),inset 0 1px 0 rgba(255,255,255,.6); }
.nav.visible .hamburger span { background:#25303b; }
.mobile-menu {
  color:#1d2731;
  background:rgba(248,250,252,.82);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 70px rgba(30,42,55,.18),inset 0 1px rgba(255,255,255,.9);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
}
.mobile-menu a { color:#293541; border-bottom-color:rgba(104,119,136,.12); }

@media (prefers-reduced-motion:reduce) {
  .nav.visible::after { animation:none; }
}

/* Structured footer */
.footer { position:relative; padding:56px 0 28px; color:#4c5d54; background:#f7f8f7; border-top:1px solid #e4e9e6; }
.footer-intro { display:grid; grid-template-columns:auto minmax(260px,1fr) auto; align-items:center; gap:28px; padding-bottom:30px; border-bottom:1px solid #e2e8e4; }
.footer .footer-brand { margin:0; color:#17271f; font-size:18px; }
.footer .footer-brand img { border:1px solid #fff; box-shadow:0 7px 18px rgba(36,57,45,.12); }
.footer-intro > p { max-width:470px; color:#718078; font-size:12px; }
.footer-platforms { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.footer-platforms span { padding:6px 9px; border:1px solid #dfe6e1; border-radius:9px; color:#67766e; background:#fff; font-size:8px; font-weight:750; }
.footer .footer-grid { grid-template-columns:repeat(4,1fr); gap:50px; margin:0; padding:36px 0 34px; }
.footer h5 { margin-bottom:13px; color:#273b31; font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.footer-col a { color:#74837b; font-size:10px; padding:5px 0; }
.footer-col a:hover { color:#6251b8; transform:translateX(2px); }
.footer .footer-bottom { padding-top:20px; border-top:1px solid #e2e8e4; color:#8a9690; font-size:9px; }
.footer-legal { display:flex; gap:17px; align-items:center; }
.footer-legal a { color:#728078; }.footer-legal a:hover { color:#6251b8; }

@media (max-width:900px) {
  .footer-intro { grid-template-columns:1fr; gap:13px; }
  .footer-platforms { justify-content:flex-start; }
}
@media (max-width:620px) {
  .footer .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer .footer-bottom { align-items:flex-start; flex-direction:column; }
}

/* Lucide Animated-inspired floating navigation dock. */
.wm-dock {
  gap:7px;
  padding:8px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:rgba(250,252,253,.78);
  box-shadow:0 24px 70px rgba(38,49,62,.17),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
}
.wm-dock a {
  width:46px;
  height:46px;
  overflow:visible;
  border:1px solid transparent;
  border-radius:15px;
  color:#68747f;
  background:transparent;
  transform-origin:50% 100%;
  transition:width .28s var(--ease-spring),transform .28s var(--ease-spring),color .2s ease,background .2s ease,box-shadow .2s ease;
}
.wm-dock a:hover,
.wm-dock a.active {
  width:52px;
  color:var(--dock-accent);
  border-color:rgba(255,255,255,.92);
  background:color-mix(in srgb,var(--dock-accent) 12%,white);
  box-shadow:0 12px 28px color-mix(in srgb,var(--dock-accent) 18%,transparent),inset 0 1px 0 #fff;
  transform:translateY(-8px) scale(1.03);
}
.wm-dock a::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--dock-accent);
  box-shadow:0 0 9px var(--dock-accent);
  transform:translateX(-50%) scale(0);
  transition:transform .25s var(--ease-snap);
}
.wm-dock a.active::before { transform:translateX(-50%) scale(1); }
.la-icon {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.la-home-door,.la-chart-line { stroke-dasharray:28; stroke-dashoffset:0; }
.wm-dock a:hover .la-home-door,.wm-dock a.active .la-home-door { animation:laDraw .62s ease both; }
.wm-dock a:hover .la-message,.wm-dock a.active .la-message { animation:laMessage .52s ease-in-out both; }
.la-message-dot { opacity:.55; stroke-width:2.5; }
.wm-dock a:hover .la-message-dot,.wm-dock a.active .la-message-dot { animation:laDots .75s ease both; }
.wm-dock a:hover .la-sparkle-main,.wm-dock a.active .la-sparkle-main { animation:laSparkle 1s ease both; }
.wm-dock a:hover .la-star,.wm-dock a.active .la-star { animation:laBlink 1.25s ease-in-out infinite; }
.wm-dock a:hover .la-star-two,.wm-dock a.active .la-star-two { animation-delay:.18s; }
.wm-dock a:hover .la-chart-line,.wm-dock a.active .la-chart-line { animation:laDraw .55s ease both; }
.wm-dock a:hover .la-chart-line.l2,.wm-dock a.active .la-chart-line.l2 { animation-delay:.08s; }
.wm-dock a:hover .la-chart-line.l3,.wm-dock a.active .la-chart-line.l3 { animation-delay:.16s; }
.la-help-mark { transform-origin:12px 12px; }
.wm-dock a:hover .la-help-mark,.wm-dock a.active .la-help-mark { animation:laHelp .5s ease-in-out both; }
@keyframes laDraw { 0% { stroke-dashoffset:28; opacity:0; } 100% { stroke-dashoffset:0; opacity:1; } }
@keyframes laMessage { 0%,100% { transform:rotate(0) scale(1); } 35% { transform:rotate(-7deg) scale(1.05); } 70% { transform:rotate(7deg) scale(1.05); } }
@keyframes laDots { 0%,100% { opacity:.55; } 45% { opacity:1; stroke-width:3.5; } }
@keyframes laSparkle { 0%,100% { transform:translateY(0); fill:transparent; } 45% { transform:translateY(-1px); fill:currentColor; } }
@keyframes laBlink { 0%,20%,100% { opacity:1; } 45%,70% { opacity:0; } }
@keyframes laHelp { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-10deg); } 55% { transform:rotate(10deg); } 78% { transform:rotate(-8deg); } }
@media (max-width:620px) {
  .wm-dock { gap:4px; padding:6px; border-radius:20px; }
  .wm-dock a { width:41px; height:41px; border-radius:13px; }
  .wm-dock a:hover,.wm-dock a.active { width:45px; transform:translateY(-4px); }
  .la-icon { width:21px; height:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .wm-dock .la-icon,.wm-dock .la-icon * { animation:none!important; }
}

/* Site-wide Lucide Animated icon language. */
svg.la-site-icon {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  color:currentColor;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  filter:none;
  transform-origin:50% 50%;
}
.section-eyebrow { display:inline-flex; align-items:center; gap:8px; }
.section-eyebrow > svg.la-site-icon {
  width:19px;
  height:19px;
  margin:0;
  color:currentColor;
}
.hs-ico,
.trust-item .ico,
.card .card-ico,
.mini-stat .ms-ico,
.choice-symbol,
.preview-tab-icon,
.template-benefits i,
.command-item > i {
  color:#52645b;
  border:1px solid rgba(112,128,119,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,247,245,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 22px rgba(42,63,52,.07);
}
.card .card-ico {
  width:52px;
  height:52px;
  padding:13px;
  border-radius:16px;
  color:#5d53bd;
  background:linear-gradient(145deg,#f5f2ff,#edf7f2);
}
.mini-stat .ms-ico {
  width:50px;
  height:50px;
  padding:12px;
  border-radius:15px;
  color:#128c7e;
}
.hs-ico { padding:10px; color:#f47b20; }
.trust-item .ico { padding:9px; color:#526c60; }
.choice-symbol,.preview-tab-icon { padding:10px; color:#087d6a; }
.template-benefits i { padding:9px; color:#087d6a; }
.command-item > i { padding:10px; color:#6251b8; }
.perk-3d { display:inline-grid; width:19px; height:19px; margin-right:6px!important; color:#f59e0b; vertical-align:middle; }
.perk-3d svg.la-site-icon { width:19px; height:19px; }
.jstep .jval { display:inline-flex; align-items:center; gap:7px; }
.jstep .jval > svg.la-site-icon { width:20px; height:20px; color:#128c7e; }
.insight-primary #insightIcon > svg.la-site-icon { width:46px; height:46px; color:#6d5bd0; }
.companion-actions button span { padding:7px; color:#6d5bd0; }
.companion-actions button.active span { color:#fff; }
.companion-actions button span > svg.la-site-icon { width:100%; height:100%; }
.ai-section .card .card-ico { color:#6554c7; background:linear-gradient(145deg,#f3f0ff,#edf8f2); }
.card:hover svg.la-site-icon > *,
.mini-stat:hover svg.la-site-icon > *,
.hs-card:hover svg.la-site-icon > *,
.trust-item:hover svg.la-site-icon > *,
.template-choice:hover svg.la-site-icon > *,
.preview-tab:hover svg.la-site-icon > *,
.template-benefits > span:hover svg.la-site-icon > *,
.command-item:hover svg.la-site-icon > *,
.companion-actions button:hover svg.la-site-icon > * {
  stroke-dasharray:70;
  animation:siteLucideDraw .72s cubic-bezier(.2,.8,.2,1) both;
}
.card:hover svg.la-site-icon,
.mini-stat:hover svg.la-site-icon,
.hs-card:hover svg.la-site-icon,
.trust-item:hover svg.la-site-icon,
.template-choice:hover svg.la-site-icon,
.preview-tab:hover svg.la-site-icon,
.companion-actions button:hover svg.la-site-icon {
  animation:siteLucideLift .55s var(--ease-snap) both;
}
.template-choice.active .choice-symbol,
.preview-tab.active .preview-tab-icon {
  color:#087d6a;
  background:linear-gradient(145deg,#f5fffa,#e7f8ef);
}
@keyframes siteLucideDraw {
  0% { stroke-dashoffset:70; opacity:.2; }
  100% { stroke-dashoffset:0; opacity:1; }
}
@keyframes siteLucideLift {
  0%,100% { transform:translateY(0) rotate(0) scale(1); }
  45% { transform:translateY(-3px) rotate(-4deg) scale(1.07); }
}
@media (prefers-reduced-motion:reduce) {
  svg.la-site-icon,svg.la-site-icon * { animation:none!important; }
}

/* ── Feature explorer: plan badges ──────────────────────────────────────────
   Every tool in the explorer carries the plan that unlocks it, so a visitor
   never reads about a feature and then discovers it is locked. */
.feature-check-grid .feature-plan-tag {
  display:inline-block; margin-top:6px; padding:2.5px 8px; border-radius:100px;
  border:1px solid transparent; font-size:8.6px; font-weight:800; font-style:normal;
  letter-spacing:.025em; text-transform:none; white-space:nowrap;
}
.feature-check-grid .feature-plan-tag[data-tier="free"] { color:#08683a; background:#dcf7e7; border-color:#b6ead0; }
.feature-check-grid .feature-plan-tag[data-tier="paid"] { color:#0d6d78; background:#dcf4f7; border-color:#b0e3ea; }
.feature-check-grid .feature-plan-tag[data-tier="top"]  { color:#8a5106; background:#fdf0d6; border-color:#f3d9a4; }

.feature-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:0 0 4px; padding:12px 0 0; border-top:1px solid #e5ece8;
}
.feature-legend > span { display:inline-flex; align-items:center; gap:7px; color:#7b8c83; font-size:9.6px; font-weight:650; }
.feature-legend i { width:9px; height:9px; border-radius:100px; border:1px solid transparent; }
.feature-legend i.free { background:#dcf7e7; border-color:#8fdcb8; }
.feature-legend i.paid { background:#dcf4f7; border-color:#8ed6e0; }
.feature-legend i.top  { background:#fdf0d6; border-color:#eec987; }
.feature-legend b { color:#3a5548; font-weight:800; }

@media (max-width:768px) {
  .feature-check-grid .feature-plan-tag { font-size:8px; padding:2px 7px; }
  .feature-legend { gap:6px 12px; }
}

/* ── "One working day" narration strip ──────────────────────────────────────
   Frames the seven feature groups as a single story before the visitor has to
   pick a tab, so the product reads as one workflow rather than a tool list. */
.day-story {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:0 0 26px; padding:0; list-style:none; counter-reset:none;
}
.day-story li {
  position:relative; display:flex; flex-direction:column; gap:7px;
  padding:20px 18px 18px; border:1px solid #e2ece6; border-radius:18px;
  background:linear-gradient(168deg,#ffffff,#f6fbf8);
  transition:.28s var(--ease-spring);
}
.day-story li::after {
  content:''; position:absolute; top:38px; right:-9px; width:16px; height:16px;
  border-top:1.5px solid #cfe3d8; border-right:1.5px solid #cfe3d8;
  transform:rotate(45deg); background:transparent;
}
.day-story li:last-child::after { display:none; }
.day-story li:hover { transform:translateY(-4px); border-color:rgba(18,140,126,.32); box-shadow:0 16px 36px rgba(18,140,126,.11); }
.day-step {
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px;
  color:#fff; background:linear-gradient(140deg,#25d366,#087d3e);
  font-size:10.5px; font-weight:850; letter-spacing:.02em;
}
.day-story b { color:#163b2b; font-size:14px; line-height:1.25; letter-spacing:-.02em; }
.day-story small { color:#6b7d73; font-size:10.6px; line-height:1.55; }
.day-story .day-link {
  margin-top:auto; padding-top:9px; color:#0d7d6f; font-size:9.5px; font-weight:800;
  font-style:normal; letter-spacing:.025em; text-transform:none;
}

@media (max-width:980px) {
  .day-story { grid-template-columns:1fr 1fr; }
  .day-story li::after { display:none; }
}
@media (max-width:600px) {
  .day-story { grid-template-columns:1fr; gap:10px; }
  .day-story li { padding:15px 14px; }
}

/* ── Industry personas ──────────────────────────────────────────────────────
   Replaces the anonymous testimonial carousel. Every card is one of the eight
   personas the extension actually ships (popup/modules/persona-manager.js). */
.industry-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;
}
.industry-card{
  display:flex; flex-direction:column; gap:9px; padding:22px 20px 20px;
  border:1px solid var(--surface-3); border-radius:18px; background:#fff;
  box-shadow:0 1px 2px rgba(16,40,30,.04);
  transition:transform .28s var(--ease-spring), box-shadow .28s ease, border-color .28s ease;
}
.industry-card:hover{
  transform:translateY(-5px); border-color:rgba(18,140,126,.3);
  box-shadow:0 18px 40px rgba(16,80,60,.11);
}
.ind-ico{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  color:#0b7a53; background:linear-gradient(145deg,#e3f7ec,#d5f0ff);
}
.ind-ico svg{width:18px; height:18px;}
.industry-card b{
  font-size:14.5px; color:#163b2b; letter-spacing:-.02em; line-height:1.25;
}
.industry-card p{margin:0; font-size:12.6px; line-height:1.55; color:#6b7d73;}

.industry-note{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; color:#6b7d73; text-align:center;
}
.industry-note b{color:#0b6f4c;}
.industry-note svg{width:15px; height:15px; color:#1a9c63; flex-shrink:0;}

@media (max-width:1000px){ .industry-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){
  .industry-grid{grid-template-columns:1fr; gap:10px;}
  .industry-card{padding:17px 16px;}
}

/* ── Pricing card feature lists ─────────────────────────────────────────────
   Each plan now states what it actually unlocks. Quotas match the entitlement
   matrix in the extension (utils/featurePolicy.js) exactly. */
.plan-feats{
  list-style:none; margin:20px 0 0; padding:18px 0 0;
  border-top:1px solid var(--surface-3); text-align:left;
  display:flex; flex-direction:column; gap:9px;
}
.plan-feats li{
  position:relative; padding-left:21px; font-size:12.4px; line-height:1.45; color:#5c6f66;
}
.plan-feats li::before{
  content:""; position:absolute; left:0; top:5px; width:13px; height:13px;
  border-radius:100px; background:#e0f5ea no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138b5c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:9px 9px;
}
.plan-feats li b{color:#12332a; font-weight:800; font-variant-numeric:tabular-nums;}
.plan-feats li.carry{
  padding-left:0; margin-bottom:1px; color:#8b9a92;
  font-size:10.5px; font-weight:800; letter-spacing:.025em; text-transform:none;
}
.plan-feats li.carry::before{display:none;}
.popular .plan-feats li::before{background-color:#d3f8e4;}
.popular .plan-feats li b{color:#0a5c3d;}

@media (max-width:980px){
  .plan-feats{margin-top:16px; padding-top:14px;}
  .plan-feats li{font-size:12.8px;}
}

/* ── Accessibility ──────────────────────────────────────────────────────────
   The page had no skip link and no visible keyboard focus state. */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:3000;
  padding:11px 18px; border-radius:100px;
  background:#25d366; color:#052e13; font-size:13.5px; font-weight:750;
  transform:translateY(-160%); transition:transform .22s ease;
}
.skip-link:focus{transform:translateY(0);}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid #25d366; outline-offset:3px; border-radius:8px;
}
.nav :focus-visible,.mobile-menu :focus-visible,.hero :focus-visible{
  outline-color:#7bffb5;
}

/* ── Mobile sticky call to action ───────────────────────────────────────────
   On phones the hero CTA scrolls away and the desktop dock is hidden, leaving
   no way to convert without scrolling back up. */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:1400;
  display:none; align-items:center; gap:12px; padding:11px 12px 11px 16px;
  border-radius:100px; border:1px solid rgba(255,255,255,.1);
  background:rgba(7,19,13,.94); backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.38);
  transform:translateY(140%); transition:transform .34s var(--ease-spring);
}
.sticky-cta.visible{transform:translateY(0);}
.sticky-cta > span{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
.sticky-cta b{color:#fff; font-size:12.5px; font-weight:750; letter-spacing:-.01em;}
.sticky-cta small{
  color:rgba(255,255,255,.6); font-size:10.2px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-cta a{
  flex-shrink:0; padding:10px 17px; border-radius:100px;
  background:#25d366; color:#052e13; font-size:12.5px; font-weight:800; white-space:nowrap;
}
@media (max-width:860px){ .sticky-cta{display:flex;} }
@media (prefers-reduced-motion:reduce){ .sticky-cta{transition:none;} }

/* ── Nav at the top of the page ─────────────────────────────────────────────
   The bar used to sit off-screen until 40px of scroll, so the page loaded with
   no navigation and no call to action. It is now always present: a quiet dark
   pill over the hero that becomes the light glass bar once you scroll. */
.nav:not(.visible){
  background:rgba(9,24,16,.42);
  border-color:rgba(255,255,255,.09);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 10px 34px rgba(4,16,10,.18);
}
.nav:not(.visible) .nav-links > a:not(.btn-nav){ color:rgba(255,255,255,.82); }
.nav:not(.visible) .nav-links > a:not(.btn-nav):hover{ color:#fff; background:rgba(255,255,255,.09); }

/* Interactive Themes & Analytics Dash */
button.theme-pill{ cursor:pointer; position:relative; border:none; background:var(--bg-card); font:inherit; color:var(--text-main); display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px; box-shadow:0 0 0 1px var(--border); transition:all .2s ease; }
button.theme-pill:hover{ background:var(--bg-hover); transform:translateY(-1px); }
button.theme-pill.active{ box-shadow:0 0 0 2px var(--wa-green); }
button.theme-pill i{ display:none; color:var(--wa-green); font-style:normal; font-weight:bold; }
button.theme-pill.active i{ display:inline; }

.theme-preview{ max-width:600px; margin:0 auto; background:var(--bg-card); border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.05); transition:all 0.3s ease; }
.tp-header{ padding:12px; background:rgba(0,0,0,0.05); font-size:12px; font-weight:600; text-align:center; border-bottom:1px solid var(--border); transition:background 0.3s ease, color 0.3s ease; }
.tp-body{ display:flex; height:200px; }
.tp-sidebar{ width:30%; border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--bg-main); }
.tp-line{ height:12px; background:var(--border); border-radius:4px; opacity:0.5; }
.tp-line:nth-child(1){ width:80%; }
.tp-line:nth-child(2){ width:60%; }
.tp-line:nth-child(3){ width:70%; }
.tp-chat{ flex:1; padding:20px; display:flex; flex-direction:column; gap:12px; background:#efeae2; transition:background 0.3s ease; }
.tp-bubble{ max-width:70%; height:32px; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.tp-bubble.in{ background:#fff; align-self:flex-start; width:60%; border-top-left-radius:0; }
.tp-bubble.out{ background:#d9fdd3; align-self:flex-end; width:50%; border-top-right-radius:0; transition:background 0.3s ease; }

.analytics-dashboard{ padding:32px; max-width:800px; margin:0 auto; }
.dash-header{ display:flex; justify-content:center; margin-bottom:32px; align-items:center; }
.dash-switch.month i{ transform:translateX(100%); }
.dash-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:40px; text-align:center; border-bottom:1px solid var(--border); padding-bottom:32px; }
.dash-stat{ display:flex; flex-direction:column; gap:8px; }
.dash-label{ font-size:14px; color:var(--text-muted); font-weight:500; }
.count-up{ font-size:40px; font-weight:900; line-height:1; color:var(--text-main); font-variant-numeric: tabular-nums; }

.dash-charts{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.chart-box h4{ margin:0 0 24px 0; font-size:16px; color:var(--text-main); }
.bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:14px; }
.bar-lbl{ width:70px; font-weight:500; color:var(--text-muted); }
.bar-track{ flex:1; height:10px; background:var(--bg-hover); border-radius:5px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--wa-green); border-radius:5px; transition:width 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.bar-val{ width:40px; text-align:right; font-weight:700; color:var(--text-main); font-variant-numeric: tabular-nums; }

.peak-clock{ display:flex; align-items:center; justify-content:center; gap:30px; height:120px; }
.clock-circle{ width:80px; height:80px; border-radius:50%; border:6px solid var(--bg-hover); position:relative; }
.clock-hand{ position:absolute; bottom:50%; left:calc(50% - 3px); width:6px; height:45%; background:var(--wa-green); transform-origin:bottom center; transform:rotate(0deg); transition:transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius:3px; }
.clock-hand::after{ content:''; position:absolute; bottom:-6px; left:-3px; width:12px; height:12px; background:var(--wa-green); border-radius:50%; }
.clock-label{ font-size:32px; font-weight:900; color:var(--text-main); width:120px; }

/* ── Privacy Interactive Demo ───────────────────────────────────────────── */
.privacy-demo {
  display: flex;
  gap: 32px;
  background: var(--surface-1);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 32px;
  margin-top: 48px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
@media (max-width: 860px) {
  .privacy-demo {
    flex-direction: column;
    padding: 24px;
  }
}

.privacy-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.privacy-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}
.privacy-toggle-row span {
  font-weight: 600;
  color: var(--text-base);
  font-size: 15px;
}

.privacy-toggle {
  width: 44px;
  height: 24px;
  background: #d1d1d6;
  border-radius: 24px;
  position: relative;
  transition: background 0.3s ease;
}
.privacy-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
.privacy-toggle.active {
  background: var(--wa-green);
}
.privacy-toggle.active::after {
  transform: translateX(20px);
}

.privacy-preview {
  flex: 1;
  background: #1b2b22;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 1px solid rgba(255,255,255,0.1);
}

.pp-header {
  background: #202c33;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pp-avatar {
  width: 40px;
  height: 40px;
  background: #6b7c85;
  border-radius: 50%;
}
.pp-info {
  display: flex;
  flex-direction: column;
}
.pp-info b {
  color: #e9edef;
  font-size: 15px;
  font-weight: 600;
}
.pp-status {
  color: #8696a0;
  font-size: 13px;
  transition: opacity 0.3s ease;
}
.pp-status.hidden {
  opacity: 0;
}

.pp-chat {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.pp-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: #e9edef;
  position: relative;
}
.pp-in {
  background: #202c33;
  align-self: flex-start;
  border-top-left-radius: 0;
}
.pp-out {
  background: #005c4b;
  align-self: flex-end;
  border-top-right-radius: 0;
}
.pp-ticks {
  font-size: 12px;
  color: #8696a0;
  margin-left: 6px;
  display: inline-block;
  transition: color 0.3s ease;
}
.pp-ticks.blue {
  color: #53bdeb;
}

.pp-typing {
  color: #8696a0;
  font-style: italic;
  font-size: 13px;
  transition: opacity 0.3s ease;
}
.pp-typing.hidden {
  opacity: 0;
}

.pp-removed {
  color: #8696a0;
}
.pp-removed-icon {
  margin-right: 4px;
}
.pp-removed-text {
  margin-top: 4px;
  color: #e9edef;
  font-style: normal;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 4px;
}
.pp-removed.show-original .pp-removed-text {
  display: block !important;
}

.pp-blur-overlay, .pp-lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(27, 43, 34, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
}
.pp-blur-overlay span, .pp-lock-overlay span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-blur-overlay i, .pp-lock-overlay i {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

/* Interactive Industry Showcase */
.industry-showcase {
  margin-top: 40px;
  border: 1px solid #e0e8e3;
  border-radius: 28px;
  background: #fbfcf9;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(22, 67, 45, 0.08);
}
.industry-pills {
  display: flex;
  gap: 10px;
  padding: 24px;
  border-bottom: 1px solid #e2ece6;
  background: #f4f8f5;
  overflow-x: auto;
  scrollbar-width: none;
}
.industry-pills::-webkit-scrollbar { display: none; }
.industry-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(19, 95, 57, 0.15);
  border-radius: 12px;
  color: #3b5648;
  background: #fff;
  font-family: var(--font, sans-serif);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: 0.25s var(--ease-spring);
}
.industry-pill svg { width: 16px; height: 16px; }
.industry-pill:hover {
  transform: translateY(-2px);
  border-color: #26b566;
  background: #e9f8ef;
}
.industry-pill.active {
  color: #fff;
  border-color: #087d3e;
  background: #128c7e;
  box-shadow: 0 8px 24px rgba(18, 140, 126, 0.2);
  transform: translateY(-2px);
}
.industry-detail {
  display: grid;
  grid-template-columns: 55% 45%;
}
.industry-info {
  padding: 42px;
  border-right: 1px solid #e2ece6;
  background: #fff;
}
.industry-info h3 {
  font-size: 28px;
  color: #173a2e;
  margin-bottom: 12px;
}
.industry-info p {
  font-size: 15px;
  color: #52685d;
  line-height: 1.6;
  margin-bottom: 24px;
}
.industry-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.industry-info ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: #3b5648;
}
.industry-info ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: #128c7e;
  font-weight: bold;
}
.industry-chat {
  background: #1b2b22;
  padding: 42px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.industry-chat-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.chat-message {
  display: flex;
  gap: 12px;
  max-width: 85%;
}
.chat-message.incoming {
  align-self: flex-start;
}
.chat-message.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #d1d5db;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: bold;
}
.chat-avatar.bujji {
  background: #128c7e;
}
.chat-message p {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}
.chat-message.incoming p {
  background: #fff;
  color: #24362d;
  border-top-left-radius: 4px;
}
.chat-message.outgoing p {
  background: #d9fdd3;
  color: #1b2e26;
  border-top-right-radius: 4px;
}
.industry-screenshot {
  padding: 32px;
  border-top: 1px solid #e2ece6;
  background: #fff;
  text-align: center;
}
.industry-screenshot img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(22, 67, 45, 0.1);
}

@media (max-width: 900px) {
  .industry-detail {
    grid-template-columns: 1fr;
  }
  .industry-info {
    border-right: none;
    border-bottom: 1px solid #e2ece6;
  }
}

.privacy-ext-preview {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Extension Screenshot in Feature Tabs ── */
.ext-screenshot {
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  animation: msgPop .35s ease both;
}
.ext-screenshot img {
  width: 100%;
  display: block;
  border-radius: 0 0 16px 16px;
}
.ext-screenshot-label {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: .025em;
  border-bottom: 1px solid var(--surface-3);
}
.ext-screenshot-label span::before {
  content: "◉ ";
  color: var(--wa-green);
}

/* Free templates live demo — final reference-aligned composition.
   Keep these selectors scoped so the adjacent pricing panel remains untouched. */
@media (min-width: 901px) {
  #templates .live-commerce-head {
    min-height: 58px;
    padding: 13px 20px;
    border-bottom-color: #e6eee9;
    background: rgba(255,255,255,.94);
    box-shadow: 0 7px 24px rgba(35,75,53,.06);
  }
  #templates .live-commerce-head > span {
    font-size: 10px;
    letter-spacing: .075em;
  }
  #templates .live-commerce-head strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #d9eee0;
    border-radius: 999px;
    color: #087f40;
    background: #fff;
    font: 800 10px var(--font);
    box-shadow: 0 7px 20px rgba(20,95,52,.06);
  }
  #templates .live-commerce-head strong::before,
  #templates .live-commerce-head strong::after { content: none; }
  #templates .live-commerce-head strong > i,
  #templates .live-commerce-head strong > svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #10ae50;
    stroke-width: 2.3;
  }

  #templates .commerce-stage {
    height: 548px;
    overflow: hidden;
    perspective: 1400px;
    perspective-origin: 52% 44%;
    background:
      radial-gradient(circle at 55% 54%, rgba(70,232,128,.28), transparent 28%),
      radial-gradient(circle at 18% 58%, rgba(224,248,231,.86), transparent 32%),
      linear-gradient(135deg,#fff 2%,#f4fff7 57%,#edf8f1 100%);
  }
  #templates .commerce-stage::before {
    content: "✦        ✧\A                ✦\A     ✧                  ✦";
    position: absolute;
    z-index: 4;
    left: 43%;
    top: 19%;
    width: 31%;
    height: 49%;
    color: rgba(255,255,255,.96);
    font-size: 12px;
    line-height: 8.2;
    letter-spacing: 12px;
    white-space: pre;
    text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(50,211,112,.6);
    animation: commerceSparkle 3.8s ease-in-out infinite;
    pointer-events: none;
  }
  #templates .commerce-stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 39%;
    top: 12%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(52,220,110,.55),rgba(108,239,149,.30) 50%,transparent 72%);
    filter: blur(2px);
  }
  #templates .commerce-orbit {
    z-index: 4;
    left: 37%;
    top: 3%;
    width: 40%;
    height: 250px;
  }
  #templates .commerce-route-shadow { stroke: rgba(255,255,255,.92); stroke-width: 7; }
  #templates .commerce-route-dash {
    stroke: #0bb251;
    stroke-width: 2.5;
    stroke-dasharray: 10 11;
    animation-duration: 1.65s;
  }
  #templates .commerce-route-start {
    fill: #fff;
    stroke: #10b656;
    stroke-width: 3;
    filter: drop-shadow(0 3px 5px rgba(9,145,65,.18));
  }
  #templates .commerce-person {
    z-index: 6;
    left: 55%;
    bottom: -112px;
    height: 108%;
    max-width: 43%;
    animation: none;
    filter: drop-shadow(0 24px 28px rgba(21,111,61,.18));
  }

  #templates .commerce-ad {
    z-index: 3;
    left: 11%;
    top: 11%;
    width: 33%;
    border-radius: 24px;
    transform: rotateZ(-3deg) rotateY(6deg) translateZ(10px);
    transform-origin: 50% 58%;
    transform-style: preserve-3d;
    box-shadow: -10px 30px 55px rgba(43,82,58,.18), 0 8px 18px rgba(37,92,58,.08);
  }
  #templates .commerce-ad::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: -7%;
    right: -7%;
    top: 39%;
    height: 43%;
    background:
      radial-gradient(ellipse at 52% 55%, transparent 0 29%, rgba(44,205,107,.18) 43%, transparent 69%),
      radial-gradient(ellipse at 15% 78%, rgba(41,190,99,.22), transparent 58%),
      linear-gradient(165deg, transparent 45%, rgba(34,197,94,.17) 58%, transparent 73%);
    mix-blend-mode: multiply;
    filter: blur(8px);
    opacity: .92;
    transform: translateZ(18px) rotate(-2deg);
    pointer-events: none;
  }
  #templates .commerce-ad-account { padding: 13px 15px 9px; }
  #templates .commerce-ad-account > i {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    color: #183c2c;
    background: transparent;
    font-size: 12px;
    letter-spacing: 2px;
  }
  #templates .commerce-ad-copy { padding: 8px 16px 11px; }
  #templates .commerce-ad-copy b { font-size: 18px; line-height: .98; letter-spacing: -.045em; }
  #templates .commerce-ad-copy span { margin-top: 7px; font-size: 8px; }
  #templates .commerce-product { height: 170px; object-fit: cover; }
  #templates .commerce-ad > button { position: relative; z-index: 3; padding: 11px 10px; font-size: 11px; }
  #templates .commerce-ad > p { position: relative; z-index: 3; padding: 9px 14px 12px; font-size: 8px; }

  #templates .commerce-chat {
    z-index: 4;
    right: 1.7%;
    top: 5%;
    width: 29.5%;
    height: 438px;
    border-radius: 24px;
    transform: rotateZ(1.1deg) rotateY(-5deg) translateZ(14px);
    transform-origin: 52% 42%;
    transform-style: preserve-3d;
    box-shadow: 12px 28px 55px rgba(29,69,47,.2), 0 8px 18px rgba(25,76,46,.09);
  }
  #templates .commerce-chat > header { min-height: 53px; padding: 8px 11px; }
  #templates .commerce-chat > header > img { width: 31px; height: 31px; }
  #templates .commerce-chat > header p b { font-size: 10px; }
  #templates .commerce-chat-actions { margin-left: auto; gap: 11px; }
  #templates .commerce-chat-actions i,
  #templates .commerce-chat-actions svg { flex: 0 0 14px; width: 14px; height: 14px; color: #fff; stroke-width: 2; }
  #templates .commerce-chat-body { height: 385px; padding: 12px 10px 17px; }
  #templates .chat-ad-preview { grid-template-columns: 43% 1fr; gap: 9px; padding: 9px; border-radius: 14px; }
  #templates .chat-ad-preview > img { height: 83px; border-radius: 9px; }
  #templates .chat-ad-preview > span b { font-size: 9px; }
  #templates .chat-ad-preview > span strong { font-size: 9px; }
  #templates .chat-ad-preview > button { padding: 7px; font-size: 8px; }
  #templates .flow-message { max-width: 87%; padding: 9px 10px 15px; font-size: 8px; }
  #templates .flow-order { padding: 8px 10px; }

  #templates .commerce-metric {
    z-index: 7;
    width: 104px;
    min-height: 134px;
    border: 1px solid rgba(21,167,79,.23);
    border-radius: 24px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 42px rgba(25,92,52,.14);
  }
  #templates .metric-roas { left: 1%; top: 2.5%; padding: 13px 11px 10px; transform: rotate(-2deg); }
  #templates .metric-roas > b { margin-top: 15px; font-size: 32px; }
  #templates .metric-kpi-top { gap: 5px; }
  #templates .metric-kpi-top small { font-size: 7px; }
  #templates .metric-kpi-top em { padding: 4px 5px; font-size: 6px; }
  #templates .metric-read {
    left: 1%;
    right: auto;
    bottom: 4%;
    width: 104px;
    min-height: 134px;
    padding: 11px 8px;
    border-radius: 24px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: center;
    transform: rotate(-2deg);
  }
  #templates .metric-ring { flex: 0 0 58px; width: 58px; height: 58px; }
  #templates .metric-ring > b { font-size: 14px; }
  #templates .metric-read-copy > b { font-size: 8px; }
  #templates .metric-read-copy > small { justify-content: center; margin-top: 5px; font-size: 6px; }

  #templates .commerce-event-card {
    z-index: 8;
    right: 1.2%;
    bottom: 12%;
    width: 29%;
    max-width: 276px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 28px 62px rgba(24,82,48,.24), 0 8px 20px rgba(22,99,52,.12);
    transform: translateZ(34px);
  }
  #templates .commerce-event-card header { padding: 5px 5px 9px; font-size: 8px; }
  #templates .commerce-event-card header > b { color: #0b9348; font-size: 7px; text-transform: none; letter-spacing: 0; }
  #templates .commerce-event-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  #templates .commerce-event-row {
    display: flex;
    min-width: 0;
    min-height: 74px;
    padding: 7px 6px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border: 1px solid #edf1ee;
    border-radius: 12px;
  }
  #templates .commerce-event-row > i { width: 20px; height: 20px; border-radius: 8px; font-size: 7px; }
  #templates .commerce-event-row span { min-width: 0; }
  #templates .commerce-event-row b { font-size: 10px; }
  #templates .commerce-event-row small { overflow: hidden; font-size: 5.5px; text-overflow: ellipsis; white-space: nowrap; }
  #templates .commerce-event-row em { margin-top: auto; color: #16a34a; font-size: 5.5px; }

  #templates .commerce-order-cta,
  #templates .commerce-success { display: none !important; }

  #templates .flow-controls {
    min-height: 68px;
    margin: 0 18px 6px;
    border-radius: 19px;
  }
  #templates .flow-controls button { gap: 8px; padding: 10px; }
  #templates .flow-controls button b { max-width: 116px; font-size: 9px; }
  #templates .flow-controls button b small { font-size: 6.5px; }
  #templates .flow-controls .flow-step-icon { flex-basis: 36px; width: 36px; height: 36px; padding: 9px; }
  #templates .flow-helper { padding-bottom: 9px; }
}

@keyframes commerceSparkle {
  0%,100% { opacity: .5; transform: scale(.96) rotate(-1deg); }
  50% { opacity: 1; transform: scale(1.04) rotate(1deg); }
}

/* ── Add Choice Button ── */
.editor-add-btn {
  background: none;
  border: 1px dashed rgba(18, 140, 126, .3);
  color: #087864;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}
.editor-add-btn:hover {
  background: rgba(18, 140, 126, .08);
  border-color: rgba(18, 140, 126, .5);
}

/* ==========================================================================
   Free Templates · live demo — rebuilt 1:1 from the supplied mockup.
   Scoped to #templates; the "World's only platform" pricing rail is untouched.
   The stage is a fixed 1104x506 design canvas so every breakpoint keeps the
   exact mockup composition and only the surrounding chrome reflows.
   ========================================================================== */

#templates .live-commerce {
  overflow:hidden;
  container-type:inline-size;
  border:1px solid #e3f0e7;
  border-radius:30px;
  background:linear-gradient(180deg,#fbfefb 0%,#f7fcf8 100%);
  box-shadow:0 26px 74px rgba(25,70,47,.10);
}

/* ---- header pill bar ---------------------------------------------------- */
#templates .live-commerce-head {
  margin:14px 14px 0;
  padding:15px 20px;
  border:1px solid #e6f1ea;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(26,73,48,.05);
}
#templates .live-commerce-head > span {
  gap:10px; color:#1d3b2b; font-size:11.5px; font-weight:850; letter-spacing:.075em;
}
#templates .live-commerce-head > span i { width:9px; height:9px; box-shadow:0 0 0 4px rgba(37,211,102,.16); }
#templates .live-commerce-head strong {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border:1px solid #dcefe3; border-radius:999px;
  color:#0a8c46; background:#fff; font-size:12px; font-weight:850;
  box-shadow:0 6px 16px rgba(20,95,52,.06);
}
#templates .live-commerce-head strong::before,
#templates .live-commerce-head strong::after { content:none; }
#templates .live-commerce-head strong > svg.la-site-icon {
  flex:0 0 16px; width:16px; height:16px; color:#16a34a; stroke-width:2.1;
}

/* ---- fixed design canvas ------------------------------------------------ */
#templates .commerce-stage {
  --cs:1;
  position:relative; flex:none; overflow:visible;
  width:1104px; height:506px; min-height:0;
  transform:scale(var(--cs)); transform-origin:top left;
  margin-bottom:calc((var(--cs) - 1) * 506px);
}
#templates .commerce-stage::before {
  content:""; position:absolute; z-index:0; left:55%; top:8%;
  width:44%; height:76%; border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 46%,rgba(52,220,110,.75),rgba(120,248,165,.50) 48%,rgba(178,253,203,.30) 62%,rgba(226,255,235,0) 73%);
}

/* ---- dashed route ------------------------------------------------------- */
#templates .commerce-orbit {
  z-index:2; left:41.3%; top:6px; width:26.8%; height:auto; aspect-ratio:600/236;
}
#templates .commerce-route-shadow { stroke:rgba(255,255,255,.85); stroke-width:9; }
#templates .commerce-route-dash { stroke:#33ad63; stroke-width:2.4; stroke-dasharray:9 11; }
#templates .commerce-route-dash + * { display:block; }
#templates .commerce-route-start { fill:#fff; stroke:#2fae63; stroke-width:3; vector-effect:non-scaling-stroke; }
#templates #templateRouteArrow path { fill:#22b45e; stroke:none; filter:drop-shadow(0 3px 4px rgba(20,150,70,.25)); }

/* ---- business owner ----------------------------------------------------- */
#templates .commerce-person {
  z-index:6; left:55.3%; bottom:1%; width:auto; height:108%; max-width:35%;
  filter:drop-shadow(0 24px 26px rgba(21,111,61,.18));
}

/* ---- ad creative -------------------------------------------------------- */
#templates .commerce-ad {
  z-index:4; left:16.9%; right:auto; top:0; bottom:auto; width:24.1%;
  border:1px solid #eef2ef; border-radius:26px; background:#fff;
  box-shadow:0 30px 60px rgba(31,79,49,.16); transform:rotate(0);
}
#templates .commerce-ad-account { grid-template-columns:34px 1fr auto; align-items:center; gap:9px; padding:15px 15px 8px; }
#templates .commerce-ad-account img { width:34px; height:34px; border-radius:50%; }
#templates .commerce-ad-account > span { min-width:0; }
#templates .commerce-ad-account b { display:block; color:#123326; font-size:11.5px; }
#templates .commerce-ad-account small { display:inline-flex; align-items:center; gap:5px; color:#8b9790; font-size:8.5px; }
#templates .ad-verified.la-site-icon { flex:0 0 12px; width:12px; height:12px; color:#0fa34c; stroke-width:2.4; }
#templates .commerce-ad-account > i {
  width:auto; height:auto; border-radius:0; color:#93a29a; background:none;
  font-size:13px; letter-spacing:.5px;
}
#templates .commerce-ad-copy { padding:7px 15px 11px; }
#templates .commerce-ad-copy b { display:block; color:#08301f; font-size:23px; line-height:1.06; letter-spacing:-.055em; }
#templates .commerce-ad-copy span { display:block; margin-top:8px; color:#6c7f75; font-size:10px; }
#templates .commerce-product { height:215px; object-fit:contain; background:linear-gradient(160deg,#f6f9f4,#eef7ee); }
#templates .commerce-ad > button {
  width:auto; min-height:46px; margin:0 14px; padding:12px; border-radius:12px; font-size:12px;
  background:linear-gradient(90deg,#12b356,#1dc465); box-shadow:0 10px 22px rgba(18,179,86,.22);
}
#templates .commerce-ad > button:hover { background:linear-gradient(90deg,#0da34c,#17b85c); }
#templates .commerce-ad > button > svg.la-site-icon { flex:0 0 15px; width:15px; height:15px; }
#templates .commerce-ad > p { padding:13px 15px 16px; color:#6b7c73; font-size:9.5px; }

/* ---- WhatsApp conversation --------------------------------------------- */
#templates .commerce-chat {
  z-index:4; left:auto; right:6.3%; top:1%; width:24.1%; height:87.5%;
  border:1px solid #e4eae6; border-radius:22px;
  box-shadow:0 30px 62px rgba(24,66,45,.20); transform:rotate(0);
}
#templates .commerce-chat header {
  grid-template-columns:auto auto 1fr auto; gap:8px; padding:14px 12px;
  color:#fff; background:linear-gradient(135deg,#0b6b48,#0d7a4f);
}
#templates .commerce-chat header > img { width:32px; height:32px; }
#templates .commerce-chat header > p { min-width:0; }
#templates .commerce-chat header b { display:inline-flex; align-items:center; gap:5px; color:#fff; font-size:10.5px; }
#templates .commerce-chat header small { color:#fff; opacity:.85; font-size:7.5px; }
#templates .commerce-chat-back { display:grid; place-items:center; color:#fff; }
#templates .commerce-chat-back > svg.la-site-icon { width:15px; height:15px; stroke-width:2.4; }
#templates .chat-verified.la-site-icon { flex:0 0 12px; width:12px; height:12px; color:#8ef0b2; stroke-width:2.4; }
#templates .commerce-chat-actions { gap:9px; }
#templates .commerce-chat-actions > svg.la-site-icon { width:14px; height:14px; color:#fff; opacity:.92; stroke-width:2.1; }
#templates .commerce-chat-body { height:calc(100% - 60px); padding:10px 9px; }

#templates .chat-ad-preview {
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:10px; row-gap:8px;
  padding:9px; border-radius:12px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
#templates .chat-ad-preview img {
  grid-row:1; grid-column:1; width:66px; height:60px; border-radius:9px;
  object-fit:contain; background:linear-gradient(160deg,#f7faf6,#eef7ef);
}
#templates .chat-ad-preview > span { grid-row:1; grid-column:2; align-self:start; padding:0; }
#templates .chat-ad-preview > span b { color:#1c2e25; font-size:9px; line-height:1.25; }
#templates .chat-ad-preview > span strong { margin-top:2px; color:#122419; font-size:9.5px; }
#templates .chat-ad-preview > span small { margin-top:6px; color:#0aa14c; font-size:7.5px; font-weight:800; }
#templates .chat-ad-preview > time {
  grid-row:1; grid-column:2; align-self:end; justify-self:end;
  color:#96a29c; font-size:6.5px; font-style:normal;
}
#templates .chat-ad-preview > button {
  display:flex; align-items:center; justify-content:center; gap:6px;
  grid-row:2; grid-column:1/-1; margin-top:1px; padding:8px;
  border:1px solid #b6e4c6; border-radius:9px; color:#0a9c4c; background:#fff;
  font-size:8.5px; transition:.2s ease;
}
#templates .chat-ad-preview > button:hover { border-color:#66cf92; background:#f2fdf6; }
#templates .chat-ad-preview > button > svg.la-site-icon { width:11px; height:11px; stroke-width:2.3; }

#templates .flow-message {
  display:flex; align-items:flex-end; justify-content:space-between; gap:9px;
  max-width:93%; margin-top:8px; padding:8px 9px; border-radius:9px;
  font-size:9.5px; line-height:1.42; box-shadow:0 1px 2px rgba(0,0,0,.07);
}
#templates .flow-message > span { min-width:0; }
#templates .flow-message small {
  display:inline-flex; align-items:center; gap:3px; flex:none;
  margin-top:0; color:#7f8d85; font-size:7px; text-align:right; white-space:nowrap;
}
#templates .flow-message small > i { color:#38b6ff; font-style:normal; letter-spacing:-1px; }
#templates .flow-message.customer { background:#d9fdd3; }
#templates .flow-message.bujji-reply { background:#fff; }

#templates .flow-order {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  column-gap:9px; margin-top:9px; padding:9px; border-radius:11px;
  background:#d7f7de; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#templates .flow-order > span { width:22px; height:22px; background:#16a34a; }
#templates .flow-order > span > svg.la-site-icon { width:60%; height:60%; color:#fff; stroke-width:3.4; }
#templates .flow-order b { font-size:9.5px; }
#templates .flow-order small { margin-top:1px; font-size:7px; }
#templates .flow-order > time { align-self:end; color:#6e937c; font-size:6.5px; font-style:normal; }

/* ---- live activity ------------------------------------------------------ */
#templates .commerce-event-card {
  z-index:6; left:auto; right:5%; bottom:-8px; width:25%; max-width:none; padding:10px 9px 11px;
  border:1px solid #e5f0e9; border-radius:20px; background:rgba(255,255,255,.97);
  box-shadow:0 22px 50px rgba(20,74,43,.16);
}
#templates .commerce-event-card header {
  padding:3px 4px 9px; color:#335444; font-size:9.5px; letter-spacing:.02em; text-transform:none;
}
#templates .commerce-event-card header > span { gap:6px; color:#1d3a2a; font-weight:850; }
#templates .commerce-event-card header > span > svg.la-site-icon { width:13px; height:13px; color:#16a34a; stroke-width:2.3; }
#templates .commerce-event-card header b { color:#0da04b; font-size:8px; font-weight:800; }
#templates .commerce-event-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
#templates .commerce-event-row {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:3px; min-height:0; padding:2px 4px;
  border:0; background:transparent; box-shadow:none; opacity:1; transform:none;
}
#templates .commerce-event-row > svg.la-site-icon {
  width:16px; height:16px; margin-bottom:3px; color:#16a34a; background:none; stroke-width:2.2;
}
#templates .commerce-event-row b { color:#12301f; font-size:16.5px; line-height:1; letter-spacing:-.03em; }
#templates .commerce-event-row small { color:#8b978f; font-size:7px; line-height:1.2; }
#templates .commerce-event-row em { margin-top:1px; color:#12a04d; font-size:7px; font-style:normal; font-weight:850; }
#templates .commerce-event-row.active { background:transparent; box-shadow:none; transform:none; }
#templates .commerce-event-row.active > svg.la-site-icon { color:#0d8f43; }
#templates .commerce-event-row.active b { color:#08703c; }
#templates .commerce-event-row.complete > svg.la-site-icon { color:#3cbb6d; }

/* ---- floating KPI cards ------------------------------------------------- */
#templates .commerce-metric {
  z-index:5; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  left:1.2%; right:auto; width:13.1%; height:auto; min-height:0; padding:14px 13px; gap:0;
  border:1px solid #e7f1eb; border-radius:24px; background:#fff;
  box-shadow:0 20px 48px rgba(28,74,50,.13); transform:none;
}
#templates .metric-roas { top:22.5%; bottom:auto; }
#templates .metric-read { top:58.5%; bottom:auto; }
#templates .metric-icon.la-site-icon {
  box-sizing:border-box; flex:none; width:38px; height:38px; padding:10px; border-radius:50%;
  color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d);
  box-shadow:0 8px 18px rgba(18,160,77,.26); stroke-width:2.3;
}
#templates .commerce-metric > small {
  display:block; margin-top:11px; color:#6d8378; font-size:9px; font-weight:850;
  letter-spacing:.025em; text-transform:none;
}
#templates .commerce-metric > b {
  display:block; margin:6px 0 0; color:#0f3323; font-size:38px; line-height:1; letter-spacing:-.05em;
}
#templates .commerce-metric > b span { color:#16a34a; font-size:21px; }
#templates .commerce-metric > em {
  display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:5px 10px;
  border-radius:999px; color:#0a8c45; background:#e8f9ee;
  font-size:9.5px; font-style:normal; font-weight:850;
}
#templates .metric-read > em { color:#5d7a6a; background:#f0f5f2; }
#templates .metric-read > em > u {
  flex:none; width:6px; height:6px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
#templates .commerce-success { display:none; }
#templates .commerce-order-cta { left:55.3%; bottom:8%; }

/* ---- journey stepper ---------------------------------------------------- */
#templates .flow-controls {
  overflow:visible; margin:0 14px 6px; min-height:78px; padding:6px; gap:0;
  border:1px solid #e6f1ea; border-radius:20px; background:#fff;
  box-shadow:0 8px 24px rgba(16,83,46,.06);
}
#templates .flow-controls button {
  position:relative; justify-content:flex-start; gap:10px; padding:12px 10px;
  border-left:0; border-radius:16px; background:transparent; font-size:9.5px;
}
#templates .flow-controls button span {
  flex:none; width:28px; height:28px; border-radius:50%;
  color:#fff; background:#16a34a; font-size:10px; font-weight:850;
}
#templates .flow-controls button.active { color:#0a7c3f; background:transparent; }
#templates .flow-controls button b { max-width:none; font-size:11px; font-weight:800; }
#templates .flow-controls button b small { margin-top:3px; font-size:8.5px; line-height:1.3; }
#templates .flow-controls .flow-step-icon { flex:0 0 34px; width:34px; height:34px; padding:8px; color:#0f9a4a; background:#eaf8ef; }
#templates .flow-controls button.active .flow-step-icon {
  color:#0a8040; background:#dcf5e5; box-shadow:0 0 0 5px rgba(35,185,88,.07);
}
#templates .flow-controls button.active::before {
  content:""; position:absolute; inset:0; z-index:0;
  border:1.5px solid #3ec27a; border-radius:16px;
  background:rgba(240,253,244,.7); pointer-events:none;
}
#templates .flow-controls button > * { position:relative; z-index:1; }
#templates .flow-controls button:not(:nth-of-type(4))::after {
  content:""; position:absolute; z-index:2; right:-4px; top:50%;
  width:22px; height:9px; background:#2bbb67; transform:translateY(-50%);
  clip-path:polygon(0 40%,72% 40%,72% 0,100% 50%,72% 100%,72% 60%,0 60%);
}
#templates .flow-controls > i { display:none; }
#templates .flow-helper { padding:0 20px 12px; color:#94a09a; font-size:8.5px; }

/* ---- stage state transitions ------------------------------------------- */
#templates .live-commerce[data-stage="1"] .commerce-ad,
#templates .live-commerce[data-stage="2"] .commerce-ad,
#templates .live-commerce[data-stage="3"] .commerce-ad { transform:rotate(0) scale(.985); opacity:.9; }
#templates .live-commerce[data-stage="2"] .commerce-chat,
#templates .live-commerce[data-stage="3"] .commerce-chat { transform:rotate(0) translateY(-4px); }

@media (min-width:981px) {
  #templates .live-commerce,
  #templates .template-pricing-panel { height:700px; min-height:700px; }
  /* Split any leftover height evenly above and below the design canvas so a
     narrower desktop grid stays vertically balanced. */
  #templates .commerce-stage { margin-top:auto; }
  #templates .flow-controls {
    margin-top:auto;
    transform:translateY(7px);
  }
}

/* Below the desktop grid the canvas simply scales down as one piece, so the
   composition stays identical to the mockup; only the chrome reflows. */
@media (max-width:980px) {
  #templates .live-commerce { height:auto; min-height:0; }
  #templates .live-commerce-head { margin:12px 12px 0; padding:13px 16px; border-radius:16px; }
  #templates .live-commerce-head > span { font-size:10px; }
  #templates .live-commerce-head strong { padding:7px 13px; font-size:10.5px; }
  #templates .flow-controls { grid-template-columns:repeat(4,1fr); margin:10px 12px 6px; min-height:0; padding:5px; }
  #templates .flow-controls button { flex-direction:column; gap:5px; padding:9px 5px; border-top:0; text-align:center; }
  #templates .flow-controls button:nth-child(3),
  #templates .flow-controls button:nth-child(4) { border-top:0; }
  #templates .flow-controls button span { width:20px; height:20px; font-size:8px; }
  #templates .flow-controls .flow-step-icon { flex:none; width:24px; height:24px; padding:6px; }
  #templates .flow-controls button b { font-size:8.5px; text-align:center; }
  #templates .flow-controls button b small { font-size:7px; }
  #templates .flow-controls button:not(:nth-of-type(4))::after { display:none; }
  #templates .flow-helper { padding:0 12px 10px; font-size:7.5px; }
}

@media (max-width:680px) {
  #templates .live-commerce { border-radius:22px; }
  #templates .live-commerce-head { margin:10px 10px 0; padding:11px 12px; border-radius:14px; }
  #templates .live-commerce-head > span { gap:7px; font-size:8.5px; letter-spacing:.05em; }
  #templates .live-commerce-head strong { gap:6px; padding:6px 10px; font-size:9px; }
  #templates .live-commerce-head strong > svg.la-site-icon { flex-basis:13px; width:13px; height:13px; }
  #templates .flow-controls { grid-template-columns:repeat(2,1fr); margin:8px 10px 6px; }
  #templates .flow-controls button b small { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  #templates .commerce-route-dash { animation:none!important; }
}

/* Container-query step ladder: scales the fixed design canvas to the card
   width so the mockup composition survives every viewport. */
@container (max-width:1104px) { #templates .commerce-stage { --cs:1.0; } }
@container (max-width:1092px) { #templates .commerce-stage { --cs:0.9891; } }
@container (max-width:1080px) { #templates .commerce-stage { --cs:0.9783; } }
@container (max-width:1068px) { #templates .commerce-stage { --cs:0.9674; } }
@container (max-width:1056px) { #templates .commerce-stage { --cs:0.9565; } }
@container (max-width:1044px) { #templates .commerce-stage { --cs:0.9457; } }
@container (max-width:1032px) { #templates .commerce-stage { --cs:0.9348; } }
@container (max-width:1020px) { #templates .commerce-stage { --cs:0.9239; } }
@container (max-width:1008px) { #templates .commerce-stage { --cs:0.913; } }
@container (max-width:996px) { #templates .commerce-stage { --cs:0.9022; } }
@container (max-width:984px) { #templates .commerce-stage { --cs:0.8913; } }
@container (max-width:972px) { #templates .commerce-stage { --cs:0.8804; } }
@container (max-width:960px) { #templates .commerce-stage { --cs:0.8696; } }
@container (max-width:948px) { #templates .commerce-stage { --cs:0.8587; } }
@container (max-width:936px) { #templates .commerce-stage { --cs:0.8478; } }
@container (max-width:924px) { #templates .commerce-stage { --cs:0.837; } }
@container (max-width:912px) { #templates .commerce-stage { --cs:0.8261; } }
@container (max-width:900px) { #templates .commerce-stage { --cs:0.8152; } }
@container (max-width:888px) { #templates .commerce-stage { --cs:0.8043; } }
@container (max-width:876px) { #templates .commerce-stage { --cs:0.7935; } }
@container (max-width:864px) { #templates .commerce-stage { --cs:0.7826; } }
@container (max-width:852px) { #templates .commerce-stage { --cs:0.7717; } }
@container (max-width:840px) { #templates .commerce-stage { --cs:0.7609; } }
@container (max-width:828px) { #templates .commerce-stage { --cs:0.75; } }
@container (max-width:816px) { #templates .commerce-stage { --cs:0.7391; } }
@container (max-width:804px) { #templates .commerce-stage { --cs:0.7283; } }
@container (max-width:792px) { #templates .commerce-stage { --cs:0.7174; } }
@container (max-width:780px) { #templates .commerce-stage { --cs:0.7065; } }
@container (max-width:768px) { #templates .commerce-stage { --cs:0.6957; } }
@container (max-width:756px) { #templates .commerce-stage { --cs:0.6848; } }
@container (max-width:744px) { #templates .commerce-stage { --cs:0.6739; } }
@container (max-width:732px) { #templates .commerce-stage { --cs:0.663; } }
@container (max-width:720px) { #templates .commerce-stage { --cs:0.6522; } }
@container (max-width:708px) { #templates .commerce-stage { --cs:0.6413; } }
@container (max-width:696px) { #templates .commerce-stage { --cs:0.6304; } }
@container (max-width:684px) { #templates .commerce-stage { --cs:0.6196; } }
@container (max-width:672px) { #templates .commerce-stage { --cs:0.6087; } }
@container (max-width:660px) { #templates .commerce-stage { --cs:0.5978; } }
@container (max-width:648px) { #templates .commerce-stage { --cs:0.587; } }
@container (max-width:636px) { #templates .commerce-stage { --cs:0.5761; } }
@container (max-width:624px) { #templates .commerce-stage { --cs:0.5652; } }
@container (max-width:612px) { #templates .commerce-stage { --cs:0.5543; } }
@container (max-width:600px) { #templates .commerce-stage { --cs:0.5435; } }
@container (max-width:588px) { #templates .commerce-stage { --cs:0.5326; } }
@container (max-width:576px) { #templates .commerce-stage { --cs:0.5217; } }
@container (max-width:564px) { #templates .commerce-stage { --cs:0.5109; } }
@container (max-width:552px) { #templates .commerce-stage { --cs:0.5; } }
@container (max-width:540px) { #templates .commerce-stage { --cs:0.4891; } }
@container (max-width:528px) { #templates .commerce-stage { --cs:0.4783; } }
@container (max-width:516px) { #templates .commerce-stage { --cs:0.4674; } }
@container (max-width:504px) { #templates .commerce-stage { --cs:0.4565; } }
@container (max-width:492px) { #templates .commerce-stage { --cs:0.4457; } }
@container (max-width:480px) { #templates .commerce-stage { --cs:0.4348; } }
@container (max-width:468px) { #templates .commerce-stage { --cs:0.4239; } }
@container (max-width:456px) { #templates .commerce-stage { --cs:0.413; } }
@container (max-width:444px) { #templates .commerce-stage { --cs:0.4022; } }
@container (max-width:432px) { #templates .commerce-stage { --cs:0.3913; } }
@container (max-width:420px) { #templates .commerce-stage { --cs:0.3804; } }
@container (max-width:408px) { #templates .commerce-stage { --cs:0.3696; } }
@container (max-width:396px) { #templates .commerce-stage { --cs:0.3587; } }
@container (max-width:384px) { #templates .commerce-stage { --cs:0.3478; } }
@container (max-width:372px) { #templates .commerce-stage { --cs:0.337; } }
@container (max-width:360px) { #templates .commerce-stage { --cs:0.3261; } }
@container (max-width:348px) { #templates .commerce-stage { --cs:0.3152; } }
@container (max-width:336px) { #templates .commerce-stage { --cs:0.3043; } }
@container (max-width:324px) { #templates .commerce-stage { --cs:0.2935; } }
@container (max-width:312px) { #templates .commerce-stage { --cs:0.2826; } }
@container (max-width:300px) { #templates .commerce-stage { --cs:0.2717; } }

/* Final mockup fidelity locks. These must remain after the stage-state rules. */
@media (min-width:901px) {
#templates .commerce-stage::before {
  left:45.5%;
    top:15%;
    width:360px;
    height:360px;
    border-radius:50%;
    transform:translateX(-50%);
    background:
      radial-gradient(circle at 31% 24%,rgba(255,255,255,.96) 0 1.15%,transparent 2.25%),
      radial-gradient(circle at 73% 29%,rgba(255,255,255,.88) 0 1%,transparent 2.05%),
      radial-gradient(circle at 82% 61%,rgba(255,255,255,.78) 0 .9%,transparent 1.9%),
      radial-gradient(circle at 48% 48%,rgba(52,220,110,.88) 0%,rgba(82,232,137,.78) 20%,rgba(120,248,165,.62) 46%,rgba(180,255,205,.38) 62%,rgba(226,255,235,0) 78%);
    outline:1px solid rgba(110,242,156,.24);
    box-shadow:0 0 70px rgba(37,211,102,.30),0 0 104px rgba(45,210,108,.13),inset 0 0 76px rgba(34,197,94,.26);
  }

  #templates .commerce-stage::after {
    content:"✦        ✧\A                ✦\A     ✧                  ✦";
    position:absolute;
    z-index:2;
    left:43%;
    top:17%;
    width:32%;
    height:52%;
    aspect-ratio:auto;
    border-radius:0;
    color:rgba(255,255,255,.98);
    background:none;
    font-size:12px;
    line-height:8.2;
    letter-spacing:12px;
    white-space:pre;
    text-shadow:0 0 10px rgba(255,255,255,.98),0 0 22px rgba(50,211,112,.62);
    filter:none;
    animation:commerceSparkle 3.8s ease-in-out infinite;
    pointer-events:none;
  }

  #templates .commerce-ad,
  #templates .live-commerce[data-stage="1"] .commerce-ad,
  #templates .live-commerce[data-stage="2"] .commerce-ad,
  #templates .live-commerce[data-stage="3"] .commerce-ad {
    top:7.5%;
    opacity:1;
    transform:rotateZ(-3deg) rotateY(6deg) translateZ(10px);
    transform-origin:50% 58%;
    transform-style:preserve-3d;
    box-shadow:-12px 31px 58px rgba(31,79,49,.19),0 9px 20px rgba(37,92,58,.09);
  }
  #templates .commerce-ad::before { display:none; }
  #templates .commerce-product {
    box-sizing:border-box;
    padding:8px 24px 10px;
    object-fit:contain;
    background:linear-gradient(155deg,#fff 0%,#fbfdfc 60%,#f2faf5 100%);
    filter:drop-shadow(0 18px 18px rgba(26,74,47,.14));
  }
  #templates .chat-ad-preview > img {
    box-sizing:border-box;
    padding:5px;
    object-fit:contain;
    background:#fff;
    filter:drop-shadow(0 5px 6px rgba(23,68,43,.12));
  }

  #templates .commerce-person {
    z-index:6;
    left:55.3%;
    bottom:-34%;
    height:145%;
    max-width:46%;
  }

  #templates .commerce-orbit {
    left:41.1%;
    top:1%;
    width:38%;
    height:auto;
    aspect-ratio:600/250;
  }
  #templates .commerce-route-shadow { stroke:rgba(255,255,255,.96); stroke-width:10; }
  #templates .commerce-route-dash {
    stroke:#16ad53;
    stroke-width:3.2;
    stroke-dasharray:12 12;
  }
  #templates .commerce-route-start {
    fill:#fff;
    stroke:#17ad54;
    stroke-width:3.5;
  }

  #templates .commerce-chat,
  #templates .live-commerce[data-stage="2"] .commerce-chat,
  #templates .live-commerce[data-stage="3"] .commerce-chat {
    transform:rotateZ(1.8deg) rotateY(-5deg) translateZ(14px);
    transform-origin:52% 42%;
    transform-style:preserve-3d;
    box-shadow:14px 30px 58px rgba(24,66,45,.22),0 9px 20px rgba(25,76,46,.1);
  }

  #templates .commerce-event-card {
    z-index:8;
    bottom:12%;
    box-shadow:0 30px 68px rgba(20,74,43,.27),0 9px 22px rgba(22,99,52,.14);
    transform:translateZ(34px);
  }
}

/* Keep the Enterprise demo's Lucide icons at their component sizes; this
   intentionally follows the site-wide 100% SVG rule in the cascade. */
.enterprise-agent-card .enterprise-pill > svg.la-site-icon { flex:0 0 15px; width:15px; height:15px; }
.enterprise-agent-card .enterprise-step-icon > svg.la-site-icon { width:38px; height:38px; }
.enterprise-agent-card .enterprise-orbit-tag > svg.la-site-icon { width:25px; height:25px; }
.enterprise-agent-card .enterprise-private-strip > svg.la-site-icon { flex:0 0 18px; width:18px; height:18px; }
.enterprise-agent-card .orchestrator-chip > svg.la-site-icon { flex:0 0 16px; width:16px; height:16px; }
.enterprise-agent-card .orchestrator-bujji > svg.la-site-icon { width:31px; height:31px; }

/* Compact 100% desktop composition: the complete Enterprise card fits in a
   normal browser viewport without cropping, while retaining the mockup ratio. */
@media (min-width:1221px) {
  .enterprise-agent-card { height:720px; min-height:720px; }
  .enterprise-data-panel,.enterprise-agent-panel { padding:24px 30px; }
  .enterprise-data-panel { text-align:left; }
  .enterprise-data-panel .enterprise-pill { margin-left:0; }
  .enterprise-data-panel h2 { text-align:left; }
  .enterprise-pill { padding:6px 10px; font-size:9.5px; }
  .enterprise-data-panel h2,.enterprise-agent-panel h2 { margin:14px 0 8px; font-size:30px; }
  .enterprise-data-panel > p,.enterprise-agent-panel > p { font-size:11px; line-height:1.5; }
  .enterprise-data-panel > p { max-width:none; text-align:left; }

  .enterprise-process { gap:12px; margin-top:14px; }
  .enterprise-process::before { left:62px; top:84px; bottom:84px; }
  .enterprise-process-step { grid-template-columns:60px 1fr; min-height:142px; padding:13px 14px 12px 20px; border-radius:17px; }
  .enterprise-step-number { left:20px; top:10px; width:22px; height:22px; font-size:10px; }
  .enterprise-step-icon { width:60px; height:68px; border-radius:15px; }
  .enterprise-agent-card .enterprise-step-icon > svg.la-site-icon { width:31px; height:31px; }
  .enterprise-process-step > span:last-child { padding-left:13px; }
  .enterprise-process-step b { margin-bottom:5px; font-size:14px; }
  .enterprise-process-step small { font-size:9px; line-height:1.44; }
  .enterprise-process-step em { gap:5px; margin-top:7px; font-size:7px; }
  .enterprise-process-step em i { padding:3px 5px; }

  .enterprise-orbit-ring { width:440px; height:440px; }
  .enterprise-orbit-tag { width:66px; gap:4px; padding:11px 6px; border-radius:14px; }
  .enterprise-agent-card .enterprise-orbit-tag > svg.la-site-icon { width:20px; height:20px; }
  .enterprise-orbit-tag b { font-size:8px; }
  .enterprise-orbit-tag.tag-pdf { left:14px; top:170px; }.enterprise-orbit-tag.tag-url { left:14px; top:325px; }.enterprise-orbit-tag.tag-db { left:16px; top:518px; }
  .enterprise-orbit-tag.tag-code { right:14px; top:170px; }.enterprise-orbit-tag.tag-api { right:13px; top:337px; }.enterprise-orbit-tag.tag-kb { right:14px; top:518px; }
  .enterprise-phone { top:36px; width:284px; height:615px; border-width:6px; border-radius:44px; }
  .enterprise-phone-status { height:34px; padding-inline:20px; font-size:9px; }
  .enterprise-phone-status > i { top:6px; width:80px; height:22px; }
  .enterprise-phone > header { grid-template-columns:20px 31px 1fr auto; padding:6px 11px; }
  .enterprise-phone > header > span { font-size:27px; }.enterprise-phone > header img { width:30px; height:30px; }.enterprise-phone > header p b { font-size:9px; }.enterprise-phone > header p small { font-size:6.5px; }
  .enterprise-chat { padding:11px 10px 7px; }
  .enterprise-agent-intro,.enterprise-user-query,.enterprise-ai-answer { padding:9px; border-radius:10px; font-size:9px; }
  .enterprise-role-list { gap:4px; margin:6px 0 8px; padding:6px; border-radius:13px; }
  .enterprise-role-list button { grid-template-columns:25px 1fr auto; gap:5px; padding:6px; border-radius:10px; }.enterprise-role-list button > span { font-size:16px; }.enterprise-role-list button b { font-size:8.5px; }.enterprise-role-list button small { font-size:5.7px; }
  .enterprise-user-query small,.enterprise-ai-answer > small { font-size:5.8px; }.enterprise-ai-answer { margin-top:6px; }.enterprise-ai-answer ol { margin-left:14px; font-size:7px; line-height:1.35; }
  .enterprise-phone > footer { padding:6px 9px 8px; }.enterprise-phone > footer span { padding:8px 10px; font-size:8px; }.enterprise-phone > footer i { width:30px; height:30px; }
  .enterprise-private-strip { bottom:11px; gap:6px; padding:8px 12px; font-size:8px; }

  .enterprise-agent-features { gap:8px; margin-top:15px; }
  .enterprise-agent-features button { grid-template-columns:34px 1fr; gap:9px; padding:6px; }
  .enterprise-agent-features button > svg { width:32px; height:32px; padding:8px; }
  .enterprise-agent-features b { font-size:10px; }.enterprise-agent-features small { margin-top:2px; font-size:8px; line-height:1.4; }
  .enterprise-orchestrator { left:16px; right:16px; bottom:12px; height:290px; }
  .orchestrator-ring { width:224px; height:224px; border-width:1.5px; }.orchestrator-phone { width:100px; height:182px; border-radius:21px; }.orchestrator-bujji { width:70px; height:70px; }.orchestrator-bujji img { width:49px; height:49px; }
  .orchestrator-chip { gap:5px; padding:8px 10px; font-size:7.5px; }.enterprise-agent-card .orchestrator-chip > svg.la-site-icon { width:13px; height:13px; }
}

/* ==========================================================================
   CARD: Bujji Voice  (#bujjiVoiceDemo)
   Rebuilt 1:1 from the supplied mockup. Each panel is a fixed design canvas
   (462 / 800 / 386 x 925) scaled as one piece, so the composition never
   reflows away from the mockup — only the card's outer size changes.
   ========================================================================== */

.bujji-voice-card {
  position:relative; grid-column:1/-1;
  container-type:inline-size;
  display:grid; grid-template-columns:462fr 800fr 440fr;
  min-width:0; overflow:hidden;
  border:1px solid #dfe8e3; border-radius:24px;
  color:#0d1830; background:#fff;
  box-shadow:0 24px 70px rgba(24,67,44,.09);
}
.bujji-voice-card > * { min-width:0; }
.voice-col { position:relative; min-width:0; overflow:hidden; }
.voice-col-intro { border-right:1px solid #e7eee9; }
.voice-col-alert { border-left:1px solid #e7eee9; }
.voice-intro-panel,.voice-workspace-panel,.voice-alert-panel {
  position:relative; height:925px;
  transform:scale(var(--vs,1)); transform-origin:top left;
  margin-bottom:calc((var(--vs,1) - 1) * 925px);
}
.voice-intro-panel { width:462px; padding:22px 30px 0; background:linear-gradient(160deg,#fff 0%,#fbfefc 100%); }
.voice-workspace-panel { width:800px; padding:20px 16px 0; background:radial-gradient(circle at 46% 34%,rgba(79,215,128,.09),transparent 42%),#fff; }
.voice-alert-panel { width:440px; padding:18px 16px 0; background:linear-gradient(160deg,#fff 0%,#fbfefd 100%); }

/* ── shared icon reset inside the card ─────────────────────────────────── */
#bujjiVoiceDemo svg.la-site-icon { flex:none; display:block; box-sizing:border-box; stroke-width:2; }

/* ─────────────────────────── LEFT · intro panel ───────────────────────── */
.voice-brand { display:flex; align-items:center; gap:11px; }
.voice-brand-mark { display:block; width:54px; height:54px; overflow:hidden; border-radius:50%; }
.voice-brand-mark img { width:130%; height:130%; margin:-15%; object-fit:contain; }
.voice-brand > b { font-size:34px; font-weight:850; letter-spacing:-.055em; }
.voice-brand > b span { color:#12ae51; }
.voice-brand > em {
  display:inline-flex; align-items:center; gap:6px; margin-left:2px;
  padding:7px 12px; border:1px solid #d5f0df; border-radius:999px;
  color:#14743c; background:#f2fdf6; font-size:11px; font-style:normal; font-weight:800;
}
.voice-brand > em i { width:7px; height:7px; border-radius:50%; background:#ffc21c; box-shadow:0 0 0 3px rgba(255,194,28,.2); animation:voicePulse 1.8s infinite; }

.voice-intro-panel h2 { margin:30px 0 14px; font-size:37px; font-weight:850; line-height:1.14; letter-spacing:-.05em; }
.voice-intro-panel h2 span { color:#10aa4b; }
.voice-intro-panel > p { max-width:400px; color:#4d5f7a; font-size:14px; line-height:1.62; }

.voice-benefits { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:24px; }
.voice-benefits button {
  display:grid; grid-template-columns:38px 1fr; align-items:center; gap:6px 11px;
  min-height:102px; padding:14px; border:1px solid #e3ebe6; border-radius:15px;
  color:#12203a; background:#fff; text-align:left; cursor:pointer;
  box-shadow:0 8px 18px rgba(24,60,44,.04);
  transition:transform .28s var(--ease-spring),border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.voice-benefits button:hover { transform:translateY(-3px); border-color:#b7e9c8; box-shadow:0 14px 28px rgba(21,147,70,.13); }
.voice-benefits button.active { border-color:#7fd9a2; background:#f7fffa; box-shadow:0 12px 26px rgba(21,147,70,.14); }
.voice-benefits button > svg.la-site-icon {
  width:38px; height:38px; padding:9px; border-radius:50%;
  color:#0f9f4a; background:#e9f9ef; transition:.25s ease;
}
.voice-benefits button:first-child > svg.la-site-icon,
.voice-benefits button.active > svg.la-site-icon { color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); box-shadow:0 7px 15px rgba(18,160,77,.28); }
.voice-benefits b { font-size:13.5px; font-weight:800; line-height:1.25; }
.voice-benefits small { grid-column:1/-1; align-self:start; color:#66748d; font-size:11px; line-height:1.45; }

.voice-mascot-scene { position:absolute; left:18px; right:18px; bottom:0; height:300px; pointer-events:none; }
.voice-mascot-scene > img {
  position:absolute; left:4px; bottom:-24px; width:236px; height:236px;
  object-fit:contain; filter:drop-shadow(0 20px 20px rgba(24,71,44,.16));
  animation:voiceMascotFloat 4.6s ease-in-out infinite;
}
.voice-heart { position:absolute; color:#ff8fb2; font-size:19px; }
.voice-heart.heart-a { left:2px; top:44px; animation:voiceHeart 2.6s ease-in-out infinite; }
.voice-heart.heart-b { left:16px; top:96px; font-size:14px; animation:voiceHeart 2.6s .8s ease-in-out infinite; }
.voice-mascot-heart { position:absolute; left:126px; bottom:56px; color:#ff5d84; font-size:34px; filter:drop-shadow(0 5px 8px rgba(255,93,132,.3)); animation:voiceHeartBeat 1.9s ease-in-out infinite; }
.voice-privacy {
  position:absolute; right:6px; bottom:125px; z-index:2;
  display:grid; grid-template-columns:30px 1fr; align-items:center; gap:2px 10px;
  padding:11px 14px; border:1px solid #cfead8; border-radius:13px;
  background:#f4fff7; box-shadow:0 12px 26px rgba(20,105,52,.09);
}
.voice-privacy > svg.la-site-icon { grid-row:1/3; width:30px; height:30px; padding:7px; border-radius:50%; color:#13a34b; background:#e5f9ec; }
.voice-privacy b { color:#139149; font-size:11.5px; }
.voice-privacy small { color:#587465; font-size:9.5px; }

/* ────────────────────── MIDDLE · browser workspace ────────────────────── */
.voice-browser { overflow:hidden; border:1px solid #e2e7ee; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(25,51,81,.11); }
.voice-browser > header { display:flex; align-items:center; gap:14px; height:47px; padding:0 16px; background:#f5f6f8; }
.browser-lights { display:flex; gap:7px; }
.browser-lights i { width:12px; height:12px; border-radius:50%; background:#ff5b58; }
.browser-lights i:nth-child(2) { background:#fdbc2f; }
.browser-lights i:nth-child(3) { background:#28c840; }
.browser-tab {
  display:flex; align-items:center; gap:9px; height:34px; padding:0 12px;
  border-radius:9px; background:#fff; color:#1b2334; font-size:13px; font-weight:650;
  box-shadow:0 1px 3px rgba(20,35,60,.09);
}
.browser-tab > em { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; color:#fff; background:#7046df; font-size:12px; font-style:normal; font-weight:800; }
.browser-tab > svg.la-site-icon { width:15px; height:15px; margin-left:6px; color:#8b94a5; }
.browser-newtab.la-site-icon { width:17px; height:17px; color:#6f7889; }
.browser-url { display:flex; align-items:center; gap:14px; height:45px; padding:0 16px; background:#fff; }
.browser-url > svg.la-site-icon { width:17px; height:17px; color:#59637a; }
.browser-url b { display:flex; align-items:center; gap:9px; flex:1; padding:8px 15px; border-radius:999px; background:#f1f3f7; color:#2c3648; font-size:12.5px; font-weight:500; }
.browser-url b > svg.la-site-icon { width:13px; height:13px; color:#4a5568; }
.voice-browser nav { display:flex; align-items:center; gap:18px; height:55px; padding:0 20px; border-top:1px solid #eef1f5; border-bottom:1px solid #eef1f5; }
.voice-browser nav > b { display:flex; align-items:center; gap:10px; color:#121827; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.voice-browser nav > b > em { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; color:#fff; background:#7046df; font-size:14px; font-style:normal; font-weight:800; }
.voice-browser nav > span { display:flex; gap:22px; margin-left:auto; color:#4a5871; font-size:12.5px; }
.voice-browser nav > span a { cursor:pointer; transition:.2s ease; }
.voice-browser nav > span a:hover { color:#0f9a45; }
.browser-tools { display:flex; align-items:center; gap:14px; margin-left:auto; font-style:normal; }
.browser-tools > svg.la-site-icon { width:17px; height:17px; color:#3f4a60; }
.browser-tools > u { width:28px; height:28px; border-radius:50%; background:linear-gradient(150deg,#f0b9a4,#c9856a); box-shadow:inset 0 -7px 10px rgba(90,45,30,.25); }
.voice-browser main { padding:24px 20px 22px; }
.voice-browser main h3 { font-size:22px; font-weight:850; letter-spacing:-.035em; }
.voice-browser main > p { margin:6px 0 20px; color:#63708a; font-size:12.5px; }

.voice-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.voice-stat-row > span { padding:13px; border:1px solid #eceff4; border-radius:11px; background:#fff; transition:.28s var(--ease-spring); }
.voice-stat-row > span:hover { transform:translateY(-3px); border-color:#d7e6dd; box-shadow:0 12px 24px rgba(25,55,85,.07); }
.voice-stat-row svg.la-site-icon { width:30px; height:30px; padding:7px; border-radius:9px; color:#0baf50; background:#e9faef; }
.voice-stat-row small { display:block; margin-top:-22px; margin-left:39px; color:#5c6a80; font-size:12px; }
.voice-stat-row b { display:block; margin-top:12px; font-size:26px; font-weight:850; letter-spacing:-.04em; }
.voice-stat-row em { display:flex; align-items:center; gap:5px; margin-top:8px; color:#10a44a; font-size:11px; font-style:normal; font-weight:800; }
.voice-stat-row em > u { text-decoration:none; }
.voice-stat-row em > span { color:#7a8798; font-weight:600; }
.voice-stat-row .stat-blue svg.la-site-icon { color:#2f7ff0; background:#eaf2fe; }
.voice-stat-row .stat-violet svg.la-site-icon { color:#7c4ce4; background:#f1ebfe; }
.voice-stat-row .stat-amber svg.la-site-icon { color:#f2870f; background:#fef2e3; }

.voice-dashboard-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:12px; }
.voice-dashboard-row article { padding:15px; border:1px solid #eceff4; border-radius:11px; background:#fff; }
.voice-dashboard-row article > b { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:800; }
.voice-activity-card p { display:grid; grid-template-columns:26px 1fr; align-items:center; gap:10px; margin-top:15px; }
.voice-activity-card p svg.la-site-icon { width:26px; height:26px; padding:6px; border-radius:8px; color:#e0475f; background:#fdeef0; }
.voice-activity-card .act-amber svg.la-site-icon { color:#f2870f; background:#fef2e3; }
.voice-activity-card .act-blue svg.la-site-icon { color:#2f7ff0; background:#eaf2fe; }
.voice-activity-card p > span { color:#2b374b; font-size:12.5px; }
.voice-activity-card p small { display:block; margin-top:4px; color:#8693a7; font-size:11px; }
.voice-projects-card > b button { padding:5px 11px; border:1px solid #e6eaf1; border-radius:8px; color:#5b6880; background:#fff; font:700 11px var(--font); cursor:pointer; transition:.2s ease; }
.voice-projects-card > b button:hover { border-color:#9fdcb8; color:#0c9a46; background:#f3fdf7; }
.voice-projects-body { display:flex; align-items:center; gap:14px; margin-top:12px; }
.voice-donut { position:relative; flex:none; display:grid; place-items:center; width:124px; height:124px; }
.voice-donut svg { width:124px; height:124px; transform:rotate(-90deg); }
.voice-donut circle { fill:none; stroke-width:5.4; stroke-linecap:butt; }
.voice-donut .donut-track { stroke:#eef1f5; }
.voice-donut .seg-blue { stroke:#2563eb; stroke-dasharray:0 100; animation:voiceDonutBlue 1.1s .2s var(--ease-spring) forwards; }
.voice-donut .seg-green { stroke:#3cc76a; stroke-dasharray:0 100; stroke-dashoffset:-50; animation:voiceDonutGreen 1.1s .45s var(--ease-spring) forwards; }
.voice-donut .seg-amber { stroke:#ff9136; stroke-dasharray:0 100; stroke-dashoffset:-83.4; animation:voiceDonutAmber 1.1s .7s var(--ease-spring) forwards; }
.voice-donut strong { position:absolute; font-size:26px; font-weight:850; letter-spacing:-.04em; text-align:center; }
.voice-donut strong small { display:block; margin-top:2px; color:#738197; font-size:11px; font-weight:600; }
.voice-legend { flex:1; list-style:none; }
.voice-legend li { display:flex; align-items:center; gap:9px; margin-bottom:16px; color:#3a475e; font-size:12.5px; }
.voice-legend li:last-child { margin-bottom:0; }
.voice-legend li i { width:9px; height:9px; border-radius:50%; background:#2563eb; }
.voice-legend .leg-green i { background:#3cc76a; }
.voice-legend .leg-amber i { background:#ff9136; }
.voice-legend li b { margin-left:auto; font-size:12.5px; font-weight:800; }

.voice-flow-wrap { margin-top:16px; padding:15px 16px 17px; border:1px solid #e4ece7; border-radius:15px; background:#fff; box-shadow:0 9px 25px rgba(20,72,44,.05); }
.voice-flow-wrap h4 { margin-bottom:15px; color:#0f3a24; font-size:17px; font-weight:850; letter-spacing:-.03em; text-align:center; }
.voice-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items:start; gap:8px; }
.voice-flow > b { align-self:center; margin-top:2px; color:#8fa6b7; font-size:15px; }
.voice-flow button { display:grid; grid-template-columns:40px 1fr; align-items:start; gap:10px; padding:2px; border:0; color:#1e2b42; background:transparent; text-align:left; cursor:pointer; transition:.25s var(--ease-spring); }
.voice-flow button:hover { transform:translateY(-3px); }
.voice-flow button.active { color:#0a9a43; }
.voice-flow svg.la-site-icon { width:40px; height:40px; padding:10px; border-radius:50%; color:#08a04a; background:#e6f9ed; transition:.25s ease; }
.voice-flow button.active svg.la-site-icon { color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); box-shadow:0 8px 16px rgba(18,160,77,.3); }
.voice-flow button b { display:block; font-size:12px; font-weight:800; line-height:1.3; }
.voice-flow small { display:block; margin-top:5px; color:#73829a; font-size:11px; line-height:1.35; }

.voice-assurance { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-top:14px; padding:14px 16px; border:1px solid #d9ebdf; border-radius:15px; background:linear-gradient(90deg,#f7fffa,#fcfffd); }
.voice-assurance > span { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:2px 10px; }
.voice-assurance svg.la-site-icon { grid-row:1/3; width:34px; height:34px; padding:8px; border-radius:50%; color:#0da84b; background:#e7f9ed; }
.voice-assurance .assure-solid svg.la-site-icon { color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); box-shadow:0 7px 14px rgba(18,160,77,.25); }
.voice-assurance b { color:#123a25; font-size:13px; font-weight:800; }
.voice-assurance small { color:#66748d; font-size:11px; }
.assure-arrow { color:#8fa6b7; font-size:14px; }

/* ────────────────────────── RIGHT · live alert ────────────────────────── */
.voice-alert-panel > header { display:flex; align-items:center; gap:8px; }
.voice-live-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; color:#0c9b43; background:#eafcf1; font-size:11px; font-weight:900; letter-spacing:.06em; }
.voice-live-pill > svg.la-site-icon { width:14px; height:14px; animation:voicePulse 1.6s infinite; }
.voice-icon-btn { display:grid; place-items:center; width:36px; height:36px; border:1px solid #e4eaf0; border-radius:11px; color:#48566d; background:#fff; font:800 11px var(--font); cursor:pointer; transition:.2s ease; }
.voice-icon-btn:first-of-type { margin-left:auto; }
.voice-icon-btn:hover { border-color:#a9e2c0; color:#0c9a46; background:#f4fff8; }
.voice-icon-btn > svg.la-site-icon { width:17px; height:17px; }

.voice-alert-contact { display:flex; align-items:center; gap:9px; margin-top:20px; }
.voice-alert-contact > svg.la-site-icon { width:30px; height:30px; padding:7px; border-radius:50%; color:#0da64a; background:#e7f9ed; }
.voice-alert-contact b { font-size:18px; font-weight:850; letter-spacing:-.03em; }
.voice-alert-contact > svg.la-site-icon:last-child { width:17px; height:17px; padding:0; border-radius:0; color:#2878ee; background:none; }
.voice-alert-panel blockquote { display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 14px; border:1px solid #e6ebf2; border-radius:999px; color:#33405a; background:#f7f9fd; font-size:12.5px; }
.voice-quote-mark { flex:none; color:#12ae51; font-size:13px; font-weight:900; }
.voice-alert-panel > time { display:block; margin-top:8px; color:#8391a8; font-size:11px; font-weight:700; }

.voice-listen-panel { position:relative; margin-top:12px; padding:12px; border:1px solid #ddf2e5; border-radius:20px; background:linear-gradient(170deg,#f3fdf7,#e9faf0); }
.voice-wave-art { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:152px; }
.voice-wave-art img { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 14px 14px rgba(26,115,56,.16)); animation:voiceMascotFloat 4.2s ease-in-out infinite; }
.voice-wave-art .wave { display:flex; align-items:center; justify-content:center; gap:4px; height:70px; }
.voice-wave-art .wave i { width:3px; height:26%; border-radius:99px; background:linear-gradient(#5ee08c,#12a04d); animation:voiceBar 1.05s ease-in-out infinite alternate; }
.voice-wave-art .wave i:nth-child(2) { height:52%; animation-delay:.09s; }
.voice-wave-art .wave i:nth-child(3) { height:78%; animation-delay:.18s; }
.voice-wave-art .wave i:nth-child(4) { height:100%; animation-delay:.27s; }
.voice-wave-art .wave i:nth-child(5) { height:74%; animation-delay:.36s; }
.voice-wave-art .wave i:nth-child(6) { height:46%; animation-delay:.45s; }
.voice-wave-art .wave i:nth-child(7) { height:24%; animation-delay:.54s; }
.voice-wave-art .wave-r i:nth-child(odd) { animation-delay:.22s; }

.voice-switch-row,.voice-handsfree { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid #dcece2; border-radius:13px; background:#fff; }
.voice-switch-row { margin-top:6px; }
.voice-switch-row b { margin-right:auto; font-size:12.5px; font-weight:800; }
.voice-switch-row input,.voice-handsfree input { position:absolute; opacity:0; pointer-events:none; }
.voice-switch-row > span,.voice-handsfree > i { position:relative; flex:none; width:38px; height:21px; border-radius:999px; background:#dbe5df; cursor:pointer; transition:.24s var(--ease-spring); }
.voice-switch-row > span::after,.voice-handsfree > i::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.24s var(--ease-spring); }
.voice-switch-row input:checked + span,.voice-handsfree input:checked + i { background:#16b957; }
.voice-switch-row input:checked + span::after,.voice-handsfree input:checked + i::after { transform:translateX(17px); }
.voice-switch-row button { display:grid; place-items:center; flex:none; width:26px; height:26px; border:0; border-radius:50%; color:#0b9a43; background:#e8f8ed; cursor:pointer; transition:.2s ease; }
.voice-switch-row button > svg.la-site-icon { width:12px; height:12px; fill:currentColor; }
.voice-switch-row button:hover { color:#fff; background:#12a04d; }
.voice-switch-row button.playing { animation:voicePlayPop .9s ease; }
.voice-handsfree { justify-content:space-between; margin-top:12px; border-color:#e3eaf0; }
.voice-handsfree b { display:block; font-size:12.5px; font-weight:800; }
.voice-handsfree small { display:block; margin-top:3px; color:#75829a; font-size:10.5px; }

.voice-alert-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.voice-alert-stats span { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:8px; padding:2px 10px; border-right:1px solid #e9eef1; }
.voice-alert-stats span:last-child { border-right:0; }
.voice-alert-stats svg.la-site-icon { grid-row:1/3; width:19px; height:19px; color:#5c8a72; }
.voice-alert-stats b { font-size:22px; font-weight:850; letter-spacing:-.04em; }
.voice-alert-stats small { color:#7b899e; font-size:9px; font-weight:800; letter-spacing:.06em; }

.voice-alert-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:16px; }
.voice-alert-actions button { padding:10px 8px; border:1px solid #e4eaf0; border-radius:12px; color:#26334a; background:#fff; text-align:left; cursor:pointer; transition:.26s var(--ease-spring); }
.voice-alert-actions button:hover { transform:translateY(-3px); border-color:#b6e6ca; box-shadow:0 10px 20px rgba(20,90,50,.1); }
.voice-alert-actions svg.la-site-icon { width:30px; height:30px; padding:7px; border-radius:9px; color:#fff; background:#12ad51; }
.voice-alert-actions button:nth-child(2) svg.la-site-icon { background:#2879f0; }
.voice-alert-actions button:nth-child(3) svg.la-site-icon { background:#7544e2; }
.voice-alert-actions button:nth-child(4) svg.la-site-icon { background:#f28a20; }
.voice-alert-actions b { display:block; margin-top:9px; font-size:11px; font-weight:800; }
.voice-alert-actions small { display:flex; align-items:center; gap:3px; margin-top:3px; color:#7b899e; font-size:9px; }
.voice-alert-actions small > u { text-decoration:none; }
.voice-alert-actions button.active { border-color:#f6cf9c; background:#fffaf2; }
.voice-alert-actions button:nth-child(1).active { border-color:#9fe0ba; background:#f4fff8; }
.voice-alert-actions button:nth-child(2).active { border-color:#a9caf9; background:#f4f9ff; }
.voice-alert-actions button:nth-child(3).active { border-color:#c6b0f5; background:#f9f6ff; }

.voice-recent-alerts { margin-top:14px; overflow:hidden; border:1px solid #e5ebef; border-radius:14px; background:#fff; }
.voice-recent-alerts > header { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-bottom:1px solid #eef2f4; }
.voice-recent-alerts > header b { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; }
.voice-recent-alerts > header b > svg.la-site-icon { width:15px; height:15px; color:#5c8a72; }
.voice-recent-alerts > header button { display:flex; align-items:center; gap:7px; border:0; color:#099c43; background:transparent; font:800 11px var(--font); cursor:pointer; }
.voice-recent-alerts > header button span { padding:2px 7px; border-radius:999px; background:#e6faed; }
#voiceAlertList > button {
  display:grid; grid-template-columns:32px 1fr auto; gap:10px; width:100%;
  padding:11px 12px; border:0; border-bottom:1px solid #f1f4f6; border-left:3px solid #20c15d;
  color:#253247; background:#fff; text-align:left; cursor:pointer; transition:.22s ease;
}
#voiceAlertList > button:last-child { border-bottom:0; }
#voiceAlertList > button:hover,#voiceAlertList > button.active { background:#f5fff9; }
#voiceAlertList svg.la-site-icon { width:32px; height:32px; padding:7px; border-radius:50%; color:#fff; background:#1aad53; }
#voiceAlertList b { display:block; font-size:12px; font-weight:800; }
#voiceAlertList small { display:block; margin-top:3px; color:#66748d; font-size:11px; line-height:1.35; }
#voiceAlertList em { display:flex; align-items:center; gap:5px; margin-top:6px; color:#52627c; font-size:10.5px; font-style:normal; font-weight:700; }
#voiceAlertList em > svg.la-site-icon { width:11px; height:11px; padding:0; border-radius:0; color:#52627c; background:none; }
#voiceAlertList time { color:#7d8ca3; font-size:10.5px; text-align:right; }
#voiceAlertList time u { display:block; width:7px; height:7px; margin:8px 0 0 auto; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }

/* ─────────────────────────── animations ───────────────────────────────── */
@keyframes voiceMascotFloat { 50% { transform:translateY(-8px) rotate(-1.5deg); } }
@keyframes voiceHeart { 0% { opacity:0; transform:translate(0,0) scale(.7); } 30% { opacity:1; } 100% { opacity:0; transform:translate(10px,-46px) scale(1.15); } }
@keyframes voiceHeartBeat { 50% { transform:scale(1.12) rotate(-6deg); } }
@keyframes voicePulse { 50% { transform:scale(1.25); opacity:.55; } }
@keyframes voiceBar { to { transform:scaleY(.3); opacity:.5; } }
@keyframes voicePlayPop { 40% { transform:scale(1.35); } }
@keyframes voiceDonutBlue { to { stroke-dasharray:50 50; } }
@keyframes voiceDonutGreen { to { stroke-dasharray:33.4 66.6; } }
@keyframes voiceDonutAmber { to { stroke-dasharray:16.6 83.4; } }

/* Canvas scale ladders — one for the 3-up desktop grid, one for stacked. */
@media (max-width:1000px) {
  .bujji-voice-card { grid-template-columns:1fr; }
  .voice-col { display:block; border:0; border-bottom:1px solid #e7eee9; }
  .voice-col-alert { border-bottom:0; }
}
@media (prefers-reduced-motion:reduce) {
  #bujjiVoiceDemo *,#bujjiVoiceDemo *::before,#bujjiVoiceDemo *::after { animation:none!important; }
  .voice-donut .seg-blue { stroke-dasharray:50 50; }
  .voice-donut .seg-green { stroke-dasharray:33.4 66.6; }
  .voice-donut .seg-amber { stroke-dasharray:16.6 83.4; }
}

@media (min-width:1001px) {
  @container (max-width:1702px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:1.0; } }
  @container (max-width:1686px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9906; } }
  @container (max-width:1670px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9812; } }
  @container (max-width:1654px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9718; } }
  @container (max-width:1638px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9624; } }
  @container (max-width:1622px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.953; } }
  @container (max-width:1606px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9436; } }
  @container (max-width:1590px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9342; } }
  @container (max-width:1574px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9248; } }
  @container (max-width:1558px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.9154; } }
  @container (max-width:1542px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.906; } }
  @container (max-width:1526px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8966; } }
  @container (max-width:1510px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8872; } }
  @container (max-width:1494px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8778; } }
  @container (max-width:1478px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8684; } }
  @container (max-width:1462px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.859; } }
  @container (max-width:1446px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8496; } }
  @container (max-width:1430px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8402; } }
  @container (max-width:1414px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8308; } }
  @container (max-width:1398px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8214; } }
  @container (max-width:1382px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.812; } }
  @container (max-width:1366px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.8026; } }
  @container (max-width:1350px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7932; } }
  @container (max-width:1334px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7838; } }
  @container (max-width:1318px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7744; } }
  @container (max-width:1302px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.765; } }
  @container (max-width:1286px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7556; } }
  @container (max-width:1270px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7462; } }
  @container (max-width:1254px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7368; } }
  @container (max-width:1238px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7274; } }
  @container (max-width:1222px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.718; } }
  @container (max-width:1206px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.7086; } }
  @container (max-width:1190px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6992; } }
  @container (max-width:1174px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6898; } }
  @container (max-width:1158px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6804; } }
  @container (max-width:1142px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.671; } }
  @container (max-width:1126px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6616; } }
  @container (max-width:1110px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6522; } }
  @container (max-width:1094px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6428; } }
  @container (max-width:1078px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6334; } }
  @container (max-width:1062px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.624; } }
  @container (max-width:1046px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6146; } }
  @container (max-width:1030px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.6052; } }
  @container (max-width:1014px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5958; } }
  @container (max-width:998px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5864; } }
  @container (max-width:982px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.577; } }
  @container (max-width:966px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5676; } }
  @container (max-width:950px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5582; } }
  @container (max-width:934px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5488; } }
  @container (max-width:918px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5394; } }
  @container (max-width:902px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.53; } }
  @container (max-width:886px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5206; } }
  @container (max-width:870px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5112; } }
  @container (max-width:854px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.5018; } }
  @container (max-width:838px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4924; } }
  @container (max-width:822px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.483; } }
  @container (max-width:806px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4736; } }
  @container (max-width:790px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4642; } }
  @container (max-width:774px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4548; } }
  @container (max-width:758px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4454; } }
  @container (max-width:742px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.436; } }
  @container (max-width:726px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4266; } }
  @container (max-width:710px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4172; } }
  @container (max-width:694px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.4078; } }
  @container (max-width:678px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3984; } }
  @container (max-width:662px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.389; } }
  @container (max-width:646px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3796; } }
  @container (max-width:630px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3702; } }
  @container (max-width:614px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3608; } }
  @container (max-width:598px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3514; } }
  @container (max-width:582px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.342; } }
  @container (max-width:566px) { .voice-intro-panel,.voice-workspace-panel,.voice-alert-panel { --vs:0.3325; } }
}
@media (max-width:1000px) {
  @container (max-width:1000px) { .voice-intro-panel { --vs:2.1645; } .voice-workspace-panel { --vs:1.25; } .voice-alert-panel { --vs:2.2727; } }
  @container (max-width:992px) { .voice-intro-panel { --vs:2.1472; } .voice-workspace-panel { --vs:1.24; } .voice-alert-panel { --vs:2.2545; } }
  @container (max-width:984px) { .voice-intro-panel { --vs:2.1299; } .voice-workspace-panel { --vs:1.23; } .voice-alert-panel { --vs:2.2364; } }
  @container (max-width:976px) { .voice-intro-panel { --vs:2.1126; } .voice-workspace-panel { --vs:1.22; } .voice-alert-panel { --vs:2.2182; } }
  @container (max-width:968px) { .voice-intro-panel { --vs:2.0952; } .voice-workspace-panel { --vs:1.21; } .voice-alert-panel { --vs:2.2; } }
  @container (max-width:960px) { .voice-intro-panel { --vs:2.0779; } .voice-workspace-panel { --vs:1.2; } .voice-alert-panel { --vs:2.1818; } }
  @container (max-width:952px) { .voice-intro-panel { --vs:2.0606; } .voice-workspace-panel { --vs:1.19; } .voice-alert-panel { --vs:2.1636; } }
  @container (max-width:944px) { .voice-intro-panel { --vs:2.0433; } .voice-workspace-panel { --vs:1.18; } .voice-alert-panel { --vs:2.1455; } }
  @container (max-width:936px) { .voice-intro-panel { --vs:2.026; } .voice-workspace-panel { --vs:1.17; } .voice-alert-panel { --vs:2.1273; } }
  @container (max-width:928px) { .voice-intro-panel { --vs:2.0087; } .voice-workspace-panel { --vs:1.16; } .voice-alert-panel { --vs:2.1091; } }
  @container (max-width:920px) { .voice-intro-panel { --vs:1.9913; } .voice-workspace-panel { --vs:1.15; } .voice-alert-panel { --vs:2.0909; } }
  @container (max-width:912px) { .voice-intro-panel { --vs:1.974; } .voice-workspace-panel { --vs:1.14; } .voice-alert-panel { --vs:2.0727; } }
  @container (max-width:904px) { .voice-intro-panel { --vs:1.9567; } .voice-workspace-panel { --vs:1.13; } .voice-alert-panel { --vs:2.0545; } }
  @container (max-width:896px) { .voice-intro-panel { --vs:1.9394; } .voice-workspace-panel { --vs:1.12; } .voice-alert-panel { --vs:2.0364; } }
  @container (max-width:888px) { .voice-intro-panel { --vs:1.9221; } .voice-workspace-panel { --vs:1.11; } .voice-alert-panel { --vs:2.0182; } }
  @container (max-width:880px) { .voice-intro-panel { --vs:1.9048; } .voice-workspace-panel { --vs:1.1; } .voice-alert-panel { --vs:2.0; } }
  @container (max-width:872px) { .voice-intro-panel { --vs:1.8874; } .voice-workspace-panel { --vs:1.09; } .voice-alert-panel { --vs:1.9818; } }
  @container (max-width:864px) { .voice-intro-panel { --vs:1.8701; } .voice-workspace-panel { --vs:1.08; } .voice-alert-panel { --vs:1.9636; } }
  @container (max-width:856px) { .voice-intro-panel { --vs:1.8528; } .voice-workspace-panel { --vs:1.07; } .voice-alert-panel { --vs:1.9455; } }
  @container (max-width:848px) { .voice-intro-panel { --vs:1.8355; } .voice-workspace-panel { --vs:1.06; } .voice-alert-panel { --vs:1.9273; } }
  @container (max-width:840px) { .voice-intro-panel { --vs:1.8182; } .voice-workspace-panel { --vs:1.05; } .voice-alert-panel { --vs:1.9091; } }
  @container (max-width:832px) { .voice-intro-panel { --vs:1.8009; } .voice-workspace-panel { --vs:1.04; } .voice-alert-panel { --vs:1.8909; } }
  @container (max-width:824px) { .voice-intro-panel { --vs:1.7835; } .voice-workspace-panel { --vs:1.03; } .voice-alert-panel { --vs:1.8727; } }
  @container (max-width:816px) { .voice-intro-panel { --vs:1.7662; } .voice-workspace-panel { --vs:1.02; } .voice-alert-panel { --vs:1.8545; } }
  @container (max-width:808px) { .voice-intro-panel { --vs:1.7489; } .voice-workspace-panel { --vs:1.01; } .voice-alert-panel { --vs:1.8364; } }
  @container (max-width:800px) { .voice-intro-panel { --vs:1.7316; } .voice-workspace-panel { --vs:1.0; } .voice-alert-panel { --vs:1.8182; } }
  @container (max-width:792px) { .voice-intro-panel { --vs:1.7143; } .voice-workspace-panel { --vs:0.99; } .voice-alert-panel { --vs:1.8; } }
  @container (max-width:784px) { .voice-intro-panel { --vs:1.697; } .voice-workspace-panel { --vs:0.98; } .voice-alert-panel { --vs:1.7818; } }
  @container (max-width:776px) { .voice-intro-panel { --vs:1.6797; } .voice-workspace-panel { --vs:0.97; } .voice-alert-panel { --vs:1.7636; } }
  @container (max-width:768px) { .voice-intro-panel { --vs:1.6623; } .voice-workspace-panel { --vs:0.96; } .voice-alert-panel { --vs:1.7455; } }
  @container (max-width:760px) { .voice-intro-panel { --vs:1.645; } .voice-workspace-panel { --vs:0.95; } .voice-alert-panel { --vs:1.7273; } }
  @container (max-width:752px) { .voice-intro-panel { --vs:1.6277; } .voice-workspace-panel { --vs:0.94; } .voice-alert-panel { --vs:1.7091; } }
  @container (max-width:744px) { .voice-intro-panel { --vs:1.6104; } .voice-workspace-panel { --vs:0.93; } .voice-alert-panel { --vs:1.6909; } }
  @container (max-width:736px) { .voice-intro-panel { --vs:1.5931; } .voice-workspace-panel { --vs:0.92; } .voice-alert-panel { --vs:1.6727; } }
  @container (max-width:728px) { .voice-intro-panel { --vs:1.5758; } .voice-workspace-panel { --vs:0.91; } .voice-alert-panel { --vs:1.6545; } }
  @container (max-width:720px) { .voice-intro-panel { --vs:1.5584; } .voice-workspace-panel { --vs:0.9; } .voice-alert-panel { --vs:1.6364; } }
  @container (max-width:712px) { .voice-intro-panel { --vs:1.5411; } .voice-workspace-panel { --vs:0.89; } .voice-alert-panel { --vs:1.6182; } }
  @container (max-width:704px) { .voice-intro-panel { --vs:1.5238; } .voice-workspace-panel { --vs:0.88; } .voice-alert-panel { --vs:1.6; } }
  @container (max-width:696px) { .voice-intro-panel { --vs:1.5065; } .voice-workspace-panel { --vs:0.87; } .voice-alert-panel { --vs:1.5818; } }
  @container (max-width:688px) { .voice-intro-panel { --vs:1.4892; } .voice-workspace-panel { --vs:0.86; } .voice-alert-panel { --vs:1.5636; } }
  @container (max-width:680px) { .voice-intro-panel { --vs:1.4719; } .voice-workspace-panel { --vs:0.85; } .voice-alert-panel { --vs:1.5455; } }
  @container (max-width:672px) { .voice-intro-panel { --vs:1.4545; } .voice-workspace-panel { --vs:0.84; } .voice-alert-panel { --vs:1.5273; } }
  @container (max-width:664px) { .voice-intro-panel { --vs:1.4372; } .voice-workspace-panel { --vs:0.83; } .voice-alert-panel { --vs:1.5091; } }
  @container (max-width:656px) { .voice-intro-panel { --vs:1.4199; } .voice-workspace-panel { --vs:0.82; } .voice-alert-panel { --vs:1.4909; } }
  @container (max-width:648px) { .voice-intro-panel { --vs:1.4026; } .voice-workspace-panel { --vs:0.81; } .voice-alert-panel { --vs:1.4727; } }
  @container (max-width:640px) { .voice-intro-panel { --vs:1.3853; } .voice-workspace-panel { --vs:0.8; } .voice-alert-panel { --vs:1.4545; } }
  @container (max-width:632px) { .voice-intro-panel { --vs:1.368; } .voice-workspace-panel { --vs:0.79; } .voice-alert-panel { --vs:1.4364; } }
  @container (max-width:624px) { .voice-intro-panel { --vs:1.3506; } .voice-workspace-panel { --vs:0.78; } .voice-alert-panel { --vs:1.4182; } }
  @container (max-width:616px) { .voice-intro-panel { --vs:1.3333; } .voice-workspace-panel { --vs:0.77; } .voice-alert-panel { --vs:1.4; } }
  @container (max-width:608px) { .voice-intro-panel { --vs:1.316; } .voice-workspace-panel { --vs:0.76; } .voice-alert-panel { --vs:1.3818; } }
  @container (max-width:600px) { .voice-intro-panel { --vs:1.2987; } .voice-workspace-panel { --vs:0.75; } .voice-alert-panel { --vs:1.3636; } }
  @container (max-width:592px) { .voice-intro-panel { --vs:1.2814; } .voice-workspace-panel { --vs:0.74; } .voice-alert-panel { --vs:1.3455; } }
  @container (max-width:584px) { .voice-intro-panel { --vs:1.2641; } .voice-workspace-panel { --vs:0.73; } .voice-alert-panel { --vs:1.3273; } }
  @container (max-width:576px) { .voice-intro-panel { --vs:1.2468; } .voice-workspace-panel { --vs:0.72; } .voice-alert-panel { --vs:1.3091; } }
  @container (max-width:568px) { .voice-intro-panel { --vs:1.2294; } .voice-workspace-panel { --vs:0.71; } .voice-alert-panel { --vs:1.2909; } }
  @container (max-width:560px) { .voice-intro-panel { --vs:1.2121; } .voice-workspace-panel { --vs:0.7; } .voice-alert-panel { --vs:1.2727; } }
  @container (max-width:552px) { .voice-intro-panel { --vs:1.1948; } .voice-workspace-panel { --vs:0.69; } .voice-alert-panel { --vs:1.2545; } }
  @container (max-width:544px) { .voice-intro-panel { --vs:1.1775; } .voice-workspace-panel { --vs:0.68; } .voice-alert-panel { --vs:1.2364; } }
  @container (max-width:536px) { .voice-intro-panel { --vs:1.1602; } .voice-workspace-panel { --vs:0.67; } .voice-alert-panel { --vs:1.2182; } }
  @container (max-width:528px) { .voice-intro-panel { --vs:1.1429; } .voice-workspace-panel { --vs:0.66; } .voice-alert-panel { --vs:1.2; } }
  @container (max-width:520px) { .voice-intro-panel { --vs:1.1255; } .voice-workspace-panel { --vs:0.65; } .voice-alert-panel { --vs:1.1818; } }
  @container (max-width:512px) { .voice-intro-panel { --vs:1.1082; } .voice-workspace-panel { --vs:0.64; } .voice-alert-panel { --vs:1.1636; } }
  @container (max-width:504px) { .voice-intro-panel { --vs:1.0909; } .voice-workspace-panel { --vs:0.63; } .voice-alert-panel { --vs:1.1455; } }
  @container (max-width:496px) { .voice-intro-panel { --vs:1.0736; } .voice-workspace-panel { --vs:0.62; } .voice-alert-panel { --vs:1.1273; } }
  @container (max-width:488px) { .voice-intro-panel { --vs:1.0563; } .voice-workspace-panel { --vs:0.61; } .voice-alert-panel { --vs:1.1091; } }
  @container (max-width:480px) { .voice-intro-panel { --vs:1.039; } .voice-workspace-panel { --vs:0.6; } .voice-alert-panel { --vs:1.0909; } }
  @container (max-width:472px) { .voice-intro-panel { --vs:1.0216; } .voice-workspace-panel { --vs:0.59; } .voice-alert-panel { --vs:1.0727; } }
  @container (max-width:464px) { .voice-intro-panel { --vs:1.0043; } .voice-workspace-panel { --vs:0.58; } .voice-alert-panel { --vs:1.0545; } }
  @container (max-width:456px) { .voice-intro-panel { --vs:0.987; } .voice-workspace-panel { --vs:0.57; } .voice-alert-panel { --vs:1.0364; } }
  @container (max-width:448px) { .voice-intro-panel { --vs:0.9697; } .voice-workspace-panel { --vs:0.56; } .voice-alert-panel { --vs:1.0182; } }
  @container (max-width:440px) { .voice-intro-panel { --vs:0.9524; } .voice-workspace-panel { --vs:0.55; } .voice-alert-panel { --vs:1.0; } }
  @container (max-width:432px) { .voice-intro-panel { --vs:0.9351; } .voice-workspace-panel { --vs:0.54; } .voice-alert-panel { --vs:0.9818; } }
  @container (max-width:424px) { .voice-intro-panel { --vs:0.9177; } .voice-workspace-panel { --vs:0.53; } .voice-alert-panel { --vs:0.9636; } }
  @container (max-width:416px) { .voice-intro-panel { --vs:0.9004; } .voice-workspace-panel { --vs:0.52; } .voice-alert-panel { --vs:0.9455; } }
  @container (max-width:408px) { .voice-intro-panel { --vs:0.8831; } .voice-workspace-panel { --vs:0.51; } .voice-alert-panel { --vs:0.9273; } }
  @container (max-width:400px) { .voice-intro-panel { --vs:0.8658; } .voice-workspace-panel { --vs:0.5; } .voice-alert-panel { --vs:0.9091; } }
  @container (max-width:392px) { .voice-intro-panel { --vs:0.8485; } .voice-workspace-panel { --vs:0.49; } .voice-alert-panel { --vs:0.8909; } }
  @container (max-width:384px) { .voice-intro-panel { --vs:0.8312; } .voice-workspace-panel { --vs:0.48; } .voice-alert-panel { --vs:0.8727; } }
  @container (max-width:376px) { .voice-intro-panel { --vs:0.8139; } .voice-workspace-panel { --vs:0.47; } .voice-alert-panel { --vs:0.8545; } }
  @container (max-width:368px) { .voice-intro-panel { --vs:0.7965; } .voice-workspace-panel { --vs:0.46; } .voice-alert-panel { --vs:0.8364; } }
  @container (max-width:360px) { .voice-intro-panel { --vs:0.7792; } .voice-workspace-panel { --vs:0.45; } .voice-alert-panel { --vs:0.8182; } }
  @container (max-width:352px) { .voice-intro-panel { --vs:0.7619; } .voice-workspace-panel { --vs:0.44; } .voice-alert-panel { --vs:0.8; } }
  @container (max-width:344px) { .voice-intro-panel { --vs:0.7446; } .voice-workspace-panel { --vs:0.43; } .voice-alert-panel { --vs:0.7818; } }
  @container (max-width:336px) { .voice-intro-panel { --vs:0.7273; } .voice-workspace-panel { --vs:0.42; } .voice-alert-panel { --vs:0.7636; } }
  @container (max-width:328px) { .voice-intro-panel { --vs:0.71; } .voice-workspace-panel { --vs:0.41; } .voice-alert-panel { --vs:0.7455; } }
  @container (max-width:320px) { .voice-intro-panel { --vs:0.6926; } .voice-workspace-panel { --vs:0.4; } .voice-alert-panel { --vs:0.7273; } }
  @container (max-width:312px) { .voice-intro-panel { --vs:0.6753; } .voice-workspace-panel { --vs:0.39; } .voice-alert-panel { --vs:0.7091; } }
  @container (max-width:304px) { .voice-intro-panel { --vs:0.658; } .voice-workspace-panel { --vs:0.38; } .voice-alert-panel { --vs:0.6909; } }
  @container (max-width:296px) { .voice-intro-panel { --vs:0.6407; } .voice-workspace-panel { --vs:0.37; } .voice-alert-panel { --vs:0.6727; } }
  @container (max-width:288px) { .voice-intro-panel { --vs:0.6234; } .voice-workspace-panel { --vs:0.36; } .voice-alert-panel { --vs:0.6545; } }
  @container (max-width:280px) { .voice-intro-panel { --vs:0.6061; } .voice-workspace-panel { --vs:0.35; } .voice-alert-panel { --vs:0.6364; } }
}

/* Bujji Voice — mockup calibration pass (fit each panel to the 925px canvas) */
.voice-intro-panel { padding:22px 18px 0 24px; }
.voice-intro-panel h2 { margin:28px 0 13px; font-size:33px; line-height:1.18; white-space:nowrap; }
.voice-intro-panel > p { max-width:396px; }
.voice-benefits { gap:9px 8px; margin-top:22px; }
.voice-benefits button { min-height:92px; padding:13px 12px; gap:5px 9px; grid-template-columns:36px 1fr; }
.voice-benefits button > svg.la-site-icon { width:36px; height:36px; padding:8px; }
.voice-benefits b { font-size:12.5px; }
.voice-benefits small { font-size:10.5px; line-height:1.42; }

.voice-mascot-scene { left:14px; right:14px; height:286px; }
.voice-mascot-scene > img { left:0; bottom:-30px; width:244px; height:244px; }
.voice-mascot-heart { left:130px; bottom:44px; }
.voice-privacy { right:2px; bottom:112px; }

.voice-browser main { padding:22px 20px 20px; }
.voice-dashboard-row article { padding:14px; }
.voice-activity-card p { margin-top:13px; }
.voice-legend li { margin-bottom:14px; }

.voice-flow-wrap { margin-top:14px; padding:14px 14px 15px; }
.voice-flow-wrap h4 { margin-bottom:13px; font-size:16.5px; }
.voice-flow { gap:6px; }
.voice-flow > b { font-size:13px; }
.voice-flow button { grid-template-columns:36px 1fr; gap:8px; }
.voice-flow svg.la-site-icon { width:36px; height:36px; padding:9px; }
.voice-flow button b { font-size:11.5px; }
.voice-flow small { margin-top:4px; font-size:10px; line-height:1.32; }

.voice-assurance { gap:6px; margin-top:12px; padding:13px 14px; }
.voice-assurance > span { grid-template-columns:30px 1fr; gap:1px 9px; min-width:0; }
.voice-assurance svg.la-site-icon { width:30px; height:30px; padding:7px; }
.voice-assurance b { font-size:11px; white-space:nowrap; }
.voice-assurance small { font-size:9px; white-space:nowrap; }
.assure-arrow { font-size:12px; }
.voice-flow button,.voice-flow button > span { min-width:0; }

.voice-alert-contact { margin-top:14px; }
.voice-alert-panel blockquote { margin-top:11px; }
.voice-alert-panel > time { margin-top:6px; }
.voice-listen-panel { margin-top:10px; padding:10px; }
.voice-wave-art { height:124px; }
.voice-wave-art img { width:126px; height:126px; }
.voice-wave-art .wave { height:58px; }
.voice-handsfree { margin-top:10px; }
.voice-alert-stats { margin-top:11px; }
.voice-alert-actions { margin-top:11px; }
.voice-recent-alerts { margin-top:10px; }

/* Bujji Voice — interaction + motion states */
#bujjiVoiceDemo .voice-donut .seg-blue,
#bujjiVoiceDemo .voice-donut .seg-green,
#bujjiVoiceDemo .voice-donut .seg-amber { animation-play-state:paused; }
#bujjiVoiceDemo.in-view .voice-donut .seg-blue,
#bujjiVoiceDemo.in-view .voice-donut .seg-green,
#bujjiVoiceDemo.in-view .voice-donut .seg-amber { animation-play-state:running; }

#voiceAlertCopy.typing::after { content:"▍"; margin-left:1px; color:#12ae51; animation:voiceCaret .8s steps(1) infinite; }
@keyframes voiceCaret { 50% { opacity:0; } }

.voice-assurance > span { border-radius:11px; transition:.3s var(--ease-spring); }
.voice-assurance > span.lit { background:rgba(34,189,99,.1); box-shadow:0 0 0 1px rgba(34,189,99,.25); transform:translateY(-2px); }
.voice-assurance > span.lit > svg.la-site-icon { color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); }

#bujjiVoiceDemo.speaking .voice-wave-art .wave i { animation-duration:.52s; }
#bujjiVoiceDemo:not(.speaking) .voice-wave-art .wave i { opacity:.45; animation-duration:2.4s; }
#bujjiVoiceDemo.speaking .voice-listen-panel { box-shadow:0 0 0 1px rgba(34,189,99,.3),0 14px 30px rgba(18,140,70,.12); }
.voice-listen-panel { transition:box-shadow .35s ease; }

.voice-flow button { position:relative; }
.voice-flow button::after {
  content:""; position:absolute; inset:auto 0 -8px 0; height:2px;
  border-radius:99px; background:#22bd63; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-spring);
}
.voice-flow button.active::after { transform:scaleX(1); }

#voiceAlertList > button.active { border-left-color:#0c8f43; }
#voiceAlertList > button.active b { color:#0a7c3f; }

#bujjiVoiceDemo[data-mode="read"] .voice-switch-row,
#bujjiVoiceDemo[data-mode="voice"] .voice-handsfree { border-color:#7fd9a2; box-shadow:0 0 0 3px rgba(34,189,99,.1); }
#bujjiVoiceDemo[data-mode="private"] .voice-privacy,
#bujjiVoiceDemo[data-mode="local"] .voice-privacy { border-color:#7fd9a2; box-shadow:0 12px 26px rgba(20,105,52,.18); transform:translateY(-3px); }
.voice-privacy { transition:.3s var(--ease-spring); }

/* ==========================================================================
   Bujji Voice — upgraded LIVE ALERT panel (right column)
   ========================================================================== */
.voice-alert-panel { padding:16px 14px 0; }

/* mascot art: transparent cut-outs, with the round badge as a safe fallback */
.voice-mascot-scene > img { border-radius:0; }
.voice-mascot-scene > img.is-fallback { filter:drop-shadow(0 20px 20px rgba(24,71,44,.16)); }
.voice-mascot-scene > img:not(.is-fallback) { filter:drop-shadow(0 18px 22px rgba(24,71,44,.20)); }
.voice-mascot-scene > img:not(.is-fallback) ~ .voice-mascot-heart,
.voice-mascot-scene > img:not(.is-fallback) ~ .voice-heart { display:none; }

/* ── alert card ────────────────────────────────────────────────────────── */
.wa-alert-card {
  position:relative; overflow:hidden;
  padding:14px 14px 0 16px; border:1px solid #e6ecf0; border-radius:18px;
  background:#fff; box-shadow:0 14px 34px rgba(22,60,45,.08);
}
.wa-alert-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(#22bd63,#12a04d); }
.wa-alert-card > header { display:flex; align-items:center; gap:8px; }

.wa-alert-body { display:grid; grid-template-columns:1fr 156px; gap:14px; margin-top:12px; }
.wa-alert-info { min-width:0; padding-bottom:14px; }
.wa-alert-info h3 { font-size:24px; font-weight:850; letter-spacing:-.045em; }
.wa-alert-info h3 span { color:#12ae51; }
.wa-alert-info > p { margin-top:3px; color:#7c8ba0; font-size:11px; }
.wa-alert-info::after { content:""; display:block; height:1px; margin:12px 0 0; background:#eef2f5; }

.wa-alert-contact { display:flex; align-items:center; gap:8px; margin-top:13px; }
.wa-alert-contact > svg.la-site-icon { width:28px; height:28px; padding:6px; border-radius:50%; color:#0da64a; background:#e7f9ed; }
.wa-alert-contact b { font-size:14px; font-weight:850; letter-spacing:-.02em; }
.wa-alert-contact > svg.la-site-icon:last-child { width:15px; height:15px; padding:0; border-radius:0; color:#2878ee; background:none; }
.wa-alert-info blockquote { display:flex; align-items:flex-start; gap:8px; margin-top:11px; padding:9px 12px; border:1px solid #e9edf3; border-radius:11px; color:#33405a; background:#f7f9fc; font-size:11.5px; line-height:1.42; }
.wa-alert-time { display:flex; align-items:center; gap:6px; margin-top:10px; color:#8391a8; font-size:10.5px; font-weight:700; }
.wa-alert-time > svg.la-site-icon { width:13px; height:13px; }

/* mascot stage */
.wa-alert-stage { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:150px; padding-bottom:26px; }
.wa-stage-rings { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.wa-stage-rings::before { content:""; position:absolute; width:112px; height:112px; border-radius:50%; background:radial-gradient(circle,rgba(84,226,136,.28),rgba(190,250,212,.18) 55%,transparent 72%); }
.wa-stage-rings i { position:absolute; border:1px solid rgba(34,189,99,.16); border-radius:50%; animation:waRing 3.6s ease-out infinite; }
.wa-stage-rings i:nth-child(1) { width:86px; height:86px; }
.wa-stage-rings i:nth-child(2) { width:114px; height:114px; animation-delay:.6s; }
.wa-stage-rings i:nth-child(3) { width:142px; height:142px; animation-delay:1.2s; }
.wa-alert-stage > img { position:relative; z-index:2; width:106px; height:106px; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(26,115,56,.18)); animation:voiceMascotFloat 4.2s ease-in-out infinite; }
.wa-alert-stage > img.is-fallback { border-radius:50%; }
.wa-alert-stage .wave { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:3px; height:48px; }
.wa-alert-stage .wave i { width:3px; height:30%; border-radius:99px; background:linear-gradient(#8b7bf5,#12a04d); animation:voiceBar 1.05s ease-in-out infinite alternate; }
.wa-alert-stage .wave i:nth-child(2) { height:58%; animation-delay:.1s; }
.wa-alert-stage .wave i:nth-child(3) { height:100%; animation-delay:.2s; }
.wa-alert-stage .wave i:nth-child(4) { height:64%; animation-delay:.3s; }
.wa-alert-stage .wave i:nth-child(5) { height:34%; animation-delay:.4s; }
.wa-alert-stage .wave-r i:nth-child(odd) { animation-delay:.24s; }
.wa-alert-stage .voice-switch-row {
  position:absolute; z-index:3; left:-42px; right:-8px; bottom:0; margin:0;
  padding:8px 10px; border:1px solid #e4eaf0; border-radius:999px;
  background:#fff; box-shadow:0 8px 20px rgba(20,60,44,.1);
}
.wa-alert-stage .voice-switch-row b { font-size:12px; }

.wa-alert-foot { display:grid; grid-template-columns:1fr 148px; align-items:center; gap:10px; margin:0 -14px 0 -16px; padding:11px 14px 12px 16px; border-top:1px solid #eef2f5; }
.wa-alert-foot .voice-alert-stats { margin:0; }
.wa-alert-foot .voice-alert-stats span { padding:0 8px; }
.wa-alert-foot .voice-handsfree { margin:0; padding:9px 11px; border-radius:12px; }
.wa-alert-foot .voice-handsfree b { font-size:11.5px; }
.wa-alert-foot .voice-handsfree small { font-size:9px; }
.wa-alert-foot .voice-handsfree > i { width:34px; height:34px; flex:none; }
.wa-alert-foot .voice-handsfree > i { width:34px; height:19px; }

/* ── action tiles ──────────────────────────────────────────────────────── */
.voice-alert-actions { grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.voice-alert-actions button { position:relative; padding:10px 9px 11px; border:1px solid #e6ebf1; border-radius:13px; background:linear-gradient(160deg,#f5fbf7,#ffffff 70%); }
.voice-alert-actions button:nth-child(2) { background:linear-gradient(160deg,#f3f8ff,#ffffff 70%); }
.voice-alert-actions button:nth-child(3) { background:linear-gradient(160deg,#f7f4ff,#ffffff 70%); }
.voice-alert-actions button:nth-child(4) { background:linear-gradient(160deg,#fff7ef,#ffffff 70%); }
.voice-alert-actions svg.la-site-icon { width:30px; height:30px; padding:7px; border-radius:10px; }
.voice-alert-actions b { margin-top:10px; font-size:11px; }
.voice-alert-actions small { display:block; margin-top:2px; padding-right:20px; color:#7b899e; font-size:8.5px; line-height:1.3; }
.voice-alert-actions u.la-site-icon {
  position:absolute; right:9px; bottom:11px; width:20px; height:20px; padding:4px;
  border-radius:50%; color:#fff; background:#12ad51; transition:transform .22s var(--ease-spring);
}
.voice-alert-actions button:nth-child(2) u.la-site-icon { background:#2879f0; }
.voice-alert-actions button:nth-child(3) u.la-site-icon { background:#7544e2; }
.voice-alert-actions button:nth-child(4) u.la-site-icon { background:#f28a20; }
.voice-alert-actions button:hover u.la-site-icon { transform:translateX(3px); }

/* ── recent alerts ─────────────────────────────────────────────────────── */
.voice-recent-alerts { margin-top:12px; border:1px solid #e6ecf0; border-radius:16px; background:#fff; }
.voice-recent-alerts > header { padding:11px 12px; border-bottom:0; }
.voice-recent-alerts > header b { gap:9px; font-size:13px; }
.wa-recent-ico { display:grid; place-items:center; width:26px; height:26px; border-radius:9px; background:#e9f1fe; }
.wa-recent-ico > svg.la-site-icon { width:14px; height:14px; color:#2f7ff0; }
.voice-recent-alerts > header button span { padding:2px 8px; font-size:10.5px; }
#voiceAlertList { display:grid; gap:8px; padding:0 10px 11px; }

.wa-row { position:relative; overflow:hidden; border-radius:13px; background:#f4f7fa; transition:.28s var(--ease-spring); }
.wa-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#20c15d; }
.wa-row:hover { background:#eef7f2; }
.wa-row.open { background:#f4f7fa; box-shadow:inset 0 0 0 1px rgba(34,189,99,.18); }
.wa-row-main { display:grid; grid-template-columns:36px 1fr auto; column-gap:10px; width:100%; padding:11px 12px 4px 14px; border:0; background:transparent; text-align:left; cursor:pointer; }
.wa-row-main > svg.la-site-icon { grid-row:1/3; width:36px; height:36px; padding:8px; border-radius:50%; color:#fff; background:#1aad53; }
.wa-row-main b { font-size:12.5px; font-weight:850; }
.wa-row-main small { grid-column:2; color:#5d6b80; font-size:11px; line-height:1.4; }
.wa-row-main time { grid-row:1/3; align-self:start; color:#7d8ca3; font-size:10.5px; font-weight:700; text-align:right; }
.wa-row-main time u { display:block; width:7px; height:7px; margin:9px 0 0 auto; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.16); }
.wa-row-reply {
  display:inline-flex; align-items:center; gap:6px; margin:6px 0 11px 14px;
  padding:6px 11px; border:1px solid #e2e8ee; border-radius:9px;
  color:#3f4d63; background:#fff; font:800 10.5px var(--font); cursor:pointer; transition:.2s ease;
}
.wa-row-reply:hover { border-color:#8fdcae; color:#0b8f44; background:#f3fdf7; }
.wa-row-reply > svg.la-site-icon { width:12px; height:12px; }
.wa-row.open .wa-row-reply { border-color:#dfe6ec; color:#5b6980; }

.wa-compose { display:grid; gap:9px; overflow:hidden; max-height:0; margin:0 12px 0 14px; opacity:0; transition:max-height .38s var(--ease-spring),opacity .25s ease,margin .38s var(--ease-spring); }
.wa-row.open .wa-compose { max-height:180px; margin-bottom:12px; opacity:1; }
.wa-compose textarea {
  width:100%; padding:10px 11px; border:1.5px solid #7fd9a2; border-radius:11px;
  color:#22314a; background:#fff; font:500 11px/1.5 var(--font); resize:none; outline:none;
  box-shadow:0 0 0 3px rgba(34,189,99,.08);
}
.wa-compose textarea::placeholder { color:#93a1b5; }
.wa-compose textarea:focus { border-color:#22bd63; box-shadow:0 0 0 3px rgba(34,189,99,.16); }
.wa-compose-actions { display:flex; align-items:center; gap:8px; }
.wa-compose-actions button { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid #e2e8ee; border-radius:10px; color:#3f4d63; background:#fff; font:800 11px var(--font); cursor:pointer; transition:.22s var(--ease-spring); }
.wa-compose-actions button > svg.la-site-icon { width:13px; height:13px; }
.wa-compose-actions .wa-send { border-color:transparent; color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); box-shadow:0 8px 16px rgba(18,160,77,.24); }
.wa-compose-actions .wa-send:hover { transform:translateY(-2px); box-shadow:0 11px 20px rgba(18,160,77,.3); }
.wa-compose-actions .wa-suggest:hover { border-color:#c6b0f5; color:#6b3fd8; background:#faf8ff; }
.wa-compose-actions .wa-mic { margin-left:auto; padding:8px; }
.wa-compose-actions .wa-mic:hover { border-color:#8fdcae; color:#0b8f44; background:#f3fdf7; }
.wa-compose-actions .wa-mic.recording { border-color:#ff6d8a; color:#e0344f; background:#fff2f5; animation:voicePulse 1.1s infinite; }
.wa-row.sent .wa-row-main time u { background:#9aa7b8; box-shadow:none; }

@keyframes waRing { 0% { transform:scale(.72); opacity:0; } 25% { opacity:.85; } 100% { transform:scale(1.18); opacity:0; } }

/* Bujji Voice — LIVE ALERT panel fit pass (440px canvas) */
.voice-alert-panel { padding:16px 14px 0; }
.wa-alert-body { grid-template-columns:1fr 170px; gap:12px; }
.wa-alert-info h3 { font-size:23px; }
.wa-alert-contact b { font-size:13.5px; }
.wa-alert-info blockquote { font-size:11px; }

.wa-alert-stage { min-height:154px; padding-bottom:30px; }
.wa-alert-stage > img { width:100px; height:100px; }
.wa-alert-stage .voice-switch-row { left:-56px; right:-6px; bottom:0; padding:7px 9px; gap:8px; }
.wa-alert-stage .voice-switch-row b { font-size:11.5px; }
.wa-alert-stage .voice-switch-row > span { width:34px; height:19px; }
.wa-alert-stage .voice-switch-row > span::after { width:13px; height:13px; }
.wa-alert-stage .voice-switch-row input:checked + span::after { transform:translateX(15px); }
.wa-alert-stage .voice-switch-row button { width:23px; height:23px; }

.wa-alert-foot { grid-template-columns:1fr 168px; gap:8px; }
.wa-alert-foot .voice-alert-stats span { padding:0 7px; column-gap:6px; }
.wa-alert-foot .voice-alert-stats svg.la-site-icon { width:16px; height:16px; }
.wa-alert-foot .voice-alert-stats b { font-size:18px; }
.wa-alert-foot .voice-alert-stats small { font-size:7.5px; letter-spacing:.05em; }
.wa-alert-foot .voice-handsfree { gap:8px; padding:8px 10px; }
.wa-alert-foot .voice-handsfree b { font-size:11px; }
.wa-alert-foot .voice-handsfree small { margin-top:2px; font-size:8.5px; }

.voice-alert-actions b { font-size:10.5px; }
.voice-alert-actions small { padding-right:18px; font-size:8px; }

.wa-row-main { grid-template-columns:34px 1fr auto; padding:10px 11px 4px 13px; }
.wa-row-main > svg.la-site-icon { width:34px; height:34px; padding:8px; }
.wa-row-main b { grid-column:2; align-self:center; font-size:12px; }
.wa-row-main small { font-size:10.5px; }
.wa-row-main time { grid-row:1; grid-column:3; align-self:center; font-size:10px; }
.wa-row-main time u { margin-top:6px; }

/* Bujji Voice — LIVE ALERT panel: fit to the 925px canvas, list scrolls */
.voice-alert-panel { display:flex; flex-direction:column; padding:16px 14px 14px; }

.wa-alert-card { flex:none; padding:12px 12px 0 14px; }
.wa-alert-card > header { gap:7px; }
.wa-alert-card .voice-live-pill { padding:6px 11px; font-size:10px; }
.wa-alert-card .voice-icon-btn { width:31px; height:31px; border-radius:10px; font-size:10px; }
.wa-alert-card .voice-icon-btn > svg.la-site-icon { width:15px; height:15px; }

.wa-alert-body { grid-template-columns:1fr 162px; gap:10px; margin-top:10px; }
.wa-alert-info { padding-bottom:10px; }
.wa-alert-info h3 { font-size:21px; }
.wa-alert-info > p { margin-top:2px; font-size:10px; }
.wa-alert-info::after { margin-top:9px; }
.wa-alert-contact { gap:7px; margin-top:10px; }
.wa-alert-contact > svg.la-site-icon { width:25px; height:25px; padding:6px; }
.wa-alert-contact b { font-size:13px; }
.wa-alert-info blockquote { margin-top:9px; padding:8px 10px; font-size:10.5px; }
.wa-alert-time { margin-top:8px; font-size:10px; }

.wa-alert-stage { min-height:0; height:132px; padding-bottom:26px; }
.wa-alert-stage > img { width:86px; height:86px; }
.wa-alert-stage .wave { height:40px; }
.wa-stage-rings::before { width:94px; height:94px; }
.wa-stage-rings i:nth-child(1) { width:72px; height:72px; }
.wa-stage-rings i:nth-child(2) { width:96px; height:96px; }
.wa-stage-rings i:nth-child(3) { width:120px; height:120px; }
.wa-alert-stage .voice-switch-row { left:-34px; right:-4px; }

.wa-alert-foot { grid-template-columns:minmax(0,1fr) minmax(0,158px); margin:0 -12px 0 -14px; padding:9px 12px 10px 14px; }
.wa-alert-foot .voice-alert-stats span { min-width:0; padding:0 6px; column-gap:5px; }
.wa-alert-foot .voice-alert-stats b { font-size:16px; }
.wa-alert-foot .voice-alert-stats small { font-size:7px; }
.wa-alert-foot .voice-handsfree { min-width:0; gap:6px; padding:7px 9px; }
.wa-alert-foot .voice-handsfree span { min-width:0; }
.wa-alert-foot .voice-handsfree b { font-size:10.5px; }
.wa-alert-foot .voice-handsfree small { font-size:8px; }
.wa-alert-foot .voice-handsfree > i { flex:none; width:30px; height:17px; }
.wa-alert-foot .voice-handsfree > i::after { width:11px; height:11px; }
.wa-alert-foot .voice-handsfree input:checked + i::after { transform:translateX(13px); }

.voice-alert-actions { flex:none; gap:7px; margin-top:10px; }
.voice-alert-actions button { padding:9px 8px 9px; }
.voice-alert-actions svg.la-site-icon { width:26px; height:26px; padding:6px; border-radius:8px; }
.voice-alert-actions b { margin-top:7px; font-size:10px; }
.voice-alert-actions small { margin-top:1px; padding-right:17px; font-size:7.5px; }
.voice-alert-actions u.la-site-icon { right:8px; bottom:9px; width:17px; height:17px; padding:3.5px; }

.voice-recent-alerts { flex:1; min-height:0; display:flex; flex-direction:column; margin-top:10px; }
.voice-recent-alerts > header { flex:none; padding:10px 11px; }
.voice-recent-alerts > header b { gap:8px; font-size:12px; }
.wa-recent-ico { width:24px; height:24px; border-radius:8px; }
.wa-recent-ico > svg.la-site-icon { width:13px; height:13px; }
#voiceAlertList { flex:1; min-height:0; gap:7px; padding:0 9px 10px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#cbd7de transparent; }
#voiceAlertList::-webkit-scrollbar { width:5px; }
#voiceAlertList::-webkit-scrollbar-thumb { border-radius:99px; background:#cbd7de; }

.wa-row-main { grid-template-columns:32px 1fr auto; padding:9px 10px 3px 12px; column-gap:9px; }
.wa-row-main > svg.la-site-icon { width:32px; height:32px; padding:7px; }
.wa-row-main b { font-size:11.5px; }
.wa-row-main small { font-size:10px; line-height:1.38; }
.wa-row-main time { font-size:9.5px; }
.wa-row-main time u { width:6px; height:6px; margin-top:5px; }
.wa-row-reply { margin:5px 0 9px 12px; padding:5px 10px; font-size:10px; }
.wa-compose { margin:0 10px 0 12px; gap:8px; }
.wa-row.open .wa-compose { margin-bottom:10px; }
.wa-compose textarea { padding:9px 10px; font-size:10.5px; }
.wa-compose-actions button { padding:7px 11px; font-size:10.5px; }
.wa-compose-actions .wa-mic { padding:7px; }

/* Bujji Voice — alert card: stage stretches, Read Aloud pill anchors to its base */
.wa-alert-body { align-items:stretch; }
.wa-alert-stage { height:auto; min-height:150px; padding:4px 0 30px; border-left:1px solid #eef2f5; }
.wa-alert-stage .voice-switch-row { left:-10px; right:-2px; bottom:2px; }
.wa-alert-info::after { margin-top:9px; }
.wa-alert-info blockquote { margin-right:6px; }
/* Bujji Voice — reply chip must be block-level so its margins size the row */
.wa-row-reply { display:flex; width:max-content; }
/* Bujji Voice — alert list scrolls as a flex column so rows keep their own height */
#voiceAlertList { display:flex; flex-direction:column; }
#voiceAlertList > .wa-row { flex:none; }
/* Bujji Voice — icon sizing inside the alert list (avatar vs. inline glyphs) */
#voiceAlertList svg.la-site-icon { width:13px; height:13px; padding:0; border-radius:0; color:inherit; background:none; box-shadow:none; }
#voiceAlertList .wa-row-main > svg.la-site-icon { width:32px; height:32px; padding:7px; border-radius:50%; color:#fff; background:#1aad53; }
#voiceAlertList .wa-compose-actions .wa-mic > svg.la-site-icon { width:14px; height:14px; }

/* Growth hero icon guard */
.growth-hero .growth-eyebrow > svg.la-site-icon { flex:0 0 32px; width:32px!important; height:32px!important; padding:7px!important; border-radius:10px!important; }
.growth-hero .growth-trust svg.la-site-icon { flex:0 0 42px; width:42px!important; height:42px!important; padding:9px!important; border-radius:13px!important; }
.growth-hero .growth-automation > svg.la-site-icon { flex:0 0 46px; width:46px!important; height:46px!important; padding:10px!important; border-radius:13px!important; }
.growth-hero .growth-whatsapp-pulse > svg.la-site-icon { width:30px!important; height:30px!important; padding:0!important; }
.growth-hero .growth-proof-grid button > svg.la-site-icon { flex:0 0 38px; width:38px!important; height:38px!important; padding:8px!important; border-radius:11px!important; }
@media (max-width:620px) {
  .growth-hero .growth-eyebrow > svg.la-site-icon { flex-basis:28px; width:28px!important; height:28px!important; padding:6px!important; }
  .growth-hero .growth-trust svg.la-site-icon { flex-basis:36px; width:36px!important; height:36px!important; padding:8px!important; }
  .growth-hero .growth-automation > svg.la-site-icon { flex-basis:36px; width:36px!important; height:36px!important; padding:8px!important; }
  .growth-hero .growth-whatsapp-pulse > svg.la-site-icon { width:24px!important; height:24px!important; }
  .growth-hero .growth-proof-grid button > svg.la-site-icon { flex-basis:34px; width:34px!important; height:34px!important; padding:7px!important; }
}
@media (min-width:1500px) {
  .hero.growth-hero { padding-top:90px; }
  .growth-hero-inner { grid-template-columns:minmax(675px,.9fr) minmax(840px,1.25fr); gap:54px; }
  .growth-copy h1 { max-width:760px; font-size:80px; }
  .growth-copy > p { margin-top:28px; }
  .growth-actions { margin-top:30px; }
  .growth-trust { margin-top:36px; }
}

/* Hero dashboard correction: preserve the complete 2730×1536 capture and
   keep live metric controls around its perimeter instead of on top of it. */
.growth-product { height:clamp(560px,44vw,760px); }
.growth-dashboard-shell {
  left:0;
  right:0;
  top:10%;
  bottom:auto;
  width:100%;
  height:auto;
  aspect-ratio:2730 / 1536;
  background:#fff;
}
.growth-browser-bar { display:none; }
.growth-dashboard { width:100%; height:100%; object-fit:contain; object-position:center; }
.growth-scan { inset:0 0 auto; }
.growth-automation { left:3%; bottom:0; }
.growth-campaign { right:1%; bottom:0; min-height:112px; }
.growth-whatsapp-pulse { right:-2%; top:46%; }
@media (min-width:1500px) {
  .growth-product { height:760px; }
  .growth-dashboard-shell { top:8%; }
  .growth-automation { left:2%; bottom:0; }
  .growth-campaign { right:2%; bottom:0; }
}
@media (max-width:900px) {
  .growth-product { height:610px; }
  .growth-dashboard-shell { top:10%; }
}
@media (max-width:620px) {
  .growth-product { height:440px; }
  .growth-dashboard-shell { left:0; right:0; width:100%; top:12%; }
  .growth-automation { left:0; bottom:1%; }
  .growth-campaign { right:0; bottom:0; min-height:87px; }
  .growth-whatsapp-pulse { right:-1%; top:45%; }
}

/* 100% laptop viewport fit (Retina screenshots commonly expose ~720–900 CSS
   pixels of height). Keep the dashboard large while compressing vertical UI. */
@media (min-width:901px) and (max-height:900px) {
  .hero.growth-hero { padding:68px 34px 22px; }
  .growth-hero-inner {
    grid-template-columns:minmax(480px,.76fr) minmax(650px,1.24fr);
    gap:28px;
    align-items:center;
  }
  .growth-copy { padding:0; }
  .growth-eyebrow { margin-bottom:16px; padding:7px 13px; font-size:10px; }
  .growth-copy h1 { max-width:590px; font-size:46px; line-height:1.08; letter-spacing:-.03em; }
  .growth-copy > p { max-width:600px; margin-top:17px; font-size:14px; line-height:1.55; }
  .growth-actions { gap:12px; margin-top:18px; }
  .growth-primary,.growth-tour { min-height:48px; padding:0 20px; border-radius:10px; font-size:12px; }
  .growth-trust { gap:8px; margin-top:18px; }
  .growth-trust span { grid-template-columns:30px 1fr; gap:7px; font-size:8.5px; }
  .growth-hero .growth-trust svg.la-site-icon { flex-basis:30px; width:30px!important; height:30px!important; padding:7px!important; }
  .growth-product { height:520px; }
  .growth-dashboard-shell { top:7%; }
  .growth-automation { left:0; bottom:0; scale:.76; transform-origin:bottom left; }
  .growth-campaign { right:0; bottom:0; scale:.76; transform-origin:bottom right; }
  .growth-whatsapp-pulse { right:-1%; top:44%; scale:.76; transform-origin:center; }
  .growth-proof-grid { gap:12px; margin-top:14px; }
}
/* Bujji Voice — real transparent mascot art (portrait crop, own hearts) */
.voice-mascot-scene > img:not(.is-fallback) { left:-6px; bottom:-14px; width:232px; height:278px; }
.wa-alert-stage > img:not(.is-fallback) { width:96px; height:112px; }
/* Bujji Voice — real mascot cut-out: width-driven, natural aspect */
.voice-mascot-scene > img:not(.is-fallback) { left:-4px; bottom:-16px; width:226px; height:auto; }
.wa-alert-stage > img:not(.is-fallback) { width:92px; height:auto; }
/* Bujji Voice — mascot cut-out final placement */
.voice-mascot-scene > img:not(.is-fallback) { left:-12px; bottom:-22px; width:214px; }

/* ==========================================================================
   SCROLL CHOREOGRAPHY
   Every card lifts, scales and sharpens as it scrolls into view. Real
   scroll-driven animation where the browser supports it (the motion tracks
   your scroll instead of firing once), with the IntersectionObserver
   transition as the fallback everywhere else.
   ========================================================================== */

section.pad { padding:clamp(48px,5.5vw,76px) 0; }
.sec-head { margin-bottom:clamp(48px,5.4vw,80px); }

/* ── fallback: class-toggled transition (also the pre-scroll resting state) ── */
.reveal {
  opacity:0; translate:0 30px; scale:.98;
  transition:opacity .6s cubic-bezier(.16,.72,.24,1),
             translate .6s cubic-bezier(.16,.72,.24,1),
             scale .6s cubic-bezier(.16,.72,.24,1);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal:not(.wm-tilt) { transform:none; }
.reveal.in { opacity:1; translate:0 0; scale:1; }
/* keep the hover tilt working on cards that are both .reveal and .wm-tilt */
.reveal.wm-tilt.in { transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); }

/* ── scroll-driven layer ───────────────────────────────────────────────── */
@keyframes wmRevealIn {
  0%   { opacity:0; translate:0 40px; scale:.97; }
  70%  { opacity:1; }
  100% { opacity:1; translate:0 0; scale:1; }
}
/* Big showpiece cards: a deeper lift, no blur (cheaper to composite). */
@keyframes wmRevealCard {
  0%   { opacity:0; translate:0 60px; scale:.96; }
  55%  { opacity:1; }
  100% { opacity:1; translate:0 0; scale:1; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      transition:none;
      animation-name:wmRevealIn;
      animation-duration:auto;          /* required: the shorthand would force 0s */
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry 0% entry 92%;
      will-change:opacity, translate, scale;
    }
    .reveal.in { filter:none; }

    .template-story.reveal,
    .mockup-suite-grid.reveal,
    .bujji-voice-card.reveal,
    .enterprise-agent-card.reveal,
    .feature-explorer.reveal,
    .knowledge-workspace.reveal,
    .desktop-story.reveal,
    .ai-workbench.reveal,
    .journey-wrap.reveal,
    .bujji-companion.reveal,
    .growth-product.reveal,
    .pairing-demo.reveal {
      animation-name:wmRevealCard;
      animation-range:entry 0px entry 540px;   /* fixed run so tall cards don't crawl */
      will-change:opacity, translate, scale;
    }

    /* Section headings lead their card in slightly ahead of it. */
    .sec-head.reveal,
    .brain-heading.reveal { animation-range:entry 0% entry 74%; }

    /* Small grid items settle quickly so a row doesn't feel sluggish. */
    .card.reveal,
    .price-card.reveal,
    .hiw-step.reveal,
    .testi-card.reveal,
    .growth-proof-grid.reveal { animation-range:entry 0% entry 66%; }

    /* Container grids & footer: gentler, slightly quicker. */
    .pricing-grid.reveal,
    .testi-grid.reveal,
    .footer-intro.reveal,
    .footer-grid.reveal { animation-range:entry 0% entry 78%; }
  }
}

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; translate:none; scale:none; filter:none; animation:none!important; }
}
/* Loosen the two sections that had been compacted hard against their neighbours. */
#templates.pad { padding:clamp(74px,8vw,124px) 0; }
@media (min-width:1221px) {
  section.pad.mockup-live-suite { padding:clamp(72px,8vw,112px) 0 clamp(84px,9vw,128px); }
}
@media (max-width:760px) {
  section.pad { padding:clamp(64px,12vw,88px) 0; }
}
/* `overflow:hidden` makes an element a scroll container, which hijacks the
   view() timelines of the cards inside it. `overflow:clip` clips identically
   without creating one, so every card measures against the real viewport. */
body { overflow-x:clip; }
/* Clip horizontally only. Clipping the block axis too was slicing the cards'
   soft drop shadows flat at the section edge, which is what read as a hard
   line between bands. `clip` on one axis + `visible` on the other is legal and
   still avoids creating a scroll container, so the view() timelines stay put. */
section#templates.pad,
section#messages.pad,
section#brain.pad,
section#desktop.pad,
.mockup-live-suite { overflow-x:clip; overflow-y:visible; }
/* This decorative blob sat at top:-180px and relied on the block-axis clip.
   The new mint band already supplies that tint, so it is no longer needed. */
#templates.pad::before { display:none; }

/* Card-to-card rhythm: sections that open straight into a card have no
   section heading to fill the gap, so the full section padding reads as dead
   space. Tighten only where a blank stretch meets another blank stretch. */
#templates.pad { padding-top:clamp(28px,3.2vw,48px); padding-bottom:clamp(36px,4vw,60px); }
#messages.pad  { padding-top:clamp(42px,4.6vw,74px); padding-bottom:clamp(84px,9vw,128px); }
#ai.pad        { padding-bottom:clamp(48px,5.2vw,84px); }
#desktop.pad   { padding-top:clamp(48px,5.2vw,84px); }
@media (min-width:1221px) {
  section.pad.mockup-live-suite { padding-top:clamp(42px,4.6vw,74px); padding-bottom:clamp(84px,9vw,128px); }
}

/* The Free Templates section started at exactly the body colour, so its card
   floated on nothing while every neighbouring section sits on its own tinted
   band. Give it the same layer: a mint band that reads clearly against the
   white trust bar above and the cream messages band below. */
#templates.pad {
  position:relative;
  /* No border and no tone step at either end: the band starts from the white
     trust bar and lands exactly on the messages band's own top colour, so the
     layer reads as depth rather than a seam. */
  background:
    radial-gradient(1150px 540px at 50% 44%, rgba(37,211,102,.10), transparent 70%),
    linear-gradient(180deg,
      #fdfefd 0%,
      #ebf7f0 18%,
      #e3f2e9 50%,
      #eff8f3 86%,
      #fbfcf9 100%);          /* lands exactly on the body colour */
}
#templates.pad::before { opacity:.45; }

/* The messages band was a 145deg gradient, so its top edge was a different
   colour at every x — nothing could hand off to it cleanly. Vertical, starting
   from the same body colour the section above ends on, and finishing on the
   colour the section below starts with. Both seams disappear. */
#messages.pad {
  background:linear-gradient(180deg,
    #fbfcf9 0%,
    #fefaf2 20%,
    #fffaf1 55%,
    #fbfbf6 82%,
    #f8faf8 100%);
}

/* ==========================================================================
   Broadcast Marketing phone → same iPhone 17 Pro frame as the Create
   Interactive card: titanium rim, Dynamic Island, drawn iOS status glyphs.
   ========================================================================== */
.broadcast-phone {
  border:5px solid #171918;
  border-radius:36px 36px 0 0;
  background:#090b0a;
  box-shadow:0 0 0 1px #585d59,inset 0 0 0 1px rgba(255,255,255,.18),0 22px 50px rgba(23,52,43,.26);
}
.broadcast-phone-top { flex:0 0 26px; height:26px; align-items:flex-end; padding:0 13px 4px; }
.broadcast-phone-top > span { font-size:7px; font-weight:650; letter-spacing:.2px; }

/* Dynamic Island (replaces the old notch cut into the top edge) */
.broadcast-phone-top > i.broadcast-island {
  position:absolute; left:50%; top:4px;
  width:56px; height:14px; border-radius:999px;
  background:#050505; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  transform:translateX(-50%);
}
.broadcast-phone-top > i.broadcast-island::after {
  content:""; position:absolute; right:5px; top:50%; width:5px; height:5px;
  border-radius:50%; background:#12181d; box-shadow:inset 0 0 0 .5px rgba(120,170,200,.35);
  transform:translateY(-50%);
}

/* drawn iOS status glyphs, matched to this phone's scale */
.broadcast-phone-icons { display:flex; align-items:center; gap:3px; height:9px; font-size:0; }
.broadcast-phone-icons u { position:relative; display:block; flex:none; text-decoration:none; }
.broadcast-phone-icons .ios-cellular {
  width:10px; height:7.5px; background:#111;
  clip-path:polygon(0 100%,0 72%,18% 72%,18% 55%,38% 55%,38% 37%,59% 37%,59% 18%,80% 18%,80% 0,100% 0,100% 100%);
}
.broadcast-phone-icons .ios-wifi {
  width:10px; height:7.5px; border:1.6px solid #111;
  border-color:#111 transparent transparent; border-radius:50%; transform:translateY(2.5px);
}
.broadcast-phone-icons .ios-wifi::after { content:""; position:absolute; left:2.5px; top:1px; width:2.5px; height:2.5px; border-radius:50%; background:#111; }
.broadcast-phone-icons .ios-battery { width:14px; height:7px; border:1px solid #111; border-radius:2px; }
.broadcast-phone-icons .ios-battery::before { content:""; position:absolute; inset:1px 2px 1px 1px; border-radius:1px; background:#111; }
.broadcast-phone-icons .ios-battery::after { content:""; position:absolute; right:-2.5px; top:1.8px; width:1.8px; height:3.4px; border-radius:0 2px 2px 0; background:#111; }

@media (min-width:1221px) {
  .broadcast-phone { border-radius:44px; }
  .broadcast-phone-top { flex:0 0 30px; height:30px; padding:0 16px 5px; }
  .broadcast-phone-top > span { font-size:8.5px; }
  .broadcast-phone-top > i.broadcast-island { top:5px; width:68px; height:17px; }
  .broadcast-phone-icons { gap:3.5px; height:11px; }
  .broadcast-phone-icons .ios-cellular,
  .broadcast-phone-icons .ios-wifi { width:12px; height:9px; }
  .broadcast-phone-icons .ios-wifi { border-width:2px; }
  .broadcast-phone-icons .ios-wifi::after { left:3px; width:3px; height:3px; }
  .broadcast-phone-icons .ios-battery { width:17px; height:8px; }
  .broadcast-phone-icons .ios-battery::after { right:-3px; top:2px; width:2px; height:4px; }
}

/* Main hero — product-specific proof and compact, non-obscuring live widgets. */
.growth-copy > p { max-width:680px; color:#536278; font-weight:500; }
.growth-trust span { align-items:center; }

.growth-automation,
.growth-campaign {
  min-height:0;
  overflow:hidden;
  border-color:rgba(180,219,202,.9);
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(238,252,245,.94));
  box-shadow:0 14px 34px rgba(30,91,69,.14);
  backdrop-filter:blur(18px);
}
.growth-automation {
  left:1%; bottom:2%; width:205px;
  grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px;
  padding:10px 12px; border-radius:15px;
}
.growth-automation > svg { width:38px; height:38px; padding:9px; border-radius:12px; }
.growth-automation span { min-width:0; }
.growth-automation span small,
.growth-automation span strong,
.growth-automation span b { display:block; margin:0; width:auto; padding:0; background:none; }
.growth-automation span small { color:#718076; font-size:8px; font-weight:750; letter-spacing:.025em; text-transform:none; }
.growth-automation span strong { margin-top:2px; color:#143b2d; font-size:13px; line-height:1.1; }
.growth-automation span b { margin-top:4px; overflow:hidden; color:#0b9a61; font-size:8px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }

.growth-campaign {
  right:1%; bottom:2%; width:220px;
  grid-template-columns:46px minmax(0,1fr); align-items:center; gap:10px;
  padding:9px 12px; border-radius:15px;
}
.growth-ring { width:46px; height:46px; background:conic-gradient(#12a96a 0 92%,#e2f4eb 92%); }
.growth-ring::before { inset:5px; }
.growth-ring b { font-size:11px; }
.growth-ring small { font-size:6px; }
.growth-campaign > span:last-child { min-width:0; }
.growth-campaign > span:last-child > small,
.growth-campaign > span:last-child > strong,
.growth-campaign > span:last-child > b { display:block; margin:0; }
.growth-campaign > span:last-child > small { color:#718076; font-size:8px; font-weight:750; letter-spacing:.025em; text-transform:none; }
.growth-campaign > span:last-child > strong { margin-top:2px; color:#143b2d; font-size:12px; line-height:1.12; }
.growth-campaign > span:last-child > b { margin-top:4px; overflow:hidden; color:#0a9a60; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }

/* Five plain-language benefit cards — modern spacious vertical card design */
.growth-proof-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(16px, 1.8vw, 24px);
  margin-bottom: 0;
}
.growth-proof-grid button {
  --proof-accent: #10a565;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 164px;
  padding: 20px 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  text-align: left;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  position: relative;
  overflow: hidden;
}
.growth-proof-grid button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--proof-accent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.growth-proof-grid button:hover::before,
.growth-proof-grid button.is-active::before {
  opacity: 1;
}
.growth-proof-grid button:hover,
.growth-proof-grid button.is-active {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--proof-accent) 40%, #cbd5e1);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
  background: #ffffff;
}

.growth-proof-grid button:nth-child(1) { --proof-accent: #10a565; }
.growth-proof-grid button:nth-child(2) { --proof-accent: #7c3aed; }
.growth-proof-grid button:nth-child(3) { --proof-accent: #2563eb; }
.growth-proof-grid button:nth-child(4) { --proof-accent: #ea580c; }
.growth-proof-grid button:nth-child(5) { --proof-accent: #e11d48; }

.proof-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 14px;
}

.growth-proof-grid button svg.la-site-icon,
.growth-proof-grid button i.la-site-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 8px !important;
  border: 1px solid color-mix(in srgb, var(--proof-accent) 22%, #fff);
  border-radius: 11px;
  color: var(--proof-accent) !important;
  background: color-mix(in srgb, var(--proof-accent) 10%, #fff) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--proof-accent) 12%, transparent);
  flex-shrink: 0;
}

.growth-proof-grid .proof-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--proof-accent);
  background: color-mix(in srgb, var(--proof-accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--proof-accent) 24%, transparent);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.growth-proof-grid b {
  display: block;
  width: 100%;
  color: #0f172a;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.growth-proof-grid small {
  display: block;
  width: 100%;
  margin-top: 6px;
  color: #64748b;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.48;
}

@media (min-width: 901px) and (max-height: 900px) {
  .growth-proof-grid { gap: 12px; }
  .growth-proof-grid button { min-height: 145px; padding: 15px 14px; border-radius: 16px; }
  .growth-proof-grid .proof-card-head { margin-bottom: 10px; }
  .growth-proof-grid button svg.la-site-icon,
  .growth-proof-grid button i.la-site-icon { width: 34px !important; height: 34px !important; padding: 7px !important; }
  .growth-proof-grid .proof-badge { padding: 2px 7px; font-size: 10.5px; }
  .growth-proof-grid b { font-size: 13.5px; line-height: 1.25; }
  .growth-proof-grid small { margin-top: 5px; font-size: 11.5px; line-height: 1.38; }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .growth-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 767px) and (min-width: 500px) {
  .growth-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 499px) {
  .growth-proof-grid { grid-template-columns: 1fr; gap: 10px; }
  .growth-proof-grid button { min-height: auto; padding: 16px; }
}

/* ==========================================================================
   CARD: Bujji Pet Mode  (#bujjiPetMode)
   Built from the supplied mockup on a fixed 1536x926 widescreen canvas that
   scales as one piece, so the composition never reflows away from the design.
   ========================================================================== */
.bujji-pet-card {
  position:relative; grid-column:1/-1; container-type:inline-size;
  min-width:0; overflow:hidden;
  border:1px solid #e2eae5; border-radius:26px;
  color:#0f1b2d;
  background:radial-gradient(760px 460px at 12% 6%,rgba(140,190,255,.10),transparent 62%),
             radial-gradient(700px 460px at 92% 12%,rgba(37,211,102,.09),transparent 60%),
             linear-gradient(160deg,#fdfefd 0%,#f7fbf9 52%,#fbfcff 100%);
  box-shadow:0 24px 70px rgba(24,67,44,.09);
}
.pet-canvas {
  --ps:1;
  position:relative; width:1536px; height:926px;
  transform:scale(var(--ps)); transform-origin:top left;
  margin-bottom:calc((var(--ps) - 1) * 926px);
  margin-right:calc((var(--ps) - 1) * 1536px);   /* layout box matches the scaled width */
}
#bujjiPetMode svg.la-site-icon { flex:none; display:block; box-sizing:border-box; stroke-width:2; }

/* shared panel chrome */
.pet-panel { position:absolute; border:1px solid #e8eef1; border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(24,58,44,.05); }
.pet-panel h4 { color:#101d2f; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.pet-chip { padding:4px 9px; border-radius:999px; color:#5b6a80; background:#f1f4f8; font-size:10.5px; font-weight:800; }

/* ── toolbar ───────────────────────────────────────────────────────────── */
.pet-toolbar { position:absolute; right:24px; top:14px; display:flex; align-items:center; gap:12px; }
.pet-toolbar button { position:relative; display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:9px; color:#4a5768; background:transparent; cursor:pointer; transition:.2s ease; }
.pet-toolbar button:hover { color:#0b8f46; background:#eefaf2; }
.pet-toolbar button > svg.la-site-icon { width:17px; height:17px; }
.pet-toolbar .has-dot u { position:absolute; right:3px; top:3px; width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px #fff; }
.pet-avatar { width:28px; height:28px; border-radius:9px; background:linear-gradient(150deg,#4a5a72,#26374d); box-shadow:inset 0 -6px 10px rgba(0,0,0,.22); }

/* ── emotional expressions ─────────────────────────────────────────────── */
.pet-moods { left:32px; top:46px; width:166px; padding:16px 12px; }
.pet-moods h4 { margin-bottom:14px; font-size:13.5px; text-align:center; }
.pet-mood-list { display:grid; gap:9px; }
.pet-mood-list button {
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px;
  padding:8px; border:1.5px solid #eef1f4; border-radius:13px;
  background:#fff; cursor:pointer; transition:.28s var(--ease-spring);
}
.pet-mood-list button:hover { transform:translateY(-2px); border-color:#bfe7cf; box-shadow:0 8px 18px rgba(20,110,60,.1); }
.pet-mood-list button.active { border-color:#22bd63; box-shadow:0 8px 18px rgba(20,110,60,.12); }
.pet-mood-list img { width:34px; height:34px; object-fit:contain; }
.pet-mood-list b { font-size:12.5px; font-weight:800; text-align:left; }
.pet-mood-list em { font-size:14px; font-style:normal; }
.pet-mood-list button.active img { animation:petMoodPop .55s var(--ease-spring); }

/* ── mascot stage ──────────────────────────────────────────────────────── */
.pet-stage { position:absolute; z-index:8; left:196px; top:34px; width:250px; height:430px; pointer-events:none; }
.pet-glow { position:absolute; left:50%; top:44%; width:250px; height:250px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(74,226,129,.30),rgba(190,250,212,.16) 55%,transparent 74%); animation:petGlow 5s ease-in-out infinite; }
.pet-character { position:absolute; left:50%; bottom:0; z-index:2; width:285px; transform:translateX(-50%); filter:drop-shadow(0 22px 24px rgba(24,71,44,.18)); animation:petFloat 4.6s ease-in-out infinite; transform-origin:center bottom; }
.pet-mascot { display:block; width:100%; height:auto; }
#bujjiPetMode.mood-changed .pet-mascot { animation:petFaceReact .55s var(--ease-spring); }

/* ── weather + clock HUD ───────────────────────────────────────────────── */
.pet-hud { left:414px; top:16px; z-index:2; width:422px; padding:16px 18px 18px; }
.pet-hud > header { display:flex; align-items:center; gap:10px; }
.pet-hud-now { display:flex; align-items:center; gap:8px; margin-top:14px; }
.pet-hud-now > svg.la-site-icon { width:16px; height:16px; color:#0da64a; }
.pet-hud-now b { font-size:16px; font-weight:800; letter-spacing:-.02em; }
.pet-dash { color:#93a1b5; }
.pet-hud-now strong { font-size:19px; font-weight:850; letter-spacing:-.03em; }
.pet-hud-now time { margin-left:auto; font-size:19px; font-weight:850; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pet-hud-date { margin-top:8px; color:#7b8899; font-size:12px; }
.pet-weather { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px; }
.pet-weather button { padding:12px 8px 11px; border:1.5px solid #eef1f4; border-radius:13px; background:#fff; text-align:center; cursor:pointer; transition:.28s var(--ease-spring); }
.pet-weather button:hover { transform:translateY(-3px); border-color:#cfe6d9; box-shadow:0 10px 20px rgba(20,110,60,.09); }
.pet-weather button.active { border-color:#22bd63; background:#f4fdf7; box-shadow:0 10px 20px rgba(20,110,60,.12); }
.pet-weather b { display:block; color:#2b3a4d; font-size:12.5px; font-weight:800; }
.pet-weather em { display:block; margin:8px 0 6px; font-size:26px; font-style:normal; line-height:1; }
.pet-weather button.active em { animation:petWeatherPop .6s var(--ease-spring); }
.pet-weather strong { display:block; font-size:15px; font-weight:850; letter-spacing:-.02em; }
.pet-weather small { display:block; margin-top:3px; color:#7b8899; font-size:11px; }

/* ── cursor tracker ────────────────────────────────────────────────────── */
.pet-tracker { position:absolute; left:412px; top:340px; width:344px; height:110px; }

/* useful replacement for the decorative cursor-tracker note */
.pet-quick-reply {
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center;
  gap:11px; height:auto; min-height:82px; padding:12px 13px;
  border:1px solid #dceee3; border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 28px rgba(24,78,48,.10);
  pointer-events:auto;
}
.pet-quick-avatar {
  width:44px; height:44px; border:2px solid #fff; border-radius:50%;
  background:url("assets/seo/customer-avatars.webp") 0 0/200% 200% no-repeat;
  box-shadow:0 4px 12px rgba(24,58,44,.18);
}
.pet-quick-copy { min-width:0; }
.pet-quick-copy b { display:block; color:#112135; font-size:12.5px; font-weight:850; }
.pet-quick-copy small { display:block; overflow:hidden; margin-top:4px; color:#6b788b; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; }
.pet-quick-reply button {
  display:inline-flex; align-items:center; gap:5px; padding:8px 10px;
  border:0; border-radius:10px; color:#fff; background:#12ad51;
  box-shadow:0 7px 16px rgba(18,173,81,.22);
  font:800 10.5px var(--font); cursor:pointer; transition:.25s var(--ease-spring);
}
.pet-quick-reply button:hover { transform:translateY(-2px); background:#0b9143; box-shadow:0 10px 20px rgba(18,173,81,.28); }
.pet-quick-reply button.is-sent { color:#08733a; background:#e9f9ef; box-shadow:none; }

/* ── stat tiles (matching .pet-weather button structure, typography & spacing) ── */
.pet-stats { position:absolute; left:414px; top:284px; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; width:422px; }
.pet-stat { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; width:100%; box-sizing:border-box; padding:8px 6px 8px; border:1.5px solid #eef1f4; border-radius:12px; background:#fff; transition:.28s var(--ease-spring); }
.pet-stat:hover { transform:translateY(-2px); border-color:#cfe6d9; box-shadow:0 8px 16px rgba(20,110,60,.08); }
.pet-stat b { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; color:#2b3a4d; font-size:10px; font-weight:800; line-height:1.15; min-height:22px; }
.pet-stat > svg.la-site-icon { width:24px; height:24px; padding:4.5px; border-radius:7px; box-sizing:border-box; margin:3px auto 3px; }
.pet-stat.stat-green > svg.la-site-icon { color:#0da64a; background:#e8f8ee; }
.pet-stat.stat-violet > svg.la-site-icon { color:#7c4ce4; background:#f2edfc; }
.pet-stat.stat-amber > svg.la-site-icon { color:#e87a0c; background:#fef4e8; }
.pet-stat.stat-rose > svg.la-site-icon { color:#e63946; background:#fdeeee; }
.pet-stat strong { display:block; font-size:14px; font-weight:850; color:#101d2f; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.pet-stat small { display:block; margin-top:1.5px; color:#7b8899; font-size:9.5px; font-weight:500; }

/* ── intro video ───────────────────────────────────────────────────────── */
.pet-video { left:840px; top:12px; width:676px; height:718px; padding:0; overflow:hidden; border-radius:18px; }
.pet-video-area { display:grid; place-items:center; align-content:center; gap:6px; width:100%; height:100%; margin-top:0; border-radius:18px; background:linear-gradient(170deg,#f4f7f9,#eef3f6); }
.pet-play { display:grid; place-items:center; width:78px; height:78px; margin-bottom:14px; border:0; border-radius:50%; color:#12ad51; background:#fff; box-shadow:0 14px 30px rgba(24,58,44,.14); cursor:pointer; transition:.3s var(--ease-spring); animation:petPlayPulse 2.6s ease-in-out infinite; }
.pet-play:hover { transform:scale(1.08); color:#fff; background:#12ad51; }
.pet-play > svg.la-site-icon { width:26px; height:26px; margin-left:3px; fill:currentColor; }
.pet-video-area b { color:#2b3a4d; font-size:15px; font-weight:800; }
.pet-video-area small { color:#8b98a9; font-size:12px; }
.pet-video > footer { display:flex; align-items:center; gap:10px; margin-top:14px; }
.pet-video > footer span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #eef1f4; border-radius:9px; color:#5b6a80; font-size:11px; font-weight:700; }
.pet-video > footer span > svg.la-site-icon { width:13px; height:13px; }
.pet-video > footer small { color:#8b98a9; font-size:11px; }
.pet-ratio { margin-left:auto; }

/* ── whatsapp & business intelligence ──────────────────────────────────── */
.pet-biz { left:32px; top:462px; width:804px; padding:16px 18px 18px; }
.pet-biz-grid { display:grid; grid-template-columns:1.02fr 1.06fr 1.55fr .95fr; gap:14px; margin-top:16px; }
.pet-biz-card { position:relative; padding:14px; border:1px solid #eef1f4; border-radius:15px; background:#fff; }
.pet-biz-card > header { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.pet-biz-card > header > svg.la-site-icon { width:26px; height:26px; padding:6px; border-radius:9px; color:#fff; background:#12ad51; }
.pet-biz-card > header b { font-size:12.5px; font-weight:800; }
.pet-biz-card p { color:#42506a; font-size:12px; line-height:1.55; }
.pet-biz-lead { color:#101d2f!important; font-weight:800; }
.pet-wiggle { display:inline-block; animation:petWiggle 1.8s ease-in-out infinite; }
.pet-biz-card small { display:block; margin-top:6px; color:#8b98a9; font-size:11px; }
.pet-big-green { display:block; color:#12ad51; font-size:28px; font-weight:850; letter-spacing:-.04em; }
.pet-avatars { display:flex; align-items:center; gap:-6px; margin-top:10px; }
.pet-avatars u { width:24px; height:24px; margin-right:-7px; border:2px solid #fff; border-radius:50%; background:linear-gradient(150deg,#7e8ea6,#3d4c63); }
.pet-avatars u:nth-child(2) { background:linear-gradient(150deg,#e0a58a,#b06f4d); }
.pet-avatars u:nth-child(3) { background:linear-gradient(150deg,#8fb0d8,#4a6f9c); }
.pet-avatars u:nth-child(4) { background:linear-gradient(150deg,#9ecfae,#4f8f6a); }
.pet-avatars i { display:grid; place-items:center; width:24px; height:24px; margin-right:8px; border:2px solid #fff; border-radius:50%; color:#5b6a80; background:#eef1f4; font-size:12px; font-style:normal; }
.pet-avatars em { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#0b8f46; background:#e9f9ef; font-size:12px; font-style:normal; }
.pet-btn-green, .pet-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:12px; padding:9px 12px; border-radius:10px; font:800 12px var(--font); cursor:pointer; transition:.26s var(--ease-spring); }
.pet-btn-green { border:0; color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d); box-shadow:0 8px 18px rgba(18,160,77,.24); }
.pet-btn-green:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(18,160,77,.3); }
.pet-btn-ghost { border:1px solid #d6eade; color:#0b8f46; background:#fff; }
.pet-btn-ghost:hover { background:#f3fdf7; transform:translateY(-2px); }
.pet-btn-ghost > svg.la-site-icon { width:13px; height:13px; }

.pet-celebrate { border-color:#bde9cd; background:linear-gradient(160deg,#f5fffa,#eefaf3); overflow:hidden; }
.pet-confetti { position:absolute; inset:0; pointer-events:none; }
.pet-confetti i { position:absolute; color:#26c06a; font-size:12px; font-style:normal; opacity:.85; animation:petConfetti 3.4s ease-in-out infinite; }
.pet-confetti i:nth-child(1) { left:8%;  top:16%; color:#f2870f; animation-delay:0s; }
.pet-confetti i:nth-child(2) { left:78%; top:10%; color:#3f8ef0; animation-delay:.4s; }
.pet-confetti i:nth-child(3) { left:90%; top:44%; color:#ef5350; animation-delay:.8s; }
.pet-confetti i:nth-child(4) { left:20%; top:78%; color:#7c4ce4; animation-delay:1.2s; }
.pet-confetti i:nth-child(5) { left:60%; top:86%; color:#22bd63; animation-delay:1.6s; }
.pet-confetti i:nth-child(6) { left:44%; top:6%;  color:#f2c00f; animation-delay:2s; }
.pet-celebrate-title { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; color:#0b8f46; font-size:14px; font-weight:850; }
.pet-celebrate > p { position:relative; margin-top:6px; text-align:center; }
.pet-lead { position:relative; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:2px 12px; margin-top:12px; padding:11px; border:1px solid #e6f1ea; border-radius:12px; background:#fff; }
.pet-lead-avatar { grid-row:1/4; width:44px; height:44px; border-radius:50%; background:linear-gradient(150deg,#e0a58a,#a8653f); box-shadow:inset 0 -8px 12px rgba(70,35,15,.25); }
.pet-lead b { font-size:13px; font-weight:850; }
.pet-lead small { color:#42506a; font-size:11.5px; }
.pet-lead em { color:#8b98a9; font-size:11px; font-style:normal; }

.pet-biz-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.pet-biz-chips button { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:11px; padding:11px 13px; border:1px solid #eef1f4; border-radius:14px; background:#fff; text-align:left; cursor:pointer; transition:.26s var(--ease-spring); }
.pet-biz-chips button:hover { transform:translateY(-3px); border-color:#cfe6d9; box-shadow:0 10px 22px rgba(20,110,60,.1); }
.pet-biz-chips svg.la-site-icon { width:34px; height:34px; padding:8px; border-radius:11px; color:#3f8ef0; background:#eaf2fe; }
.pet-biz-chips button:nth-child(2) svg.la-site-icon { color:#f2870f; background:#fef2e3; }
.pet-biz-chips button:nth-child(3) svg.la-site-icon { color:#3f8ef0; background:#eaf2fe; }
.pet-biz-chips button:nth-child(4) svg.la-site-icon { color:#f2c00f; background:#fdf6e0; }
.pet-biz-chips b { display:block; font-size:12.5px; font-weight:800; }
.pet-biz-chips small { display:block; margin-top:2px; color:#8b98a9; font-size:11px; }
.pet-biz-chips u { color:#a7b3c2; font-size:15px; text-decoration:none; transition:transform .2s ease; }
.pet-biz-chips button:hover u { transform:translateX(3px); }

/* ── bottom row ────────────────────────────────────────────────────────── */
.pet-pomo { left:32px; top:736px; width:280px; padding:12px; text-align:center; }
.pet-ring { position:relative; display:grid; place-items:center; align-content:center; width:150px; height:150px; margin:10px auto 4px; }
.pet-ring svg { position:absolute; inset:0; width:150px; height:150px; transform:rotate(-90deg); }
.pet-ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.pet-ring .ring-track { stroke:#eef3f0; }
.pet-ring .ring-fill { stroke:#22bd63; stroke-dasharray:264; stroke-dashoffset:0; transition:stroke-dashoffset .9s linear; }
.pet-ring strong { font-size:30px; font-weight:850; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.pet-ring small { color:#7b8899; font-size:12px; }
.pet-pomo-actions { display:flex; align-items:center; gap:9px; margin-top:12px; }
.pet-pomo-actions .pet-btn-green, .pet-pomo-actions .pet-btn-ghost { margin-top:0; }
.pet-icon-btn { display:grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid #e6eef0; border-radius:11px; color:#5b6a80; background:#fff; cursor:pointer; transition:.24s ease; }
.pet-icon-btn:hover { color:#0b8f46; border-color:#a9e2c0; background:#f3fdf7; transform:rotate(45deg); }
.pet-icon-btn > svg.la-site-icon { width:17px; height:17px; }

.pet-wellness { left:330px; top:736px; width:280px; padding:12px; }
.pet-well-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:11px; margin-top:14px; padding:11px; border-radius:13px; background:#f6faf8; }
.pet-well-row > svg.la-site-icon { width:34px; height:34px; padding:8px; border-radius:11px; color:#12ad51; background:#e9f9ef; }
.pet-well-row.blue > svg.la-site-icon { color:#3f8ef0; background:#eaf2fe; }
.pet-well-row b { display:block; font-size:12.5px; font-weight:800; }
.pet-well-row small { display:block; margin-top:3px; color:#8b98a9; font-size:11px; line-height:1.4; }
.pet-well-row em { color:#8b98a9; font-size:11px; font-style:normal; }

.pet-notes { left:628px; top:736px; width:280px; padding:12px; }
.pet-notes > header, .pet-planner > header, .pet-video > header, .pet-hud > header { display:flex; align-items:center; gap:10px; }
.pet-mini-btn { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:6px 10px; border:1px solid #e6eef0; border-radius:9px; color:#0b8f46; background:#fff; font:800 11px var(--font); cursor:pointer; transition:.24s var(--ease-spring); }
.pet-mini-btn:hover { border-color:#a9e2c0; background:#f3fdf7; transform:translateY(-2px); }
.pet-mini-btn > svg.la-site-icon { width:12px; height:12px; }
.pet-note-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.pet-note { padding:13px; border-radius:13px; animation:petNoteIn .5s var(--ease-spring); }
.pet-note.note-yellow { background:#fdf6dd; }
.pet-note.note-green { background:#e6f8ec; }
.pet-note p { color:#3a4761; font-size:11.5px; line-height:1.5; }
.pet-note small { display:block; margin-top:14px; color:#98a3ad; font-size:10px; }

.pet-planner { left:926px; top:736px; width:280px; padding:12px; }
.pet-task-list { display:grid; gap:4px; margin-top:12px; }
.pet-task { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:11px; padding:7px 4px; cursor:pointer; }
.pet-task input { position:absolute; opacity:0; pointer-events:none; }
.pet-task i { width:20px; height:20px; border:1.6px solid #cfd8e0; border-radius:6px; background:#fff; transition:.22s var(--ease-spring); }
.pet-task input:checked + i { border-color:#12ad51; background:#12ad51 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; }
.pet-task b { font-size:12.5px; font-weight:650; }
.pet-task input:checked ~ b { color:#101d2f; }
.pet-task time { color:#8b98a9; font-size:11.5px; }
.pet-task-count { margin-top:14px; color:#5b6a80; font-size:11.5px; }
.pet-task-count b { color:#101d2f; font-weight:850; }
.pet-task-bar { display:block; height:8px; margin-top:8px; border-radius:99px; background:#eef3f0; overflow:hidden; }
.pet-task-bar u { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#22bd63,#12a04d); transition:width .5s var(--ease-spring); }

.pet-privacy { left:1224px; top:736px; width:280px; padding:12px; }
.pet-privacy-body { display:grid; grid-template-columns:104px 1fr; align-items:center; gap:14px; margin-top:14px; }
.pet-chipart { position:relative; display:grid; place-items:center; width:104px; height:104px; border-radius:22px; background:linear-gradient(150deg,#1f8f52,#0f5c34); box-shadow:0 12px 26px rgba(15,92,52,.28); }
.pet-chipart::before, .pet-chipart::after { content:""; position:absolute; inset:-1px -12px; background:
  repeating-linear-gradient(180deg,transparent 0 12px,#cfd8e0 12px 16px); border-radius:3px; z-index:-1; }
.pet-chipart::after { inset:-12px -1px; background:repeating-linear-gradient(90deg,transparent 0 12px,#cfd8e0 12px 16px); }
.pet-chipart > svg.la-site-icon { width:44px; height:44px; color:#9dfcc4; animation:petChipPulse 2.4s ease-in-out infinite; }
.pet-privacy ul { list-style:none; display:grid; gap:8px; }
.pet-privacy li { position:relative; padding-left:18px; color:#42506a; font-size:11.5px; }
.pet-privacy li::before { content:""; position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%; background:#22bd63; box-shadow:0 0 0 3px rgba(34,189,99,.14); }
.pet-privacy-foot { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:11px; border-radius:12px; color:#0b8f46; background:#eefaf2; font-size:13px; font-weight:850; }
.pet-privacy-foot > svg.la-site-icon { width:15px; height:15px; }

/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes petFloat { 50% { transform:translateX(-50%) translateY(-12px) rotate(-1.5deg); } }
@keyframes petGlow { 50% { transform:translate(-50%,-50%) scale(1.12); opacity:.8; } }
@keyframes petFaceReact { 0% { transform:scale(.78); opacity:.35; } 58% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@keyframes petMoodPop { 0% { transform:scale(.6) rotate(-12deg); } 60% { transform:scale(1.15) rotate(4deg); } 100% { transform:scale(1); } }
@keyframes petWeatherPop { 0% { transform:scale(.5) rotate(-20deg); } 60% { transform:scale(1.2) rotate(8deg); } 100% { transform:scale(1); } }
@keyframes petDash { to { stroke-dashoffset:-24; } }
@keyframes petPlayPulse { 0%,100% { box-shadow:0 14px 30px rgba(24,58,44,.14),0 0 0 0 rgba(34,189,99,.30); } 70% { box-shadow:0 14px 30px rgba(24,58,44,.14),0 0 0 18px rgba(34,189,99,0); } }
@keyframes petWiggle { 0%,100% { transform:translateX(0) rotate(0); } 50% { transform:translateX(3px) rotate(-12deg); } }
@keyframes petConfetti { 0% { opacity:0; transform:translateY(6px) scale(.6) rotate(0); } 25% { opacity:.95; } 100% { opacity:0; transform:translateY(-18px) scale(1.15) rotate(140deg); } }
@keyframes petNoteIn { 0% { opacity:0; transform:translateY(10px) scale(.96); } 100% { opacity:1; transform:none; } }
@keyframes petChipPulse { 50% { transform:scale(1.12); filter:drop-shadow(0 0 8px rgba(157,252,196,.7)); } }

/* moods retint the stage */
#bujjiPetMode[data-mood="sleepy"] .pet-glow { background:radial-gradient(circle,rgba(124,140,230,.28),rgba(210,216,255,.16) 55%,transparent 74%); }
#bujjiPetMode[data-mood="sleepy"] .pet-character { animation-duration:7s; }
#bujjiPetMode[data-mood="thinking"] .pet-glow { background:radial-gradient(circle,rgba(236,120,200,.24),rgba(255,214,242,.16) 55%,transparent 74%); }
#bujjiPetMode[data-mood="excited"] .pet-glow { background:radial-gradient(circle,rgba(250,190,60,.28),rgba(255,236,190,.18) 55%,transparent 74%); }
#bujjiPetMode[data-mood="excited"] .pet-character { animation-duration:2.4s; }

@media (prefers-reduced-motion:reduce) {
  #bujjiPetMode *,#bujjiPetMode *::before,#bujjiPetMode *::after { animation:none!important; }
}

/* Bujji Pet Mode — canvas scale ladder */
@container (max-width:1536px) { .pet-canvas { --ps:1.0; } }
@container (max-width:1520px) { .pet-canvas { --ps:0.9896; } }
@container (max-width:1504px) { .pet-canvas { --ps:0.9792; } }
@container (max-width:1488px) { .pet-canvas { --ps:0.9688; } }
@container (max-width:1472px) { .pet-canvas { --ps:0.9583; } }
@container (max-width:1456px) { .pet-canvas { --ps:0.9479; } }
@container (max-width:1440px) { .pet-canvas { --ps:0.9375; } }
@container (max-width:1424px) { .pet-canvas { --ps:0.9271; } }
@container (max-width:1408px) { .pet-canvas { --ps:0.9167; } }
@container (max-width:1392px) { .pet-canvas { --ps:0.9062; } }
@container (max-width:1376px) { .pet-canvas { --ps:0.8958; } }
@container (max-width:1360px) { .pet-canvas { --ps:0.8854; } }
@container (max-width:1344px) { .pet-canvas { --ps:0.875; } }
@container (max-width:1328px) { .pet-canvas { --ps:0.8646; } }
@container (max-width:1312px) { .pet-canvas { --ps:0.8542; } }
@container (max-width:1296px) { .pet-canvas { --ps:0.8438; } }
@container (max-width:1280px) { .pet-canvas { --ps:0.8333; } }
@container (max-width:1264px) { .pet-canvas { --ps:0.8229; } }
@container (max-width:1248px) { .pet-canvas { --ps:0.8125; } }
@container (max-width:1232px) { .pet-canvas { --ps:0.8021; } }
@container (max-width:1216px) { .pet-canvas { --ps:0.7917; } }
@container (max-width:1200px) { .pet-canvas { --ps:0.7812; } }
@container (max-width:1184px) { .pet-canvas { --ps:0.7708; } }
@container (max-width:1168px) { .pet-canvas { --ps:0.7604; } }
@container (max-width:1152px) { .pet-canvas { --ps:0.75; } }
@container (max-width:1136px) { .pet-canvas { --ps:0.7396; } }
@container (max-width:1120px) { .pet-canvas { --ps:0.7292; } }
@container (max-width:1104px) { .pet-canvas { --ps:0.7188; } }
@container (max-width:1088px) { .pet-canvas { --ps:0.7083; } }
@container (max-width:1072px) { .pet-canvas { --ps:0.6979; } }
@container (max-width:1056px) { .pet-canvas { --ps:0.6875; } }
@container (max-width:1040px) { .pet-canvas { --ps:0.6771; } }
@container (max-width:1024px) { .pet-canvas { --ps:0.6667; } }
@container (max-width:1008px) { .pet-canvas { --ps:0.6562; } }
@container (max-width:992px) { .pet-canvas { --ps:0.6458; } }
@container (max-width:976px) { .pet-canvas { --ps:0.6354; } }
@container (max-width:960px) { .pet-canvas { --ps:0.625; } }
@container (max-width:944px) { .pet-canvas { --ps:0.6146; } }
@container (max-width:928px) { .pet-canvas { --ps:0.6042; } }
@container (max-width:912px) { .pet-canvas { --ps:0.5938; } }
@container (max-width:896px) { .pet-canvas { --ps:0.5833; } }
@container (max-width:880px) { .pet-canvas { --ps:0.5729; } }
@container (max-width:864px) { .pet-canvas { --ps:0.5625; } }
@container (max-width:848px) { .pet-canvas { --ps:0.5521; } }
@container (max-width:832px) { .pet-canvas { --ps:0.5417; } }
@container (max-width:816px) { .pet-canvas { --ps:0.5312; } }
@container (max-width:800px) { .pet-canvas { --ps:0.5208; } }
@container (max-width:784px) { .pet-canvas { --ps:0.5104; } }
@container (max-width:768px) { .pet-canvas { --ps:0.5; } }
@container (max-width:752px) { .pet-canvas { --ps:0.4896; } }
@container (max-width:736px) { .pet-canvas { --ps:0.4792; } }
@container (max-width:720px) { .pet-canvas { --ps:0.4688; } }
@container (max-width:704px) { .pet-canvas { --ps:0.4583; } }
@container (max-width:688px) { .pet-canvas { --ps:0.4479; } }
@container (max-width:672px) { .pet-canvas { --ps:0.4375; } }
@container (max-width:656px) { .pet-canvas { --ps:0.4271; } }
@container (max-width:640px) { .pet-canvas { --ps:0.4167; } }
@container (max-width:624px) { .pet-canvas { --ps:0.4062; } }
@container (max-width:608px) { .pet-canvas { --ps:0.3958; } }
@container (max-width:592px) { .pet-canvas { --ps:0.3854; } }
@container (max-width:576px) { .pet-canvas { --ps:0.375; } }
@container (max-width:560px) { .pet-canvas { --ps:0.3646; } }
@container (max-width:544px) { .pet-canvas { --ps:0.3542; } }
@container (max-width:528px) { .pet-canvas { --ps:0.3438; } }
@container (max-width:512px) { .pet-canvas { --ps:0.3333; } }
@container (max-width:496px) { .pet-canvas { --ps:0.3229; } }
@container (max-width:480px) { .pet-canvas { --ps:0.3125; } }
@container (max-width:464px) { .pet-canvas { --ps:0.3021; } }
@container (max-width:448px) { .pet-canvas { --ps:0.2917; } }
@container (max-width:432px) { .pet-canvas { --ps:0.2812; } }
@container (max-width:416px) { .pet-canvas { --ps:0.2708; } }
@container (max-width:400px) { .pet-canvas { --ps:0.2604; } }
@container (max-width:384px) { .pet-canvas { --ps:0.25; } }
@container (max-width:368px) { .pet-canvas { --ps:0.2396; } }
@container (max-width:352px) { .pet-canvas { --ps:0.2292; } }
@container (max-width:336px) { .pet-canvas { --ps:0.2188; } }
@container (max-width:320px) { .pet-canvas { --ps:0.2083; } }
@container (max-width:304px) { .pet-canvas { --ps:0.1979; } }
@container (max-width:288px) { .pet-canvas { --ps:0.1875; } }

.pet-note.note-blue { background:#e7f1fd; }

/* Bujji Pet Mode — fit the bottom row and stat strip inside the 1024px canvas */
.pet-stats { top:40px; }
.pet-stat { grid-template-columns:34px 1fr; gap:2px 10px; padding:11px; }
.pet-stat > svg.la-site-icon { width:34px; height:34px; padding:8px; border-radius:11px; }
.pet-stat b { font-size:11px; }
.pet-stat strong { font-size:15px; }
.pet-stat small { font-size:10px; }
.pet-video { top:146px; }
.pet-video-area { height:404px; }

.pet-pomo { padding:14px; }
.pet-pomo .pet-ring { width:120px; height:120px; margin:6px auto 2px; }
.pet-pomo .pet-ring svg { width:120px; height:120px; }
.pet-pomo .pet-ring circle { stroke-width:8; }
.pet-pomo .pet-ring strong { font-size:25px; }
.pet-pomo .pet-ring small { font-size:11px; }
.pet-pomo-actions { margin-top:10px; }
.pet-pomo-actions .pet-btn-green,.pet-pomo-actions .pet-btn-ghost { padding:8px 10px; font-size:11.5px; }
.pet-icon-btn { width:34px; height:34px; }

.pet-planner { padding:14px; }
.pet-planner .pet-task-list { gap:1px; margin-top:9px; }
.pet-planner .pet-task { padding:5px 4px; }
.pet-planner .pet-task-count { margin-top:10px; }
.pet-planner .pet-task-bar { margin-top:6px; }

.pet-privacy { padding:14px; }
.pet-privacy .pet-privacy-body { grid-template-columns:88px 1fr; gap:12px; margin-top:11px; }
.pet-chipart { width:88px; height:88px; border-radius:19px; }
.pet-chipart > svg.la-site-icon { width:38px; height:38px; }
.pet-privacy ul { gap:6px; }
.pet-privacy li { font-size:11px; }
.pet-privacy-foot { margin-top:11px; padding:9px; font-size:12.5px; }

.pet-wellness { padding:14px; }
.pet-wellness .pet-well-row { margin-top:11px; padding:10px; }
.pet-notes { padding:14px; }

/* Bujji Pet Mode — on small screens stop shrinking (the dashboard becomes
   unreadable below ~60%) and let the canvas swipe sideways instead. */
@media (max-width:1000px) {
  .bujji-pet-card { overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#cbd7de transparent; -webkit-overflow-scrolling:touch; }
  .bujji-pet-card::-webkit-scrollbar { height:6px; }
  .bujji-pet-card::-webkit-scrollbar-thumb { border-radius:99px; background:#cbd7de; }
  .pet-canvas { --ps:0.62; }
}
@media (max-width:1000px) and (min-width:861px) {
  .pet-canvas { --ps:0.72; }
}

/* Bujji Pet Mode — real video in the player, and a taller panel so the right
   column no longer leaves a void above the bottom row. */
.pet-video { top:146px; }
.pet-video-area { position:relative; overflow:hidden; height:530px; }
.pet-video-area > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
#bujjiPetMode.video-on .pet-video-area > video { opacity:1; }
.pet-video-ph { display:grid; place-items:center; align-content:center; gap:6px; position:relative; z-index:2; transition:opacity .35s ease, transform .35s ease; }
#bujjiPetMode.video-on .pet-video-ph { opacity:0; transform:scale(.94); pointer-events:none; }
.pet-video-toggle {
  position:absolute; right:14px; bottom:14px; z-index:3;
  display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:50%; color:#12ad51; background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(12,40,26,.22); cursor:pointer;
  opacity:0; transform:scale(.85); transition:.3s var(--ease-spring);
}
#bujjiPetMode.video-on .pet-video-toggle { opacity:1; transform:scale(1); }
.pet-video-toggle:hover { color:#fff; background:#12ad51; }
.pet-video-toggle > svg.la-site-icon { width:16px; height:16px; }

/* the business-intel panel must finish above the bottom row (y788) */
.pet-biz { padding:14px 16px 14px; }
.pet-biz .pet-biz-grid { gap:12px; margin-top:12px; }
.pet-biz .pet-biz-card { padding:12px; }
.pet-biz .pet-biz-card > header { margin-bottom:9px; }
.pet-biz .pet-biz-card > header > svg.la-site-icon { width:24px; height:24px; padding:5px; }
.pet-biz .pet-biz-card p { font-size:11.5px; line-height:1.5; }
.pet-biz .pet-biz-card small { margin-top:5px; }
.pet-biz .pet-big-green { font-size:24px; }
.pet-biz .pet-avatars { margin-top:8px; }
.pet-biz .pet-btn-green,.pet-biz .pet-btn-ghost { margin-top:9px; padding:8px 10px; font-size:11.5px; }
.pet-biz .pet-lead { margin-top:9px; padding:9px; grid-template-columns:38px 1fr; }
.pet-biz .pet-lead-avatar { width:38px; height:38px; }
.pet-biz .pet-celebrate-title { font-size:13px; }
.pet-biz .pet-biz-chips { gap:12px; margin-top:12px; }
.pet-biz .pet-biz-chips button { grid-template-columns:30px 1fr auto; gap:9px; padding:9px 11px; }
.pet-biz .pet-biz-chips svg.la-site-icon { width:30px; height:30px; padding:7px; border-radius:10px; }
.pet-biz .pet-biz-chips b { font-size:12px; }
.pet-biz .pet-biz-chips small { font-size:10.5px; }
/* final 6px: keep the biz panel and video clear of the bottom row at y788 */
.pet-biz { padding-bottom:10px; }
.pet-biz .pet-biz-chips { margin-top:9px; }
.pet-video-area { height:522px; }

/* ==========================================================================
   Bujji Pet Mode — even bottom row
   The five panels were 196–244px tall with content top-aligned, so the row
   read as ragged. Lock them to one height and let each panel's main block
   flex, so every card fills its box and they all bottom-align.
   ========================================================================== */
.pet-toolbar { display:none; }

.pet-pomo,.pet-wellness,.pet-notes,.pet-planner,.pet-privacy {
  height:246px; display:flex; flex-direction:column;
}
.pet-pomo > h4,.pet-wellness > h4,.pet-notes > header,.pet-planner > header,.pet-privacy > h4 { flex:none; }

/* pomodoro — ring centres in the slack, buttons pin to the base */
.pet-pomo .pet-ring { margin:auto; }
.pet-pomo-actions { flex:none; }

/* wellness — the two reminders share the height evenly */
.pet-wellness .pet-well-row { flex:1; margin-top:10px; }

/* sticky notes — grid fills, timestamp sits at the note's base */
.pet-notes .pet-note-grid { flex:1; min-height:0; margin-top:12px; }
.pet-note { display:flex; flex-direction:column; }
.pet-note p { flex:1; }
.pet-note small { margin-top:8px; }

/* planner — task list fills, count + bar pin to the base */
.pet-planner .pet-task-list { flex:1; min-height:0; align-content:start; }
.pet-planner .pet-task-count,.pet-planner .pet-task-bar { flex:none; }

/* privacy — chip + bullets fill, the reassurance strip pins to the base */
.pet-privacy .pet-privacy-body { flex:1; min-height:0; }
.pet-privacy-foot { flex:none; }
/* the removed footer freed 46px — give it back to the video so the right
   column still finishes level with the business-intel panel */
.pet-video-area { height:568px; }

.pet-notes { width:280px; }

/* ==========================================================================
   Bujji Intro Video — visitor-facing player
   The upload affordances (16:9 Preview chip, Upload or Replace, the
   MP4/MOV/WEBM/Max 200MB strip, "Upload your Bujji intro video here") were
   author-side UI and meant nothing to a site visitor. Removed. What is left
   is the video's own first frame with a play button over it.
   ========================================================================== */
.pet-video > header { justify-content:flex-start; }
.pet-video-area { position:relative; overflow:hidden; display:block; padding:0; border:0; background:#0d1b14; }
.pet-video-area > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }

/* play button sits over the poster frame and steps aside once playing */
.pet-video-area > .pet-play {
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease, transform .35s var(--ease-spring);
}
#bujjiPetMode.video-on .pet-video-area > .pet-play { opacity:0; transform:translate(-50%,-50%) scale(.8); pointer-events:none; }
.pet-video-area > .pet-play:hover { transform:translate(-50%,-50%) scale(1.07); }

/* ==========================================================================
   Bujji Pet Mode — exact-fit scaling + card name
   The step ladder rounds the scale UP to its bucket's top (a 1532px card fell
   in the 1536 bucket and got --ps:1), so the canvas was always a few px wider
   than its container and the right edge clipped. tan(atan2()) converts a
   length ratio into a real number, giving a pixel-exact fit at every width.
   The ladder stays as the fallback for engines without trig functions.
   ========================================================================== */
@supports (scale: tan(atan2(1px, 1px))) {   /* `width` rejects a bare number, `scale` takes it */
  .pet-canvas { --ps:tan(atan2(100cqi, 1536px)); }
}

/* card name, matching the pill the sibling cards use */
.pet-name {
  position:absolute; z-index:12; left:34px; top:30px;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid #dbeee3; border-radius:999px;
  color:#0a7c3f; background:rgba(255,255,255,.94);
  box-shadow:0 6px 16px rgba(20,70,45,.08);
  font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none;
  backdrop-filter:blur(10px);
}
.pet-name > svg.la-site-icon { width:16px; height:16px; color:#12ad51; stroke-width:2.2; }
/* Only the moods panel sat under the new pill, so only it moves. The mascot
   stage stays at its mockup position — nudging it down pushed Bujji off-mark. */
.pet-moods { top:96px; }

/* Real customer faces from the mockup: the unread-message stack uses all
   four portraits, while the lead card reuses the first portrait as Rahul. */
.pet-avatars u:nth-child(1),
.pet-avatars u:nth-child(2),
.pet-avatars u:nth-child(3),
.pet-avatars u:nth-child(4),
.pet-lead-avatar {
  background-image:url("assets/seo/customer-avatars.webp");
  background-repeat:no-repeat;
  background-size:200% 200%;
}
.pet-avatars u:nth-child(1),
.pet-lead-avatar { background-position:0 0; }
.pet-avatars u:nth-child(2) { background-position:100% 0; }
.pet-avatars u:nth-child(3) { background-position:0 100%; }
.pet-avatars u:nth-child(4) { background-position:100% 100%; }

/* ========================================================================
   Bujji Pet Mode — full-width desktop alignment
   Match the width of the full-bleed sibling showcase cards. The inner canvas
   still scales as one proportional unit, so increasing the outer width does
   not disturb any dashboard coordinates or interaction targets.
   ======================================================================== */
@media (min-width:1001px) {
  .bujji-pet-card {
    width:100%;
    max-width:none;
    justify-self:stretch;
    margin-inline:0;
  }
}

/* The bottom productivity tools are compacted into a true widescreen strip.
   This recovers horizontal presence without sending the last row below the
   viewport or hiding controls behind the floating site navigation. */
.pet-pomo,.pet-wellness,.pet-notes,.pet-planner,.pet-privacy {
  top:736px;
  height:180px;
  width:280px;
  padding:12px;
}
.pet-pomo { left:32px; }
.pet-wellness { left:330px; }
.pet-notes { left:628px; }
.pet-planner { left:926px; }
.pet-privacy { left:1224px; }
.pet-biz { top:410px; }



.pet-wellness .pet-well-row { min-height:0; margin-top:5px; padding:6px 7px; gap:7px; grid-template-columns:25px 1fr auto; }
.pet-wellness .pet-well-row > svg.la-site-icon { width:25px; height:25px; padding:6px; border-radius:8px; }
.pet-wellness .pet-well-row b { font-size:10px; }
.pet-wellness .pet-well-row small { margin-top:1px; font-size:8.5px; line-height:1.25; }
.pet-wellness .pet-well-row em { font-size:8.5px; }

.pet-notes .pet-note-grid { gap:10px; margin-top:8px; }
.pet-notes .pet-note { padding:12px 12px 10px; border-radius:12px; display:flex; flex-direction:column; justify-content:space-between; }
.pet-notes .pet-note p { font-size:11.5px; line-height:1.45; font-weight:550; color:#2d3b4d; flex:1; display:flex; align-items:center; }
.pet-notes .pet-note small { margin-top:8px; font-size:9.5px; font-weight:600; color:#8493a5; }
.pet-notes .pet-mini-btn,.pet-planner .pet-mini-btn { padding:5px 9px; font-size:9.5px; font-weight:700; border-radius:7px; }

.pet-planner .pet-task-list { gap:0; margin-top:4px; }
.pet-planner .pet-task { grid-template-columns:14px 1fr auto; gap:6px; padding:2px; }
.pet-planner .pet-task i { width:14px; height:14px; border-radius:4px; }
.pet-planner .pet-task b { font-size:9.5px; }
.pet-planner .pet-task time { font-size:8px; }
.pet-planner .pet-task-count { margin-top:3px; font-size:8.5px; }
.pet-planner .pet-task-bar { height:5px; margin-top:3px; }

.pet-privacy .pet-privacy-body { grid-template-columns:60px 1fr; gap:8px; margin-top:5px; }
.pet-privacy .pet-chipart { width:60px; height:60px; border-radius:14px; }
.pet-privacy .pet-chipart > svg.la-site-icon { width:27px; height:27px; }
.pet-privacy ul { gap:3px; }
.pet-privacy li { padding-left:12px; font-size:8.5px; }
.pet-privacy li::before { top:3px; width:6px; height:6px; box-shadow:0 0 0 2px rgba(34,189,99,.14); }
.pet-privacy-foot { margin-top:5px; padding:5px; font-size:9.5px; }

/* Final alignment grid: every major row shares the same visual guides. */
.pet-name { top:18px; }
.pet-moods { top:80px; }
.pet-stage { top:36px; }
.pet-hud { top:16px; }
.pet-stats { left:414px; top:284px; width:422px; grid-template-columns:repeat(4,1fr); gap:9px; }
.pet-stat { min-width:0; width:100%; box-sizing:border-box; padding:8px 6px 8px; border:1.5px solid #eef1f4; border-radius:12px; background:#fff; align-items:center; text-align:center; }
.pet-video { left:840px; top:12px; width:676px; height:718px; padding:0; overflow:hidden; border-radius:18px; }
.pet-video-area { width:100%; height:100%; margin-top:0; border-radius:18px; }
.pet-pomo,.pet-wellness,.pet-notes,.pet-planner,.pet-privacy { top:736px; height:180px; width:280px; padding:10px 12px; }
.pet-pomo { left:32px; }
.pet-wellness { left:330px; }
.pet-notes { left:628px; }
.pet-planner { left:926px; }
.pet-privacy { left:1224px; }
.pet-biz { top:410px; }
.pet-quick-reply { top:354px; z-index:3; }

.pet-biz-grid { align-items:stretch; }
.pet-biz-grid > .pet-biz-card {
  display:flex;
  flex-direction:column;
  height:204px;
}
.pet-biz-grid > .pet-biz-card > .pet-btn-green,
.pet-biz-grid > .pet-biz-card > .pet-btn-ghost { margin-top:auto; }

/* ==========================================================================
   Scroll motion blur on every card
   The blur was only on wmRevealIn (small cards) — the big showpiece cards ran
   wmRevealCard, which I had built without it to avoid compositing cost. Bujji
   Pet Mode was never added to that big-card list, so it fell through to the
   blurred version, which is the effect that looked right. Now both animations
   carry it, so the whole page reads the same while scrolling.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .template-story.reveal,
    .mockup-suite-grid.reveal,
    .bujji-voice-card.reveal,
    .enterprise-agent-card.reveal,
    .bujji-pet-card.reveal,
    .feature-explorer.reveal,
    .knowledge-workspace.reveal,
    .desktop-story.reveal,
    .ai-workbench.reveal,
    .journey-wrap.reveal,
    .bujji-companion.reveal {
      will-change:opacity, translate, scale;
    }
  }
}

/* ==========================================================================
   Pomodoro Focus Engine — redesigned
   The old card put a 120px ring in a 238px box, which left the three buttons
   fighting for the remaining width. Same footprint (238x246), rebuilt around a
   left-aligned readout and a four-segment session track that doubles as the
   progress bar and the pomodoro count.
   ========================================================================== */
.pet-pomo { padding:15px 15px 14px; text-align:left; justify-content:flex-start; }

/* header */
.pomo-head { display:flex; align-items:center; gap:8px; }
.pomo-badge {
  display:grid; place-items:center; flex:none; width:26px; height:26px;
  border-radius:9px; color:#fff; background:linear-gradient(150deg,#22bd63,#12a04d);
  box-shadow:0 5px 12px rgba(18,160,77,.28);
}
.pomo-badge > svg.la-site-icon { width:14px; height:14px; stroke-width:2.3; }
.pomo-head > b { flex:1; min-width:0; font-size:12.5px; font-weight:850; letter-spacing:-.01em; }
.pomo-state {
  display:inline-flex; align-items:center; gap:5px; flex:none;
  padding:4px 8px; border-radius:999px;
  color:#6b7a8c; background:#f1f4f7; font-size:8.5px; font-style:normal;
  font-weight:800; letter-spacing:.025em; text-transform:none;
}
.pomo-state > i { width:5px; height:5px; border-radius:50%; background:#9aa7b6; }
.pet-pomo.running .pomo-state { color:#0a8c45; background:#e8f9ee; }
.pet-pomo.running .pomo-state > i { background:#22bd63; box-shadow:0 0 0 3px rgba(34,189,99,.16); animation:voicePulse 1.5s infinite; }

/* readout */
.pomo-clock { display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.pomo-clock > strong {
  color:#101c2d; font-size:44px; font-weight:850; line-height:1;
  letter-spacing:-.055em; font-variant-numeric:tabular-nums;
}
.pomo-clock > span { color:#94a1b2; font-size:12px; font-weight:700; }
.pomo-meta { margin-top:7px; color:#7b8899; font-size:10.5px; }
.pomo-meta b { color:#3f4d5e; font-weight:850; }

/* four-segment session track: filled = done, live = in progress */
.pomo-track { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:14px; }
.pomo-track > span { position:relative; overflow:hidden; height:6px; border-radius:99px; background:#e9eef2; }
.pomo-track > span.done { background:linear-gradient(90deg,#4bd67f,#12a04d); }
.pomo-track > span.live > i {
  display:block; width:0%; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#4bd67f,#12a04d);
  box-shadow:0 0 9px rgba(34,189,99,.55);
  transition:width .9s linear;
}

/* actions */
.pet-pomo-actions { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:14px; }
.pomo-primary {
  display:flex; align-items:center; justify-content:center; gap:7px;
  flex:1; min-width:0; height:38px; padding:0 12px;
  border:0; border-radius:12px; color:#fff;
  background:linear-gradient(150deg,#22bd63,#12a04d);
  box-shadow:0 8px 18px rgba(18,160,77,.26);
  font:850 12px var(--font); cursor:pointer;
  transition:.24s var(--ease-spring);
}
.pomo-primary > svg.la-site-icon { width:13px; height:13px; fill:currentColor; }
.pomo-primary:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(18,160,77,.32); }
.pomo-ghost {
  display:grid; place-items:center; flex:none; width:38px; height:38px;
  border:1px solid #e4eaf0; border-radius:12px; color:#5b6980; background:#fff;
  cursor:pointer; transition:.22s ease;
}
.pomo-ghost > svg.la-site-icon { width:14px; height:14px; }
.pomo-ghost:hover { border-color:#9fdcb8; color:#0b8f44; background:#f4fff8; }
/* trim 6px so the actions row sits inside the panel */
.pomo-clock > strong { font-size:40px; }
.pomo-meta { margin-top:6px; }
.pomo-track { margin-top:12px; }
.pet-pomo-actions { padding-top:11px; gap:6px; }
.pomo-primary,.pomo-ghost { height:36px; }
.pomo-ghost { width:36px; }

/* ==========================================================================
   CARD: Bujji Analytics  (#bujjiAnalytics)
   Built 1:1 from the supplied mockup on a fixed 1536x1036 design canvas,
   scaled exactly to the card with tan(atan2()) like the Pet Mode card.
   ========================================================================== */
.bujji-analytics-card {
  position:relative; grid-column:1/-1;
  container-type:inline-size;
  overflow:hidden; border:1px solid #e4ebe7; border-radius:26px;
  color:#101c2d; background:#fff;
  box-shadow:0 26px 74px rgba(24,67,44,.10);
}
.an-canvas {
  --as:1;
  position:relative; width:1536px; height:1036px;
  transform:scale(var(--as)); transform-origin:top left;
  margin-bottom:calc((var(--as) - 1) * 1036px);
  background:#fff;
}
@supports (scale: tan(atan2(1px, 1px))) {
  .an-canvas { --as:tan(atan2(100cqi, 1536px)); }
}
#bujjiAnalytics svg.la-site-icon { flex:none; display:block; box-sizing:border-box; stroke-width:2; }

/* ───────────────────────── left rail ───────────────────────── */
.an-intro { position:absolute; left:0; top:0; width:505px; height:1036px; padding:26px 34px 0 34px; }

.an-brand { display:flex; align-items:center; gap:9px; }
.an-brand-mark { display:grid; place-items:center; width:44px; height:44px; overflow:hidden; border-radius:50%; background:#f2f7f4; }
.an-brand-mark img { width:150%; height:150%; object-fit:contain; object-position:center 18%; }
.an-brand > b { font-size:25px; font-weight:850; letter-spacing:-.045em; }
.an-brand > b span { color:#12ae51; }
.an-plus { color:#b6c2cf; font-size:15px; font-style:normal; }
.an-brand-pill {
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border:1px solid #e3e9ef; border-radius:12px; background:#fff;
  color:#1d2b3d; font-size:13px; font-style:normal; font-weight:800;
  box-shadow:0 4px 12px rgba(23,48,74,.06);
}
.an-brand-pill > svg.la-site-icon { width:15px; height:15px; color:#12ae51; }

.an-headline { margin-top:30px; font-size:30px; font-weight:850; line-height:1.24; letter-spacing:-.038em; }
.an-headline span { color:#16a34a; }
.an-wa.la-site-icon { display:inline-block; width:27px; height:27px; margin-left:5px; color:#25d366; vertical-align:-6px; }
.an-lead { margin-top:16px; max-width:400px; color:#5b6b7d; font-size:13px; line-height:1.62; }

/* mascot + speech bubble + live-demo card */
.an-hero { position:relative; height:322px; margin-top:14px; }
.an-hero-bot {
  position:absolute; left:-14px; top:0; width:196px; height:auto;
  filter:drop-shadow(0 18px 22px rgba(24,71,44,.16));
  animation:voiceMascotFloat 4.8s ease-in-out infinite;
}
.an-bubble {
  position:absolute; left:196px; top:16px; width:196px;
  padding:13px 15px; border:1.5px solid #9fdcb8; border-radius:16px;
  background:#f6fffa; box-shadow:0 10px 24px rgba(20,105,52,.08);
}
.an-bubble::before {
  content:""; position:absolute; left:-8px; top:26px; width:14px; height:14px;
  border-left:1.5px solid #9fdcb8; border-bottom:1.5px solid #9fdcb8;
  background:#f6fffa; transform:rotate(45deg);
}
.an-bubble > b { display:block; color:#0f9a4a; font-size:14px; font-weight:850; }
.an-bubble > p { margin-top:7px; color:#38495c; font-size:12.5px; line-height:1.58; }
.an-live {
  position:absolute; left:196px; top:186px; width:196px;
  padding:12px 14px 8px; border:1px solid #d9ece2; border-radius:14px;
  background:linear-gradient(160deg,#f6fffa,#fff);
}
.an-live > b { display:block; color:#0f9a4a; font-size:12.5px; font-weight:850; }
.an-live > small { display:block; margin-top:5px; color:#6b7a8c; font-size:10px; line-height:1.5; }
.an-live-spark { display:block; width:100%; height:38px; margin-top:6px; }
.an-live-line { fill:none; stroke:#22bd63; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* why-different panel */
.an-why { position:absolute; left:34px; right:34px; bottom:26px; padding:16px 16px 18px; border:1px solid #e6ebef; border-radius:18px; background:#fff; }
.an-why > h4 { color:#101c2d; font-size:14px; font-weight:850; text-align:center; }
.an-why > h4::first-line { color:#101c2d; }
.an-why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
.an-why-grid > span { display:grid; justify-items:center; text-align:center; gap:0; }
.an-why-grid svg.la-site-icon { width:44px; height:44px; padding:12px; border-radius:50%; }
.an-why-grid b { margin-top:10px; font-size:11.5px; font-weight:850; }
.an-why-grid small { margin-top:5px; color:#7b8899; font-size:9.5px; line-height:1.45; }
.wg-green svg.la-site-icon { color:#12a04d; background:#e8f9ee; }
.wg-violet svg.la-site-icon { color:#7c4ce4; background:#f1ebfe; }
.wg-blue svg.la-site-icon { color:#2f7ff0; background:#eaf2fe; }
.wg-amber svg.la-site-icon { color:#f2870f; background:#fef2e3; }

/* ───────────────────────── right board ───────────────────────── */
.an-board { position:absolute; left:505px; top:0; width:1031px; height:1036px; padding:22px 20px 0; background:#f8fafb; }
.an-secure {
  position:absolute; right:20px; top:20px;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border:1px solid #dfe8ea; border-radius:999px; background:#fff;
  color:#3f5265; font-size:11px; font-weight:800;
  box-shadow:0 4px 12px rgba(23,48,74,.05);
}
.an-secure > svg.la-site-icon { width:14px; height:14px; color:#12a04d; }

.an-board-head { text-align:center; }
.an-board-head h4 { display:flex; align-items:center; justify-content:center; gap:9px; color:#101c2d; font-size:21px; font-weight:850; letter-spacing:-.03em; }
.an-leaf { font-size:16px; font-style:normal; }
.an-board-head em {
  display:inline-flex; align-items:center; margin-top:12px; padding:8px 17px;
  border:1px solid #bfe6cd; border-radius:999px; background:#f4fff8;
  color:#0f8f47; font-size:12.5px; font-style:normal; font-weight:800;
}

/* card grid */
.an-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.an-card {
  display:flex; flex-direction:column; min-width:0; min-height:236px;
  padding:15px; border:1px solid #e8edf0; border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(23,48,74,.045);
  transition:transform .3s var(--ease-spring), box-shadow .3s ease, border-color .3s ease;
}
.an-card:hover { transform:translateY(-4px); border-color:#c8e6d5; box-shadow:0 16px 32px rgba(20,80,50,.10); }
.an-card > header { display:flex; align-items:flex-start; gap:10px; }
.an-ico { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; }
.an-ico > svg.la-site-icon { width:17px; height:17px; color:#fff; stroke-width:2.2; }
.ic-green { background:linear-gradient(150deg,#2ecb6d,#12a04d); box-shadow:0 5px 12px rgba(18,160,77,.26); }
.ic-violet { background:linear-gradient(150deg,#9163f0,#6b3fd8); box-shadow:0 5px 12px rgba(107,63,216,.24); }
.ic-amber { background:linear-gradient(150deg,#ffab3d,#f2870f); box-shadow:0 5px 12px rgba(242,135,15,.24); }
.ic-blue { background:linear-gradient(150deg,#5aa2f7,#2f7ff0); box-shadow:0 5px 12px rgba(47,127,240,.24); }
.ic-pink { background:linear-gradient(150deg,#ff6f9d,#ec3d76); box-shadow:0 5px 12px rgba(236,61,118,.24); }
.an-card > header b { padding-top:5px; font-size:13.5px; font-weight:850; letter-spacing:-.01em; }
.an-card > p { margin-top:9px; color:#6b7a8c; font-size:11px; line-height:1.55; }

.an-viz { margin-top:auto; padding-top:12px; }
.an-viz-tint { margin:12px -3px -3px; padding:11px 10px 8px; border-radius:12px; background:#f6faf7; }
.an-viz-tint.v { background:#f8f6fe; }

/* stat rows */
.an-stat3,.an-stat2 { display:grid; }
.an-stat3 { grid-template-columns:repeat(3,1fr); }
.an-stat2 { grid-template-columns:repeat(2,1fr); }
.an-stat3 > span,.an-stat2 > span { min-width:0; border-inline-end:1px solid #e6ecea; padding-inline:6px; text-align:center; }
.an-stat3 > span:last-child,.an-stat2 > span:last-child { border-inline-end:0; }
.an-stat3 b,.an-stat2 b { display:block; font-size:19px; font-weight:850; letter-spacing:-.04em; }
/* Campaign Performance: three equal columns, whatever the number's width. With plain 1fr the
   wide "97.7%" stretched its column and crowded the next one; minmax(0,1fr) keeps them equal,
   and tabular figures stop the digits shifting while the numbers move. */
.an-stat3.big { grid-template-columns:repeat(3,minmax(0,1fr)); }
.an-stat3.big > span { padding-inline:4px; }
.an-stat3.big b { font-size:17px; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.an-stat3 small,.an-stat2 small { display:block; margin-top:3px; color:#7b8899; font-size:9.5px; }
.c-green { color:#12a04d; }

/* sparklines */
.an-spark { display:block; width:100%; height:44px; margin-top:8px; }
.sp-line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sp-line.g { stroke:#22bd63; } .sp-area.g { fill:rgba(34,189,99,.16); }
.sp-line.v { stroke:#7c4ce4; } .sp-area.v { fill:rgba(124,76,228,.14); }

/* revenue + bars */
.an-revenue { position:relative; }
.an-revenue > b { display:block; color:#0f9a4a; font-size:21px; font-weight:850; letter-spacing:-.04em; }
.an-revenue > small { display:block; margin-top:3px; color:#7b8899; font-size:9.5px; }
.an-cart.la-site-icon { position:absolute; right:2px; top:0; width:17px; height:17px; color:#12a04d; }
.an-bars { display:flex; align-items:flex-end; gap:4px; height:46px; margin-top:9px; }
.an-bars > i { flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:linear-gradient(#5ddc8c,#12a04d); }

/* customer insights */
.an-score > b { display:block; font-size:21px; font-weight:850; letter-spacing:-.04em; }
.an-score > small { display:block; margin-top:3px; color:#7b8899; font-size:9.5px; }
.an-faces { display:flex; align-items:center; margin-top:11px; }
.an-faces > span {
  display:grid; place-items:center; width:32px; height:32px; margin-right:-8px;
  border:2px solid #fff; border-radius:50%; color:#fff; font-size:0; font-weight:850;
  background-image:url("assets/seo/customer-avatars.webp");
  background-repeat:no-repeat; background-size:200% 200%;
  box-shadow:0 3px 8px rgba(24,58,44,.14);
}
.an-faces .f1 { background-position:0 0; }
.an-faces .f2 { background-position:100% 0; }
.an-faces .f3 { background-position:0 100%; }
.an-faces .f4 { background-position:100% 100%; }
.an-faces .f5 {
  background-image:url("assets/seo/business-owner-cutout.webp");
  background-position:50% 12%; background-size:150%;
}
.an-faces > em { margin-left:16px; color:#5b6b7d; font-size:11px; font-style:normal; font-weight:850; }

/* geographic reach */
.an-geo { position:relative; margin-top:12px; }
.an-geo-map { position:absolute; right:-6px; top:6px; width:126px; opacity:.85; }
.an-geo-list { position:relative; }
.an-geo-list > b { display:block; font-size:11.5px; font-weight:850; }
.an-geo-list > span { display:flex; align-items:center; gap:7px; margin-top:7px; color:#43536a; font-size:10.5px; }
.an-geo-list .fl { font-size:11px; font-style:normal; }
.an-geo-list .fl.dot { width:8px; height:8px; border-radius:50%; background:#c7d0da; }
.an-geo-list em { margin-left:auto; color:#1d2b3d; font-size:10.5px; font-style:normal; font-weight:800; }

/* engagement heatmap */
.an-heat-times { display:flex; justify-content:space-between; color:#94a1b2; font-size:8px; }
.an-heat { display:grid; grid-template-columns:22px repeat(12,1fr); gap:3px; margin-top:6px; }
.an-heat > b { color:#8d9aab; font-size:8px; font-weight:700; line-height:11px; }
.an-heat > i { height:11px; border-radius:2.5px; background:var(--c,#eaf6ee); }

/* content breakdown */
.an-content { display:flex; align-items:center; gap:12px; margin-top:12px; }
.an-donut { position:relative; flex:none; display:grid; place-items:center; width:96px; height:96px; }
.an-donut svg { width:96px; height:96px; transform:rotate(-90deg); }
.an-donut circle { fill:none; stroke-width:5.6; }
.an-donut .dn-track { stroke:#eef2f5; }
.an-donut strong { position:absolute; font-size:19px; font-weight:850; letter-spacing:-.04em; text-align:center; }
.an-donut strong small { display:block; margin-top:1px; color:#8d9aab; font-size:9px; font-weight:600; }
.an-donut .s1 { stroke:#12a04d; stroke-dasharray:61 39; stroke-dashoffset:0; }
.an-donut .s2 { stroke:#2f7ff0; stroke-dasharray:18 82; stroke-dashoffset:-61; }
.an-donut .s3 { stroke:#7c4ce4; stroke-dasharray:11 89; stroke-dashoffset:-79; }
.an-donut .s4 { stroke:#ec3d76; stroke-dasharray:5 95; stroke-dashoffset:-90; }
.an-donut .s5 { stroke:#f2870f; stroke-dasharray:3 97; stroke-dashoffset:-95; }
.an-donut .s6 { stroke:#94a1b2; stroke-dasharray:2 98; stroke-dashoffset:-98; }
.an-legend { flex:1; min-width:0; list-style:none; }
.an-legend li { display:flex; align-items:center; gap:6px; margin-bottom:5px; color:#43536a; font-size:9.5px; }
.an-legend li:last-child { margin-bottom:0; }
.an-legend i { flex:none; width:7px; height:7px; border-radius:50%; }
.an-legend em { margin-left:auto; color:#5b6b7d; font-size:9px; font-style:normal; }
.an-legend .l1 i { background:#12a04d; } .an-legend .l2 i { background:#2f7ff0; }
.an-legend .l3 i { background:#7c4ce4; } .an-legend .l4 i { background:#ec3d76; }
.an-legend .l5 i { background:#f2870f; } .an-legend .l6 i { background:#94a1b2; }

/* call analytics */
.an-calls { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.an-calls > span { display:grid; justify-items:center; gap:5px; padding:9px 4px; border:1px solid #eaeff2; border-radius:10px; }
.an-calls svg.la-site-icon { width:16px; height:16px; color:#12a04d; }
.an-calls .c-ok { color:#12a04d; } .an-calls .c-miss { color:#ec3d76; }
.an-calls small { color:#7b8899; font-size:8.5px; }
.an-duration { margin-top:9px; padding:10px; border-radius:11px; background:#f6faf7; }
.an-duration > b { display:block; font-size:18px; font-weight:850; letter-spacing:-.04em; }
.an-duration > small { display:block; margin-top:2px; color:#7b8899; font-size:9.5px; }

/* product table */
.an-table { width:100%; border-collapse:collapse; }
.an-table th { padding:0 0 8px; color:#8d9aab; font-size:9px; font-weight:800; text-align:right; }
.an-table th:first-child { text-align:left; }
.an-table td { padding:7px 0; border-top:1px solid #eef2f5; color:#1d2b3d; font-size:10px; font-weight:700; text-align:right; }
.an-table td:first-child { color:#43536a; font-weight:600; text-align:left; }

/* ai suggestions */
.an-suggest { list-style:none; }
.an-suggest li { display:flex; align-items:flex-start; gap:8px; margin-bottom:9px; color:#43536a; font-size:10.5px; line-height:1.4; }
.an-suggest li:last-child { margin-bottom:0; }
.an-suggest svg.la-site-icon { width:15px; height:15px; padding:3px; border-radius:50%; color:#fff; background:#22bd63; }

/* privacy */
.an-privacy { display:grid; justify-items:center; gap:12px; margin-top:14px; }
.an-shield {
  display:grid; place-items:center; width:82px; height:82px; border-radius:26px;
  background:linear-gradient(155deg,#e9f9ef,#d5f2e1);
  box-shadow:inset 0 0 0 1px rgba(18,160,77,.14);
}
.an-shield > svg.la-site-icon { width:30px; height:30px; color:#12a04d; }
.an-privacy > em {
  display:block; width:100%; padding:9px; border-radius:10px;
  color:#0f8f47; background:#f0fbf4; font-size:11px; font-style:normal;
  font-weight:850; text-align:center;
}

/* footer strip */
.an-foot {
  display:flex; align-items:center; gap:14px;
  margin-top:16px; padding:16px 20px; border:1px solid #d9ece2; border-radius:16px;
  background:linear-gradient(120deg,#f4fff8,#fbfffc);
}
.an-foot-ico { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; color:#fff; background:linear-gradient(150deg,#2ecb6d,#12a04d); }
.an-foot-ico > svg.la-site-icon { width:19px; height:19px; }
.an-foot > p { flex:1; min-width:0; }
.an-foot b { display:block; color:#0f8f47; font-size:14px; font-weight:850; }
.an-foot small { display:block; margin-top:4px; color:#5b6b7d; font-size:11px; }
.an-chips { display:flex; gap:8px; }
.an-chips > span { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid #e3e9ef; border-radius:10px; background:#fff; font-size:11px; font-weight:800; }
.an-chips svg.la-site-icon { width:13px; height:13px; }
.ch-green { color:#0f8f47; } .ch-green svg { color:#12a04d; }
.ch-violet { color:#6b3fd8; } .ch-violet svg { color:#7c4ce4; }
.ch-blue { color:#2f7ff0; } .ch-blue svg { color:#2f7ff0; }
.ch-amber { color:#e07a0a; } .ch-amber svg { color:#f2870f; }
/* Equal grid rows + fit the board inside the 1036px canvas.
   Auto rows sized to their own content, so each row landed on a different
   height (244 / 274 / 265) and the footer pushed 15px past the canvas. */
.an-grid { grid-auto-rows:256px; }
.an-card { min-height:0; padding:13px; }
.an-card > p { margin-top:7px; }
.an-viz { padding-top:9px; }
.an-viz-tint { margin:9px -2px -2px; padding:9px 9px 7px; }
.an-donut,.an-donut svg { width:86px; height:86px; }
.an-donut strong { font-size:17px; }
.an-content { gap:10px; margin-top:9px; }
.an-legend li { margin-bottom:4px; }
.an-calls > span { padding:7px 4px; }
.an-duration { margin-top:7px; padding:8px 10px; }
.an-heat > i { height:10px; }
.an-suggest li { margin-bottom:7px; }
.an-shield { width:72px; height:72px; border-radius:22px; }
.an-geo-map { width:114px; }
.an-foot { margin-top:14px; padding:13px 18px; }
.an-foot-ico { width:34px; height:34px; }
.an-chips > span { padding:7px 12px; }

/* ==========================================================================
   Analytics — mockup corrections for the three cards that were off
   ========================================================================== */

/* the data boxes in the mockup are near-white with a hairline, not a tint */
.an-viz-tint { border:1px solid #eef2f4; background:#fbfdfc; }
.an-viz-tint.v { background:#fdfcff; border-color:#f0edf8; }

/* 1 · Message Analytics — all three figures are green in the mockup, and the
   sparkline sits taller with a clearer wave */
.an-card:nth-child(1) .an-stat3 b { color:#12a04d; }
.an-card:nth-child(1) .an-stat3 span:first-child b { color:#12a04d; }
.an-card:nth-child(1) .an-spark { height:52px; }

/* 2 · Response Intelligence — dark figures, violet chart, taller plot */
.an-card:nth-child(2) .an-stat2 b { color:#101c2d; }
.an-card:nth-child(2) .an-spark { height:52px; }

/* 3 · Geographic Reach — the map is a wide backdrop behind the list, not a
   small badge in the corner */
.an-geo {
  position:relative; overflow:hidden; margin:9px -2px -2px;
  padding:11px 11px 9px; border:1px solid #eef2f4; border-radius:12px; background:#fbfdfc;
}
.an-geo-map {
  position:absolute; right:-10px; top:50%; width:172px; height:auto;
  opacity:.9; transform:translateY(-50%); pointer-events:none;
}
.an-geo-list { position:relative; z-index:1; width:62%; }
.an-geo-list > span { margin-top:6px; }
.an-geo-list em { padding-left:8px; }

/* ==========================================================================
   Analytics — "life": tick flashes, live rows, pulsing map + breathing chrome
   ========================================================================== */

/* a value that just changed flashes once */
@keyframes anTick { 0% { color:#12a04d; transform:translateY(-2px); } 100% { transform:translateY(0); } }
.an-tick { animation:anTick .55s ease; }

/* the card only breathes while it is actually on screen */
.an-live-on .an-ico { animation:anIcoBreathe 3.4s ease-in-out infinite; }
.an-live-on .an-card:nth-child(2n) .an-ico { animation-delay:.5s; }
.an-live-on .an-card:nth-child(3n) .an-ico { animation-delay:1s; }
@keyframes anIcoBreathe { 50% { transform:translateY(-2px); } }

/* geographic reach — pulsing hotspots over the map, live row highlight */
.an-geo::after {
  content:""; position:absolute; right:40px; top:52%;
  width:9px; height:9px; border-radius:50%; background:#22bd63;
  box-shadow:0 0 0 0 rgba(34,189,99,.55);
  animation:anPing 2.2s ease-out infinite; pointer-events:none;
}
.an-geo::before {
  content:""; position:absolute; right:96px; top:34%;
  width:6px; height:6px; border-radius:50%; background:#4bd67f;
  box-shadow:0 0 0 0 rgba(34,189,99,.5);
  animation:anPing 2.2s .9s ease-out infinite; pointer-events:none;
}
@keyframes anPing {
  0%   { box-shadow:0 0 0 0 rgba(34,189,99,.5); }
  70%  { box-shadow:0 0 0 12px rgba(34,189,99,0); }
  100% { box-shadow:0 0 0 0 rgba(34,189,99,0); }
}
.an-geo-list > span { border-radius:6px; padding:2px 4px; margin-left:-4px; transition:background .45s ease, color .45s ease; }
.an-geo-list > span.live { background:rgba(34,189,99,.1); color:#0f8f47; }
.an-geo-list > span.live em { color:#0f8f47; }

/* live sparkline head-dot */
.an-viz-tint { position:relative; }

/* product table — the row under analysis lights up */
.an-table tbody tr { transition:background .45s ease; }
.an-table tbody tr.live td { background:rgba(34,189,99,.09); }
.an-table tbody tr.live td:first-child { border-radius:6px 0 0 6px; color:#0f8f47; font-weight:800; }
.an-table tbody tr.live td:last-child { border-radius:0 6px 6px 0; }

/* ai suggestions — focus walks the list */
.an-suggest li { border-radius:7px; padding:3px 5px; margin-left:-5px; transition:background .4s ease, transform .4s var(--ease-spring); }
.an-suggest li.live { background:rgba(34,189,99,.1); transform:translateX(3px); }
.an-suggest li.live svg.la-site-icon { box-shadow:0 0 0 3px rgba(34,189,99,.18); }

/* privacy shield keeps a slow glow */
.an-live-on .an-shield { animation:anShield 3.6s ease-in-out infinite; }
@keyframes anShield {
  50% { box-shadow:inset 0 0 0 1px rgba(18,160,77,.14),0 0 0 8px rgba(34,189,99,.06); }
}

/* live-demo sparkline on the left rail keeps streaming too */
.an-live { position:relative; }
.an-live::after {
  content:""; position:absolute; right:14px; top:14px; width:6px; height:6px;
  border-radius:50%; background:#22bd63; box-shadow:0 0 0 3px rgba(34,189,99,.16);
  animation:voicePulse 1.6s infinite;
}

/* customer avatars drift gently */
.an-live-on .an-faces > span { animation:anFace 4s ease-in-out infinite; }
.an-live-on .an-faces > span:nth-child(2) { animation-delay:.3s; }
.an-live-on .an-faces > span:nth-child(3) { animation-delay:.6s; }
.an-live-on .an-faces > span:nth-child(4) { animation-delay:.9s; }
.an-live-on .an-faces > span:nth-child(5) { animation-delay:1.2s; }
@keyframes anFace { 50% { transform:translateY(-3px); } }

/* call tiles pulse in sequence */
.an-live-on .an-calls > span { animation:anCall 3.6s ease-in-out infinite; }
.an-live-on .an-calls > span:nth-child(2) { animation-delay:1.2s; }
.an-live-on .an-calls > span:nth-child(3) { animation-delay:2.4s; }
@keyframes anCall { 50% { border-color:#bfe6cd; background:#f7fdf9; } }

@media (prefers-reduced-motion:reduce) {
  #bujjiAnalytics *,#bujjiAnalytics *::before,#bujjiAnalytics *::after { animation:none!important; transition:none!important; }
}

/* ==========================================================================
   CARD: Overview  (#bujjiOverview)
   Bento showcase built 1:1 from the mockup on a 1664x941 design canvas,
   scaled exactly to the card with tan(atan2()).
   ========================================================================== */
.bujji-overview-card {
  position:relative; container-type:inline-size;
  margin-bottom:22px; overflow:hidden;
  border:1px solid #e4ebe7; border-radius:26px; background:#fff;
  box-shadow:0 26px 74px rgba(24,67,44,.10); color:#101c2d;
}
.pw-canvas {
  --pws:1; position:relative; width:1664px; height:941px;
  transform:scale(var(--pws)); transform-origin:top left;
  margin-bottom:calc((var(--pws) - 1) * 941px);
  background:#f7f9fa;
}
@supports (scale: tan(atan2(1px, 1px))) {
  .pw-canvas { --pws:tan(atan2(100cqi, 1664px)); }
}
#bujjiOverview svg.la-site-icon { flex:none; display:block; box-sizing:border-box; stroke-width:2; }

/* shared card shell */
.pw { position:absolute; padding:16px; border:1px solid #e9eef1; border-radius:18px; background:#fff; box-shadow:0 5px 16px rgba(23,48,74,.045); }
.pw-ico { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; }
.pw-ico > svg.la-site-icon { width:19px; height:19px; }
.ic-green { color:#12a04d; background:#e8f9ee; }
.ic-violet { color:#7c4ce4; background:#f1ebfe; }
.ic-blue { color:#2f7ff0; background:#eaf2fe; }
.ic-amber { color:#f2870f; background:#fef2e3; }
.ic-pink { color:#ec3d76; background:#fdeaf1; }
svg.la-site-icon.ic-green { color:#12a04d; } svg.la-site-icon.ic-violet { color:#7c4ce4; }
svg.la-site-icon.ic-blue { color:#2f7ff0; } svg.la-site-icon.ic-amber { color:#f2870f; }
svg.la-site-icon.ic-pink { color:#ec3d76; }

.pw-pill { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font-size:11px; font-weight:850; }
.pill-green { color:#0f8f47; background:#e8f9ee; }
.pill-violet { color:#6b3fd8; background:#f1ebfe; }
.pw-pill.out { border:1px solid #bfe6cd; background:#f4fff8; }
.pw-pill.tiny { padding:3px 8px; font-size:9px; }

.pw-chips { display:flex; flex-wrap:wrap; gap:7px; }
.pw-chips > span { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #e9eef1; border-radius:9px; background:#fff; color:#3f4d5e; font-size:10.5px; font-weight:700; }
.pw-chips svg.la-site-icon { width:12px; height:12px; color:#12a04d; }

/* A · core power */
.pw-core { left:16px; top:16px; width:474px; height:334px; padding:20px; }
.pw-150 { display:block; margin-top:12px; color:#12a04d; font-size:58px; font-weight:850; line-height:1; letter-spacing:-.05em; }
.pw-core h4 { margin-top:2px; font-size:26px; font-weight:850; line-height:1.14; letter-spacing:-.04em; }
.pw-core > p { margin-top:12px; max-width:210px; color:#6b7a8c; font-size:12px; line-height:1.55; }
.pw-leaf { position:absolute; left:18px; bottom:12px; font-size:70px; line-height:1; font-style:normal; display:inline-block; filter:drop-shadow(0 12px 24px rgba(18,160,77,.26)); }
.pw-free { position:absolute; right:14px; top:14px; width:206px; padding:13px; border:1.5px solid #a9e2c0; border-radius:15px; background:linear-gradient(170deg,#f4fff8,#fff); }
.pw-free-head { display:flex; align-items:center; gap:7px; color:#0f8f47; font-size:19px; font-weight:850; letter-spacing:-.03em; }
.pw-free-head em { font-size:14px; font-style:normal; }
.pw-free > small { display:block; margin-top:5px; color:#1d2b3d; font-size:12.5px; font-weight:850; line-height:1.3; }
.pw-tmpl { display:grid; grid-template-columns:16px 1fr; gap:8px; margin-top:9px; padding:8px 9px; border:1px solid #eaf1ec; border-radius:9px; background:#fff; }
.pw-tmpl > svg.la-site-icon { width:16px; height:16px; padding:3px; border-radius:50%; color:#fff; background:#22bd63; }
.pw-tmpl b { display:block; color:#1d2b3d; font-size:12px; font-weight:850; }
.pw-tmpl b em { font-style:normal; }
.pw-tmpl small { display:block; margin-top:3px; color:#5b6b7d; font-size:9.5px; font-weight:550; line-height:1.38; }

/* B · ai assistant */
.pw-ai { left:505px; top:16px; width:325px; height:269px; }
.pw-ai h4 { margin-top:12px; font-size:22px; font-weight:850; letter-spacing:-.035em; }
.pw-ai .pw-pill { margin-top:9px; }
.pw-ai > p { margin-top:10px; color:#6b7a8c; font-size:12.5px; line-height:1.55; }
.pw-ai .pw-chips { margin-top:12px; }

/* C · designs & themes */
.pw-themes { left:840px; top:16px; width:490px; height:259px; }
.pw-themes > header { display:flex; align-items:center; gap:10px; }
.pw-themes h4 { font-size:21px; font-weight:850; letter-spacing:-.035em; }
.pw-swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px; }
.sw { display:grid; justify-items:center; gap:7px; color:#43536a; font-size:10.5px; font-weight:700; }
.sw > i { display:block; width:100%; height:82px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(23,48,74,.06); }
.sw-glass > i { background:radial-gradient(circle at 40% 32%,#7ff0b0,#0f7a3d 62%,#04301a); }
.sw-soft > i { background:radial-gradient(circle at 42% 34%,#fffdf8,#efe6da 62%,#d9cbb9); }
.sw-ocean > i { background:linear-gradient(160deg,#7fd4ff,#1b7fd6 55%,#0d3f78); }
.sw-amoled > i { background:radial-gradient(circle at 50% 42%,#1b1b1b,#000 70%); }
.sw-neon > i { background:radial-gradient(circle at 50% 60%,#2a0033,#12001a),linear-gradient(180deg,#ff5cf0,#8a2be2); box-shadow:inset 0 0 22px rgba(255,92,240,.55); }
.sw-minimal > i { background:linear-gradient(170deg,#fdfdfd,#eceff2); }
.pw-themes > p { margin-top:14px; color:#6b7a8c; font-size:12.5px; }

/* D · reads aloud */
.pw-voice { left:1345px; top:16px; width:305px; height:264px; }
.pw-voice h4 { margin-top:12px; font-size:17px; font-weight:850; letter-spacing:-.03em; }
.pw-voice > small { display:block; margin-top:5px; color:#7b8899; font-size:11px; }
.pw-wave { display:flex; align-items:center; gap:2px; height:56px; margin-top:14px; }
.pw-wave > i { flex:1; min-width:0; border-radius:99px; background:linear-gradient(#b18bf5,#7c4ce4); }
.pw-player { display:flex; align-items:center; gap:10px; margin-top:14px; }
.pw-play { display:grid; place-items:center; flex:none; width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:linear-gradient(150deg,#9163f0,#6b3fd8); box-shadow:0 6px 14px rgba(107,63,216,.28); cursor:pointer; }
.pw-play > svg.la-site-icon { width:14px; height:14px; fill:currentColor; }
.pw-progress { position:relative; flex:1; height:4px; border-radius:99px; background:#ece7f8; }
.pw-progress > i { display:block; width:32%; height:100%; border-radius:99px; background:#7c4ce4; transition:width .4s linear; }
.pw-player em { color:#7b8899; font-size:10px; font-style:normal; font-weight:700; }

/* E/F · left rows */
.pw-row { display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; transition:.26s var(--ease-spring); }
.pw-row:hover { transform:translateY(-3px); border-color:#c8e6d5; box-shadow:0 14px 26px rgba(20,80,50,.10); }
.pw-row-body { flex:1; min-width:0; }
.pw-row-body b { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:850; letter-spacing:-.02em; }
.pw-row-body small { display:block; margin-top:5px; color:#7b8899; font-size:11.5px; line-height:1.5; }
.pw-chev.la-site-icon { width:17px; height:17px; color:#b6c2cf; }
.pw-row:nth-of-type(1) { left:16px; top:365px; width:474px; height:100px; }
.pw-row-tall { left:16px; top:480px; width:474px; height:120px; }

/* G · hero */
.pw-hero { left:505px; top:290px; width:825px; height:330px; display:grid; grid-template-columns:1fr 300px; gap:18px; padding:20px; }
.pw-brand { display:flex; align-items:center; gap:9px; }
.pw-brand img { width:34px; height:34px; object-fit:contain; }
.pw-brand b { color:#12a04d; font-size:19px; font-weight:850; letter-spacing:-.03em; }
.pw-hero h3 { margin-top:12px; font-size:27px; font-weight:850; line-height:1.12; letter-spacing:-.04em; }
.pw-hero-sub { margin-top:7px; color:#1d2b3d; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.pw-hero-sub span { color:#12a04d; }
.pw-hero .pw-chips { margin-top:14px; }
.pw-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:16px; }
.pw-kpis > span { position:relative; padding:10px 11px 22px; border:1px solid #eaeff2; border-radius:11px; background:#fff; }
.pw-kpis small { display:block; color:#8d9aab; font-size:9.5px; }
.pw-kpis b { display:block; margin-top:4px; font-size:17px; font-weight:850; letter-spacing:-.04em; }
.pw-kpis em { display:block; margin-top:3px; color:#12a04d; font-size:9.5px; font-style:normal; font-weight:800; }
.pw-kpis svg { position:absolute; right:9px; bottom:8px; width:52px; height:16px; }
.pw-sp { fill:none; stroke:#22bd63; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pw-hero-right { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:14px 12px; }
.pw-hero-right > span { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:2px 9px; }
.pw-hero-right svg.la-site-icon { grid-row:1/3; width:24px; height:24px; }
.pw-hero-right b { font-size:11.5px; font-weight:850; }
.pw-hero-right small { color:#7b8899; font-size:9.5px; line-height:1.4; }

/* H/I/J · right rail */
.pw-mini { left:1345px; top:294px; width:305px; height:81px; padding:13px; gap:11px; }
.pw-mini .pw-ico { width:32px; height:32px; border-radius:10px; }
.pw-mini .pw-ico > svg.la-site-icon { width:16px; height:16px; }
.pw-mini .pw-row-body b { font-size:12.5px; }
.pw-mini .pw-row-body small { margin-top:3px; font-size:10px; }
.pw-mini-2 { top:387px; height:79px; }
.pw-mini-3 { top:478px; height:92px; }

/* strip */
.pw-strip { position:absolute; left:16px; top:636px; width:1634px; height:94px; display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.pw-strip > span { display:grid; grid-template-columns:30px 1fr; align-content:center; gap:2px 10px; padding:12px 14px; border:1px solid #e9eef1; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(23,48,74,.045); }
.pw-strip svg.la-site-icon { grid-row:1/4; align-self:center; width:30px; height:30px; padding:6px; border-radius:9px; }
.pw-strip svg.ic-green { background:#e8f9ee; } .pw-strip svg.ic-violet { background:#f1ebfe; }
.pw-strip svg.ic-blue { background:#eaf2fe; } .pw-strip svg.ic-amber { background:#fef2e3; }
.pw-strip b { font-size:11.5px; font-weight:850; line-height:1.25; }
.pw-strip small { color:#7b8899; font-size:9px; line-height:1.35; }
.pw-strip em { color:#12a04d; font-size:11px; font-style:normal; font-weight:850; }

/* K · integrations */
.pw-integrations { left:16px; top:745px; width:384px; height:180px; display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; padding:15px; }
.pw-integrations > span { display:grid; grid-template-columns:26px 1fr; align-content:start; gap:2px 9px; }
.pw-integrations svg.la-site-icon { grid-row:1/3; width:26px; height:26px; padding:5px; border-radius:8px; }
.pw-integrations svg.ic-green { background:#e8f9ee; } .pw-integrations svg.ic-blue { background:#eaf2fe; }
.pw-integrations svg.ic-violet { background:#f1ebfe; }
.pw-integrations b { font-size:10.5px; font-weight:850; }
.pw-integrations small { color:#7b8899; font-size:9px; line-height:1.35; }

/* L · reach */
.pw-reach { left:415px; top:745px; width:275px; height:180px; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:15px; }
.pw-reach > span { display:grid; align-content:start; gap:7px; }
.pw-reach svg.la-site-icon { width:30px; height:30px; padding:6px; border-radius:9px; }
.pw-reach svg.ic-amber { background:#fef2e3; } .pw-reach svg.ic-pink { background:#fdeaf1; }
.pw-reach b { font-size:13px; font-weight:850; line-height:1.2; letter-spacing:-.02em; }
.pw-reach small { color:#7b8899; font-size:9.5px; line-height:1.4; }

/* M · live analytics */
.pw-analytics { left:700px; top:745px; width:450px; height:180px; padding:14px 15px; }
.pw-analytics > header { display:flex; align-items:center; gap:10px; }
.pw-analytics .pw-ico { width:32px; height:32px; border-radius:10px; }
.pw-analytics header > b { flex:1; min-width:0; font-size:14px; font-weight:850; }
.pw-analytics header > b small { display:block; margin-top:3px; color:#8d9aab; font-size:9.5px; font-weight:600; }
.pw-select { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:1px solid #e9eef1; border-radius:8px; color:#5b6980; font-size:10px; font-style:normal; font-weight:700; }
.pw-select svg.la-site-icon { width:11px; height:11px; }
.pw-area { display:block; width:100%; height:62px; margin-top:8px; }
.pw-area-fill { fill:url(#pwAreaFill); }
.pw-area-line { fill:none; stroke:#7c4ce4; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pw-kpis.small { gap:7px; margin-top:8px; }
.pw-kpis.small > span { padding:7px 9px; }
.pw-kpis.small b { font-size:14px; }
.pw-kpis.small small,.pw-kpis.small em { font-size:8.5px; }

/* N · neural engine */
.pw-neural {
  left:1160px; top:730px; width:490px; height:195px; overflow:hidden;
  padding:18px 20px; border:0; border-radius:20px; color:#eaf2ff;
  background:
    radial-gradient(420px 200px at 78% 52%, rgba(56,189,248,.30), transparent 62%),
    linear-gradient(140deg,#0b1834 0%,#12224a 48%,#0a1430 100%);
  box-shadow:0 18px 40px rgba(9,22,52,.35);
}
.pw-neural::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(96,165,250,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.14) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 72% 50%, #000, transparent 72%);
  mask-image:radial-gradient(circle at 72% 50%, #000, transparent 72%);
}
.pw-neural-tag { position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid rgba(74,222,128,.4); border-radius:999px; color:#6ee7a5; background:rgba(16,60,40,.5); font-size:10px; font-weight:850; }
.pw-neural-tag > svg.la-site-icon { width:12px; height:12px; }
.pw-neural h3 { position:relative; margin-top:11px; font-size:26px; font-weight:850; line-height:1.1; letter-spacing:-.04em; color:#fff; }
.pw-neural h3 span { color:#4fd0ff; }
.pw-neural > p { position:relative; margin-top:7px; color:#9fb5d8; font-size:11.5px; }
.pw-neural-chips { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.pw-neural-chips > span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(120,170,255,.24); border-radius:8px; background:rgba(18,38,78,.6); color:#cfe0f8; font-size:9.5px; font-weight:700; }
.pw-neural-chips svg.la-site-icon { width:11px; height:11px; color:#4fd0ff; }
.pw-neural-core {
  position:absolute; right:34px; top:50%; display:grid; place-items:center;
  width:112px; height:112px; border-radius:26px; transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(150deg, rgba(79,208,255,.28), rgba(37,99,235,.22));
  box-shadow:0 0 0 1px rgba(120,190,255,.35), 0 0 42px rgba(56,189,248,.35);
}
.pw-neural-core > svg.la-site-icon { width:44px; height:44px; color:#7fe3ff; transform:rotate(-45deg); }
.c-green { color:#12a04d; }

/* Overview — supplied artwork for the themes strip and the neural panel,
   plus the footer strip from the mockup. */
.pw-themes-art { display:block; width:100%; height:auto; margin-top:10px; }
.pw-neural { padding:0; border:0; background:none; box-shadow:none; overflow:hidden; border-radius:20px; }
.pw-neural > img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; border-radius:20px; }
.pw-neural::before { content:none; }

.pw-foot {
  position:absolute; left:16px; top:836px; width:1128px; height:70px;
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  border:1px solid #e9eef1; border-radius:16px; background:#fff;
  box-shadow:0 5px 16px rgba(23,48,74,.045);
}
.pw-foot > span { display:flex; align-items:center; justify-content:center; gap:10px; color:#1d2b3d; font-size:13px; font-weight:800; }
.pw-foot > span + span { border-left:1px solid #eef2f4; }
.pw-foot svg.la-site-icon { width:20px; height:20px; color:#12a04d; }
.pw-foot > span:nth-child(2) svg { color:#12a04d; }
.pw-foot > span:nth-child(3) svg { color:#5b6980; }
/* Overview — bottom-half rhythm: the footer strip was sitting on top of the
   integrations / reach / analytics row. Tighten the hero, lift the strip and
   give each band its own lane. */
.pw-hero { height:310px; }
.pw-strip { top:612px; height:88px; }
.pw-strip > span { padding:10px 13px; }
.pw-integrations,.pw-reach,.pw-analytics { top:712px; height:154px; }
.pw-integrations { gap:11px 12px; padding:13px; }
.pw-reach { gap:11px; padding:13px; }
.pw-analytics { padding:12px 14px; }
.pw-analytics .pw-area { height:48px; margin-top:6px; }
.pw-analytics .pw-kpis.small { margin-top:6px; }
.pw-analytics .pw-kpis.small > span { padding:6px 8px; }
.pw-neural { top:700px; height:166px; }
.pw-foot { top:878px; width:1634px; height:48px; }
.pw-foot > span { font-size:12.5px; }
.pw-foot svg.la-site-icon { width:18px; height:18px; }
/* Overview — trim the three cards whose content ran past their box
   (AI Assistant +46, hero +24, Live Analytics +31) */
.pw-ai { padding:14px; }
.pw-ai h4 { margin-top:9px; font-size:20px; }
.pw-ai .pw-pill { margin-top:7px; }
.pw-ai > p { margin-top:8px; font-size:11.5px; line-height:1.5; }
.pw-ai .pw-chips { margin-top:9px; gap:6px; }
.pw-ai .pw-chips > span { padding:6px 9px; font-size:10px; }
.pw-ai .pw-ico { width:34px; height:34px; }

.pw-hero { padding:17px 18px; }
.pw-hero h3 { margin-top:9px; font-size:25px; }
.pw-hero-sub { margin-top:5px; font-size:16px; }
.pw-hero .pw-chips { margin-top:11px; }
.pw-kpis { margin-top:12px; }
.pw-kpis > span { padding:8px 10px 20px; }
.pw-hero-right { gap:11px 12px; }

.pw-analytics .pw-area { height:40px; }
.pw-analytics header > b { font-size:13px; }
.pw-analytics .pw-kpis.small b { font-size:13px; }
/* Overview — last few px on AI Assistant (+12) and Live Analytics (+20) */
.pw-ai .pw-chips > span { padding:5px 8px; font-size:9.5px; gap:5px; }
.pw-ai > p { margin-top:7px; }
.pw-analytics .pw-kpis.small > span { padding:5px 7px; }
.pw-analytics .pw-kpis.small { gap:6px; margin-top:5px; }
.pw-analytics .pw-area { height:34px; margin-top:5px; }
.pw-analytics > header { gap:8px; }
/* Overview sits in .mockup-suite-grid, so it must span the full row like the
   other showpiece cards — otherwise it renders inside one narrow column. */
.bujji-overview-card { grid-column:1/-1; }
/* final 10px on Live Analytics */
.pw-analytics .pw-kpis.small em { display:none; }
.pw-analytics .pw-kpis.small b { margin-top:3px; }
.pw-ai .pw-chips { margin-top:8px; }
/* Overview — last 2px on AI Assistant, 1px on the hero */
.pw-ai > p { line-height:1.45; }
.pw-hero .pw-kpis { margin-top:11px; }

/* ==========================================================================
   Overview — de-stretch pass
   The source mockup was generated at 1664x941 (1.77:1) and everything in it is
   horizontally stretched: wide, short boxes with cramped type. Canvas grows to
   1664x1104 (1.51:1) and every band gets real height, so the cards read as
   designed instead of squashed.
   ========================================================================== */
.pw-canvas { height:1104px; margin-bottom:calc((var(--pws) - 1) * 1104px); }
@supports (scale: tan(atan2(1px, 1px))) {
  .pw-canvas { --pws:tan(atan2(100cqi, 1664px)); }
}

/* row 1 */
.pw-core   { top:16px; height:392px; padding:24px; }
.pw-ai     { top:16px; height:320px; padding:18px; }
.pw-themes { top:16px; height:300px; padding:18px; }
.pw-voice  { top:16px; height:320px; padding:18px; }

/* row 2 */
.pw-row:nth-of-type(1) { top:424px; height:118px; }
.pw-row-tall           { top:556px; height:138px; }
.pw-hero               { top:348px; height:346px; padding:22px 24px; }
.pw-mini   { top:352px; height:100px; padding:15px; }
.pw-mini-2 { top:466px; height:96px; }
.pw-mini-3 { top:576px; height:118px; }

/* strip */
.pw-strip { top:710px; height:110px; gap:12px; }
.pw-strip > span { padding:14px 16px; gap:3px 12px; }
.pw-strip svg.la-site-icon { width:34px; height:34px; padding:7px; border-radius:10px; }
.pw-strip b { font-size:12.5px; }
.pw-strip small { font-size:9.5px; }
.pw-strip em { font-size:12px; }

/* row 4 */
.pw-integrations { top:836px; height:190px; padding:18px; gap:16px 14px; }
.pw-reach        { top:836px; height:190px; padding:18px; gap:14px; }
.pw-analytics    { top:836px; height:190px; padding:16px 18px; }
.pw-neural       { top:826px; height:200px; }
.pw-foot         { top:1040px; height:50px; }

/* with real height the type can sit at its intended size again */
.pw-150 { margin-top:16px; font-size:66px; }
.pw-core h4 { font-size:29px; }
.pw-core > p { margin-top:15px; font-size:12.5px; }
.pw-free { top:16px; right:16px; width:214px; padding:15px; }
.pw-tmpl { margin-top:10px; padding:9px 10px; }
.pw-tmpl b { font-size:10px; }
.pw-tmpl small { font-size:9px; }

.pw-ai h4 { margin-top:12px; font-size:22px; }
.pw-ai > p { margin-top:10px; font-size:12.5px; line-height:1.55; }
.pw-ai .pw-chips { margin-top:13px; gap:7px; }
.pw-ai .pw-chips > span { padding:7px 11px; font-size:10.5px; }

.pw-themes h4 { font-size:22px; }
.pw-themes-art { margin-top:14px; }
.pw-themes > p { margin-top:16px; font-size:13px; }

.pw-voice h4 { margin-top:14px; font-size:18px; }
.pw-voice > small { margin-top:6px; font-size:11.5px; }
.pw-wave { height:70px; margin-top:18px; }
.pw-player { margin-top:18px; }

.pw-hero h3 { margin-top:12px; font-size:29px; }
.pw-hero-sub { margin-top:8px; font-size:18px; }
.pw-hero .pw-chips { margin-top:15px; }
.pw-hero .pw-kpis { margin-top:16px; }
.pw-kpis > span { padding:11px 12px 22px; }
.pw-kpis b { font-size:19px; }
.pw-hero-right { gap:15px 14px; }
.pw-hero-right b { font-size:12.5px; }
.pw-hero-right small { font-size:10px; }

.pw-integrations b { font-size:11.5px; }
.pw-integrations small { font-size:9.5px; }
.pw-reach b { font-size:14px; }
.pw-reach small { font-size:10px; }
.pw-analytics .pw-area { height:52px; margin-top:9px; }
.pw-analytics .pw-kpis.small { margin-top:9px; }
.pw-analytics .pw-kpis.small > span { padding:8px 10px; }
.pw-analytics .pw-kpis.small b { font-size:15px; }
.pw-foot > span { font-size:13.5px; }

/* Overview — bottom row was the shortest band on the canvas; extend it down
   so the integrations grid, reach cards, analytics chart and neural panel all
   get real breathing room. */
.pw-canvas { height:1156px; margin-bottom:calc((var(--pws) - 1) * 1156px); }
.pw-integrations,.pw-reach,.pw-analytics { top:836px; height:240px; }
.pw-neural { top:826px; height:250px; }
.pw-foot   { top:1090px; height:50px; }

/* use the extra height rather than leaving it empty */
.pw-integrations { padding:20px; gap:22px 16px; }
.pw-integrations svg.la-site-icon { width:30px; height:30px; padding:6px; border-radius:9px; }
.pw-integrations b { font-size:12.5px; }
.pw-integrations small { font-size:10px; line-height:1.45; }

.pw-reach { padding:20px; gap:16px; }
.pw-reach svg.la-site-icon { width:36px; height:36px; padding:8px; border-radius:11px; }
.pw-reach b { font-size:15px; }
.pw-reach small { font-size:10.5px; line-height:1.5; }

.pw-analytics { padding:18px 20px; }
.pw-analytics .pw-ico { width:36px; height:36px; }
.pw-analytics header > b { font-size:15px; }
.pw-analytics header > b small { font-size:10.5px; }
.pw-analytics .pw-area { height:84px; margin-top:12px; }
.pw-analytics .pw-kpis.small { margin-top:12px; }
.pw-analytics .pw-kpis.small > span { padding:10px 11px; }
.pw-analytics .pw-kpis.small b { font-size:16px; }
.pw-analytics .pw-kpis.small small { font-size:9.5px; }
/* Neural panel: the artwork is 2.75:1 but its slot is 1.96:1, so object-fit
   cover was slicing 28% off the right — taking "Privacy by Design" with it.
   Contain it instead, on a card painted the artwork's own background colour
   (its white corners are now transparent) so the fit is seamless. */
.pw-neural { background:#000918; }
.pw-neural > img { object-fit:contain; object-position:center; }
/* The artwork carries its own silhouette — including the concave curve on the
   left edge. Painting the card dark and rounding it squared that curve off.
   Transparent card, no clip: the panel's real shape shows. */
.pw-neural { background:transparent; border-radius:0; overflow:visible; box-shadow:none; }
.pw-neural > img { border-radius:0; }

/* Overview — row 4 reflow so the Neural panel matches its neighbours' height.
   The artwork is 2.752:1; in a 490x240 slot `contain` letterboxed it to 178
   tall, which is why it sat short next to Live Analytics. Widening it to 660
   makes the slot 2.75:1 — the artwork now fills edge to edge at full row
   height. The other three give up the width. */
.pw-integrations { left:16px;  width:364px; }
.pw-reach        { left:392px; width:248px; }
.pw-analytics    { left:652px; width:328px; }
.pw-neural       { left:990px; width:660px; top:836px; height:240px; }

/* analytics is narrower now, so tighten its internals to suit */
.pw-analytics { padding:16px; }
.pw-analytics > header { gap:9px; }
.pw-analytics .pw-ico { width:32px; height:32px; }
.pw-analytics header > b { font-size:14px; }
.pw-analytics header > b small { font-size:9.5px; }
.pw-select { padding:5px 8px; font-size:9.5px; }
.pw-analytics .pw-area { height:76px; margin-top:10px; }
.pw-analytics .pw-kpis.small { gap:6px; margin-top:10px; }
.pw-analytics .pw-kpis.small > span { padding:8px 7px; }
.pw-analytics .pw-kpis.small b { font-size:14px; }
.pw-analytics .pw-kpis.small small { font-size:8.5px; }

/* integrations + reach lose a little width — keep them legible */
.pw-integrations { padding:18px; gap:20px 12px; }
.pw-integrations b { font-size:11.5px; }
.pw-integrations small { font-size:9.5px; }
.pw-reach { padding:18px; gap:14px; }
.pw-reach b { font-size:14px; }
.pw-reach small { font-size:10px; }

/* Overview — Neural panel 10% narrower, the three cards on its left absorb the
   freed width. Row height follows the artwork's 2.752:1 ratio (594 wide needs
   216 tall) so the panel still fills edge to edge with no letterboxing, and all
   four cards keep one height and one baseline. */
.pw-integrations { left:16px;   width:390px; }
.pw-reach        { left:418px;  width:264px; }
.pw-analytics    { left:694px;  width:352px; }
.pw-neural       { left:1056px; width:594px; }
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:216px; }
.pw-foot { top:1066px; }
.pw-canvas { height:1132px; margin-bottom:calc((var(--pws) - 1) * 1132px); }

/* the extra width lets these breathe again */
.pw-integrations { padding:18px; gap:18px 14px; }
.pw-reach { padding:18px; gap:16px; }
.pw-analytics { padding:16px 18px; }
.pw-analytics header > b { font-size:14.5px; }
.pw-analytics .pw-area { height:66px; margin-top:9px; }
.pw-analytics .pw-kpis.small { margin-top:9px; gap:7px; }
.pw-analytics .pw-kpis.small > span { padding:7px 8px; }
.pw-analytics .pw-kpis.small b { font-size:14.5px; }

/* Overview — Neural panel down another 40px (594 -> 554). Its height follows
   the artwork's 2.752:1 ratio so it keeps filling edge to edge, and the three
   cards on its left take the freed width again. */
.pw-integrations { left:16px;   width:406px; }
.pw-reach        { left:434px;  width:274px; }
.pw-analytics    { left:720px;  width:366px; }
.pw-neural       { left:1096px; width:554px; }
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:201px; }
.pw-foot { top:1051px; }
.pw-canvas { height:1117px; margin-bottom:calc((var(--pws) - 1) * 1117px); }

/* row is 15px shorter — trim the internals to match */
.pw-integrations { padding:16px; gap:14px 14px; }
.pw-reach { padding:16px; gap:14px; }
.pw-reach svg.la-site-icon { width:32px; height:32px; padding:7px; }
.pw-reach b { font-size:13.5px; }
.pw-analytics { padding:15px 17px; }
.pw-analytics .pw-area { height:58px; margin-top:8px; }
.pw-analytics .pw-kpis.small { margin-top:8px; }
.pw-analytics .pw-kpis.small > span { padding:6px 8px; }

/* Overview — Neural panel down another 20% (554 -> 443). Row height follows
   the artwork ratio to 161px; the three cards on its left take the width and
   their internals compress to suit the shorter band. */
.pw-integrations { left:16px;   width:449px; }
.pw-reach        { left:477px;  width:303px; }
.pw-analytics    { left:792px;  width:405px; }
.pw-neural       { left:1207px; width:443px; }
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:161px; }
.pw-foot { top:1011px; }
.pw-canvas { height:1077px; margin-bottom:calc((var(--pws) - 1) * 1077px); }

/* 161px band: tighten every card's internals */
.pw-integrations { padding:14px 16px; gap:10px 16px; }
.pw-integrations svg.la-site-icon { width:26px; height:26px; padding:5px; }
.pw-integrations b { font-size:11px; }
.pw-integrations small { font-size:9px; line-height:1.35; }

.pw-reach { padding:14px 16px; gap:16px; }
.pw-reach > span { grid-template-columns:28px 1fr; align-content:start; gap:2px 10px; }
.pw-reach svg.la-site-icon { grid-row:1/3; width:28px; height:28px; padding:6px; }
.pw-reach b { font-size:12px; line-height:1.25; }
.pw-reach small { font-size:9px; line-height:1.35; }

.pw-analytics { padding:13px 16px; }
.pw-analytics .pw-ico { width:28px; height:28px; border-radius:9px; }
.pw-analytics .pw-ico > svg.la-site-icon { width:15px; height:15px; }
.pw-analytics header > b { font-size:13px; }
.pw-analytics header > b small { font-size:9px; margin-top:2px; }
.pw-analytics .pw-area { height:40px; margin-top:7px; }
.pw-analytics .pw-kpis.small { margin-top:7px; gap:6px; }
.pw-analytics .pw-kpis.small > span { padding:5px 7px; }
.pw-analytics .pw-kpis.small b { font-size:13px; margin-top:2px; }
.pw-analytics .pw-kpis.small small { font-size:8px; }

/* Overview — bottom row +5% height (161 -> 169). The Neural panel has to grow
   with it to keep its 2.752:1 shape and stay letterbox-free, so it takes back
   22px of width and the other three give it up. */
.pw-integrations { left:16px;   width:440px; }
.pw-reach        { left:468px;  width:297px; }
.pw-analytics    { left:777px;  width:398px; }
.pw-neural       { left:1185px; width:465px; }
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:169px; }
.pw-foot { top:1019px; }
.pw-canvas { height:1085px; margin-bottom:calc((var(--pws) - 1) * 1085px); }

/* spend the extra 8px on the internals */
.pw-integrations { padding:15px 16px; gap:12px 16px; }
.pw-integrations svg.la-site-icon { width:27px; height:27px; }
.pw-integrations b { font-size:11.5px; }
.pw-integrations small { font-size:9.5px; }
.pw-reach { padding:15px 16px; }
.pw-reach b { font-size:12.5px; }
.pw-reach small { font-size:9.5px; }
.pw-analytics { padding:14px 16px; }
.pw-analytics .pw-area { height:46px; margin-top:8px; }
.pw-analytics .pw-kpis.small { margin-top:8px; }
.pw-analytics .pw-kpis.small > span { padding:6px 8px; }
.pw-analytics .pw-kpis.small b { font-size:13.5px; }

/* Overview — bottom row set to 180px. Neural follows its 2.752:1 shape to
   495 wide so it stays letterbox-free; the other three take the remainder. */
.pw-integrations { left:16px;   width:428px; }
.pw-reach        { left:456px;  width:289px; }
.pw-analytics    { left:757px;  width:388px; }
.pw-neural       { left:1155px; width:495px; }
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:180px; }
.pw-foot { top:1030px; }
.pw-canvas { height:1096px; margin-bottom:calc((var(--pws) - 1) * 1096px); }

/* 180px band — give the content room again */
.pw-integrations { padding:16px; gap:15px 15px; }
.pw-integrations svg.la-site-icon { width:28px; height:28px; padding:6px; }
.pw-integrations b { font-size:11.5px; }
.pw-integrations small { font-size:9.5px; line-height:1.4; }
.pw-reach { padding:16px; gap:15px; }
.pw-reach svg.la-site-icon { width:30px; height:30px; }
.pw-reach b { font-size:13px; }
.pw-reach small { font-size:9.5px; line-height:1.4; }
.pw-analytics { padding:15px 17px; }
.pw-analytics .pw-ico { width:30px; height:30px; }
.pw-analytics header > b { font-size:13.5px; }
.pw-analytics .pw-area { height:54px; margin-top:9px; }
.pw-analytics .pw-kpis.small { margin-top:9px; }
.pw-analytics .pw-kpis.small > span { padding:7px 8px; }
.pw-analytics .pw-kpis.small b { font-size:14px; }

/* Overview — bottom row +10% height (180 -> 198), widths held exactly as they
   were. The Neural artwork is a fixed 2.752:1, so at 495 wide it paints 180
   tall and centres in the 198 slot — 9px of clear space top and bottom. */
.pw-integrations,.pw-reach,.pw-analytics,.pw-neural { top:836px; height:198px; }
.pw-foot { top:1048px; }
.pw-canvas { height:1114px; margin-bottom:calc((var(--pws) - 1) * 1114px); }

/* spend the extra 18px on the content */
.pw-integrations { padding:18px 16px; gap:18px 15px; }
.pw-integrations svg.la-site-icon { width:30px; height:30px; padding:6px; }
.pw-integrations b { font-size:12px; }
.pw-integrations small { font-size:10px; line-height:1.45; }
.pw-reach { padding:18px 16px; gap:16px; }
.pw-reach svg.la-site-icon { width:32px; height:32px; padding:7px; }
.pw-reach b { font-size:13.5px; }
.pw-reach small { font-size:10px; line-height:1.45; }
.pw-analytics { padding:16px 17px; }
.pw-analytics .pw-ico { width:32px; height:32px; }
.pw-analytics header > b { font-size:14px; }
.pw-analytics header > b small { font-size:9.5px; }
.pw-analytics .pw-area { height:66px; margin-top:10px; }
.pw-analytics .pw-kpis.small { margin-top:10px; }
.pw-analytics .pw-kpis.small > span { padding:8px 9px; }
.pw-analytics .pw-kpis.small b { font-size:14.5px; }
/* Live Analytics content ran a few px past its box after the growth */
.pw-analytics .pw-area { height:58px; }
.pw-analytics .pw-kpis.small > span { padding:7px 9px; }

/* ==========================================================================
   Overview — unified highlight strip:
   one continuous card divided by hairlines, icon left, title on a single line,
   description beneath with the value inline in green. Icons stay this card's
   own colour-coded icon set.
   ========================================================================== */
.pw-strip {
  display:grid; grid-template-columns:repeat(7,1fr); gap:0; overflow:hidden; height:102px;
  border:1px solid #edf0f4; border-radius:22px; background:rgba(255,255,255,.96);
  box-shadow:0 12px 35px rgba(38,55,49,.06);
}
.pw-strip > span {
  display:grid; grid-template-columns:44px 1fr; align-items:center;
  gap:0 12px; padding:14px 16px; border-right:1px solid #edf0f3;
  transition:background .25s ease, transform .25s var(--ease-spring);
}
.pw-strip > span:hover { background:rgba(255,255,255,1); }
.pw-strip > span:last-child { border-right:0; }

.pw-strip svg.la-site-icon,
.pw-integrations svg.la-site-icon {
  grid-row:1/3; width:40px; height:40px; padding:8.5px; border-radius:13px;
  stroke-width:2.2; transition:transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease, filter .3s ease;
  animation:pwIconGlow 4s ease-in-out infinite;
}

/* Colorful gradient palettes matching Core Power card */
.pw-strip svg.ic-green, .pw-integrations svg.ic-green   { color:#0ea34d; background:linear-gradient(135deg,#e8f9ee,#d5f7e1); border:1px solid rgba(14,163,77,.2); box-shadow:0 5px 15px rgba(14,163,77,.18); }
.pw-strip svg.ic-violet, .pw-integrations svg.ic-violet { color:#7c4ce4; background:linear-gradient(135deg,#f3ecfe,#e5d8fd); border:1px solid rgba(124,76,228,.2); box-shadow:0 5px 15px rgba(124,76,228,.18); }
.pw-strip svg.ic-blue, .pw-integrations svg.ic-blue     { color:#2563eb; background:linear-gradient(135deg,#eff6ff,#dbeafe); border:1px solid rgba(37,99,235,.2); box-shadow:0 5px 15px rgba(37,99,235,.18); }
.pw-strip svg.ic-amber, .pw-integrations svg.ic-amber   { color:#f59e0b; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid rgba(245,158,11,.2); box-shadow:0 5px 15px rgba(245,158,11,.18); }
.pw-strip svg.ic-cyan, .pw-integrations svg.ic-cyan     { color:#06b6d4; background:linear-gradient(135deg,#ecfeff,#cffafe); border:1px solid rgba(6,182,212,.2); box-shadow:0 5px 15px rgba(6,182,212,.18); }
.pw-strip svg.ic-indigo, .pw-integrations svg.ic-indigo { color:#6366f1; background:linear-gradient(135deg,#eef2ff,#e0e7ff); border:1px solid rgba(99,102,241,.2); box-shadow:0 5px 15px rgba(99,102,241,.18); }
.pw-strip svg.ic-pink, .pw-integrations svg.ic-pink     { color:#ec4899; background:linear-gradient(135deg,#fdf2f8,#fce7f3); border:1px solid rgba(236,72,153,.2); box-shadow:0 5px 15px rgba(236,72,153,.18); }

.pw-strip > span:nth-child(1) svg { animation-delay:0s; }
.pw-strip > span:nth-child(2) svg { animation-delay:.4s; }
.pw-strip > span:nth-child(3) svg { animation-delay:.8s; }
.pw-strip > span:nth-child(4) svg { animation-delay:1.2s; }
.pw-strip > span:nth-child(5) svg { animation-delay:1.6s; }
.pw-strip > span:nth-child(6) svg { animation-delay:2.0s; }
.pw-strip > span:nth-child(7) svg { animation-delay:2.4s; }

.pw-strip > span:hover svg.la-site-icon,
.pw-integrations > span:hover svg.la-site-icon {
  transform:translateY(-3px) scale(1.12) rotate(-5deg);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.1));
}

@keyframes pwIconGlow {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-2px) scale(1.06); }
}

.pw-strip b { display:block; color:#0b1730; font-size:12px; font-weight:850; line-height:1.25; letter-spacing:-.015em; }
.pw-strip small { display:block; margin-top:3.5px; color:#5b6b7d; font-size:9.5px; font-weight:550; line-height:1.35; }
.pw-strip em { color:#08ac4e; font-style:normal; font-weight:850; font-size:10px; }

/* ==========================================================================
   Overview — integrations card: a 2x2 grid with colorful animated icons
   ========================================================================== */
.pw-integrations {
  display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:0;
  border:1px solid #edf0f4; border-radius:22px; background:rgba(255,255,255,.96);
  box-shadow:0 12px 35px rgba(38,55,49,.06); overflow:hidden;
}
.pw-integrations > span {
  display:grid; grid-template-columns:44px 1fr; align-items:center; gap:0 12px;
  padding:17.6px; border-right:1px solid #edf0f3; border-bottom:1px solid #edf0f3;
  transition:background .25s ease, transform .25s var(--ease-spring);
}
.pw-integrations > span:hover { background:rgba(255,255,255,1); }
.pw-integrations > span:nth-child(even) { border-right:0; }
.pw-integrations > span:nth-child(n+3)  { border-bottom:0; }

.pw-integrations > span:nth-child(1) svg { animation-delay:0s; }
.pw-integrations > span:nth-child(2) svg { animation-delay:.6s; }
.pw-integrations > span:nth-child(3) svg { animation-delay:1.2s; }
.pw-integrations > span:nth-child(4) svg { animation-delay:1.8s; }

.pw-integrations b { display:block; color:#0b1730; font-size:12.5px; font-weight:850; line-height:1.25; letter-spacing:-.015em; }
.pw-integrations small { display:block; margin-top:3.5px; color:#5b6b7d; font-size:9.5px; font-weight:550; line-height:1.35; }

/* ==========================================================================
   Overview — Reach & Recover card: 2 columns divided by a center hairline,
   icon on top, properly aligned title and description below.
   ========================================================================== */
.pw-reach {
  display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0;
  border:1px solid #edf0f4; border-radius:22px; background:rgba(255,255,255,.96);
  box-shadow:0 12px 35px rgba(38,55,49,.06); overflow:hidden;
}
.pw-reach > span {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:20px 22px; border-right:1px solid #edf0f3;
  transition:background .25s ease, transform .25s var(--ease-spring);
}
.pw-reach > span:last-child {
  border-right:0;
}
.pw-reach > span:hover {
  background:rgba(255,255,255,1);
}
.pw-reach svg.la-site-icon {
  width:42px; height:42px; padding:9px; border-radius:13px; margin-bottom:12px;
  stroke-width:2.2; transition:transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease;
  animation:pwIconGlow 4s ease-in-out infinite;
}
.pw-reach svg.ic-amber {
  color:#f59e0b; background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid rgba(245,158,11,.2); box-shadow:0 5px 15px rgba(245,158,11,.18);
}
.pw-reach svg.ic-pink {
  color:#ec4899; background:linear-gradient(135deg,#fdf2f8,#fce7f3);
  border:1px solid rgba(236,72,153,.2); box-shadow:0 5px 15px rgba(236,72,153,.18);
  animation-delay:.8s;
}
.pw-reach > span:hover svg.la-site-icon {
  transform:translateY(-3px) scale(1.12) rotate(-5deg);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.1));
}
.pw-reach b {
  display:block; color:#0b1730; font-size:12.5px; font-weight:850; line-height:1.25; letter-spacing:-.015em; margin-bottom:4px;
}
.pw-reach small {
  display:block; color:#5b6b7d; font-size:9.5px; font-weight:550; line-height:1.35;
}

/* ==========================================================================
   Overview strip — clear the per-item card styling left over from my earlier
   version. Each item still carried border-radius / background / box-shadow, so
   every one rendered as its own rounded, shadowed card on top of the
   container: the curved separators and the double layer. Power Studio's items
   are flat, transparent, and divided by a single vertical hairline.
   ========================================================================== */
.pw-strip > span {
  border:0; border-right:1px solid #edf0f3;
  border-radius:0; background:transparent; box-shadow:none;
}
.pw-strip > span:last-child { border-right:0; }

/* ==========================================================================
   Overview footer — six flat items divided by vertical hairlines inside one
   rounded container, with green icons and slate text.
   ========================================================================== */
.pw-foot {
  display:grid; grid-template-columns:repeat(6,1fr); gap:0; overflow:hidden;
  border:1px solid #edf0f4; border-radius:19px; background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(38,55,49,.06);
}
.pw-foot > span {
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:0 10px; border-right:1px solid #e7ecef; border-bottom:0;
  color:#3d5273; font-size:10.5px; font-weight:600; text-align:center;
}
.pw-foot > span:last-child { border-right:0; }
.pw-foot svg.la-site-icon { flex:none; width:23px; height:23px; color:#0bad4e; }
/* compact footer proportions */
.pw-foot > span { font-size:9.8px; gap:10px; }
.pw-foot svg.la-site-icon { width:21.8px; height:21.8px; }

/* ==========================================================================
   Overview — the two wide rows split into a 2x2 of feature tiles.
   Positioned by explicit class, not :nth-of-type, because adding anchors
   would have reshuffled the right-rail mini cards that share that selector.
   New tiles cover two features the card was missing: the Bujji Map journey
   visualiser and campaign scheduling.
   ========================================================================== */
.pw-quad {
  display:flex; flex-direction:column; align-items:flex-start;
  width:231px; height:129px; padding:15px 16px;
  text-decoration:none; color:inherit;
  transition:transform .26s var(--ease-spring), border-color .22s ease, box-shadow .22s ease;
}
.pw-quad:hover { transform:translateY(-3px); border-color:#c8e6d5; box-shadow:0 14px 26px rgba(20,80,50,.10); }
.pw-q1 { left:16px;  top:424px; }
.pw-q2 { left:259px; top:424px; }
.pw-q3 { left:16px;  top:565px; }
.pw-q4 { left:259px; top:565px; }
.pw-quad .pw-ico { width:34px; height:34px; border-radius:11px; }
.pw-quad .pw-ico > svg.la-site-icon { width:17px; height:17px; }
.pw-quad > b {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:11px;
  font-size:13px; font-weight:850; line-height:1.25; letter-spacing:-.01em;
}
.pw-quad > small { margin-top:5px; color:#5b6b7d; font-size:10px; font-weight:550; line-height:1.45; }
.pw-quad .pw-pill.tiny { padding:2px 7px; font-size:8.5px; }

/* ==========================================================================
   Overview — right rail follows the same tile treatment as the 2x2: icon on
   top, title, description, no chevron. Three equal tiles filling the same
   y352-694 band the old rows occupied.
   ========================================================================== */
.pw-r1,.pw-r2,.pw-r3 { width:305px; height:106px; padding:15px 16px; }
.pw-r1 { left:1345px; top:352px; }
.pw-r2 { left:1345px; top:470px; }
.pw-r3 { left:1345px; top:588px; }
.pw-r1 > small,.pw-r2 > small,.pw-r3 > small { font-size:9.5px; }

/* ==========================================================================
   Overview — right rail becomes a 2x3 grid of tiles. Three more features the
   card was missing: Groups Management (#20), Desktop Engine Bridge (#30) and
   the Experience Library (#3). Tiles are half-width so type steps down a size.
   ========================================================================== */
.pw-r1,.pw-r2,.pw-r3,.pw-r4,.pw-r5,.pw-r6 {
  width:146px; height:106px; padding:13px;
}
.pw-r3,.pw-r6 { width:147px; }
.pw-r1 { left:1345px; top:352px; }
.pw-r2 { left:1503px; top:352px; }
.pw-r3 { left:1345px; top:470px; }
.pw-r4 { left:1503px; top:470px; }
.pw-r5 { left:1345px; top:588px; }
.pw-r6 { left:1503px; top:588px; }
.pw-r3 { left:1345px; } .pw-r6 { left:1503px; }
.pw-r1 .pw-ico,.pw-r2 .pw-ico,.pw-r3 .pw-ico,.pw-r4 .pw-ico,.pw-r5 .pw-ico,.pw-r6 .pw-ico {
  width:32px; height:32px; border-radius:10px;
}
.pw-r1 .pw-ico > svg.la-site-icon,.pw-r2 .pw-ico > svg.la-site-icon,.pw-r3 .pw-ico > svg.la-site-icon,
.pw-r4 .pw-ico > svg.la-site-icon,.pw-r5 .pw-ico > svg.la-site-icon,.pw-r6 .pw-ico > svg.la-site-icon {
  width:16px; height:16px;
}
.pw-r1 > b,.pw-r2 > b,.pw-r3 > b,.pw-r4 > b,.pw-r5 > b,.pw-r6 > b { margin-top:9px; font-size:12px; font-weight:850; line-height:1.22; letter-spacing:-.015em; }
.pw-r1 > small,.pw-r2 > small,.pw-r3 > small,.pw-r4 > small,.pw-r5 > small,.pw-r6 > small { margin-top:4px; font-size:9.5px; font-weight:550; line-height:1.35; color:#5b6b7d; }

/* ==========================================================================
   Overview hero — KPI row lifted out of the left column to span the full card,
   so seven metrics keep the same ~103px card width the four had. The two
   columns above it compress to make room.
   ========================================================================== */
.pw-hero { grid-template-columns:1fr 300px; grid-template-rows:auto auto; align-content:start; }
.pw-hero-left,.pw-hero-right { min-height:0; }
.pw-hero > .pw-kpis {
  grid-column:1 / -1; grid-row:2;
  grid-template-columns:repeat(7,1fr); gap:9px; margin-top:14px;
}
.pw-hero > .pw-kpis > span { padding:9px 10px 19px; }
.pw-hero > .pw-kpis small { font-size:9.5px; font-weight:550; color:#8d9aab; }
.pw-hero > .pw-kpis b { margin-top:3px; font-size:16px; font-weight:850; }
.pw-hero > .pw-kpis em { margin-top:2px; font-size:9.5px; font-weight:800; }
.pw-hero > .pw-kpis svg { right:8px; bottom:7px; width:42px; height:14px; }

/* the six feature items lose ~100px of height, so step their type down */
.pw-hero-right { align-content:start; gap:11px 12px; }
.pw-hero-right > .pw-proofread {
  grid-column:1 / -1;
  padding:8px 10px;
  border:1px solid #e9eef1;
  border-radius:9px;
  background:#f8fdfb;
}
.pw-hero-right > span { grid-template-columns:22px 1fr; gap:1px 8px; }
.pw-hero-right svg.la-site-icon { width:22px; height:22px; }
.pw-hero-right b { font-size:12px; font-weight:850; line-height:1.22; }
.pw-hero-right small { font-size:9.5px; font-weight:550; line-height:1.35; color:#5b6b7d; }

/* ==========================================================================
   Overview — the Core Power block and the four tiles below it become ONE card.
   A single shell paints the background; the pieces inside go transparent and
   are separated by hairlines instead of each carrying its own card.
   ========================================================================== */
.pw-left-shell {
  position:absolute; left:16px; top:16px; z-index:0;
  width:474px; height:678px;
  border:1px solid #e9eef1; border-radius:22px; background:#fff;
  box-shadow:0 5px 16px rgba(23,48,74,.045);
}

/* pieces sit on the shell, no card of their own */
.pw-core,.pw-q1,.pw-q2,.pw-q3,.pw-q4 {
  position:absolute; z-index:1;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.pw-core { left:16px; top:16px; width:474px; height:400px; }

/* 2x2 tiles fill the shell's lower half, divided by hairlines */
.pw-q1,.pw-q2,.pw-q3,.pw-q4 { width:237px; height:139px; padding:16px 18px; }
.pw-q1 { left:16px;  top:416px; border-top:1px solid #eef2f4; border-right:1px solid #eef2f4; }
.pw-q2 { left:253px; top:416px; border-top:1px solid #eef2f4; }
.pw-q3 { left:16px;  top:555px; border-top:1px solid #eef2f4; border-right:1px solid #eef2f4; }
.pw-q4 { left:253px; top:555px; border-top:1px solid #eef2f4; }
.pw-q1:hover,.pw-q2:hover,.pw-q3:hover,.pw-q4:hover {
  transform:none; box-shadow:none; background:rgba(34,189,99,.04);
}

/* ==========================================================================
   Overview — right column gets the same treatment: the voice card and the six
   tiles below share ONE shell, divided by hairlines instead of each being a
   card of its own.
   ========================================================================== */
.pw-right-shell {
  position:absolute; left:1345px; top:16px; z-index:0;
  width:305px; height:678px;
  border:1px solid #e9eef1; border-radius:22px; background:#fff;
  box-shadow:0 5px 16px rgba(23,48,74,.045);
}
.pw-voice,.pw-r1,.pw-r2,.pw-r3,.pw-r4,.pw-r5,.pw-r6 {
  position:absolute; z-index:1;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.pw-voice { left:1345px; top:16px; width:305px; height:336px; padding:20px; }

/* 2 x 3 tiles fill the shell's lower two-thirds */
.pw-r1,.pw-r2,.pw-r3,.pw-r4,.pw-r5,.pw-r6 { width:152px; height:114px; padding:14px; }
.pw-r2,.pw-r4,.pw-r6 { width:153px; }
.pw-r1 { left:1345px; top:352px; border-top:1px solid #eef2f4; border-right:1px solid #eef2f4; }
.pw-r2 { left:1497px; top:352px; border-top:1px solid #eef2f4; }
.pw-r3 { left:1345px; top:466px; border-top:1px solid #eef2f4; border-right:1px solid #eef2f4; }
.pw-r4 { left:1497px; top:466px; border-top:1px solid #eef2f4; }
.pw-r5 { left:1345px; top:580px; border-top:1px solid #eef2f4; border-right:1px solid #eef2f4; }
.pw-r6 { left:1497px; top:580px; border-top:1px solid #eef2f4; }
.pw-r1:hover,.pw-r2:hover,.pw-r3:hover,.pw-r4:hover,.pw-r5:hover,.pw-r6:hover {
  transform:none; box-shadow:none; background:rgba(34,189,99,.04);
}

/* ==========================================================================
   Overview — every card 10% narrower, heights untouched. The freed width
   becomes an even 96px margin either side, so the whole layout stays centred
   on the 1664 canvas.
   ========================================================================== */
/* top band */
.pw-left-shell  { left:96px;   width:427px; }
.pw-core        { left:96px;   width:427px; }
.pw-q1          { left:96px;   width:213px; }
.pw-q2          { left:309px;  width:214px; }
.pw-q3          { left:96px;   width:213px; }
.pw-q4          { left:309px;  width:214px; }
.pw-hero        { left:538px;  width:742px; grid-template-columns:1fr 270px; }
.pw-right-shell { left:1295px; width:274px; }
.pw-voice       { left:1295px; width:274px; }
.pw-r1,.pw-r3,.pw-r5 { left:1295px; width:137px; }
.pw-r2,.pw-r4,.pw-r6 { left:1432px; width:137px; }

/* full-width bars */
.pw-strip { left:96px; width:1473px; }
.pw-foot  { left:96px; width:1473px; }

/* bottom row, scaled into the same band */
.pw-integrations { left:96px;   width:385px; }
.pw-reach        { left:493px;  width:260px; }
.pw-analytics    { left:765px;  width:349px; }
.pw-neural       { left:1124px; width:445px; }

/* ==========================================================================
   Overview — fix overlaps introduced by the 10% width cut.
   .pw-ai and .pw-themes were never repositioned, so they still sat at their
   old coordinates and ran under the two shells. Both now sit in the same
   96-1569 band at -10% width, evenly spaced.
   ========================================================================== */
.pw-ai     { left:536px; width:292px; }
.pw-themes { left:841px; width:441px; }

/* hero: the narrower left column pushed the chips down into the KPI row.
   Compact the chips so row 1 fits its allocation again. */
.pw-hero h3 { font-size:23px; margin-top:8px; }
.pw-hero-sub { margin-top:5px; font-size:15px; }
.pw-hero .pw-chips { margin-top:10px; gap:6px; }
.pw-hero .pw-chips > span { padding:6px 9px; font-size:9.5px; gap:5px; }
.pw-hero .pw-chips svg.la-site-icon { width:11px; height:11px; }
.pw-hero > .pw-kpis { margin-top:10px; }

/* ==========================================================================
   Overview / Core Power — the narrower block left the copy running under the
   templates panel and a big void at the bottom. Paragraph is constrained to
   the real gap, the copy spreads down the block, and the templates panel now
   stretches to the full height instead of stopping 80px short.
   ========================================================================== */
.pw-core > p { max-width:165px; margin-top:32px; }
.pw-150 { margin-top:28px; }
.pw-core h4 { margin-top:6px; }

/* templates panel fills the block height, cards share the space evenly */
.pw-free {
  top:16px; bottom:16px; height:auto;
  display:flex; flex-direction:column;
}
.pw-free-head,.pw-free > small { flex:none; }
.pw-tmpl {
  flex:1; align-content:center; margin-top:10px;
  grid-template-columns:16px 1fr; align-items:center;
}

/* ==========================================================================
   Overview — reclaim the dead margins without stretching anything.
   The -10% cut left the whole layout centred in a 1664 canvas with ~96px of
   empty canvas on each side, so the card read as narrower than its siblings.
   Fix: keep every card's width byte-for-byte and redistribute — margins drop
   96 -> 24 and the gutters absorb the difference (13 -> 60 top, 12 -> 59
   bottom). Only the two full-width rails widen, because they ARE the edges.
   ========================================================================== */
.pw-left-shell,.pw-core,.pw-q1,.pw-q3 { left:24px; }
.pw-q2,.pw-q4                         { left:237px; }
.pw-ai                                { left:511px; }
.pw-hero                              { left:536px; }
.pw-themes                            { left:863px; }
.pw-right-shell,.pw-voice,
.pw-r1,.pw-r3,.pw-r5                  { left:1364px; }
.pw-r2,.pw-r4,.pw-r6                  { left:1501px; }

.pw-strip,.pw-foot { left:24px; width:1616px; }

.pw-integrations { left:24px;   }
.pw-reach        { left:468px;  }
.pw-analytics    { left:787px;  }
.pw-neural       { left:1195px; }

/* ==========================================================================
   Overview — kill the dead margins WITHOUT widening cards or gaps.
   Previous attempt pushed the slack into 60px gutters; too airy. Instead the
   canvas is cropped 1664 -> 1505 (exactly the content bounds at -10%) and the
   card's outer width is pinned to the same 1505/1664 ratio, so --pws is
   unchanged and every card renders at byte-identical size. Gutters return to
   13px. Net effect: the card box shrinks to hug its contents.
   ========================================================================== */
#bujjiOverview { width:calc(100% * 1505 / 1664); justify-self:center; }
.pw-canvas     { width:1505px; }

.pw-left-shell,.pw-core,.pw-q1,.pw-q3 { left:16px; }
.pw-q2,.pw-q4                         { left:229px; }
.pw-ai                                { left:456px; }
.pw-hero                              { left:456px; }
.pw-themes                            { left:761px; }
.pw-right-shell,.pw-voice,
.pw-r1,.pw-r3,.pw-r5                  { left:1215px; }
.pw-r2,.pw-r4,.pw-r6                  { left:1352px; }

.pw-strip,.pw-foot { left:16px; width:1473px; }

.pw-integrations { left:16px;   }
.pw-reach        { left:412px;  }
.pw-analytics    { left:683px;  }
.pw-neural       { left:1043px; }
@supports (scale: tan(atan2(1px, 1px))) {
  .pw-canvas { --pws:tan(atan2(100cqi, 1505px)); }
}

/* ==========================================================================
   Overview — restore the original 1664 canvas and full-width card.
   Both previous attempts (wide gutters, cropped canvas) are undone: cards keep
   their -10% widths and tight gaps, the card matches its siblings' width, and
   the leftover side margin is turned into a deliberate double-rule frame
   instead of being engineered away. See .pw-frame below.
   ========================================================================== */
#bujjiOverview { width:auto; justify-self:stretch; }
.pw-canvas     { width:1664px; }
@supports (scale: tan(atan2(1px, 1px))) {
  .pw-canvas { --pws:tan(atan2(100cqi, 1664px)); }
}

.pw-left-shell,.pw-core,.pw-q1,.pw-q3 { left:96px; }
.pw-q2,.pw-q4                         { left:309px; }
.pw-ai                                { left:536px; }
.pw-hero                              { left:538px; }
.pw-themes                            { left:841px; }
.pw-right-shell,.pw-voice,
.pw-r1,.pw-r3,.pw-r5                  { left:1295px; }
.pw-r2,.pw-r4,.pw-r6                  { left:1432px; }

.pw-strip,.pw-foot { left:96px; width:1473px; }

.pw-integrations { left:96px;   }
.pw-reach        { left:493px;  }
.pw-analytics    { left:765px;  }
.pw-neural       { left:1124px; }

/* the double rule: two hairlines per side, sitting in the empty margin.
   Vertical only — a horizontal rule at the same inset would cut through the
   content, since the band has almost no top/bottom margin to spare. */
#bujjiOverview { position:relative; }
#bujjiOverview .pw-frame {
  position:absolute; inset:26px 30px; pointer-events:none; z-index:0;
  border-left:1px solid rgba(23,48,74,.10);
  border-right:1px solid rgba(23,48,74,.10);
  border-radius:20px;
}
#bujjiOverview .pw-frame::before {
  content:''; position:absolute; inset:10px 12px;
  border-left:1px solid rgba(23,48,74,.055);
  border-right:1px solid rgba(23,48,74,.055);
  border-radius:14px;
}

/* ==========================================================================
   Overview — widen ONLY the edge cards into the side margin.
   Interior cards (ai, hero, themes, reach, analytics, q-grid) keep their exact
   widths and positions; only the first and last column of each row grows
   outward, 96 -> 62 on the left and 1569 -> 1603 on the right (+34 each side).
   Inner gaps are untouched: 13 / 13 / 10 / 12.
   The double rule moves outward to keep framing the new edge.
   ========================================================================== */
.pw-left-shell,.pw-core { left:62px; width:461px; }
.pw-q1,.pw-q3           { left:62px;  width:230px; }
.pw-q2,.pw-q4           { left:292px; width:231px; }

.pw-right-shell,.pw-voice { left:1295px; width:308px; }
.pw-r1,.pw-r3,.pw-r5      { left:1295px; width:154px; }
.pw-r2,.pw-r4,.pw-r6      { left:1449px; width:154px; }

.pw-strip,.pw-foot { left:62px; width:1541px; }

.pw-integrations { left:62px;   width:419px; }
.pw-neural       { left:1124px; width:479px; }

#bujjiOverview .pw-frame          { inset:26px 18px; border-radius:22px; }
#bujjiOverview .pw-frame::before  { inset:10px 10px; border-radius:16px; }

/* ==========================================================================
   Overview / Designs & Themes — fill the dead space under the paragraph.
   bujji-themes.webp carries ~40-58px of blank #fefefe padding on every side,
   so it rendered small (134px) with a 60px void beneath it. The art now bleeds
   to the card's full width and crops exactly that dead padding via cover, which
   buys real tile height (98 -> 117) without clipping a single theme. The card
   also drops 300 -> 320 so its bottom lines up with the AI Assistant card.
   ========================================================================== */
.pw-themes { height:320px; }
.pw-themes-art {
  display:block;
  width:calc(100% + 38px);
  margin:22px -19px 0;
  height:161px;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
}
.pw-themes > p { margin-top:30px; }
.pw-themes-art { max-width:none; }

/* ==========================================================================
   Themes art — stop clipping the outer tiles.
   The blank border in bujji-themes.webp is asymmetric (40px left, 57px right),
   but object-fit:cover crops evenly, so centring ate 47.5px per side and bit
   7.5px into the Glass tile on the left. object-position now biases the crop
   40.4% so each side removes only its own dead padding, minus a 4px safety
   margin. Nothing but blank pixels is discarded.
   ========================================================================== */
.pw-themes-art { height:160px; object-position:40.4% center; }

/* ==========================================================================
   AI Assistant chips — the row under Vector RAG was blank because .pw-chips
   is a wrapping flexbox and "Smart Templates" + "Live Translation" are too wide
   to pair up, so it broke 2/1/2. A fixed 2-column grid pairs them properly:
   3 even rows, no orphan cell. (The hero's 3-up grid already balances at 6.)
   ========================================================================== */
.pw-ai .pw-chips {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:start;
}
.pw-ai .pw-chips > span { justify-content:center; }
/* 2-up columns are only 123px wide in a 292px card, so every label wrapped to
   two lines and the grid overran the card. Tighten the chip box so each label
   fits on one line. */
.pw-ai .pw-chips > span {
  font-size:10.5px;
  padding:8px 7px;
  gap:5px;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.pw-ai .pw-chips > span .la-site-icon,
.pw-ai .pw-chips > span svg { width:12px; height:12px; flex:none; }
.pw-ai .pw-chips { row-gap:6px; margin-top:8px; }
/* Minimal tile was still being clipped: my first padding scan used a variance
   threshold that the near-white Minimal artwork fell under, so it reported 57px
   of blank on the right when the real figure is 34. Re-measured against the
   actual #fefefe background: padding is 36 left / 34 right. Crop now 32/30. */
.pw-themes-art { height:156px; object-position:51.6% center; }

/* ==========================================================================
   CORE POWER — motion package.
   Every element inside the left shell gets its own life: a scroll-scrubbed
   counter, ambient loops on the icons and leaf, staggered scroll entrances on
   the template rows and quad cards, and richer hover states.
   All CSS-only (no rAF), so it keeps running regardless of tab visibility.
   Entrance uses the `translate` property, never `transform`, so hover
   transforms compose on top instead of fighting the animation's fill state.
   ========================================================================== */
@property --pw-n { syntax:'<integer>'; initial-value:0; inherits:false; }

/* --- 1. 150+ counts up as it scrolls into view --------------------------- */
.pw-core .pw-150 {
  position:relative; color:transparent;
  counter-reset:pwn var(--pw-n);
  animation-name:pwCount; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,.84,.3,1);
  animation-timeline:view(); animation-range:entry 15% cover 38%;
}
.pw-core .pw-150::after {
  content:counter(pwn) "+";
  position:absolute; inset:0; color:#12a04d; white-space:nowrap;
}
@keyframes pwCount { from { --pw-n:0 } to { --pw-n:150 } }

/* --- 2. the sprout breathes ---------------------------------------------- */
.pw-core .pw-leaf {
  transform-origin:50% 100%; will-change:transform;
  animation:pwSway 4.6s ease-in-out infinite;
}
@keyframes pwSway {
  0%,100% { transform:rotate(-7deg) translateY(0)    scale(1) }
  35%     { transform:rotate(6deg)  translateY(-3px) scale(1.06) }
  70%     { transform:rotate(-3deg) translateY(-1px) scale(1.02) }
}

/* --- 3. the free-templates panel glows and catches a sheen --------------- */
.pw-free {
  position:absolute; overflow:clip;   /* clip, not hidden: hidden would create a
                                          scroll container and break the view()
                                          timelines on the rows inside. */
  animation:pwGlow 5.2s ease-in-out infinite;
}
@keyframes pwGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(18,160,77,0), 0 4px 14px rgba(18,160,77,.05);
            border-color:#a9e2c0 }
  50%     { box-shadow:0 0 0 4px rgba(18,160,77,.055), 0 8px 22px rgba(18,160,77,.11);
            border-color:#7fd3a6 }
}
.pw-free::after {
  content:''; position:absolute; top:0; bottom:0; width:42%;
  left:-55%; pointer-events:none; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62) 48%,transparent);
  animation:pwSheen 6.4s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes pwSheen { 0%,62% { left:-55% } 100% { left:118% } }

.pw-free-head > span { display:inline-block; transform-origin:50% 85%;
  animation:pwGift 3.4s ease-in-out infinite; }
@keyframes pwGift {
  0%,72%,100% { transform:rotate(0) scale(1) }
  78% { transform:rotate(-13deg) scale(1.12) }
  84% { transform:rotate(10deg)  scale(1.12) }
  90% { transform:rotate(-5deg)  scale(1.05) }
}
.pw-free-head em { background:linear-gradient(90deg,#12a04d,#6ee7a8,#12a04d);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  animation:pwShift 3.6s linear infinite; }
@keyframes pwShift { to { background-position:-220% 0 } }

/* --- 4. template rows slide in, staggered by scroll range ---------------- */
.pw-tmpl {
  opacity:0; translate:0 16px;
  animation-name:pwRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view(); animation-range:entry 18% cover 42%;
  transition:transform .24s cubic-bezier(.2,.9,.2,1), box-shadow .24s, border-color .24s;
}
.pw-tmpl:nth-of-type(2) { animation-range:entry 24% cover 48% }
.pw-tmpl:nth-of-type(3) { animation-range:entry 30% cover 54% }
@keyframes pwRise { to { opacity:1; translate:0 0 } }
.pw-tmpl:hover { transform:translateX(4px); border-color:#a9e2c0;
  box-shadow:0 6px 16px rgba(18,160,77,.12); }
.pw-tmpl > .la-site-icon { animation:pwTick 4.8s ease-in-out infinite; }
.pw-tmpl:nth-of-type(2) > .la-site-icon { animation-delay:.5s }
.pw-tmpl:nth-of-type(3) > .la-site-icon { animation-delay:1s }
@keyframes pwTick {
  0%,82%,100% { transform:scale(1) }
  88% { transform:scale(1.28) }
  94% { transform:scale(.96) }
}

/* --- 5. the four quad cards: staggered entrance + live icons ------------- */
.pw-quad {
  opacity:0; translate:0 18px;
  animation-name:pwRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view();
}
.pw-q1 { animation-range:entry 20% cover 44% }
.pw-q2 { animation-range:entry 26% cover 50% }
.pw-q3 { animation-range:entry 32% cover 56% }
.pw-q4 { animation-range:entry 38% cover 62% }

.pw-quad .pw-ico { position:relative; transition:transform .3s cubic-bezier(.2,.9,.2,1); }
.pw-quad .pw-ico::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1.5px solid currentColor; opacity:0; pointer-events:none;
  animation:pwHalo 3.2s ease-out infinite;
}
.pw-q2 .pw-ico::after { animation-delay:.8s }
.pw-q3 .pw-ico::after { animation-delay:1.6s }
.pw-q4 .pw-ico::after { animation-delay:2.4s }
@keyframes pwHalo {
  0%   { opacity:.5; transform:scale(1) }
  70%,100% { opacity:0; transform:scale(1.5) }
}
.pw-quad:hover .pw-ico { transform:translateY(-2px) scale(1.12) rotate(-6deg); }
.pw-quad:hover { transform:translateY(-3px); }

.pw-quad .pw-pill.tiny { animation:pwNew 2.6s ease-in-out infinite; }
@keyframes pwNew {
  0%,100% { box-shadow:0 0 0 0 rgba(18,160,77,.35) }
  55%     { box-shadow:0 0 0 5px rgba(18,160,77,0) }
}

@media (prefers-reduced-motion: reduce) {
  .pw-core .pw-leaf, .pw-free, .pw-free::after, .pw-free-head > span,
  .pw-free-head em, .pw-tmpl > .la-site-icon, .pw-quad .pw-ico::after,
  .pw-quad .pw-pill.tiny { animation:none !important }
  .pw-tmpl, .pw-quad { opacity:1 !important; translate:none !important }
}
/* The card was overflow:hidden, which makes it a scroll container — every
   view() timeline inside it would resolve against that box instead of the
   viewport and never progress, leaving the animated children stuck invisible.
   clip clips identically without creating a scrollport. */
#bujjiOverview { overflow:clip; }

/* ==========================================================================
   Fail-safe for the scroll-driven entrances.
   Previously the hidden state was a base declaration (opacity:0) and only the
   animation could undo it — so if the ViewTimeline ever went inactive (unsupported
   browser, a scroll-container ancestor, print), the cards stayed invisible forever.
   Now the base state is fully VISIBLE and the hidden state lives in the keyframes'
   from-step, applied via fill backwards only while the timeline is actually live.
   Inactive timeline == cards simply render normally. Same for the counter, whose
   @property initial-value is the final number, not zero.
   ========================================================================== */
@property --pw-n { syntax:'<integer>'; initial-value:150; inherits:false; }

.pw-tmpl, .pw-quad { opacity:1; translate:none; }
@keyframes pwRise  { from { opacity:0; translate:0 16px } to { opacity:1; translate:0 0 } }
@keyframes pwRiseQ { from { opacity:0; translate:0 18px } to { opacity:1; translate:0 0 } }
.pw-quad { animation-name:pwRiseQ; }

/* ==========================================================================
   Overview / Designs & Themes — six interactive theme tiles with a spring lift
   and green border on hover/active. Metrics retain the reference tile aspect
   0.556, gap 2.9%) so it reads identically at our larger card size.
   Bonus: nothing can be cropped any more — there is no bitmap to crop.
   ========================================================================== */
.pw-theme-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:13px; margin-top:20px;
}
.pw-theme-grid button { padding:0; border:0; background:transparent; cursor:pointer; }
.pw-theme-grid i {
  position:relative; display:block; height:101px;
  overflow:hidden; border:2px solid transparent; border-radius:14px;
  background:#fff; box-shadow:0 6px 14px rgba(27,42,36,.09);
  transition:.3s var(--ease-spring);
}
.pw-theme-grid b { display:block; margin-top:8px; font-size:10px; font-weight:700; }

/* the six themes — identical gradients to Power Studio */

/* Power Studio's exact lift */
.pw-theme-grid button:hover i,
.pw-theme-grid button.active i {
  transform:translateY(-6px); border-color:#56d383;
  box-shadow:0 12px 24px rgba(22,174,83,.17);
  animation:none;
}
.pw-theme-grid button:hover b,
.pw-theme-grid button.active b { color:#0b8f45; }

/* ambient wave: each tile takes the lifted state in turn, so the row stays
   alive on its own. Any hover, or the first click, hands control back over. */
.pw-theme-grid i { animation:pwThemeWave 7.2s ease-in-out infinite; }
.pw-theme-grid button:nth-child(2) i { animation-delay:1.2s }
.pw-theme-grid button:nth-child(3) i { animation-delay:2.4s }
.pw-theme-grid button:nth-child(4) i { animation-delay:3.6s }
.pw-theme-grid button:nth-child(5) i { animation-delay:4.8s }
.pw-theme-grid button:nth-child(6) i { animation-delay:6.0s }
.pw-theme-grid.is-manual i { animation:none; }
@keyframes pwThemeWave {
  0%,22%,100% { transform:translateY(0); border-color:transparent;
                box-shadow:0 6px 14px rgba(27,42,36,.09) }
  6%,15%      { transform:translateY(-6px); border-color:#56d383;
                box-shadow:0 12px 24px rgba(22,174,83,.17) }
}
@media (prefers-reduced-motion: reduce) { .pw-theme-grid i { animation:none } }
/* PS's tile aspect (0.556) leaves 74px empty in our taller card, so the tiles
   run taller here — 0.42, closer to a phone screen, which is what they depict. */
.pw-theme-grid i { height:135px; }

/* ==========================================================================
   Theme tiles — real artwork, not hand-rolled gradients.
   Earlier absolute-pixel gradients smeared into blurry bands. The six tiles are now
   sliced straight out of bujji-themes.webp (cols detected per-tile, rows 42-248,
   label band excluded) and set as backgrounds at their true 0.72 aspect, so
   nothing is stretched and nothing is cropped. The Power Studio lift animation
   is untouched.
   ========================================================================== */
.pw-theme-grid { gap:8px; padding:0 14px; margin-top:50px; }
.pw-theme-grid i {
  height:auto; aspect-ratio:62.2 / 86.3;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pw-theme-grid button:nth-child(1) i { background-image:url("theme-glass.webp") }
.pw-theme-grid button:nth-child(2) i { background-image:url("theme-soft.webp") }
.pw-theme-grid button:nth-child(3) i { background-image:url("theme-ocean.webp") }
.pw-theme-grid button:nth-child(4) i { background-image:url("theme-amoled.webp") }
.pw-theme-grid button:nth-child(5) i { background-image:url("theme-neon.webp") }
.pw-theme-grid button:nth-child(6) i { background-image:url("theme-minimal.webp") }
.pw-themes > p { margin-top:50px; }
/* Belt-and-braces: put size/position at the same specificity as the image rules
   so no shorthand elsewhere can reset background-size to auto again. */
.pw-theme-grid button:nth-child(1) i,.pw-theme-grid button:nth-child(2) i,
.pw-theme-grid button:nth-child(3) i,.pw-theme-grid button:nth-child(4) i,
.pw-theme-grid button:nth-child(5) i,.pw-theme-grid button:nth-child(6) i {
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* ==========================================================================
   BUJJI AI PRICING — new card below Core Power / Overview.
   Laid out on a fixed 1673x941 design canvas (the mockup's own pixel grid) and
   scaled to the card with the same tan(atan2()) trick as the other cards, so
   the proportions are exact at any width. Existing #pricing section untouched.
   ========================================================================== */
.bujji-pricing-card {
  container-type:inline-size; position:relative; overflow:clip;
  border-radius:26px; background:#fff;
  border:1px solid #eef1f5; box-shadow:0 6px 22px rgba(23,48,74,.05);
}
.bp-canvas {
  --bps:1; position:relative; width:1673px; height:970px;
  transform:scale(var(--bps)); transform-origin:top left;
  margin-bottom:calc((var(--bps) - 1) * 970px);
  padding:24px 0 0; text-align:center;
  background:
    radial-gradient(660px 420px at 8% 4%,  rgba(99,102,241,.055), transparent 70%),
    radial-gradient(680px 460px at 94% 82%, rgba(18,160,77,.06),  transparent 72%),
    #fdfefe;
}
@supports (scale: tan(atan2(1px, 1px))) {
  .bp-canvas { --bps:tan(atan2(100cqi, 1673px)); }
}

/* ---- head ---------------------------------------------------------------- */
.bp-eyebrow {
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 22px;
  border-radius:999px; background:#eafaf0; color:#0f8f45;
  font-size:12px; font-weight:800; letter-spacing:.025em; text-transform:none;
}
.bp-eyebrow .la-site-icon { width:15px; height:15px; }
.bp-title {
  margin:16px 0 0; font-size:52px; font-weight:800;
  letter-spacing:-.035em; line-height:1.08; color:#0d1524;
}
.bp-title em { font-style:normal; color:#16a34a; }
.bp-sub { margin:10px 0 0; font-size:18px; color:#5f7085; }

/* ---- billing toggle ------------------------------------------------------ */
.bp-toggle {
  position:relative; display:inline-flex; align-items:center; gap:4px;
  margin-top:20px; padding:5px 5px 5px 5px; border-radius:999px;
  border:1px solid #e7eef3; background:#fff;
  box-shadow:0 6px 16px rgba(23,48,74,.06);
}
.bp-toggle button {
  position:relative; z-index:1; height:42px; padding:0 30px; border:0;
  border-radius:999px; background:transparent; cursor:pointer;
  color:#42536b; font-size:16px; font-weight:750;
  transition:color .28s var(--ease-spring);
}
.bp-toggle button.active { color:#fff; }
/* sliding pill sits behind the labels */
.bp-toggle::before {
  content:''; position:absolute; top:5px; left:5px; height:42px; width:var(--bp-pill-w,131px);
  border-radius:999px; background:#16a34a; z-index:0;
  transform:translateX(var(--bp-pill-x,0));
  transition:transform .38s var(--ease-spring), width .38s var(--ease-spring);
  box-shadow:0 5px 14px rgba(22,163,74,.32);
}
.bp-save { margin:0 16px 0 10px; color:#16a34a; font-size:14px; font-weight:800; font-style:normal; }

/* ---- plan grid ----------------------------------------------------------- */
.bp-grid {
  display:grid; grid-template-columns:266px 266px 266px 266px 279px;
  gap:25px; justify-content:center; align-items:stretch; margin-top:32px;
}
.bp-plan {
  position:relative; display:flex; flex-direction:column; text-align:center;
  padding:26px 24px; border:1px solid #ecf0f4; border-radius:20px; background:#fff;
  box-shadow:0 4px 16px rgba(23,48,74,.045);
  transition:transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.bp-plan.is-popular {
  margin-top:-17px; padding-top:56px;
  border:2px solid #4ade80; border-radius:22px;
  background:linear-gradient(180deg,#f1fdf6 0%,#fff 46%);
  box-shadow:0 14px 34px rgba(22,163,74,.14);
}
.bp-badge {
  position:absolute; top:0; left:0; right:0; height:32px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:20px 20px 0 0; background:linear-gradient(90deg,#16a34a,#22c55e);
  color:#fff; font-size:12px; font-weight:850; letter-spacing:.1em; overflow:hidden;
}
.bp-badge .la-site-icon { width:13px; height:13px; }
.bp-plan-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin:0 auto; border-radius:50%;
  background:#eafaf0; color:#12a04d; position:relative;
  transition:transform .3s var(--ease-spring);
}
.bp-plan-ico .la-site-icon { width:22px; height:22px; }
.bp-plan h4 { margin:14px 0 0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0d1524; }
.bp-plan.is-popular h4 { color:#12a04d; }
.bp-price { display:flex; align-items:baseline; justify-content:center; gap:7px; margin:8px 0 0; }
.bp-price b { font-size:44px; font-weight:800; letter-spacing:-.04em; color:#0d1524; }
.bp-price small { font-size:16px; font-weight:600; color:#6b7b90; }
.bp-desc { margin:14px 0 0; font-size:15px; line-height:1.55; color:#5f7085; }
.bp-feats {
  list-style:none; margin:20px 0 0; padding:20px 0 0; border-top:1px solid #eef1f4;
  display:grid; gap:13px; text-align:left;
}
.bp-feats li { display:flex; align-items:center; gap:9px; font-size:14px; color:#33415a; }
.bp-feats .la-site-icon { width:15px; height:15px; color:#16a34a; flex:none; }
.bp-cta {
  display:flex; align-items:center; justify-content:center; height:48px;
  margin-top:auto; padding-top:0; border:1.5px solid #dbe7e0; border-radius:12px;
  color:#12a04d; font-size:15px; font-weight:800; text-decoration:none;
  transition:background .26s, color .26s, border-color .26s, transform .26s var(--ease-spring);
}
.bp-feats + .bp-cta { margin-top:24px; }
.bp-cta:hover { background:#eafaf0; border-color:#8fdcb0; transform:translateY(-2px); }
.bp-plan.is-popular .bp-cta {
  border-color:transparent; background:linear-gradient(90deg,#16a34a,#22c55e); color:#fff;
  box-shadow:0 8px 20px rgba(22,163,74,.3);
}
.bp-plan.is-popular .bp-cta:hover { filter:brightness(1.06); }
.bp-plan:hover { transform:translateY(-6px); border-color:#bfe9d1; box-shadow:0 16px 34px rgba(23,48,74,.1); }
.bp-plan.is-popular:hover { transform:translateY(-6px); box-shadow:0 20px 42px rgba(22,163,74,.2); }
.bp-plan:hover .bp-plan-ico { transform:scale(1.12) rotate(-7deg); }

/* ---- assurance bar ------------------------------------------------------- */
.bp-assure {
  display:flex; align-items:center; justify-content:center; gap:44px;
  width:928px; height:46px; margin:22px auto 0;
  border:1px solid #edf1f5; border-radius:14px; background:#fff;
  box-shadow:0 4px 14px rgba(23,48,74,.04);
}
.bp-assure span { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#46566d; }
.bp-assure .la-site-icon { width:16px; height:16px; color:#7c8aa0; }

/* ==========================================================================
   PRICING — motion.
   Same fail-safe contract as Core Power: base state is fully VISIBLE and the
   hidden state lives only in the keyframes' from-step, so an inactive
   ViewTimeline renders the card normally instead of leaving it blank.
   ========================================================================== */
@keyframes bpRise { from { opacity:0; translate:0 22px } to { opacity:1; translate:0 0 } }

.bp-eyebrow,.bp-title,.bp-sub,.bp-toggle,.bp-plan,.bp-assure {
  opacity:1; translate:none;
  animation-name:bpRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view();
}
.bp-eyebrow { animation-range:entry 6%  cover 24% }
.bp-title   { animation-range:entry 10% cover 28% }
.bp-sub     { animation-range:entry 14% cover 32% }
.bp-toggle  { animation-range:entry 18% cover 36% }
.bp-plan:nth-child(1) { animation-range:entry 22% cover 42% }
.bp-plan:nth-child(2) { animation-range:entry 26% cover 46% }
.bp-plan:nth-child(3) { animation-range:entry 30% cover 50% }
.bp-plan:nth-child(4) { animation-range:entry 34% cover 54% }
.bp-plan:nth-child(5) { animation-range:entry 38% cover 58% }
.bp-assure  { animation-range:entry 44% cover 66% }

/* the popular card breathes so the eye lands on it */
.bp-plan.is-popular::after {
  content:''; position:absolute; inset:-2px; border-radius:22px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.42);
  animation:bpPulse 3.4s ease-out infinite;
}
@keyframes bpPulse {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.34) }
  70%,100% { box-shadow:0 0 0 16px rgba(34,197,94,0) }
}
/* light sweeps across the MOST POPULAR ribbon */
.bp-badge::after {
  content:''; position:absolute; top:0; bottom:0; left:-45%; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  animation:bpSheen 4.6s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes bpSheen { 0%,58% { left:-45% } 100% { left:112% } }

/* plan icons ripple around the row */
.bp-plan-ico::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; pointer-events:none;
  animation:bpHalo 3.6s ease-out infinite;
}
.bp-plan:nth-child(2) .bp-plan-ico::after { animation-delay:.6s }
.bp-plan:nth-child(3) .bp-plan-ico::after { animation-delay:1.2s }
.bp-plan:nth-child(4) .bp-plan-ico::after { animation-delay:1.8s }
.bp-plan:nth-child(5) .bp-plan-ico::after { animation-delay:2.4s }
@keyframes bpHalo { 0% { opacity:.55; transform:scale(1) } 70%,100% { opacity:0; transform:scale(1.55) } }

/* price flips when the billing cycle changes */
.bp-price b { display:inline-block; }
.bp-price b.is-flipping { animation:bpFlip .42s cubic-bezier(.2,.85,.25,1); }
@keyframes bpFlip {
  0%   { opacity:1; transform:translateY(0) }
  45%  { opacity:0; transform:translateY(-14px) }
  46%  { opacity:0; transform:translateY(14px) }
  100% { opacity:1; transform:translateY(0) }
}

/* assurance icons tick over one at a time */
.bp-assure span .la-site-icon { animation:bpTick 5.4s ease-in-out infinite; }
.bp-assure span:nth-child(2) .la-site-icon { animation-delay:.7s }
.bp-assure span:nth-child(3) .la-site-icon { animation-delay:1.4s }
.bp-assure span:nth-child(4) .la-site-icon { animation-delay:2.1s }
@keyframes bpTick {
  0%,84%,100% { transform:scale(1); color:#7c8aa0 }
  90% { transform:scale(1.22); color:#16a34a }
}

@media (prefers-reduced-motion: reduce) {
  .bp-plan.is-popular::after,.bp-badge::after,.bp-plan-ico::after,
  .bp-assure span .la-site-icon { animation:none !important }
  .bp-eyebrow,.bp-title,.bp-sub,.bp-toggle,.bp-plan,.bp-assure {
    opacity:1 !important; translate:none !important }
}
/* span the full suite grid, like #bujjiOverview */
#bujjiPricing { grid-column:1 / -1; }

/* Trim the plan cards to the mockup's 508px column height. The tallest plan
   (5 features) drove every card to 580 via align-items:stretch — the excess was
   mostly default line-height on the 44px price (70px tall for a 44px number). */
.bp-plan { padding:22px 24px; }
.bp-plan.is-popular { padding-top:52px; }
.bp-plan-ico { width:42px; height:42px; }
.bp-plan h4 { margin-top:12px; line-height:1.15; }
.bp-price { margin-top:6px; line-height:1; }
.bp-price b { line-height:1; }
.bp-desc { margin-top:12px; }
.bp-feats { margin-top:16px; padding-top:16px; gap:11px; }
.bp-feats + .bp-cta { margin-top:18px; }

/* ==========================================================================
   COMPARE PLANS — button beside the billing toggle + Plan Matrix modal.
   The <dialog> is mounted at body level, NOT inside .bp-canvas: the canvas is
   transform:scale()d, and a scaled ancestor would drag the modal's size and
   position with it. At body level it sits in the top layer at true 1:1 px.
   ========================================================================== */
.bp-cycle-row { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; }
.bp-cycle-row .bp-toggle { margin-top:0; }
/* never let the flex row squeeze the toggle (it collapsed to ~40px and the labels spilled out) */
.bp-cycle-row > .bp-toggle, .bp-cycle-row > .bp-compare, .bp-cycle-row > .bp-save { flex:none; }
.bp-toggle button { white-space:nowrap; flex:none; }
/* Billing toggle: the active button paints its own green pill. The old
   absolutely-positioned ::before pill could drift away from the buttons
   (and the box collapse around them) in some Chrome layouts. */
.bp-cycle-row > .bp-toggle {
  display:inline-flex !important; align-items:center; gap:2px;
  width:auto !important; height:auto !important; min-height:54px; padding:5px !important;
  box-sizing:border-box; flex:none;
}
.bp-cycle-row > .bp-toggle::before { display:none !important; }
.bp-cycle-row > .bp-toggle > button {
  flex:none; min-width:96px; height:42px; padding:0 20px !important; white-space:nowrap;
  border-radius:999px; background:transparent;
  transition:background-color .28s ease, color .28s ease, box-shadow .28s ease;
}
.bp-cycle-row > .bp-toggle > button.active {
  background:#16a34a; color:#fff; box-shadow:0 5px 14px rgba(22,163,74,.32);
}

.bp-compare {
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px;
  border:2px solid #4ade80; border-radius:999px; background:#fff; cursor:pointer;
  color:#0d1524; font-size:16px; font-weight:800;
  box-shadow:0 6px 16px rgba(22,163,74,.12);
  transition:transform .28s var(--ease-spring), box-shadow .28s, background .28s;
}
.bp-compare .la-site-icon { width:18px; height:18px; color:#16a34a; }
.bp-compare:hover { transform:translateY(-2px); background:#f4fdf8; box-shadow:0 12px 24px rgba(22,163,74,.2); }

/* ---- modal --------------------------------------------------------------- */
.bp-matrix {
  width:min(1120px, 94vw); max-height:88vh; padding:0; border:0; overflow:hidden;
  border-radius:22px; background:#fff; color:#0d1524;
  box-shadow:0 40px 90px rgba(12,26,45,.3);
}
.bp-matrix::backdrop { background:rgba(11,22,38,.55); backdrop-filter:blur(4px); }
.bp-matrix[open] { animation:bpModalIn .34s cubic-bezier(.2,.85,.25,1); }
.bp-matrix[open]::backdrop { animation:bpFadeIn .34s ease both; }
@keyframes bpModalIn { from { opacity:0; transform:translateY(18px) scale(.97) } to { opacity:1; transform:none } }
@keyframes bpFadeIn  { from { opacity:0 } to { opacity:1 } }
.bp-matrix.is-closing { animation:bpModalOut .2s ease forwards; }
@keyframes bpModalOut { to { opacity:0; transform:translateY(10px) scale(.985) } }

.bp-matrix-in { display:flex; flex-direction:column; max-height:88vh; }
.bp-matrix-head {
  display:flex; align-items:center; gap:20px; flex:none;
  padding:22px 26px; border-bottom:1px solid #eef1f5;
}
.bp-matrix-eyebrow {
  display:inline-block; padding:5px 13px; border-radius:999px;
  background:#f2f4f7; color:#46566d; font-size:12px; font-weight:800;
}
.bp-matrix-head h4 { margin:9px 0 0; font-size:26px; font-weight:800; letter-spacing:-.03em; }
.bp-matrix-note { margin:0 0 0 auto; color:#6b7b90; font-size:13px; text-align:right; }
.bp-matrix-x {
  flex:none; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e7ecf2; border-radius:11px; background:#fff; cursor:pointer; color:#42536b;
  transition:background .22s, color .22s, transform .22s var(--ease-spring);
}
.bp-matrix-x .la-site-icon { width:18px; height:18px; }
.bp-matrix-x:hover { background:#fdeeee; color:#d6455b; transform:rotate(90deg); }

.bp-matrix-scroll { overflow:auto; -webkit-overflow-scrolling:touch; }
.bp-matrix table { width:100%; border-collapse:collapse; font-size:13.5px; }
.bp-matrix thead th {
  position:sticky; top:0; z-index:2; padding:14px 16px; text-align:left;
  background:#fff; border-bottom:1px solid #e9edf2; font-weight:800; white-space:nowrap;
}
.bp-matrix tbody th {
  position:sticky; left:0; z-index:1; padding:13px 16px; text-align:left;
  background:#fff; font-weight:750; color:#16233a; white-space:nowrap;
}
.bp-matrix thead th:first-child { z-index:3; }
.bp-matrix td { padding:13px 16px; color:#42536b; white-space:nowrap; }
.bp-matrix tbody tr { border-bottom:1px solid #f1f4f8; }
.bp-matrix tbody tr:last-child { border-bottom:0; }
.bp-matrix tbody tr:hover th,
.bp-matrix tbody tr:hover td { background:#f7fbf9; }
.bp-yes,.bp-no {
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-style:normal; font-size:12px; font-weight:800;
}
.bp-yes { background:#e7f8ee; color:#0f8f45; }
.bp-no  { background:#fdecec; color:#d6455b; }

@media (max-width:720px) {
  .bp-cycle-row { flex-wrap:wrap; }
  .bp-matrix-head { flex-wrap:wrap; }
  .bp-matrix-note { margin-left:0; text-align:left; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-matrix[open],.bp-matrix[open]::backdrop,.bp-matrix.is-closing { animation:none !important }
}
/* A site reset zeroes margins globally, which killed the UA stylesheet's
   `dialog { margin:auto }`. With inset:0 on all four sides that pinned the modal
   to the top-left. Restoring auto margins re-centres it on both axes. */
.bp-matrix { position:fixed; inset:0; margin:auto !important; }

/* ==========================================================================
   LEGAL SUITE — Privacy Policy + Terms of Service.
   A reading UI rather than a wall of text: segmented doc switcher, sticky
   numbered contents with scroll-spy, a reading-progress rail, and typed blocks
   (definition rows, data tables, capitalised legal notices, contact card).
   ========================================================================== */
.legal-suite {
  position:relative;
  background:
    radial-gradient(760px 460px at 6% 2%, rgba(99,102,241,.05), transparent 70%),
    radial-gradient(720px 480px at 96% 96%, rgba(18,160,77,.055), transparent 72%),
    #fbfdfe;
}
.lg-head { text-align:center; max-width:760px; margin:0 auto; }
.lg-eyebrow {
  display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 20px;
  border-radius:999px; background:#eafaf0; color:#0f8f45;
  font-size:12px; font-weight:800; letter-spacing:.15em;
}
.lg-eyebrow .la-site-icon { width:15px; height:15px; }
.lg-head h2 { margin:22px 0 0; font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-.035em; color:#0d1524; }
.lg-head h2 em { font-style:normal; color:#16a34a; }
.lg-sub { margin:16px auto 0; max-width:620px; color:#5f7085; font-size:17px; line-height:1.6; }

.lg-switch-row { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:30px; }
.lg-switch {
  position:relative; display:inline-flex; gap:4px; padding:5px;
  border:1px solid #e7eef3; border-radius:999px; background:#fff;
  box-shadow:0 6px 16px rgba(23,48,74,.06);
}
.lg-switch button {
  position:relative; z-index:1; height:44px; padding:0 26px; border:0; border-radius:999px;
  background:transparent; cursor:pointer; color:#42536b; font-size:15px; font-weight:750;
  transition:color .28s var(--ease-spring);
}
.lg-switch button.active { color:#fff; }
.lg-switch::before {
  content:''; position:absolute; top:5px; left:5px; z-index:0; height:44px;
  width:var(--lg-pill-w,160px); transform:translateX(var(--lg-pill-x,0));
  border-radius:999px; background:#16a34a; box-shadow:0 5px 14px rgba(22,163,74,.3);
  transition:transform .38s var(--ease-spring), width .38s var(--ease-spring);
}
.lg-updated {
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1px solid #e9eef3; border-radius:999px; background:#fff;
  color:#5f7085; font-size:13px; font-weight:700;
}
.lg-updated .la-site-icon { width:14px; height:14px; color:#8b98ab; }

/* reading progress */
.lg-progress { height:3px; margin:34px 0 0; border-radius:999px; background:#e9eef3; overflow:hidden; }
.lg-progress > i { display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#16a34a,#4ade80); transition:width .12s linear; }

/* ---- layout -------------------------------------------------------------- */
.lg-body { display:grid; grid-template-columns:266px minmax(0,1fr); gap:44px; margin-top:26px; align-items:start; }

.lg-toc { position:sticky; top:96px; }
.lg-toc-title { margin:0 0 12px; padding-left:14px; color:#8b98ab; font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none; }
.lg-toc-nav { display:none; flex-direction:column; gap:2px; max-height:calc(100vh - 190px); overflow:auto; }
.lg-toc-nav.is-active { display:flex; }
.lg-toc-nav a {
  display:flex; align-items:center; gap:11px; padding:9px 14px; border-radius:11px;
  color:#5f7085; font-size:13.5px; font-weight:650; text-decoration:none; line-height:1.35;
  border-left:2px solid transparent;
  transition:background .22s, color .22s, border-color .22s;
}
.lg-toc-nav a b { flex:none; color:#b3bfcd; font-size:11px; font-weight:800; letter-spacing:.04em; transition:color .22s; }
.lg-toc-nav a:hover { background:#f2f7f4; color:#16233a; }
.lg-toc-nav a.is-current { background:#eafaf0; border-left-color:#16a34a; color:#0f8f45; }
.lg-toc-nav a.is-current b { color:#16a34a; }

.lg-pane { display:none; }
.lg-pane.is-active { display:block; }

/* ---- a section ----------------------------------------------------------- */
.lg-sec {
  padding:28px 30px; margin-bottom:16px; scroll-margin-top:104px;
  border:1px solid #ecf0f4; border-radius:20px; background:#fff;
  box-shadow:0 4px 16px rgba(23,48,74,.04);
  transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-spring);
}
.lg-sec:hover { border-color:#d6e7de; box-shadow:0 10px 26px rgba(23,48,74,.07); transform:translateY(-2px); }
.lg-sec h3 {
  display:flex; align-items:center; gap:14px; margin:0 0 16px;
  font-size:22px; font-weight:800; letter-spacing:-.025em; color:#0d1524;
}
.lg-num {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; background:#eafaf0; color:#12a04d;
  font-style:normal; font-size:14px; font-weight:850;
}
.lg-sec p { margin:0 0 13px; color:#46566d; font-size:15px; line-height:1.72; }
.lg-sec p:last-child { margin-bottom:0; }
.lg-sec a { color:#12a04d; font-weight:700; }

.lg-kv {
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:18px;
  padding:14px 0; border-top:1px solid #f1f4f8;
}
.lg-kv:first-of-type { border-top:0; padding-top:4px; }
.lg-kv b { color:#16233a; font-size:14px; font-weight:800; line-height:1.5; }
.lg-kv span { color:#46566d; font-size:15px; line-height:1.72; }

.lg-caps {
  display:flex; gap:12px; padding:16px 18px; margin:0 0 13px;
  border:1px solid #fde4c8; border-radius:14px; background:#fffaf2;
  color:#7a4d16 !important; font-size:13px !important; font-weight:700; line-height:1.65 !important;
  letter-spacing:.005em;
}
.lg-caps .la-site-icon { width:18px; height:18px; flex:none; color:#e08a1e; margin-top:1px; }
.lg-note { padding-top:13px; border-top:1px solid #f1f4f8; color:#8b98ab !important; font-size:13px !important; }

.lg-table { margin:6px 0 14px; border:1px solid #eef1f5; border-radius:14px; overflow:auto; }
.lg-table table { width:100%; border-collapse:collapse; font-size:13.5px; }
.lg-table th, .lg-table td { padding:12px 15px; text-align:left; vertical-align:top; }
.lg-table thead th { background:#f7fafc; color:#16233a; font-weight:800; white-space:nowrap; border-bottom:1px solid #e9edf2; }
.lg-table tbody th { color:#16233a; font-weight:750; }
.lg-table tbody td { color:#46566d; line-height:1.6; }
.lg-table tbody tr { border-bottom:1px solid #f2f5f8; }
.lg-table tbody tr:last-child { border-bottom:0; }
.lg-table tbody tr:hover th, .lg-table tbody tr:hover td { background:#f7fbf9; }

.lg-contact { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.lg-mail {
  display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 20px;
  border-radius:12px; background:linear-gradient(90deg,#16a34a,#22c55e);
  color:#fff !important; font-size:15px; font-weight:800; text-decoration:none;
  box-shadow:0 8px 20px rgba(22,163,74,.28);
  transition:transform .26s var(--ease-spring), filter .26s;
}
.lg-mail:hover { transform:translateY(-2px); filter:brightness(1.06); }
.lg-mail .la-site-icon { width:17px; height:17px; }
.lg-contact p { display:flex; align-items:flex-start; gap:9px; margin:0 !important; font-size:14px !important; }
.lg-contact p .la-site-icon { width:16px; height:16px; flex:none; color:#8b98ab; margin-top:3px; }

@media (max-width:980px) {
  .lg-body { grid-template-columns:1fr; gap:20px; }
  .lg-toc { position:static; }
  .lg-toc-nav { flex-direction:row; flex-wrap:wrap; max-height:none; }
  .lg-toc-nav a { border-left:0; border:1px solid #eaeff4; }
  .lg-kv { grid-template-columns:1fr; gap:5px; }
  .lg-sec { padding:22px 20px; }
}

/* Legal — motion. Same fail-safe contract: visible base state, hidden state only
   inside the keyframes, so an inactive ViewTimeline never leaves text blank. */
@keyframes lgRise { from { opacity:0; translate:0 18px } to { opacity:1; translate:0 0 } }
.lg-sec {
  opacity:1; translate:none;
  animation-name:lgRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view(); animation-range:entry 4% cover 22%;
}
.lg-num { transition:transform .3s var(--ease-spring), background .3s; }
.lg-sec:hover .lg-num { transform:rotate(-8deg) scale(1.08); background:#dcf6e6; }
@media (prefers-reduced-motion: reduce) {
  .lg-sec { opacity:1 !important; translate:none !important; animation:none !important }
  .lg-progress > i { transition:none }
}

/* ==========================================================================
   Legal — footer buttons on the main page + the standalone legal.html shell.
   The documents live on their own page and open in a new tab; the main page
   only carries the two entry points.
   ========================================================================== */
.legal-btn {
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px;
  border:1px solid #e3e9ef; border-radius:999px; background:#fff;
  color:#33415a !important; font-size:13px; font-weight:750; text-decoration:none;
  transition:border-color .24s, background .24s, color .24s, transform .24s var(--ease-spring);
}
.legal-btn .la-site-icon { width:15px; height:15px; color:#16a34a; }
.legal-btn:hover { border-color:#8fdcb0; background:#f3fdf7; color:#0f8f45 !important; transform:translateY(-2px); }
.footer-legal { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* --- standalone page shell ------------------------------------------------ */
body.legal-page { background:#fbfdfe; }
body.legal-page .legal-suite { padding-top:34px; }
.legal-topbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px clamp(18px,5vw,64px);
  border-bottom:1px solid #eceff3; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
}
.legal-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#0d1524; }
.legal-brand img { border-radius:9px; }
.legal-brand b { font-size:19px; font-weight:800; letter-spacing:-.03em; }
.legal-back {
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 17px;
  border:1px solid #e3e9ef; border-radius:999px; background:#fff;
  color:#33415a; font-size:13.5px; font-weight:750; text-decoration:none;
  transition:border-color .24s, background .24s, transform .24s var(--ease-spring);
}
.legal-back .la-site-icon { width:15px; height:15px; color:#16a34a; }
.legal-back:hover { border-color:#8fdcb0; background:#f3fdf7; transform:translateX(-2px); }
.legal-foot {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:26px clamp(18px,5vw,64px); border-top:1px solid #eceff3;
  color:#7a879a; font-size:13.5px;
}
.legal-foot a { color:#12a04d; font-weight:700; text-decoration:none; }
/* the sticky contents must clear the sticky topbar */
body.legal-page .lg-toc { top:82px; }
body.legal-page .lg-sec { scroll-margin-top:92px; }

/* ==========================================================================
   Sliding pills, measured by CSS instead of JS.
   Both switches previously sized their pill from offsetWidth via JS. That is
   fragile: if the measurement happens before layout or webfonts, the value is
   wrong, and ResizeObserver cannot rescue it in a background tab because
   observer delivery is tied to the rendering steps, which are frozen there.
   With exactly two equal-width buttons the pill is expressible in pure CSS —
   half the track, translated by its own width — so it is always correct.
   ========================================================================== */
.lg-switch, .bp-toggle { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.lg-switch::before, .bp-toggle::before {
  width:calc((100% - 10px) / 2);
  transform:translateX(0);
}
.lg-switch:has([data-legal-tab="terms"].active)::before,
.bp-toggle:has([data-bp-cycle="yearly"].active)::before { transform:translateX(100%); }
.bp-toggle button, .lg-switch button { padding:0 18px; white-space:nowrap; }
.bp-save { margin:0; }

/* ==========================================================================
   FIX — Analytics icon chips were invisible (white glyph on a pale tint).
   Regression from my own work: when building the Overview card I declared
   .ic-green/.ic-violet/.ic-blue/.ic-amber/.ic-pink as GLOBAL class selectors
   with a pale background. Those leaked onto .an-ico, which was designed as a
   saturated gradient chip, so the chip went pale while the glyph kept the
   white it gets from `.an-ico > svg.la-site-icon { color:#fff }` — a rule too
   specific for the wrapper's colour to override. Result: white on near-white.
   Re-asserting the gradients for .an-ico only; the pale variants stay pale
   everywhere else (Overview, Pricing, Power Studio).
   ========================================================================== */
.an-ico.ic-green  { background:linear-gradient(150deg,#2ecb6d,#12a04d); box-shadow:0 5px 12px rgba(18,160,77,.26); }
.an-ico.ic-violet { background:linear-gradient(150deg,#9163f0,#6b3fd8); box-shadow:0 5px 12px rgba(107,63,216,.24); }
.an-ico.ic-amber  { background:linear-gradient(150deg,#ffab3d,#f2870f); box-shadow:0 5px 12px rgba(242,135,15,.24); }
.an-ico.ic-blue   { background:linear-gradient(150deg,#5aa2f7,#2f7ff0); box-shadow:0 5px 12px rgba(47,127,240,.24); }
.an-ico.ic-pink   { background:linear-gradient(150deg,#ff6f9d,#ec3d76); box-shadow:0 5px 12px rgba(236,61,118,.24); }
.an-ico > svg.la-site-icon { color:#fff; }

/* ==========================================================================
   EARLY FEEDBACK — testimonial carousel.
   Same fixed-canvas contract as the pricing/overview cards: everything is
   authored at 1670px and scaled by tan(atan2(100cqi, 1670px)), so the mockup
   proportions hold at every viewport instead of reflowing. Three cards per
   page, nine reviews, three pages.
   ========================================================================== */
.bujji-feedback-card {
  grid-column:1 / -1;
  container-type:inline-size; position:relative; overflow:clip;
  border-radius:26px; background:#fff;
  border:1px solid #eef1f5; box-shadow:0 6px 22px rgba(23,48,74,.05);
}
.ef-canvas {
  --efs:1; position:relative; width:1670px; height:941px;
  transform:scale(var(--efs)); transform-origin:top left;
  margin-bottom:calc((var(--efs) - 1) * 941px);
  text-align:center; overflow:hidden;
  background:
    radial-gradient(520px 420px at 2% 6%,   rgba(255,170,90,.13), transparent 68%),
    radial-gradient(560px 430px at 99% 4%,  rgba(45,200,120,.14), transparent 70%),
    radial-gradient(520px 460px at 1% 92%,  rgba(255,175,105,.13), transparent 70%),
    radial-gradient(520px 420px at 99% 96%, rgba(45,200,120,.09), transparent 72%),
    #fff;
}
@supports (scale: tan(atan2(1px, 1px))) {
  .ef-canvas { --efs:tan(atan2(100cqi, 1670px)); }
}
/* faint dot field top-right + ring bottom-left, as in the mockup */
.ef-canvas::before, .ef-canvas::after { content:''; position:absolute; pointer-events:none; }
.ef-canvas::before {
  top:96px; right:52px; width:230px; height:150px; opacity:.5;
  background-image:radial-gradient(rgba(20,60,40,.13) 1.6px, transparent 1.7px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 78%);
          mask-image:linear-gradient(200deg,#000,transparent 78%);
}
.ef-canvas::after {
  left:-140px; bottom:-150px; width:430px; height:430px; border-radius:50%;
  border:1px solid rgba(240,150,80,.16);
  box-shadow:0 0 0 44px rgba(255,180,110,.05), inset 0 0 0 44px rgba(255,180,110,.045);
}

/* ---- header -------------------------------------------------------------- */
.ef-eyebrow {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:10px; margin-top:82px;
  height:46px; padding:0 26px; border-radius:999px;
  background:#e9f9ef; color:#12a04d;
  font-size:12.5px; font-weight:800; letter-spacing:.025em; text-transform:none;
}
.ef-eyebrow svg { width:19px; height:19px; }
.ef-title {
  position:relative; z-index:2;
  margin:26px 0 0; font-size:76px; line-height:1.04; font-weight:900;
  letter-spacing:-.042em; color:#101828;
}
.ef-sub {
  position:relative; z-index:2;
  margin:20px auto 0; max-width:900px;
  font-size:20px; line-height:1.72; color:#64748b; font-weight:450;
}
.ef-sub b { color:#f97316; font-weight:800; }

/* ---- carousel ------------------------------------------------------------ */
.ef-viewport {
  position:relative; z-index:2;
  width:1356px; margin:56px auto 0; overflow:hidden;
}
.ef-track {
  display:flex; gap:36px; align-items:stretch;
  transition:transform .72s cubic-bezier(.22,.9,.24,1);
  will-change:transform;
}
.ef-card {
  flex:0 0 428px; box-sizing:border-box;
  display:flex; flex-direction:column; text-align:left;
  padding:34px 34px 30px; border-radius:24px;
  background:#fff; border:1px solid #f0f2f5;
  box-shadow:0 10px 30px rgba(23,48,74,.055);
  transition:transform .42s var(--ease-spring), box-shadow .42s, border-color .42s;
}
.ef-card:hover {
  transform:translateY(-8px);
  border-color:#dcefe4; box-shadow:0 22px 48px rgba(23,48,74,.11);
}
.ef-card-top { display:flex; align-items:flex-start; justify-content:space-between; }
.ef-stars { display:inline-flex; gap:7px; }
.ef-stars svg { width:23px; height:23px; fill:#fbbf24; }
.ef-quote {
  font-family:Manrope, Inter, sans-serif; font-size:92px; font-weight:800;
  line-height:.62; color:#eef0f4; user-select:none;
}
.ef-text {
  margin:22px 0 0; font-size:17.5px; line-height:1.78;
  color:#334155; font-weight:450; letter-spacing:-.004em;
}
.ef-rule { height:1px; margin:26px 0 22px; background:#eef1f4; }
.ef-who { display:flex; align-items:flex-start; gap:16px; margin-top:auto; }

.ef-avatar {
  position:relative; flex:0 0 auto;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  color:#fff; font-size:18px; font-weight:800; letter-spacing:.02em;
}
.ef-avatar.g1 { background:linear-gradient(150deg,#34d17c,#13924a); }
.ef-avatar.g2 { background:linear-gradient(150deg,#4bd6a8,#12a07a); }
.ef-avatar.g3 { background:linear-gradient(150deg,#ffa93d,#f5760d); }
.ef-avatar.g4 { background:linear-gradient(150deg,#3fd18f,#0f9a63); }
.ef-avatar.g5 { background:linear-gradient(150deg,#38cf74,#128a44); }
.ef-avatar.g6 { background:linear-gradient(150deg,#ffb84d,#f2830f); }
.ef-avatar.g7 { background:linear-gradient(150deg,#2ecb84,#0e9757); }
.ef-avatar.g8 { background:linear-gradient(150deg,#46d59c,#11997c); }
.ef-avatar.g9 { background:linear-gradient(150deg,#ffa832,#ef7009); }
.ef-verified {
  position:absolute; right:-3px; bottom:-3px; width:23px; height:23px;
  color:#16a34a; filter:drop-shadow(0 0 0 #fff);
}
.ef-verified svg { width:100%; height:100%; display:block;
  filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff); }

.ef-meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ef-meta b { font-size:16.5px; font-weight:800; color:#101828; letter-spacing:-.015em; }
.ef-meta small { font-size:14.5px; font-weight:650; }
.ef-meta .tone-green  { color:#16a34a; }
.ef-meta .tone-orange { color:#f97316; }
.ef-tag {
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:8px; height:30px; padding:0 12px; border-radius:9px;
  background:#f4f6f8; color:#64748b; font-size:13.5px; font-weight:650;
}
.ef-tag svg { width:14px; height:14px; }

/* ---- controls (Watermelon UI Carousel Navigator) ------------------------- */
@keyframes efNavFill {
  from { width: 0%; }
  to   { width: 100%; }
}
.ef-controls {
  --ef-nav-bg: #dcfce7;
  --ef-nav-btn: #16a34a;
  --ef-nav-dot: #4ade80;
  --ef-nav-progress: #4ade80;
  --ef-auto-delay: 5000ms;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 9999px;
  background-color: var(--ef-nav-bg);
  margin: 52px auto 0;
  width: fit-content;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.ef-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--ef-nav-btn);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: background-color .3s ease, transform .18s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.ef-arrow svg { width: 24px; height: 24px; }
.ef-arrow:hover:not(:disabled) { filter: brightness(1.05); }
.ef-arrow:active:not(:disabled) { transform: scale(.9); }
.ef-arrow:focus,
.ef-arrow:focus-visible,
.ef-bars button:focus,
.ef-bars button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.ef-arrow:disabled,
.ef-arrow.is-disabled {
  background-color: #d1d5db;
  opacity: .5;
  cursor: not-allowed;
}
.ef-bars {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}
.ef-bars button {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background-color: var(--ef-nav-dot);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: width .42s cubic-bezier(.22, 1.35, .36, 1), background-color .3s ease;
}
.ef-bars button.is-on {
  width: 48px;
  background-color: var(--ef-nav-progress);
}
.ef-bars button .ef-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .65);
  pointer-events: none;
  opacity: 0;
  will-change: width;
}
.ef-bars button.is-on .ef-bar-fill {
  opacity: 1;
}

/* Early Feedback — motion.
   Fail-safe contract as elsewhere on this page: the visible state is the base
   state and only the hidden state lives inside the keyframes, so a ViewTimeline
   that never activates still renders the section normally rather than blank. */
@keyframes efRise  { from { opacity:0; translate:0 34px; scale:.975 } to { opacity:1; translate:0 0; scale:1 } }
@keyframes efFade  { from { opacity:0; translate:0 20px } to { opacity:1; translate:0 0 } }
@keyframes efPop   { from { opacity:0; scale:.7 } to { opacity:1; scale:1 } }
@keyframes efTwink { 0%,100% { opacity:1; scale:1 } 50% { opacity:.72; scale:.9 } }
@keyframes efFloat { 0%,100% { translate:0 0 } 50% { translate:0 -6px } }
@keyframes efHalo  { 0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,.30) } 70%,100% { box-shadow:0 0 0 13px rgba(22,163,74,0) } }

.ef-eyebrow, .ef-title, .ef-sub, .ef-viewport, .ef-controls {
  opacity:1; translate:none; scale:none;
  animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view(); animation-range:entry 2% cover 26%;
}
.ef-eyebrow  { animation-name:efPop;  animation-range:entry 0%  cover 16%; }
.ef-title    { animation-name:efRise; animation-range:entry 2%  cover 20%; }
.ef-sub      { animation-name:efFade; animation-range:entry 5%  cover 24%; }
.ef-viewport { animation-name:efRise; animation-range:entry 8%  cover 30%; }
.ef-controls { animation-name:efFade; animation-range:entry 12% cover 34%; }

/* the three visible cards enter one after another */
.ef-card { animation:efRise both cubic-bezier(.2,.85,.25,1); animation-duration:.62s; }
.ef-card[data-ef-in="0"] { animation-delay:.02s }
.ef-card[data-ef-in="1"] { animation-delay:.12s }
.ef-card[data-ef-in="2"] { animation-delay:.22s }

/* ambient loops, only while the card is on screen */
.ef-live .ef-stars svg { animation:efTwink 3.6s ease-in-out infinite; }
.ef-live .ef-stars svg:nth-child(2) { animation-delay:.16s }
.ef-live .ef-stars svg:nth-child(3) { animation-delay:.32s }
.ef-live .ef-stars svg:nth-child(4) { animation-delay:.48s }
.ef-live .ef-stars svg:nth-child(5) { animation-delay:.64s }
.ef-live .ef-quote { animation:efFloat 6s ease-in-out infinite; }
.ef-live .ef-card:hover .ef-avatar { animation:efHalo 1.9s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ef-eyebrow, .ef-title, .ef-sub, .ef-viewport, .ef-controls, .ef-card {
    opacity:1 !important; translate:none !important; scale:none !important; animation:none !important;
  }
  .ef-track { transition:none !important; }
  .ef-live .ef-stars svg, .ef-live .ef-quote, .ef-live .ef-card:hover .ef-avatar { animation:none !important; }
}

/* ==========================================================================
   Early Feedback — header type treatment.
   Two-line title in deep navy with "Saying" set in green under a hand-drawn
   swoosh, and a lighter slate sub-line. Overrides the single-line rules above.
   ========================================================================== */
.ef-title {
  margin:30px 0 0;
  font-family:Manrope, Inter, system-ui, sans-serif;
  font-size:82px; line-height:1.06; font-weight:800;
  letter-spacing:-.038em; color:#12263f;
}
.ef-hl {
  position:relative; display:inline-block;
  font-style:normal; font-weight:800; color:#2ea44f;
}
.ef-swoosh {
  position:absolute; left:-4%; bottom:-.28em; width:108%; height:.30em;
  color:#3aac57; overflow:visible;
}
.ef-swoosh path {
  stroke-dasharray:320; stroke-dashoffset:0;   /* visible base state */
}
.ef-sub {
  margin:26px auto 0; max-width:1000px;
  font-size:21px; line-height:1.78; font-weight:500; color:#5c6b80;
  letter-spacing:-.005em;
}
.ef-sub b { color:inherit; font-weight:500; }   /* no orange in this treatment */
.ef-eyebrow {
  background:#edfbf3; color:#1a9e4b;
  font-size:15px; letter-spacing:.13em; height:48px; padding:0 28px;
}
.ef-eyebrow svg { width:20px; height:20px; }

/* the swoosh draws itself in as the header scrolls into view */
@keyframes efDraw { from { stroke-dashoffset:320 } to { stroke-dashoffset:0 } }
.ef-swoosh path {
  animation-name:efDraw; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.3,.8,.3,1);
  animation-timeline:view(); animation-range:entry 8% cover 24%;
}
@media (prefers-reduced-motion: reduce) {
  .ef-swoosh path { animation:none !important; stroke-dashoffset:0 !important; }
}

/* The two-line title is 72px taller than the single-line version, which pushed
   the carousel controls past the clipped canvas floor. Grow the canvas to match
   (height + the margin-bottom scale compensation must stay in sync). */
.ef-canvas { height:1064px; margin-bottom:calc((var(--efs) - 1) * 1064px); }
.ef-eyebrow { margin-top:74px; }
.ef-viewport { margin-top:48px; }
.ef-controls { margin-top:46px; }

/* ==========================================================================
   FREQUENTLY ASKED QUESTIONS
   Fixed 1670px canvas like its siblings. Two columns: a pitch rail on the left
   (title, support card, trust strip) and an accordion on the right.
   ========================================================================== */
.bujji-faq-card {
  grid-column:1 / -1;
  container-type:inline-size; position:relative; overflow:clip;
  border-radius:26px; background:#fff;
  border:1px solid #eef1f5; box-shadow:0 6px 22px rgba(23,48,74,.05);
}
.fq-canvas {
  /* Height is fixed, so it must fit the TALLEST accordion state (item 7 open,
     measured at 1051 + 52 bottom padding) or a long answer would be clipped. */
  --fqs:1; position:relative; width:1670px; height:1104px;
  transform:scale(var(--fqs)); transform-origin:top left;
  margin-bottom:calc((var(--fqs) - 1) * 1104px);
  padding:52px 56px; box-sizing:border-box; text-align:left;
  background:
    radial-gradient(620px 420px at 2% 96%, rgba(255,170,90,.10), transparent 70%),
    radial-gradient(540px 380px at 99% 2%, rgba(45,200,120,.07), transparent 72%),
    #fff;
}
@supports (scale: tan(atan2(1px, 1px))) {
  .fq-canvas { --fqs:tan(atan2(100cqi, 1670px)); }
}
/* faint sweeping arcs at the lower left, as in the mockup */
.fq-canvas::before {
  content:''; position:absolute; left:-210px; bottom:-260px;
  width:620px; height:620px; border-radius:50%;
  border:1.5px solid rgba(244,164,96,.20);
  box-shadow:0 0 0 38px rgba(255,190,130,.045), inset 0 0 0 60px rgba(255,190,130,.035);
  pointer-events:none;
}
.fq-grid { position:relative; z-index:2; display:grid; grid-template-columns:596px 1fr; gap:78px; align-items:start; }

/* ---- left rail ----------------------------------------------------------- */
.fq-eyebrow {
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 22px;
  border-radius:999px; background:#edfbf3; color:#1a9e4b;
  font-size:15px; font-weight:800; letter-spacing:.06em;
}
.fq-eyebrow svg { width:19px; height:19px; }
.fq-title {
  margin:26px 0 0; font-family:Manrope, Inter, system-ui, sans-serif;
  font-size:66px; line-height:1.06; font-weight:800;
  letter-spacing:-.038em; color:#0f1729;
}
.fq-hl {
  position:relative; display:inline-block; font-style:normal; font-weight:800;
  background:linear-gradient(95deg,#2ea44f 0%,#57a83f 42%,#f0932b 78%,#f97316 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fq-swoosh { position:absolute; left:-2%; bottom:-.24em; width:104%; height:.26em; color:#f0a04b; overflow:visible; }
.fq-sub {
  margin:30px 0 0; max-width:470px;
  font-size:18px; line-height:1.72; font-weight:450; color:#64748b;
}

/* still-need-help panel */
.fq-help {
  position:relative; display:grid; grid-template-columns:236px 1fr; align-items:center; gap:14px;
  margin:38px 0 0; padding:26px 28px 26px 12px; border-radius:22px;
  background:linear-gradient(135deg,#fdf4ea 0%,#fdf1e4 55%,#fdf6ee 100%);
  border:1px solid #f7e6d3;
}
.fq-help-art { width:236px; height:auto; display:block; filter:drop-shadow(0 14px 22px rgba(203,124,44,.16)); }
.fq-help-body h4 { margin:0; font-size:25px; font-weight:800; letter-spacing:-.028em; color:#101828; }
.fq-help-body > p { margin:9px 0 0; font-size:15px; line-height:1.6; color:#6b7280; }
.fq-btn {
  display:flex; align-items:center; gap:11px; margin-top:14px;
  height:50px; padding:0 16px; border-radius:12px;
  font-size:15.5px; text-decoration:none;
  transition:transform .28s var(--ease-spring), box-shadow .28s, filter .28s, border-color .28s, background .28s;
}
.fq-btn b { font-weight:750; }
.fq-btn-ico { display:grid; place-items:center; flex:0 0 auto; }
.fq-btn-ico svg { width:19px; height:19px; }
.fq-btn-go { width:17px; height:17px; margin-left:auto; opacity:.85; transition:transform .3s var(--ease-spring); }
.fq-btn:hover .fq-btn-go { transform:translateX(4px); }
.fq-btn-primary {
  background:linear-gradient(95deg,#f97316,#fb923c); color:#fff;
  box-shadow:0 10px 22px rgba(234,110,20,.30);
}
.fq-btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 30px rgba(234,110,20,.36); }
.fq-btn-ghost { background:#fff; color:#1f2937; border:1px solid #ecd9c4; }
.fq-btn-ghost .fq-btn-ico svg { color:#f97316; }
.fq-btn-ghost:hover { transform:translateY(-2px); border-color:#f5b877; background:#fffaf4; }

/* trust strip */
.fq-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0 0; padding:0; list-style:none; }
.fq-trust li { display:flex; align-items:flex-start; gap:11px; }
.fq-trust-ico {
  display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px;
  border-radius:12px; background:#eafaf1; color:#16a34a;
}
.fq-trust-ico svg { width:20px; height:20px; }
.fq-trust-ico.fq-wa { background:#eafaf1; color:#12a04d; }
.fq-trust-t { display:flex; flex-direction:column; gap:2px; }
.fq-trust-t b { font-size:14.5px; font-weight:750; color:#111827; line-height:1.3; }
.fq-trust-t small { font-size:12.5px; color:#8b95a5; line-height:1.35; }

/* ---- accordion ----------------------------------------------------------- */
.fq-right { display:flex; flex-direction:column; gap:13px; }
.fq-item {
  border-radius:16px; background:#fff; border:1px solid #eef1f5;
  box-shadow:0 3px 12px rgba(23,48,74,.04); overflow:hidden;
  transition:background .38s, border-color .38s, box-shadow .38s;
}
.fq-item:hover { border-color:#dcefe4; box-shadow:0 8px 20px rgba(23,48,74,.07); }
.fq-item.is-open {
  background:linear-gradient(180deg,#fff6ec 0%,#fffaf4 100%);
  border-color:#f8e3cb; box-shadow:0 10px 26px rgba(214,132,44,.10);
}
.fq-qwrap { margin:0; font-size:inherit; font-weight:inherit; }
.fq-q {
  width:100%; display:flex; align-items:center; gap:16px;
  padding:17px 20px; background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left;
}
.fq-ico {
  display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px;
  border-radius:13px; background:#eafaf1; color:#16a34a;
  transition:background .38s, color .38s, transform .38s var(--ease-spring);
}
.fq-ico .fq-i { width:21px; height:21px; }
.fq-item.is-open .fq-ico { background:#fdecd8; color:#f2870f; }
.fq-item:hover .fq-ico { transform:scale(1.07) rotate(-5deg); }
.fq-text {
  flex:1 1 auto; font-size:16.5px; font-weight:750; line-height:1.45;
  color:#111827; letter-spacing:-.012em; transition:color .38s;
}
.fq-item.is-open .fq-text { color:#f2870f; }

/* plus that rotates into a minus */
.fq-toggle {
  position:relative; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:1.6px solid #dff2e6; background:#fff;
  transition:border-color .38s, background .38s, transform .38s var(--ease-spring);
}
.fq-toggle i {
  position:absolute; left:50%; top:50%; width:12px; height:2px; border-radius:2px;
  background:#16a34a; translate:-50% -50%;
  transition:background .38s, rotate .42s var(--ease-spring), opacity .3s;
}
.fq-toggle i:last-child { rotate:90deg; }
.fq-item.is-open .fq-toggle { border-color:#f6c68a; }
.fq-item.is-open .fq-toggle i { background:#f2870f; }
.fq-item.is-open .fq-toggle i:last-child { rotate:0deg; opacity:0; }
.fq-q:hover .fq-toggle { transform:scale(1.09); }

/* the panel animates on grid-template-rows so it needs no measured height */
.fq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .46s cubic-bezier(.3,.85,.3,1); }
.fq-item.is-open .fq-a { grid-template-rows:1fr; }
.fq-a-in { overflow:hidden; }
.fq-a p {
  margin:0; padding:2px 24px 20px 78px; border-left:3px solid transparent;
  font-size:15.5px; line-height:1.72; color:#4b5563;
  opacity:0; translate:0 -6px; transition:opacity .4s .06s, translate .4s .06s;
}
.fq-item.is-open .fq-a p { opacity:1; translate:0 0; }
.fq-a-in > p { position:relative; }
.fq-item.is-open .fq-a-in { border-left:3px solid #f5931f; margin:0 20px 0 24px; }
.fq-item.is-open .fq-a p { padding:2px 8px 20px 22px; }

/* ---- motion -------------------------------------------------------------- */
@keyframes fqRise { from { opacity:0; translate:0 26px } to { opacity:1; translate:0 0 } }
@keyframes fqSlide { from { opacity:0; translate:26px 0 } to { opacity:1; translate:0 0 } }
@keyframes fqDraw { from { stroke-dashoffset:320 } to { stroke-dashoffset:0 } }
@keyframes fqFloat { 0%,100% { translate:0 0; rotate:0deg } 50% { translate:0 -9px; rotate:-1.4deg } }

.fq-swoosh path { stroke-dasharray:320; stroke-dashoffset:0;
  animation-name:fqDraw; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.3,.8,.3,1);
  animation-timeline:view(); animation-range:entry 8% cover 26%; }

.fq-eyebrow, .fq-title, .fq-sub, .fq-help, .fq-trust {
  opacity:1; translate:none;
  animation-name:fqRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view();
}
.fq-eyebrow { animation-range:entry 0%  cover 14%; }
.fq-title   { animation-range:entry 2%  cover 20%; }
.fq-sub     { animation-range:entry 5%  cover 24%; }
.fq-help    { animation-range:entry 8%  cover 28%; }
.fq-trust   { animation-range:entry 11% cover 32%; }

.fq-item {
  opacity:1; translate:none;
  animation-name:fqSlide; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view(); animation-range:entry 4% cover 30%;
}
.fq-live .fq-help-art { animation:fqFloat 6.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fq-eyebrow, .fq-title, .fq-sub, .fq-help, .fq-trust, .fq-item {
    opacity:1 !important; translate:none !important; animation:none !important;
  }
  .fq-swoosh path { animation:none !important; stroke-dashoffset:0 !important; }
  .fq-a { transition:none !important; }
  .fq-live .fq-help-art { animation:none !important; }
}

/* ==========================================================================
   SITE FOOTER (rebuilt)
   Fluid, not canvas-scaled: a footer should reflow on small screens rather
   than shrink. Brand rail + four link columns + a CTA card, then a bottom bar.
   ========================================================================== */
.site-footer {
  position:relative; margin-top:22px; overflow:clip;
  background:
    radial-gradient(760px 300px at 3% 96%, rgba(249,145,60,.055), transparent 70%),
    radial-gradient(620px 280px at 99% 4%, rgba(45,200,120,.045), transparent 72%),
    #fff;
  border-top:1px solid #f0f2f5;
}
/* faint dot field bottom-right, as in the mockup */
.site-footer::after {
  content:''; position:absolute; right:0; bottom:0; width:280px; height:150px;
  background-image:radial-gradient(rgba(240,150,80,.24) 1.7px, transparent 1.8px);
  background-size:15px 15px; pointer-events:none;
  -webkit-mask-image:linear-gradient(300deg,#000,transparent 72%);
          mask-image:linear-gradient(300deg,#000,transparent 72%);
}
.ft-inner { max-width:1400px; margin:0 auto; padding:62px 40px 92px; position:relative; z-index:2; }
.ft-top {
  display:grid; gap:44px; align-items:start;
  grid-template-columns:minmax(300px,1.55fr) repeat(4, minmax(120px,.92fr)) minmax(280px,1.15fr);
}

/* ---- brand rail ---------------------------------------------------------- */
.ft-logo { display:inline-flex; align-items:center; gap:15px; text-decoration:none; color:#0f1729; }
.ft-logo-tile {
  display:grid; place-items:center; width:64px; height:64px; border-radius:18px;
  background:#fff; border:1px solid #f0eef2;
  box-shadow:0 8px 20px rgba(23,48,74,.09);
  transition:transform .4s var(--ease-spring), box-shadow .4s;
}
.ft-logo-tile img { width:44px; height:44px; border-radius:12px; }
.ft-logo:hover .ft-logo-tile { transform:translateY(-3px) rotate(-4deg); box-shadow:0 14px 28px rgba(23,48,74,.14); }
.ft-logo b { font-size:31px; font-weight:800; letter-spacing:-.035em; }
.ft-blurb { margin:22px 0 0; max-width:410px; font-size:16px; line-height:1.72; color:#64748b; font-weight:450; }
.ft-platforms { display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
.ft-plat {
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 17px;
  border:1px solid #eceff3; border-radius:12px; background:#fff;
  font-size:14.5px; font-weight:700; color:#1f2937;
  transition:border-color .3s, transform .3s var(--ease-spring), box-shadow .3s;
}
.ft-plat svg { width:17px; height:17px; color:#f97316; }
.ft-plat:hover { border-color:#f6c79a; transform:translateY(-2px); box-shadow:0 8px 18px rgba(234,110,20,.12); }

/* ---- link columns -------------------------------------------------------- */
.ft-col { display:flex; flex-direction:column; }
.ft-col h5 {
  position:relative; margin:6px 0 26px; padding-bottom:12px;
  font-size:13.5px; font-weight:800; letter-spacing:.12em; color:#0f1729;
}
.ft-col h5::after {
  content:''; position:absolute; left:0; bottom:0; width:28px; height:3px;
  border-radius:2px; background:#f97316;
  transition:width .38s var(--ease-spring);
}
.ft-col:hover h5::after { width:46px; }
.ft-col a {
  display:flex; align-items:center; gap:11px; padding:8px 0;
  font-size:15.5px; font-weight:500; color:#4b5563; text-decoration:none;
  transition:color .26s, transform .26s var(--ease-spring);
}
.ft-col a .ft-i { width:19px; height:19px; flex:0 0 auto; color:#94a3b8; transition:color .26s; }
.ft-col a:hover { color:#f97316; transform:translateX(4px); }
.ft-col a:hover .ft-i { color:#f97316; }

/* ---- CTA card ------------------------------------------------------------ */
.ft-cta {
  position:relative; padding:26px 24px 24px; border-radius:20px;
  background:linear-gradient(160deg,#fffdfb 0%,#fff7ef 62%,#fffaf5 100%);
  border:1px solid #f7e7d6; box-shadow:0 10px 30px rgba(214,132,44,.07);
}
.ft-cta-spark { position:absolute; top:16px; right:18px; color:#f97316; }
.ft-cta-spark svg { width:19px; height:19px; display:block; }
.ft-cta h4 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.03em; color:#0f1729; line-height:1.28; }
.ft-cta h4 em { font-style:normal; color:#f97316; }
.ft-cta > p { margin:11px 0 0; font-size:14.5px; line-height:1.65; color:#6b7280; }
.ft-cta-go, .ft-cta-demo {
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px; margin-top:16px; border-radius:12px; text-decoration:none; font-size:16px;
  transition:transform .28s var(--ease-spring), box-shadow .28s, filter .28s, border-color .28s, background .28s;
}
.ft-cta-go {
  background:linear-gradient(95deg,#f97316,#fb8c3c); color:#fff;
  box-shadow:0 10px 24px rgba(234,110,20,.30);
}
.ft-cta-go b { font-weight:750; }
.ft-cta-go svg { width:18px; height:18px; transition:transform .3s var(--ease-spring); }
.ft-cta-go:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 32px rgba(234,110,20,.38); }
.ft-cta-go:hover svg { transform:translateX(4px); }
.ft-cta-demo {
  position:relative; justify-content:flex-start; padding:0 8px 0 20px;
  background:#fff; border:1px solid #f2ddc6; color:#f2870f;
}
.ft-cta-demo b { font-weight:750; margin:0 auto; }
.ft-cta-cal {
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:#fff5ea; color:#f2870f; flex:0 0 auto;
}
.ft-cta-cal svg { width:18px; height:18px; }
.ft-cta-demo:hover { transform:translateY(-2px); border-color:#f5b877; background:#fffaf4; }

/* ---- bottom bar ---------------------------------------------------------- */
.ft-rule { height:1px; margin:46px 0 0; background:linear-gradient(90deg,transparent,#eceff3 12%,#eceff3 88%,transparent); }
.ft-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:22px 0 8px; }
.ft-copy { font-size:14.5px; color:#8b95a5; }
.ft-social { display:flex; gap:10px; margin-left:26px; }
.ft-social a {
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  border:1px solid #eceff3; background:#fff; color:#334155;
  transition:transform .3s var(--ease-spring), border-color .3s, color .3s, box-shadow .3s;
}
.ft-social a svg, .ft-social a .ft-i { width:19px; height:19px; }
.ft-social a:hover { transform:translateY(-3px); border-color:#f6c79a; color:#f97316; box-shadow:0 10px 20px rgba(234,110,20,.14); }
.ft-sep { width:1px; height:30px; background:#e9edf2; margin:0 6px; }
.ft-legal { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-left:auto; }
.ft-legal-pill {
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px;
  border:1px solid #eceff3; border-radius:999px; background:#fff;
  color:#111827; text-decoration:none; font-size:14.5px;
  transition:transform .28s var(--ease-spring), border-color .28s, background .28s, box-shadow .28s;
}
.ft-legal-pill b { font-weight:750; }
.ft-legal-pill .ft-i { width:17px; height:17px; color:#f97316; }
.ft-legal-pill:hover { transform:translateY(-2px); border-color:#f6c79a; background:#fffaf4; box-shadow:0 10px 20px rgba(234,110,20,.13); }
.ft-mini { font-size:14px; color:#64748b; text-decoration:none; transition:color .26s; }
.ft-mini:hover { color:#f97316; }
.ft-muted { color:#9aa4b2; }
.ft-dot { width:4px; height:4px; border-radius:50%; background:#f0a04b; display:inline-block; }

/* Footer — motion + responsive.
   Visible base state, hidden state only inside keyframes, so an inactive
   ViewTimeline never leaves the footer blank. */
@keyframes ftRise { from { opacity:0; translate:0 22px } to { opacity:1; translate:0 0 } }
@keyframes ftSpark { 0%,100% { transform:scale(1) rotate(0deg); opacity:.9 } 50% { transform:scale(1.22) rotate(22deg); opacity:1 } }
@keyframes ftGlow { 0%,100% { box-shadow:0 10px 24px rgba(234,110,20,.30) } 50% { box-shadow:0 14px 32px rgba(234,110,20,.44) } }

.ft-brand, .ft-col, .ft-cta, .ft-bottom {
  opacity:1; translate:none;
  animation-name:ftRise; animation-duration:auto; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-timeline:view(); animation-range:entry 0% cover 26%;
}
.ft-brand         { animation-range:entry 0%  cover 18%; }
.ft-col:nth-of-type(1) { animation-range:entry 2%  cover 20%; }
.ft-col:nth-of-type(2) { animation-range:entry 4%  cover 22%; }
.ft-col:nth-of-type(3) { animation-range:entry 6%  cover 24%; }
.ft-col:nth-of-type(4) { animation-range:entry 8%  cover 26%; }
.ft-cta           { animation-range:entry 10% cover 28%; }
.ft-bottom        { animation-range:entry 14% cover 34%; }

.ft-live .ft-cta-spark svg { animation:ftSpark 3.2s ease-in-out infinite; }
.ft-live .ft-cta-go { animation:ftGlow 3.6s ease-in-out infinite; }

@media (max-width:1240px) {
  .ft-top { grid-template-columns:minmax(280px,1.4fr) repeat(2,1fr); }
  .ft-cta { grid-column:2 / -1; }
}
@media (max-width:860px) {
  .ft-inner { padding:46px 22px 22px; }
  .ft-top { grid-template-columns:1fr 1fr; gap:32px; }
  .ft-brand, .ft-cta { grid-column:1 / -1; }
  .ft-bottom { gap:14px; }
  .ft-social { margin-left:0; }
  .ft-sep { display:none; }
  .ft-legal { margin-left:0; }
}
@media (max-width:520px) {
  .ft-top { grid-template-columns:1fr; }
  .ft-logo b { font-size:27px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-brand, .ft-col, .ft-cta, .ft-bottom {
    opacity:1 !important; translate:none !important; animation:none !important;
  }
  .ft-live .ft-cta-spark svg, .ft-live .ft-cta-go { animation:none !important; }
}

/* ==========================================================================
   Footer — refined, proportional & quiet.
   - BujjiAi section positioned cleanly to the far left.
   - Chrome, macOS, Windows badges aligned in ONE single row (flex-wrap: nowrap).
   - Right CTA card ("Ready to grow with AI?") scaled down, calmer typography,
     softer buttons, and smaller icons to blend in harmoniously with the page.
   - Nav column links and icons trimmed to a crisp, subtle size.
   ========================================================================== */
.ft-inner {
  max-width:1460px;
  width:100%;
  margin:0 auto;
  padding:44px clamp(20px, 3vw, 44px) 18px;
}
.ft-top {
  display:grid;
  gap:clamp(16px, 2vw, 32px);
  align-items:start;
  grid-template-columns:minmax(310px, 1.45fr) repeat(4, minmax(115px, 0.82fr)) minmax(215px, 1.05fr);
}

/* Brand Rail (Left side) */
.ft-brand {
  max-width:325px;
  text-align:left;
}
.ft-logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0f1729;
}
.ft-logo-tile {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#fff;
  border:1px solid #f0eef2;
  box-shadow:0 4px 14px rgba(23,48,74,.07);
  transition:transform .35s var(--ease-spring), box-shadow .35s;
}
.ft-logo-tile img {
  width:26px;
  height:26px;
  border-radius:7px;
}
.ft-logo:hover .ft-logo-tile {
  transform:translateY(-2px) rotate(-3deg);
  box-shadow:0 8px 18px rgba(23,48,74,.12);
}
.ft-logo b {
  font-size:19px;
  font-weight:800;
  letter-spacing:-.025em;
  color:#0f1729;
}
.ft-blurb {
  margin:12px 0 0;
  max-width:310px;
  font-size:12.5px;
  line-height:1.62;
  color:#64748b;
  font-weight:450;
}
.ft-platforms {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:6px;
  margin-top:15px;
  align-items:center;
}
.ft-plat {
  display:inline-flex;
  align-items:center;
  gap:5.5px;
  height:28px;
  padding:0 8.5px;
  border:1px solid #eceff3;
  border-radius:7px;
  background:#fff;
  font-size:11px;
  font-weight:650;
  color:#1f2937;
  white-space:nowrap;
  flex:0 0 auto;
  transition:border-color .24s, transform .24s var(--ease-spring), box-shadow .24s;
}
.ft-plat svg {
  width:12.5px;
  height:12.5px;
  color:#f97316;
  flex-shrink:0;
}
.ft-plat:hover {
  border-color:#f6c79a;
  transform:translateY(-1.5px);
  box-shadow:0 4px 12px rgba(234,110,20,.10);
}

/* Link Columns */
.ft-col {
  display:flex;
  flex-direction:column;
}
.ft-col h5 {
  position:relative;
  margin:2px 0 12px;
  padding-bottom:6px;
  font-size:11px;
  font-weight:750;
  letter-spacing:.09em;
  color:#0f1729;
}
.ft-col h5::after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:18px;
  height:2.5px;
  border-radius:2px;
  background:#f97316;
  transition:width .3s var(--ease-spring);
}
.ft-col:hover h5::after {
  width:30px;
}
.ft-col a {
  display:flex;
  align-items:center;
  gap:7.5px;
  padding:3.5px 0;
  font-size:12.5px;
  font-weight:500;
  color:#475569;
  text-decoration:none;
  transition:color .22s, transform .22s var(--ease-spring);
}
.ft-col a span {
  white-space:nowrap;
}
.ft-col a .ft-i {
  width:13.5px;
  height:13.5px;
  flex:0 0 auto;
  color:#94a3b8;
  transition:color .22s;
}
.ft-col a:hover {
  color:#f97316;
  transform:translateX(3px);
}
.ft-col a:hover .ft-i {
  color:#f97316;
}

/* CTA Card */
.ft-cta {
  position:relative;
  padding:15px 14px 14px;
  border-radius:14px;
  background:linear-gradient(160deg,#fffdfb 0%,#fff7ef 62%,#fffaf5 100%);
  border:1px solid #f7e7d6;
  box-shadow:0 6px 20px rgba(214,132,44,.05);
}
.ft-cta-spark {
  position:absolute;
  top:11px;
  right:12px;
  color:#f97316;
}
.ft-cta-spark svg {
  width:13.5px;
  height:13.5px;
  display:block;
}
.ft-cta h4 {
  margin:0;
  font-size:15.5px;
  font-weight:750;
  letter-spacing:-.02em;
  color:#0f1729;
  line-height:1.3;
}
.ft-cta h4 em {
  font-style:normal;
  color:#f97316;
}
.ft-cta > p {
  margin:6px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:#64748b;
}
.ft-cta-go, .ft-cta-demo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:35px;
  margin-top:9px;
  border-radius:8px;
  text-decoration:none;
  font-size:12.5px;
  transition:transform .24s var(--ease-spring), box-shadow .24s, filter .24s, border-color .24s, background .24s;
}
.ft-cta-go {
  background:linear-gradient(95deg,#f97316,#fb8c3c);
  color:#fff;
  box-shadow:0 4px 14px rgba(234,110,20,.22);
}
.ft-cta-go b {
  font-weight:700;
}
.ft-cta-go svg {
  width:13.5px;
  height:13.5px;
  transition:transform .24s var(--ease-spring);
}
.ft-cta-go:hover {
  transform:translateY(-1.5px);
  filter:brightness(1.04);
  box-shadow:0 8px 18px rgba(234,110,20,.30);
}
.ft-cta-go:hover svg {
  transform:translateX(3px);
}
.ft-cta-demo {
  position:relative;
  justify-content:flex-start;
  padding:0 5px 0 12px;
  background:#fff;
  border:1px solid #f2ddc6;
  color:#ea720c;
}
.ft-cta-demo b {
  font-weight:700;
  margin:0 auto;
}
.ft-cta-cal {
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:6px;
  background:#fff5ea;
  color:#ea720c;
  flex:0 0 auto;
}
.ft-cta-cal svg {
  width:13px;
  height:13px;
}
.ft-cta-demo:hover {
  transform:translateY(-1.5px);
  border-color:#f5b877;
  background:#fffaf4;
}

/* Bottom Bar */
.ft-rule {
  height:1px;
  margin:28px 0 0;
  background:linear-gradient(90deg,transparent,#eceff3 12%,#eceff3 88%,transparent);
}
.ft-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:16px 0 6px;
}
.ft-copy {
  font-size:12px;
  color:#8b95a5;
}
.ft-social {
  display:flex;
  gap:6px;
  margin-left:16px;
}
.ft-social a {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  border:1px solid #eceff3;
  background:#fff;
  color:#334155;
  transition:transform .24s var(--ease-spring), border-color .24s, color .24s, box-shadow .24s;
}
.ft-social a svg, .ft-social a .ft-i {
  width:14px;
  height:14px;
}
.ft-social a:hover {
  transform:translateY(-2px);
  border-color:#f6c79a;
  color:#f97316;
  box-shadow:0 6px 14px rgba(234,110,20,.12);
}
.ft-sep {
  width:1px;
  height:20px;
  background:#e9edf2;
  margin:0 4px;
}
.ft-legal {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
  justify-content:flex-end;
}
.ft-legal-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 11px;
  border:1px solid #eceff3;
  border-radius:999px;
  background:#fff;
  color:#111827;
  text-decoration:none;
  font-size:11.5px;
  transition:transform .24s var(--ease-spring), border-color .24s, background .24s, box-shadow .24s;
}
.ft-legal-pill b {
  font-weight:700;
}
.ft-legal-pill .ft-i {
  width:13px;
  height:13px;
  color:#f97316;
}
.ft-legal-pill:hover {
  transform:translateY(-1.5px);
  border-color:#f6c79a;
  background:#fffaf4;
  box-shadow:0 6px 14px rgba(234,110,20,.10);
}
.ft-mini {
  font-size:11.5px;
  color:#64748b;
  text-decoration:none;
  transition:color .22s;
}
.ft-mini:hover {
  color:#f97316;
}
.ft-muted {
  color:#9aa4b2;
}
.ft-dot {
  width:3.5px;
  height:3.5px;
  border-radius:50%;
  background:#f0a04b;
  display:inline-block;
}

/* Responsive Footer */
@media (max-width: 1240px) {
  .ft-top {
    grid-template-columns:minmax(260px, 1.3fr) repeat(2, minmax(130px, 1fr)) minmax(220px, 1.1fr);
  }
  .ft-cta {
    grid-column:auto;
  }
}
@media (max-width: 1024px) {
  .ft-top {
    grid-template-columns:1fr 1fr 1fr;
  }
  .ft-brand {
    grid-column:1 / -1;
  }
  .ft-cta {
    grid-column:1 / -1;
    max-width:380px;
  }
}
@media (max-width: 860px) {
  .ft-inner {
    padding:38px 18px 18px;
  }
  .ft-top {
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .ft-brand, .ft-cta {
    grid-column:1 / -1;
  }
  .ft-cta {
    max-width:none;
  }
  .ft-social {
    margin-left:0;
  }
  .ft-sep {
    display:none;
  }
  .ft-legal {
    margin-left:0;
  }
  .ft-bottom {
    gap:10px;
  }
  .ft-platforms {
    flex-wrap:wrap;
  }
}
@media (max-width: 520px) {
  .ft-top {
    grid-template-columns:1fr;
  }
  .ft-logo b {
    font-size:19px;
  }
  .ft-col a span {
    white-space:normal;
  }
}

/* The legal switcher now carries four documents, not two. The pill maths has to
   follow the track count or it would still slide in halves. */
.lg-switch { grid-template-columns:repeat(4,1fr); }
.lg-switch::before { width:calc((100% - 10px) / 4); }
.lg-switch:has([data-legal-tab="privacy"].active)::before { transform:translateX(0); }
.lg-switch:has([data-legal-tab="terms"].active)::before   { transform:translateX(100%); }
.lg-switch:has([data-legal-tab="refunds"].active)::before { transform:translateX(200%); }
.lg-switch:has([data-legal-tab="choices"].active)::before { transform:translateX(300%); }
.lg-switch button { padding:0 14px; font-size:14.5px; }

.lg-bullets { margin:4px 0 13px; padding:0 0 0 4px; list-style:none; }
.lg-bullets li {
  position:relative; padding:7px 0 7px 26px;
  color:#46566d; font-size:15px; line-height:1.7;
}
.lg-bullets li::before {
  content:''; position:absolute; left:4px; top:16px;
  width:7px; height:7px; border-radius:50%; background:#16a34a;
}
@media (max-width:720px) {
  .lg-switch { grid-template-columns:repeat(2,1fr); }
  .lg-switch::before { display:none; }
  .lg-switch button.active { background:#16a34a; color:#fff; border-radius:999px; }
}

/* ==========================================================================
   NAV — upgraded for the full section list.
   Three hover/click menus (Product, Intelligence, Company), a flat Pricing
   link, the command-palette button and a CTA.
   ========================================================================== */
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-item { position:relative; }
.nav-trigger {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px;
  border:0; border-radius:11px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:650; color:#33415a;
  transition:background .24s, color .24s;
}
.nav-caret { width:14px; height:14px; opacity:.6; transition:transform .32s var(--ease-spring); }
.nav-item.is-open .nav-trigger { background:#f2f7f4; color:#0f8f45; }
.nav-item.is-open .nav-caret { transform:rotate(180deg); }
.nav-trigger:hover { background:#f4f7f9; }
.nav-flat {
  display:inline-flex; align-items:center; height:38px; padding:0 13px; border-radius:11px;
  font-size:14.5px; font-weight:650; color:#33415a; text-decoration:none;
  transition:background .24s, color .24s;
}
.nav-flat:hover { background:#f4f7f9; color:#0f8f45; }

.nav-panel {
  position:absolute; top:calc(100% + 12px); left:50%; z-index:40;
  width:342px; translate:-50% 0;
  opacity:0; visibility:hidden; scale:.97; transform-origin:top center;
  transition:opacity .26s, visibility .26s, scale .3s var(--ease-spring), translate .3s var(--ease-spring);
}
.nav-item.is-open .nav-panel { opacity:1; visibility:visible; scale:1; }
/* invisible bridge so the pointer can cross the gap without closing the menu */
.nav-panel::before { content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav-panel-in {
  padding:9px; border-radius:18px; background:#fff;
  border:1px solid #eceff3; box-shadow:0 22px 54px rgba(16,36,62,.16);
}
.nav-panel a {
  display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:12px;
  text-decoration:none; transition:background .22s, transform .22s var(--ease-spring);
}
.nav-panel a i {
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px;
  border-radius:11px; background:#eafaf1; color:#12a04d;
  transition:background .24s, color .24s, transform .3s var(--ease-spring);
}
.nav-panel a i svg { width:19px; height:19px; }
.nav-panel a span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.nav-panel a b { font-size:14.5px; font-weight:750; color:#101828; letter-spacing:-.012em; }
.nav-panel a small { font-size:12.5px; color:#8b95a5; line-height:1.4; }
.nav-panel a:hover { background:#f5faf7; transform:translateX(3px); }
.nav-panel a:hover i { background:#12a04d; color:#fff; transform:rotate(-6deg) scale(1.05); }

.nav-cta {
  display:inline-flex; align-items:center; height:38px; padding:0 17px; margin-left:6px;
  border-radius:11px; background:linear-gradient(95deg,#12a04d,#22c55e); color:#fff;
  font-size:14.5px; font-weight:750; text-decoration:none;
  box-shadow:0 6px 16px rgba(18,160,77,.26);
  transition:transform .26s var(--ease-spring), filter .26s, box-shadow .26s;
}
.nav-cta:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 24px rgba(18,160,77,.34); }

/* ---- mobile menu --------------------------------------------------------- */
.mm-head {
  margin:14px 0 4px; padding:0 4px;
  font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:none; color:#9aa4b2;
}
.mm-head:first-child { margin-top:2px; }
.mobile-menu a { display:flex; align-items:center; gap:11px; }
.mobile-menu a i { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#eafaf1; color:#12a04d; flex:0 0 auto; }
.mobile-menu a i svg { width:17px; height:17px; }
.mobile-menu .mm-cta {
  justify-content:center; margin-top:14px; height:46px; border-radius:12px;
  background:linear-gradient(95deg,#12a04d,#22c55e); color:#fff; font-weight:750;
}

/* ---- dock ---------------------------------------------------------------- */
.wm-dock a svg { width:20px; height:20px; }
.wm-dock a.active { color:#075e54; }
.wm-dock a::before {
  content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; border-radius:50%;
  background:var(--dock-accent,#12a04d); translate:-50% 0; opacity:0;
  transition:opacity .24s;
}
.wm-dock a.active::before { opacity:1; }
@media (max-width:520px) {
  .wm-dock { gap:2px; padding:6px; }
  .wm-dock a { width:38px; height:38px; }
  .wm-dock a:hover, .wm-dock a.active { width:44px; }
  .wm-dock a svg { width:18px; height:18px; }
}
@media (max-width:1120px) {
  .nav-links .nav-item, .nav-links .nav-flat, .nav-links .nav-cta { display:none; }
}

/* ==========================================================================
   FIX — nav dropdowns were invisible.
   `.nav.visible` carried `overflow:hidden`, which clipped the absolutely
   positioned .nav-panel menus away entirely, so opening one showed nothing.
   The clip existed only to contain the decorative sheen (::after deliberately
   overflows at top:-70%/height:220%). Moving both decorations into a dedicated
   .nav-sheen layer lets that layer do the clipping while the nav itself stays
   overflow:visible, so the menus can escape.
   `position:fixed` would NOT have worked as an escape hatch here: .nav has a
   transform, which makes it the containing block for fixed descendants.
   ========================================================================== */
.nav.visible { overflow:visible; }
.nav.visible::before, .nav.visible::after { content:none; }

.nav-sheen {
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; border-radius:inherit; pointer-events:none;
}
.nav.visible .nav-sheen::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(280px 80px at 18% -20%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(260px 90px at 76% 120%, rgba(128,151,255,.18), transparent 72%);
}
.nav.visible .nav-sheen::after {
  content:""; position:absolute; top:-70%; left:-12%; width:38%; height:220%;
  pointer-events:none; transform:rotate(10deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation:navGlassSweep 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav.visible .nav-sheen::after { animation:none; }
}

/* ==========================================================================
   Dock — now carries all 12 sections, so it has to survive narrow viewports.
   It scrolls horizontally instead of overflowing, and the tooltip is suppressed
   once scrolling is in play (a tooltip inside a scrollport gets clipped).
   ========================================================================== */
.wm-dock {
  max-width:min(94vw, 720px);
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth; overscroll-behavior-x:contain;
}
.wm-dock::-webkit-scrollbar { display:none; }
.wm-dock a { flex:0 0 auto; }

/* Below this width the dock scrolls, and an ::after tooltip would be clipped by
   the scrollport — so drop it there rather than render a sliced label. */
@media (max-width:820px) {
  .wm-dock a::after { display:none; }
}
@media (max-width:520px) {
  .wm-dock { gap:2px; padding:6px; max-width:94vw; }
  .wm-dock a { width:40px; height:40px; }
  .wm-dock a:hover, .wm-dock a.active { width:40px; transform:translateY(-4px); }
  .wm-dock a svg { width:18px; height:18px; }
}

/* Dock — trimmed. Twelve icons at the old 42px/5px made a 647px bar, which read
   as a second navbar rather than a quiet utility rail. */
.wm-dock { gap:3px; padding:6px; border-radius:19px; }
.wm-dock a { width:36px; height:36px; border-radius:12px; }
.wm-dock a:hover, .wm-dock a.active { width:42px; transform:translateY(-5px); }
.wm-dock a svg { width:18px; height:18px; }
.wm-dock a::before { bottom:4px; width:3.5px; height:3.5px; }
.wm-dock a::after { bottom:calc(100% + 9px); font-size:9.5px; padding:4px 7px; }
@media (max-width:520px) {
  .wm-dock { gap:2px; padding:5px; max-width:94vw; }
  .wm-dock a { width:34px; height:34px; }
  .wm-dock a:hover, .wm-dock a.active { width:34px; transform:translateY(-3px); }
  .wm-dock a svg { width:16px; height:16px; }
}


/* ==========================================================================
   The ad-creative → WhatsApp-chat visual moved from the AI Powered Ads card
   into Broadcast Marketing, replacing the iPhone mockup.
   The original composition needs ~470px but .broadcast-visual is only ~335px,
   so repositioning the cards individually made them overlap. Instead keep the
   authored geometry intact on a fixed 470x400 stage and scale the whole stage
   down to fit — the layout the design was drawn at is preserved exactly.
   ========================================================================== */
.broadcast-visual .ads-live-stage {
  --adsw:540px;
  position:absolute; left:50%; top:6px; right:auto; bottom:auto;
  width:var(--adsw); height:400px;
  transform:translateX(-50%) scale(var(--adsfit, .68));
  transform-origin:top center;
}
@supports (scale: tan(atan2(1px, 1px))) {
  /* Fit the stage on BOTH axes */
  .broadcast-visual { container-type:size; }
  .broadcast-visual .ads-live-stage {
    /* height divisor derived from measured geometry, not guessed: tallest
       stacked content is the chat card at top 38 + 414 = 452 unscaled, and
       440 left it 26px short at 1920px wide. 480 keeps a real margin. */
    --adsfit:min(tan(atan2(100cqi, 540px)), tan(atan2(100cqh, 480px)));
  }
}
/* the authored positions, restated so the moved stage does not inherit the
   AI-ads card's responsive tweaks */
.broadcast-visual .social-ad-card { left:0; top:0; width:255px; transform:none; }
.broadcast-visual .ads-route      { left:225px; top:26px; width:155px; height:145px; transform:none; }
.broadcast-visual .ads-chat-card  { right:0; bottom:auto; top:38px; width:240px; transform:none; }

/* hide overlay floating pills on broadcast visual */
.broadcast-visual .broadcast-float { display:none !important; }

/* The "World's only platform with free templates" panel now lives inside
   .suite-rail (see below), so it no longer needs grid placement of its own.
   NOTE: an earlier version nudged it right to line up with the Enterprise Brain
   card, whose edge appeared inset by 1.70%. That inset was not real -- it was
   `.reveal`'s pre-entrance `scale:.966` caught mid-animation. Settled, the
   Enterprise card spans the full grid width, so no offset is needed. */

/* Broadcast takes the width the panel released (see note above). */

/* ==========================================================================
   Top suite row as ONE card, matching the Enterprise Brain treatment below:
   a single shell with hairline dividers instead of three separate cards.
   The shell owns the border, radius, background and shadow; the three panels
   inside drop theirs and are separated by 1px rules, exactly as
   .enterprise-data-panel / .enterprise-agent-panel do it.
   ========================================================================== */
@media (min-width:1221px) {
  .suite-rail {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.25fr 1.124fr minmax(302px, .676fr);
    gap:0;
    align-items:stretch;
    overflow:hidden;
    border:1px solid #dfe8e3;
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 70px rgba(24,67,44,.09);
  }
  /* the panels give up their own card chrome */
  .suite-rail > .mockup-suite-card,
  .suite-rail > .template-pricing-panel {
    border:0;
    border-radius:0;
    box-shadow:none;
    margin:0;
  }
  /* .mockup-suite-card is pinned to height/min-height:790px, which stops
     align-self:stretch from filling the row. The rail is as tall as its
     tallest panel, so the two fixed-height cards were left with ~76px of
     empty white space beneath their content. Release the height so all three
     stretch to the same row height. */
  .suite-rail > .mockup-suite-card {
    height:auto;
    min-height:0;
    align-self:stretch;
  }
  /* hairline rules between the three, same colour as the Enterprise card */
  .suite-rail > *:not(:last-child) { border-right:1px solid #e8eeea; }

  /* the panel no longer needs its own right offset — the shell edge is the
     alignment now, and the shell already lines up with the grid */
  .suite-rail > .template-pricing-panel {
    width:auto;
    justify-self:stretch;
    align-self:stretch;
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px 24px 22px;
    background:linear-gradient(155deg,#fffdf5 0%,#effbea 58%,#e2f6e8 100%);
  }

  /* Scale all components inside the panel so they fill the card proportionally */
  .suite-rail > .template-pricing-panel .template-world-badge {
    display:inline-flex; align-items:center; gap:6px;
    width:max-content; max-width:100%;
    white-space:nowrap;
    margin-bottom:10px; padding:6px 12px; border-radius:999px;
    font-size:10px; font-weight:800; letter-spacing:.01em;
  }
  .suite-rail > .template-pricing-panel .template-world-badge > svg.la-site-icon {
    width:13px; height:13px; flex-shrink:0;
  }
  .suite-rail > .template-pricing-panel .template-side-kicker {
    font-size:12.5px; font-weight:800; margin-bottom:4px; color:#148d4a;
  }
  .suite-rail > .template-pricing-panel h2 {
    font-size:29px; font-weight:850; line-height:1.08; letter-spacing:-.035em; color:#173c2a; margin:0;
  }
  .suite-rail > .template-pricing-panel h2 span { color:#0da04b; }
  .suite-rail > .template-pricing-panel > p {
    margin:8px 0 12px; color:#556c60; font-size:13px; line-height:1.5;
  }

  .suite-rail > .template-pricing-panel .fee-hero {
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px;
    padding:16px 18px; border-radius:16px; margin-bottom:8px;
  }
  .suite-rail > .template-pricing-panel .fee-hero > span {
    width:100%; font-size:11px; font-weight:800; letter-spacing:.04em; color:#9fd3b4; margin-bottom:2px;
  }
  .suite-rail > .template-pricing-panel .fee-hero strong {
    font-size:50px; font-weight:900; line-height:1; color:#75f19d;
  }
  .suite-rail > .template-pricing-panel .fee-hero b {
    font-size:16px; font-weight:850; color:#fff; align-self:baseline;
  }
  .suite-rail > .template-pricing-panel .fee-hero small {
    width:100%; font-size:10.5px; color:#bbf7d0; margin-top:4px; font-weight:600;
  }

  .suite-rail > .template-pricing-panel .side-price-compare {
    margin-top:8px; border-radius:16px;
  }
  .suite-rail > .template-pricing-panel .side-price-row {
    padding:11px 14px;
  }
  .suite-rail > .template-pricing-panel .side-price-row span b {
    font-size:13px; font-weight:800; color:#234936;
  }
  .suite-rail > .template-pricing-panel .side-price-row span small {
    font-size:10px; color:#64748b; margin-top:2px;
  }
  .suite-rail > .template-pricing-panel .side-price-row > strong {
    font-size:20px; font-weight:850; color:#203c2e;
  }
  .suite-rail > .template-pricing-panel .side-price-row > strong small {
    font-size:10px; color:#64748b;
  }
  .suite-rail > .template-pricing-panel .side-rate-grid span {
    padding:9px 10px;
  }
  .suite-rail > .template-pricing-panel .side-rate-grid small {
    font-size:9.5px; color:#64748b;
  }
  .suite-rail > .template-pricing-panel .side-rate-grid b {
    font-size:12.5px; font-weight:800; color:#244a37; margin-top:2px;
  }
  .suite-rail > .template-pricing-panel .side-price-row.bujji {
    padding:12px 14px;
  }
  .suite-rail > .template-pricing-panel .side-price-row.bujji > strong {
    font-size:26px; font-weight:900; color:#079644;
  }

  .suite-rail > .template-pricing-panel .message-cost-story {
    margin-top:8px; border-radius:16px;
  }
  .suite-rail > .template-pricing-panel .message-cost-head {
    padding:9px 12px; font-size:10.5px; font-weight:800;
  }
  .suite-rail > .template-pricing-panel .message-cost-head b {
    font-size:10.5px; color:#a56705;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation {
    padding:9px 12px; gap:6px;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation small {
    font-size:9px; color:#64748b;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation b {
    font-size:11.5px; font-weight:800; color:#294535; margin-top:2px;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation > i {
    font-size:11px; font-weight:900; color:#9aac9f;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation strong {
    font-size:15px; font-weight:850; color:#9a5d00;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation strong small {
    font-size:8.5px; color:#9a7e55; margin-bottom:2px;
  }
  .suite-rail > .template-pricing-panel .message-cost-pulses {
    height:12px; margin:0 12px; padding:3px 5px;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation.bujji {
    padding:10px 12px; margin-top:5px;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation.bujji b {
    font-size:12px; font-weight:800; color:#08753c;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation.bujji strong {
    font-size:20px; font-weight:900; color:#079644;
  }
  .suite-rail > .template-pricing-panel .message-cost-equation.bujji strong small {
    font-size:9px; color:#4f8867;
  }

  .suite-rail > .template-pricing-panel .template-free-actions {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;
  }
  .suite-rail > .template-pricing-panel .template-free-actions span {
    padding:9px 6px; border-radius:10px; font-size:11.5px; font-weight:800; color:#157d43; text-align:center;
  }
  .suite-rail > .template-pricing-panel .template-price-note {
    margin-top:8px; font-size:9px; line-height:1.45; color:#71897b;
  }
}

/* Below the three-column breakpoint the rail is just a stack; the panels keep
   their own card chrome there. */
@media (max-width:1220px) {
  .suite-rail { display:grid; gap:16px; grid-column:1 / -1; }
}

/* ==========================================================================
   The right-hand chat card is now a Bujji Store product conversation.
   It also sat flush with the stage floor, so its last bubble was clipped by
   .broadcast-visual — lift it clear of the bottom edge.
   ========================================================================== */
.broadcast-visual .ads-chat-card { bottom:auto; top:96px; }

/* header — WhatsApp's dark green bar */
.ads-chat-card .store-chat-head {
  grid-template-columns:auto 26px 1fr auto;
  gap:6px; padding:8px 9px;
  color:#fff; background:#0b6b4f;
}
.store-back { display:grid; place-items:center; width:14px; color:#fff; }
.store-back svg { width:13px; height:13px; }
.ads-chat-card .store-chat-head img { width:26px; height:26px; border-radius:50%; }
.ads-chat-card .store-chat-head p { min-width:0; }
.ads-chat-card .store-chat-head b { display:block; font-size:10.5px; font-weight:750; color:#fff; }
.ads-chat-card .store-chat-head small { font-size:8.5px; color:rgba(255,255,255,.82); }
.store-verified { color:#8ef0bd; font-size:8px; }
.store-actions { display:inline-flex; align-items:center; gap:7px; color:#fff; }
.store-actions svg { width:12px; height:12px; }

/* product card bubble */
.store-chat-body { display:flex; flex-direction:column; gap:7px; }
.store-product {
  position:relative; display:grid; grid-template-columns:52px 1fr; gap:9px;
  padding:8px; border-radius:10px; background:#fff;
  box-shadow:0 3px 10px rgba(20,57,37,.10);
}
.store-product-img {
  grid-row:1; width:52px; height:52px; object-fit:contain;
  border-radius:8px; background:#f3f5f7;
}
.store-product-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.store-product-meta b { font-size:10.5px; font-weight:750; color:#111b16; line-height:1.25; }
.store-product-meta strong { font-size:11.5px; font-weight:800; color:#111b16; }
.store-product-meta a { font-size:9.5px; font-weight:700; color:#12a04d; text-decoration:none; }
.store-product time { position:absolute; right:9px; bottom:34px; font-size:7.5px; color:#8c9a92; }
.store-buy {
  grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:2px; padding:7px 0; border:1px solid #cfe9d9; border-radius:8px;
  background:#fff; color:#12a04d; font-family:inherit; font-size:10.5px; font-weight:800;
  cursor:pointer; transition:background .25s, border-color .25s, transform .25s var(--ease-spring);
}
.store-buy svg { width:12px; height:12px; }
.store-buy:hover { background:#f2fbf6; border-color:#8fdcb0; transform:translateY(-1px); }

/* bubbles */
.ads-chat-card .store-out, .ads-chat-card .store-in {
  position:relative; max-width:86%; margin:0; padding:7px 9px 12px;
  border-radius:9px; font-size:10.5px; line-height:1.45; color:#111b16;
}
.ads-chat-card .store-out { align-self:flex-end; background:#d6f8c8; }
.ads-chat-card .store-in  { align-self:flex-start; background:#fff !important; }
.ads-chat-card .store-in b { font-weight:800; }
.ads-chat-card .store-out small, .ads-chat-card .store-in small {
  position:absolute; right:8px; bottom:3px;
  font-size:7.5px; color:#7d8b83; white-space:nowrap;
}
.ads-chat-card .store-out small i { font-style:normal; color:#3aa3e3; }

/* Reclaim the dead space between the feature list and the visual so the taller
   store conversation has room (feature list ends at 325px; visual now starts
   at ~333px instead of 377px). */
.mockup-broadcast-card .broadcast-visual { height:440px; }
.broadcast-visual .ads-live-stage { top:6px; }
.broadcast-visual .ads-chat-card { top:38px; }

/* ==========================================================================
   Left card: Bujji Store sponsored ad (was the Hind University campus ad).
   ========================================================================== */
.store-ad header p b { font-size:12.5px; font-weight:800; color:#111b16; }
.store-ad header p small { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; color:#7d8b83; }
.store-ad-tick {
  display:grid; place-items:center; width:11px; height:11px; border-radius:50%;
  background:#12a04d; color:#fff; font-size:7px;
}
.store-ad-copy { padding:10px 14px 6px; text-align:left; background:#fff; }
.store-ad-copy h4 {
  margin:0; font-size:17.5px; line-height:1.2; font-weight:850;
  letter-spacing:-.035em; color:#0f2b1c;
}
.store-ad-copy p { margin:5px 0 0; font-size:12px; line-height:1.45; color:#607268; font-weight:500; }
.store-ad-photo {
  display:grid; place-items:center; padding:10px 14px 14px;
  background:linear-gradient(180deg,#fff 0%,#f7fbf8 100%);
  height:auto; min-height:185px; max-height:195px; align-content:center;
}
.store-ad-photo img {
  width:auto; max-width:92%; height:auto; max-height:165px;
  object-fit:contain; filter:drop-shadow(0 12px 20px rgba(20,57,37,.16));
}
.store-ad-photo strong { display:none; }

/* ==========================================================================
   Live Activity strip at the foot of the store conversation.
   ========================================================================== */
.store-live {
  margin-top:4px; padding:9px 10px; border-radius:11px;
  background:#fff; box-shadow:0 6px 18px rgba(20,57,37,.14);
}
.store-live > header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 8px; background:none; color:inherit;
}
.store-live > header b {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; color:#111b16;
}
.store-live > header b svg { width:12px; height:12px; color:#12a04d; }
.store-live > header a { font-size:9px; font-weight:700; color:#12a04d; text-decoration:none; }
.store-live ul {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin:0; padding:0; list-style:none;
}
.store-live li { display:flex; flex-direction:column; gap:1px; text-align:left; }
.store-live li svg { width:12px; height:12px; color:#12a04d; margin-bottom:2px; }
.store-live li b { font-size:12px; font-weight:800; color:#111b16; line-height:1.1; }
.store-live li small { font-size:7px; color:#8c9a92; line-height:1.2; }
.store-live li em { font-style:normal; font-size:7.5px; font-weight:750; color:#12a04d; }

/* ==========================================================================
   FIXES for the Bujji Store pair in Broadcast Marketing.

   1. .social-ad-photo::after paints a dark gradient over the bottom 58% of the
      image — it existed to keep the old campus photo's overlaid text legible.
      On a white product shot it reads as a black frame, so drop it here.
   2. .ads-chat-reply is opacity:0 until the demo adds .demo-active, which is
      why the "Yes! It is available" bubble never appeared. In this static
      composition the reply must simply always be visible.
   3. The ad card was too narrow and too tall, and the two cards sat ~5px apart.
      Rebalance the widths so there is a real gap between them.
   ========================================================================== */
.broadcast-visual .store-ad-photo::after { content:none; }

.broadcast-visual .ads-chat-card .store-in {
  opacity:1 !important;
  transform:none !important;
  margin:0;
}

/* proportions: wider cards, reduced height, and a wider gap between them */
.broadcast-visual .social-ad-card { left:0; width:260px; }
.broadcast-visual .ads-chat-card  { right:0; width:242px; }
.broadcast-visual .ads-route      { left:228px; width:155px; top:36px; }

.broadcast-visual .store-ad-copy {
  padding:10px 14px 6px;
}
.broadcast-visual .store-ad-copy h4 {
  font-size:17.5px;
  line-height:1.2;
}
.broadcast-visual .store-ad-copy p {
  font-size:12px;
  line-height:1.45;
  color:#607268;
}
.broadcast-visual .store-ad-photo {
  height:auto; min-height:185px; max-height:195px; align-content:center;
  padding:10px 14px 14px;
}
.broadcast-visual .store-ad-photo img {
  width:auto; height:auto; max-width:92%; max-height:165px;
  object-fit:contain;
}

/* ==========================================================================
   FLUID RESPONSIVE SYSTEM (Mobile & Tablet Overhaul)
   Fixes the fixed 1673px canvas scale anti-pattern on screens <= 1024px.
   ========================================================================== */

@media (max-width: 1024px) {
  /* 1. Global Card Canvas Resets */
  .bp-canvas, .an-canvas, .fq-canvas {
    --bps: 1 !important;
    --as: 1 !important;
    --fqs: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Pricing Section Responsive Layout */
  .bujji-pricing-card {
    overflow: visible !important;
    height: auto !important;
  }
  .bp-canvas {
    padding: 44px 20px 36px !important;
  }
  .bp-title {
    font-size: clamp(28px, 6vw, 44px) !important;
    line-height: 1.15 !important;
  }
  .bp-sub {
    font-size: 15px !important;
    max-width: 540px !important;
    margin: 10px auto 0 !important;
  }
  .bp-toggle {
    margin-top: 18px !important;
  }
  .bp-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    max-width: 740px !important;
    margin: 28px auto 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bp-plan {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 20px !important;
    min-height: auto !important;
  }
  .bp-plan.is-popular {
    grid-column: span 2 !important;
    margin-top: 0 !important;
    order: -1 !important;
    box-shadow: 0 16px 40px rgba(22,163,74,.18) !important;
  }
  .bp-plan h4 {
    font-size: 20px !important;
  }
  .bp-price b {
    font-size: 38px !important;
  }
  .bp-price small {
    font-size: 14px !important;
  }
  .bp-desc {
    font-size: 14px !important;
  }
  .bp-feats li {
    font-size: 13.5px !important;
  }
  .bp-cta {
    height: 48px !important;
    font-size: 15px !important;
  }
  .bp-assure {
    width: 100% !important;
    max-width: 740px !important;
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 14px 24px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    margin: 24px auto 0 !important;
  }
  .bp-assure span {
    font-size: 13px !important;
  }

  /* 3. Analytics 360° Responsive Layout */
  .bujji-analytics-card {
    overflow: visible !important;
    height: auto !important;
  }
  .an-canvas {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
  .an-intro {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 32px 24px 20px !important;
    box-sizing: border-box !important;
  }
  .an-headline {
    font-size: clamp(24px, 4.5vw, 32px) !important;
    margin-top: 18px !important;
  }
  .an-hero {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 20px 0 !important;
  }
  .an-hero-bot {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 160px !important;
    height: auto !important;
  }
  .an-bubble {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
  }
  .an-live {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
  }
  .an-why {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .an-board {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 32px 20px !important;
    box-sizing: border-box !important;
  }
  .an-secure {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
  }
  .an-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* 4. FAQ Section Responsive Layout */
  .bujji-faq-card {
    overflow: visible !important;
    height: auto !important;
  }
  .fq-canvas {
    padding: 36px 20px !important;
  }
  .fq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    width: 100% !important;
  }
  .fq-left {
    width: 100% !important;
  }
  .fq-title {
    font-size: clamp(32px, 7vw, 48px) !important;
    margin: 18px 0 0 !important;
  }
  .fq-sub {
    font-size: 15px !important;
    margin: 14px 0 0 !important;
    max-width: 100% !important;
  }
  .fq-help {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    text-align: center !important;
  }
  .fq-help-art {
    margin: 0 auto !important;
    max-width: 160px !important;
  }
  .fq-help-body h4 {
    font-size: 20px !important;
  }
  .fq-btn {
    justify-content: center !important;
  }
  .fq-trust {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .fq-right {
    width: 100% !important;
  }
  .fq-item {
    margin-bottom: 12px !important;
  }
  .fq-q {
    padding: 16px !important;
  }
  .fq-text {
    font-size: 15px !important;
  }

  /* 5. Feedback Section Responsive Layout */
  .ef-canvas {
    --efs: 1 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding: 40px 16px !important;
    box-sizing: border-box !important;
  }
  .ef-title {
    font-size: clamp(30px, 6vw, 48px) !important;
  }
  .ef-sub {
    font-size: 15px !important;
  }
  .ef-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 16px !important;
  }
  .ef-track {
    gap: 16px !important;
  }
  .ef-card {
    flex: 0 0 min(320px, 85vw) !important;
    scroll-snap-align: start !important;
    padding: 24px 20px !important;
  }

  /* 6. Overview & Power Studio Responsive Layout */
  .bujji-overview-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 640px) {
  /* Mobile Portrait Single Column Layouts */
  .bp-grid {
    grid-template-columns: 1fr !important;
    max-width: 380px !important;
  }
  .bp-plan.is-popular {
    grid-column: span 1 !important;
  }
  .an-grid {
    grid-template-columns: 1fr !important;
  }
  .an-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* trim the dead space between the last card (FAQ) and the footer */
section.pad.mockup-live-suite { padding-bottom:40px !important; }
section.pad.mockup-live-suite > .container { padding-bottom:0 !important; margin-bottom:0 !important; min-height:0 !important; }
.site-footer { margin-top:0 !important; }

/* Bujji Superpowers — larger card headlines (canvas is scaled, so these read small) */
#bujjiOverview .pw-core h4 { font-size:36px; }
#bujjiOverview .pw-ai h4,
#bujjiOverview .pw-themes h4 { font-size:28px; }
#bujjiOverview .pw-voice h4 { font-size:23px; }
#bujjiOverview .pw-ai .pw-chips > span { padding-block:5px; }
#bujjiOverview .pw-hero h3 { font-size:32px; }
/* Keep all six feature chips clear of the metrics within the existing card. */
@media (min-width:761px) {
  #bujjiOverview .pw-hero {
    grid-template-rows:max-content auto;
    padding-block:16px;
    row-gap:4px;
  }
  #bujjiOverview .pw-hero > .pw-kpis { margin-top:0; }
  #bujjiOverview .pw-hero > .pw-kpis > span { padding:6px 10px 19px; }
}
#bujjiOverview .pw-neural h3 { font-size:30px; }
#bujjiOverview .pw-quad > b { font-size:16px; }
#bujjiOverview .pw-row-body b { font-size:17px; }
#bujjiOverview .pw-mini .pw-row-body b { font-size:15px; }
#bujjiOverview .pw-strip b { font-size:14px; }
#bujjiOverview .pw-pill { font-size:12.5px; }

/* Carousel template preview — swipeable cards inside the live phone */
.real-carousel-intro { width:91%; }
.real-carousel { display:flex; gap:7px; width:100%; margin:6px 0 0; padding:0 4% 6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.real-carousel::-webkit-scrollbar { display:none; }
.real-carousel-card { flex:0 0 62%; scroll-snap-align:start; overflow:hidden; border-radius:9px; background:#fff; box-shadow:0 1px 1px rgba(11,20,26,.13); }
.real-carousel-card img { display:block; width:100%; height:78px; object-fit:cover; }
.real-carousel-card div { padding:7px 8px 5px; }
.real-carousel-card strong { display:block; color:#111b21; font-size:8.5px; line-height:1.25; }
.real-carousel-card p { margin:3px 0 0; color:#54656f; font-size:7.5px; line-height:1.35; }
.real-carousel-card button { display:block; width:100%; padding:7px 4px; border:0; border-top:1px solid #e9edef; color:#027eb5; background:#fff; font:inherit; font-size:8px; font-weight:800; cursor:pointer; }
.real-carousel-card button:hover { background:#f5f9fb; }
.real-carousel-dots { display:flex; justify-content:center; gap:4px; margin-top:2px; }
.real-carousel-dots i { width:4px; height:4px; border-radius:50%; background:#c4ccd0; }
.real-carousel-dots i:first-child { background:#12a04d; }

/* Readable trademark notice beside the footer's legal links. */
.ft-disclaimer { margin:24px 0 18px; font-size:12px; line-height:1.65; color:#4b6055; }
.ft-disclaimer strong { font-weight:700; color:#30483b; }

/* Contact CTAs accommodate translated labels on narrow screens. */
.ft-cta-go, .ft-cta-demo { min-height:35px; height:auto; padding-block:8px; }
.ft-cta-go { padding-inline:10px; }
.ft-cta-go b, .ft-cta-demo b { min-width:0; text-align:center; overflow-wrap:anywhere; }
.ft-cta-go > svg { flex-shrink:0; }