.seller-hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--section-y-sm));
  display: grid;
  align-items: center;
  padding-block: var(--section-y-sm);
  background-image: url("/static/images/home/hero.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-blend-mode: lighten;
}

.seller-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 72rem;
}

.seller-hero__content {
  max-width: 58rem;
}

.seller-hero__eyebrow {
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}

.seller-hero__title {
  margin: 0;
  max-width: 12ch;
  text-wrap: balance;
}

.seller-hero__copy {
  max-width: 32rem;
  margin-top: var(--space-md);
  color: var(--color-hero-copy);
  text-shadow: var(--shadow-text-soft);
}

.seller-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.seller-hero__panel {
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 247, 0.72);
  backdrop-filter: var(--blur-panel);
  -webkit-backdrop-filter: var(--blur-panel);
}

.seller-hero__panel-top,
.seller-hero__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
}

.seller-hero__panel-top {
  border-bottom: var(--border-hairline);
}

.seller-hero__metric + .seller-hero__metric {
  border-top: var(--border-hairline);
}

.seller-hero__panel span,
.seller-hero__metric span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seller-hero__panel strong,
.seller-hero__metric strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.seller-flow {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(17,16,14,0.025),
      transparent 42rem
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(17,16,14,0.015)
    );
}

.seller-flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--grid-gap-md);
  margin-top: var(--space-3xl);
}

.seller-flow__step {
  position: relative;
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.seller-flow__step::before {
  content: "";
  position: absolute;

  top: var(--flow-node-half);

  left: calc(var(--flow-node-size) + var(--flow-line-gap));
  right: calc((var(--grid-gap-md) * -1) + (var(--flow-line-gap) * 0.5));

  border-top: var(--flow-line);

  transform: translateY(-50%);
}

.seller-flow__step:last-child::before {
  display: none;
}

.seller-flow__node {
  position: relative;
  z-index: 1;
  width: var(--flow-node-size);
  height: var(--flow-node-size);
  display: grid;
  place-items: center;
  border: var(--flow-node-border);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.seller-flow__node::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-2xs) * -1);
  border: var(--flow-node-ring);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.seller-flow__step:hover .seller-flow__node::after {
  opacity: 1;
}

.seller-flow__node span {
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
}

.seller-flow__node img {
  width: var(--flow-icon-size);
  height: var(--flow-icon-size);
  object-fit: contain;
}

.seller-flow__content {
  max-width: 13rem;
}

.seller-flow__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.seller-flow__body {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seller-products {
  background: var(--color-surface);
}

.seller-products__grid {
  margin-top: var(--space-2xl);
}

.seller-products__card {
  min-height: clamp(13rem, 11.143rem + 7.62vw, 18rem);
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}

.seller-products__index {
  color: var(--color-muted-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.seller-products__title {
  margin: auto 0 var(--space-sm);
}

.seller-products__body {
  color: var(--color-muted);
}

.seller-benefits {
  padding-block: var(--section-y-lg);
}

.seller-benefits .section-kicker,
.seller-benefits .section-copy {
  color: var(--color-inverse-muted);
}

.seller-benefits__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.seller-benefits__list {
  display: grid;
  border-top: var(--border-inverse);
}

.seller-benefits__item {
  display: grid;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: var(--border-inverse);
}

.seller-benefits__title {
  margin: 0;
  color: var(--color-inverse);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.seller-benefits__body {
  color: var(--color-inverse-muted);
  font-size: var(--text-sm);
}

.seller-tools__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.seller-tools__panel {
  border-top: var(--border-hairline);
}

.seller-tools__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline);
}

.seller-tools__row span {
  color: var(--color-muted);
}

.seller-tools__row strong {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.seller-faq {
  background: var(--color-surface);
}

.seller-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.seller-faq__list {
  display: grid;
  gap: var(--space-xs);
}

.seller-faq__item {
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.48);
}

.seller-faq__item summary {
  cursor: pointer;
  padding: var(--space-md);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.seller-faq__item p {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seller-cta {
  color: var(--color-inverse);
  background: var(--color-carbon);
  text-align: center;
}

.seller-cta__inner {
  max-width: 58rem;
}

.seller-cta p {
  margin-inline: auto;
  color: var(--color-inverse-muted);
}

.seller-cta h2 {
  margin: var(--space-md) auto 0;
}

.seller-cta .text-body-lg {
  max-width: 42rem;
  margin-top: var(--space-lg);
}

.seller-cta .btn {
  margin-top: var(--space-xl);
}

@media (max-width: 900px) {
  .seller-hero {
    min-height: 100svh;

    padding-top: calc(var(--header-h) + var(--space-4xl));
    padding-bottom: var(--space-3xl);

    background-position: center center;
    background-size: cover;
  }

  .seller-hero__inner,
  .seller-benefits__inner,
  .seller-tools__inner,
  .seller-faq__inner{
    grid-template-columns: 1fr;
  }

  .seller-hero__inner {
    align-items: end;
  }

  .seller-hero__content,
  .seller-hero__panel {
    max-width: 100%;
  }

  .seller-hero__title {
    max-width: 11ch;
  }

  .seller-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .seller-benefits__item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .seller-flow__track {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .seller-flow__track::before {
    top: var(--flow-node-half);
    bottom: var(--flow-node-half);
    left: var(--flow-node-half);
    right: auto;
    height: auto;
    border-top: 0;
    border-left: var(--flow-line);
    transform: none;
  }

  .seller-flow__step {
    grid-template-columns: var(--flow-node-size) minmax(0, 1fr);
    align-items: start;
  }

  .seller-flow__content {
    max-width: 100%;
  }
}