/* seli — /gratis, the launch promotion landing (DROP.md §6). Builds on home.css (hero, steps, FAQ, sticky CTA). Mobile-first. */

/* ---------- hero ---------- */
.gr-hero { padding-bottom: 52px; }
.gr-title { font-size: clamp(2.35rem, 10.6vw, 5.6rem); max-width: 13ch; }

.drop-badge {
  display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px 0 11px; margin-bottom: 18px; border-radius: 999px;
  border: 1px solid #3A3935; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink);
}
.drop-badge .rec-dot { width: 8px; height: 8px; }

/* the real counter: "Mai sunt 12 din 15 locuri" + a slim bar of the taken share */
.dropmeter { margin-top: 22px; max-width: 420px; }
.dropmeter__t { display: flex; align-items: baseline; gap: 8px; font-size: .9375rem; color: var(--on-ink-muted); }
.dropmeter__t b { font-family: var(--font-head); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--on-ink); }
.dropmeter__bar { margin-top: 10px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.dropmeter__bar i { display: block; height: 100%; background: var(--rec); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease); }
[data-drop="open"] .gr-hero .hero__cta { margin-top: 20px; }

.gr-soon { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; }
.gr-soon .rec-dot { width: 10px; height: 10px; }

.hero__direct { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; min-height: 44px; margin-top: 8px; font-size: .9375rem; color: var(--on-ink-muted); text-decoration: none; }
.hero__direct u { color: var(--on-ink); text-decoration-color: #5A5852; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero__direct:hover u { text-decoration-color: currentColor; }
.hero__wl { width: 100%; max-width: 440px; }
.hero__wl:empty { display: none; }
.hero__wl--ended { margin-top: 22px; }

/* the promotion ad: big, in the phone frame */
.gr-phone .phone { --pw: min(80vw, 320px); }
.gr-media .hero__rec { width: min(80vw, 320px); }

/* ---------- how it works: three short lines ---------- */
.gr-steps .step { row-gap: 0; }
.gr-steps .step__n { grid-row: auto; }
.step__h-2 { display: block; color: var(--muted); }
.gr-steps__cta { margin-top: 32px; }

.gr-faq { padding-bottom: 72px; }

@media (min-width: 900px) {
  .gr-hero { padding-bottom: 88px; }
  .gr-title { font-size: clamp(3.4rem, 5vw, 4.75rem); max-width: 15ch; }
  .gr-phone .phone { --pw: min(27vw, 360px); }
  .gr-media .hero__rec { width: min(27vw, 360px); }
  .dropmeter { margin-top: 30px; }
  .dropmeter__t b { font-size: 1.625rem; }
  [data-drop="open"] .gr-hero .hero__cta { margin-top: 26px; }
  .gr-soon { font-size: 1.625rem; margin-top: 26px; }
  .gr-steps__cta { margin-top: 48px; }
  .gr-faq { padding-bottom: 112px; }
}