/* ============================================================
   OnlyFacts — BRAND layer (bold yellow landing)
   Loaded after components.css. Carries the signature look of the
   marketing landing: yellow drench, comic speech bubbles, flag pills,
   email capture, pricing toggle, pill bar-chart. Token-driven.
   Article/internal pages do NOT load this — they stay calm.
   ============================================================ */

/* ---------- Yellow page ---------- */
body.of-brand { background: var(--c-yellow); color: var(--color-ink); }
body.of-brand .of-header {
  background: color-mix(in srgb, var(--c-yellow) 88%, transparent);
}
body.of-brand .of-header[data-scrolled="true"] { border-bottom-color: rgba(32,32,32,0.12); }

/* ---------- Footer on brand pages: yellow bg, dark text (prod is NOT a dark footer) ---------- */
body.of-brand .of-footer { background: transparent; color: var(--color-ink); padding-block: var(--space-48) var(--space-32); }
body.of-brand .of-footer a { color: var(--color-ink); opacity: 1; font-weight: 700; font-size: 14px; }
body.of-brand .of-footer a:hover { color: var(--c-red); }
/* mono black "ONLY FACTS" SVG (width/height=100% → MUST set aspect-ratio, иначе сплющит) */
.of-footer__logo { width: 150px; height: auto; aspect-ratio: 135.998 / 17.9585; display: block; }

/* ---------- Logo lockup: red "ONLY" svg + white "FACTS" speech-bubble ---------- */
.of-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.of-lockup__only { height: 20px; width: auto; aspect-ratio: 78.4 / 20.1; display: block; }
.of-lockup__bubble {
  position: relative; display: inline-flex; align-items: center;
  background: #fff; color: #202020; border-radius: 16px;
  font-family: var(--font-body); font-weight: 800; font-size: 18px; line-height: 1;
  letter-spacing: 0.01em; padding: 12px 13px;
}
.of-lockup__bubble::after { /* downward tail, bottom-left (matches logo-mark.svg triangle) */
  content: ""; position: absolute; left: 13px; bottom: -7px;
  border-style: solid; border-width: 8px 11px 0 0;
  border-color: #fff transparent transparent transparent;
}

/* ---------- Hero headline: three stacked Figma vector lines (pixel-perfect) ----------
   Widest line (l3 = 544px on prod) defines the box; others scale proportionally. */
.of-hero-h1 { display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: min(544px, 92vw); margin: 0 auto; }
.of-hero-line { display: block; height: auto; }
.of-hero-line--1 { width: 79.8%; aspect-ratio: 434 / 36; }   /* 434×36 on prod */
.of-hero-line--2 { width: 76.3%; aspect-ratio: 415 / 46; }   /* 415×46 */
.of-hero-line--3 { width: 100%;  aspect-ratio: 544 / 46; }   /* 544×46 */

/* ---------- Hero title (asymmetric, big red emphasis) ---------- */
.of-hero-title {
  --big: clamp(3.2rem, 9vw, 7rem);
  --small: clamp(1.6rem, 4vw, 3.1rem);
  font-family: var(--font-display); color: var(--color-ink);
  display: flex; flex-direction: column; align-items: center;
  line-height: 0.92; letter-spacing: -0.02em; gap: 0;
}
.of-hero-title .row { display: flex; align-items: center; gap: 0.25em; flex-wrap: wrap; justify-content: center; }
.of-hero-title .sm { font-size: var(--small); }
.of-hero-title .lg { font-size: var(--big); color: var(--c-red); }

/* ---------- Outlined red button (hero secondary) ---------- */
.of-btn--outline-red { background: transparent; color: var(--c-red); box-shadow: inset 0 0 0 2px var(--c-red); }
.of-btn--outline-red:hover { background: color-mix(in srgb, var(--c-red) 8%, transparent); }

/* Hero CTA: exact prod — 210×50, radius 16, Geologica Bold 16 */
.of-btn--hero { width: 210px; height: 50px; padding: 0; border-radius: 16px; font-size: 16px; font-weight: 700; }

/* "Более 20 стран" tile — Lemon 40 (#FFF6BC), r20, with up-tail (exact Figma) */
.of-avail { position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: #FFF6BC; border-radius: 20px; padding: 12px 16px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 14px; color: var(--color-ink); }
.of-avail::before { content: ""; position: absolute; top: -9px; left: 28px;
  border-width: 0 10px 10px 10px; border-style: solid;
  border-color: transparent transparent #FFF6BC transparent; }

/* ---------- Sale box (cream, red text) ---------- */
.of-salebox {
  background: var(--c-banana-40); border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-32); text-align: center;
  color: var(--c-red); font-weight: 600; line-height: 1.5; max-width: 56ch;
}
.of-salebox b { font-weight: 800; }

/* ---------- Country ticker (auto-scrolling, non-clickable) ---------- */
.of-ticker {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.of-ticker::-webkit-scrollbar { display: none; }
.of-ticker__track {
  display: flex; gap: var(--space-12); width: max-content;
  animation: of-ticker 48s linear infinite;
}
.of-ticker:hover .of-ticker__track,
.of-ticker:focus-within .of-ticker__track { animation-play-state: paused; }
@keyframes of-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .of-ticker__track { animation: none; } }
.of-ticker .of-pill { background: transparent; box-shadow: none; cursor: default; user-select: none; padding: 4px 12px; font-size: 14px; font-weight: 700; color: var(--color-ink); gap: 10px; }
/* flag circle: exact prod — 30px icon + 3px white ring, icon clipped */
.of-ticker .of-flag { width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: none; box-sizing: content-box; }
.of-ticker .of-pill { font-size: 18px; font-weight: 400; gap: 10px; padding: 4px 22px 4px 4px; }

/* ---------- Logo mark ---------- */
.of-logo__mark {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em;
  border-radius: var(--radius-full); background: var(--color-ink); color: var(--c-yellow);
  font-size: 0.7em; font-weight: 700;
}
.of-logo__beta {
  font-family: var(--font-body); font-size: 0.6em; font-weight: 600;
  padding: 0.15em 0.5em; border-radius: var(--radius-full);
  background: var(--color-ink); color: var(--c-yellow); align-self: center;
}

/* ---------- Common section heading + descriptor (used across the landing) ----------
   prod: heading Geologica Black 900 / 28px; descriptor Geologica Bold 700 / 14px; both centred #202020 */
.of-shead { font-family: var(--font-body); font-weight: 900; font-size: 28px; line-height: 1.15; text-align: center; color: #202020; margin: 0; }
.of-sdesc { font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 1.4; text-align: center; color: #202020; margin: 8px 0 0; }
.of-sdesc__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.of-sdesc__link:hover { color: var(--c-red); }

/* ---------- Display headline w/ red emphasis ---------- */
.of-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--tracking-tight); }
.of-display em, .of-em { font-style: normal; color: var(--c-red); }

/* ---------- Red CTA ---------- */
.of-btn--red { background: var(--c-red); color: var(--color-white); }
.of-btn--red:hover { box-shadow: 0 10px 28px rgba(218,62,34,0.4); }
.of-btn--white { background: var(--color-white); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.of-btn--white:hover { box-shadow: var(--shadow-md); }

/* ---------- Sale banner ---------- */
.of-sale {
  display: inline-flex; align-items: center; gap: var(--space-12);
  padding: 0.6em 1.1em; border-radius: var(--radius-full);
  background: var(--color-ink); color: var(--c-yellow); font-size: var(--fs-body-sm); font-weight: 600;
}
.of-sale b { color: var(--color-white); }

/* ---------- Flag pills ---------- */
.of-pills { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.of-pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 0.5em 1em; border-radius: var(--radius-full);
  background: var(--color-white); font-weight: 500; font-size: var(--fs-body-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.of-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.of-pill__flag { font-size: 1.1em; line-height: 1; }
.of-pill--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(32,32,32,0.2); }

/* ---------- Speech bubble (puffy "thought cloud") ----------
   The cloud silhouette is an SVG mask painted on ::before so the text
   stays crisp on top. Generous padding keeps copy inside the solid body. */
.of-bubble {
  --_fill: var(--c-yellow);
  position: relative; isolation: isolate;
  padding: 2.6rem 2.2rem; max-width: 44ch;
  font-size: var(--fs-body); line-height: 1.32; color: var(--color-ink);
}
.of-bubble::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--_fill);
  -webkit-mask: url("../src/assets/svg/bubble-cloud.svg") center / 100% 100% no-repeat;
          mask: url("../src/assets/svg/bubble-cloud.svg") center / 100% 100% no-repeat;
  /* hairline outline (separates yellow clouds from the yellow page) + soft lift */
  filter:
    drop-shadow(0 0 1.1px rgba(32,32,32,0.55))
    drop-shadow(0 0 1.1px rgba(32,32,32,0.35))
    drop-shadow(0 10px 22px rgba(12,12,13,0.10));
}
/* dot tail (two shrinking circles, bottom-left) */
.of-bubble::after {
  content: ""; position: absolute; left: 30px; bottom: -10px; z-index: -1;
  width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--_fill);
  box-shadow: -12px 12px 0 -4px var(--_fill);
}
.of-bubble--tail-right::after { left: auto; right: 30px; box-shadow: 12px 12px 0 -4px var(--_fill); }
.of-bubble--yellow { --_fill: var(--c-yellow); }
.of-bubble--banana { --_fill: var(--c-banana); }
.of-bubble--blue   { --_fill: var(--c-blue); color: var(--color-white); }
.of-bubble--aqua   { --_fill: var(--c-aqua); }
.of-bubble--green  { --_fill: var(--c-green); color: var(--color-white); }
.of-bubble--white  { --_fill: var(--color-white); }
.of-bubble .of-em { color: var(--c-red); font-weight: 700; }
.of-bubble--blue .of-em, .of-bubble--green .of-em { color: var(--c-yellow); }
.of-bubble__avatar {
  width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover;
  background: var(--color-white); margin-bottom: var(--space-12); display: block;
}
/* red dot accent (scattered between clouds) */
.of-dot { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--c-red); display: inline-block; }
.of-dot--lg { width: 26px; height: 26px; }

/* ============================================================
   SPEECH TILE — reusable card (DS component).
   Base = plain rounded card. Colour via --tile-fill.
   Variants: --cream (default) / --aqua / --blue / --banana.
   Tail is OPT-IN: add .of-tile--tail for a downward speech tail (bottom-left);
   .of-tile--tail-right flips it to the bottom-right. Without --tail it's a flat card.
   ============================================================ */
.of-tile {
  --tile-fill: #FFF6BC;
  position: relative;
  background: var(--tile-fill);
  border-radius: 24px;
  padding: 28px;
  color: #202020;
}
.of-tile--tail::after {
  content: ""; position: absolute; bottom: -17px; left: 44px;
  width: 0; height: 0; border-style: solid;
  border-width: 20px 26px 0 0;
  border-color: var(--tile-fill) transparent transparent transparent;
}
.of-tile--tail-right::after { left: auto; right: 44px; border-width: 20px 0 0 26px; }
.of-tile--cream  { --tile-fill: #FFF6BC; }
/* footer "поговорить с 4H" speech tile */
.of-footer__bubble { text-align: center; font-family: var(--font-body); font-weight: 700;
  font-size: 18px; line-height: 1.35; color: #202020; }
.of-footer__bubble a { color: var(--c-red); font-weight: 700; text-decoration: underline; }
.of-tile--aqua   { --tile-fill: #6CCADD; }
.of-tile--blue   { --tile-fill: #0173BC; color: #fff; }
.of-tile--banana { --tile-fill: #FAF4E9; }

/* ---------- "База" cloud stage — free-form, absolutely positioned to prod ---------- */
.of-base { padding-block: 0; }
.of-base__title { display: none; } /* prod shows this heading only on mobile */
.of-base__stage { position: relative; width: 1440px; max-width: 100%; height: 700px; margin: 0 auto; }
.of-base__map { position: absolute; display: block; }
.of-spark { position: absolute; display: block; }
.of-cloud {
  --cloudfill: #FFF6BC;
  position: absolute; box-sizing: border-box; padding: 32px; border-radius: 20px;
  font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 27px; color: #202020;
}
.of-cloud--cream { background: var(--cloudfill); }
.of-cloud--aqua  { --cloudfill: #6CCADD; background: var(--cloudfill); }
.of-cloud--r32   { border-radius: 32px; }
.of-cloud--r100  { border-radius: 100px; }
.of-cloud .b { font-size: 34px; }
.of-cloud .red { color: #da3e22; } .of-cloud .orange { color: #ffa600; }
.of-cloud .blue { color: #0072bc; } .of-cloud .white { color: #fff; }
/* down-left speech tail */
.of-cloud--tail::after {
  content: ""; position: absolute; left: 40px; bottom: -18px;
  border-style: solid; border-width: 20px 26px 0 0;
  border-color: var(--cloudfill) transparent transparent transparent;
}
/* puffy cloud (orange-outlined) — shape is the imported SVG */
.of-cloud--puff {
  background: url("../content/media/brand/svg/base-map.svg") center / 100% 100% no-repeat;
  border-radius: 0; padding: 56px 90px; text-align: center;
}
/* Mobile: the 1440px abs stage can't shrink — collapse it to a vertical stack
   (matches the prod mobile layout: full-width bubbles in reading order). */
@media (max-width: 860px) {
  .of-base { padding-block: var(--space-24); }
  .of-base__title { display: block; text-align: center; font-family: var(--font-body);
    font-weight: 900; font-size: 28px; line-height: 1.1; color: #202020; padding: 0 16px 12px; }
  .of-base__stage { position: static; width: auto; height: auto !important;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-32); }
  .of-base__stage .of-cloud { position: static !important;
    left: auto !important; top: auto !important; inset: auto !important;
    width: min(340px, 88vw) !important; text-align: center; }
  .of-base__stage .of-cloud--puff { height: auto !important; padding: 48px 44px; }
  .of-base__stage .of-dot { display: none; }
}

/* ---------- Blue announcement ribbon (scrolls away) ---------- */
.of-ribbon {
  background: var(--c-blue); color: #fff; text-align: center;
  font-size: var(--fs-body-sm); font-weight: 500; padding: 0.6em 1em;
}

/* Prod section content width ≈1150 at 1440 viewport (cards = container/3). */
body.of-brand .of-container { max-width: 1150px; }

/* ---------- Menu bar (exact Figma specs: 980×68, nav 12px, btns 36px) ---------- */
.of-menu { width: 100%; max-width: 980px; height: 68px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.of-brand .of-nav__links a { font-size: 12px; line-height: 14px; text-align: center; color: #000; opacity: 1; font-weight: 400; }
.of-btn--sm { height: 36px; padding: 0; font-size: 12px; font-weight: 700; border-radius: 12px; }
.of-btn--reg { width: 178px; }                              /* Зарегистрироваться: exact prod */
.of-btn--ghost.of-btn--sm { padding: 0 10px; line-height: 14px; } /* Войти: lh 14, ghost */
.of-menu .of-logo-img { height: 40px; }

/* ---------- Top header: static (scrolls away; floating bar takes over) ---------- */
body.of-brand .of-header { position: static; background: var(--c-yellow); }

/* ---------- Burger (responsive overflow) ---------- */
.of-burger { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; font-size: 22px; }
.of-burger:hover { background: rgba(32,32,32,0.08); }
@media (max-width: 879px) {
  .of-burger { display: inline-flex; }
  body.of-brand .of-nav__links { position: absolute; top: 100%; right: var(--gutter); flex-direction: column; gap: 4px;
    background: var(--c-yellow); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px 16px; display: none; }
  body.of-brand .of-nav__links[data-open] { display: flex; }
  .of-menu { position: relative; }
  /* prod static mobile header = логотип + Войти + бургер (Зарегистрироваться скрыта) */
  .of-header .of-btn--reg { display: none; }
}

/* ---------- Floating menu (scroll state) — rounded pill, distinct CTAs ---------- */
.of-btn--outline-blue { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--c-blue); }
.of-btn--outline-blue:hover { background: color-mix(in srgb, var(--c-blue) 10%, transparent); }
.of-floating { position: fixed; inset: 14px 0 auto 0; z-index: 60; padding-inline: 16px;
  transform: translateY(-160%); opacity: 0; pointer-events: none;
  transition: transform 0.42s var(--ease-out), opacity 0.3s var(--ease-out); }
.of-floating[data-show="true"] { transform: none; opacity: 1; pointer-events: auto; }
/* pill wrapper only — the menu inside is the SAME .of-menu as the static header
   (identical size/composition/spacing); the bar just gives it the detached pill look. */
.of-floating__bar { max-width: 1024px; margin-inline: auto; box-sizing: border-box;
  background: var(--c-yellow); border-radius: 36px; box-shadow: 0 14px 34px rgba(12,12,13,0.20);
  padding: 4px 22px; }
.of-floating .of-logo-img { height: 36px; }
.of-floating__beta { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 1.05rem; margin-left: 6px; }
.of-floating__cta { display: flex; align-items: center; gap: 16px; }
.of-flink { font-weight: 700; font-size: 14px; }
.of-flink:hover { color: var(--c-red); }
@media (max-width: 719px) { .of-flink { display: none; } .of-floating__beta { display: none; } }
/* Mobile floating bar: KEEP the key buttons (Зарегистрироваться/Войти) always visible;
   only the nav links collapse into the burger, which sits to the RIGHT of the buttons. */
@media (max-width: 879px) {
  .of-floating__bar { padding: 8px 12px; gap: 8px; }
  .of-floating__bar .of-menu { flex-wrap: nowrap; }
  .of-floating__bar .of-cluster { gap: 8px; flex-wrap: nowrap; }
  .of-floating__bar .of-btn--ghost { display: none; } /* mobile floating: логотип + Зарегистрироваться + бургер */
  .of-floating__bar .of-btn--reg { width: auto; padding: 0 11px; flex: none; white-space: nowrap; }
  /* shrink the lockup so logo + Зарегистрироваться + бургер fit the pill with breathing room */
  .of-floating__bar .of-lockup { gap: 6px; }
  .of-floating__bar .of-lockup__only { height: 16px; }
  .of-floating__bar .of-lockup__bubble { font-size: 14px; padding: 8px 10px; }
  .of-floating__bar .of-lockup__bubble::after { left: 10px; bottom: -6px; border-width: 7px 9px 0 0; }
  .of-floating__bar .of-nav__links[data-float-menu] { top: calc(100% + 8px); right: 8px; }
}
/* "Войти" lives in the floating burger dropdown on mobile only (everything but Зарегистрироваться collapses) */
.of-navonly-mobile { display: none; }
@media (max-width: 879px) { .of-floating__bar .of-nav__links[data-float-menu] .of-navonly-mobile { display: block; } }

/* ---------- Peach secondary button (hero) ---------- */
.of-btn--peach { background: #ffd9c9; color: var(--c-red); }
.of-btn--peach:hover { background: #ffc7b1; }

/* ---------- Flag icon ---------- */
.of-flag { width: 1.5em; height: 1.5em; border-radius: var(--radius-full); object-fit: cover; flex: none; }
.of-flag--lg { width: 40px; height: 40px; }

/* ---------- India preview — frosted full-bleed band, abs-positioned to prod (1440) ---------- */
.of-india { padding-block: 0; margin-top: -109px; }
.of-india__band {
  position: relative; width: 1440px; max-width: 100%; height: 865px; margin: 0 auto;
  background: rgba(255,255,255,0.6); border-radius: 24px;
}
.of-india__heading {
  position: absolute; top: 70px; left: 0; right: 0; text-align: center;
  font-family: var(--font-body); font-weight: 900; font-size: 28px; line-height: 35px; color: #202020;
}
.of-india__geo {
  position: absolute; top: 120px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 11px; height: 40px;
}
.of-india__flag {
  width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50%;
  box-sizing: border-box; display: grid; place-items: center; overflow: hidden;
}
.of-india__flag img { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; display: block; }
.of-india__country { font-family: var(--font-body); font-weight: 900; font-size: 26px; line-height: 1; color: #202020; }

/* white card 969×539 r20, centered at top 196 from band */
.of-india__card {
  position: absolute; top: 196px; left: 50%; transform: translateX(-50%);
  width: 969px; height: 539px; background: #fff; border-radius: 20px;
  padding: 32px 24px;
}
.of-india__left { position: absolute; top: 32px; left: 24px; width: 232px; }
.of-india__see { font-family: var(--font-body); font-weight: 900; font-size: 28px; line-height: 35px; color: #202020; margin: 0 0 24px; }

.of-itabs { display: flex; flex-direction: column; gap: 8px; }
.of-itab {
  position: relative; width: 232px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0; cursor: pointer;
  background: rgba(255,255,255,0.7); border-radius: 16px;
  padding: 0; text-align: left;
}
.of-itab__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 8px 4px 12px; }
.of-itab__label { font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 18px; color: #202020; }
/* circular red chevron — down by default, up on active tab */
.of-itab__chev {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: #da3e22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 L8 10 L12.5 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.of-itab.is-active .of-itab__chev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 10 L8 6 L12.5 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* description + progress bar: only on the active (aqua) tab */
.of-itab__desc, .of-itab__bar { display: none; }
.of-itab.is-active { background: #6CCADD; padding-bottom: 14px; }
.of-itab.is-active .of-itab__desc { display: block; margin: 2px 12px 10px; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: #202020; }
.of-itab.is-active .of-itab__bar { display: block; margin: 0 12px; height: 3px; background: #fff; border-radius: 20px; overflow: hidden; }
.of-itab__bar i { display: block; height: 100%; width: 0; background: #da3e22; border-radius: 20px; }

/* vertical divider between columns */
.of-india__divider { position: absolute; top: 32px; left: 278px; width: 3px; height: 471px; background: rgba(32,32,32,0.06); border-radius: 2px; }

/* right column: header text + baked regulator panel image */
.of-india__right { position: absolute; top: 32px; left: 304px; width: 641px; }
.of-india__rhead { margin: 0; text-align: center; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: #202020; }
.of-india__rhead b { font-weight: 700; }
.of-india__panel { display: block; width: 100%; height: auto; margin-top: 24px; border-radius: 13px; }

/* centered red CTA inside the band */
.of-india__cta {
  position: absolute; top: 775px; left: 50%; transform: translateX(-50%);
  width: 317px; height: 52px; padding: 0; border-radius: 16px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 20px;
}

.of-india__mob { display: none; } /* shown only on mobile (full-variant image carousel) */
/* Mobile: prod renders the India block as a self-contained card per section
   (title + subtitle + arrows/dots + panel graphic + description + CTA, all composed).
   We swap the rendered variant image and overlay transparent hit-zones for the
   baked arrows and CTA — NOT the desktop vertical tab list. */
@media (max-width: 1000px) {
  .of-india { margin-top: 0; padding-block: var(--space-24); }
  .of-india__band { position: static; width: auto; max-width: 100%; height: auto; padding: 28px 16px; }
  .of-india__heading, .of-india__geo { position: static; }
  .of-india__geo { margin-top: 10px; }
  .of-india__card { position: static; transform: none; width: auto; max-width: 360px; height: auto;
    margin: 16px auto 0; display: block; padding: 0; background: none; box-shadow: none; }
  /* hide the entire desktop composition + the separate HTML CTA (it's baked into the image) */
  .of-india__left, .of-india__divider, .of-india__right, .of-india__cta { display: none; }
  .of-india__mob { display: block; position: relative; width: 100%; }
  .of-india__mobimg { display: block; width: 100%; height: auto; }
  .of-india__hit { position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .of-india__hit--prev { left: 3%; top: 10%; width: 16%; height: 7.5%; border-radius: 50%; }
  .of-india__hit--next { right: 3%; top: 10%; width: 16%; height: 7.5%; border-radius: 50%; }
  .of-india__hit--cta  { left: 8%; right: 8%; bottom: 2.2%; height: 7%; border-radius: 16px; }
}

/* ---------- Trust icon columns ---------- */
.of-trust { display: grid; gap: 9px; max-width: 1041px; margin-inline: auto; }
@media (min-width: 900px) { .of-trust { grid-template-columns: repeat(3, 1fr); } } /* prod: 1-col до 900 (768=моб) */
.of-trust > div { background: #FFF6BC; border-radius: 20px; padding: 20px; }
.of-trust > div p { font-weight: 700; font-size: 20px; line-height: 24px; color: #202020; }
.of-trust__icon { width: 64px; height: 64px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.75rem; margin-bottom: var(--space-16); }
.of-trust__logo { width: 88px; height: 88px; display: block; margin-bottom: var(--space-16); } /* dark logomark above heading (prod) */
.of-trust__ico { width: 68px; height: 68px; display: block; margin-bottom: 28px; }

/* ---------- Email capture ---------- */
.of-capture {
  background: #FFF6BC; border-radius: 28px; max-width: 900px; margin-inline: auto;
  padding: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
}
.of-capture h2 { font-family: var(--font-body); font-weight: 900; font-size: clamp(23px, 1vw + 16px, 30px); line-height: 1.15; color: #202020; }
.of-capture > p { font-weight: 700; font-size: 16px; line-height: 1.4; color: #202020; }
.of-capture__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: stretch; }
.of-field {
  height: 52px; padding: 0 18px; border: 0; border-radius: 14px;
  background: #fff; font-size: 15px; color: var(--color-ink); box-sizing: border-box;
}
.of-field::placeholder { color: #9a9a93; }
.of-field:focus { outline: 2px solid var(--c-yellow-strong); }
/* select: white, no border, custom chevron */
.of-capture select.of-field { flex: 1 1 200px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23202020' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
/* email: white with light grey hairline */
.of-capture input.of-field { flex: 1.25 1 220px; box-shadow: inset 0 0 0 1px rgba(32,32,32,0.14); }
/* submit: inactive = cream + yellow border; active (страна выбрана) = solid yellow */
.of-btn--submit { flex: 0 0 auto; height: 52px; padding: 0 32px; border-radius: 14px;
  background: #FFFDF0; box-shadow: inset 0 0 0 2px var(--c-yellow); color: #202020; font-weight: 700; font-size: 15px; }
.of-btn--submit:hover { background: #fff; }
.of-btn--submit.is-active { background: var(--c-yellow); box-shadow: none; }
.of-btn--submit.is-active:hover { background: var(--c-yellow-strong); }

/* ---------- Category icons row ---------- */
.of-cats { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: center; }
.of-cat {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 0.55em 1.1em; border-radius: var(--radius-full);
  background: var(--color-white); font-weight: 600; font-size: var(--fs-body-sm);
}
.of-cat__dot { width: 22px; height: 22px; border-radius: var(--radius-full); }

/* ---------- Pill bar chart (market size) ---------- */
.of-chart { display: flex; align-items: flex-end; gap: var(--space-16); height: 240px; }
.of-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-8); height: 100%; }
.of-bar__fill { width: 100%; border-radius: var(--radius-full); background: var(--c-yellow-strong); }
.of-bar__fill--accent { background: var(--c-blue); }
.of-bar__val { font-family: var(--font-display); font-size: var(--fs-h3); }
.of-bar__yr { font-size: var(--fs-caption); color: var(--color-ink-muted); }

/* ---------- ROI card ---------- */
.of-roi { background: var(--c-red); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-24); }
.of-roi__circle { width: 120px; height: 120px; border-radius: var(--radius-full); background: var(--c-aqua); }
.of-roi__bar { height: 16px; border-radius: var(--radius-full); background: var(--c-aqua); }

/* ---------- Big stat (red Dela numbers) ---------- */
.of-bigstat { font-family: var(--font-display); font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); color: var(--c-red); line-height: 1; }

/* ---------- Pricing "Оформи подписку" (matches prod) ---------- */
.of-subcard { background: #fff; border-radius: 32px; padding: 36px 40px 32px; max-width: 824px; margin-inline: auto; }
.of-pricing__title { font-family: var(--font-body); font-weight: 900; font-size: 34px; line-height: 1; text-align: center; color: #202020; margin: 0 0 24px; }
/* segmented Персональная / Командная */
.of-segm { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid #C7DBF2; border-radius: 16px; padding: 5px; }
.of-segm__opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.of-segm__opt[aria-selected="true"] { background: var(--c-yellow); }
.of-segm__ico { height: 32px; width: auto; flex: none; display: block; }
.of-segm__txt { display: flex; flex-direction: column; gap: 2px; }
.of-segm__txt b { font-weight: 800; font-size: 17px; color: #202020; }
.of-segm__txt small { font-size: 13px; color: #202020; }
/* plans box */
.of-plans { border: 2px solid #2E78C9; border-radius: 18px; padding: 10px; margin-top: 16px; }
.of-plan { display: none; }
.of-plan.is-active { display: block; }
.of-prow { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 12px; cursor: pointer; }
.of-prow.is-selected { background: var(--c-yellow); }
.of-prow__name { font-weight: 800; font-size: 17px; color: #202020; }
.of-prow__price { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 18px; color: #202020; }
.of-prow__price b { font-weight: 700; }
.of-prow__price s { color: #E8806A; text-decoration: line-through; font-weight: 700; }
.of-radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #2E78C9; }
.of-radio.is-on { background: #2E78C9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4 8-8' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color: #2E78C9; }
.of-reco { background: #D6E4F5; color: #2E6FC4; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 8px; }
.of-pricing__cta { display: block; width: 100%; background: var(--c-yellow); color: #202020; font-weight: 800; font-size: 17px; padding: 16px; border-radius: 16px; margin-top: 20px; text-align: center; }
.of-pricing__cta:hover { background: color-mix(in srgb, var(--c-yellow) 48%, #fff); } /* hover светлеет (как на #23) */
.of-pricing__total { text-align: center; font-size: 16px; color: #202020; margin-top: 20px; }
.of-pricing__total b { font-weight: 800; }
.of-pricing__fine { text-align: center; font-size: 14px; line-height: 1.5; color: #6b6b6b; margin-top: 16px; }
.of-pricing__fine a { color: #6b6b6b; text-decoration: underline; }
@media (max-width: 900px) {
  .of-subcard { padding: 24px 16px 28px; border-radius: 24px; }
  .of-pricing__title { font-size: 30px; margin-bottom: 20px; }
  .of-segm { grid-template-columns: 1fr; gap: 6px; }
  .of-segm__opt { padding: 12px 14px; gap: 10px; }
  .of-segm__txt b { font-size: 16px; }
  .of-segm__txt small { font-size: 12px; }
  .of-prow { flex-wrap: wrap; padding: 14px; gap: 8px 12px; }
  .of-prow__name { font-size: 17px; }
  .of-prow__price { font-size: 16px; gap: 8px; }
  .of-reco { font-size: 11px; padding: 4px 8px; order: -1; }
  .of-pricing__cta { font-size: 17px; padding: 18px; }
}

/* ---------- Article cards ---------- */
/* mobile: horizontal scroll-snap carousel (matches prod); desktop: 4-col grid */
.of-articles {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 4px;
  scrollbar-width: none;
}
.of-articles::-webkit-scrollbar { display: none; }
.of-articles > .of-acard { flex: 0 0 72%; max-width: 300px; scroll-snap-align: start; }
@media (min-width: 1000px) {
  .of-articles { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0; }
  .of-articles > .of-acard { flex: initial; max-width: none; }
}
.of-acard { background: #FAF4E9; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 36px; min-height: 220px; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.of-acard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.of-acard__name { font-family: var(--font-body); font-weight: 800; font-size: 20px; line-height: 1.2; color: #202020; }
.of-acard__flag { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid #fff; object-fit: cover; box-sizing: border-box; }
.of-acard__desc { margin: 0; font-size: 16px; line-height: 1.45; color: #8a8a82; }
.of-acard__arr { color: #202020; font-weight: 700; white-space: nowrap; }
.of-acard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* carousel (mobile): no hover-lift — the overflow-x scroller clips the 48px shadow, and touch has no hover */
@media (max-width: 999px) { .of-acard:hover { transform: none; box-shadow: none; } }

/* ---------- FAQ ---------- */
/* prod FAQ: items on yellow, thin divider, red circular chevron marker (no white card) */
.of-faq { background: transparent; border-radius: 0; border-bottom: 1px solid rgba(32,32,32,0.15); padding: 20px 0; }
.of-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; line-height: normal; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.of-faq summary::-webkit-details-marker { display: none; }
.of-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #da3e22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform var(--dur); }
.of-faq[open] summary::after { transform: rotate(180deg); }

/* ---------- Methodology page (node 7:9069) ---------- */
.of-metahero { padding: 4px 0 40px; }
.of-metahero__inner { max-width: 856px; margin-inline: auto; padding-inline: var(--gutter); }
.of-metahero__h1 { font-family: var(--font-body); font-weight: 900; font-size: 40px; line-height: 1.06; color: #202020; margin: 24px 0 0; }
.of-metahero__sub { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.45; color: #202020; margin: 16px 0 0; max-width: 600px; }
.of-metabody { background: #fff; }
.of-metabody__inner { max-width: 856px; margin-inline: auto; padding: 0 var(--gutter) 56px; }
.of-metabody__img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .of-metahero__h1 { font-size: 28px; }
  .of-metahero { padding-bottom: 24px; }
  .of-metahero__inner { padding-inline: 14px; }
  .of-metabody__inner { padding-inline: 0; padding-bottom: 32px; }
}