/* Home page, refreshed to match the Storybook overview (explore/): calmer bands, pill eyebrows,
   tighter headlines, 10px buttons, flat cards with hairline borders. Loaded after the older home styles. */

/* ---------------------------------------------------------------- type */
.site .hero2 .h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.site main .h2 {
  letter-spacing: -0.03em;
  font-weight: 600;
}
.site main .lead {
  color: var(--sh-fg-3);
}

/* eyebrows become small pills with a dot, like "Included with Pro" in the Storybook */
.site main .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: var(--sh-bg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sh-fg-2);
  width: fit-content;
}
.site main .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sh-brand);
}
.site main .eyebrow.mo-eyebrow::before {
  display: none;
}

/* ---------------------------------------------------------------- buttons */
.site main .btn {
  border-radius: 10px;
}
.site main .btn--lg {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

/* ---------------------------------------------------------------- bands and cards */
.site main .band {
  background: var(--px-color-surface-sunken, #f7f7f8);
  border-top: 1px solid var(--sh-line);
  border-bottom: 1px solid var(--sh-line);
}
:root[data-px-theme='dark'] .site main .band {
  background: #0b0b0c;
}
.site main .card,
.site main .feat,
.site main .why-card,
.site main .scale__panel,
.site main .rtl-card,
.site main .mo-frame {
  border-radius: 20px;
  box-shadow: none;
}

/* ---------------------------------------------------------------- install (npm) */
.hm-install .hm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
}
.hm-install .eyebrow + .h2 {
  margin-top: 14px;
}
.hm-install .lead {
  margin-top: 12px;
}
.hm-install .lead code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--sh-muted);
  font-size: 0.88em;
}
.site main .hm-checks {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--sh-fg-2);
}
.hm-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hm-checks li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sh-fg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
:root[data-px-theme='dark'] .hm-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E");
}
.hm-code {
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 20px;
  background: #0b0b0c;
}
.hm-code__tabs {
  display: flex;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid #222225;
}
.hm-code__tabs button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #2a2a2e;
  border-radius: 999px;
  background: none;
  font: 500 13px/1 var(--font-family, 'Poppins', sans-serif);
  color: #a1a1aa;
  cursor: pointer;
}
.hm-code__tabs button[aria-selected='true'] {
  border-color: transparent;
  background: #f4f4f5;
  color: #0b0b0c;
}
.hm-code pre {
  margin: 0;
  padding: 20px 22px 24px;
  overflow-x: auto;
  font: 13.5px/1.75 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: #e4e4e7;
}
.hm-code .c {
  color: #9a9aa3;
}
@media (max-width: 1000px) {
  .hm-install .hm-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .hm-code pre {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------- "Why Pixels" animated graphics
   Small looping SVG scenes, black and white plus the brand color. They pause off screen (js/site.js)
   and stand still for people who prefer reduced motion. */
.guide__ill.gx {
  display: grid;
  place-items: center;
  background:
    radial-gradient(var(--sh-line) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--px-color-surface-sunken, #f7f7f8);
}
.gx-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.gx-svg {
  max-width: 260px;
}
.gx-card,
.gx-chip,
.gx-term {
  fill: var(--sh-bg);
  stroke: var(--sh-line);
}
.gx-term {
  fill: #0b0b0c;
  stroke: #0b0b0c;
}
.gx-t {
  font: 600 11px ui-monospace, Menlo, Consolas, monospace;
  fill: var(--sh-fg);
}
.gx-wire,
.gx-flow {
  fill: none;
  stroke: var(--sh-line-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  animation: gx-dash 1.2s linear infinite;
}
.gx-arrow {
  fill: none;
  stroke: var(--sh-fg);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gx-ln,
.gx-ln2,
.gx-bar,
.gx-blk,
.gx-tog {
  fill: var(--sh-line);
}
.gx-ln {
  fill: rgba(255, 255, 255, 0.85);
}
.gx-ln.gx-cl {
  fill: var(--sh-bg);
}
/* one brand color, shared by every part */
.gx-c,
.gx-cf {
  fill: var(--sh-brand);
}
.gx-cs {
  fill: var(--sh-brand);
  opacity: 0.85;
}
.gx-knob {
  animation: gx-knob 3s ease-in-out infinite;
}
.gx-knob {
  fill: var(--sh-bg) !important;
}
.gx-tog {
}
@keyframes gx-knob {
  0%, 40% { transform: translateX(0); }
  50%, 90% { transform: translateX(-22px); }
  100% { transform: translateX(0); }
}
.gx-bar-fill {
  transform-box: fill-box;
  transform-origin: left;
  animation: gx-fill 3s ease-in-out infinite;
}
@keyframes gx-fill {
  0% { transform: scaleX(0.2); }
  50% { transform: scaleX(1.6); }
  100% { transform: scaleX(0.2); }
}
@keyframes gx-dash {
  to { stroke-dashoffset: -16; }
}

/* reusable components: blocks drop into the card one after another */
.gx-b {
  animation: gx-drop 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.gx-b2 { animation-delay: 0.25s; }
.gx-b3 { animation-delay: 0.5s; }
@keyframes gx-drop {
  0% { transform: translateY(-18px); opacity: 0; }
  12%, 80% { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(0); opacity: 0; }
}

/* design to code: the frame breathes, code lines type in, the caret blinks */
.gx-morph {
  transform-box: fill-box;
  transform-origin: center;
  animation: gx-breathe 3s ease-in-out infinite;
}
@keyframes gx-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.gx-k {
  fill: #3f3f46;
  transform-box: fill-box;
  transform-origin: left;
  animation: gx-type 4s steps(8, end) infinite;
}
.gx-kb { fill: var(--sh-brand); }
.gx-k2 { animation-delay: 0.4s; }
.gx-k3 { animation-delay: 0.8s; }
.gx-k4 { animation-delay: 1.2s; }
@keyframes gx-type {
  0% { transform: scaleX(0); }
  25%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.gx-caret {
  fill: #f4f4f5;
  animation: gx-blink 1s steps(1) infinite;
}
@keyframes gx-blink {
  50% { opacity: 0; }
}

/* guidelines: each rule gets its check, one by one */
.gx-tick-bg {
  fill: var(--sh-line);
  animation: gx-tickbg 4.5s ease infinite;
}
.gx-tick {
  fill: none;
  stroke: var(--sh-bg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: gx-tick 4.5s ease infinite;
}
.gx-r2 .gx-tick, .gx-r2 .gx-tick-bg { animation-delay: 0.5s; }
.gx-r3 .gx-tick, .gx-r3 .gx-tick-bg { animation-delay: 1s; }
@keyframes gx-tick {
  0%, 10% { stroke-dashoffset: 14; }
  22%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 14; }
}
@keyframes gx-tickbg {
  0%, 10% { fill: var(--sh-line); }
  18%, 85% { fill: var(--sh-fg); }
  100% { fill: var(--sh-line); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-svg * {
    animation: none !important;
  }
  .gx-tick { stroke-dashoffset: 0; }
  .gx-tick-bg { fill: var(--sh-fg); }
}
.gx-tog {
  fill: var(--sh-brand);
}