/* =============================================================
   Logxa — premium design layer (used by layouts/premium)
   Tailwind CDN handles utilities; this file holds the motion
   primitives and a few component recipes.
   ============================================================= */

:root {
  --brand: #009688;
  --brand-2: #34d399;
  --line: rgba(15, 23, 42, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.dark { --line: rgba(255, 255, 255, .08); }

[data-id="branding"] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ---------- Typography recipes ---------- */
.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.032em;
  color: rgb(2 6 23);
  text-wrap: balance;
}
.dark .section-title { color: #fff; }
.section-lead {
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(71 85 105);
  text-wrap: pretty;
}
.dark .section-lead { color: rgb(148 163 184); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  color: #00796b;
  background: linear-gradient(180deg, rgba(0,150,136,.08), rgba(0,150,136,.03));
  border: 1px solid rgba(0,150,136,.18);
}
.dark .eyebrow, .eyebrow-dark {
  color: #58d7c1;
  background: rgba(0,150,136,.1);
  border-color: rgba(88,215,193,.2);
}

.text-gradient {
  background: linear-gradient(100deg, #00796b 0%, #009688 30%, #26bba5 55%, #10b981 75%, #009688 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientShift 7s ease-in-out infinite alternate;
}
.dark .text-gradient {
  background-image: linear-gradient(100deg, #58d7c1 0%, #34d399 35%, #a7f3d0 55%, #26bba5 80%, #58d7c1 100%);
}
@keyframes gradientShift { to { background-position: 100% center; } }

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  background: linear-gradient(180deg, #0fa08d, #00796b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1), 0 8px 24px -8px rgba(0,150,136,.6);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 32px -8px rgba(0,150,136,.7); }
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
  color: rgb(15 23 42);
  background: rgba(255,255,255,.7);
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
}
.btn-ghost:hover { border-color: rgb(203 213 225); background: #fff; transform: translateY(-1px); }
.dark .btn-ghost { color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

/* ---------- Nav ---------- */
.nav-shell.is-scrolled {
  background: rgba(255,255,255,.75);
  border-color: rgba(226,232,240,.9);
  box-shadow: 0 8px 32px -12px rgba(15,23,42,.15);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
.dark .nav-shell.is-scrolled { background: rgba(10,17,20,.7); border-color: rgba(255,255,255,.08); box-shadow: 0 8px 32px -12px rgba(0,0,0,.6); }

.nav-dd-panel {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 6px) scale(.98);
  transition: opacity .18s ease, transform .25s var(--ease-out), visibility .18s;
}
.nav-dd.is-open .nav-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.nav-dd.is-open .nav-dd-chev { transform: rotate(180deg); }

.mnav { display: grid; grid-template-rows: 0fr; opacity: 0; border-width: 0; transition: grid-template-rows .35s var(--ease-out), opacity .25s; }
.mnav > div { min-height: 0; }
.mnav.is-open { grid-template-rows: 1fr; opacity: 1; border-width: 1px; }
.mnav:not(.is-open) > div { padding: 0; }

/* ---------- Backgrounds ---------- */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
}
.bg-grid-dark {
  --line: rgba(255,255,255,.06);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 100%);
}

/* Hero backdrop: soft light-green wash fading down from the top (blobs removed) */
.aurora { background: linear-gradient(180deg, rgba(167,243,208,.055) 0%, rgba(204,251,241,.035) 35%, rgba(255,255,255,0) 100%); }
.dark .aurora { background: linear-gradient(180deg, rgba(0,150,136,.022) 0%, rgba(0,150,136,.008) 40%, rgba(5,9,11,0) 100%); }
.aurora > span { display: none; }
@keyframes drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(60px,40px,0) scale(1.15); }
}

/* Announcement pill with animated gradient border */
.announce {
  position: relative;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.dark .announce { background: rgba(255,255,255,.04); }
.announce::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--ang, 0deg), rgba(0,150,136,.15), #009688, #34d399, rgba(0,150,136,.15) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAng 4s linear infinite;
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinAng { to { --ang: 360deg; } }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Hero stage ---------- */
.hero-stage { perspective: 2000px; }
.hero-window {
  transform-origin: 50% 0%;
  transform: rotateX(var(--tilt, 14deg)) scale(var(--scale, .96));
  transition: transform .1s linear;
  will-change: transform;
}
.hero-glow {
  background: radial-gradient(60% 60% at 50% 30%, rgba(0,150,136,.35), transparent 70%);
  filter: blur(40px);
}
.dark .hero-glow { background: radial-gradient(60% 60% at 50% 30%, rgba(0,150,136,.45), transparent 70%); }

.type-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.route-dash { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.pin-pulse { transform-box: fill-box; transform-origin: center; animation: pinPulse 2.2s ease-out infinite; }
@keyframes pinPulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }

.float-card { animation: floaty 6s ease-in-out infinite; }
.float-b { animation-delay: -3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bar-fill { width: 0; animation: barFill 3.2s var(--ease-out) infinite; }
@keyframes barFill { 0% { width: 0; } 60%, 100% { width: 100%; } }

.sig-draw { stroke-dasharray: 520; stroke-dashoffset: 520; animation: sig 4.5s ease-in-out infinite; }
@keyframes sig { 0% { stroke-dashoffset: 520; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Live feed */
.feed li {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem; border-radius: .6rem;
  font-size: 11px;
  border: 1px solid transparent;
  transition: background .4s;
}
.feed li.is-new { animation: feedIn .6s var(--ease-out); background: rgba(0,150,136,.07); border-color: rgba(0,150,136,.15); }
.feed li .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; gap: 2.75rem; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  color: rgb(148 163 184);
  transition: color .2s;
}
.marquee-item:hover { color: rgb(15 23 42); }
.dark .marquee-item { color: rgb(100 116 139); }
.dark .marquee-item:hover { color: #fff; }
@keyframes marquee { to { transform: translateX(calc(-50% - 1.375rem)); } }

/* ---------- Spotlight cards ---------- */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(0,150,136,.09), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.spot::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(0,150,136,.55), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }
.dark .spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(52,211,153,.07), transparent 45%); }

/* ---------- Bento ---------- */
.bento {
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 1.5rem; padding: 1.5rem;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
}
.dark .bento { background: #0a1114; border-color: rgba(255,255,255,.08); }
@media (min-width: 640px) { .bento { padding: 1.75rem; } }
.bento-icon { display: inline-flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: .6rem; background: rgba(0,150,136,.1); color: #00796b; }
.dark .bento-icon { color: #58d7c1; }
.bento-title { margin-top: 1rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: rgb(15 23 42); }
.dark .bento-title { color: #fff; }
.bento-text { margin-top: .4rem; font-size: .875rem; line-height: 1.6; color: rgb(100 116 139); }
.dark .bento-text { color: rgb(148 163 184); }
.bento-visual { transition: transform .5s var(--ease-out); }
.bento:hover .bento-visual { transform: translateY(-4px); }

.trk-progress { stroke-dasharray: 400; stroke-dashoffset: 400; animation: trk 6s linear infinite; }
@keyframes trk { to { stroke-dashoffset: 0; } }

.scan-laser {
  position: absolute; left: 8%; right: 8%; top: 14px; height: 2px; border-radius: 2px;
  background: #ef4444; box-shadow: 0 0 12px 2px rgba(239,68,68,.6);
  animation: laser 2.4s ease-in-out infinite;
}
@keyframes laser { 0%, 100% { top: 14px; } 50% { top: 70px; } }

.paid-stamp { opacity: 0; transform: rotate(-12deg) scale(1.8); }
.is-in .paid-stamp, [data-reveal].is-in .paid-stamp { animation: stamp 4s var(--ease-out) .6s infinite; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.8); }
  12%, 85% { opacity: 1; transform: rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}

.bar-grow { height: 0; transition: height 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.is-in .bar-grow { height: var(--h); }

/* White-label theme cycling (driven by JS setting --wl) */
.wl-card { --wl: #009688; }
.wl-logo, .wl-btn { background: var(--wl); transition: background .5s; }
.wl-swatch { transition: transform .3s var(--ease-out), box-shadow .3s; }
.wl-swatch.is-active { transform: scale(1.2); box-shadow: 0 0 0 2px var(--wl-ring, #009688); }
.wl-domain, .wl-name { transition: opacity .25s; }

/* ---------- Journey ---------- */
.journey-progress { width: 0; transition: width .6s var(--ease-out); }
.journey-step.is-active .journey-dot { background: #009688; border-color: #34d399; color: #fff; box-shadow: 0 0 0 6px rgba(0,150,136,.2), 0 0 30px rgba(52,211,153,.4); }
.journey-step.is-done .journey-dot { border-color: rgba(52,211,153,.5); color: #58d7c1; }
.journey-step.is-active span:last-child { color: #fff; }
.journey-panel { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s; }
.journey-panel.is-active { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) {
  .journey-panel { position: relative !important; display: none; }
  .journey-panel.is-active { display: grid; }
}

/* ---------- Orbit ---------- */
.orbit { animation: spin 60s linear infinite; }
.orbit-inner { animation-duration: 40s; animation-direction: reverse; }
.orbit-chip {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .8rem; border-radius: .75rem;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  color: rgb(30 41 59); background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 8px 24px -10px rgba(15,23,42,.2);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r-px, 0)) rotate(calc(-1 * var(--a)));
}
.orbit-chip-sm { font-size: .72rem; padding: .35rem .6rem; color: #00796b; }
.dark .orbit-chip { background: #0e171b; border-color: rgba(255,255,255,.1); color: #e2e8f0; box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); }
.dark .orbit-chip-sm { color: #58d7c1; }
.orbit-outer .orbit-chip { animation: counter 60s linear infinite; }
.orbit-inner .orbit-chip { animation: counter 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter {
  from { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r-px)) rotate(calc(-1 * var(--a))) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r-px)) rotate(calc(-1 * var(--a))) rotate(-360deg); }
}
.orbit-wrap:hover .orbit, .orbit-wrap:hover .orbit-chip { animation-play-state: paused; }

/* ---------- FAQ ---------- */
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .faq-body { animation: faqIn .4s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Demo form overrides (shared partial) ---------- */
.demo-form-shell .demo-booking-header { background: rgb(248 250 252) !important; }
.dark .demo-form-shell .demo-booking-header { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; }
.demo-form-shell .demo-input { border-radius: .6rem; transition: border-color .15s, box-shadow .15s; }
.demo-form-shell .demo-input:focus { outline: none; border-color: #009688; box-shadow: 0 0 0 4px rgba(0,150,136,.15); }
.dark .demo-form-shell .demo-input { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); color-scheme: dark; }
.demo-form-shell button[type="submit"] { background: linear-gradient(180deg, #0fa08d, #00796b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px -8px rgba(0,150,136,.6); }
.field-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }

/* ---------- Footer ---------- */
.footer-word {
  font-size: clamp(5rem, 22vw, 17rem);
  background: linear-gradient(180deg, rgba(15,23,42,.09), rgba(15,23,42,0) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: -0.18em;
}
.dark .footer-word { background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 80%); }


/* ---------- Dark sections: lighter gradient text ---------- */
.bg-ink-950 .text-gradient { background-image: linear-gradient(100deg, #58d7c1 0%, #34d399 35%, #a7f3d0 55%, #26bba5 80%, #58d7c1 100%); }

/* ---------- Long-form content (features, articles, legal) ---------- */
.prose-lx { color: rgb(51 65 85); font-size: 1.0625rem; line-height: 1.8; }
.dark .prose-lx { color: rgb(203 213 225); }
.prose-lx > * + * { margin-top: 1.1em; }
.prose-lx h2 { margin-top: 2.2em; scroll-margin-top: 7rem; font-size: 1.6rem; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; color: rgb(2 6 23); }
.prose-lx h2:first-child { margin-top: 0; }
.prose-lx h3 { margin-top: 1.8em; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; color: rgb(15 23 42); }
.dark .prose-lx h2, .dark .prose-lx h3 { color: #fff; }
.prose-lx p { text-wrap: pretty; }
.prose-lx a { color: #00796b; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(0,150,136,.35); text-underline-offset: 3px; }
.dark .prose-lx a { color: #58d7c1; }
.prose-lx b, .prose-lx strong { color: rgb(15 23 42); font-weight: 600; }
.dark .prose-lx b, .dark .prose-lx strong { color: #fff; }
.prose-lx ul, .prose-lx ol { padding-left: 0; list-style: none; }
.prose-lx li { position: relative; padding-left: 1.75rem; margin-top: .6em; }
.prose-lx ul > li::before { content: ""; position: absolute; left: .35rem; top: .7em; width: .45rem; height: .45rem; border-radius: 999px; background: #009688; box-shadow: 0 0 0 4px rgba(0,150,136,.12); }
.prose-lx ol { counter-reset: lx; }
.prose-lx ol > li { counter-increment: lx; }
.prose-lx ol > li::before { content: counter(lx); position: absolute; left: 0; top: .25em; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: rgba(0,150,136,.12); color: #00796b; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.prose-lx h2 + p::first-line { font-weight: 500; }
.prose-article > p:first-child::first-letter { float: left; font-size: 3.4em; line-height: .9; padding: .08em .12em 0 0; font-weight: 600; color: #009688; }
.toc a.is-active { border-color: #009688; color: rgb(15 23 42); font-weight: 500; }
.dark .toc a.is-active { color: #fff; }

/* ---------- Feature filter ---------- */
.ff-tab { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; height: 2.5rem; padding: 0 .9rem; border-radius: .75rem; font-size: .8125rem; font-weight: 500; color: rgb(71 85 105); transition: background .2s, color .2s; }
.ff-tab:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
.ff-tab.is-active { background: rgb(15 23 42); color: #fff; }
.dark .ff-tab { color: rgb(148 163 184); }
.dark .ff-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.dark .ff-tab.is-active { background: #fff; color: rgb(15 23 42); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Misc visuals ---------- */
.consol-box { animation: consol 3.6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes consol { 0%, 20% { transform: none; opacity: 1; } 55%, 70% { transform: translateX(calc((3 - var(--i)) * 14px)) scale(.85); opacity: .35; } 100% { transform: none; opacity: 1; } }
.feature-orb { animation: floaty 6s ease-in-out infinite; }
.flow-line { counter-reset: none; }

/* ---------- Form fields (premium forms) ---------- */
.lx-label { display: block; margin-bottom: .4rem; font-size: .8125rem; font-weight: 500; color: rgb(51 65 85); }
.dark .lx-label { color: rgb(203 213 225); }
.lx-input { width: 100%; height: 2.75rem; border-radius: .75rem; border: 1px solid rgb(226 232 240); background: #fff; padding: 0 .9rem; font-size: .9rem; color: rgb(15 23 42); transition: border-color .15s, box-shadow .15s; }
textarea.lx-input { height: auto; padding: .7rem .9rem; resize: vertical; }
.lx-input:focus { outline: none; border-color: #009688; box-shadow: 0 0 0 4px rgba(0,150,136,.15); }
.lx-input::placeholder { color: rgb(148 163 184); }
.dark .lx-input { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); color: #fff; color-scheme: dark; }

/* ---------- Signup flow (ported from web.css) ---------- */

/* Signup success card */
.signup-success-card {
  animation: fade-scale-in 0.45s ease-out;
}

@keyframes fade-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.signup-success-icon {
  animation: icon-pop 0.5s ease-out 0.12s both;
}

@keyframes icon-pop {
  0% { opacity: 0; transform: scale(0.5); }
  55% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* Signup wizard — horizontal stepper */
.signup-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.signup-stepper .signup-step {
  flex: 1;
  min-width: 0;
  text-align: center;
  position: relative;
}

.signup-step-track {
  display: flex;
  align-items: center;
  width: 100%;
}

.signup-step-line {
  flex: 1;
  height: 2px;
  background: rgb(226 232 240);
  transition: background 0.35s ease;
}

.signup-step-line.is-empty {
  background: transparent;
}

.dark .signup-step-line:not(.is-empty) {
  background: rgb(51 65 85);
}

.signup-step.is-done .signup-step-line--right,
.signup-step.is-done + .signup-step .signup-step-line--left,
.signup-step.is-active .signup-step-line--left {
  background: #009688;
}

.signup-step.is-active .signup-step-line--left.is-empty {
  background: transparent;
}

.signup-step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid rgb(226 232 240);
  background: white;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(100 116 139);
  transition: all 0.25s ease;
  z-index: 1;
}

.dark .signup-step-num {
  border-color: rgb(51 65 85);
  background: rgb(30 41 59);
  color: rgb(148 163 184);
}

.signup-step-label {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(100 116 139);
  line-height: 1.3;
  padding: 0 0.25rem;
}

.dark .signup-step-label {
  color: rgb(148 163 184);
}

.signup-step.is-active .signup-step-label {
  color: rgb(15 23 42);
}

.dark .signup-step.is-active .signup-step-label {
  color: white;
}

.signup-step.is-done .signup-step-label {
  color: #009688;
}

.signup-step-desc {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: rgb(148 163 184);
  line-height: 1.3;
  padding: 0 0.25rem;
  display: none;
}

@media (min-width: 480px) {
  .signup-step-desc {
    display: block;
  }
}

.signup-step.is-active .signup-step-desc {
  color: rgb(100 116 139);
}

.dark .signup-step.is-active .signup-step-desc {
  color: rgb(148 163 184);
}

.signup-panel {
  display: none;
}

.signup-panel.is-visible {
  display: block;
  animation: fadeIn 0.35s ease;
}

.signup-step.is-active .signup-step-num {
  border-color: #009688;
  background: #009688;
  color: white;
  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.15);
}

.signup-step.is-done .signup-step-num {
  border-color: #009688;
  background: #e0f2f1;
  color: #009688;
}

.dark .signup-step.is-done .signup-step-num {
  background: rgba(0, 150, 136, 0.2);
  color: #4db6ac;
}

.signup-step.is-done .signup-step-num {
  font-size: 0;
}

.signup-step.is-done .signup-step-num::after {
  content: '✓';
  font-size: 0.875rem;
  font-weight: 700;
}

.provision-spinner {
  animation: hubRingPulse 2s ease-in-out infinite;
}

.provision-step.is-done {
  color: rgb(0 150 136);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hubRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.12); opacity: 0.12; }
}
.signup-step.is-active .signup-step-num { background: #009688; border-color: #009688; color: #fff; box-shadow: 0 0 0 6px rgba(0,150,136,.15); }

/* Square grid pattern removed site-wide (kept class hooks so markup stays valid) */
.bg-grid { display: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero-window { transform: none; }
}