@layer components {
  @keyframes public-site-pulse {
    0% { box-shadow: 0 0 0 0 oklch(0.7 0.16 28 / 45%); }
    70%, 100% { box-shadow: 0 0 0 0.75rem oklch(0.7 0.16 28 / 0%); }
  }

  .public-site {
    background-color: var(--background);
    background-image: radial-gradient(color-mix(in oklch, var(--foreground) 9%, transparent) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    color: var(--foreground);

    .public-site-container,
    .public-site-footer__inner {
      inline-size: min(100% - 2rem, 72rem);
      margin-inline: auto;
    }

    .public-site-quiet { color: var(--muted-foreground); }

    .public-site-header,
    .public-site-nav,
    .public-site-brand,
    .public-site-actions,
    .public-site-header-actions,
    .blog-admin-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem 1.25rem;
    }

    .public-site-header { padding-block: 1rem; }

    .public-site-brand {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--tracking-tight);
      text-decoration: none;
    }

    .public-site-brand :where(svg, img) { inline-size: 1.75rem; }
    .public-site-nav { flex: 1 1 auto; gap: 0.25rem 1.25rem; font-size: var(--text-sm); }
    .public-site-header .public-site-nav a { color: var(--muted-foreground); text-decoration: none; }
    .public-site-header .public-site-nav a[aria-current="page"] { color: var(--foreground); font-weight: var(--font-weight-medium); }
    .public-site-header-actions { gap: 0.5rem; }
    .public-site-nav a,
    .public-site-footer a,
    .public-site-related a {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.75rem;
      text-underline-offset: 0.25em;
    }

    a:not(.button):hover { color: var(--muted-foreground); }
    .public-site-header .public-site-nav a:hover { color: var(--foreground); }
    a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }

    .public-site-footer {
      margin-block-start: 5rem;
      padding-block: 3rem 1.5rem;
      border-block-start: 1px solid var(--border);
      background: var(--background);
      font-size: var(--text-sm);

      .public-site-footer__inner { display: grid; gap: 2rem; }
      strong { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
      p { color: var(--muted-foreground); }
      .public-site-footer__about { display: grid; align-content: start; gap: 0.75rem; max-inline-size: 22rem; }
      nav { display: grid; align-content: start; }
      h2 { margin-block-end: 0.25rem; font-size: var(--text-sm); }
      nav a { min-block-size: 2.25rem; color: var(--muted-foreground); text-decoration: none; }
      nav a:hover { color: var(--foreground); }
      .public-site-footer__legal { grid-column: 1 / -1; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); font-size: var(--text-xs); }
    }

    .public-site-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--muted-foreground);
      font-family: var(--font-mono);
      font-size: var(--text-xs);

      &::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; background: var(--foreground); }
      a { text-decoration: none; }
    }

    .public-site-lead { max-inline-size: 42rem; color: var(--muted-foreground); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
    .public-site-note,
    .blog-meta { color: var(--muted-foreground); font-size: var(--text-sm); }

    .public-site-chip {
      margin: 0.125rem;
      border-radius: var(--radius-sm);
      background: var(--background);
      font-size: 0.6875rem;
      font-weight: var(--font-weight-normal);
    }

    .public-site-chip--pill { padding: 0.375rem 0.875rem; border-radius: 999px; font-size: var(--text-xs); box-shadow: 0 1px 2px oklch(0 0 0 / 6%); }

    .public-site-avatar {
      display: grid;
      place-items: center;
      inline-size: 3.5rem;
      block-size: 3.5rem;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, oklch(0.8 0.12 30), oklch(0.65 0.17 28));
      color: oklch(0.25 0.05 28);
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-semibold);
    }

    .public-site-avatar--quiet { inline-size: 2.25rem; block-size: 2.25rem; background: linear-gradient(var(--muted), var(--border)); }

    .public-site-bubble {
      justify-self: start;
      max-inline-size: 18rem;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-md);
      background: var(--muted);
      font-size: var(--text-xs);
      line-height: var(--leading-snug);
    }

    .public-site-bubble--out { justify-self: end; background: var(--primary); color: var(--primary-foreground); }

    /* Hero */
    .public-site-hero {
      display: grid;
      align-items: end;
      gap: 1.5rem 3rem;
      padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    }

    .public-site-hero__copy,
    .public-site-hero__aside { display: grid; gap: 1.25rem; }
    .public-site-hero h1 {
      font-size: clamp(2.75rem, 5vw, 3.75rem);
      font-weight: var(--font-weight-medium);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    .public-site-hero .public-site-lead { font-size: var(--text-base); }

    .public-site-news {
      display: inline-flex;
      align-items: center;
      justify-self: start;
      gap: 0.5rem;
      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--background);
      font-size: var(--text-xs);
      font-weight: var(--font-weight-medium);
      text-decoration: none;

      svg { inline-size: 0.875rem; block-size: 0.875rem; }
    }


    /* Product illustration */
    .public-site-demo { margin-block: 0 3rem; }
    .public-site-demo__stage { position: relative; display: grid; gap: 1rem; }

    .public-site-ask {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      max-inline-size: 28rem;
      padding: 0.625rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--background);
      color: var(--muted-foreground);
      font-size: var(--text-sm);
      box-shadow: 0 1px 2px oklch(0 0 0 / 5%);

      span:nth-child(2) { flex: 1; }
      kbd { padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--muted); font-size: var(--text-xs); }
    }

    .public-site-ask__dot { inline-size: 1rem; block-size: 1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, oklch(0.75 0.13 30), oklch(0.6 0.08 300)); }

    .public-site-app {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      background: var(--background);
      box-shadow: 0 1px 2px oklch(0 0 0 / 4%), 0 12px 32px -12px oklch(0 0 0 / 12%);
      font-size: var(--text-xs);
    }

    .public-site-app__nav {
      display: none;
      align-content: start;
      gap: 0.25rem;
      padding: 1.25rem 1rem;
      border-inline-end: 1px solid var(--border);
      background: var(--sidebar);
      color: var(--muted-foreground);

      strong { margin-block-end: 1rem; color: var(--foreground); font-size: var(--text-base); }
      span { display: flex; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); }
      .is-current { background: var(--sidebar-accent); color: var(--foreground); font-weight: var(--font-weight-semibold); }
    }

    .public-site-app__main { min-inline-size: 0; padding: 1.25rem; }
    .public-site-app__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-end: 1rem; font-size: var(--text-sm); }
    .public-site-app__search { inline-size: 10rem; padding: 0.375rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: var(--text-xs); }
    .public-site-app__table { overflow-x: auto; }

    .public-site-app table {
      inline-size: 100%;
      border-collapse: collapse;

      th { padding: 0.5rem; color: var(--muted-foreground); font-weight: var(--font-weight-normal); text-align: start; white-space: nowrap; }
      td { padding: 0.625rem 0.5rem; border-block-start: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
      td:nth-child(4),
      td:nth-child(6) { white-space: normal; min-inline-size: 7rem; }
    }

    .public-site-app__live::before { content: "●"; margin-inline-end: 0.25rem; font-size: 0.5rem; vertical-align: middle; }

    .public-site-float {
      display: grid;
      gap: 0.5rem;
      padding: 0.75rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--background);
      font-size: var(--text-xs);
      box-shadow: 0 16px 40px -12px oklch(0 0 0 / 22%);

      p { line-height: var(--leading-snug); }
    }

    .public-site-float__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted-foreground); font-size: 0.6875rem; }
    .public-site-float__meta strong { color: var(--foreground); }

    .public-site-float--voice {
      display: flex;
      align-items: center;
      justify-self: end;
      gap: 1rem;
      padding: 0.5rem 0.5rem 0.5rem 1rem;
      border-radius: 999px;

      > span:first-child { display: grid; }
      small { color: var(--muted-foreground); font-size: 0.6875rem; }
    }

    .public-site-voice-orb {
      display: grid;
      place-items: center;
      inline-size: 2.25rem;
      block-size: 2.25rem;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, oklch(0.82 0.1 30), oklch(0.66 0.18 28));
      color: oklch(0.55 0.2 27);
      animation: public-site-pulse 2.4s ease-out infinite;

      svg { inline-size: 1rem; block-size: 1rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .public-site-voice-orb { animation: none; }
    }

    /* Customer names */
    .public-site-logos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      padding: 0;
      border: 1px solid var(--border);
      background: var(--border);
      list-style: none;

      li { display: grid; place-items: center; min-block-size: 3.5rem; padding-inline: 0.5rem; background: var(--background); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-align: center; }
    }

    /* Sections */
    .public-site-section { display: grid; gap: 1rem; padding-block-start: clamp(4rem, 9vw, 7rem); }

    .public-site-section h2,
    .public-site-cta--centered h2 {
      max-inline-size: 46rem;
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: var(--font-weight-medium);
      line-height: 1.1;
      letter-spacing: -0.035em;
    }

    .public-site-section__lead { max-inline-size: 34rem; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

    .public-site-features { display: grid; gap: 1rem; margin-block-start: 1.5rem; }

    .public-site-feature {
      display: grid;
      align-content: start;
      gap: 0.75rem;
      padding: 0.75rem 0.75rem 1.5rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--background);

      h3 { margin-block-start: 0.75rem; padding-inline: 0.75rem; font-size: var(--text-lg); font-weight: var(--font-weight-medium); }
      > p { padding-inline: 0.75rem; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
    }

    .public-site-feature__art { display: grid; place-items: center; min-block-size: 15rem; padding: 1.5rem; border-radius: var(--radius-md); background: var(--muted); }

    .public-site-channels {
      display: grid;
      justify-items: center;
      gap: 1.25rem;

      > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; max-inline-size: 22rem; }
    }

    .public-site-emotion {
      display: grid;
      gap: 0.625rem;
      inline-size: min(100%, 20rem);
      padding: 1rem;
      border-radius: var(--radius-md);
      background: var(--background);
      box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
      font-size: var(--text-xs);

      small { color: var(--muted-foreground); }
      svg { inline-size: 0.875rem; block-size: 0.875rem; margin-inline-end: 0.25rem; color: oklch(0.75 0.16 70); vertical-align: -0.15em; }
    }

    .public-site-stats {
      display: grid;
      gap: 1rem;
      margin-block-start: 1.5rem;

      > div {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.75rem 1rem;
        padding: 1.5rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--background);
      }

      dt { grid-column: 2; grid-row: 1; max-inline-size: 7rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.4; text-align: end; }
      dd { display: contents; }
      dd span { grid-column: 1 / -1; font-size: var(--text-sm); line-height: var(--leading-snug); }
      strong { grid-column: 1; grid-row: 1; font-size: clamp(2.25rem, 4vw, 2.75rem); font-weight: var(--font-weight-medium); letter-spacing: -0.04em; line-height: 1; }

      .public-site-stats__inverse { background: var(--foreground); color: var(--background); }
      .public-site-stats__inverse dt { color: color-mix(in oklch, var(--background) 70%, var(--foreground)); }
    }

    .public-site-quote {
      display: grid;
      gap: 1.5rem;
      margin-block-start: clamp(4rem, 9vw, 7rem);
      padding: clamp(1.5rem, 6vw, 4.5rem);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      background: var(--background);

      figure { display: grid; gap: 1.5rem; }
      blockquote { max-inline-size: 38rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--font-weight-medium); letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
      figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-xs); }
      figcaption > span:last-child { display: grid; }
      small { color: var(--muted-foreground); }
    }

    .public-site-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-start: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--muted); border-radius: var(--radius-xl); }
    .public-site-cta p { margin-block-start: 0.5rem; color: var(--muted-foreground); }

    .public-site-cta--centered {
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      margin-block-start: clamp(4rem, 9vw, 7rem);
      background: none;
      text-align: center;

      h2 { max-inline-size: 36rem; }
      p { max-inline-size: 26rem; margin-block: 0 1rem; font-size: var(--text-sm); }
      .public-site-actions { justify-content: center; }
    }

    .public-site-related { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 1.25rem; font-size: var(--text-sm); }

    .public-site-page,
    .blog-post,
    .blog-admin { padding-block: clamp(2.5rem, 6vw, 5rem); }
    .public-site-page { max-inline-size: 48rem; margin-inline: auto; }
    .public-site-page h1,
    .blog-post h1,
    .blog-admin h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: var(--leading-tight); }
    .public-site-prose,
    .blog-body { line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
    .public-site-prose > * + *,
    .blog-body > * + * { margin-block-start: 1.5rem; }
    .public-site-prose h2,
    .blog-body h2 { margin-block-start: 2.5rem; }
    .public-site-prose :where(ul, ol),
    .blog-body :where(ul, ol) { padding-inline-start: 1.5rem; }
    .public-site-prose li + li,
    .blog-body li + li { margin-block-start: 0.5rem; }
    .public-site-prose .card__content { display: grid; justify-items: start; gap: 1.5rem; }
    .public-site-prose a:not(.button),
    .blog-body a { text-underline-offset: 0.2em; }

    .blog-list { display: grid; gap: 1.5rem; padding-block: 2rem; list-style: none; padding-inline: 0; }
    .blog-list > :where(li, article) { padding-block-end: 1.5rem; border-block-end: 1px solid var(--border); }
    .blog-list h2 { margin-block: 0.5rem; }
    .blog-post { max-inline-size: 48rem; margin-inline: auto; }
    .blog-post .blog-meta { margin-block: 1rem 2rem; }
    .blog-cover { inline-size: 100%; max-block-size: 28rem; object-fit: contain; margin-block: 1.5rem; border-radius: var(--radius); }
    .blog-body :where(img, video) { block-size: auto; border-radius: var(--radius); margin-inline: auto; }
    .blog-body blockquote { border-inline-start: 3px solid var(--border); padding-inline-start: 1.25rem; color: var(--muted-foreground); }
    .blog-body pre { overflow-x: auto; padding: 1rem; background: var(--muted); border-radius: var(--radius); }
    .blog-body table { display: block; overflow-x: auto; border-collapse: collapse; }
    .blog-body :where(th, td) { padding: 0.75rem; border: 1px solid var(--border); text-align: start; }

    .public-site-form { max-inline-size: 36rem; margin-inline: auto; padding-block: 3rem; }
    .public-site-form,
    .public-site-form form,
    .blog-editor,
    .blog-editor form { display: grid; gap: 1.5rem; min-inline-size: 0; }
    .blog-admin { max-inline-size: 60rem; margin-inline: auto; }
    .blog-admin-actions { margin-block: 1.5rem; }
    .blog-editor textarea { min-block-size: 12rem; resize: vertical; }
    .blog-editor .rich-text-editor { min-inline-size: 0; }

    @media (width >= 40rem) {
      .public-site-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .public-site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (width >= 48rem) {
      .public-site-header { flex-wrap: nowrap; }
      .public-site-nav { justify-content: center; }
      .public-site-header-actions { margin-inline-start: auto; flex-shrink: 0; }
      .public-site-hero { grid-template-columns: 1.6fr 1fr; }
      .public-site-hero__aside { padding-block-end: 0.5rem; }
      .public-site-news { grid-column: 1 / -1; }
      .public-site-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .public-site-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (width >= 64rem) {
      .public-site-logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
      .public-site-footer__inner { grid-template-columns: 2fr repeat(3, 1fr); }
      .public-site-app { margin-inline: 2rem; }
      .public-site-demo__stage { padding-block: 1rem 2rem; }
      .public-site-float { position: absolute; inline-size: 17rem; }
      .public-site-float--whatsapp { inset-block-start: 5.5rem; inset-inline-end: -0.5rem; }
      .public-site-float--widget { inset-block-end: 3rem; inset-inline-start: -0.5rem; inline-size: 16rem; }
      .public-site-float--voice { inline-size: auto; inset-block-end: 0.5rem; inset-inline-end: 1rem; }
    }

    @media (width >= 72rem) {
      .public-site-app { grid-template-columns: 11rem minmax(0, 1fr); }
      .public-site-app__nav { display: grid; }
    }
  }
}