.base-copy {
  --content-max-width: 1200px;
  --marketing-border: var(--border);
  --marketing-eyebrow: var(--muted-foreground);
  --marketing-heading: var(--foreground);
  font-feature-settings: 'ss01' on, 'ss02' on;
}

.page-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.type-heading-2 {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.type-body {
  font-size: 1rem;
  line-height: 1.5;
}

.type-script {
  font-family: Georgia, serif;
  font-style: italic;
}

.exposure {
  font-family: var(--font-display), sans-serif;
  font-weight: 500;
  line-height: 1.3;
}

.text-c-primary\/50 {
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.text-c-warm-accent {
  color: var(--brand);
}

.border-c-line\/30 {
  border-color: color-mix(in srgb, var(--foreground) 14%, transparent);
}

@media (min-width: 640px) {
  .page-container {
    padding-inline: 32px;
  }
}

.base-marquee {
  animation: base-marquee 28s linear infinite;
}

.base-release-scroll {
  scrollbar-width: none;
}

.base-release-scroll::-webkit-scrollbar {
  display: none;
}

.base-client-ai-scroll {
  scrollbar-width: none;
}

@media (min-width: 768px) {
  .base-feature-copy {
    opacity: 0;
    transform: translate(-28px, -50%);
    transition:
      opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .base-feature-copy-right {
    transform: translate(28px, -50%);
  }

  .base-feature-media {
    width: 100%;
    transition: width 900ms
      linear(
        0,
        0.131 5.56%,
        0.34 11.11%,
        0.521 16.67%,
        0.659 22.22%,
        0.758 27.78%,
        0.83 33.33%,
        0.88 38.89%,
        0.915 44.44%,
        0.941 50%,
        0.958 55.56%,
        0.971 61.11%,
        0.979 66.67%,
        0.985 72.22%,
        0.99 77.78%,
        0.993 83.33%,
        0.995 88.89%,
        0.997 94.44%,
        1
      );
  }

  .base-feature-card[data-revealed='true'] .base-feature-copy {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 180ms;
  }

  .base-feature-card[data-revealed='true'] .base-feature-media {
    width: 50%;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .base-feature-copy {
    opacity: 1;
    transform: translate(0, -50%);
    transition: none;
  }

  .base-feature-media {
    width: 50%;
    transition: none;
  }
}

.base-knowledge-static,
.base-knowledge-live {
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.base-knowledge-reduced-static {
  display: none;
}

.base-knowledge-live,
.base-knowledge-demo[data-live='true'] .base-knowledge-static {
  opacity: 0;
}

.base-knowledge-demo[data-live='true'] .base-knowledge-live {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .base-knowledge-static {
    display: none;
  }

  .base-knowledge-reduced-static {
    display: block;
  }
}

.base-client-ai-scroll::-webkit-scrollbar {
  display: none;
}

.base-client-ai-mascot {
  animation: base-client-ai-mascot-float 5.8s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
  will-change: transform;
}

@keyframes base-client-ai-mascot-float {
  from {
    transform: translate3d(0, 2px, 0) rotate(-3deg);
  }

  to {
    transform: translate3d(4px, -10px, 0) rotate(2deg);
  }
}

.base-comparison[data-motion='ready']:not([data-visible='true'])
  .base-comparison-item {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.base-comparison[data-visible='true'] .base-comparison-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 320ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--comparison-delay, 0ms);
}

.base-hero-bar {
  transform-origin: bottom center;
  opacity: 0;
  transform: scaleY(0.2);
}

.base-hero-bars[data-visible='true'] .base-hero-bar {
  animation: base-hero-bar-enter 340ms cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: var(--bar-delay, 0ms);
}

@keyframes base-hero-bar-enter {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.base-hero-comet-tail {
  pointer-events: none;
}

.base-hero-mascot-launch {
  padding-inline: 0.02em;
}

@keyframes base-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.base-demo-panel {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  animation: base-demo-panel-enter 620ms cubic-bezier(0.23, 1, 0.32, 1)
    forwards;
  will-change: transform, opacity;
}

.base-demo-panel[data-panel='research'] {
  animation-delay: 100ms;
}

.base-demo-panel[data-panel='voice'] {
  animation-delay: 180ms;
}

.base-demo-panel[data-panel='draft'] {
  animation-delay: 260ms;
}

.base-demo-panel-motion {
  animation: base-demo-panel-drift 7.5s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
  will-change: transform;
}

.base-demo-mascot-motion {
  animation: base-demo-mascot-float 5.6s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
  will-change: transform;
}

.base-demo-panel-motion[data-drift='left'] {
  animation-delay: -1.8s;
  animation-duration: 8.5s;
}

.base-demo-panel-motion[data-drift='right'] {
  animation-delay: -4.2s;
  animation-direction: alternate-reverse;
  animation-duration: 9.25s;
}

.base-demo-panel-motion[data-drift='center'] {
  animation-delay: -3.1s;
  animation-duration: 7.8s;
}

.base-demo-panel-card {
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .base-demo-panel-card:hover {
    transform: translate3d(0, -3px, 0) scale(1.012);
    box-shadow:
      0 24px 65px rgb(25 25 22 / 18%),
      0 3px 10px rgb(25 25 22 / 8%);
  }
}

@keyframes base-demo-panel-enter {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes base-demo-panel-drift {
  from {
    transform: translate3d(-2px, -3px, 0) rotate(-0.35deg);
  }

  to {
    transform: translate3d(3px, 5px, 0) rotate(0.35deg);
  }
}

@keyframes base-demo-mascot-float {
  from {
    transform: translate3d(0, 0, 0) rotate(-4deg);
  }

  to {
    transform: translate3d(6px, -14px, 0) rotate(3deg);
  }
}

.base-editor-caret {
  animation: base-editor-caret 1.1s steps(1) infinite;
}

.base-editor-email-canvas {
  padding-inline: 3rem;
}

@keyframes base-editor-caret {
  50% {
    opacity: 0;
  }
}

.base-brain-light-streak {
  animation: base-brain-light-drift 8s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
  will-change: transform, opacity;
}

@keyframes base-brain-light-drift {
  from {
    opacity: 0.06;
    transform: translate3d(-20px, -35px, 0) scaleY(0.82);
  }

  to {
    opacity: 0.25;
    transform: translate3d(28px, 42px, 0) scaleY(1.08);
  }
}

.hero-v2 {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-v2-dot-grid {
  background-image: radial-gradient(
    circle,
    rgb(0 0 0 / 12%) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 42%,
    black 20%,
    transparent 75%
  );
  animation: hero-v2-dot-drift 28s linear infinite;
  will-change: background-position;
}

.hero-v2-dot-grid--soft {
  background-image: radial-gradient(
    circle,
    rgb(0 0 0 / 7%) 1px,
    transparent 1px
  );
  opacity: 0.7;
}

@keyframes hero-v2-dot-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 22px 22px;
  }
}

.hero-v2-line-grid {
  background-image:
    linear-gradient(rgb(0 0 0 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 7%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(
    ellipse 72% 58% at 50% 40%,
    black 15%,
    transparent 78%
  );
  animation: hero-v2-grid-drift 36s linear infinite;
  will-change: background-position;
}

@keyframes hero-v2-grid-drift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 48px 48px, 48px 48px;
  }
}

.hero-v2-rings {
  background-image: repeating-radial-gradient(
    circle at 50% 42%,
    transparent 0,
    transparent 27px,
    rgb(0 0 0 / 8%) 27px,
    rgb(0 0 0 / 8%) 28px
  );
  mask-image: radial-gradient(
    ellipse 68% 55% at 50% 42%,
    black 10%,
    transparent 72%
  );
  animation: hero-v2-rings-pulse 10s cubic-bezier(0.45, 0, 0.55, 1) infinite
    alternate;
  will-change: opacity, transform;
}

@keyframes hero-v2-rings-pulse {
  from {
    opacity: 0.55;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

.hero-v2-scan {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 11px,
    rgb(0 0 0 / 7%) 11px,
    rgb(0 0 0 / 7%) 12px
  );
  mask-image: radial-gradient(
    ellipse 70% 58% at 50% 42%,
    black 18%,
    transparent 75%
  );
  animation: hero-v2-scan-drift 24s linear infinite;
  will-change: background-position;
}

@keyframes hero-v2-scan-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 12px;
  }
}

.hero-v2-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath stroke='%23000' stroke-opacity='.1' d='M14 11v6M11 14h6'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  mask-image: radial-gradient(
    ellipse 70% 58% at 50% 42%,
    black 18%,
    transparent 75%
  );
  animation: hero-v2-plus-drift 32s linear infinite;
  will-change: background-position;
}

@keyframes hero-v2-plus-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 28px 28px;
  }
}

.hero-v2-haze {
  background:
    radial-gradient(
      ellipse 50% 40% at 50% 40%,
      rgb(255 255 255 / 70%) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 35% 30% at 30% 55%,
      rgb(200 210 255 / 35%) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 32% 28% at 70% 50%,
      rgb(255 220 200 / 28%) 0%,
      transparent 70%
    );
  filter: blur(28px);
  transform: scale(1.15);
  animation: hero-v2-haze-breathe 12s cubic-bezier(0.45, 0, 0.55, 1) infinite
    alternate;
  will-change: opacity, transform;
}

@keyframes hero-v2-haze-breathe {
  from {
    opacity: 0.55;
    transform: scale(1.12) translate3d(-1%, 0.5%, 0);
  }

  to {
    opacity: 0.9;
    transform: scale(1.2) translate3d(1%, -0.8%, 0);
  }
}

.max-w-frame {
  max-width: 1140px;
}

.type-button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.base-nav-glass {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(24px);
  box-shadow:
    color-mix(in srgb, var(--foreground) 8%, transparent) 0 0 0 0.5px,
    color-mix(in srgb, var(--foreground) 8%, transparent) 0 16px 32px 0,
    color-mix(in srgb, var(--foreground) 6%, transparent) 0 2px 24px 0;
}

@keyframes hero-v2-tile-land {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--tile-rise, 8px) + 12px), 0);
  }

  to {
    opacity: var(--tile-opacity, 1);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-v2-tile-float {
  from {
    transform: translate3d(0, calc(var(--tile-float, 6px) * -1), 0);
  }

  to {
    transform: translate3d(0, var(--tile-float, 6px), 0);
  }
}

@keyframes hero-v2-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-v2-tile-land {
  animation: hero-v2-tile-land 1.6s cubic-bezier(0.23, 1, 0.32, 1)
    var(--tile-delay, 0s) both;
}

.hero-v2-tile-float {
  animation: hero-v2-tile-float var(--tile-float-dur, 9s) ease-in-out
    var(--tile-float-delay, 0s) infinite alternate;
}

.hero-v2-enter {
  opacity: 0;
  animation: hero-v2-enter 0.72s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc(120ms + var(--enter-stagger, 0) * 55ms);
}

.hero-v2-enter-title {
  animation-duration: 0.85s;
  animation-delay: calc(80ms + var(--enter-stagger, 0) * 65ms);
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2-tile-land,
  .hero-v2-tile-float,
  .hero-v2-enter,
  .hero-v2-dot-grid,
  .hero-v2-line-grid,
  .hero-v2-rings,
  .hero-v2-scan,
  .hero-v2-plus,
  .hero-v2-haze {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .base-marquee {
    animation-play-state: paused;
  }

  .base-comparison[data-motion='ready'] .base-comparison-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .base-hero-bars .base-hero-bar {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .base-hero-comet-tail {
    display: none;
  }

  .base-demo-panel,
  .base-demo-panel-motion,
  .base-demo-mascot-motion {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .base-demo-panel-card {
    transition: none;
  }

  .base-client-ai-mascot {
    animation: none;
    transform: none;
  }

  .base-editor-caret {
    animation: none;
  }

  .base-brain-light-streak {
    animation: none;
    opacity: 0.12;
    transform: none;
  }
}

@keyframes base-format-tab-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}