/* ==========================================================================
   Enforso — /pillbox landing.

   Everything structural comes from enforso.css; this file only carries the
   hero, its illustration and the closing call to action.
   ========================================================================== */

.pb-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 24px;
}

/* Two lines in the hero column — the display ramp alone overflows to three. */
.pb-hero__title { font-size: clamp(36px, 4.6vw, 58px); margin: 0 0 22px; }
.pb-hero__title em { font-style: normal; color: var(--enf-accent); }
.pb-hero__lead { margin: 0 0 30px; max-width: 32em; }
.pb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.pb-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pb-hero__art {
  position: relative;
  background:
    radial-gradient(90% 80% at 50% 10%, rgba(52,211,153,0.14), transparent 70%),
    var(--enf-surface);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r24);
  padding: 18px;
}
.pb-art { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.pb-cta { padding-bottom: 100px; }
.pb-cta__box {
  position: relative;
  overflow: hidden;
  border-radius: var(--enf-r24);
  background: var(--enf-surface);
  border: 1px solid var(--enf-stroke);
  padding: 56px;
}
.pb-cta__glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -200px;
  top: -280px;
  background: radial-gradient(closest-side, rgba(52,211,153,0.18), transparent 72%);
  pointer-events: none;
}
.pb-cta__title {
  position: relative;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: var(--enf-w-bold);
  margin: 0 0 14px;
  max-width: 18em;
}
.pb-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }

@media (max-width: 980px) {
  .pb-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .pb-cta__box { padding: 32px 24px; }
}

@media (max-width: 560px) {
  .pb-hero__actions, .pb-cta__actions { display: grid; grid-template-columns: 1fr; }
  .pb-hero__actions .enf-btn, .pb-cta__actions .enf-btn { width: 100%; }
}