/* Pixels shell: the header, call to action and footer shared by every page and the Storybook (explore/).
   Loaded last on every page so the site and the Storybook look like one product.
   Colors come only from Pixels semantic tokens, so light and dark both work. */

/* Dark theme uses the same neutral blacks as the Storybook (no blue tint). */
:root[data-px-theme='dark'] {
  --px-color-surface-default: #111112;
  --px-color-surface-raised: #19191b;
  --px-color-surface-sunken: #0b0b0c;
}

:root {
  --sh-bg: var(--px-color-surface-default, #ffffff);
  --sh-fg: var(--px-color-content-neutral-primary, #101828);
  --sh-fg-2: var(--px-color-content-neutral-secondary, #344054);
  --sh-fg-3: var(--px-color-content-neutral-tertiary, #667085);
  --sh-line: var(--px-color-border-neutral-subtle, #eaecf0);
  --sh-line-2: var(--px-color-border-neutral-default, #d0d5dd);
  --sh-muted: var(--px-color-background-neutral-default, #f2f4f7);
  --sh-brand: var(--px-color-background-brand-default, #2563eb);
  --sh-brand-hover: var(--px-color-background-brand-hover, #1d4ed8);
  --sh-btn-line: #d4d4d8;
}
:root[data-px-theme='dark'] {
  --sh-bg: #111112;
  --sh-fg: #f4f4f5;
  --sh-fg-2: #d4d4d8;
  --sh-fg-3: #8d8d94;
  --sh-line: #26262a;
  --sh-line-2: #3a3a3f;
  --sh-muted: #1f1f22;
  --sh-brand: var(--px-color-background-brand-default, #3b82f6);
  --sh-brand-hover: var(--px-color-background-brand-hover, #2563eb);
  --sh-btn-line: #3a3a3f;
}

/* ---------------------------------------------------------------- buttons
   Marketing variants only. Plain .px-btn is the design system component (pixels-ui.css, Figma tokens),
   so this must not restyle it. */
.px-btn:is(.px-btn--brand, .px-btn--line, .px-btn--light, .px-btn--ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 500 14px/1 var(--font-family, 'Poppins', sans-serif);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.px-btn--brand {
  background: var(--sh-brand);
  color: #fff;
}
.px-btn--brand:hover {
  background: var(--sh-brand-hover);
}
.px-btn--line {
  border-color: var(--sh-line-2);
  color: var(--sh-fg);
}
.px-btn--line:hover {
  background: var(--sh-muted);
}
.px-btn--light {
  background: #fff;
  color: var(--px-color-brand-700, #1d4ed8);
}
.px-btn--light:hover {
  background: rgba(255, 255, 255, 0.9);
}
.px-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.px-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------- header
   Nothing in the header may change size between pages: the active tab keeps the same weight (only color and the
   underline change), the scrollbar space is always reserved, and the theme switch has its room before it draws. */
html {
  scrollbar-gutter: stable;
}
.site-header {
  background: color-mix(in srgb, var(--sh-bg) 88%, transparent);
  border-bottom: 1px solid var(--sh-line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.site-header__in {
  height: 64px;
  gap: 16px;
}
.site-header .brand img {
  height: 26px;
}
.site-header .nav {
  height: 64px;
  gap: 4px;
  margin: 0 0 0 24px;
}
.site-header .nav__link {
  height: 64px;
  padding: 0 12px;
  border-radius: 0;
  background: none !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--sh-fg-3);
}
.site-header .nav__link:hover {
  color: var(--sh-fg);
}
.site-header .nav__link[aria-current='page'],
.site-header .nav__link.is-active {
  color: var(--sh-fg);
  font-weight: 400;
}
.site-header .nav__link[aria-current='page']::after,
.site-header .nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--sh-fg);
}
.site-header .dropdown {
  top: calc(100% - 4px);
  border-color: var(--sh-line);
  border-radius: 14px;
  background: var(--px-color-surface-overlay, var(--sh-bg));
}
.site-header .dropdown a {
  color: var(--sh-fg);
}
.site-header .dropdown a:hover,
.site-header .dropdown a:focus-visible,
.site-header .dropdown a[aria-current='page'] {
  background: var(--sh-muted);
}
.site-header__theme {
  margin-left: auto;
  /* room for the theme switch before js/theme.js draws it, so the header doesn't jump */
  min-width: 96px;
  min-height: 36px;
}
.site-header .theme-picker {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  background: none;
}
.site-header .theme-picker button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--sh-fg-3);
}
.site-header .theme-picker button[aria-checked='true'] {
  background: var(--sh-muted);
  color: var(--sh-fg);
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--sh-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.site-header__cta:hover {
  background: var(--sh-brand-hover);
}
.site-header .burger {
  border-color: var(--sh-line);
  background: none;
  color: var(--sh-fg);
}
.mnav .mnav__cta {
  margin-top: 12px;
  border-bottom: 0;
  justify-content: center !important;
  display: flex !important;
  justify-content: center;
  height: 44px;
  align-items: center;
  border-radius: 10px;
  background: var(--sh-brand);
  color: #fff !important;
  font-weight: 500;
}
.mnav .mnav__cta:hover {
  background: var(--sh-brand-hover);
}
@media (max-width: 1080px) {
  .site-header .nav__link {
    padding: 0 8px;
  }
  .site-header .nav__link[aria-current='page']::after,
  .site-header .nav__link.is-active::after {
    left: 8px;
    right: 8px;
  }
}
@media (max-width: 900px) {
  .site-header__in {
    height: 60px;
  }
  .site-header__cta {
    display: none;
  }
  .site-header .mnav {
    background: var(--sh-bg);
    border-bottom-color: var(--sh-line);
  }
}

/* ---------------------------------------------------------------- call to action */
.px-cta {
  padding: 48px 0 24px;
}
.px-cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 24px 76px;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--sh-brand) 85%, #fff 0%) 0%, transparent 60%),
    radial-gradient(70% 60% at 85% -10%, rgba(124, 58, 237, 0.45), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0f1a3d 55%, color-mix(in srgb, var(--sh-brand) 70%, #0b1020) 100%);
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--sh-brand) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
}
/* fine grid that fades toward the edges */
.px-cta__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask: radial-gradient(70% 80% at 50% 40%, #000, transparent 75%);
  mask: radial-gradient(70% 80% at 50% 40%, #000, transparent 75%);
}
.px-cta__orbits {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.px-cta__orbits circle {
  fill: none;
  stroke: rgba(173, 196, 255, 0.14);
  stroke-width: 1;
}
.px-cta__orbits .px-cta__comet {
  stroke: rgba(219, 230, 255, 0.95);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 30 970;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(147, 180, 255, 0.9));
  animation: px-cta-orbit 12s linear infinite;
}
@keyframes px-cta-orbit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}
.px-cta__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.px-cta__stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 1px rgba(170, 195, 255, 0.8);
  opacity: 0.2;
  animation: px-cta-twinkle 3.2s ease-in-out infinite;
}
@keyframes px-cta-twinkle {
  50% { opacity: 0.95; transform: scale(1.4); }
}
/* slow light behind the heading */
.px-cta__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 640px;
  height: 260px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sh-brand) 55%, transparent), transparent);
  filter: blur(30px);
  opacity: 0.6;
  animation: px-cta-breathe 8s ease-in-out infinite;
}
@keyframes px-cta-breathe {
  50% { opacity: 0.95; scale: 1.08; }
}
.px-cta__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 500;
}
.px-cta__chip b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}
.px-cta__card h2 {
  position: relative;
  margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  background: linear-gradient(180deg, #fff 30%, #c7d6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.px-cta .px-cta__card p {
  position: relative;
  max-width: 520px;
  margin: 16px auto 0 !important;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.px-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.px-cta .px-btn--light {
  gap: 8px;
  box-shadow: 0 10px 30px -10px rgba(147, 180, 255, 0.8), inset 0 -1px 0 rgba(16, 24, 40, 0.08) !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
.px-cta .px-btn--light:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px -10px rgba(147, 180, 255, 0.95) !important;
}
.px-cta__arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.px-cta .px-btn--light:hover .px-cta__arrow {
  transform: translateX(3px);
}
.px-cta .px-btn--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.px-cta .px-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
@media (max-width: 640px) {
  .px-cta__card {
    padding: 56px 20px 60px;
    border-radius: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-cta__comet,
  .px-cta__stars i,
  .px-cta__glow {
    animation: none !important;
  }
}

/* ---- call-to-action motion: aurora, light beam, pointer spotlight, shimmering title, button shine, intro */
.px-cta__aurora { position: absolute; inset: 0; z-index: -1; filter: blur(50px); opacity: 0.7; }
.px-cta__aurora i { position: absolute; width: 42%; height: 70%; border-radius: 50%; animation: px-cta-drift 16s ease-in-out infinite alternate; }
.px-cta__aurora i:nth-child(1) { left: -8%; top: 10%; background: rgba(99, 102, 241, 0.45); }
.px-cta__aurora i:nth-child(2) { right: -6%; top: -20%; background: rgba(168, 85, 247, 0.4); animation-duration: 19s; animation-delay: -6s; }
.px-cta__aurora i:nth-child(3) { left: 30%; bottom: -40%; background: rgba(56, 189, 248, 0.35); animation-duration: 22s; animation-delay: -11s; }
@keyframes px-cta-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12%, 8%) scale(1.15); }
  100% { transform: translate(-8%, -6%) scale(0.95); }
}
.px-cta__beam { position: absolute; inset: -20% auto -20% 0; z-index: -1; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.09) 55%, transparent); transform: translateX(-120%) skewX(-18deg); animation: px-cta-beam 7s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes px-cta-beam { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
.px-cta__spot { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(165, 190, 255, 0.18), transparent 60%); }
.px-cta__card:hover .px-cta__spot { opacity: 1; }
.px-cta__card::before { animation: px-cta-grid 24s linear infinite; }
@keyframes px-cta-grid { to { background-position: 0 32px, 32px 0; } }
.px-cta__card h2 { background: linear-gradient(100deg, #fff 0%, #fff 40%, #a5bfff 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; animation: px-cta-shine 6s ease-in-out infinite; }
@keyframes px-cta-shine { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.px-cta__chip b { animation: px-cta-pulse 2s ease-out infinite; }
@keyframes px-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }
.px-cta .px-btn--light { position: relative; overflow: hidden; }
.px-cta .px-btn--light::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(165, 190, 255, 0.55) 50%, transparent 70%); transform: translateX(-100%); animation: px-cta-btn 4s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes px-cta-btn { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* intro: chip, title, text and buttons rise in one after another */
.px-cta__card > .px-cta__chip, .px-cta__card > h2, .px-cta__card > p, .px-cta__card > .px-cta__actions { opacity: 0; transform: translateY(16px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.px-cta__card.is-in > .px-cta__chip, .px-cta__card.is-in > h2, .px-cta__card.is-in > p, .px-cta__card.is-in > .px-cta__actions { opacity: 1; transform: none; }
.px-cta__card.is-in > h2 { transition-delay: 0.1s; }
.px-cta__card.is-in > p { transition-delay: 0.2s; }
.px-cta__card.is-in > .px-cta__actions { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .px-cta__aurora i, .px-cta__beam, .px-cta__card::before, .px-cta__card h2, .px-cta__chip b, .px-cta .px-btn--light::after { animation: none !important; }
  .px-cta__beam { display: none; }
  .px-cta__card > * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- footer
   Same as the Storybook footer: columns on top, the outlined "Pixels" wordmark sits behind them. */
.px-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 16px;
  padding: 64px 0 32px;
  border-top: 1px solid var(--sh-line);
  background: var(--sh-bg);
}
.px-footer .site-footer__top {
  position: relative;
  z-index: 1;
}
.px-footer .site-footer__brand p,
.px-footer .site-footer__nav a,
.px-footer .copy,
.px-footer .site-footer__meta {
  color: var(--sh-fg-3);
}
.px-footer .site-footer__h {
  color: var(--sh-fg);
}
.px-footer .site-footer__nav a:hover {
  color: var(--sh-fg);
}
.px-footer .site-footer__bottom {
  position: relative;
  z-index: 1;
  border-top-color: var(--sh-line);
}
.px-footer .site-footer__word {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: none;
}
.px-footer .site-footer__word svg {
  margin-bottom: -4%;
}
/* quieter wordmark: soft grid, faint outline, one brand-colored light */
.px-footer .site-footer__word .w-grid { opacity: 0.08; }
.px-footer .site-footer__word .w-line { opacity: 0.18; }
.px-footer .site-footer__word .w-run { opacity: 0.22; }
.px-footer .site-footer__word .w-run--b { stroke: var(--sh-brand); opacity: 0.14; }

/* Motion pages: plain black headings (no gradient text), like the rest of the site */
body[data-page='motion'] .grad {
  background: none;
  color: inherit;
  animation: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------------------------------------------------------------- one button style for every marketing page
   Same height, radius, type and border on the home page, Components, Motion, Solutions, Pricing and the CTA.
   (Component demos inside the docs keep their own px-btn sizes: they show the component itself.) */
.btn,
.hx-ctas .px-btn,
.pc-btn {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 40px !important;
  padding: 0 16px !important;
  gap: 8px !important;
  border-radius: 10px !important;
  font: 500 14px/1 var(--font-family, 'Poppins', sans-serif) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.btn--lg,
.hx-ctas .px-btn--lg {
  height: 44px !important;
  padding: 0 18px !important;
}
.btn--dark,
.hx-ctas .hx-cta,
.pc-btn--dark {
  background: var(--sh-fg) !important;
  border: 1px solid var(--sh-fg) !important;
  color: var(--sh-bg) !important;
}
.btn--dark:hover,
.hx-ctas .hx-cta:hover,
.pc-btn--dark:hover {
  background: color-mix(in srgb, var(--sh-fg) 86%, var(--sh-bg)) !important;
}
/* plan cards: every plan button is the black primary, like the other site buttons */
.pc-btn--pri {
  background: var(--sh-fg) !important;
  border: 1px solid var(--sh-fg) !important;
  color: var(--sh-bg) !important;
}
.pc-btn--pri:hover {
  background: color-mix(in srgb, var(--sh-fg) 86%, var(--sh-bg)) !important;
}
.btn--outline,
.hx-ctas .px-btn--secondary-gray,
.pc-btn:not(.pc-btn--pri):not(.pc-btn--dark) {
  background: var(--sh-bg) !important;
  border: 1px solid var(--sh-btn-line, #d4d4d8) !important;
  color: var(--sh-fg) !important;
}
.btn--outline:hover,
.hx-ctas .px-btn--secondary-gray:hover,
.pc-btn:not(.pc-btn--pri):not(.pc-btn--dark):hover {
  background: var(--sh-muted) !important;
}
.px-cta .px-btn {
  height: 44px !important;
  padding: 0 18px !important;
}

/* ---------------------------------------------------------------- one hero style
   Home, Components and the Storybook overview share the same headline and intro text. */
.site .hero2 .h1,
.site .hx .hx-hero h1 {
  font-size: clamp(36px, 5.6vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
}
.site .hero2 .h1 + .lead,
.site .hero2 .lead,
.site .hx .hx-hero h1 + p {
  max-width: 640px;
  margin-inline: auto;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--sh-fg-3) !important;
}
@media (max-width: 640px) {
  .site .hero2 .h1 + .lead,
  .site .hero2 .lead,
  .site .hx .hx-hero h1 + p {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------- hero pill: link to the Storybook */
.hm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: var(--sh-bg);
  font-size: 13px;
  color: var(--sh-fg-2);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.hm-pill:hover {
  border-color: var(--sh-line-2);
}
.hm-pill__new {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sh-fg);
  color: var(--sh-bg);
  font-size: 11px;
  font-weight: 600;
}
.hm-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}