/* Design tokens - aligned with shadcn-style theming; edit these for brand, fonts, radii */

:root {
  --background: 0 0% 100%;
  --foreground: 240 5% 13%;
  --card: 0 0% 100%;
  --card-foreground: 240 5% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 5% 13%;
  --primary: 217 91% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5% 13%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5% 13%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 217 91% 52%;
  --radius: 0.5rem;

  --font-sans: "Hedvig Letters Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Hedvig Letters Serif", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, monospace;

  /* Standard page width + gutters (generous horizontal padding, sfcompute-style) */
  --container-max: 64rem;
  --container-padding-x: clamp(1.25rem, 5vw, 4.5rem);

  /* Sticky header: anchor scroll lands with title visible below the bar */
  --header-anchor-offset: calc(0.875rem * 2 + 2.5rem + 4px);

  /* Top-of-page ambient gradient (light) — purple + coral, no blue wash */
  --page-glow-center: hsl(288 72% 52% / 0.28);
  --page-glow-side: hsl(16 88% 58% / 0.2);
  --page-glow-sky: hsl(285 42% 97% / 0.97);
  --page-glow-corner: hsl(330 75% 56% / 0.18);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 240 6% 10%;
    --foreground: 240 5% 92%;
    --card: 240 5% 13%;
    --card-foreground: 240 5% 92%;
    --popover: 240 5% 13%;
    --popover-foreground: 240 5% 92%;
    --primary: 217 88% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 4% 17%;
    --secondary-foreground: 240 5% 92%;
    --muted: 240 4% 17%;
    --muted-foreground: 240 5% 55%;
    --accent: 240 4% 19%;
    --accent-foreground: 240 5% 92%;
    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 4% 22%;
    --input: 240 4% 22%;
    --ring: 217 88% 58%;

    --page-glow-center: hsl(217 88% 58% / 0.28);
    --page-glow-side: hsl(265 60% 58% / 0.12);
    --page-glow-sky: hsl(240 8% 16% / 0.88);
    --page-glow-corner: transparent;

    color-scheme: dark;
  }

  .btn-primary {
    border-color: hsl(220 55% 52% / 0.45);
    background-color: hsl(217 88% 52%);
    background-image: linear-gradient(
      165deg,
      hsl(210 95% 68%) 0%,
      hsl(217 88% 56%) 42%,
      hsl(222 75% 42%) 100%
    );
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.22),
      inset 0 -1px 0 hsl(224 72% 12% / 0.35),
      0 1px 2px hsl(224 76% 8% / 0.35),
      0 2px 8px hsl(217 88% 45% / 0.22);
  }

  .btn-primary:hover {
    border-color: hsl(220 55% 58% / 0.55);
    transform: none;
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.2),
      inset 0 -1px 0 hsl(224 72% 12% / 0.28),
      0 1px 2px hsl(224 76% 8% / 0.28),
      0 2px 6px hsl(217 88% 48% / 0.14);
  }

  .btn-primary:active {
    transform: none;
    box-shadow:
      inset 0 2px 5px hsl(224 76% 6% / 0.45),
      inset 0 1px 0 hsl(0 0% 100% / 0.08),
      0 1px 2px hsl(217 88% 35% / 0.28);
  }

  .btn-outline {
    background-color: hsl(var(--background));
    border-color: hsl(220 55% 52% / 0.45);
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.06),
      0 1px 2px hsl(224 76% 8% / 0.35),
      0 2px 8px hsl(217 88% 45% / 0.22);
  }

  .btn-outline:hover {
    background-color: hsl(var(--background));
    border-color: hsl(220 55% 58% / 0.55);
    transform: none;
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.07),
      0 1px 2px hsl(224 76% 8% / 0.28),
      0 2px 6px hsl(217 88% 48% / 0.14);
  }

  .btn-outline:active {
    transform: none;
    box-shadow:
      inset 0 2px 4px hsl(224 76% 4% / 0.5),
      inset 0 1px 0 hsl(0 0% 100% / 0.05),
      0 1px 2px hsl(217 88% 40% / 0.2);
  }

  .btn-secondary:hover {
    transform: none;
    box-shadow:
      0 1px 2px hsl(224 76% 8% / 0.2),
      0 2px 5px hsl(220 20% 6% / 0.12);
  }

  .btn-secondary:active {
    transform: none;
    box-shadow:
      inset 0 1px 3px hsl(224 76% 4% / 0.35),
      0 1px 2px hsl(224 76% 8% / 0.15);
  }
}

html.dark {
  --background: 240 6% 10%;
  --foreground: 240 5% 92%;
  --card: 240 5% 13%;
  --card-foreground: 240 5% 92%;
  --popover: 240 5% 13%;
  --popover-foreground: 240 5% 92%;
  --primary: 217 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4% 17%;
  --secondary-foreground: 240 5% 92%;
  --muted: 240 4% 17%;
  --muted-foreground: 240 5% 55%;
  --accent: 240 4% 19%;
  --accent-foreground: 240 5% 92%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 22%;
  --input: 240 4% 22%;
  --ring: 217 88% 58%;

  --page-glow-center: hsl(217 88% 58% / 0.28);
  --page-glow-side: hsl(265 60% 58% / 0.12);
  --page-glow-sky: hsl(240 8% 16% / 0.88);
  --page-glow-corner: transparent;

  color-scheme: dark;
}

html.dark .btn-primary {
  border-color: hsl(220 55% 52% / 0.45);
  background-color: hsl(217 88% 52%);
  background-image: linear-gradient(
    165deg,
    hsl(210 95% 68%) 0%,
    hsl(217 88% 56%) 42%,
    hsl(222 75% 42%) 100%
  );
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.22),
    inset 0 -1px 0 hsl(224 72% 12% / 0.35),
    0 1px 2px hsl(224 76% 8% / 0.35),
    0 2px 8px hsl(217 88% 45% / 0.22);
}

html.dark .btn-primary:hover {
  border-color: hsl(220 55% 58% / 0.55);
  transform: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.2),
    inset 0 -1px 0 hsl(224 72% 12% / 0.28),
    0 1px 2px hsl(224 76% 8% / 0.28),
    0 2px 6px hsl(217 88% 48% / 0.14);
}

html.dark .btn-primary:active {
  transform: none;
  box-shadow:
    inset 0 2px 5px hsl(224 76% 6% / 0.45),
    inset 0 1px 0 hsl(0 0% 100% / 0.08),
    0 1px 2px hsl(217 88% 35% / 0.28);
}

html.dark .btn-outline {
  background-color: hsl(var(--background));
  border-color: hsl(220 55% 52% / 0.45);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.06),
    0 1px 2px hsl(224 76% 8% / 0.35),
    0 2px 8px hsl(217 88% 45% / 0.22);
}

html.dark .btn-outline:hover {
  background-color: hsl(var(--background));
  border-color: hsl(220 55% 58% / 0.55);
  transform: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.07),
    0 1px 2px hsl(224 76% 8% / 0.28),
    0 2px 6px hsl(217 88% 48% / 0.14);
}

html.dark .btn-outline:active {
  transform: none;
  box-shadow:
    inset 0 2px 4px hsl(224 76% 4% / 0.5),
    inset 0 1px 0 hsl(0 0% 100% / 0.05),
    0 1px 2px hsl(217 88% 40% / 0.2);
}

html.dark .btn-secondary:hover {
  transform: none;
  box-shadow:
    0 1px 2px hsl(224 76% 8% / 0.2),
    0 2px 5px hsl(220 20% 6% / 0.12);
}

html.dark .btn-secondary:active {
  transform: none;
  box-shadow:
    inset 0 1px 3px hsl(224 76% 4% / 0.35),
    0 1px 2px hsl(224 76% 8% / 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100vh;
  overscroll-behavior: none;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  line-height: 1.6;
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(ellipse 13rem 38% at 10% 4%, var(--page-glow-corner) 0%, transparent 52%),
    radial-gradient(
      ellipse min(40rem, 88vw) 78% at 50% -18%,
      var(--page-glow-center) 0%,
      transparent 54%
    ),
    radial-gradient(ellipse 15rem 44% at 93% 2%, var(--page-glow-side) 0%, transparent 48%),
    radial-gradient(
      ellipse min(44rem, 92vw) 52% at 50% -8%,
      var(--page-glow-sky) 0%,
      transparent 68%
    );
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(ellipse 45% 40% at 10% 4%, var(--page-glow-corner) 0%, transparent 50%),
      radial-gradient(ellipse 110% 85% at 50% -18%, var(--page-glow-center) 0%, transparent 52%),
      radial-gradient(ellipse 55% 50% at 92% 2%, var(--page-glow-side) 0%, transparent 45%),
      linear-gradient(180deg, var(--page-glow-sky) 0%, hsl(var(--background)) 48%);
  }
}

html.dark body {
  background-image:
    radial-gradient(ellipse 45% 40% at 10% 4%, var(--page-glow-corner) 0%, transparent 50%),
    radial-gradient(ellipse 110% 85% at 50% -18%, var(--page-glow-center) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 92% 2%, var(--page-glow-side) 0%, transparent 45%),
    linear-gradient(180deg, var(--page-glow-sky) 0%, hsl(var(--background)) 48%);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Page shell: use .container on header, main sections, footer for consistent max-width + side padding */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid hsl(var(--border) / 0.65);
  background-color: hsl(var(--background) / 0.62);
  backdrop-filter: blur(12px);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.875rem;
}

section[id] {
  scroll-margin-top: var(--header-anchor-offset);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.logo__mark {
  width: 1.375rem;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.nav-links a:hover {
  color: hsl(var(--foreground));
}

.hero {
  padding-block: 4.5rem 3.5rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.125rem, 4.25vw, 3rem);
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}

.hero .hero-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

.hero .lede {
  max-width: 42rem;
  margin: 0 auto 1.75rem;
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.hero-seller {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.hero-seller-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero-seller-link:hover {
  color: hsl(var(--foreground));
}

.section {
  padding-block: 3.5rem;
}

.section-title {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.section-sub {
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 32rem;
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
}

.section-title + .grid-3,
.section-title + .grid-4,
.section-title + .testimonials,
.section-title + .how-steps-intro,
.section-title + .workspace-preview-intro {
  margin-top: 1.5rem;
}

.how-steps-intro {
  margin-bottom: 2rem;
}

.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
  margin-inline: auto;
}

.how-step {
  --step-delay: calc(var(--step, 0) * 0.07s);
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 0.55s ease var(--step-delay),
    transform 0.55s ease var(--step-delay);
}

.how-step:not(:last-child) {
  padding-bottom: 1.25rem;
}

.how-step--visible {
  opacity: 1;
  transform: translateY(0);
}

.how-step__card {
  margin: 0;
  min-width: 0;
}

.how-step__card .how-step__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  font-family: var(--font-heading);
  line-height: 1.25;
  text-wrap: balance;
  color: hsl(var(--primary));
}

.how-step__card p {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .how-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.grid-3 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  padding: 1.25rem 1.35rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.card p {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.pricing-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-grid-cta {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
  }
}

.pricing-grid-cta {
  max-width: 26rem;
  margin-inline: auto;
}

.price-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  background-color: hsl(var(--card));
  display: flex;
  flex-direction: column;
}

.price-card.featured {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

.price-card .tier {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.35rem;
}

.price-card .amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 1rem;
}

.price-card .amount .suffix {
  font-size: 1rem;
  font-weight: 500;
}

.price-card ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  flex-grow: 1;
}

.price-card li {
  margin-bottom: 0.35rem;
}

.testimonials {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quote {
  font-size: 0.9375rem;
  margin: 0 0 1rem;
  color: hsl(var(--foreground));
}

.quote-meta {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.quote-meta strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: 2rem;
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.site-footer .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: min(100%, 18rem);
  flex: 1 1 12rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
}

.footer-copy > p {
  margin: 0;
}

.footer-row > p {
  margin: 0;
}

.footer-suppliers {
  margin: 0;
  max-width: 36rem;
}

.footer-suppliers a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-suppliers a:hover {
  color: hsl(var(--foreground));
}

.footer-email a:hover {
  color: hsl(var(--foreground));
}

/* Buttons - shadcn-like variants via classes */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding-inline: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.12s ease;
}

.btn-primary {
  color: hsl(var(--primary-foreground));
  border-color: hsl(220 55% 38% / 0.45);
  background-color: hsl(217 91% 48%);
  background-image: linear-gradient(
    165deg,
    hsl(210 100% 72%) 0%,
    hsl(217 91% 54%) 42%,
    hsl(222 78% 44%) 100%
  );
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.28),
    inset 0 -1px 0 hsl(224 72% 22% / 0.28),
    0 1px 2px hsl(224 76% 26% / 0.14),
    0 2px 6px hsl(217 91% 48% / 0.18);
}

.btn-primary:hover {
  border-color: hsl(220 55% 42% / 0.55);
  filter: brightness(1.06);
  transform: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.3),
    inset 0 -1px 0 hsl(224 72% 22% / 0.22),
    0 1px 2px hsl(224 76% 26% / 0.12),
    0 2px 5px hsl(217 91% 50% / 0.12);
}

.btn-primary:active {
  filter: brightness(0.96);
  transform: none;
  box-shadow:
    inset 0 2px 5px hsl(224 76% 18% / 0.38),
    inset 0 1px 0 hsl(0 0% 100% / 0.12),
    0 1px 2px hsl(217 91% 40% / 0.2);
}

.btn-primary:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

.btn-secondary:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  transform: none;
  box-shadow:
    0 1px 2px hsl(224 76% 26% / 0.1),
    0 2px 5px hsl(220 20% 30% / 0.06);
}

.btn-secondary:active {
  transform: none;
  box-shadow:
    inset 0 1px 3px hsl(224 76% 26% / 0.12),
    0 1px 2px hsl(224 76% 26% / 0.08);
}

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

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

.btn-outline {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(220 55% 38% / 0.45);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.85),
    0 1px 2px hsl(224 76% 26% / 0.14),
    0 2px 6px hsl(217 91% 48% / 0.18);
}

.btn-outline:hover {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(220 55% 42% / 0.55);
  transform: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.88),
    0 1px 2px hsl(224 76% 26% / 0.12),
    0 2px 5px hsl(217 91% 50% / 0.12);
}

.btn-outline:active {
  transform: none;
  box-shadow:
    inset 0 2px 4px hsl(224 76% 26% / 0.12),
    inset 0 1px 0 hsl(0 0% 100% / 0.7),
    0 1px 2px hsl(217 91% 48% / 0.14);
}

.signup-panel {
  max-width: 26rem;
  margin-inline: auto;
}

.book-demo-actions {
  display: flex;
  justify-content: center;
  margin: 0;
}

.signup-panel > .tier {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin: 0 0 1rem;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.signup-form .form-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 480px) {
  .signup-form .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.signup-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.signup-form .form-label-hint {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="url"],
.signup-form textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  box-sizing: border-box;
}

.signup-form textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

.signup-form input:focus-visible,
.signup-form textarea:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.signup-form .form-actions {
  margin-top: 0.25rem;
}

.signup-form .form-actions .btn-primary {
  width: 100%;
}

.signup-form.signup-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  max-width: 36rem;
  margin-inline: auto;
}

.signup-form.signup-form--inline > label {
  flex: 1 1 14rem;
  min-width: min(100%, 12rem);
  max-width: 22rem;
  margin: 0;
}

.signup-form.signup-form--inline .form-actions {
  margin-top: 0;
  flex: 0 0 auto;
}

.signup-form.signup-form--inline .form-actions .btn-primary {
  width: auto;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.form-foot a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.form-foot a:hover {
  color: hsl(var(--foreground));
}

.thank-you-section {
  padding-block: 4rem 3rem;
  text-align: center;
}

.thank-you-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.thank-you-lede {
  margin-bottom: 1.75rem;
}

.thank-you-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Hero + Slack-style conversation preview */

.hero.hero--split {
  padding-block: 3.25rem 3rem;
}

.hero.hero--split .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.hero.hero--split .hero-copy {
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

.hero.hero--split .hero-actions {
  justify-content: center;
}

@media (min-width: 960px) {
  .hero.hero--split .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 2.5rem;
    text-align: left;
  }

  .hero.hero--split .hero-copy {
    margin-inline: 0;
    text-align: left;
    max-width: none;
  }

  .hero.hero--split .hero-actions {
    justify-content: flex-start;
  }

  .hero.hero--split .hero-seller {
    text-align: left;
  }
}

.hero-chat {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 12px 40px hsl(220 20% 30% / 0.08);
  overflow: hidden;
}

.hero-chat__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  border-bottom: 1px solid hsl(var(--border));
}

.hero-chat__dots {
  display: flex;
  gap: 0.2rem;
  margin-inline-end: auto;
}

.hero-chat__dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.35);
}

.hero-chat__thread {
  padding: 0.85rem 0.75rem 1rem;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
}

.hero-chat__day {
  align-self: center;
  margin-bottom: 0.15rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.65);
  border: 1px solid hsl(var(--border));
}

.hero-chat__turn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 94%;
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.hero-chat__turn--them {
  align-self: flex-start;
}

.hero-chat__turn--us {
  align-self: flex-end;
  align-items: flex-end;
}

.hero-chat__turn--show {
  opacity: 1;
  transform: translateY(0);
}

.hero-chat__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-inline: 0.15rem;
  font-size: 0.6875rem;
  line-height: 1.3;
}

.hero-chat__sender {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.hero-chat__time {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.hero-chat__mention {
  font-weight: 600;
  color: hsl(220 72% 34%);
  background: hsl(var(--primary) / 0.16);
  border-radius: 0.2rem;
  padding: 0.05rem 0.2rem 0.08rem;
  margin-inline-end: 0.08rem;
}

@media (prefers-color-scheme: dark) {
  .hero-chat__mention {
    color: hsl(210 85% 78%);
    background: hsl(var(--primary) / 0.22);
  }
}

html.dark .hero-chat__mention {
  color: hsl(210 85% 78%);
  background: hsl(var(--primary) / 0.22);
}

.hero-chat__msg {
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
}

.hero-chat__msg--them {
  align-self: flex-start;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-bottom-left-radius: 0.2rem;
}

.hero-chat__msg--us {
  align-self: flex-end;
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--primary) / 0.22);
  border-bottom-right-radius: 0.2rem;
}

@media (prefers-color-scheme: dark) {
  .hero-chat__msg--us {
    background: hsl(var(--primary) / 0.2);
  }
}

html.dark .hero-chat__msg--us {
  background: hsl(var(--primary) / 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat__turn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Buyer workspace POC — kanban + chat */

.section--workspace {
  padding-block: 3.25rem 3.75rem;
}

.workspace-preview-intro {
  max-width: 38rem;
}

.workspace-poc {
  max-width: min(100%, 72rem);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 12px 36px hsl(220 20% 30% / 0.08);
}

.workspace-poc--static {
  pointer-events: none;
  user-select: none;
  cursor: default;
}

.workspace-poc__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
}

.workspace-poc__bom-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}


.workspace-poc__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.75rem;
  background: hsl(var(--background));
  min-width: 0;
  border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
}

@media (max-width: 900px) {
  .workspace-poc__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .workspace-poc__board {
    grid-template-columns: 1fr;
  }
}

.kb-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.kb-col__title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0 0.1rem;
}

.kb-card {
  padding: 0.45rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.kb-col--liera .kb-col__title {
  color: hsl(var(--primary));
}

.kb-card--liera {
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.22);
}

.kb-card--liera .kb-card__id {
  color: hsl(var(--primary));
}

.kb-card__id {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
}

.kb-card__line {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
}