/* Eturnal Rest -- sell.html only. Small layout helpers on top of base.css. */

/* ---- hero ---- */
.sell-hero {
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0) 0%, var(--cream) 100%),
    var(--cream);
}
.sell-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-hero__note {
  margin-top: var(--space-4);
  font-size: 0.95rem;
}

/* reassurance card */
.sell-promise {
  background: var(--white);
}
.sell-promise__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}
.sell-promise__list,
.sell-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sell-promise__list li,
.sell-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sell-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ---- section heads ---- */
.sell-section-head {
  max-width: 64ch;
  margin: 0 auto;
}

/* ---- why list (feature cards) ---- */
.sell-feat__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}

/* ---- steps ---- */
.sell-steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.sell-step {
  position: relative;
  padding-top: var(--space-2);
}
.sell-step__num {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ---- plan / price ---- */
.sell-plan {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-plan__card {
  background: var(--white);
}
.sell-plan__price {
  margin: var(--space-2) 0 var(--space-4);
  line-height: 1;
}
.sell-plan__price .serif {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 600;
  color: var(--green-800);
}
.sell-plan__per {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-3);
  font-size: 0.95rem;
}
.sell-plan__list {
  text-align: left;
  margin: var(--space-5) 0;
}

/* ---- what a listing needs ---- */
.sell-needs {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-needs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sell-needs__list .chip {
  font-size: 0.92rem;
}

/* ---- native form + checkout ---- */
.sell-form-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.sell-form {
  margin-top: var(--space-6);
}
/* required-field asterisk */
.sell-form .req {
  color: var(--accent-700);
  font-weight: 700;
}
/* honeypot: visually + acoustically hidden, still focusable to bots only */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* $49.99/yr context near the submit button */
.sell-checkout-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-4);
  padding: 14px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.sell-checkout-note__price {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--blue-700);
  font-size: 1.15rem;
}

/* ---- faq teaser ---- */
.sell-faq {
  background: var(--cream);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sell-hero__grid,
  .sell-plan,
  .sell-needs {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .sell-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}