/* Design ported from the Biti React site (biti/Biti/src/index.css):
   CTA glow + shine, glass cards, glowing featured card, iMessage bubbles.
   Loaded after the page stylesheets; remove the <link> to revert. */

/* ---- CTA glow + shine (biti-cta) ---- */
@keyframes biti-cta-glow-light{
  0%,100%{box-shadow:0 12px 20px -12px rgba(0,20,80,.55),0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 18px 28px -11px rgba(0,20,80,.6),0 0 0 6px rgba(255,255,255,.22)}
}
@keyframes biti-cta-glow{
  0%,100%{box-shadow:0 12px 20px -12px rgba(25,59,134,.62),0 5px 10px -7px rgba(0,0,0,.45)}
  50%{box-shadow:0 18px 28px -11px rgba(37,99,235,.72),0 0 0 6px rgba(147,197,253,.2),0 8px 16px -8px rgba(0,0,0,.42)}
}
@keyframes biti-cta-shine{
  0%,18%,100%{transform:translateX(-120%) rotate(18deg);opacity:0}
  28%{opacity:.85}
  55%{transform:translateX(320%) rotate(18deg);opacity:0}
}
.landing .pixel-cta{position:relative;overflow:hidden;isolation:isolate;animation:biti-cta-glow-light 2.6s ease-in-out infinite;transition:transform 120ms ease-out}
.landing .pixel-cta::after{content:"";position:absolute;top:-35%;bottom:-35%;left:0;width:38%;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(0,92,253,.22),transparent);animation:biti-cta-shine 3.8s ease-in-out infinite}
.landing .final-cta .pixel-cta,.landing .plan-box.is-featured .plan-cta{animation-name:biti-cta-glow}
.landing .final-cta .pixel-cta::after,.landing .plan-box.is-featured .plan-cta::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.landing .pixel-cta:hover{transform:translateY(-1px);animation-play-state:paused}
.landing .pixel-cta:hover::after{animation-play-state:paused}

/* ---- Glass cards (glowing-card / biti-glass) ---- */
.product-box,.plan-box:not(.is-featured){
  position:relative;
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 32px rgba(0,0,0,.08),0 0 24px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform 160ms ease-out,box-shadow 160ms ease-out
}
.product-box::before,.plan-box::before{content:"";position:absolute;top:0;left:20px;right:20px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.7) 20%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.7) 80%,transparent 100%);box-shadow:0 0 8px rgba(255,255,255,.4)}
.product-box:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,20,80,.18),0 0 32px rgba(147,197,253,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.product-tag{border-radius:8px}

/* Featured plan: Biti pricing card with the white dot rolling along its edge */
@keyframes biti-dot-roll{
  0%,100%{top:0;left:0}
  25%{top:0;left:100%}
  50%{top:100%;left:100%}
  75%{top:100%;left:0}
}
.plan-box.is-featured{
  position:relative;
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#ecf6ff 100%);
  box-shadow:0 22px 40px -18px rgba(0,20,80,.55),0 0 32px rgba(147,197,253,.45),inset 0 1px 0 #fff
}
.plan-box.is-featured::before{display:none}
.plan-box.is-featured::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.95),0 0 24px rgba(147,197,253,.9);transform:translate(-50%,-50%);animation:biti-dot-roll 4s linear infinite;pointer-events:none}

/* Final CTA panel as a Biti glass window */
.final-cta{border-radius:22px;border:1px solid rgba(111,166,237,.88);background:linear-gradient(180deg,#f7fbff 0%,#d7e9fc 100%);box-shadow:0 24px 50px -22px rgba(0,20,80,.55),inset 0 1px 0 rgba(255,255,255,.95)}

/* ---- Desk chat as iMessage bubbles (msg-bubble) ---- */
.desk .chat-bubble{position:relative;border-radius:18px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.desk .chat-msg.is-biti:not(.is-nudge):not(.is-failed) .chat-bubble{border:1px solid rgba(121,174,232,.45);border-bottom-left-radius:6px;background:linear-gradient(180deg,#fff 0%,#eaf3fc 100%)}
.desk .chat-msg.is-user .chat-bubble{border:0;border-bottom-right-radius:6px;background:linear-gradient(180deg,#cbe5ff 0%,#9ccfff 40%,#6db8f7 100%);color:#000;box-shadow:0 2px 8px rgba(30,91,180,.25)}
.desk .chat-msg.is-user .chat-bubble::before{content:"";position:absolute;inset:0 0 50% 0;border-radius:18px 18px 0 0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 60%,rgba(255,255,255,0) 100%)}
.desk .chat-msg.is-user .chat-bubble::after{content:"";position:absolute;left:10px;right:10px;top:1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 25%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.85) 75%,transparent 100%)}
.desk .chat-msg.is-user .chat-text{color:#000}
.desk .chat-msg.is-user .chat-who,.desk .chat-msg.is-user .chat-who time{color:#1d4f8f}
.desk .chat-msg.is-nudge .chat-bubble,.desk .chat-msg.is-failed .chat-bubble{border-bottom-left-radius:6px}
.desk .chat-avatar{border-radius:50%;border-color:rgba(111,166,237,.88);background:linear-gradient(180deg,#f7fbff,#d7e9fc)}

@media(prefers-reduced-motion:reduce){
  .landing .pixel-cta,.landing .pixel-cta::after,.plan-box.is-featured::after{animation:none}
  .product-box{transition:none}
}

/* ---- /start onboarding ---- */
/* Path choices as Biti glass cards */
.onboarding .path-choice{position:relative;border:1px solid rgba(121,174,232,.55);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(236,246,255,.92) 100%);box-shadow:0 16px 36px -20px rgba(0,20,80,.55),inset 0 1px 0 rgba(255,255,255,.95);transition:transform 160ms ease-out,box-shadow 160ms ease-out}
.onboarding .path-choice:hover,.onboarding .path-choice:focus-visible{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(0,20,80,.6),0 0 0 6px rgba(147,197,253,.25),inset 0 1px 0 #fff}
.onboarding .path-choice:focus-visible{outline:2px solid #fff;outline-offset:3px}
.onboarding .path-choice.has-art{overflow:hidden}
.onboarding .path-art-wrap{border-bottom:1px solid rgba(111,166,237,.88)}
.onboarding .path-art-wrap::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0))}
/* Annual: featured card with the rolling edge dot */
.onboarding .annual-choice{border-color:rgba(0,92,253,.55);background:linear-gradient(180deg,#d7ecff 0%,#eef7ff 55%,#fff 100%)}
.onboarding .annual-choice::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.95),0 0 24px rgba(37,99,235,.8);transform:translate(-50%,-50%);animation:biti-dot-roll 4s linear infinite;pointer-events:none}
.onboarding .annual-choice b{border-radius:6px}

/* Form panel as a Biti glass window */
.onboarding .start-split .start-panel{border:1px solid rgba(111,166,237,.88);border-radius:22px;background:linear-gradient(180deg,#f7fbff 0%,#eaf3fc 100%);box-shadow:0 24px 50px -22px rgba(0,20,80,.55),inset 0 1px 0 rgba(255,255,255,.95)}
.onboarding fieldset{border-top-color:rgba(121,174,232,.4)}
.onboarding .start-form textarea,.onboarding .start-form input,.onboarding .start-form select{border:1px solid rgba(121,174,232,.7);border-radius:12px;background:#fff;box-shadow:inset 0 1px 2px rgba(30,91,180,.08);transition:border-color 120ms,box-shadow 120ms}
.onboarding .start-form textarea:focus,.onboarding .start-form input:focus,.onboarding .start-form select:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 4px rgba(147,197,253,.45)}
.onboarding .start-form .is-prefilled{border-color:#58b37a}
.onboarding .site-prefill{border:1px solid rgba(121,174,232,.55);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#ecf6ff 100%);box-shadow:inset 0 1px 0 #fff}

/* Primary buttons: Biti blue CTA with glow + shine */
.onboarding .primary{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(33,105,198,.6);border-radius:14px;background:linear-gradient(180deg,#3b8bff 0%,#1f6dff 45%,#005cfd 100%);box-shadow:none;transition:transform 120ms ease-out,filter 120ms ease-out;animation:biti-cta-glow 2.6s ease-in-out infinite}
.onboarding .primary::before{content:"";position:absolute;left:10px;right:10px;top:1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 50%,transparent)}
.onboarding .primary::after{content:"";position:absolute;top:-35%;bottom:-35%;left:0;width:38%;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:biti-cta-shine 3.8s ease-in-out infinite}
.onboarding .primary:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);animation-play-state:paused}
.onboarding .primary:disabled{animation:none}
.onboarding .prefill-row .secondary{position:relative;border:1px solid rgba(121,174,232,.7);border-radius:12px;background:linear-gradient(180deg,#e6eef8 0%,#d0dfef 40%,#b8cfdf 100%);box-shadow:0 2px 8px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.onboarding .prefill-row .secondary:hover:not(:disabled){background:linear-gradient(180deg,#cbe5ff 0%,#9ccfff 40%,#6db8f7 100%);color:#000}

/* Idea chat as iMessage bubbles */
.onboarding .invent-msg{max-width:88%;padding:9px 13px 10px;border:1px solid rgba(121,174,232,.45);border-radius:18px;border-bottom-left-radius:6px;background:linear-gradient(180deg,#fff 0%,#eaf3fc 100%);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.onboarding .invent-msg.is-user{position:relative;justify-self:end;border:0;border-radius:18px;border-bottom-right-radius:6px;background:linear-gradient(180deg,#cbe5ff 0%,#9ccfff 40%,#6db8f7 100%);color:#000;box-shadow:0 2px 8px rgba(30,91,180,.25)}
.onboarding .invent-msg.is-user .chat-who{color:#1d4f8f}
.onboarding .invent-card{border-top-color:rgba(121,174,232,.4)}

/* Ready + pay steps */
.onboarding .ready-mark{border-radius:12px;border-color:rgba(111,166,237,.88);background:linear-gradient(180deg,#f7fbff,#d7e9fc)}
.onboarding .annual-checkout{border:1px solid rgba(111,166,237,.88);border-radius:22px;box-shadow:0 24px 50px -22px rgba(0,20,80,.55),inset 0 1px 0 #fff}
.onboarding .pay-embed{border-radius:22px;overflow:hidden}
.onboarding .offer-chip{border-radius:8px}

@media(prefers-reduced-motion:reduce){
  .onboarding .primary,.onboarding .primary::after,.onboarding .annual-choice::after{animation:none}
  .onboarding .path-choice{transition:none}
}

/* ---- Footer: Biti glass panel + email icon button ---- */
.landing footer{margin-bottom:28px;padding:36px 36px 22px;border:1px solid rgba(255,255,255,.35);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 50px -28px rgba(0,20,80,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.footer-col a:not(.footer-mail){transition:color 120ms}
.footer-col a:not(.footer-mail)::before{border-radius:50%}
.footer-icons{display:flex;gap:8px}
.footer-icons .footer-mail{width:44px;height:44px;border-radius:14px}
.footer-icons .footer-mail svg{width:21px;height:21px}
.footer-mail{display:grid;place-items:center;width:52px;height:52px;margin-top:2px;border-radius:16px;border:1px solid rgba(111,166,237,.88);background:linear-gradient(180deg,#f7fbff 0%,#cbe5ff 55%,#9ccfff 100%);box-shadow:0 12px 22px -12px rgba(0,20,80,.6),inset 0 1px 0 #fff;position:relative;transition:transform 140ms ease-out,box-shadow 140ms ease-out}
.footer-col a.footer-mail::before{content:"";position:absolute;left:8px;right:8px;top:3px;width:auto;height:40%;margin:0;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));vertical-align:0}
.footer-mail svg{position:relative;width:24px;height:24px;fill:none;stroke:#005cfd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-mail:hover{transform:translateY(-2px);box-shadow:0 16px 26px -12px rgba(0,20,80,.65),0 0 0 6px rgba(255,255,255,.18),inset 0 1px 0 #fff}
.footer-col a.footer-mail:hover::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
.landing footer a.footer-mail:focus-visible{outline:2px solid #fff;outline-offset:4px}
.footer-bar{border-top-color:rgba(255,255,255,.2)}
@media(max-width:680px){.landing footer{padding:28px 20px 18px;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.footer-mail{transition:none}}

/* Book a call dialog (footer): Biti blue header, white calendar, pixel details. */
dialog.book-call{--bc-blue:#005cfd;width:min(1000px,calc(100vw - 32px));height:min(800px,calc(100vh - 32px));padding:0;border:1px solid rgba(255,255,255,.7);border-radius:18px;background:#fff;color:#111;box-shadow:0 30px 80px -20px rgba(0,20,80,.55),0 0 0 6px rgba(255,255,255,.12);overflow:hidden}
dialog.book-call::backdrop{background:rgba(0,28,90,.6);backdrop-filter:blur(3px)}
dialog.book-call[open]{display:flex;flex-direction:column;animation:book-call-in .18s ease-out}
@keyframes book-call-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.book-call-head{flex:0 0 auto;display:block;height:auto;padding:14px 20px 0;background:linear-gradient(180deg,#1a6dff 0%,var(--bc-blue) 100%);color:#fff}
.book-call-top{display:flex;align-items:center;gap:14px}
.book-call-brand{font:600 20px/1 'Pixelify Sans',monospace;letter-spacing:.02em}
.book-call-kicker{flex:1;color:rgba(255,255,255,.75);font:10px 'DM Mono',monospace;letter-spacing:.12em}
.book-call-close{margin-left:auto;padding:7px 12px;border:1px solid #fff;border-radius:0;background:#fff;color:var(--bc-blue);font:600 12px/1 'Pixelify Sans',monospace;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease-out}
.book-call-close:hover{transform:translateY(-1px)}
.book-call-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.book-call-title{display:flex;align-items:center;gap:14px;padding:16px 0 14px}
.book-call-title img{flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(0,20,80,.35))}
.book-call-title h2{margin:0 0 4px;font:400 24px/1.15 Georgia,'Times New Roman',serif}
.book-call-title p{margin:0;color:rgba(255,255,255,.85);font:14px/1.4 Georgia,'Times New Roman',serif}
.book-call-rule{height:2px;margin:0 -20px;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px)}
.book-call-frame{position:relative;flex:1;min-height:0;overflow:auto;background:#fff}
.book-call-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#7a8aa8;font:11px 'DM Mono',monospace;letter-spacing:.1em;pointer-events:none}
.book-call-frame iframe+.book-call-loading,.book-call-frame:has(iframe) .book-call-loading{display:none}
.book-call-fallback{margin:0;padding:9px 20px;border-top:1px dashed #cfd9ee;background:#f6f9ff;color:#5b6b88;font:11px 'DM Mono',monospace;letter-spacing:.02em}
.book-call-fallback a{color:var(--bc-blue)}
@media(max-width:600px){dialog.book-call{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:14px}.book-call-kicker{display:none}.book-call-title h2{font-size:19px}.book-call-title p{font-size:13px}.book-call-title img{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){dialog.book-call[open]{animation:none}}
/* Footer: the Support icons get a column that fits them, so they never run under "Built with Biti". */
.footer-icons{display:grid;grid-template-columns:repeat(4,44px);gap:8px}
@media(min-width:1001px){.footer-main:has(.footer-badge){grid-template-columns:minmax(220px,1.3fr) repeat(2,minmax(120px,.55fr)) max-content auto;column-gap:32px}}
@media(min-width:1001px) and (max-width:1240px){.footer-icons{grid-template-columns:repeat(2,44px)}}
@media(max-width:380px){.footer-icons{grid-template-columns:repeat(2,44px)}}
@media(max-width:640px){.footer-main:has(.footer-badge){grid-template-columns:repeat(2,minmax(0,1fr))}}