/* =============================================================================
   NCFE CACHE Level 5 — page styles (EN + RU), round 2. Loaded after style.css via $page['css'].
   Light hero like the home page; one dark teal panel ("How It Works") for a senior feel.
   ============================================================================= */

/* ---------- Hero ---------- */
.l5-hero .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.l5-hero__title { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.12; text-wrap: balance; margin-bottom: 1.5rem; }
.lang-ru .l5-hero__title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.l5-hero__sub {
  display: block; margin-top: .6rem; font-family: var(--font-body); font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.05rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bb-teal); line-height: 1.3;
}
.l5-hero .hero__lead { margin-bottom: 1rem; }
.l5-hero__text { color: var(--bb-ink-2); font-size: 1.05rem; }
.l5-hero .hero__actions { margin-top: 2rem; margin-bottom: 0; align-items: center; }
.l5-hero__photo { aspect-ratio: 3 / 2; }
.hero--page .l5-hero__photo { aspect-ratio: 3 / 2; }
.l5-hero__photo img { object-position: 50% 45%; }

/* ---------- What You'll Master ---------- */
.l5-master__grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.l5-master__item {
  background: var(--bb-cream); border: 1px solid var(--bb-sand); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0;
}
.l5-master__num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1; color: var(--bb-teal); }
.l5-master__title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--bb-teal-deep); margin: 0; text-wrap: pretty; }
.l5-master__text { margin: 0; color: var(--bb-ink-2); font-size: .95rem; line-height: 1.5; }
.l5-master__item:last-child { background: var(--bb-teal-soft); border-color: transparent; }
@media (max-width: 1199.98px) { .l5-master__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .l5-master__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .l5-master__item { flex-direction: row; align-items: baseline; gap: 1rem; padding: 1.1rem 1.2rem; flex-wrap: wrap; }
  .l5-master__num { flex: 0 0 2rem; font-size: 1.3rem; }
  .l5-master__title { flex: 1 1 0; }
  .l5-master__text { flex: 0 0 100%; padding-left: 3rem; }
}

/* ---------- How It Works (dark teal panel) ---------- */
.l5-how__panel {
  background: linear-gradient(155deg, var(--bb-teal-deep) 0%, #0c3d3b 100%); color: #fff; border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden;
}
.l5-how__panel::after {
  content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(169,211,160,.16), rgba(169,211,160,0) 70%); pointer-events: none;
}
.l5-how__panel > .row { position: relative; z-index: 1; }
.l5-how__title { color: #fff; margin-bottom: 2rem; }
.l5-how__stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.l5-how__stat {
  flex: 1 1 140px; max-width: 200px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1.1rem;
}
.l5-how__value { display: block; font-weight: 800; font-size: clamp(2.5rem, 4.5vw, 3.5rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.l5-how__label { display: block; margin-top: .45rem; font-size: .95rem; font-weight: 600; color: var(--bb-green); }
.l5-how__lead { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.l5-how__list { margin-bottom: 2rem; }
.l5-how__list li { font-size: 1.05rem; }
.l5-how__notes { border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.5rem; display: grid; gap: 1rem; }
.l5-how__notes p { display: flex; gap: .8rem; align-items: flex-start; margin: 0; color: rgba(255,255,255,.86); }
.l5-how__notes svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--bb-green); margin-top: .15rem; }

/* ---------- Outcomes ---------- */
.l5-outcome {
  background: var(--bb-white); border: 1px solid var(--bb-sand); border-radius: var(--radius-xl); padding: 1.75rem;
  height: 100%; display: flex; flex-direction: column; gap: 1.1rem;
}
.l5-outcome__text { margin: 0; font-weight: 600; color: var(--bb-teal-deep); font-size: 1.05rem; line-height: 1.45; text-wrap: pretty; }

/* ---------- Who Can Apply ---------- */
.l5-who .section-head { margin-bottom: 1.5rem; }
.l5-who__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.l5-who__list li {
  display: flex; gap: .75rem; align-items: flex-start; background: var(--bb-white); border: 1px solid var(--bb-sand);
  border-radius: var(--radius-md); padding: 1rem 1.15rem; font-weight: 500; line-height: 1.45;
}
.l5-who__list svg {
  width: 26px; height: 26px; flex: 0 0 26px; padding: 5px; border-radius: 50%; background: var(--bb-teal-soft); color: var(--bb-teal);
  margin-top: -.05rem;
}
.l5-who .section-actions { margin-top: 2rem; }
@media (max-width: 767.98px) { .l5-who__list { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 991.98px) {
  .l5-hero .hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .l5-outcome { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-lg); }
  .l5-outcome .feature__icon { flex: 0 0 44px; width: 44px; height: 44px; }
  .l5-outcome__text { align-self: center; }
}