/* ===============================================
   home.css — component styles for naina homepage
   Only contains component CSS that layers on top of
   the base system (reset, colors, type, space, grids,
   elements). No new colors, no font-size/family/color
   overrides except where justified.
   =============================================== */


/* ── Site nav ───────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(30px);
  border-block-end: 1px solid var(--color-neutral-8);

  >.inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-xs);
    gap: var(--space-m);
  }

  >.inner>.brand {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
  }

  >.inner>.links {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }
}


/* ── Hero ───────────────────────────────────────── */
.hero {
  padding-block: var(--space-2xl) var(--space-xl);

  >.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    gap: var(--space-l);
    align-items: start;
  }

  >.hero-grid .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid var(--color-neutral-8);
    border-radius: 0.3em;
    color: var(--color-neutral-3);
    margin-block-end: var(--space-m);
  }

  >.hero-grid .eyebrow>.dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--color-color-1);
  }

  >.hero-grid h1 {
    letter-spacing: -0.03em;
    line-height: 1.02;
  }

  >.hero-grid h1 .it {
    font-family: var(--font-family-2);
    font-style: italic;
    color: var(--color-neutral-3);
  }

  >.hero-grid h1 .acc {
    color: var(--color-color-1);
  }

  >.hero-grid .lede {
    font-size: var(--font-size-1);
    color: var(--color-neutral-3);
    max-width: 38ch;
    margin-block: var(--space-m);

    >em {
      font-family: var(--font-family-2);
      font-style: italic;
      color: var(--color-neutral-1);
    }
  }

  >.hero-grid .cta-row {
    display: flex;
    gap: var(--space-2xs);
    flex-wrap: wrap;
  }

  >.hero-grid .stats {
    display: flex;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
    flex-wrap: wrap;
  }

  >.hero-grid .stats>span {
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);
  }

  >.hero-grid .stats>span>b {
    color: var(--color-neutral-1);
    font-weight: 500;
    margin-inline-end: var(--space-3xs);
  }
}


/* ── Specimen card (hero right) ─────────────────── */
.specimen {
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  overflow: hidden;

  >header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    border-block-end: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);
  }

  >header>.dots {
    display: flex;
    gap: 4px;
  }

  >header>.dots>i {
    display: block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background-color: var(--color-neutral-7);
  }

  >header>.live {
    margin-inline-start: auto;
    color: var(--color-color-1);
  }

  >.body {
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  >.body>.type-preview>.big {
    font-size: var(--font-size-5);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  >.body>.type-preview>.big>.it {
    font-family: var(--font-family-2);
    font-style: italic;
    color: var(--color-neutral-3);
  }

  >.body>.type-preview>.big>.acc {
    color: var(--color-color-1);
  }

  >.body>.type-preview>.mini {
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);
    margin-block-start: var(--space-3xs);
  }

  >.body>.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-3xs);
    border-block-start: 1px dashed var(--color-neutral-8);
  }

  >.body>.row>.k {
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  >.body>.row>.v {
    color: var(--color-neutral-2);
    font-size: var(--font-size--1);
  }

  >.body>.row>.swatches {
    display: flex;
    gap: 4px;
  }

  >.body>.row>.swatches>i {
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 0.25em;
  }

  >.body>.row>.swatches>.sw-0 {
    background-color: var(--color-color-1);
  }

  >.body>.row>.swatches>.sw-1 {
    background-color: var(--color-color-2);
  }

  >.body>.row>.swatches>.sw-2 {
    background-color: var(--color-color-3);
  }

  >.body>.row>.swatches>.sw-3 {
    background-color: var(--color-color-4);
  }

  >.body>.row>.swatches>.n-0 {
    background-color: var(--color-neutral-10);
  }

  >.body>.row>.swatches>.n-1 {
    background-color: var(--color-neutral-9);
  }

  >.body>.row>.swatches>.n-2 {
    background-color: var(--color-neutral-8);
  }

  >.body>.row>.swatches>.n-3 {
    background-color: var(--color-neutral-6);
  }

  >.body>.row>.swatches>.n-4 {
    background-color: var(--color-neutral-4);
  }

  >.body>.row>.swatches>.n-5 {
    background-color: var(--color-neutral-2);
  }
}


/* ── Generic section wrapper ────────────────────── */
.section {
  padding-block: var(--space-2xl);
}


/* ── Section headers (variants) ─────────────────── */
.shead {
  margin-block-end: var(--space-xl);

  >.label-row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-s);
  }

  >.label-row>.rule {
    flex: 1;
    height: 1px;
    background-color: var(--color-neutral-8);
  }

  >.label-row>.pulse {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background-color: var(--color-color-1);
    animation: pulse 1.6s ease-in-out infinite;
  }

  >h2 {
    letter-spacing: -0.02em;
    max-width: 28ch;
  }

  >h2 .it {
    font-family: var(--font-family-2);
    font-style: italic;
    color: var(--color-neutral-3);
  }

  >h2 .it.acc {
    color: var(--color-color-1);
  }

  >h2 .acc {
    color: var(--color-color-1);
  }

  &.shead--specimen>h2 {
    display: grid;
    gap: 0;
    line-height: 0.95;
  }

  &.shead--specimen>h2>span {
    display: block;
  }

  &.shead--specimen>h2>.l2 {
    padding-inline-start: var(--space-l);
  }

  &.shead--specimen>h2>.l3 {
    padding-inline-start: var(--space-3xl);
  }

  &.shead--ledger>.ledger-rows {
    margin-block-start: var(--space-m);
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--color-neutral-8);
    max-width: 44rem;
  }

  &.shead--ledger>.ledger-rows>.lrow {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-3);
    font-size: var(--font-size--1);
  }

  &.shead--ledger>.ledger-rows>.lrow>.k {
    color: var(--color-neutral-1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  &.shead--drop {
    position: relative;

    >.bignum {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      font-family: var(--font-family-2);
      font-style: italic;
      font-size: var(--font-size-10);
      line-height: 0.8;
      color: var(--color-neutral-8);
      pointer-events: none;
      user-select: none;
    }
  }

  &.shead--manifest>.meta-row {
    margin-block-start: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    color: var(--color-neutral-3);
    font-size: var(--font-size--1);
  }

  &.shead--manifest>.meta-row .dot {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--color-color-1);
    margin-inline-end: var(--space-3xs);
  }

  &.shead--manifest>.meta-row .dot.off {
    background-color: var(--color-neutral-7);
  }

  &.shead--manifest>.meta-row b {
    color: var(--color-neutral-1);
    font-weight: 500;
  }

  &.shead--prompt>.prompt-row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-9);
    width: fit-content;
    margin-block-end: var(--space-s);
    font-size: var(--font-size--1);
  }

  &.shead--prompt>.prompt-row>.caret {
    color: var(--color-color-1);
  }

  &.shead--prompt>.prompt-row>.cmd {
    color: var(--color-neutral-2);
  }

  &.shead--prompt>.prompt-row>.tag {
    margin-inline-start: var(--space-2xs);
    padding: 2px var(--space-3xs);
    border-radius: 0.3em;
    background-color: var(--color-neutral-8);
    color: var(--color-neutral-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  &.shead--banded>.quote-row {
    margin-block-start: var(--space-s);
    padding-inline-start: var(--space-s);
    border-inline-start: 2px solid var(--color-color-1);
    color: var(--color-neutral-3);
    font-family: var(--font-family-2);
    font-style: italic;
    font-size: var(--font-size-1);
    max-width: 50ch;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}


/* ── Color system ───────────────────────────────── */
.color-system {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-m);
  align-items: start;

  >.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);

    >.card {
      padding: var(--space-s);
      border: 1px solid var(--color-neutral-8);
      border-radius: var(--border-radius);
      background-color: var(--color-neutral-9);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);

      >.role {
        color: var(--color-neutral-4);
        font-size: var(--font-size--1);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      >.chip {
        height: var(--space-l);
        border-radius: 0.5em;
      }

      >.code {
        color: var(--color-neutral-4);
        font-size: var(--font-size--2);
      }

      &.is-primary>.chip {
        background-color: var(--color-color-1);
      }

      &.is-secondary>.chip {
        background-color: var(--color-color-2);
      }

      &.is-tertiary>.chip {
        background-color: var(--color-color-3);
      }

      &.is-delete>.chip {
        background-color: var(--color-color-4);
      }
    }
  }

  >.neutrals {
    padding: var(--space-s);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-9);

    >header {
      display: flex;
      justify-content: space-between;
      color: var(--color-neutral-4);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-block-end: var(--space-xs);
    }

    >.ramp {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 2px;
      height: var(--space-xl);
      border-radius: 0.5em;
      overflow: hidden;

      >i {
        display: block;
      }

      >.n-10 {
        background-color: var(--color-neutral-10);
      }

      >.n-9 {
        background-color: var(--color-neutral-9);
      }

      >.n-8 {
        background-color: var(--color-neutral-8);
      }

      >.n-7 {
        background-color: var(--color-neutral-7);
      }

      >.n-6 {
        background-color: var(--color-neutral-6);
      }

      >.n-5 {
        background-color: var(--color-neutral-5);
      }

      >.n-4 {
        background-color: var(--color-neutral-4);
      }

      >.n-3 {
        background-color: var(--color-neutral-3);
      }

      >.n-2 {
        background-color: var(--color-neutral-2);
      }

      >.n-1 {
        background-color: var(--color-neutral-1);
      }
    }

    >.labels {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 2px;
      margin-block-start: var(--space-3xs);
      color: var(--color-neutral-4);
      font-size: var(--font-size--2);
      text-align: center;
    }

    >.note {
      margin-block-start: var(--space-s);
      padding: var(--space-s);
      background-color: var(--color-neutral-10);
      border-radius: 0.5em;
      color: var(--color-neutral-3);
      font-size: var(--font-size--1);

      >b {
        color: var(--color-neutral-1);
        font-weight: 500;
      }
    }
  }
}


/* ── Type specimen ──────────────────────────────── */
.type-spec {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-neutral-8);

  >.row {
    display: grid;
    grid-template-columns: 4rem 6rem 1fr;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-neutral-8);
    align-items: baseline;

    >.el {
      color: var(--color-color-1);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >.sz {
      color: var(--color-neutral-4);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >.sample {
      letter-spacing: -0.02em;
    }

    &[data-size="6"]>.sample {
      font-size: var(--font-size-6);
    }

    &[data-size="5"]>.sample {
      font-size: var(--font-size-5);
    }

    &[data-size="4"]>.sample {
      font-size: var(--font-size-4);
    }

    &[data-size="3"]>.sample {
      font-size: var(--font-size-3);
    }

    &[data-size="2"]>.sample {
      font-size: var(--font-size-2);
    }

    &[data-size="1"]>.sample {
      font-size: var(--font-size-1);
    }

    &[data-size="0"]>.sample {
      font-size: var(--font-size-0);
    }

    &[data-size="-2"]>.sample {
      font-size: var(--font-size--2);
      color: var(--color-neutral-4);
    }
  }
}

.type-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-xs);
  margin-block-start: var(--space-m);

  >.card {
    padding: var(--space-s);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);

    >.k {
      color: var(--color-neutral-4);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >.v {
      letter-spacing: -0.02em;
      font-size: var(--font-size-2);
      margin-block-start: var(--space-3xs);

      >span {
        color: var(--color-neutral-4);
      }
    }
  }
}


/* ── Grid demo ──────────────────────────────────── */
.grid-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-block: 1px solid var(--color-neutral-8);

  >.rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);

    >.box {
      padding: var(--space-xs) var(--space-s);
      border: 1px solid var(--color-neutral-8);
      border-radius: 0.5em;
      background-color: var(--color-neutral-9);
      display: flex;
      justify-content: space-between;
      color: var(--color-neutral-3);
      font-size: var(--font-size--1);
      margin-inline: auto;

      &.w-full {
        width: 100%;
        background-color: var(--color-neutral-10);
      }

      &.w-wide-2 {
        width: 92%;
      }

      &.w-wide-1 {
        width: 82%;
      }

      &.w-standard {
        width: 72%;
        background-color: var(--color-neutral-10);
        border-color: var(--color-color-1);
        color: var(--color-color-1);
      }
    }
  }

  >.legend {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xs);
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);

    b {
      color: var(--color-neutral-1);
      font-weight: 500;
    }
  }
}


/* ── Components preview grid ────────────────────── */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-xs);

  >.comp {
    padding: var(--space-s);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-9);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 11rem;

    >.caption {
      color: var(--color-neutral-4);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;

      >b {
        color: var(--color-neutral-1);
        font-weight: 500;
      }
    }

    >.mini-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-3xs) var(--space-2xs);
      border: 1px solid var(--color-neutral-8);
      border-radius: 0.35em;
      background-color: var(--color-neutral-10);
      font-size: var(--font-size--2);

      >.r {
        display: flex;
        gap: var(--space-2xs);
        align-items: center;
        color: var(--color-neutral-3);

        >.pill {
          padding: 2px var(--space-3xs);
          border-radius: 0.25em;
          background-color: var(--color-color-1);
          color: var(--color-neutral-10);
        }
      }
    }

    >.mini-hero {
      padding: var(--space-s);
      border: 1px solid var(--color-neutral-8);
      border-radius: 0.5em;
      background-color: var(--color-neutral-10);

      >.h {
        font-size: var(--font-size-2);
        letter-spacing: -0.02em;
        display: flex;
        align-items: baseline;
        gap: var(--space-2xs);

        >.b {
          padding: 2px var(--space-3xs);
          border-radius: 0.25em;
          background-color: var(--color-color-1);
          color: var(--color-neutral-10);
          font-size: var(--font-size--2);
        }
      }

      >.sub {
        color: var(--color-neutral-4);
        font-size: var(--font-size--1);
        margin-block-start: var(--space-3xs);
      }
    }

    >.mini-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3xs);

      >.c {
        padding: var(--space-2xs);
        border: 1px solid var(--color-neutral-8);
        border-radius: 0.35em;
        background-color: var(--color-neutral-10);
        display: flex;
        flex-direction: column;

        >b {
          font-weight: 500;
        }

        >span {
          color: var(--color-neutral-4);
          font-size: var(--font-size--2);
        }
      }
    }

    >.mini-article {
      >.m {
        color: var(--color-neutral-4);
        font-size: var(--font-size--2);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      >.h {
        font-family: var(--font-family-2);
        font-size: var(--font-size-2);
        margin-block: var(--space-3xs);
      }

      >.p {
        color: var(--color-neutral-3);
        font-size: var(--font-size--1);
      }
    }

    >.mini-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-3xs);
      flex: 1;

      >i {
        display: block;
        border-radius: 0.35em;
        min-height: 4rem;

        &:nth-child(1) {
          background-color: var(--color-color-1);
        }

        &:nth-child(2) {
          background-color: var(--color-color-2);
        }

        &:nth-child(3) {
          background-color: var(--color-color-3);
        }
      }
    }

    >.mini-cta {
      padding: var(--space-s);
      border-radius: 0.5em;
      background-color: var(--color-color-1);
      color: var(--color-neutral-10);
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      align-items: flex-start;

      >.b {
        font-size: var(--font-size-1);
        font-weight: 500;
      }

      >.sub {
        font-size: var(--font-size--1);
        opacity: 0.85;
      }

      >.pill {
        padding: var(--space-3xs) var(--space-2xs);
        border-radius: 0.3em;
        background-color: var(--color-neutral-10);
        color: var(--color-color-1);
        font-size: var(--font-size--2);
      }
    }

    >.mini-footer {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-xs);
      color: var(--color-neutral-4);
      font-size: var(--font-size--2);
      padding-block-start: var(--space-2xs);
      border-block-start: 1px solid var(--color-neutral-8);
    }
  }
}


/* ── Stack list + terminal ─────────────────────── */
.stack-section>.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-m);

  >.list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    >.item {
      display: grid;
      grid-template-columns: 3rem 1fr auto;
      gap: var(--space-s);
      align-items: center;
      padding: var(--space-s);
      border: 1px solid var(--color-neutral-8);
      border-radius: var(--border-radius);
      background-color: var(--color-neutral-9);

      >.glyph {
        width: 2.4em;
        height: 2.4em;
        display: grid;
        place-items: center;
        border-radius: 0.5em;
        background-color: var(--color-neutral-10);
        border: 1px solid var(--color-neutral-8);
        color: var(--color-color-1);
        font-size: var(--font-size--1);
      }

      &.soon>.glyph {
        color: var(--color-neutral-4);
      }

      >.info>.t {
        font-weight: 500;
      }

      >.info>.d {
        color: var(--color-neutral-3);
        font-size: var(--font-size--1);
        margin-block-start: 2px;
      }

      >.tag {
        padding: var(--space-3xs) var(--space-2xs);
        border-radius: 99em;
        border: 1px solid var(--color-neutral-8);
        color: var(--color-neutral-3);
        font-size: var(--font-size--2);
        text-transform: uppercase;
        letter-spacing: 0.08em;

        &.live {
          border-color: var(--color-color-1);
          color: var(--color-color-1);
        }
      }
    }
  }
}


/* ── Terminal ───────────────────────────────────── */
.terminal {
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  overflow: hidden;

  >header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    border-block-end: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-4);
    font-size: var(--font-size--1);

    >.dots {
      display: flex;
      gap: 4px;
    }

    >.dots>i {
      display: block;
      width: 0.55em;
      height: 0.55em;
      border-radius: 50%;
      background-color: var(--color-neutral-7);
    }
  }

  >.body {
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-neutral-2);
    font-size: var(--font-size--1);
    line-height: 1.6;

    .p {
      color: var(--color-neutral-4);
    }

    .g {
      color: var(--color-color-1);
    }

    .y {
      color: var(--color-color-3);
    }

    .c {
      color: var(--color-neutral-1);
    }

    .m {
      display: inline-block;
      padding: 0 var(--space-3xs);
      border-radius: 0.25em;
      background-color: var(--color-color-1);
      color: var(--color-neutral-10);
      margin-inline-end: var(--space-3xs);
    }

    .cursor {
      display: inline-block;
      width: 0.45em;
      height: 1em;
      background-color: var(--color-color-1);
      margin-inline-start: var(--space-3xs);
      vertical-align: -0.1em;
      animation: blink 1.1s steps(1, end) infinite;
    }
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}


/* ── Deploy cards ───────────────────────────────── */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-s);

  >.card {
    padding: var(--space-m);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-9);

    >.k {
      color: var(--color-neutral-4);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >h4 {
      margin-block: var(--space-2xs);
    }

    >p {
      color: var(--color-neutral-3);
    }
  }
}


/* ── Problems list ──────────────────────────────── */
.problems {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-neutral-8);
  max-width: 60rem;

  >.p {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-neutral-8);
    align-items: baseline;

    >.n {
      color: var(--color-color-1);
      font-size: var(--font-size--1);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >.t {
      font-size: var(--font-size-1);
      color: var(--color-neutral-2);
      max-width: 52ch;
    }
  }
}


/* ── Final CTA ──────────────────────────────────── */
.final {
  padding-block: var(--space-3xl);
  background-color: var(--color-neutral-1);
  text-align: center;
  margin-block-start: var(--space-2xl);

  >.inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    align-items: center;

    >h2 {
      color: var(--color-neutral-10);
      letter-spacing: -0.03em;
      max-width: 22ch;

      .it {
        font-family: var(--font-family-2);
        font-style: italic;
        color: var(--color-neutral-6);
      }

      .acc {
        color: var(--color-color-1);
      }
    }

    >p {
      color: var(--color-neutral-6);
      max-width: 52ch;
    }

    >.cta-row {
      display: flex;
      gap: var(--space-2xs);
      flex-wrap: wrap;
      justify-content: center;
    }
  }
}


/* ── Footer ─────────────────────────────────────── */
.site-footer {
  padding-block: var(--space-l);
  border-block-start: 1px solid var(--color-neutral-8);
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);

  >.inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-s);

    >.links {
      display: flex;
      gap: var(--space-m);
    }
  }
}


/* ── Tweaks panel ───────────────────────────────── */
.tweaks {
  position: fixed;
  inset-block-end: var(--space-s);
  inset-inline-end: var(--space-s);
  width: 18rem;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  box-shadow: 0 20px 40px -12px color-mix(in oklch, var(--shadow-color) 40%, transparent);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: var(--space-xs);

  &.on {
    display: flex;
  }

  >header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;

    >button {
      padding: 0 var(--space-3xs);
      border-radius: 0.25em;
      color: var(--color-neutral-4);
      background-color: transparent;
      border: 0;
      cursor: pointer;
      font-size: var(--font-size-1);

      &:hover {
        color: var(--color-neutral-1);
      }
    }
  }

  >.row-hue {
    display: flex;
    justify-content: space-between;
    align-items: center;

    >.val {
      color: var(--color-neutral-3);
      font-size: var(--font-size--1);
    }
  }

  >.seg {
    display: flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    border: 1px solid var(--color-neutral-8);
    border-radius: 0.5em;
    background-color: var(--color-neutral-10);

    >button {
      flex: 1;
      padding: var(--space-3xs) var(--space-2xs);
      border: 0;
      border-radius: 0.35em;
      background-color: transparent;
      color: var(--color-neutral-3);
      cursor: pointer;
      font-size: var(--font-size--1);

      &.on {
        background-color: var(--color-color-1);
        color: var(--color-neutral-10);
      }
    }
  }
}


/* ── MCP section: chat mock ─────────────────────── */
.mcp-section>.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: var(--space-l);
  align-items: start;

  >.copy>.pitch {
    font-size: var(--font-size-2);
    font-family: var(--font-family-2);
    font-style: italic;
    line-height: 1.25;
    color: var(--color-neutral-1);
    margin-block-end: var(--space-s);

    >em {
      color: var(--color-color-9);
      font-style: italic;
    }
  }

  >.copy>.sub {
    color: var(--color-neutral-3);
    margin-block-end: var(--space-m);
    max-width: 38rem;
  }

  >.copy>.bullets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-xs);

    >.bullet {
      padding: var(--space-xs);
      border: 1px solid var(--color-neutral-8);
      border-radius: calc(var(--border-radius) * 0.5);

      >.k {
        font-family: var(--font-family-2);
        font-style: italic;
        color: var(--color-color-9);
        font-size: var(--font-size-1);
        margin-block-end: var(--space-3xs);
      }

      >.v {
        color: var(--color-neutral-3);
        font-size: var(--font-size--1);
        line-height: 1.4;
      }
    }
  }
}

.chat-mock {
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-10);
  overflow: hidden;
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);

  >header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-s);
    background-color: var(--color-neutral-9);
    border-bottom: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-3);

    >.dots {
      display: inline-flex;
      gap: 0.3em;

      >i {
        width: 0.6em;
        height: 0.6em;
        border-radius: 50%;
        background-color: var(--color-neutral-7);
      }
    }

    >.live {
      margin-inline-start: auto;
      color: var(--color-color-9);
    }
  }

  >.body {
    padding: var(--space-s);
    display: grid;
    gap: var(--space-s);

    >.msg {
      display: grid;
      gap: var(--space-3xs);

      >.who {
        font-family: var(--font-family-2);
        font-style: italic;
        color: var(--color-neutral-4);
        font-size: var(--font-size--1);
      }

      >p {
        color: var(--color-neutral-1);
        margin: 0;
        line-height: 1.45;

        >.path {
          color: var(--color-color-9);
        }
      }

      >.tool {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-2xs);
        align-items: baseline;
        padding: var(--space-3xs) var(--space-2xs);
        border-inline-start: 2px solid var(--color-color-9);
        background-color: var(--color-neutral-9);
        border-radius: 0 calc(var(--border-radius) * 0.3) calc(var(--border-radius) * 0.3) 0;
        font-size: var(--font-size--1);

        >.k {
          color: var(--color-color-9);
        }

        >.v {
          color: var(--color-neutral-3);
          font-size: var(--font-size--2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        >.ok {
          color: var(--color-neutral-2);
          font-size: var(--font-size--2);
        }
      }

      &.user {
        padding: var(--space-xs);
        border: 1px solid var(--color-neutral-8);
        border-radius: calc(var(--border-radius) * 0.5);
        background-color: var(--color-neutral-9);
      }
    }
  }
}


/* ── Pricing section ────────────────────────────── */
.pricing-section>.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-m);
}

.pricing-section .plan {
  position: relative;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  display: grid;
  gap: var(--space-2xs);
  background-color: var(--color-neutral-10);

  &.feat {
    border-color: var(--color-color-9);
    background-color: var(--color-neutral-9);
  }

  >.badge {
    position: absolute;
    inset-block-start: calc(var(--space-2xs) * -1);
    inset-inline-start: var(--space-m);
    padding: 0 var(--space-2xs);
    background-color: var(--color-color-9);
    color: var(--color-neutral-10);
    font-size: var(--font-size--2);
    border-radius: calc(var(--border-radius) * 0.3);
  }

  >.tier {
    font-family: var(--font-family-2);
    font-style: italic;
    font-size: var(--font-size-3);
    color: var(--color-neutral-1);
  }

  >.amount {
    font-family: var(--font-family-2);
    font-size: var(--font-size-5);
    line-height: 1;
    color: var(--color-neutral-1);

    >.per {
      font-family: var(--font-family-1);
      font-size: var(--font-size-0);
      color: var(--color-neutral-4);
      font-style: normal;
    }
  }

  >.desc {
    color: var(--color-neutral-3);
    margin: 0;
  }

  >ul {
    list-style: none;
    padding: 0;
    margin: var(--space-2xs) 0 var(--space-s);
    display: grid;
    gap: var(--space-3xs);
    border-block-start: 1px solid var(--color-neutral-8);
    padding-block-start: var(--space-s);

    >li {
      font-size: var(--font-size--1);
      color: var(--color-neutral-2);
      padding-inline-start: 1em;
      position: relative;

      &::before {
        position: absolute;
        inset-inline-start: 0;
        color: var(--color-color-9);
      }

      >code {
        color: var(--color-color-9);
      }
    }
  }
}