/* Buttons, quote, cards, form, FAQ - Everlane violet brand */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s var(--snap),
    color 0.2s var(--snap),
    border-color 0.2s var(--snap),
    transform 0.2s var(--snap),
    box-shadow 0.2s var(--snap);
}

.btn:hover {
  color: inherit;
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.28);
}

.btn--primary:hover {
  background: var(--violet-hi);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--bone);
}

.btn--ghost:hover {
  border-color: var(--violet);
  color: var(--violet-hi);
}

.band--paper .btn--ghost {
  border-color: rgba(21, 14, 36, 0.18);
  color: var(--paper-ink);
}

.band--paper .btn--ghost:hover {
  border-color: var(--violet-deep);
  color: var(--violet-deep);
}

.quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.quote__text {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 30ch;
}

.quote__who {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: var(--mute);
}

.quote__who b {
  color: var(--bone);
  font-weight: 600;
}

.band--paper .quote__who {
  color: var(--paper-mute);
}

.band--paper .quote__who b {
  color: var(--paper-ink);
}

.offer {
  display: grid;
  gap: 18px;
  margin-top: 48px;
}

@media (min-width: 820px) {
  .offer {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.offer__card {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(167, 139, 250, 0.06), transparent 60%);
  transition:
    border-color 0.25s var(--snap),
    transform 0.25s var(--snap),
    background 0.25s var(--snap);
}

.offer__card:hover {
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-3px);
  background: linear-gradient(165deg, rgba(139, 92, 246, 0.12), transparent 65%);
}

.offer__n {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--violet-hi);
  line-height: 1;
}

.offer__card h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}

.offer__card p {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
}

.feat {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

@media (min-width: 860px) {
  .feat {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

.feat__card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--void-3);
  transition:
    border-color 0.25s var(--snap),
    transform 0.25s var(--snap);
}

.feat__card:hover {
  color: inherit;
  border-color: rgba(167, 139, 250, 0.5);
  transform: translateY(-4px);
}

.feat__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--void-4);
}

.feat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--soft-out);
}

.feat__card:hover .feat__media img {
  transform: scale(1.04);
}

.feat__meta {
  padding: 18px 18px 20px;
}

.feat__meta span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-hi);
  margin-bottom: 6px;
}

.feat__meta strong {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
}

.feat__meta p {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--mute);
}

.steps {
  display: grid;
  gap: 28px;
  margin-top: 48px;
  counter-reset: step;
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .start-grid .steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.step {
  position: relative;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
}

.step h3 {
  margin: 18px 0 10px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
}

.step p {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--violet-hi);
}

.faq {
  margin-top: 48px;
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(239, 234, 247, 0.02);
  padding: 4px 18px;
}

/* Two columns on desktop: the heading and a way to ask sit beside the questions instead of
   leaving half the band empty. */
.faq-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 940px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 64px;
    align-items: start;
  }

  .faq-grid__head {
    position: sticky;
    top: 104px;
  }

  .faq-grid .faq {
    margin-top: 0;
  }
}

.faq-grid__lede {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: 0.98rem;
}

.faq-grid__head .panel__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--violet-deep);
  text-decoration: none;
  font-weight: 600;
}

/* An open/close affordance: without one the rows read as dead cards. */
.faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 6px;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--soft-out);
}

.faq__mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq details[open] .faq__mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  font-size: 1.02rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq details[open] summary {
  color: var(--violet-hi);
}

.faq details p {
  margin: 0 0 16px;
  color: var(--mute);
  font-size: 0.98rem;
}

.band--paper .faq details {
  border-color: rgba(21, 14, 36, 0.12);
  background: rgba(255, 255, 255, 0.55);
}

.band--paper .faq summary {
  color: var(--paper-ink);
}

.band--paper .faq details[open] summary {
  color: var(--violet-deep);
}

.band--paper .faq details p {
  color: var(--paper-mute);
}

.form {
  display: grid;
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(27, 19, 48, 0.55);
  backdrop-filter: blur(14px);
}

.form label {
  display: grid;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--mute);
}

.form label > span .req {
  color: var(--violet-hi);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: rgba(10, 7, 17, 0.62);
  color: var(--bone);
  font: inherit;
  transition:
    border-color 0.2s var(--snap),
    background 0.2s var(--snap),
    box-shadow 0.2s var(--snap);
}

.form textarea {
  min-height: 120px;
  resize: vertical;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(10, 7, 17, 0.78);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
  outline: none;
}

.form__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mute-2);
}

.form [data-lead-confirm] {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.12);
  color: var(--bone);
}

.form .btn {
  width: 100%;
  margin-top: 4px;
}

.mute {
  color: var(--mute);
}

.page-hero {
  padding: clamp(120px, 18vw, 160px) 0 clamp(48px, 8vw, 72px);
}

.page-hero .lede {
  margin-top: 18px;
}

/* One-field start in the hero. The real form is five fields at the foot of the page; asking
   for the URL alone is the small commitment that pulls the larger one, and it carries into
   the full form so nothing is typed twice. Submitting without JS just jumps to the form. */
.start-line {
  width: 100%;
  max-width: 30rem;
  margin-top: 30px;
}

.start-line__label {
  display: block;
  margin-bottom: 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-hi);
}

.start-line__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.start-line__input {
  flex: 1 1 13rem;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: rgba(239, 234, 247, 0.05);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  transition:
    border-color 0.2s var(--snap),
    background 0.2s var(--snap);
}

.start-line__input::placeholder {
  color: var(--mute-2);
}

.start-line__input:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(239, 234, 247, 0.08);
}

/* On a phone the row wraps, so the button matches the input's width rather than sitting
   short beside it and reading as two mismatched blocks. */
.start-line__go {
  flex: 1 1 100%;
}

@media (min-width: 520px) {
  .start-line__go {
    flex: 0 0 auto;
  }
}

.start-line__note {
  margin: 14px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mute-2);
}

.start-line__note a {
  color: var(--violet-hi);
}

/* Closing prompt under the work rail: belief peaks at the proof, and the page used to ask
   for nothing there. */
.pick__after {
  margin: 32px 0 0;
  font-size: 1rem;
  color: var(--paper-mute);
}

.pick__after a {
  color: var(--violet-deep);
  font-weight: 600;
}

/* Thumb-zone CTA on phones only. Appears once the hero is behind you, so the first screen
   keeps its own call to action rather than carrying two. */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 42;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(10, 7, 17, 0.94);
  backdrop-filter: blur(16px);
  transform: translateY(110%);
  transition: transform 0.32s var(--soft-out);
}

.cta-bar[hidden] {
  display: none;
}

.cta-bar.is-on {
  transform: none;
}

.cta-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cta-bar__line {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--mute);
}

.cta-bar__go {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 0.9rem;
}

/* The back-to-top control shares the same corner, so it steps up out of the bar's way. */
.cta-bar.is-on ~ .to-top,
body:has(.cta-bar.is-on) .to-top {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  .cta-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-bar {
    transition: none;
  }
}