/* ============================================================
   Protevo AI — Announcement / "Em breve" page
   Layers on vantis-landing.css (which layers on the DS tokens).
   One coherent editorial document: a chaptered spine on ink,
   one cream break, a bold honeycomb climax. High contrast.
   ============================================================ */

/* ---- Chapter spine — the unifying device --------------------
   Every section opens with the same marker so the whole page
   reads as one chaptered document, not stitched modules. */
.chap {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.chap__idx {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.14em; color: var(--orange);
  flex-shrink: 0;
}
.chap__label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim-2); flex-shrink: 0;
}
.chap__rule { flex: 1; height: 1px; background: var(--rule-dark-2); }
.section--cream .chap__label { color: rgba(19,19,19,0.5); }
.section--cream .chap__rule { background: var(--rule-light); }

/* Status chip in the nav */
.status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border: 1.5px solid var(--rule-dark);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--fg-dim);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ============================================================
   HERO — the announcement
   ============================================================ */
.lhero { padding-top: clamp(40px, 5.5vw, 76px); padding-bottom: clamp(56px, 7vw, 104px); overflow: hidden; }
.lhero__grid {
  display: grid; grid-template-columns: 1.32fr 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.lhero__title { font-size: clamp(46px, 7.6vw, 120px); }
.lhero__title .em { color: var(--cream); border-bottom-color: var(--orange); }
.lhero__lede { margin-top: clamp(26px, 3vw, 36px); }
.lhero__cta { display: flex; gap: 13px; margin-top: clamp(30px, 3.4vw, 44px); flex-wrap: wrap; }

/* the cover image — sharp, bold, NOT muddied */
.lhero__cover {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--rule-dark);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,0.75);
}
.lhero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lhero__cover .tag {
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--cream); text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.lhero__cover .tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

/* qualities ticker under the headline */
.ticker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: clamp(30px, 3.4vw, 42px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--rule-dark-2);
}
.ticker span {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--fg-dim); display: inline-flex; align-items: center; gap: 9px;
}
.ticker span::before { content: '▰'; color: var(--orange); font-size: 8px; }

.lhero__shot { margin-top: clamp(48px, 6vw, 86px); }
.lhero__caption {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--fg-dim-2); margin: 16px 0 0;
}

@media (max-width: 960px) {
  .lhero__grid { grid-template-columns: 1fr; gap: 40px; }
  .lhero__cover { max-width: 380px; aspect-ratio: 5 / 4; }
}

/* ============================================================
   §01 — WHY (the promotion: the tool's qualities)  · cream
   ============================================================ */
.why__head { max-width: 800px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.why__head .h2 { color: var(--ink); }
.why__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--rule-light);
  border: 1px solid var(--rule-light); border-radius: 8px; overflow: hidden;
}
.why__cell {
  background: var(--cream); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column;
}
.why__idx { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--orange); }
.why__name {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.02;
  color: var(--ink); margin: clamp(20px, 2.4vw, 30px) 0 0;
}
.why__desc {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
  color: rgba(19,19,19,0.66); margin: 14px 0 0; max-width: 42ch;
}
@media (max-width: 720px) { .why__grid { grid-template-columns: 1fr; } }

/* ============================================================
   §02 — HOW (product preview) reuses .step from landing.
   §03 — coverage band
   ============================================================ */
/* ============================================================
   §03 — RITMO: the contrast hook (weeks vs. continuous)
   Pure-hype editorial spread on ink. Two cells, one slash.
   ============================================================ */
.rhythm-head { max-width: 760px; margin-bottom: clamp(34px, 4vw, 52px); }

.rhythm {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule-dark-2);
  border: 1px solid var(--rule-dark-2); border-radius: 8px; overflow: hidden;
}
.rhythm__cell {
  background: var(--ink); padding: clamp(34px, 4.4vw, 62px);
  display: flex; flex-direction: column;
  border-top: 2px solid transparent;
}
.rhythm__cell--new { border-top-color: var(--orange); }
.rhythm__tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.rhythm__cell--old .rhythm__tag { color: var(--fg-dim-2); }
.rhythm__cell--new .rhythm__tag { color: var(--orange); }
.rhythm__big {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(52px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.03em;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
}
.rhythm__cell--old .rhythm__big {
  color: var(--fg-dim-2);
  text-decoration: line-through; text-decoration-thickness: 5px; text-decoration-color: var(--orange);
}
.rhythm__cell--new .rhythm__big { color: var(--cream); }
.rhythm__say {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
  margin: clamp(18px, 2vw, 26px) 0 0; max-width: 32ch;
}
.rhythm__cell--old .rhythm__say { color: var(--fg-dim-2); }
.rhythm__cell--new .rhythm__say { color: var(--fg-dim); }

.rhythm__kicker {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(26px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--cream); margin: clamp(34px, 4vw, 56px) 0 0; max-width: 22ch; text-wrap: balance;
}

@media (max-width: 720px) { .rhythm { grid-template-columns: 1fr; } .rhythm__cell--old { border-top-color: var(--rule-dark-2); } }

/* ============================================================
   §04 — SIGNUP climax · full-bleed honeycomb, bold + legible
   ============================================================ */
.signup { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 11vw, 172px); }
.signup__bg { position: absolute; inset: 0; z-index: -2; }
.signup__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.signup__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(19,19,19,0.95) 0%, rgba(19,19,19,0.9) 55%, rgba(19,19,19,0.5) 100%);
}
.signup__inner { max-width: 660px; }
.signup .chap__label { color: rgba(240,242,241,0.7); }
.signup .chap__rule { background: rgba(240,242,241,0.16); }
.signup__title {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.025em; line-height: 0.96;
  color: var(--cream); margin: clamp(24px, 3vw, 36px) 0 0; text-wrap: balance;
}
.signup__title .em { color: var(--cream); border-bottom-color: var(--orange); }
.signup__lede {
  font-family: var(--font-mono); font-size: clamp(14px, 1.4vw, 16px); line-height: 1.62;
  color: var(--fg-dim); max-width: 52ch; margin: clamp(22px, 2.4vw, 30px) 0 0;
}

/* perks row */
.perks { list-style: none; padding: 0; margin: clamp(26px, 3vw, 36px) 0 0; display: flex; flex-direction: column; gap: 12px; }
.perks li {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-mono); font-size: 13.5px; color: var(--cream); line-height: 1.5;
}
.perks li::before { content: '→'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* form */
.wl { margin-top: clamp(32px, 3.6vw, 44px); max-width: 540px; }
.wl__row { display: flex; gap: 12px; flex-wrap: wrap; }
.wl__field {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 56px;
  border: 1.5px solid var(--rule-dark); border-radius: 8px;
  background: rgba(14,14,14,0.7);
  transition: border-color 160ms var(--ease);
}
.wl__field:focus-within { border-color: var(--orange); }
.wl__field .pre { font-family: var(--font-mono); font-size: 13px; color: var(--orange); flex-shrink: 0; }
.wl__field input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0;
  font-family: var(--font-mono); font-size: 14.5px; color: var(--cream); letter-spacing: 0.01em;
}
.wl__field input::placeholder { color: var(--fg-dim-2); }
.wl .btn { height: 56px; }
.wl__note {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--fg-dim-2); margin: 16px 0 0; line-height: 1.55;
}
.wl__note a { color: var(--cream); border-bottom: 1px solid var(--orange); }
/* success */
.wl__done {
  display: none; align-items: center; gap: 14px;
  padding: 20px 22px; border: 1.5px solid var(--lime); border-radius: 8px;
  background: rgba(185,204,48,0.08); max-width: 540px;
}
.wl__done .ok {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--lime); color: var(--lime);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px;
}
.wl__done p { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--cream); line-height: 1.55; }
.is-done .wl__form { display: none; }
.is-done .wl__note { display: none; }
.is-done .wl__done { display: flex; }

/* ============================================================
   MOBILE — keep the nav and hero legible on narrow phones.
   Below 600px the nav has no room for both the status chip and
   the waitlist button, so the chip (decorative) gives way.
   ============================================================ */
@media (max-width: 600px) {
  .nav__row { gap: 14px; height: 62px; }
  .nav__cta .status { display: none; }
  .btn--sm { padding: 10px 14px; }
}

/* ============================================================
   entrance
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(20px); animation: rise 760ms var(--ease) forwards; }
  .rise-1 { animation-delay: 0.04s; }
  .rise-2 { animation-delay: 0.12s; }
  .rise-3 { animation-delay: 0.22s; }
  .rise-4 { animation-delay: 0.32s; }
  .rise-5 { animation-delay: 0.42s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}