/* ============================================================
   OnlyFacts — Country article pages (body only)
   Rebuilt 1:1 from the Figma макет (node 4:5488).
   Loaded AFTER brand.css. Scoped to .of-cpage to avoid
   colliding with the shared landing styles.
   ------------------------------------------------------------
   Figma reference (desktop frame 900–964px):
   - Hero: 580px tall, yellow #FDE85B, Dela Gothic H1 44px,
     Geologica lead 20px, decorative flag graphic behind.
   - Sections: centred Dela Gothic H3 20/24, left-aligned
     Geologica body 14, cream CTA plates (#FAF4E9, r16) with a
     48px circular flag icon + inline red (#DA3E22) link.
   - "Стань первым пользователем" yellow band + pricing block.
   - Cross-link article cards (reuse .of-articles).
   ============================================================ */

.of-cpage { --c-col: 740px; }

/* ---------- Hero ---------- */
.of-chero {
  position: relative;
  background: var(--c-yellow);
  overflow: hidden;
  isolation: isolate;
}
/* Decorative hero objects: each peeks 2/3 of its width from a screen edge.
   A page may have a left object, a right object, both, or neither. */
.of-chero__obj {
  position: absolute; z-index: -1; display: block; height: auto;
  pointer-events: none; user-select: none;
}
.of-chero__obj--left  { top: -7%;  left: 0;  width: clamp(220px, 24vw, 360px); transform: translateX(-66%); }
.of-chero__obj--right { top: 50%;  right: 0; width: clamp(360px, 42vw, 600px); transform: translate(66%, -50%); }
/* legacy single cover image, if still present */
.of-chero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
.of-chero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 5vw, 7rem) var(--gutter) clamp(2.5rem, 1.5rem + 5vw, 6rem);
}
.of-chero__col {
  max-width: 712px;
  display: flex;
  flex-direction: column;
  gap: var(--space-20, 1.25rem);
}
.of-chero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content;
  font-family: var(--font-body); font-weight: 700;
  font-size: 14px; line-height: 1; color: var(--color-ink);
  padding: 8px 14px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.of-chero__eyebrow:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
.of-chero__h1 {
  font-family: "Dela Gothic One", "Geologica", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 1.2rem + 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 12px 0 0;
  text-wrap: balance;
}
.of-chero__lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 0.6rem + 0.7vw, 20px);
  line-height: 1.5; color: var(--color-ink);
  margin: 0; max-width: 660px;
}

/* ---------- Body wrapper ---------- */
.of-cbody {
  background: var(--color-white);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.of-cbody__inner {
  max-width: var(--c-col);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.4rem + 2.5vw, 2.5rem);
}

/* ---------- Section ---------- */
.of-csection { display: flex; flex-direction: column; gap: var(--space-20, 1.25rem); }
.of-csection__title {
  font-family: "Dela Gothic One", "Geologica", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 0.7rem + 1vw, 20px);
  line-height: 1.25;
  color: var(--color-ink);
  text-align: left;
  margin: 0;
}
.of-csection__body { display: flex; flex-direction: column; gap: 12px; }
.of-csection__body p {
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--color-ink);
  margin: 0;
}
.of-csection__body ul {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding-left: 22px; list-style: disc;
}
.of-csection__body ul li {
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--color-ink);
}

/* ---------- CTA plate (cream) ---------- */
.of-cplate {
  display: flex; align-items: center; gap: 20px;
  background: var(--c-banana);
  border-radius: 16px;
  padding: 20px 27px;
}
.of-cplate__icon {
  flex: none; width: 48px; height: 48px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
  background: #fff;
  box-sizing: border-box;
}
.of-cplate__txt {
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--color-ink);
  margin: 0;
}
.of-cplate__txt a, .of-clink {
  color: var(--c-red); text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 400;
}
.of-cplate__txt a:hover, .of-clink:hover { text-decoration: none; }

/* ---------- "Стань первым пользователем" band + pricing ---------- */
.of-cfirst {
  background: var(--c-yellow);
  padding-block: clamp(2rem, 1.2rem + 3vw, 3rem) 0;
  text-align: center;
}
.of-cfirst__h2 {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(24px, 1rem + 2vw, 28px); line-height: 1.1;
  color: var(--color-ink); margin: 0;
}
.of-cfirst__sub {
  font-family: "Dela Gothic One", "Geologica", system-ui, sans-serif;
  font-weight: 400; font-size: 14px; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--c-red);
  margin: 12px 0 0;
}
/* Pricing block sits in its own band right under the heading.
   Reuses .of-pricing markup; we just give it the lavender frame bg
   the макет shows behind the embedded subscription widget. */
.of-cprice { background: #e9e9fd; padding-block: 0; }
.of-cprice .of-pricing { padding-top: clamp(2rem, 1rem + 4vw, 3.5rem); }

/* ---------- Cross-links section ---------- */
.of-clinks { background: var(--color-white); }
.of-clinks .of-shead {
  font-family: "Dela Gothic One", "Geologica", system-ui, sans-serif;
  font-weight: 400; font-size: 20px; line-height: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .of-chero__inner { padding-top: clamp(1.5rem, 1rem + 4vw, 3rem); padding-bottom: clamp(4rem, 2rem + 12vw, 6rem); }
  .of-csection__title { text-align: left; }
  .of-cplate { flex-direction: row; align-items: flex-start; padding: 20px; gap: 16px; }
  .of-cplate__icon { width: 44px; height: 44px; }
  /* hero objects converge at the BOTTOM of the hero, peeking ~30% below its edge */
  .of-chero__obj { top: auto; bottom: 0; }
  .of-chero__obj--left  { left: -6%;  width: clamp(150px, 40vw, 210px); transform: translateY(30%); }
  .of-chero__obj--right { right: -6%; width: clamp(170px, 46vw, 240px); transform: translateY(30%); }
}