/* ChatDock design system.
   ─────────────────────────────────────────────────────────────────────────
   Ported verbatim from the QuickAssistBot front end (Vite + Tailwind +
   shadcn/ui) so the two read as one product. Every token below is the same
   value the Tailwind build emitted: the HSL triples come from that project's
   src/index.css, the radius scale, container steps, button sizes and type
   ramp from its tailwind.config.ts.

   The old build had a compiler to expand utility classes. This one does not,
   so the utilities we actually use are written out longhand here. Keep that
   trade in mind when editing: a class in a template must exist in this file,
   there is no Tailwind to invent it at build time. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --background:210 20% 98%;
  --foreground:220 25% 10%;

  --card:0 0% 100%;
  --card-foreground:220 25% 10%;

  --popover:0 0% 100%;
  --popover-foreground:220 25% 10%;

  /* Primary — deep teal */
  --primary:185 84% 25%;
  --primary-foreground:0 0% 100%;
  --primary-glow:185 84% 35%;

  /* Secondary — soft slate */
  --secondary:210 20% 94%;
  --secondary-foreground:220 25% 20%;

  --muted:210 15% 92%;
  --muted-foreground:220 10% 45%;

  /* Accent — vibrant cyan */
  --accent:185 100% 40%;
  --accent-foreground:0 0% 100%;

  --destructive:0 84% 60%;
  --destructive-foreground:0 0% 100%;

  --border:210 20% 88%;
  --input:210 20% 88%;
  --ring:185 84% 25%;

  --radius:0.75rem;

  --success:160 84% 35%;
  --success-foreground:0 0% 100%;
  --warning:38 92% 50%;
  --warning-foreground:0 0% 100%;
  --info:205 100% 50%;
  --info-foreground:0 0% 100%;

  --gradient-primary:linear-gradient(135deg,hsl(185 84% 25%) 0%,hsl(205 84% 35%) 100%);
  --gradient-hero:linear-gradient(180deg,hsl(210 20% 98%) 0%,hsl(210 25% 95%) 100%);
  --gradient-card:linear-gradient(180deg,hsl(0 0% 100%) 0%,hsl(210 20% 99%) 100%);
  --gradient-glow:radial-gradient(ellipse 80% 50% at 50% -20%,hsl(185 84% 25% / .15),transparent);
  --gradient-mesh:radial-gradient(at 40% 20%,hsl(185 84% 35% / .1) 0px,transparent 50%),
                  radial-gradient(at 80% 0%,hsl(205 84% 45% / .1) 0px,transparent 50%),
                  radial-gradient(at 0% 50%,hsl(185 100% 40% / .05) 0px,transparent 50%);

  --shadow-sm:0 1px 2px hsl(220 25% 10% / .05);
  --shadow-md:0 4px 12px hsl(220 25% 10% / .08);
  --shadow-lg:0 12px 40px hsl(220 25% 10% / .12);
  --shadow-xl:0 20px 56px hsl(220 25% 10% / .16);
  --shadow-glow:0 0 60px hsl(185 84% 25% / .2);
  --shadow-widget:0 8px 32px hsl(220 25% 10% / .15);

  /* Radius scale, matching tailwind's borderRadius extension. */
  --r-sm:calc(var(--radius) - 4px);
  --r-md:calc(var(--radius) - 2px);
  --r-lg:var(--radius);
  --r-xl:calc(var(--radius) + 4px);
  --r-2xl:calc(var(--radius) + 8px);
  --r-3xl:calc(var(--radius) + 16px);

  /* ── Legacy aliases ──────────────────────────────────────────────────
     Pages written before this design system set colours inline, e.g. a
     usage meter filling with var(--go). Those names are kept and pointed
     at the new tokens, so the inline references keep working and there is
     still exactly one place a colour is defined. */
  --teal:hsl(var(--primary));
  --ink:hsl(var(--foreground));
  --ink-2:hsl(var(--muted-foreground));
  --ink-3:hsl(220 10% 60%);
  --rule:hsl(var(--border));
  --r:var(--radius);
  --go:hsl(var(--success));
  --go-wash:hsl(var(--success) / .1);
  --stop:hsl(var(--destructive));
  --stop-wash:hsl(var(--destructive) / .1);
  --hivis:hsl(var(--warning));
  --hivis-ink:#8a5a00;
  --hivis-wash:hsl(var(--warning) / .12);
  --warn:hsl(var(--warning));
  --warn-wash:hsl(var(--warning) / .12);
  --warn-rule:hsl(var(--warning) / .3);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;border-color:hsl(var(--border))}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4,h5,h6{font-family:'Inter',system-ui,sans-serif;letter-spacing:-0.025em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
::selection{background:hsl(var(--primary) / .15)}

/* The site leans on motion for the hero and the language ticker. Anyone who
   has asked their OS to stop that gets a still page, not a broken one. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.container{width:100%;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:640px){.container{max-width:640px;padding-inline:2rem}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1400px){.container{max-width:1400px}}

/* ── Utilities ────────────────────────────────────────────────────────── */
.text-gradient{
  background-image:var(--gradient-primary);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.bg-mesh{background-image:var(--gradient-mesh)}
.bg-glow{background-image:var(--gradient-glow)}
.shadow-glow{box-shadow:var(--shadow-glow)}
.glass{
  background:hsl(var(--card) / .8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid hsl(var(--border) / .5);
}
.glass-strong{
  background:hsl(var(--card) / .95);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid hsl(var(--border) / .3);
}
.muted{color:hsl(var(--muted-foreground))}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Animation ────────────────────────────────────────────────────────── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
@keyframes pingOut{75%,100%{transform:scale(2);opacity:0}}
@keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:.5}}

.animate-float{animation:float 6s ease-in-out infinite}
.animate-slide-up{opacity:0;animation:slideUp .6s ease-out forwards}
.animate-slide-down{animation:slideDown .5s ease-out}
.animate-fade-in{opacity:0;animation:fadeIn .5s ease-out forwards}
.animate-scale-in{opacity:0;animation:scaleIn .3s ease-out forwards}
.animate-ping{animation:pingOut 1s cubic-bezier(0,0,.2,1) infinite}
.animate-pulse{animation:pulseSoft 2s cubic-bezier(.4,0,.6,1) infinite}
.d-1{animation-delay:.1s}.d-2{animation-delay:.2s}.d-3{animation-delay:.3s}.d-4{animation-delay:.4s}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border:1px solid transparent;border-radius:var(--r-lg);
  font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;
  cursor:pointer;text-align:center;
  transition:background-color .2s,box-shadow .2s,color .2s,border-color .2s,transform .2s;
  height:2.5rem;padding:0 1rem;
}
.btn svg{width:1rem;height:1rem;flex:none;pointer-events:none}
.btn:disabled{pointer-events:none;opacity:.5}

.btn--primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:hsl(var(--primary) / .9);box-shadow:var(--shadow-md)}
.btn--primary:active{transform:scale(.98)}

.btn--outline{border-color:hsl(var(--input));background:hsl(var(--background));color:hsl(var(--foreground))}
.btn--outline:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground));border-color:transparent}

.btn--secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.btn--secondary:hover{background:hsl(var(--secondary) / .8)}

.btn--ghost{background:transparent;color:hsl(var(--foreground))}
.btn--ghost:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}

.btn--hero{
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600;
  box-shadow:0 12px 40px hsl(var(--primary) / .25);
}
.btn--hero:hover{background:hsl(var(--primary) / .9);box-shadow:0 20px 56px hsl(var(--primary) / .3)}
.btn--hero:active{transform:scale(.98)}

.btn--hero-secondary{
  background:hsl(var(--card));color:hsl(var(--foreground));
  border-color:hsl(var(--border));box-shadow:var(--shadow-sm);
}
.btn--hero-secondary:hover{background:hsl(var(--secondary));box-shadow:var(--shadow-md)}
.btn--hero-secondary:active{transform:scale(.98)}

.btn--sm{height:2.25rem;padding:0 .75rem;border-radius:var(--r-md)}
.btn--lg{height:3rem;padding:0 2rem;font-size:1rem;border-radius:var(--r-xl)}
.btn--xl{height:3.5rem;padding:0 2.5rem;font-size:1.125rem;border-radius:var(--r-xl)}
.btn--xl svg{width:1.25rem;height:1.25rem}
.btn--icon{height:2.5rem;width:2.5rem;padding:0}
.btn--block{width:100%}

/* ── Form controls ────────────────────────────────────────────────────── */
.field{
  width:100%;height:2.5rem;padding:0 .75rem;
  border:1px solid hsl(var(--input));border-radius:var(--r-md);
  background:hsl(var(--background));color:hsl(var(--foreground));
  font:inherit;font-size:.875rem;
  transition:border-color .15s,box-shadow .15s;
}
.field::placeholder{color:hsl(var(--muted-foreground))}
.field:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .15)}
textarea.field{height:auto;min-height:5rem;padding:.625rem .75rem;resize:vertical;line-height:1.55}
.label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}

/* ── Cards & section furniture ────────────────────────────────────────── */
.card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--r-2xl);
}
.section{padding-block:6rem}
@media (min-width:1024px){.section{padding-block:8rem}}
.section--tight{padding-block:4rem}
@media (min-width:1024px){.section--tight{padding-block:6rem}}
.section--muted{background:hsl(var(--muted) / .3)}
/* The nav floats over the page, so an anchor jump would otherwise park the
   section heading underneath it. */
[id]{scroll-margin-top:7rem}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.section--secondary{background:hsl(var(--secondary) / .3)}

.section-head{max-width:48rem;margin:0 auto 4rem;text-align:center}
.eyebrow{
  display:block;color:hsl(var(--primary));font-size:.875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;
}
.section-head h2{font-size:1.875rem;font-weight:700;line-height:1.15;margin:1rem 0 1.5rem}
@media (min-width:768px){.section-head h2{font-size:2.25rem}}
@media (min-width:1024px){.section-head h2{font-size:3rem}}
.section-head p{font-size:1.125rem;color:hsl(var(--muted-foreground));line-height:1.6}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:9999px;
  background:hsl(var(--primary) / .1);border:1px solid hsl(var(--primary) / .2);
  color:hsl(var(--primary));font-size:.875rem;font-weight:500;
}
.pill svg{width:1rem;height:1rem;flex:none}

/* ═══════════════════════════════════════════════════════════════════════
   Landing page
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Navbar: a floating glass pill, inset from every edge ─────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav-inner{margin:1rem}
.nav-bar{border-radius:var(--r-2xl);padding:1rem 1.5rem}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:.5rem}
.nav-mark{
  width:2.25rem;height:2.25rem;border-radius:var(--r-xl);flex:none;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  display:flex;align-items:center;justify-content:center;
}
.nav-mark svg{width:1.25rem;height:1.25rem}
.nav-brand span{font-size:1.125rem;font-weight:700;letter-spacing:-0.025em}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{font-size:.875rem;color:hsl(var(--muted-foreground));transition:color .2s}
.nav-links a:hover{color:hsl(var(--foreground))}
.nav-cta{display:none;align-items:center;gap:.75rem}
.nav-burger{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem;border:0;background:none;border-radius:var(--r-md);cursor:pointer;
  transition:background-color .2s;
}
.nav-burger:hover{background:hsl(var(--secondary))}
.nav-burger svg{width:1.25rem;height:1.25rem}
.nav-menu{
  display:none;margin-top:1rem;padding-top:1rem;
  border-top:1px solid hsl(var(--border));
  animation:slideDown .5s ease-out;
}
.nav-menu.open{display:block}
.nav-menu a{
  display:block;padding:.5rem 1rem;border-radius:var(--r-md);
  font-size:.875rem;color:hsl(var(--muted-foreground));transition:background-color .2s,color .2s;
}
.nav-menu a:hover{background:hsl(var(--secondary));color:hsl(var(--foreground))}
.nav-menu .nav-menu-cta{padding-top:1rem;display:grid;gap:.5rem}
.nav-menu .nav-menu-cta .btn{width:100%}
@media (min-width:768px){
  .nav-links,.nav-cta{display:flex}
  .nav-burger{display:none}
  .nav-menu,.nav-menu.open{display:none}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-orb{position:absolute;border-radius:9999px;filter:blur(64px);pointer-events:none}
.hero-orb--a{top:5rem;left:10%;width:18rem;height:18rem;background:hsl(var(--primary) / .05)}
.hero-orb--b{bottom:5rem;right:10%;width:24rem;height:24rem;background:hsl(var(--accent) / .05);animation-delay:-3s}
.hero-inner{position:relative;z-index:10;padding-block:6rem}
@media (min-width:1024px){.hero-inner{padding-block:8rem}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:5rem}}
.hero-copy{display:grid;gap:2rem;justify-items:center;text-align:center}
@media (min-width:1024px){.hero-copy{justify-items:start;text-align:left}}
.hero-copy h1{font-size:2.25rem;font-weight:700;line-height:1.1}
@media (min-width:768px){.hero-copy h1{font-size:3rem}}
@media (min-width:1024px){.hero-copy h1{font-size:3.75rem}}
.hero-lede{font-size:1.125rem;color:hsl(var(--muted-foreground));max-width:36rem;line-height:1.6}
@media (min-width:768px){.hero-lede{font-size:1.25rem}}
.hero-actions{display:flex;flex-direction:column;gap:1rem;width:100%}
@media (min-width:640px){.hero-actions{flex-direction:row;width:auto}}
.hero-trust{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding-top:1rem}
@media (min-width:640px){.hero-trust{flex-direction:row}}
.hero-trust div{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:hsl(var(--muted-foreground))}
.hero-trust svg{width:1rem;height:1rem;color:hsl(var(--primary));flex:none}
.hero-art{position:relative;display:flex;justify-content:center}
@media (min-width:1024px){.hero-art{justify-content:flex-end}}

/* ── Chat widget preview ──────────────────────────────────────────────── */
.wpv{position:relative}
.wpv-glow{position:absolute;inset:-1rem;border-radius:var(--r-3xl);background:hsl(var(--primary) / .1);filter:blur(32px)}
.wpv-box{
  position:relative;width:360px;max-width:100%;
  border-radius:var(--r-2xl);overflow:hidden;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-widget);
}
.wpv-head{background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.wpv-id{display:flex;align-items:center;gap:.75rem}
.wpv-av{width:2.5rem;height:2.5rem;border-radius:9999px;flex:none;
  background:hsl(var(--primary-foreground) / .2);display:flex;align-items:center;justify-content:center}
.wpv-av svg{width:1.25rem;height:1.25rem}
.wpv-id h3{font-size:1rem;font-weight:600}
.wpv-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:hsl(var(--primary-foreground) / .8)}
.wpv-status i{width:.5rem;height:.5rem;border-radius:9999px;background:#34d399;font-style:normal}
.wpv-acts{display:flex;align-items:center;gap:.5rem}
.wpv-acts span{display:flex;padding:.375rem;border-radius:var(--r-md)}
.wpv-acts svg{width:1rem;height:1rem}
.wpv-lang{
  padding:.5rem 1rem;background:hsl(var(--secondary) / .5);
  border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;
}
.wpv-lang .lbl{color:hsl(var(--muted-foreground))}
.wpv-lang .val{font-weight:500}
.wpv-body{height:280px;padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}
.wpv-row{display:flex}
.wpv-row.me{justify-content:flex-end}
.wpv-row.bot{justify-content:flex-start}
.wpv-bubble{max-width:80%;padding:.75rem 1rem;border-radius:var(--r-2xl);font-size:.875rem;line-height:1.6}
.wpv-row.me .wpv-bubble{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-bottom-right-radius:var(--r-md)}
.wpv-row.bot .wpv-bubble{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border-bottom-left-radius:var(--r-md)}
.wpv-body[dir="rtl"] .wpv-row.me{justify-content:flex-start}
.wpv-body[dir="rtl"] .wpv-row.bot{justify-content:flex-end}
.dots{display:flex;gap:.375rem}
.dots i{width:.5rem;height:.5rem;border-radius:9999px;background:hsl(var(--muted-foreground) / .5);
  animation:typingDot 1.4s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
.wpv-foot{padding:1rem;border-top:1px solid hsl(var(--border));display:flex;align-items:center;gap:.5rem}
.wpv-foot input{
  flex:1;min-width:0;padding:.625rem 1rem;border:0;border-radius:var(--r-xl);
  background:hsl(var(--secondary));font:inherit;font-size:.875rem;color:hsl(var(--foreground));
}
.wpv-foot input::placeholder{color:hsl(var(--muted-foreground))}
.wpv-foot input:focus{outline:none;box-shadow:0 0 0 2px hsl(var(--primary) / .2)}
.wpv-send{
  display:flex;align-items:center;justify-content:center;flex:none;
  padding:.625rem;border:0;border-radius:var(--r-xl);cursor:pointer;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));transition:background-color .2s;
}
.wpv-send:hover{background:hsl(var(--primary) / .9)}
.wpv-send svg{width:1rem;height:1rem}
.wpv-flag{
  position:absolute;padding:.375rem .75rem;border-radius:9999px;font-size:.875rem;
  background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-md);
  white-space:nowrap;
}
.wpv-flag--a{top:-1rem;left:-2rem}
.wpv-flag--b{bottom:-1rem;right:-2rem;animation-delay:-2s}
.wpv-flag--c{top:50%;left:-3rem;animation-delay:-4s}

/* ── Stats ────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
@media (min-width:1024px){.stats{grid-template-columns:repeat(4,1fr);gap:3rem}}
.stat{text-align:center}
.stat-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:3.5rem;height:3.5rem;border-radius:var(--r-2xl);margin-bottom:1rem;
  background:hsl(var(--primary) / .1);color:hsl(var(--primary));
  transition:transform .3s;
}
.stat:hover .stat-ico{transform:scale(1.1)}
.stat-ico svg{width:1.75rem;height:1.75rem}
.stat-num{font-size:2.25rem;font-weight:700;display:block;margin-bottom:.5rem}
@media (min-width:768px){.stat-num{font-size:3rem}}
.stat h3{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}
.stat p{font-size:.875rem;color:hsl(var(--muted-foreground))}

/* ── Feature / use-case grids ─────────────────────────────────────────── */
.grid-4{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:768px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.grid-3{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr);gap:2rem}}

.tile{
  position:relative;padding:1.5rem;border-radius:var(--r-2xl);
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.tile:hover{border-color:hsl(var(--primary) / .3);box-shadow:var(--shadow-lg)}
.tile h3{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;transition:color .2s}
.tile:hover h3{color:hsl(var(--primary))}
.tile p{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.65}
.tile-ico{display:inline-flex;padding:.75rem;border-radius:var(--r-xl);margin-bottom:1rem}
.tile-ico svg{width:1.5rem;height:1.5rem}
.tile-arrow{position:absolute;bottom:1.5rem;right:1.5rem;opacity:0;transition:opacity .3s;color:hsl(var(--primary))}
.tile:hover .tile-arrow{opacity:1}
.tile-arrow svg{width:1.25rem;height:1.25rem}

/* Icon washes, one per feature, matching the original's colour rotation. */
.w-primary{background:hsl(var(--primary) / .1);color:hsl(var(--primary))}
.w-accent{background:hsl(var(--accent) / .1);color:hsl(var(--accent))}
.w-success{background:hsl(var(--success) / .1);color:hsl(var(--success))}
.w-warning{background:hsl(var(--warning) / .1);color:hsl(var(--warning))}
.w-info{background:hsl(var(--info) / .1);color:hsl(var(--info))}
.w-destructive{background:hsl(var(--destructive) / .1);color:hsl(var(--destructive))}

.use{padding:1.5rem;border-radius:var(--r-2xl);background:hsl(var(--card));
  border:1px solid hsl(var(--border));transition:border-color .3s,box-shadow .3s,transform .3s}
@media (min-width:1024px){.use{padding:2rem}}
.use:hover{border-color:hsl(var(--primary) / .3);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.use-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:var(--r-xl);margin-bottom:1.25rem;
  color:#fff;transition:transform .3s;
}
.use:hover .use-ico{transform:scale(1.1)}
.use-ico svg{width:1.5rem;height:1.5rem}
.use h3{font-size:1.25rem;font-weight:600;margin-bottom:.75rem}
.use p{color:hsl(var(--muted-foreground));line-height:1.65}
.g-orange{background-image:linear-gradient(to bottom right,#f97316,#ef4444)}
.g-blue{background-image:linear-gradient(to bottom right,#3b82f6,#06b6d4)}
.g-emerald{background-image:linear-gradient(to bottom right,#10b981,#14b8a6)}
.g-purple{background-image:linear-gradient(to bottom right,#a855f7,#ec4899)}
.g-sky{background-image:linear-gradient(to bottom right,#0ea5e9,#6366f1)}
.g-rose{background-image:linear-gradient(to bottom right,#f43f5e,#ec4899)}

/* ── Global reach ─────────────────────────────────────────────────────── */
.reach{display:grid;gap:3rem;align-items:center}
@media (min-width:1024px){.reach{grid-template-columns:1fr 1fr}}
.reach-copy{display:grid;gap:1.5rem;justify-items:start}
.reach-copy h2{font-size:1.875rem;font-weight:700;line-height:1.15}
@media (min-width:768px){.reach-copy h2{font-size:2.25rem}}
@media (min-width:1024px){.reach-copy h2{font-size:3rem}}
.reach-copy p{font-size:1.125rem;color:hsl(var(--muted-foreground));max-width:32rem;line-height:1.6}
.reach-now{
  display:flex;align-items:center;gap:1rem;padding:1rem;max-width:24rem;
  border-radius:var(--r-xl);background:hsl(var(--secondary) / .5);border:1px solid hsl(var(--border));
}
.reach-now .flag{font-size:2.25rem;line-height:1}
.reach-now .lbl{font-size:.875rem;color:hsl(var(--muted-foreground))}
.reach-now .val{font-size:1.25rem;font-weight:600}
.reach-tags{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1rem}
.reach-tags span{
  padding:.375rem .75rem;border-radius:9999px;font-size:.875rem;
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
  transition:background-color .3s,color .3s,transform .3s;
}
.reach-tags span.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground));transform:scale(1.1)}
.globe{position:relative;aspect-ratio:1;max-width:32rem;margin-inline:auto;width:100%}
.globe-face{
  position:absolute;inset:0;border-radius:9999px;border:1px solid hsl(var(--border));
  background-image:linear-gradient(to bottom right,hsl(var(--primary) / .05),hsl(var(--accent) / .05),hsl(var(--primary) / .1));
}
.globe svg{position:absolute;inset:0;width:100%;height:100%}
.globe-lines{color:hsl(var(--border))}
.globe-wires{color:hsl(var(--primary) / .3);pointer-events:none}
.pt{position:absolute;transform:translate(-50%,-50%);transition:all .5s}
.pt i{
  position:relative;z-index:10;display:block;width:.75rem;height:.75rem;border-radius:9999px;
  background:hsl(var(--muted-foreground) / .5);transition:all .3s;
}
.pt.on i{background:hsl(var(--primary));transform:scale(1.5);box-shadow:var(--shadow-glow)}
.pt-ping{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.pt.on .pt-ping{display:flex}
.pt-ping b{position:absolute;border-radius:9999px;background:hsl(var(--primary) / .3);
  width:2rem;height:2rem;animation:pingOut 1s cubic-bezier(0,0,.2,1) infinite}
.pt-ping b:last-child{width:3rem;height:3rem;background:hsl(var(--primary) / .1);animation-delay:.5s}
.pt-tag{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.5rem;
  padding:.25rem .5rem;border-radius:var(--r-sm);white-space:nowrap;font-size:.75rem;
  background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-md);
  display:none;
}
.pt.on .pt-tag{display:block;animation:fadeIn .5s ease-out}

/* ── How it works ─────────────────────────────────────────────────────── */
.steps{position:relative}
.steps-rule{
  position:absolute;top:6rem;left:50%;transform:translateX(-50%);
  width:calc(100% - 200px);height:2px;display:none;
  background-image:linear-gradient(to right,transparent,hsl(var(--border)),transparent);
}
@media (min-width:1024px){.steps-rule{display:block}}
.steps-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:768px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps-grid{grid-template-columns:repeat(4,1fr)}}
.step{position:relative}
.step-card{
  position:relative;height:100%;padding:1.5rem;border-radius:var(--r-2xl);
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  transition:border-color .3s,box-shadow .3s;
}
.step-card:hover{border-color:hsl(var(--primary) / .3);box-shadow:var(--shadow-lg)}
.step-no{
  position:absolute;top:-1rem;left:1.5rem;padding:.25rem .75rem;border-radius:9999px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font-size:.875rem;font-weight:700;
}
.step-ico{display:inline-flex;padding:.75rem;border-radius:var(--r-xl);margin:1rem 0;
  background:hsl(var(--primary) / .1);color:hsl(var(--primary))}
.step-ico svg{width:1.5rem;height:1.5rem}
.step-card h3{font-size:1.25rem;font-weight:600;margin-bottom:.75rem}
.step-card>p{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:1rem;line-height:1.6}
.step-card li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;margin-bottom:.5rem}
.step-card li svg{width:1rem;height:1rem;flex:none;color:hsl(var(--success))}
.step-card li span{color:hsl(var(--muted-foreground))}
.step-next{
  position:absolute;top:5rem;right:-1rem;z-index:10;display:none;
  width:2rem;height:2rem;border-radius:9999px;align-items:center;justify-content:center;
  background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--primary));
}
@media (min-width:1024px){.step-next{display:flex}}

.snippet{margin:4rem auto 0;max-width:42rem}
.snippet-box{border-radius:var(--r-xl);overflow:hidden;border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg)}
.snippet-bar{
  padding:.75rem 1rem;background:hsl(var(--secondary) / .5);
  border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;gap:.5rem;
}
.snippet-bar i{width:.75rem;height:.75rem;border-radius:9999px;display:block}
.snippet-bar i:nth-child(1){background:hsl(var(--destructive) / .5)}
.snippet-bar i:nth-child(2){background:hsl(var(--warning) / .5)}
.snippet-bar i:nth-child(3){background:hsl(var(--success) / .5)}
.snippet-bar span{margin-left:.5rem;font-size:.875rem;color:hsl(var(--muted-foreground));
  font-family:'JetBrains Mono',monospace}
.snippet-code{
  padding:1rem;background:hsl(var(--card));overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:.875rem;line-height:1.7;
  margin:0;color:hsl(var(--muted-foreground));white-space:pre;
}
.snippet-code .t{color:hsl(var(--primary))}
.snippet-code .a{color:hsl(var(--accent))}
.snippet-code .v{color:hsl(var(--success))}
.snippet-note{text-align:center;font-size:.875rem;color:hsl(var(--muted-foreground));margin-top:1rem}

/* ── Testimonials ─────────────────────────────────────────────────────── */
.quote{
  position:relative;padding:1.5rem;border-radius:var(--r-2xl);
  background:hsl(var(--card));border:1px solid hsl(var(--border));transition:border-color .3s;
}
@media (min-width:1024px){.quote{padding:2rem}}
.quote:hover{border-color:hsl(var(--primary) / .2)}
.quote-mark{position:absolute;top:1.5rem;right:1.5rem;color:hsl(var(--primary) / .2)}
.quote-mark svg{width:2.5rem;height:2.5rem}
.stars{display:flex;gap:.25rem;margin-bottom:1rem}
.stars svg{width:1rem;height:1rem;fill:#eab308;color:#eab308}
.quote p{color:hsl(var(--foreground) / .9);margin-bottom:1.5rem;line-height:1.65}
.quote-by{display:flex;align-items:center;gap:.75rem}
.quote-av{
  width:2.5rem;height:2.5rem;border-radius:9999px;flex:none;
  background:hsl(var(--primary) / .1);color:hsl(var(--primary));
  display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;
}
.quote-by .nm{font-size:.875rem;font-weight:600}
.quote-by .rl{font-size:.75rem;color:hsl(var(--muted-foreground))}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.tiers{display:grid;gap:2rem;grid-template-columns:1fr;max-width:72rem;margin-inline:auto}
@media (min-width:768px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  position:relative;padding:2rem;border-radius:var(--r-2xl);
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  transition:border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}

.tier:hover{border-color:hsl(var(--primary) / .3);box-shadow:var(--shadow-lg)}
.tier--popular{
  border-color:hsl(var(--primary));
  box-shadow:0 12px 40px hsl(var(--primary) / .1);
}
@media (min-width:1024px){.tier--popular{transform:scale(1.05);z-index:1}}
.tier-flag{position:absolute;top:-1rem;left:50%;transform:translateX(-50%);white-space:nowrap}
.tier-flag span{
  display:inline-flex;align-items:center;gap:.375rem;padding:.375rem 1rem;border-radius:9999px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font-size:.875rem;font-weight:500;
}
.tier-flag svg{width:1rem;height:1rem}
.tier-flag--free span{background:#22c55e;color:#fff}
.tier h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.tier-desc{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:1.5rem}
.tier-price{margin-bottom:1.5rem}
.tier-price b{font-size:2.25rem;font-weight:700}
.tier-price small{font-size:1rem;color:hsl(var(--muted-foreground))}
/* Push the CTA to the card's bottom edge so the row of buttons lines up
   however many features a tier lists. */
.tier ul{margin-bottom:2rem;display:grid;gap:.75rem;align-content:start}
.tier .btn{margin-top:auto}
.tier li{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem}
.tier li svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.125rem;color:hsl(var(--success))}
.tier-note{text-align:center;font-size:.875rem;color:hsl(var(--muted-foreground));margin-top:3rem}

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.close{position:relative;overflow:hidden}
.close-inner{position:relative;z-index:10;max-width:56rem;margin-inline:auto;text-align:center}
.close-inner h2{font-size:1.875rem;font-weight:700;line-height:1.15;margin-bottom:1.5rem}
@media (min-width:768px){.close-inner h2{font-size:2.25rem}}
@media (min-width:1024px){.close-inner h2{font-size:3rem}}
.close-inner>p{font-size:1.125rem;color:hsl(var(--muted-foreground));max-width:42rem;
  margin:0 auto 2.5rem;line-height:1.6}
.close .pill{margin-bottom:2rem}
.close-acts{display:flex;flex-direction:column;gap:1rem;justify-content:center}
@media (min-width:640px){.close-acts{flex-direction:row}}
.close-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:32rem;
  margin:4rem auto 0;padding-top:4rem;border-top:1px solid hsl(var(--border));
}
.close-stats b{font-size:1.875rem;font-weight:700;display:block}
@media (min-width:768px){.close-stats b{font-size:2.25rem}}
.close-stats p{font-size:.875rem;color:hsl(var(--muted-foreground));margin-top:.25rem}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot{padding-block:3rem;background:hsl(var(--secondary) / .3);border-top:1px solid hsl(var(--border))}
.foot-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:2rem}
@media (min-width:768px){.foot-top{flex-direction:row}}
.foot-brand{display:grid;gap:1rem;max-width:24rem;justify-items:start}
.foot-brand .row{display:flex;align-items:center;gap:.5rem}
.foot-mark{width:2.5rem;height:2.5rem;border-radius:var(--r-xl);flex:none;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  display:flex;align-items:center;justify-content:center}
.foot-mark svg{width:1.25rem;height:1.25rem}
.foot-brand .nm{font-size:1.25rem;font-weight:700}
.foot-brand p{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6}
.foot-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.foot-links a{font-size:.875rem;color:hsl(var(--muted-foreground));transition:color .2s}
.foot-links a:hover{color:hsl(var(--primary))}
.foot-bar{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid hsl(var(--border));
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.875rem;color:hsl(var(--muted-foreground));
}
@media (min-width:768px){.foot-bar{flex-direction:row}}
.foot-bar .row{display:flex;align-items:center;gap:.5rem}
.foot-bar svg{width:1rem;height:1rem}

/* ═══════════════════════════════════════════════════════════════════════
   Demo page — try the real thing before signing up
   ═══════════════════════════════════════════════════════════════════════ */
.demo-page{
  min-height:100vh;
  background-image:linear-gradient(to bottom right,hsl(var(--background)),hsl(var(--background)),hsl(var(--primary) / .05));
}
.demo-head{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--card) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.demo-head .container{max-width:72rem}
.demo-head-row{height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.demo-head-id{display:flex;align-items:center;gap:1rem;min-width:0}
.demo-mark{
  width:2rem;height:2rem;border-radius:var(--r-md);flex:none;
  background-image:linear-gradient(to bottom right,hsl(var(--primary)),hsl(var(--primary) / .8));
  color:hsl(var(--primary-foreground));display:flex;align-items:center;justify-content:center;
}
.demo-mark svg{width:1.25rem;height:1.25rem}
.demo-head-id .nm{font-size:1.125rem;font-weight:700}
.badge{
  display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:9999px;
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
  font-size:.75rem;font-weight:600;
}
.demo-body{padding-block:2rem}
.demo-body .container{max-width:72rem}
.demo-grid{display:grid;gap:2rem;align-items:start;grid-template-columns:1fr}
@media (min-width:1024px){.demo-grid{grid-template-columns:1fr 1fr}}
.demo-copy{display:grid;gap:1.5rem}
.demo-copy h1{font-size:2.25rem;font-weight:700;line-height:1.15;margin-bottom:1rem}
.demo-copy .lede{font-size:1.125rem;color:hsl(var(--muted-foreground));line-height:1.6}
.demo-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.demo-feat{
  padding:1rem;display:flex;align-items:flex-start;gap:.75rem;
  border-radius:var(--r-2xl);border:1px solid hsl(var(--border));background:hsl(var(--card) / .5);
}
.demo-feat .ico{padding:.5rem;border-radius:var(--r-md);background:hsl(var(--primary) / .1);color:hsl(var(--primary));flex:none}
.demo-feat .ico svg{width:1.25rem;height:1.25rem}
.demo-feat .t{font-size:.875rem;font-weight:500}
.demo-feat .d{font-size:.75rem;color:hsl(var(--muted-foreground))}
.demo-invite{
  padding:1.5rem;border-radius:var(--r-2xl);border:1px solid hsl(var(--primary) / .2);
  background-image:linear-gradient(to bottom right,hsl(var(--primary) / .1),hsl(var(--primary) / .05));
}
.demo-invite h3{font-weight:600;margin-bottom:.5rem}
.demo-invite p{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:1rem}

.demo-chat{
  border-radius:var(--r-2xl);overflow:hidden;background:hsl(var(--card));
  border:2px solid hsl(var(--border));box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;height:500px;
}
@media (min-width:1024px){.demo-chat{position:sticky;top:6rem}}
.demo-chat-head{
  padding:1rem;border-bottom:1px solid hsl(var(--border));
  background-image:linear-gradient(to right,hsl(var(--primary)),hsl(var(--primary) / .9));
  color:hsl(var(--primary-foreground));
}
.demo-chat-head .row{display:flex;align-items:center;gap:.75rem}
.demo-chat-av{width:2.5rem;height:2.5rem;border-radius:9999px;flex:none;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.demo-chat-av svg{width:1.5rem;height:1.5rem}
.demo-chat-head .nm{font-weight:600}
.demo-chat-head .st{display:flex;align-items:center;gap:.375rem;font-size:.75rem;opacity:.8}
.demo-chat-head .st i{width:.5rem;height:.5rem;border-radius:9999px;background:#4ade80;
  animation:pulseSoft 2s cubic-bezier(.4,0,.6,1) infinite}
.demo-chat-head .st i.off{background:rgba(255,255,255,.45);animation:none}
.demo-log{flex:1;min-height:0;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem;
  background:hsl(var(--secondary) / .3)}
.demo-row{display:flex}
.demo-row.me{justify-content:flex-end}
.demo-row.bot{justify-content:flex-start}
.demo-bubble{max-width:80%;padding:.625rem 1rem;border-radius:var(--r-2xl);font-size:.875rem;line-height:1.6}
.demo-row.me .demo-bubble{background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-bottom-right-radius:var(--r-md)}
.demo-row.bot .demo-bubble{background:hsl(var(--card));border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-sm);border-bottom-left-radius:var(--r-md)}
.demo-foot{padding:1rem;border-top:1px solid hsl(var(--border));background:hsl(var(--card))}
.demo-foot .row{display:flex;gap:.5rem}
.demo-foot .note{font-size:.75rem;color:hsl(var(--muted-foreground));text-align:center;margin-top:.5rem}
.demo-asks{margin-top:2rem}
.demo-asks p{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:.75rem}
.demo-asks .row{display:flex;flex-wrap:wrap;gap:.5rem}
.demo-asks .btn{font-size:.75rem}
.demo-asks .btn svg{width:.75rem;height:.75rem}

/* ═══════════════════════════════════════════════════════════════════════
   Auth — form on the left, the pitch on the right
   ═══════════════════════════════════════════════════════════════════════ */
.auth{min-height:100vh;display:flex;background:hsl(var(--background))}

.auth-col{flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem 1.5rem}
@media (min-width:1024px){.auth-col{padding:3rem}}
.auth-inner{width:100%;max-width:28rem;margin-inline:auto}
.auth-brand{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:3rem}
.auth-mark{
  width:2.5rem;height:2.5rem;border-radius:var(--r-xl);flex:none;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  display:flex;align-items:center;justify-content:center;
}
.auth-mark svg{width:1.25rem;height:1.25rem}
.auth-brand .nm{font-size:1.25rem;font-weight:700}
.auth-inner h1{font-size:1.875rem;font-weight:700;margin-bottom:.5rem}
.auth-inner .lede{color:hsl(var(--muted-foreground));margin-bottom:2rem}

/* The four auth pages were written against these plain element names and a
   handful of legacy classes. Mapping them here means login, signup, forgot
   and reset pick up the new system without being rewritten. */
.auth-inner form{display:grid;gap:1.25rem}
.auth-inner label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}
.auth-inner label .opt{font-weight:400;color:hsl(var(--muted-foreground))}
.auth-inner input[type=text],
.auth-inner input[type=email],
.auth-inner input[type=password]{
  display:block;width:100%;padding:.75rem 1rem;
  border:1px solid hsl(var(--border));border-radius:var(--r-xl);
  background:hsl(var(--secondary));color:hsl(var(--foreground));
  font:inherit;font-size:.9375rem;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.auth-inner input::placeholder{color:hsl(var(--muted-foreground))}
.auth-inner input:focus{
  outline:none;border-color:hsl(var(--primary));background:hsl(var(--card));
  box-shadow:0 0 0 3px hsl(var(--primary) / .2);
}
.auth-inner .btn{
  width:100%;height:3rem;padding:0 2rem;font-size:1rem;font-weight:600;
  border-radius:var(--r-xl);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  box-shadow:0 12px 40px hsl(var(--primary) / .25);
}
.auth-inner .btn:hover{background:hsl(var(--primary) / .9);box-shadow:0 20px 56px hsl(var(--primary) / .3)}
.auth-inner .btn:active{transform:scale(.98)}
.auth-inner .note{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:-.5rem}
.auth-inner .minor{font-size:.875rem;margin-top:1rem}
.auth-inner .minor a{color:hsl(var(--primary))}
.auth-inner .minor a:hover{text-decoration:underline}
.auth-inner .alt{text-align:center;font-size:.875rem;color:hsl(var(--muted-foreground));margin-top:2rem}
.auth-inner .alt a{color:hsl(var(--primary));font-weight:500}
.auth-inner .alt a:hover{text-decoration:underline}
.auth-inner .msg{
  padding:.75rem 1rem;border-radius:var(--r-md);font-size:.875rem;margin-bottom:1.5rem;
  background:hsl(var(--primary) / .08);border:1px solid hsl(var(--primary) / .2);
  color:hsl(var(--primary));
}
.auth-inner .msg.err{background:hsl(var(--destructive) / .1);
  border-color:hsl(var(--destructive) / .25);color:hsl(var(--destructive))}
.auth-inner .msg.ok{background:hsl(var(--success) / .1);
  border-color:hsl(var(--success) / .25);color:hsl(var(--success))}

/* Right panel: the same floating-bubble motif as the hero, at rest. */
.auth-art{
  display:none;flex:1;align-items:center;justify-content:center;padding:3rem;
  background-image:linear-gradient(to bottom right,
    hsl(var(--primary) / .05),hsl(var(--accent) / .05),hsl(var(--primary) / .1));
}
@media (min-width:1024px){.auth-art{display:flex}}
.auth-art-inner{max-width:32rem;text-align:center}
.auth-orb{position:relative;margin-bottom:2rem}
.auth-orb-disc{
  width:16rem;height:16rem;border-radius:9999px;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;color:hsl(var(--primary));
  background-image:linear-gradient(to bottom right,hsl(var(--primary) / .2),hsl(var(--accent) / .2));
}
.auth-orb-disc svg{width:6rem;height:6rem}
.auth-bubble{
  position:absolute;padding:.5rem 1rem;border-radius:var(--r-2xl);font-size:.875rem;
  background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);
  white-space:nowrap;
}
.auth-bubble--a{top:-2rem;left:-2rem}
.auth-bubble--b{bottom:-1rem;right:-2rem;animation-delay:-2s;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:transparent}
.auth-bubble--c{top:50%;right:-4rem;animation-delay:-4s}
.auth-art-inner h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.auth-art-inner p{color:hsl(var(--muted-foreground));line-height:1.6}

.notice{
  padding:.75rem 1rem;border-radius:var(--r-md);font-size:.875rem;
  background:hsl(var(--destructive) / .1);border:1px solid hsl(var(--destructive) / .25);
  color:hsl(var(--destructive));
}
.notice--ok{background:hsl(var(--success) / .1);border-color:hsl(var(--success) / .25);color:hsl(var(--success))}
.notice--info{background:hsl(var(--primary) / .08);border-color:hsl(var(--primary) / .2);color:hsl(var(--primary))}

/* ═══════════════════════════════════════════════════════════════════════
   App shell — the signed-in product
   ─────────────────────────────────────────────────────────────────────────
   Ported from the old dashboard: a light sidebar rather than a dark rail,
   rounded-xl nav pills, a 4rem topbar, and content laid out on rounded-2xl
   panels. The pages that live inside it were written against a handful of
   short class names (.card, .btn, .chip, .msg …); those names are kept and
   restyled here, so every screen picks the new language up at once.
   ═══════════════════════════════════════════════════════════════════════ */

.app{min-height:100vh;display:flex;background:hsl(var(--background))}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.side{
  position:fixed;inset:0 auto 0 0;width:16rem;z-index:40;
  background:hsl(var(--card));border-right:1px solid hsl(var(--border));
  display:flex;flex-direction:column;
}
.side-logo{padding:1rem;border-bottom:1px solid hsl(var(--border))}
.side-logo a{display:flex;align-items:center;gap:.75rem}
.side-logo .mark{
  width:2.5rem;height:2.5rem;border-radius:var(--r-xl);flex:none;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  display:flex;align-items:center;justify-content:center;
}
.side-logo .mark svg{width:1.25rem;height:1.25rem}
.side-logo .nm{font-size:1.125rem;font-weight:700;letter-spacing:-0.025em}

.side-nav{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.25rem}
.side-sec{
  padding:1rem .75rem .375rem;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--muted-foreground));
}
.side-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .75rem;border-radius:var(--r-xl);
  font-size:.875rem;font-weight:500;color:hsl(var(--foreground) / .7);
  transition:background-color .2s,color .2s;
}
.side-link:hover{background:hsl(var(--secondary) / .6);color:hsl(var(--foreground))}
.side-link.on{background:hsl(var(--secondary));color:hsl(var(--foreground))}
.side-link svg{width:1.25rem;height:1.25rem;flex:none}
.side-link .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link .ct{font-size:.75rem;color:hsl(var(--muted-foreground));font-family:'JetBrains Mono',monospace}
.side-dot{width:.625rem;height:.625rem;border-radius:.25rem;flex:none;display:inline-block}
.side-new{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin-top:.5rem;padding:.625rem;cursor:pointer;
  border:1px dashed hsl(var(--border));border-radius:var(--r-xl);background:none;
  font:inherit;font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));
  transition:border-color .2s,color .2s,background-color .2s;
}
.side-new:hover{border-color:hsl(var(--primary) / .4);color:hsl(var(--primary));background:hsl(var(--primary) / .04)}

.side-foot{padding:1rem;border-top:1px solid hsl(var(--border))}
.side-user{display:flex;align-items:center;gap:.75rem}
.side-av{
  width:2.25rem;height:2.25rem;border-radius:9999px;flex:none;
  background:hsl(var(--primary) / .2);color:hsl(var(--primary));
  display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:500;text-transform:uppercase;
}
.side-who{flex:1;min-width:0}
.side-who .em{font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-who .env{display:flex;gap:.25rem;margin-top:.125rem}
.side-who .env i{width:.375rem;height:.375rem;border-radius:9999px;background:hsl(var(--border));font-style:normal}
.side-who .env i.ok{background:hsl(var(--success))}
.side-out{color:hsl(var(--muted-foreground));display:flex;padding:.25rem;transition:color .2s}
.side-out:hover{color:hsl(var(--foreground))}
.side-out svg{width:1rem;height:1rem}

/* ── Main column ──────────────────────────────────────────────────────── */
/* flex:1 matters: .side is position:fixed and out of flow, so .main is the only
   flex item — and a flex item sizes to its content unless told to grow. With a
   sparse page (a client with one bot) the whole column was collapsing to the
   width of the widest card. */
.main{flex:1;min-width:0;margin-left:16rem;min-height:100vh;display:flex;flex-direction:column}
.topline{
  height:4rem;flex:none;padding:0 1.5rem;
  background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;z-index:30;
}
.topline h1{font-size:1.25rem;font-weight:600}
.topline .crumb{font-size:.75rem;color:hsl(var(--muted-foreground))}
.burger{
  display:none;padding:.5rem;border:0;background:none;border-radius:var(--r-md);
  cursor:pointer;color:hsl(var(--foreground));
}
.burger:hover{background:hsl(var(--secondary))}
.burger svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.content{flex:1;padding:1.5rem;max-width:1400px;width:100%}

@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .25s ease}
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .burger{display:inline-flex}
  .content{padding:1rem}
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--r-2xl);padding:1.5rem;margin-bottom:1.5rem;
}
.card h2{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}
.card .hint{color:hsl(var(--muted-foreground));font-size:.875rem;margin-bottom:1rem}
h3.mini{
  font-size:.6875rem;font-weight:600;margin-bottom:.5rem;
  text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--muted-foreground));
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:768px){.two{grid-template-columns:1fr}}
.pane{display:none}
.pane.on{display:block}

/* Stat tiles, as on the old dashboard. */
.stat-row{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.5rem}
@media (min-width:768px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat-card{padding:1.5rem;border-radius:var(--r-2xl);background:hsl(var(--card));border:1px solid hsl(var(--border))}
.stat-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.stat-card .ico{padding:.5rem;border-radius:var(--r-md);background:hsl(var(--secondary));display:flex}
.stat-card .ico svg{width:1.25rem;height:1.25rem}
.stat-card .val{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}
.stat-card .lbl{font-size:.875rem;color:hsl(var(--muted-foreground))}
.stat-card .tag{font-size:.75rem;color:hsl(var(--muted-foreground))}
.stat-card .tag.go{color:hsl(var(--success))}
.stat-card .tag.warn{color:hsl(var(--warning))}
.stat-card .tag.stop{color:hsl(var(--destructive))}

/* A bordered panel with a titled head and divided rows. */
.panel{background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--r-2xl);overflow:hidden;margin-bottom:1.5rem}
.panel-head{padding:1.25rem 1.5rem;border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.panel-head h2{font-size:1.125rem;font-weight:600}
.panel-row{padding:1rem 1.5rem;border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;gap:1rem;transition:background-color .2s}
.panel-row:last-child{border-bottom:0}
.panel-row:hover{background:hsl(var(--secondary) / .5)}
.panel-empty{padding:3rem 1.5rem;text-align:center;color:hsl(var(--muted-foreground))}
.panel-empty svg{width:3rem;height:3rem;margin:0 auto 1rem;opacity:.5}
.panel-empty p{margin-bottom:.25rem}
.panel-empty .sub{font-size:.875rem}
.row-ico{width:2.5rem;height:2.5rem;border-radius:var(--r-xl);flex:none;
  display:flex;align-items:center;justify-content:center}
.row-ico svg{width:1.25rem;height:1.25rem}

/* ── Legacy class map ─────────────────────────────────────────────────────
   Scoped to .app so it cannot reach the public pages, where .btn is always
   written with an explicit modifier. Inside the product, a bare .btn has
   always meant "the primary action", and these pages say so in a hundred
   places — cheaper and safer to honour that than to rewrite every one. */

.app .btn{
  height:2.5rem;padding:0 1rem;border-radius:var(--r-lg);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border:1px solid transparent;box-shadow:var(--shadow-sm);
  font-size:.875rem;font-weight:500;
}
.app .btn:hover{background:hsl(var(--primary) / .9);box-shadow:var(--shadow-md)}
.app .btn:active{transform:scale(.98)}
.app .btn.line{
  background:hsl(var(--card));color:hsl(var(--foreground));
  border-color:hsl(var(--input));box-shadow:none;
}
.app .btn.line:hover{background:hsl(var(--secondary));box-shadow:none}
.app .btn.warn{
  background:hsl(var(--card));color:hsl(var(--destructive));
  border-color:hsl(var(--destructive) / .3);box-shadow:none;
}
.app .btn.warn:hover{background:hsl(var(--destructive) / .08)}
.app .btn.go{background:hsl(var(--success))}
.app .btn.go:hover{background:hsl(var(--success) / .9)}
.app .btn.sm{height:2rem;padding:0 .75rem;font-size:.8125rem;border-radius:var(--r-md)}

/* Forms */
.app label{
  display:block;font-size:.875rem;font-weight:500;
  color:hsl(var(--foreground));margin:1.25rem 0 .5rem;
}
.app label .opt{font-weight:400;color:hsl(var(--muted-foreground))}
.app label.inline{
  display:flex;align-items:flex-start;gap:.625rem;
  font-size:.875rem;font-weight:500;margin:.75rem 0;
}
.app label.inline input{margin-top:.1875rem;width:auto;accent-color:hsl(var(--primary));flex:none}
.app label.inline em{display:block;font-style:normal;font-weight:400;
  color:hsl(var(--muted-foreground));font-size:.8125rem}
.app input[type=text],.app input[type=password],.app input[type=email],
.app input[type=url],.app input[type=number],.app select,.app textarea{
  display:block;width:100%;padding:.625rem .875rem;
  border:1px solid hsl(var(--border));border-radius:var(--r-xl);
  background:hsl(var(--secondary));color:hsl(var(--foreground));
  font:inherit;font-size:.875rem;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.app input::placeholder,.app textarea::placeholder{color:hsl(var(--muted-foreground))}
.app input:focus,.app select:focus,.app textarea:focus{
  outline:none;border-color:hsl(var(--primary));background:hsl(var(--card));
  box-shadow:0 0 0 3px hsl(var(--primary) / .2);
}
.app input[type=color]{width:3.25rem;height:2.5rem;padding:.1875rem;background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:var(--r-md);cursor:pointer}
.app textarea{resize:vertical;line-height:1.6;min-height:5rem}

/* Tables */
.app table{width:100%;border-collapse:collapse;font-size:.875rem}
.app th{
  text-align:left;padding:.75rem 1rem;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:hsl(var(--muted-foreground));
  border-bottom:1px solid hsl(var(--border));
}
.app td{padding:.875rem 1rem;border-bottom:1px solid hsl(var(--border));vertical-align:middle}
.app tr:last-child td{border-bottom:none}
.app tbody tr:hover td{background:hsl(var(--secondary) / .4)}

/* Chips */
.app .chip{
  display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:var(--r-sm);
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
}
.app .chip.ok{background:hsl(var(--success) / .12);color:hsl(var(--success))}
.app .chip.run{background:hsl(var(--primary) / .12);color:hsl(var(--primary))}
.app .chip.err{background:hsl(var(--destructive) / .12);color:hsl(var(--destructive))}
.app .chip.dim{background:hsl(var(--secondary));color:hsl(var(--muted-foreground))}
.app .chip.new{background:hsl(var(--warning) / .15);color:#8a5a00}

/* Banners */
.app .msg{
  padding:.75rem 1rem;border-radius:var(--r-xl);font-size:.875rem;margin-bottom:1.5rem;
  background:hsl(var(--primary) / .08);border:1px solid hsl(var(--primary) / .2);
  color:hsl(var(--primary));
}
.app .msg.warn{background:hsl(var(--warning) / .12);border-color:hsl(var(--warning) / .3);color:#8a5a00}
.app .msg.err{background:hsl(var(--destructive) / .1);border-color:hsl(var(--destructive) / .25);
  color:hsl(var(--destructive))}
.app .msg.ok{background:hsl(var(--success) / .1);border-color:hsl(var(--success) / .25);
  color:hsl(var(--success))}

/* Text helpers */
.app .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8125rem}
.app .note,.app .hint{font-size:.8125rem;color:hsl(var(--muted-foreground))}
.app .muted{color:hsl(var(--muted-foreground))}

/* Code and log blocks */
.app pre.code{
  background:hsl(220 25% 12%);color:#D7DEE6;border-radius:var(--r-xl);
  padding:.875rem 1rem;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;line-height:1.7;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all;
}
.app pre.code .hl{color:hsl(var(--warning))}
.app .log{
  background:hsl(220 25% 12%);color:#93E4C1;border-radius:var(--r-xl);padding:.75rem 1rem;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;line-height:1.7;
  max-height:13rem;overflow-y:auto;white-space:pre-wrap;
}

/* Tabs on the bot page */
.app .tabbtn{
  background:none;border:0;cursor:pointer;white-space:nowrap;
  padding:.6875rem .9375rem;font:inherit;font-size:.875rem;font-weight:500;
  color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.app .tabbtn:hover{color:hsl(var(--foreground))}
.app .tabbtn.on{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}

.app .testline{display:flex;align-items:center;gap:.625rem;margin-top:.625rem;flex-wrap:wrap}
.app .testout{font-size:.8125rem}

/* Dialogs */
.app dialog,dialog{
  border:1px solid hsl(var(--border));border-radius:var(--r-2xl);padding:0;
  background:hsl(var(--card));color:hsl(var(--foreground));
  box-shadow:var(--shadow-lg);max-width:28rem;width:calc(100% - 2rem);
}
dialog::backdrop{background:hsl(220 25% 10% / .45)}
.dlg-h{
  padding:1rem 1.25rem;border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.dlg-h b{font-size:1rem;font-weight:600}

/* ── Legal prose ──────────────────────────────────────────────────────── */
.legal{padding:9rem 0 5rem}
.legal .container{max-width:48rem}
@media (min-width:640px){.legal .container{max-width:48rem}}
@media (min-width:768px){.legal .container{max-width:48rem}}
@media (min-width:1024px){.legal .container{max-width:48rem}}
@media (min-width:1280px){.legal .container{max-width:48rem}}
@media (min-width:1400px){.legal .container{max-width:48rem}}
.legal h1{font-size:2.0625rem;font-weight:700;margin-bottom:.375rem}
.legal .updated{color:hsl(var(--muted-foreground));font-size:.875rem;margin-bottom:1.875rem}
.legal h2{font-size:1.1875rem;font-weight:600;margin:2.375rem 0 .625rem}
.legal p,.legal li{color:hsl(var(--muted-foreground));font-size:.96875rem;line-height:1.68}
.legal p{margin-bottom:.875rem}
.legal ul{padding-left:1.25rem;margin-bottom:.875rem;list-style:disc}
.legal li{margin-bottom:.4375rem}
.legal strong{color:hsl(var(--foreground));font-weight:600}
.legal a{color:hsl(var(--primary))}
.legal a:hover{text-decoration:underline}
.legal code{
  background:hsl(var(--secondary));padding:.0625rem .3125rem;border-radius:var(--r-sm);
  font-family:'JetBrains Mono',monospace;font-size:.875rem;
}
.legal .banner{
  background:hsl(var(--warning) / .12);border:1px solid hsl(var(--warning) / .3);
  color:#8a5a00;border-radius:var(--r-xl);padding:.875rem 1rem;
  font-size:.90625rem;margin-bottom:1.875rem;
}
.legal table{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:.90625rem}
.legal th{text-align:left;font-weight:600;color:hsl(var(--foreground));
  border-bottom:1px solid hsl(var(--border));padding:.5rem .625rem .5rem 0}
.legal td{padding:.5rem .625rem .5rem 0;border-bottom:1px solid hsl(var(--border) / .5);
  color:hsl(var(--muted-foreground));vertical-align:top}