/* ==========================================================================
   styles.css — Phase 0 scaffold for Figma 1:1 restyle
   Loaded AFTER main.css so it overrides any conflicting rules.
   This file is the foundation: reset, fonts, palette tokens, layout primitives.
   Specific section styling lives in later phases (Phase 1+).
   ========================================================================== */


/* ---------- 0. Page-wide horizontal gutter ------------------------------- */
/* Single source of truth for the 100px section gutter that used to be
   duplicated as `margin-left: 100/100.42/96.21px` on Phase 3/5 canvases
   and as `left: 100px` on Phase 8/9 first cards. The `.container`
   max-width is widened from 1270 to 1440 so the inner content area
   (1240px at viewport ≥1440) stays the same as before.
   The `<header>` keeps its original tight padding (it has its own
   left-aligned navigation that shouldn't sit at the same gutter). */
.container {
    max-width: 1440px;
    padding-left: 100px;
    padding-right: 100px;
}

/* The <header>/.topnav uses the same 1440 max-width as the regular
   .container, but with NO horizontal padding — the topnav children are
   absolutely positioned at Figma frame coords (Тема at x=105.99, Об
   организаторах right edge at x=1339.99 within a 1440 frame), so the
   topnav itself must span the full 1440 to contain them. The natural
   ~100 px gutters baked into the link positions then visually align
   with section1 / .fs-hero content edges.                              */
header .container {
    max-width: 1440px;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 770px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ---------- 1. CSS reset ------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}


/* ============================================================================
   CHROMATIC BLEND RULE  ·  DO NOT REMOVE
   ============================================================================
   Site-wide policy: ALL coloured (orange #FF6E32 / purple #AA6EFF /
   lime #C2F04F) text + decorative graphics use
   `mix-blend-mode: plus-lighter`.
   This is what produces the chromatic / additive-light effect the design
   relies on (overlapping orange + purple = white, lime over dark = bright,
   etc). Without it, colour overlaps look muddy.

   The selectors below match the common naming conventions used across
   the site so any NEW chromatic element automatically inherits the
   blend mode without needing a per-element rule:

     · `[class*="--orange"]`  matches  fs-f8__lead--orange,
                                       fs-f10__rect--orange,
                                       s3p5__mega-num--orange, …
     · `[class*="--purple"]`  matches  fs-f8__lead--purple, fs-f10__…,
                                       fs-f5__legend-swatch--purple, …
     · `[class*="-mark"]`  covers all lime-underlined inline marks
       (`__heading-mark`, `__edu-heading-mark`, `__body-mark`, etc).
     · `[class*="__heading-underline"]`  covers the lime underlines
       used in headings.

   Excluded by design (they are solid colour blocks, not chromatic
   overlays): `.s3p5__seg-pill` (toggle pill), `.fs-f10__strip`
   (white separator), buttons with solid backgrounds.
   Article photo layers (scroll crossfade, not additive text):
   `.article-7-photo2__img--purple` (class contains `--purple` but is
   a raster portrait, not chromatic type).

   When introducing a new coloured element, prefer naming it
   `…--orange` / `…--purple` so it picks up this rule automatically.
   ============================================================================ */
[class*="--orange"]:not(button):not(.s3p5__seg):not(.s3p5__seg-pill):not(.fs-f10__strip):not(.art-block--orange),
[class*="--purple"]:not(button):not(.s3p5__seg):not(.s3p5__seg-pill):not(.fs-f10__strip):not(.art-block--purple):not(.article-7-photo2__img--purple),
[class*="-mark"],
[class*="__heading-underline"]:not(.fs-f4 *) {
    mix-blend-mode: plus-lighter;
}

/* Explicit roster for orange/purple text elements whose class names don't
   follow the `--orange` / `--purple` modifier convention (kept here so the
   chromatic blend policy stays in one place instead of leaking into each
   component rule). When renaming any of these, drop the entry below. */
.s3p5__minicopy-orange,
.s3p5__minicopy-purple,
.fs-f3__label,
.fs-f3__callout,
.fs-f3__stat-percent,
.fs-f5__gen-body,
.fs-f6__stat-num,
.fs-f6__stat-text,
.fs-f10__body--right,
.fs-f10__body-hl {
    mix-blend-mode: plus-lighter;
}


/* ============================================================================
   LIME UNDERLINE RULE  ·  DO NOT REMOVE
   ============================================================================
   Single source of truth for the inline lime underline (under highlighted
   words inside headings + body copy). Any class containing `-mark`
   (e.g. `fs-f4__body-mark`, `fs-f7__heading-mark`,
   `fs-f5__edu-heading-mark`) automatically picks up this underline.
   ============================================================================ */
[class*="-mark"] {
    text-decoration: underline;
    text-decoration-color: #C3F150;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}


/* ============================================================================
   RESEARCH · INTERMEDIATE-VIEWPORT ADAPTATION  ·  DO NOT REMOVE
   ============================================================================
   The research.html sections (.fs-f1 … .fs-f11, plus .fs-hero) are
   designed at a fixed 1440 px desktop canvas. Below 1440 (down to the
   771 px mobile breakpoint) we proportionally shrink the entire section
   tree via the `zoom` property — it scales BOTH the visual rendering
   AND the laid-out box dimensions, so sections never overflow or leave
   horizontal gaps the way `transform: scale()` would.

   `zoom` doesn't accept dynamic vw-based calc(), so we use stepped
   breakpoints (every ~100 px) that round to a static zoom value
   matching the viewport width / 1440.

   Anything ≤ 770 px continues to use the dedicated mobile rules
   (.fs-fX media-query overrides).                                    */
/* Stepped zoom values calibrated to (max_width - 16) / 1440 so the
   1440 px canvas always fits inside the viewport with a 16 px safety
   margin (no horizontal overflow at any of the bracket boundaries).  */
@media (min-width: 771px) and (max-width: 870px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.52;
    }
}

@media (min-width: 871px) and (max-width: 970px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.59;
    }
}

@media (min-width: 971px) and (max-width: 1080px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.66;
    }
}

@media (min-width: 1081px) and (max-width: 1180px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.73;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.80;
    }
}

@media (min-width: 1281px) and (max-width: 1380px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.87;
    }
}

@media (min-width: 1381px) and (max-width: 1439px) {

    .fs-hero,
    .fs-f1,
    .fs-f2,
    .fs-f3,
    .fs-f4,
    .fs-f5,
    .fs-f6,
    .fs-f7,
    .fs-f8,
    .fs-f9,
    .fs-f10,
    .fs-f11 {
        zoom: 0.94;
    }
}


/* ============================================================================
   INDEX · INTERMEDIATE-VIEWPORT ADAPTATION  ·  DO NOT REMOVE
   ============================================================================
   Mirrors the research page stepped-zoom strategy above: between the 770 px
   mobile breakpoint and the 1440 px desktop canvas, the index page roots
   are proportionally shrunk via `zoom` so the 1440-frame absolute layout
   never overflows or leaves horizontal gaps. Same 7 brackets, same zoom
   values calibrated to (upper_bound - 16) / 1440.

   Note: .section3__phase5 still has its own (max-width: 1080px) vertical
   fallback — at 771-1080 both rules co-exist (vertical flow is also
   shrunk by zoom). At 1081-1439 the desktop pixel layout is preserved
   and merely scaled. ≤ 770 px is handled by the dedicated mobile rules.
   ============================================================================ */
@media (min-width: 771px) and (max-width: 870px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.52;
    }
}

@media (min-width: 871px) and (max-width: 970px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.59;
    }
}

@media (min-width: 971px) and (max-width: 1080px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.66;
    }
}

@media (min-width: 1081px) and (max-width: 1180px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.73;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.80;
    }
}

@media (min-width: 1281px) and (max-width: 1380px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.87;
    }
}

@media (min-width: 1381px) and (max-width: 1439px) {

    header,
    .hero,
    .section1,
    .section2,
    .section3,
    .section5,
    .section6,
    .section8,
    .section9,
    footer {
        zoom: 0.94;
    }
}


/* ---------- 2. @font-face declarations ----------------------------------- */
/* Golos Text TTFs are reused under four family aliases (Golos Text, Golos,
   Golos UI, Golos Text VF) so any spec reference resolves to the same files. */

/* --- Golos Text (canonical) --- */
@font-face {
    font-family: 'Golos Text';
    src: local('Golos Text Regular'), local('GolosText-Regular'),
        url('../fonts/Golos_Text/static/Golos-Text_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    src: local('Golos Text Medium'), local('GolosText-Medium'),
        url('../fonts/Golos_Text/static/Golos-Text_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    src: local('Golos Text SemiBold'), local('GolosText-SemiBold'),
        url('../fonts/Golos_Text/static/Golos-Text_DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    src: local('Golos Text Bold'), local('GolosText-Bold'),
        url('../fonts/Golos_Text/static/Golos-Text_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    src: local('Golos Text ExtraBold'), local('GolosText-ExtraBold'),
        url('../fonts/Golos_Text/static/Golos-Text_Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Golos (alias) --- */
@font-face {
    font-family: 'Golos';
    src: local('Golos Text Regular'), local('GolosText-Regular'),
        url('../fonts/Golos_Text/static/Golos-Text_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos';
    src: local('Golos Text Medium'), local('GolosText-Medium'),
        url('../fonts/Golos_Text/static/Golos-Text_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos';
    src: local('Golos Text SemiBold'), local('GolosText-SemiBold'),
        url('../fonts/Golos_Text/static/Golos-Text_DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos';
    src: local('Golos Text Bold'), local('GolosText-Bold'),
        url('../fonts/Golos_Text/static/Golos-Text_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos';
    src: local('Golos Text ExtraBold'), local('GolosText-ExtraBold'),
        url('../fonts/Golos_Text/static/Golos-Text_Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Golos UI (alias) --- */
@font-face {
    font-family: 'Golos UI';
    src: local('Golos Text Regular'), local('GolosText-Regular'),
        url('../fonts/Golos_Text/static/Golos-Text_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos UI';
    src: local('Golos Text Medium'), local('GolosText-Medium'),
        url('../fonts/Golos_Text/static/Golos-Text_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos UI';
    src: local('Golos Text SemiBold'), local('GolosText-SemiBold'),
        url('../fonts/Golos_Text/static/Golos-Text_DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos UI';
    src: local('Golos Text Bold'), local('GolosText-Bold'),
        url('../fonts/Golos_Text/static/Golos-Text_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos UI';
    src: local('Golos Text ExtraBold'), local('GolosText-ExtraBold'),
        url('../fonts/Golos_Text/static/Golos-Text_Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Golos Text VF (alias) --- */
@font-face {
    font-family: 'Golos Text VF';
    src: local('Golos Text Regular'), local('GolosText-Regular'),
        url('../fonts/Golos_Text/static/Golos-Text_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text VF';
    src: local('Golos Text Medium'), local('GolosText-Medium'),
        url('../fonts/Golos_Text/static/Golos-Text_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text VF';
    src: local('Golos Text SemiBold'), local('GolosText-SemiBold'),
        url('../fonts/Golos_Text/static/Golos-Text_DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text VF';
    src: local('Golos Text Bold'), local('GolosText-Bold'),
        url('../fonts/Golos_Text/static/Golos-Text_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text VF';
    src: local('Golos Text ExtraBold'), local('GolosText-ExtraBold'),
        url('../fonts/Golos_Text/static/Golos-Text_Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- SangBleu Sunrise (display serif, used for hero / accents) --- */
@font-face {
    font-family: 'SangBleu Sunrise';
    src: local('SangBleu Sunrise Medium'),
        url('../fonts/SangBleu/sangbleusunrise-medium.woff2') format('woff2'),
        url('../fonts/SangBleu/sangbleusunrise-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SangBleu Sunrise';
    src: local('SangBleu Sunrise Medium Italic'),
        url('../fonts/SangBleu/sangbleusunrise-mediumitalic.woff2') format('woff2'),
        url('../fonts/SangBleu/sangbleusunrise-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


/* ---------- 3. CSS custom properties (palette) --------------------------- */
/* Palette extracted from Figma spec (mcp-figma-get_figma_data-1777109520340.txt).
   ~33 distinct fill/stroke values total: solid hex tokens + alpha overlays. */
:root {
    /* --- Backgrounds (dark base) --- */
    --bg-primary: #272727;
    /* primary page bg, "container-wrapper" base */
    --bg-secondary: #2F2F2F;
    /* lifted card / sub-section bg */
    --bg-deep: #231F20;
    /* deepest near-black, footer / dark band */
    --bg-pure-black: #000000;
    /* shadows / overlays */

    /* --- Foregrounds (light text) --- */
    --text-primary: #FBFBFB;
    /* main body text on dark bg */
    --text-white: #FFFFFF;
    /* pure white headlines / icons */
    --text-soft: #F2F2F2;
    /* slightly off-white secondary text */
    --text-cream: #F5F3F1;
    /* cream paragraph / quote text */
    --text-light-gray: #DCDCDC;
    /* tertiary text, captions */

    /* --- Accent: Lime / Brand green --- */
    --accent-lime: #C3F050;
    /* brand lime — primary CTA, accent */
    --accent-lime-alt: #C3F150;
    /* lime variant (1px diff, near-dup from spec) */
    --accent-lime-deep: #C2F04F;
    /* lime as rgba(194,240,79) source */

    /* --- Accent: Purple / Violet --- */
    --color-purple: #AA6EFF;
    /* canonical light purple — fundraisers */
    --accent-purple: #7339C4;
    /* deep purple stroke / fill */
    --accent-purple-lt: var(--color-purple);
    /* alias → --color-purple */
    --stroke-purple: #7339C4;
    /* alias: purple used as outline */

    /* --- Accent: Orange --- */
    --color-orange: #FF6E32;
    /* canonical orange — employers */
    --accent-orange: var(--color-orange);
    /* alias → --color-orange */
    --accent-orange-lt: #FF8C32;
    /* lighter orange tint */
    --stroke-orange: var(--color-orange);
    /* alias → --color-orange */

    /* --- Accent: Yellow --- */
    --accent-yellow: #FFDD2D;
    /* yellow accent / highlight pill */

    /* --- Accent: Pink / Magenta --- */
    --accent-pink: #F159B6;
    /* magenta accent */

    /* --- Accent: Red --- */
    --accent-red: #A90003;
    /* deep red, error / warning emphasis */

    /* --- Accent: Blue (polygon / chart) --- */
    --polygon-blue: #235AFF;
    /* polygon / chart blue */
    --polygon-blue-2: #325EFF;
    /* polygon blue variant */
    --polygon-blue-deep: #1431F0;
    /* deepest polygon blue */

    /* --- Card / surface neutrals --- */
    --card-bg: #EDECEA;
    /* light card surface */
    --card-bg-cream: #E5DFDF;
    /* cream card variant */
    --surface-light: #F5F3F1;
    /* light section surface (cream) */

    /* --- Neutral grays --- */
    --gray-979797: #979797;
    /* mid neutral gray */
    --gray-d9: #D9D9D9;
    /* light divider gray */
    --gray-333: #333333;
    /* dark neutral, near-text on dark */

    /* --- Alpha / transparent overlays --- */
    --text-muted-50: rgba(255, 255, 255, 0.5);
    /* secondary text on dark */
    --text-muted-40: rgba(255, 255, 255, 0.4);
    /* tertiary text on dark */
    --text-muted-10: rgba(255, 255, 255, 0.1);
    /* divider / subtle bg */
    --overlay-black-25: rgba(0, 0, 0, 0.25);
    /* shadow overlay */
    --overlay-gray-25: rgba(202, 202, 202, 0.25);
    /* light translucent fill */
    --overlay-7e-70: rgba(126, 126, 126, 0.7);
    /* mid translucent gray */
    --overlay-cream-85: rgba(229, 223, 223, 0.85);
    /* cream over dark */
    --overlay-edecea-80: rgba(237, 236, 234, 0.8);
    /* card surface, translucent */
    --overlay-d9-0: rgba(217, 217, 217, 0);
    /* gradient stop, transparent */
    --overlay-2f-0: rgba(47, 47, 47, 0);
    /* gradient stop, transparent */

    /* --- Solid rgba tokens that aren't otherwise listed as hex --- */
    --c-a3a3a3: rgb(163, 163, 163);
    /* solid mid gray, rgba(163,163,163,1) */
    --c-31332b: rgb(49, 51, 43);
    /* deep olive-black, rgba(49,51,43,1) */
    --c-607137: rgb(96, 113, 55);
    /* dark olive accent, rgba(96,113,55,1) */
    --c-637537: rgb(99, 117, 55);
    /* dark olive variant, rgba(99,117,55,1) */

    /* --- Layout tokens (used by primitives + later phases) --- */
    --layout-width: 100%;
    /* Figma desktop frame width */
}


/* ---------- 4. Layout primitives ----------------------------------------- */
body {
    background: var(--bg-primary);
    /* #272727 */
    color: var(--text-primary);
    /* #FBFBFB */
    font-family: 'Golos Text', 'Golos', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Phase 0 reset removed — `.container` now uses the centralized
   `max-width: 1440px; padding: 0 100px` rule near the top of this file
   (single source of truth for the section gutter). The hero's container
   is still kept full-bleed via a more specific rule below. */


/* ---------- 5. Utility classes ------------------------------------------- */
.text-white {
    color: var(--text-white);
}

.text-muted-50 {
    color: rgba(255, 255, 255, 0.5);
}

.lime {
    color: #C3F050;
}

.section {
    position: relative;
    width: 100%;
}


/* ==========================================================================
   Phase 1 — Top navbar (Figma 219:227)
   ==========================================================================
   Container: 1440 x 58, bg #2F2F2F. 5 link items absolutely positioned at
   exact Figma x-coordinates (y = 21.19px for the text top). Active "Тема"
   has a 46.65px lime underline at y=44.5. "События" has a 10x10 chevron at
   x=1125.13, y=27.27 relative to the navbar container.

   Figma child node ids under 219:227:
     I219:227;28:507  -> "Тема"            x=105.99   white,  active
     I219:227;142:2639 -> lime underline   x=102.63 y=44.5 w=46.65 (#C3F050)
     I219:227;28:508  -> "Исследование"   x=229.99   rgba 0.5
     I219:227;170:3889 -> divider line    x=359.06 y=32.24 w=57.33 (#979797)  [out of Phase 1 scope]
     I219:227;28:504  -> "Опыт"           x=429.99   rgba 0.5
     I219:227;28:505  -> "События"        x=1041.99  rgba 0.5
     I219:227;252:1684 -> chevron          x=1125.13 y=27.27 9.92x9.92  (rgba 0.5 stroke)
     I219:227;28:506  -> "Об организаторах" x=1195.99  white
   ========================================================================== */

/* Reset the parent <header>/.container so the absolute-positioned navbar
   sits at the top-left of the 1440 frame, matching Figma 1:1.            */
header {
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--bg-secondary);
}

/* Override main.css's flexbox layout so absolute positioning works.      */
.topnav.header_inside {
    display: block;
    gap: 0;
}

.topnav {
    position: relative;
    width: 100%;
    height: 58px;
    background: var(--bg-secondary);
    /* #2F2F2F */
}

/* Each link is absolutely positioned at its exact Figma x.
   y = 21.19px from the top of the navbar.                                */
.topnav .topnav__link {
    position: absolute;
    top: 21.19px;
    height: 19px;
    line-height: 1;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    padding: 0;
    color: var(--text-white);
}

/* Launch state: every nav item is fully active (no 50% dim). The
   `--active` modifier adds a lime underline via ::after below. */
.topnav .topnav__link.header_inside-item {
    color: var(--text-white) !important;
}

/* Keep the disabled hook available for any future placeholders. */
.topnav .topnav__link.header_inside-item-disabled {
    color: var(--text-muted-50) !important;
}

/* Exact x-positions from Figma layout dump.                              */
.topnav .topnav__link--tema {
    left: 105.99px;
    width: 39px;
}

.topnav .topnav__link--issledovanie {
    left: 229.99px;
    width: 115px;
}

.topnav .topnav__link--opyt {
    left: 429.99px;
    width: 42px;
}

/* Short HR between "Исследование" and "Опыт" — matches maket from Figma. */
.topnav .topnav__hr {
    position: absolute;
    left: 360px;
    top: 28.5px;
    width: 57px;
    height: 1px;
    background: #FFFFFF;
    opacity: 0.5;
}

.topnav .topnav__link--sobytiya {
    left: 1041.99px;
    width: 93.06px;
    /* 1135.05 - 1041.99 covers text + chevron */
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.topnav .topnav__link--about {
    left: 1195.99px;
    width: 144px;
}

/* "Тема" lime underline. Figma rect: x=102.63 y=44.5 w=46.65 strokeWeight=0.816.
   Anchor relative to .topnav__link--tema (left:105.99): underline starts at
   102.63 - 105.99 = -3.36px, top = 44.5 - 21.19 = 23.31px below text top.   */
.topnav .topnav__link--active::after {
    content: "";
    position: absolute;
    left: -3.36px;
    top: 23.31px;
    width: 46.65px;
    height: 0.82px;
    background: var(--accent-lime);
    /* #C3F050 */
    pointer-events: none;
}

/* "События" plus icon. Figma vector node I219:227;252:1684:
   x=1125.13 y=27.27 size=9.92x9.92 stroke=rgba(255,255,255,0.5) sw=0.816px.
   It's a plus sign (two crossed strokes), NOT a chevron — confirmed by the
   Phase 1 screenshot. Inside the link (left=1041.99 top=21.19) the icon
   offset is (83.14, 6.08).                                                  */
.topnav .topnav__link--sobytiya .topnav__label {
    display: inline-block;
}

.topnav .topnav__link--sobytiya .topnav__plus {
    position: absolute;
    left: 83.14px;
    /* 1125.13 - 1041.99 */
    top: 6.08px;
    /* 27.27 - 21.19 */
    width: 9.92px;
    height: 9.92px;
    color: var(--text-white);
    /* stroke=currentColor */
    display: block;
}

/* When the events popup is open, hide the vertical line of the "+"
   icon so it reads as a "—" dash (matches Figma reference). */
.topnav.topnav--events-open .topnav__link--sobytiya .topnav__plus-v {
    display: none;
}

/* --- Events dropdown popup --------------------------------------------- */
.topnav .topnav__events-popup {
    position: absolute;
    left: 1041.99px;
    /* aligns with .topnav__link--sobytiya */
    top: 48px;
    /* just below the 58px navbar */
    width: 380px;
    padding: 28px 28px 32px;
    box-sizing: border-box;
    border-radius: 16px;
    background: rgba(40, 40, 40, 0.55);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    gap: 28px;
    z-index: 100;
}

.topnav.topnav--events-open .topnav__events-popup {
    display: flex;
}

.topnav .topnav__events-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: #FFFFFF;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.topnav .topnav__events-item:hover,
.topnav .topnav__events-item:focus-visible {
    opacity: 1;
    outline: none;
}

.topnav .topnav__events-date {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65);
}

.topnav .topnav__events-title {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

/* --- Burger-menu events dropdown (mobile equivalent of topnav popup) ---- */
.burger-menu .burger-menu__events-popup {
    display: none;
    flex-direction: column;
    gap: 24px;
    margin: 12px 0 0;
    padding: 24px;
    border-radius: 16px;
    background: rgba(40, 40, 40, 0.55);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.burger-menu .burger-menu__events-popup.is-open {
    display: flex;
}

.burger-menu .burger-menu__events-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: #FFFFFF;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.burger-menu .burger-menu__events-item:hover,
.burger-menu .burger-menu__events-item:focus-visible {
    opacity: 1;
    outline: none;
}

.burger-menu .burger-menu__events-date {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65);
}

.burger-menu .burger-menu__events-title {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

/* Rotate the "+" icon to "×" while the burger events popup is open as a
   visual cue that tapping again will close it. */
.burger-menu .burger-menu__events-toggle img {
    transition: transform 0.18s ease;
}

.burger-menu .burger-menu__events-toggle[aria-expanded="true"] img {
    transform: rotate(45deg);
}

/* --- Burger trigger: hidden on desktop, fixed top-left when shown.
       ≤650px: all mobile pages (main.css hides <header>).
       ≤770px: art pages 4–6 (header hidden earlier there).
       common.js listens for clicks and opens .burger-menu. --- */
body>.header-burger__icon {
    display: none;
}

@media (max-width: 770px) {
    body>.header-burger__icon {
        position: fixed;
        left: max(0px, env(safe-area-inset-left, 0px));
        top: max(0px, env(safe-area-inset-top, 0px));
        width: 44px;
        height: 44px;
        padding: 12px;
        margin: 0;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: #FFFFFF;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        z-index: 1100;
        /* above page content; below open .burger-menu panel (500) */
    }

    body.art-page--4>.header-burger__icon,
    body.art-page--5>.header-burger__icon,
    body.art-page--6>.header-burger__icon,
    body.article-7-page>.header-burger__icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body>.header-burger__icon .header-burger__icon-burger {
        display: block;
        width: 20px;
        height: 17px;
        pointer-events: none;
    }

    body>.header-burger__icon .header-burger__icon-close {
        display: none;
        width: 22px;
        height: 22px;
        pointer-events: none;
    }

    body.burger-menu-open>.header-burger__icon .header-burger__icon-burger {
        display: none;
    }

    body.burger-menu-open>.header-burger__icon .header-burger__icon-close {
        display: block;
    }

    /* Close only via header toggle — hide duplicate × inside the panel */
    .burger-menu .burger-menu__close {
        display: none;
    }

    /* Trim the original 75px top padding so menu items don't sit too low
       now that the close icon is absolutely positioned. */
    .burger-menu {
        padding-top: 60px;
    }
}

@media (max-width: 650px) {
    body>.header-burger__icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Phase 2 — Hero section (Figma 219:149 Main_web, hero band y=58..1065.33)
   ==========================================================================
   ARCHITECTURE
   ------------
   .hero is a centered flex container. Inside it lives .hero__canvas — a
   FIXED 1440 x 1007.33 stage that holds every absolutely-positioned hero
   child at its exact Figma coordinate (frame y minus 58 navbar offset).
   The .hero section spans 100% viewport width; the canvas stays a fixed
   1440 pixel block centered horizontally via display:flex; justify-content:
   center. This decouples internal Figma coordinates from viewport width:
   at any viewport >= 1440 the canvas is centered, gutters are flat
   #272727, and decorative SVGs that bleed past the canvas edges are
   clipped by .hero { overflow: hidden }.

   FIGMA COORDINATES (frame -> hero-canvas: subtract 58 from y)
   ------------------------------------------------------------
   Hero canvas:                      1440 x 1007.33   (frame y 58..1065.33)
   bg_oval        (219:165, intrinsic 972x891)
       frame  x -455.92  y   -0.41  w 1731.37  h 1654.58  blur 23.13
       canvas x -455.92  y  -58.41
   bg_triangle_up (219:178, intrinsic 1054x631)
       frame  x -271.04  y  -85.39  w 1263.48  h  895.69  blur 25.31
       canvas x -271.04  y -143.39
   bg_arc         (219:207, intrinsic 1291x1184)
       frame  x  -88.66  y -1146.57 w 2300.61  h 2198.57  blur 30.73
       canvas x  -88.66  y -1204.57
   bg_triangle_dn (219:220, intrinsic 679x547)
       frame  x   31.92  y  104.12  w 1033.51  h  878.32  blur 13.48
       canvas x   31.92  y   46.12
   brand group (219:192)
       frame  x  562     y  110     w  316.92  h   18.21
       canvas x  562     y   52
       . word "Спецпроект" (219:206): local x=0  y=0.21  w=107  h=18
         font Golos 500 18.4 lh100% ls-2% CENTER fill #FFF
       . logo (219:194):              local x=126.14  y=0  w=190.79 h=18.21
   caption group (219:185)
       frame  x  419.42  y  353.17  w  925.61  h  267.38
       canvas x  419.42  y  295.17
       . line 1 "Исследование"     local x=203.61 y=  0    w=722 h=106
         Golos 500 106.93 lh99% ls-4% CENTER fill #FFF
       . line 2 "фандрайзеров"     local x=  0    y= 88.56 w=728 h= 96
         Golos 500 106.93 lh90% ls-4% LEFT   fill #FFF
       . line 3 "и их нанимателей" local x= 32.7  y=171.38 w=878 h= 96
         Golos 500 106.93 lh90% ls-4% LEFT   fill #FFF
   toggle wrapper (219:228)
       frame  x  472.44  y  631.72  w  496.12  h  115.95
       canvas x  472.44  y  573.72
       . bar rect (219:234):        local x=  0    y=  0    w=496.12 h=52.78
         border-radius 61.23  stroke #FFF 1px
       . active pill (219:235):     local x=167.96 y=  4.11 w=160.2  h=43.74
         border-radius 849.54  fill #FFF
       . left btn (219:230):        local x= 28.16 y= 10.91 w=114    h=30
         text "для\nфандрайзеров"  Golos Text VF 500 16.89 lh90% ls-5% LEFT #FFF
       . right btn (219:232):       local x=360.23 y= 10.91 w=102    h=30
         text "для\nнанимателей"   Golos Text VF 500 16.89 lh90% ls-5% LEFT #FFF
       . center text (219:241):     local x=214.55 y= 18.66 w=67     h=15
         text "для всех"           Golos Text VF 500 16.89 lh90% ls-5% CENTER #272727
       . descriptor (219:242):      local x= 36.56 y= 81.95 w=423    h=34
         Golos 500 14 lh120% ls-2% CENTER fill #FFF
   ========================================================================== */

/* Neutralize main.css legacy padding/gradient on the hero's outer wrapper
   so the hero sits on flat #272727 flush against the navbar.               */
.container-wrapper:nth-of-type(1) {
    padding-top: 0;
    background: var(--bg-primary);
    /* #272727 */
}

.container-wrapper:nth-of-type(1)>.container-custom {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

/* The .container-custom > .container chain that wraps the hero is set to
   stretch full-width here so the centered .hero can take over. The other
   containers later in the page are unaffected (this rule only targets
   the wrapper that hosts .hero).                                            */
.container-wrapper:nth-of-type(1)>.container-custom>.container {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* ---------- HERO SECTION (full-bleed) + 1440 CANVAS ---------------------- */
.hero {
    position: relative;
    width: 100%;
    background: var(--bg-primary);
    /* flat #272727        */
    display: flex;
    justify-content: center;
    /* centers .hero__canvas */
    overflow-x: clip;
    /* clip horizontal only */
    overflow-y: visible;
    /* let SVGs flow into Section 1 */
    margin-top: 58px;
    /* gap below navbar     */
}

.hero__canvas {
    position: relative;
    width: 1440px;
    /* fixed Figma stage    */
    height: 900px;
    /* 1065.33 - 58 navbar  */
    flex-shrink: 0;
}

/* ---------- DECORATIVE SVGs (inlined <svg>, explicit fixed sizes) -------- */
/* The four .hero__bg SVGs ship as <img src="*.svg"> on purpose.           */
/* Inlining them as live <svg> blew up mobile Chrome ("couldn't render"):  */
/* together they hold ~36 paths, each with its own feGaussianBlur filter   */
/* AND mix-blend-mode: plus-lighter; with will-change: transform on each   */
/* the engine tries to allocate four separate GPU layers rasterised at the */
/* full DPR display resolution (the arc layer alone is ~3870×3550 px on    */
/* a 3x phone), which exhausts mobile GPU memory.                           */
/* As <img> the browser rasterises each SVG once into an intrinsic-size    */
/* bitmap that the GPU can hold cheaply. To compensate for the bilinear-   */
/* upscale blur on hi-DPR phones, each source SVG declares 2× intrinsic    */
/* width/height (viewBox unchanged), so the cached raster has 4× the pixel */
/* density. The displayed size is still controlled here in CSS, so this    */
/* trick is purely a quality boost — strokes stay the same visual width.   */
.hero__bg {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    max-width: none;
    /* defeat img reset     */
    overflow: visible;
    /* outer feGaussianBlur */
    opacity: 0.6;
    /* match master subtlety */
}

/* SVG intrinsic width/height attributes are present on each <svg> tag,    */
/* so explicit CSS sizes are redundant but kept for clarity / fallback.     */
/* DO NOT add a CSS filter: blur — the soft glow is baked into the SVG.    */
/* Position formula: center the SVG on the spec blur-bbox center, then      */
/* subtract 58px for the navbar above the hero canvas.                      */
/* Z-index ordering:                                                        */
/*   triangle-up   1  (BELOW caption — text covers shape)                   */
/*   oval          1  (BELOW caption — text covers shape)                   */
/*   triangle-down 2  (BELOW caption — text covers shape)                   */
/*   caption       5                                                          */
/*   arc           8  (ABOVE caption — its curve sweeps in front of letters) */

.hero__bg--oval {
    /* spec blur-bbox: x=-455.92 y=-0.41 1731.37x1654.58 ; svg 972x891      */
    left: -76.24px;
    top: 323.38px;
    width: 972px;
    height: 891px;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 77%,
            rgba(0, 0, 0, 0.25) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 77%,
            rgba(0, 0, 0, 0.25) 100%);
}

.hero__bg--triangle-up {
    /* spec blur-bbox: x=-271.04 y=-85.39 1263.48x895.69 ; svg 1054x631     */
    /* left = -271.04 + (1263.48-1054)/2 = -166.30                          */
    /* top  = (-85.39 + (895.69-631)/2) - 58 = -10.05                       */
    left: -166.30px;
    top: -10.05px;
    width: 1054px;
    height: 631px;
    z-index: 1;
}

.hero__bg--arc {
    /* spec blur-bbox: x=-88.66 y=-1146.57 2300.61x2198.57 ; svg 1291x1184  */
    /* left = -88.66 + (2300.61-1291)/2 = 416.145                           */
    /* top  = (-1146.57 + (2198.57-1184)/2) - 58 = -697.285                 */
    left: 416.15px;
    top: -697.29px;
    width: 1291px;
    height: 1184px;
    z-index: 8;
    /* arc above tri-down   */
}

.hero__bg--triangle-down {
    /* spec blur-bbox: x=31.92 y=104.12 1033.51x878.32 ; svg 679x547        */
    /* left = 31.92 + (1033.51-679)/2 = 209.175                             */
    /* top  = (104.12 + (878.32-547)/2) - 58 = 211.78                       */
    left: 209.18px;
    top: 211.78px;
    width: 679px;
    height: 547px;
    z-index: 2;
}

/* ---------- BRAND ROW: "Спецпроект СРЕДА_СВОИХ" -------------------------- */
.hero__brand {
    position: absolute;
    left: 562px;
    top: 52px;
    width: 316.92px;
    height: 18.21px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19.14px;
    /* 126.14 - 107         */
    z-index: 5;
}

.hero__brand-word {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 18.4px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-white);
    white-space: nowrap;
    text-transform: lowercase;
    /* matches Figma render */
}

.hero__brand-logo {
    width: 190.79px;
    height: 18.21px;
    display: block;
    flex-shrink: 0;
}

/* ---------- 3-LINE CAPTION ------------------------------------------------ */
/* Each line is absolutely positioned at its exact Figma local (x, y) inside
   the 925.61 x 267.38 caption box. This guarantees the caption block
   matches the spec height exactly (267.38px) — line-height-driven flow
   would produce ~298px and overlap the toggle below.                       */
.hero__caption {
    position: absolute;
    left: 419.42px;
    top: 295.17px;
    width: 925.61px;
    height: 267.38px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 106.93px;
    letter-spacing: -0.04em;
    color: var(--text-white);
    z-index: 5;
}

.hero__caption-line {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.hero__caption-line--1 {
    left: 203.61px;
    top: 0;
    width: 722px;
    height: 106px;
    line-height: 99%;
    text-align: center;
}

.hero__caption-line--2 {
    left: 0;
    top: 88.56px;
    width: 728px;
    height: 96px;
    line-height: 90%;
    text-align: left;
}

/* "и их" — right-anchored so it sits IMMEDIATELY before "нанимателей"
   on the same visual row. Previously was width:878 + text-align:center,
   which centered the text inside the full caption width and visually
   overlapped the middle of "нанимателей". The trailing &nbsp; in the
   markup (+ font tracking) provides the visual gap. The right offset
   is sized to "нанимателей" at the desktop font (≈673 px). */
.hero__caption-line--3 {
    left: auto;
    right: 673px;
    top: 171.38px;
    width: auto;
    height: 96px;
    line-height: 90%;
    text-align: right;
    white-space: nowrap;
}

/* "нанимателей" — same visual row, right-anchored to the caption edge.
   The leading &nbsp; in the markup keeps a hair of space at the join. */
.hero__caption-line--4 {
    left: auto;
    right: 0;
    top: 171.38px;
    width: auto;
    height: 96px;
    line-height: 90%;
}

/* ---------- SEGMENTED TOGGLE + DESCRIPTOR -------------------------------- */
/* Outer wrapper holds the bar (52.78 tall) and the descriptor caption that
   sits below it (the full Figma group is 115.95 tall to include the
   descriptor). The wrapper itself is transparent and only positions
   children — the visible 1px stroke pill is .hero__toggle-bar.             */
.hero__toggle {
    position: absolute;
    left: 472.44px;
    top: 573.72px;
    width: 497px;
    /* per Figma SVG 497×53 */
    height: 115.95px;
    z-index: 5;
}

.hero__toggle-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 497px;
    /* per Figma SVG 497×53 */
    height: 53px;
    border: 1px solid var(--text-white);
    border-radius: 61.23px;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

/* Active pill (white capsule behind "для всех" text). Per Figma SVG:
   x=167.961 y=4.10938 w=156.742 h=43.7422 rx=21.8711.                     */
.hero__toggle-pill {
    position: absolute;
    left: 167.961px;
    top: 4.10938px;
    width: 156.742px;
    height: 43.7422px;
    border-radius: 21.8711px;
    background: var(--text-white);
    pointer-events: none;
    z-index: 2;
}

.hero__toggle-segment {
    position: absolute;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font-family: 'Golos Text VF', 'Golos', sans-serif;
    font-weight: 500;
    font-size: 16.89px;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--text-white);
    text-align: left;
    cursor: pointer;
    z-index: 3;
    /* above pill           */
}

.hero__toggle-segment--left {
    left: 20.16px;
    top: 10.91px;
    width: 146px;
    height: 30px;
}

.hero__toggle-segment--right {
    left: 360.23px;
    top: 10.91px;
    width: 117px;
    height: 30px;
}

/* "для всех" sits inside the pill: pill-local (46.59, 14.55) ->
   toggle-local (214.55, 18.66), w=67 h=15. Center fill is dark #272727.    */
.hero__toggle-segment--center {
    left: 214.55px;
    top: 18.66px;
    width: 67px;
    height: 15px;
    text-align: center;
    line-height: 0.9;
    color: var(--bg-primary);
    /* #272727              */
}

/* Descriptor caption beneath the pill bar.                                  */
.hero__toggle-descriptor {
    position: absolute;
    left: 36.56px;
    top: 81.95px;
    width: 423px;
    height: 34px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-white);
    text-align: center;
}

/* ---------- HERO STATE REACTIVITY (data-state on .hero) ------------------ */
/* Three states: "fundraisers" | "both" (default) | "employers".
   - "fundraisers": dim line "фандрайзеров" + the "и их" prefix in line 3,
     leaving "Исследование … нанимателей" white. Figures rotate -45°.
     Active pill colored #AA6EFF (purple) under the left segment.
   - "employers": dim line 3 ("и их нанимателей"). Figures rotate +45°.
     Active pill colored #FF6E32 (orange) under the right segment.
   - "both": all three caption lines white, no rotation, white pill on the
     center segment, descriptor hidden.                                       */

.hero__caption-line,
.hero__caption-prefix {
    transition: opacity 0.3s ease;
}

.hero__bg {
    transition: transform 0.45s ease;
    transform-origin: center center;
    /* Force a dedicated GPU layer so the ±45° rotation animates smoothly on
       mobile (iOS Safari / Android Chrome). Without these hints the SVGs —
       large, with baked-in feGaussianBlur and, for the oval, a mask-image —
       get rasterised on the CPU each frame and the rotation stutters.
       translateZ(0) is set in the default and rotated states so the layer
       exists at page load, not lazily on first toggle.                       */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero[data-state="fundraisers"] .hero__caption-line--2,
.hero[data-state="fundraisers"] .hero__caption-prefix {
    opacity: 0.1;
}

.hero[data-state="employers"] .hero__caption-line--3 {
    opacity: 0.1;
}

.hero[data-state="fundraisers"] .hero__bg {
    transform: rotate(-45deg) translateZ(0);
}

.hero[data-state="employers"] .hero__bg {
    transform: rotate(45deg) translateZ(0);
}

/* White pill (center) only renders in "both"; otherwise it fades. */
.hero__toggle-pill {
    transition: opacity 0.18s ease;
}

.hero:not([data-state="both"]) .hero__toggle-pill {
    opacity: 0;
}

/* Center label is dark on white pill in "both" but inverts to white when the
   pill is hidden so it stays legible against the bar background.            */
.hero__toggle-segment--center {
    transition: color 0.18s ease;
}

.hero:not([data-state="both"]) .hero__toggle-segment--center {
    color: var(--text-white);
}

/* Active pill on left/right segments rendered via ::before. CSS 2.1 paints a
   positioned ::before (z-auto) AFTER the element's inline text, which would
   hide the white label behind the colored fill — so push it to z-index: -1
   inside the segment's stacking context (segment is z-3 itself, so the pill
   still sits above the bar/center pill). Negative inset bleeds the pill past
   the segment bbox to match the Figma proportions of the white center pill. */
.hero__toggle-segment::before {
    content: '';
    position: absolute;
    inset: -7px -16px;
    border-radius: 887.98px;
    background: transparent;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.18s ease, background-color 0.18s ease;
    pointer-events: none;
}

.hero[data-state="fundraisers"] .hero__toggle-segment--left::before {
    background: var(--color-purple);
    /* #AA6EFF */
    opacity: 1;
}

.hero[data-state="employers"] .hero__toggle-segment--right::before {
    background: var(--color-orange);
    /* #FF6E32 */
    opacity: 1;
}

/* When one segment is selected, dim the others. JS sets aria-selected on
   the active segment and "false" on the rest, so we just key off that —
   works for all three states (including the default "both" where the
   centre is selected and the two sides dim). */
.hero__toggle-segment {
    transition: opacity 0.2s ease;
}

.hero__toggle-segment[aria-selected="false"] {
    opacity: 0.55;
}

/* Descriptor: per-state copy. Both variants share .hero__toggle-descriptor
   layout (already absolute-positioned); only one is visible at a time, and
   neither shows in "both" state.                                             */
.hero__toggle-descriptor {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hero[data-state="fundraisers"] .hero__toggle-descriptor[data-for="fundraisers"],
.hero[data-state="employers"] .hero__toggle-descriptor[data-for="employers"] {
    opacity: 1;
}


/* ==========================================================================
   HERO — MOBILE (≤770px)
   ==========================================================================
   Strategy: keep the 1440 × 1007.33 canvas AND every figure at its exact
   desktop coordinate — the four decorative SVGs (oval, triangle-up, arc,
   triangle-down) wrap around the hero from outside the visible viewport
   exactly as in Figma; the mobile <section> is just a 360-wide window that
   clips the canvas. Only the foreground content (brand, caption, toggle,
   descriptor) gets mobile-specific positions, anchored to canvas-mid
   (left:50%) so they sit at viewport center while the canvas is centered
   horizontally inside .hero via the existing flex centering.                */
@media (max-width: 770px) {
    .hero {
        margin-top: 0;
        overflow: hidden;
        /* clip the off-canvas SVGs horizontally */
    }

    /* Canvas keeps the desktop 1440 × 1007.33 stage on mobile so every
       decorative SVG (oval / arc / triangle-up / triangle-down) renders
       at its full natural size without clipping. State rotations (±45°)
       continue to work as-is. */

    /* Mobile figure rebalance — match the Figma mobile reference:
       canvas centered in 540-ish viewport so visible canvas-x is roughly
       [450, 990]. Each figure repositioned so its visible portion through
       that 540-wide window matches the screenshot.                           */
    .hero__bg--triangle-up {
        /* Apex sits slightly left of viewport center (canvas-x ≈ 650).
           bbox 1054 wide → left = 650 − 527 = 123. Lifted top edge so apex
           reads just below the brand row.                                    */
        left: 123px;
        /* was -166.30 */
        top: 60px;
        /* was -10.05 */
    }

    .hero__bg--triangle-down {
        left: 330px;
        /* was 209.18 desktop / 461 mobile */
        top: 260px;
        /* was 211.78 */
    }

    .hero__bg--oval {
        left: 340px;
        top: 470px;
        width: 480px;
        height: 440px;
    }

    .hero__bg--arc {
        /* Scaled to 80 % AND shifted left so its sweep enters the viewport
           from the upper portion rather than only the right edge.            */
        left: 540px;
        /* was 800 */
        top: -460px;
        /* was -697.29 */
        width: 1033px;
        /* was 1291 (×0.8) */
        height: 947px;
        /* was 1184 (×0.8) */
    }

    /* Brand "Спецпроект СРЕДА_СВОИХ" — top of mobile column */
    .hero__brand {
        left: 50%;
        top: 80px;
        width: auto;
        height: auto;
        transform: translateX(-50%);
    }

    /* Caption — three lines flow vertically, centered horizontally */
    .hero__caption {
        left: 50%;
        top: 280px;
        width: 90vw;
        max-width: 340px;
        height: auto;
        font-size: 44px;
        line-height: 1;
        text-align: center;
        transform: translateX(-50%);
    }

    .hero__caption-line {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        height: auto;
        display: block;
        white-space: normal;
    }

    /* Per-line text-align preserved on mobile: line 1 центр, line 2 лево,
       line 3 право (наследует с десктопа), line 4 центр. Без глобального
       override — каждая строка использует своё desktop-выравнивание. */
    .hero__caption-line--4 {
        text-align: center;
    }

    /* Toggle — bar shrinks to viewport width, pill/segments use % so they
       track the now-flexible bar width (was absolute px inside the 496.12
       desktop bar). Top anchored 130px below the bottom of .hero__caption
       (which sits at y=280 and is ~132px tall: 3 lines × 44 line-height). */
    .hero__toggle {
        left: 50%;
        top: 542px;
        /* 280 caption-top + 132 caption-h + 130 gap */
        width: 90vw;
        max-width: 360px;
        height: auto;
        min-height: 132px;
        transform: translateX(-50%);
    }

    .hero__toggle-bar {
        width: 100%;
        height: 37px;
        /* shrunk from 53 desktop */
    }

    .hero__toggle-segment {
        font-size: 12px;
        /* was 16.89 desktop */
    }

    /* Highlight pill is sized to fit comfortably inside the 37px bar with
       breathing room on top/bottom — 27px tall with 5px margin each side. */
    .hero__toggle-pill {
        left: 33.85%;
        /* 167.96 / 496.12 */
        top: 5px;
        width: 32.29%;
        /* 160.2  / 496.12 */
        height: 27px;
    }

    .hero__toggle-segment--left {
        left: 5.68%;
        /* 28.16  / 496.12 */
        top: 7.5px;
        width: 22.98%;
        /* 114    / 496.12 */
        height: 22px;
    }

    .hero__toggle-segment--center {
        left: 43.25%;
        /* 214.55 / 496.12 */
        top: 12.5px;
        width: 13.5%;
        /* 67     / 496.12 */
        height: 12px;
    }

    .hero__toggle-segment--right {
        left: 72.61%;
        top: 7.5px;
        width: 21.56%;
        height: 22px;
    }

    /* Coloured state pill (rendered via ::before on left/right segments)
       was inset -7px vertically on desktop — too tall for the 37 bar. Shrink
       so it matches the white centre pill (27px) and stays inside the bar. */
    .hero__toggle-segment::before {
        inset: -2.5px -16px;
    }

    /* Descriptor below the bar */
    .hero__toggle-descriptor {
        left: 0;
        top: 72px;
        width: 100%;
        height: auto;
        margin: 0;
        font-size: 12px;
        line-height: 1.25;
    }
}


/* ==========================================================================
   Phase 3 — SECTION 1 (Research / Experience), Figma node 219:287
   ==========================================================================
   Frame placement:
     219:287 Group 2136137262     locationRelativeToParent x=100.42, y=1065.33
                                  dimensions 1329.02 x 996.42
   The section sits in the second .container-wrapper, immediately below the
   hero. Its canvas is 1329 x 996 (per spec) and is offset 100.42px from the
   left of the 100% container — i.e. centered with the same gutter the
   spec uses.

   Section-relative coordinate map (subtract 100.42 / 1065.33 from each
   child's frame xy):

     node      class                     x         y       w       h
     219:288   .section1__bg-arc         510.98    320.35  818.04  676.07
     219:292   .section1__lead             0.00      0.00  782.72  252.00
     219:294   .section1__logo           925.58     27.95  124.30   45.94
     219:307   .section1__desc           924.58     27.95  325.00  108.00
     219:306   ( merged into lead — "Чтобы разобраться..." sits at section-relative
               (0.82, 324.51) but is rendered as part of the lead block; we
               handle it via .section1__lead's natural height + spacing of the
               two-column block beneath. The 30px line is part of the same
               typographic flow as the lead in the screenshot. )
     219:308   .section1__mask-left       73.88    405.61  640.00  356.07
     219:312   .section1__h-issledovanie 109.35    688.67  279.00   48.00
     219:313   .section1__callout        109.35    439.81  291.47  112.00
     219:314   ( wrapper group at 815.33, 514.67 — 389.57 x 222.36 — its two
               children below are positioned in section-relative. )
     219:315   .section1__opyt-body      815.33    514.67  389.57  168.00
     219:316   .section1__h-opyt         815.75    689.03  101.00   48.00
     219:317   .section1__divider        406.58    716.67  389.00    1.00 (opacity 0.8)

   Typography tokens (resolved from spec):
     style_F18ZK9 -> Golos / Text Medium / 500 / 30px / lh 120% / ls -2%
     style_N0NMP1 -> Golos Text / Regular / 400 / 16px / lh 110% / paragraphIndent 170
     style_SL7584 -> Golos / Text Medium / 500 / 40px / ls -2%
     style_1TM0ZF -> Inter / Semi Bold / 600 / 25px / lh 110%   (FONT FALLBACK,
                     Inter is not bundled in Project/fonts; falls back to
                     system Inter or sans-serif.)
     style_J57HPK -> Golos / Text Medium / 500 / 25px / lh 110%
     fill_NZ0D8G  -> #FBFBFB
     fill_LLV6AI  -> #FBFBFB
     fill_UUYBVX  -> #F5F3F1   (Опыт heading off-white)
   ========================================================================== */

/* Override main.css padding/gradient on the 2nd .container-wrapper so
   section 1 sits on flat #272727 with no extra spacing.                     */
.container-wrapper:nth-of-type(2) {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--bg-primary);
    /* #272727 */
}

.section1 {
    position: relative;
    width: 100%;
    background: var(--bg-primary);
    /* #272727 */
    color: var(--text-primary);
    /* #FBFBFB */
}

/* Fixed-size canvas matches the Figma frame (1329 x 996). The 100px
   horizontal gutter that used to live here as `margin-left: 100.42px`
   now comes from the shared `.container` padding at the top of this
   file, so this canvas anchors flush to the container's content edge. */
.section1__canvas {
    position: relative;
    width: 1329.02px;
    height: 996.42px;
}

/* --- Lead paragraph (219:292) ------------------------------------------- */
.section1__lead {
    position: absolute;
    left: 0;
    top: 0;
    width: 782.72px;
    height: 252px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    /* 120% */
    letter-spacing: -0.02em;
    /* -2%   */
    color: var(--text-white);
}

/* --- Sreda group wrapper (logo + description) -------------------------- */
/* The Figma group 219:293 places the compact logo and its description
   starting at the same (x, y). The description's `paragraphIndent: 170`
   is realised here via a left-floated logo so wrapped lines flow to the
   right of the logo on lines 1–2 and then continue full-width below the
   logo's bottom edge. Logo width 124.3 + ~46px gap = the 170 indent.    */
.section1__sreda {
    position: absolute;
    left: 924.58px;
    top: 0;
    width: 325px;
    height: 108px;
}

/* --- Sreda compact logo (219:294) — sizes: --site-logo-sreda-* ------------ */
/* Uniform gap around the floated logo so the text wraps with the same
   inset on the right of and below the logo (16px on both sides). */
.section1__logo {
    float: left;
    width: var(--site-logo-sreda-w);
    height: var(--site-logo-sreda-h);
    margin: 0 16px 0;
    display: block;
    cursor: pointer;
}

/* --- Sreda Russian description (219:307) -------------------------------- */
/* The text wraps around the floated logo: lines 1–2 sit right of the logo,
   then lines 3+ flow at the full 325px width below the logo's bottom.    */
.section1__desc {
    margin: 0;
    padding: 0;
    font-family: 'Golos Text', 'Golos', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--text-white);
    /* #FBFBFB */
}

/* --- Bridge line "Чтобы разобраться..." (219:306) ----------------------- */
/* This 30px Golos line lives at section-relative (0.82, 324.51) and was
   named "Среда своих..." in the export but its `text` field is the bridge
   sentence "Чтобы разобраться в причинах противоречия, мы".               */
.section1__bridge {
    position: absolute;
    left: 0.82px;
    top: 324.51px;
    width: 782.72px;
    height: 36px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* --- Background arc / right mask frame (219:288) ----------------------- */
/* The Figma "Mask group" 219:288 has a 818.04 x 676.07 bounding box, but
   its visible content is the inner 640 x 356.07 rectangle outline that
   sits at child-relative (89.02, 160). Section-relative absolute position
   for the inner rectangle is therefore (510.98 + 89.02, 320.35 + 160)
   = (600, 480.35). The SVG file is authored at 640 x 357 to match this
   inner rect — render at natural size to avoid distortion.               */
.section1__bg-arc {
    position: absolute;
    left: 600px;
    top: 480.35px;
    width: 640px;
    height: 356.07px;
    pointer-events: none;
    z-index: 0;
}

/* --- Left framed callout box (219:308) ---------------------------------- */
.section1__mask-left {
    position: absolute;
    left: 73.88px;
    top: 405.61px;
    width: 640px;
    height: 356.07px;
    z-index: 1;
}

/* --- Left column heading "Исследование" (219:312) ----------------------- */
.section1__h-issledovanie {
    position: absolute;
    left: 109.35px;
    top: 688.67px;
    width: 279px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-white);
    z-index: 2;
}

/* --- Left column callout body "Провели..." (219:313) -------------------- */
/* Inter is NOT bundled in Project/fonts (Phase 0 confirmed). Falls back
   to system 'Inter' if installed, otherwise generic sans-serif.            */
.section1__callout {
    position: absolute;
    left: 109.35px;
    top: 439.81px;
    width: 291.47px;
    height: 112px;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.1;
    /* 110% */
    color: var(--text-white);
    z-index: 2;
}

/* --- Right column body text (219:315) ----------------------------------- */
.section1__opyt-body {
    position: absolute;
    left: 815.33px;
    top: 514.67px;
    width: 389.57px;
    height: 168px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.1;
    /* 110% */
    color: var(--text-white);
    z-index: 2;
}

/* --- Right column heading "Опыт" (219:316) ------------------------------ */
.section1__h-opyt {
    position: absolute;
    left: 815.75px;
    top: 689.03px;
    width: 101px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #F5F3F1;
    /* fill_UUYBVX */
    z-index: 2;
}

/* --- Hover affordance for "Исследование" / "Опыт" headings ---------------
   Both headings are clickable navigation targets; a white underline appears
   on hover/focus to signal the affordance. text-underline-offset keeps the
   line visually below the descenders; text-decoration-thickness matches the
   40px Golos Medium weight without feeling heavy.                            */
/* Link wrappers contribute no box — the h2 keeps its absolute positioning
   relative to .section1__canvas and the hover affordance below stays on the h2. */
a:has(> .section1__h-issledovanie),
a:has(> .section1__h-opyt) {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.section1__h-issledovanie,
.section1__h-opyt {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.18s ease;
}

.section1__h-issledovanie:hover,
.section1__h-issledovanie:focus-visible,
.section1__h-opyt:hover,
.section1__h-opyt:focus-visible {
    text-decoration-color: var(--text-white);
}

/* --- Horizontal divider between left and right columns (219:317) -------- */
.section1__divider {
    position: absolute;
    left: 406.58px;
    top: 716.67px;
    width: 389px;
    height: 1px;
    background: var(--text-white);
    opacity: 0.8;
    display: block;
    z-index: 2;
}

/* Mobile-only composite SVG (372×414 — both boxes + shared oval). Hidden on
   desktop; .section1__boxes wrapper is transparent (display: contents) so
   its absolutely-positioned children continue to anchor to .section1__canvas
   exactly like before the wrapper existed.                                  */
.section1__boxes {
    display: contents;
}

.section1__boxes-mobile {
    display: none;
}

/* ==========================================================================
   SECTION 1 — MOBILE Phase 2 (≤770px) — lead paragraph + sreda block
   ==========================================================================
   Drop the desktop 1329 × 996 fixed canvas; flow children vertically.
   This phase covers ONLY .section1__lead + .section1__sreda (logo + desc).
   The remaining "Чтобы.../Исследование/Опыт" block is hidden here and
   re-styled as Phase 3.                                                      */
@media (max-width: 770px) {
    .section1__canvas {
        width: 100%;
        height: auto;
        padding: 32px 0 24px;
    }

    .section1__lead {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        font-size: 25px;
        line-height: 1.2;
    }

    .section1__sreda {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin-top: 56px;
    }

    .section1__logo {
        width: var(--site-logo-sreda-mobile-w);
        height: auto;
    }

    /* Logo + desc keep their desktop float-wrap relationship — it scales
       cleanly to a narrow column. Desc text dimmed per Figma reference.      */
    .section1__desc {
        opacity: 0.6;
    }

    /* Phase 3 — bridge + composite mobile SVG (372×414, two stepped boxes
       sharing one continuous oval). Desktop SVGs are hidden; the mobile SVG
       takes their place and headings/text are absolutely positioned on top
       of it using viewBox-relative percentages (so they track the SVG when
       the wrapper width scales to the viewport).                              */
    .section1__bridge {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        font-size: 25px;
        line-height: 1.2;
        margin: 56px 0 24px;
    }

    .section1__boxes {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .section1__mask-left,
    .section1__bg-arc {
        display: none;
    }

    .section1__boxes-mobile {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        margin: 0;
        z-index: 1;
        pointer-events: none;
    }

    /* Text overlays — coords as % of the 372×414 SVG so they track scaling. */
    .section1__h-issledovanie,
    .section1__h-opyt,
    .section1__callout,
    .section1__opyt-body {
        position: absolute;
        margin: 0;
        z-index: 2;
    }

    /* TOP box (rect 17,0 → 326,172). Callout near top-left, heading at
       bottom-left of the box.                                                 */
    .section1__callout {
        left: 8.6%;
        /* 32 / 372 */
        top: 6%;
        /* 25 / 414 */
        width: 64.5%;
        /* leaves room for circle */
        height: auto;
        font-size: 16px;
        line-height: 1.15;
    }

    .section1__h-issledovanie {
        left: 8.6%;
        top: 31.4%;
        /* 130 / 414 */
        width: auto;
        height: auto;
        font-size: 25px;
    }

    /* BOTTOM box (rect 43,164 → 352,335). Heading at top-left, body below. */
    .section1__h-opyt {
        left: 16.1%;
        /* 60 / 372 */
        top: 44.4%;
        /* 184 / 414 */
        width: auto;
        height: auto;
        font-size: 25px;
    }

    .section1__opyt-body {
        left: 16.1%;
        top: 53%;
        /* 240 / 414 */
        width: 72.6%;
        /* 270 / 372 */
        height: auto;
        font-size: 16px;
        line-height: 1.15;
    }

    .section1__divider {
        display: none;
    }
}

/* === Section 2 — static grid + 3 content layers crossfading on top.
   Grid stays fixed in .section2__grid; only content fades in .section2__state
   so ruled lines never stack during slider transitions. === */
.section2 .section2__stage {
    position: relative;
    width: 100%;
    margin-top: 60px;
}

.section2 .section2__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1100 / 400;
}

.section2 .section2__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.section2 .section2__grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section2 .section2__state {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.section2 .section2__state--desk.section2__state--1 {
    opacity: 1;
}

.section2 .section2__mob-state,
.section2 .section2__mob-txt {
    display: none;
}

@media (max-width: 770px) {
    .section2 .section2__stage {
        width: 100%;
        max-width: 375px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
    }

    /* Родитель сетки и текстов — ровно 511px; controls внутри, от низа 115px */
    .section2 .section2__canvas {
        position: relative;
        width: 100%;
        height: 511px;
        margin-top: 0;
        aspect-ratio: auto;
        overflow: visible;
    }

    .section2 .section2__canvas>.controls {
        position: absolute;
        top: auto;
        bottom: 115px;
        left: 22.3px;
        right: auto;
        width: 317px;
        max-width: calc(100% - 22.3px);
        margin: 0;
        padding: 0;
        transform: none;
        box-sizing: border-box;
        z-index: 3;
    }

    .section2 .section2__state--desk {
        display: none !important;
    }

    /* Сетка: 511×511 внутри .section2__canvas */
    .section2 .section2__grid {
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        mix-blend-mode: soft-light;
    }

    .section2 .section2__grid img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center top;
    }

    .section2 .section2__mob-state {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
    }

    .section2 .section2__mob-state--1 {
        opacity: 1;
    }

    .section2 .section2__mob-txt {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        pointer-events: none;
        object-fit: contain;
    }

    /* Состояние 1 — карт1 top 16 left 22; карт2 +6px */
    .section2 .section2__mob-state--1 .section2__mob-txt--frag-purple {
        top: 16px;
        left: 22px;
        width: 274.5156555175781px;
        height: 142.68838500976562px;
        object-fit: contain;
        object-position: left top;
    }

    .section2 .section2__mob-state--1 .section2__mob-txt--frag-orange {
        top: calc(16px + 142.68838500976562px + 6px);
        left: 22px;
        width: 311.597900390625px;
        height: 171.00326538085938px;
        object-fit: contain;
        object-position: left top;
    }

    /* Состояние 2: карт1 top 8; карт2 +21px */
    .section2 .section2__mob-state--2 .section2__mob-txt--s2-purple {
        top: 8px;
        left: 22px;
        width: 272.200439453125px;
        height: 124.63937377929688px;
        object-fit: contain;
        object-position: left top;
    }

    .section2 .section2__mob-state--2 .section2__mob-txt--s2-orange {
        top: calc(8px + 124.63937377929688px + 21px);
        left: 22px;
        width: 309.7842712402344px;
        height: 156.5000457763672px;
        object-fit: contain;
        object-position: left top;
    }

    /* Состояние 3: карт1 top 18; карт2 +31px */
    .section2 .section2__mob-state--3 .section2__mob-txt--s3-purple {
        top: 18px;
        left: 22px;
        width: 306.2938537597656px;
        height: 142.6818389892578px;
        object-fit: contain;
        object-position: left top;
    }

    .section2 .section2__mob-state--3 .section2__mob-txt--s3-orange {
        top: calc(18px + 142.6818389892578px + 31px);
        left: 22px;
        width: 300.101318359375px;
        height: 105px;
        object-fit: contain;
        object-position: left top;
    }
}


/* ============================================================================
   Phase 4 — Section 2 slider shortening + white pulsing affordance
   Legacy section2 markup (canvas + input[type=range]) is preserved for the
   existing animated portraits behavior. Track shortened to Figma's 603px;
   track + thumb restyled white per spec (track 603x1, thumb 35x45.55, radius
   74.02 — node 219:320 / 219:321), and a subtle opacity+glow pulse cues the
   user to drag. Animation pauses on hover/active/focus and on reduced-motion.
   ============================================================================ */
.section2 .controls {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    pointer-events: auto;
}

.section2 #slider {
    width: 603px;
    max-width: 100%;
    display: block;
    height: 45.55px;
    /* room for thumb + glow */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    opacity: 1;
    /* defeat main.css `input[type=range] { opacity: 50% }` which greyed out the whole control */
    touch-action: none;
    /* slider claims horizontal touch — blocks OS-level swipe-back / overscroll on mobile */
    overscroll-behavior: contain;
    /* Halo lives on the <input> via drop-shadow — animations on
       ::-webkit-slider-thumb are silently ignored in Chromium. drop-shadow
       follows the alpha map of the rendered control, so the glow appears
       around (behind) the white thumb without recoloring any of its pixels. */
    animation: section2-slider-glow 2.2s ease-in-out infinite;
}

.section2 #slider:active {
    animation: none;
    filter: none;
}

.section2 #slider::-webkit-slider-runnable-track {
    height: 1px;
    background: var(--text-white);
    border: 0;
    border-radius: 0;
}

.section2 #slider::-moz-range-track {
    height: 1px;
    background: var(--text-white);
    border: 0;
    border-radius: 0;
}

.section2 #slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 45.55px;
    border-radius: 74.02px;
    background: #FFFFFF;
    border: 0;
    margin-top: -22.275px;
    /* center on 1px track  */
}

.section2 #slider::-moz-range-thumb {
    width: 35px;
    height: 45.55px;
    border-radius: 74.02px;
    background: #FFFFFF;
    border: 0;
}

/* Subtle halo: drop-shadow swells from a faint trace to a soft 14 px bloom
   and back. Track is 1 px tall so its glow is a barely-there hairline; the
   thumb's 35 × 45 mass dominates and reads as a breathing bulb behind it.  */
@keyframes section2-slider-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.18));
    }

    50% {
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.55));
    }
}

@media (prefers-reduced-motion: reduce) {
    .section2 #slider {
        animation: none;
        filter: none;
    }
}

/* ==========================================================================
   SECTION 2 — MOBILE (≤770px)
   ==========================================================================
   Static grid + 3 PNG states; heading 25px; stage breaks out of container.  */
@media (max-width: 770px) {

    /* Break out of .container 16px padding — stage + slider full viewport width */
    .container-wrapper:nth-of-type(2)>.container {
        overflow-x: visible;
    }

    .section2 {
        width: calc(100% + 32px);
        max-width: 100vw;
        margin-left: -16px;
        margin-right: -16px;
        padding: 0;
        overflow-x: visible;
    }

    .section2_text1 {
        padding: 0 16px;
        font-size: 25px;
        max-width: none;
    }

    .section2 .section2__stage {
        position: relative;
        display: block;
        width: 100%;
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
        min-height: 511px;
    }

    .section2 #slider {
        width: 100%;
        max-width: none;
        height: 40px;
        margin: 0;
        vertical-align: top;
    }

    /* Трек у верхнего края .controls — ровно 42px под сеткой */
    .section2 #slider::-webkit-slider-runnable-track {
        margin-top: 0;
    }

    .section2 #slider::-webkit-slider-thumb {
        width: 28px;
        height: 38px;
        margin-top: -19px;
    }

    .section2 #slider::-moz-range-thumb {
        width: 28px;
        height: 38px;
    }
}

@media (min-width: 771px) {
    .section2 .section2__canvas .controls {
        top: 100%;
        bottom: auto;
        margin-top: 24px;
        left: 50%;
        right: auto;
        width: 603px;
        max-width: 100%;
        transform: translateX(-50%);
        padding: 0;
    }
}


/* ============================================================================
   Phase 5 — Sections 3 + 4 (Figma frame 219:243, 1178.38 x 1178.86 at x=96.21)

   Layout:
   The two legacy <section class="section3"> + <section class="section4">
   are rendered side-by-side in Figma as a single 1178x1178 frame. We wrap
   the original markup in .section3__canvas which is positioned absolutely
   inside the page so children can be placed by exact x/y from the spec.

   Mega numbers ("46,7%" + "71,7%") use a 3-color outline stack
   (orange + purple + white) implemented as a multi-shadow on -webkit-text-
   stroke, mimicking the chromatic-aberration treatment also used in the
   hero. The third color (white) is what the user pointed out beyond the
   spec's documented orange + purple strokes.

   Toggles ("мнение фандрайзеров / оба мнения / мнение нанимателей") wrap
   the existing checkbox inputs (opt-3..opt-6) so JS in main-backup.js stays
   intact (it still toggles .section3_text2/3 + .section4_text1/2 opacities).
   The active "оба мнения" pill in the middle is decorative — its colored
   "edges" are an orange (#FF6E32) and purple (#AA6EFF) rounded rect pair
   (matching toggle_active_pill_3a.svg) bleeding from beneath a white pill.
   ============================================================================ */

/* --- 5.1 Section 3 canvas (frame 219:243) ------------------------------ */
.section3.section3__phase5 {
    /* Override main.css's margin-bottom: 250px / margin-left: 100px */
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    background: var(--bg-primary);
    /* #272727 */
    color: var(--text-white);
    overflow: visible;
}

.section3__canvas {
    position: relative;
    width: 1178.38px;
    height: 1178.86px;
    margin: 0 0 250px;
    /* preserve legacy gap to section5;
                                                              the 100px gutter now comes from
                                                              the shared `.container` padding */
}

/* Hide the now-empty legacy <section class="section4"> stub */
.section4.section4__phase5-empty {
    display: none !important;
}

/* Visually-hidden helper for SR-only mega-number text */
.section3__canvas .visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* --- 5.2 Heading (219:259) "Результаты дали нам..." -------------------- */
/* 40px Golos Medium 500, 1138.42 x 144 at (5.51, 0). */
.section3__phase5 .s3p5__heading {
    position: absolute;
    left: 5.51px;
    top: 0;
    width: 1138.42px;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    /* #FFFFFF */
    max-width: none;
    /* defeat main.css max-width */
}

/* Defeat main.css's .section3_text1 span { border-bottom } so we use the
   exact 271 x 1px lime SVG underline instead. */
.section3__phase5 .s3p5__heading .s3p5__underline-target {
    position: relative;
    border-bottom: 0 !important;
    display: inline-block;
}

/* Lime underline (219:260) — 271.13 x 1px stroke #C3F150
   Anchored under the word "противоречия". */
.section3__phase5 .s3p5__heading .s3p5__underline-target::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 271.13px;
    height: 1px;
    background: var(--accent-lime-alt);
    /* #C3F150 */
}


/* --- 5.3 Mega numbers (219:255) "46,7%" + "71,7%" ---------------------- */
/* Spec ground truth (figma node fills/strokes):
     219:256 "46,7%" — fills: [] (transparent), strokes: #FF6E32 orange, 2px
     219:257 "71,7%" — fills: [] (transparent), strokes: #AA6EFF purple, 2px
   Each number is OUTLINE-ONLY (no fill anywhere). The chromatic-aberration
   look in the Figma master comes from 71,7% (purple) overlapping 46,7%
   (orange) at only +41.02px x-offset, NOT from text-shadow halos.
   Group 219:255 layout_4MEMXY = (4.65, 185.26), 587.02 x 247.
   46,7% layout_A7DRI9 = (0,0)   inside Group → absolute (4.65, 185.26)
   71,7% layout_XVKPUQ = (41.02,0) inside Group → absolute (45.67, 185.26) */
.section3__phase5 .s3p5__mega {
    position: absolute;
    left: 4.65px;
    /* layout_4MEMXY x */
    top: 185.26px;
    /* layout_4MEMXY y */
    width: 587.02px;
    height: 247px;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 205.596px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    isolation: isolate;
    /* contain plus-lighter blend to the 2 numbers */
    background: var(--bg-primary);
    /* dark backdrop inside the isolated context so plus-lighter lifts
       orange/purple against #272727 (matches section3 parent) */
}

.section3__phase5 .s3p5__mega-num {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    /* OUTLINE-ONLY: glyph interior is fully transparent; only the colored
       stroke is visible. NO text-shadow — the chromatic effect comes from
       the two numbers overlapping each other. */
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Figma 219:766: 2px stroke at 117px glyphs ⇒ 0.017em. em-based so the
       stroke keeps the same proportion at every font size (desktop 205px and
       the fluid mobile size both match the reference look). */
    -webkit-text-stroke-width: 0.017em;
    text-shadow: none;
    background: transparent;
    pointer-events: none;
    white-space: nowrap;
    paint-order: stroke fill;
    mix-blend-mode: plus-lighter;
    /* orange + purple → near-white at overlap */
}

/* "46,7%" — digit prefix orange (#FF6E32, spec 219:256 / fill_295A31),
              ",7%" suffix white per design master at intersection.            */
.section3__phase5 .s3p5__mega-num--orange {
    left: 0;
    -webkit-text-stroke-color: var(--color-orange);
    /* #FF6E32 */
    text-shadow: none;
}

.section3__phase5 .s3p5__mega-num--orange .s3p5__mega-digits {
    -webkit-text-stroke-color: var(--color-orange);
    /* #FF6E32 */
}

.section3__phase5 .s3p5__mega-suffix {
    -webkit-text-stroke-color: #FFFFFF;
    /* ",7%" pure white */
}

/* "71,7%" — purple stroke (#AA6EFF) per spec node 219:257 / fill_W5335P,
   x-offset by 41.02px so it overlaps 46,7%, producing the chromatic look. */
.section3__phase5 .s3p5__mega-num--purple {
    left: 41.02px;
    /* layout_XVKPUQ x within Group */
    -webkit-text-stroke-color: var(--color-purple);
    /* #AA6EFF */
    text-shadow: none;
}

.section3__phase5 .s3p5__mega-num--purple .s3p5__mega-digits {
    -webkit-text-stroke-color: var(--color-purple);
    /* #AA6EFF */
}


/* --- 5.4 Small color paragraphs (219:285 + 219:286) -------------------- */
/* Spec layouts (positions relative to section3 frame):
     219:285 purple  layout_WH1PED  (635.21, 229.9)  539.12 x 52
     219:286 orange  layout_OMCX5M  (635,    244 )   480    x 52
   Both paragraphs occupy nearly the same vertical region and visually
   INTERLEAVE in the Figma master (purple line / orange line / purple line
   / orange line) — they do NOT stack vertically. We absolutely position
   each one at its exact spec coords so opacity-driven JS still works
   without forcing a flex-column. */
.section3__phase5 .s3p5__minicopy {
    /* Container is now layout-only (no flex stacking); children are
       absolutely positioned to their per-spec offsets so they overlap. */
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.section3__phase5 .s3p5__minicopy p {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    max-width: none;
    pointer-events: auto;
    /* opacity is driven by JS in main-backup.js (opt-3 -> .section3_text2,
       opt-4 -> .section3_text3); keep transition smooth. */
    transition: opacity 0.2s ease;
}

.section3__phase5 .s3p5__minicopy-purple {
    /* layout_WH1PED: x=635.21 y=229.9 w=539.12 h=52 */
    left: 635.21px;
    top: 229.9px;
    width: 539.12px;
    height: 52px;
    color: var(--color-purple);
    /* #AA6EFF */
}

.section3__phase5 .s3p5__minicopy-orange {
    /* layout_OMCX5M: x=635   y=244   w=480   h=52 — overlaps purple by ~14px */
    left: 635px;
    top: 244px;
    width: 480px;
    height: 52px;
    color: var(--color-orange);
    /* #FF6E32 */
}


/* --- 5.5 Toggle (top + bottom) — 508.93 x 54.14, radius 62.81 ---------- */
.section3__phase5 .s3p5__toggle {
    position: absolute;
    width: 508.93px;
    height: 54.14px;
}

.section3__phase5 .s3p5__toggle--top {
    left: 0;
    /* aligned with --bottom */
    top: 454.01px;
    /* layout_NB1QZJ y */
}

.section3__phase5 .s3p5__toggle--bottom {
    left: 0;
    /* layout_GXDAR0 x */
    top: 1124.71px;
    /* layout_GXDAR0 y */
}

.section3__phase5 .s3p5__toggle-inner,
.fs-f4 .s3p5__toggle-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* fill_NZ0D8G stroke — painted via inset box-shadow rather than
       `border:` so the 1px stroke doesn't shift the absolutely-positioned
       segments inside (border-box + `top: 11.07px` resolved relative to
       the padding edge, leaving the active pill 2px taller above than
       below the toggle outline). */
    box-shadow: inset 0 0 0 1px var(--text-white);
    border-radius: 62.81px;
    background: transparent;
    box-sizing: border-box;
    overflow: visible;
}

/* Each segment is absolutely positioned per spec layout coords inside
   the 508.93 x 54.14 toggle (s3p5) / 610.55 x 72.9 (F4). */
.section3__phase5 .s3p5__seg,
.fs-f4 .s3p5__seg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
}

/* layout_8W7BEB: x=28.88 y=11.07, w=116 h=32 */
.section3__phase5 .s3p5__seg--left {
    left: 28.88px;
    top: 11.07px;
    width: 116px;
}

/* layout_LCGKGY (top toggle) / layout_WO683W (bottom): x=369.54, y=11.07, w=105 h=32 */
.section3__phase5 .s3p5__seg--right {
    left: 369.54px;
    top: 11.07px;
    width: 105px;
}

/* Hide the native checkbox inside the segment but keep it interactive */
.section3__phase5 .s3p5__seg-input,
.fs-f4 .s3p5__seg-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: auto;
    /* clicks bubble to label */
    margin: 0;
    padding: 0;
    background: none;
}

/* Segment text (фандрайзеров / нанимателей).
   s3p5 = 17.33 px, F4 = 20.79 px (per spec). */
.section3__phase5 .s3p5__seg-label,
.fs-f4 .s3p5__seg-label {
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17.33px;
    line-height: 90%;
    letter-spacing: -0.05em;
    color: var(--text-white);
    margin: 0;
    padding: 0;
    text-align: left;
    /* dim slightly when its checkbox is unchecked */
    transition: opacity 0.2s ease;
}

.section3__phase5 .s3p5__seg-input:not(:checked)~.s3p5__seg-label,
.fs-f4 .s3p5__seg-input:not(:checked)~.s3p5__seg-label {
    opacity: 0.45;
}

/* ---- 5.5b State-driven toggle (data-state on the section root) ---------
   .s3p5__seg buttons set [data-state] on the host section via JS.
   Active segment is the one whose data-action == data-state. The active
   segment renders a coloured pill via ::before. The inner .s3p5__seg-pill
   (pre-existing decorative white-with-edge-bleeds) shows only when
   state="both". Same rules apply to FullStudy F4 (.fs-f4 root carries
   data-state).                                                            */
.section3__phase5 .s3p5__seg,
.fs-f4 .s3p5__seg {
    cursor: pointer;
}

.section3__phase5 .s3p5__seg:focus-visible,
.fs-f4 .s3p5__seg:focus-visible {
    outline: 2px solid var(--accent-lime, #C2F04F);
    outline-offset: 4px;
}

.section3__phase5 .s3p5__seg::before,
.fs-f4 .s3p5__seg::before {
    content: '';
    position: absolute;
    /* em-based inset so the pill scales together with the segment label
       at any browser zoom / text-zoom level (was -7px -16px at 17.33 px
       font, which broke when font scaled but inset stayed in px). */
    inset: -0.4em -0.92em;
    border-radius: 887.98px;
    background: transparent;
    z-index: 0;
    /* sits between bg and label */
    transition: opacity 0.18s ease;
    opacity: 0;
}

.section3__phase5 .s3p5__seg-label,
.section3__phase5 .s3p5__seg-pill-label,
.fs-f4 .s3p5__seg-label,
.fs-f4 .s3p5__seg-pill-label {
    position: relative;
    z-index: 1;
    /* above ::before pill */
}

/* s3p5 group wrapper — owns its own data-state so each toggle (top / bottom)
   only filters its own siblings. `display: contents` keeps the absolute
   layout of children resolving against .section3__canvas as before. */
.section3__phase5 .s3p5__group {
    display: contents;
}

/* Pill on left segment when state="fundraisers" — solid purple per Figma */
.s3p5__group[data-state="fundraisers"] .s3p5__seg--left::before,
.fs-f4[data-state="fundraisers"] .s3p5__seg--left::before {
    background: var(--color-purple);
    /* #AA6EFF */
    opacity: 1;
}

/* Pill on right segment when state="employers" — solid orange per Figma */
.s3p5__group[data-state="employers"] .s3p5__seg--right::before,
.fs-f4[data-state="employers"] .s3p5__seg--right::before {
    background: var(--color-orange);
    /* #FF6E32 */
    opacity: 1;
}

/* Hide the inner middle pill div when state != "both" */
.s3p5__group:not([data-state="both"]) .s3p5__seg-pill,
.fs-f4:not([data-state="both"]) .s3p5__seg-pill {
    opacity: 0;
}

.section3__phase5 .s3p5__seg-pill,
.fs-f4 .s3p5__seg-pill {
    transition: opacity 0.18s ease;
}

/* Active label: white text on the solid purple/orange pill (Figma master) */
.s3p5__group[data-state="fundraisers"] .s3p5__seg--left .s3p5__seg-label,
.s3p5__group[data-state="employers"] .s3p5__seg--right .s3p5__seg-label,
.fs-f4[data-state="fundraisers"] .s3p5__seg--left .s3p5__seg-label,
.fs-f4[data-state="employers"] .s3p5__seg--right .s3p5__seg-label {
    color: var(--text-white);
    opacity: 1;
}

/* Inactive labels dim slightly (mirrors checkbox UX) */
.s3p5__group[data-state="fundraisers"] .s3p5__seg--right .s3p5__seg-label,
.s3p5__group[data-state="fundraisers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.s3p5__group[data-state="employers"] .s3p5__seg--left .s3p5__seg-label,
.s3p5__group[data-state="employers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.s3p5__group[data-state="both"] .s3p5__seg--left .s3p5__seg-label,
.s3p5__group[data-state="both"] .s3p5__seg--right .s3p5__seg-label,
.fs-f4[data-state="fundraisers"] .s3p5__seg--right .s3p5__seg-label,
.fs-f4[data-state="fundraisers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.fs-f4[data-state="employers"] .s3p5__seg--left .s3p5__seg-label,
.fs-f4[data-state="employers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.fs-f4[data-state="both"] .s3p5__seg--left .s3p5__seg-label,
.fs-f4[data-state="both"] .s3p5__seg--right .s3p5__seg-label {
    opacity: 0.45;
}

/* ---- 5.5c Content visibility per state ----------------------------------
   - "fundraisers" state: highlight purple/fundraiser content; orange side
     stays visible at 10 % so users still see what's being filtered out.
   - "employers" state: mirror — orange highlighted, purple at 10 %.
   - "both" state: both fully visible, with overlapping (default).           */
.section3__phase5 .s3p5__mega-num,
.section3__phase5 .s3p5__minicopy-purple,
.section3__phase5 .s3p5__minicopy-orange,
.section3__phase5 .s3p5__outline-word--purple,
.section3__phase5 .s3p5__outline-word--orange,
.section3__phase5 .s3p5__body--purple,
.section3__phase5 .s3p5__body--orange {
    transition: opacity 0.2s ease;
}

/* "fundraisers" — fade orange (employer) side to 10 %.
   Top group owns mega + minicopy; bottom group owns outline + body. */
.s3p5__group--top[data-state="fundraisers"] .s3p5__mega-num--orange,
.s3p5__group--top[data-state="fundraisers"] .s3p5__minicopy-orange,
.s3p5__group--bottom[data-state="fundraisers"] .s3p5__outline-word--orange,
.s3p5__group--bottom[data-state="fundraisers"] .s3p5__body--orange {
    opacity: 0.1;
    pointer-events: none;
}

/* "employers" — fade purple (fundraiser) side to 10 % */
.s3p5__group--top[data-state="employers"] .s3p5__mega-num--purple,
.s3p5__group--top[data-state="employers"] .s3p5__minicopy-purple,
.s3p5__group--bottom[data-state="employers"] .s3p5__outline-word--purple,
.s3p5__group--bottom[data-state="employers"] .s3p5__body--purple {
    opacity: 0.1;
    pointer-events: none;
}

/* In the default "both" state BOTH numbers render their own white ",7%"
   offset on top of each other, so the suffix strokes stack and read ~2× too
   thick. Only the digits (46 / 71) should overlap chromatically — the comma
   suffix is a single white outline in the master (Figma 219:766). Hide the
   purple copy so just one white ",7%" shows. The single-side states below keep
   each side's own suffix (the faded side is at 10 % anyway), so only this
   overlap case needs trimming.                                              */
.s3p5__group--top[data-state="both"] .s3p5__mega-num--purple .s3p5__mega-suffix {
    display: none;
}

/* When a single side is selected, the suffix ",7%" on the highlighted
   number switches from the chromatic-overlap white to the side's brand
   colour — all digits + the comma read as one solid colour. The default
   ("both") state keeps the white suffix unchanged.                       */
.s3p5__group--top[data-state="fundraisers"] .s3p5__mega-num--purple .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-purple);
}

.s3p5__group--top[data-state="employers"] .s3p5__mega-num--orange .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-orange);
}

/* Middle "оба мнения" / "обе стороны" decorative pill (219:268 / 219:280
   in s3p5; 282:738 in F4). Position differs per context — defaults below
   are for s3p5; .fs-f4 .s3p5__seg--mid overrides them.                    */
.section3__phase5 .s3p5__seg--mid {
    position: absolute;
    left: 171px;
    top: 4.21px;
    width: 167.44px;
    height: 45.72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-f4 .s3p5__seg--mid {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section3__phase5 .s3p5__seg-pill,
.fs-f4 .s3p5__seg-pill {
    position: absolute;
    inset: 0;
    border-radius: 887.98px;
    background: var(--text-white);
    /* white pill */
    /* Orange bleed on left edge, purple bleed on right edge — replicates the
       2 offset rects in toggle_active_pill_3a.svg. */
    box-shadow:
        -3.62px 0 0 0 var(--color-orange),
        /* #FF6E32 left edge */
        3.62px 0 0 0 var(--color-purple);
    /* #AA6EFF right edge */
    z-index: 0;
}

.section3__phase5 .s3p5__seg-pill-label,
.fs-f4 .s3p5__seg-pill-label {
    position: relative;
    z-index: 1;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17.33px;
    line-height: 90%;
    letter-spacing: -0.05em;
    color: var(--text-white);
    /* white by default */
    text-align: center;
    width: 100%;
}

/* When state="both" the white pill is behind it — switch to dark for contrast */
.s3p5__group[data-state="both"] .s3p5__seg-pill-label,
.fs-f4[data-state="both"] .s3p5__seg-pill-label {
    color: var(--bg-secondary);
    /* #2F2F2F on white pill */
}


/* --- 5.6 Outline headline (219:246) "несоразмерный / завышенный +
                                       уровень оплаты" -------------------- */
/* Group at section-y=569.01 (Group 219:244), inner content y=89.24 within
   that group for "уровень оплаты" -> absolute y=569.01+89.24=658.25.
   "несоразмерный" + "завышенный" sit at y=569.01 (outer group) +0 = 569.01,
   but they're inside Group 2136137228 also at y=569.01 + 0, so absolute
   y=569.01 for the words row.

   Both words 150.13px Golos 600, "уровень оплаты" 146.55px Golos VF 600.
   All outline-only (transparent fill, 2px stroke). */
.section3__phase5 .s3p5__outline {
    position: absolute;
    left: 0;
    /* layout_Y664CY x */
    top: 569.01px;
    /* layout_HSP40E y */
    width: 1124.76px;
    height: 265.24px;
    display: block;
    margin: 0;
    padding: 0;
    text-transform: none;
    /* spec is lowercase */
    font-size: inherit;
    line-height: 1;
    align-items: stretch;
}

.section3__phase5 .s3p5__outline-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 1124px;
    height: 180px;
    display: block;
    isolation: isolate;
    background: var(--bg-primary);
    /* contain plus-lighter blend to the 2 words AND give them a dark
       backdrop inside the isolated context for the chromatic lift */
}

.section3__phase5 .s3p5__outline-word {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 150.13px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Figma 219:801: ~0.64px stroke at 44.88px glyphs ⇒ 0.014em. em-based so the
       proportion holds at every size — the fixed 2px read fine on desktop
       (150px → ~2px) but was ~2.5× too thick once mobile drops the font to 56px. */
    -webkit-text-stroke-width: 0.014em;
    text-transform: lowercase;
    white-space: nowrap;
    mix-blend-mode: plus-lighter;
    /* purple + orange → near-white at overlap */
    paint-order: stroke fill;
}

.section3__phase5 .s3p5__outline-word--purple {
    left: 0;
    -webkit-text-stroke-color: var(--color-purple);
    /* #AA6EFF */
}

.section3__phase5 .s3p5__outline-word--orange {
    left: 213.99px;
    /* layout_V5TLSS x */
    -webkit-text-stroke-color: var(--color-orange);
    /* #FF6E32 */
}

/* "уровень оплаты" — white outline, 70% opacity, x=9.76 y=89.24 within
   Group 219:246 (which is at y=0 of the outline group). */
.section3__phase5 .s3p5__outline-bottom {
    position: absolute;
    left: 9.76px;
    top: 89.24px;
    width: 1115px;
    height: 176px;
    margin: 0;
    padding: 0;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 146.55px;
    line-height: 1.2;
    letter-spacing: -0.027em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* em-based to match Figma's thin stroke at every size (see .s3p5__outline-word). */
    -webkit-text-stroke: 0.014em var(--text-white);
    /* #FFFFFF, opacity below */
    opacity: 0.7;
    /* spec opacity 0.7 */
    text-transform: lowercase;
    white-space: nowrap;
}


/* --- 5.7 Big body paragraphs (219:252 + 219:253) ----------------------- */
/* Spec layouts inside Group 219:251 (which sits at y=287.7 within the
   outline group at y=569.01 → absolute y = 856.71):
     219:252 purple  layout_HRULD5  (1.31, 0)  609.63 x 208
     219:253 orange  layout_RW13Y6  (0,    0)  609.03 x 208
   Both paragraphs occupy the SAME vertical region — they OVERLAP at the
   same y so when both checkboxes are active you see chromatic
   interleaving. We position each absolutely to its per-spec coords. */
.section3__phase5 .s3p5__bodywrap {
    position: absolute;
    left: 0;
    /* layout_Y664CY x */
    top: 856.71px;
    /* 569.01 + 287.7 */
    width: 1124.76px;
    height: 208px;
    margin: 0;
    padding: 0;
    /* No flex — children are absolutely positioned to overlap. */
    display: block;
    background: none;
    pointer-events: none;
}

.section3__phase5 .s3p5__body {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    height: 208px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    pointer-events: auto;
    /* opacity driven by JS (opt-5 -> .section4_text1, opt-6 -> .section4_text2). */
    transition: opacity 0.2s ease;
}

.section3__phase5 .s3p5__body--purple {
    /* layout_HRULD5: (1.31, 0) inside Group 219:251 — overlaps orange */
    left: 1.31px;
    width: 609.63px;
    max-width: 609.63px;
    color: var(--color-purple);
    /* #AA6EFF */
}

.section3__phase5 .s3p5__body--orange {
    /* layout_RW13Y6: (0, 0) inside Group 219:251 — same y as purple */
    left: 0;
    width: 609.03px;
    max-width: 609.03px;
    color: var(--color-orange);
    /* #FF6E32 */
}


/* --- 5.8 Mobile fallback (≤770 only) ---------------------------------
   At 771-1439 the desktop Figma master layout is preserved and scaled by
   the stepped `zoom:` rules above — the site must look IDENTICAL to the
   1440 desktop frame at every intermediate width (body minicopy stays
   to the right of the mega, toggle stays at canvas x=0, etc.). The
   vertical-flow reset below collapses everything to a stacked column
   and therefore applies ONLY at true mobile (≤770), where the dedicated
   mobile rules further down layer on top. */
@media (max-width: 770px) {
    .section3__canvas {
        width: 100%;
        height: auto;
        margin: 0 auto 70px;
        padding: 0 16px;
    }

    .section3__phase5 .s3p5__heading,
    .section3__phase5 .s3p5__mega,
    .section3__phase5 .s3p5__minicopy,
    .section3__phase5 .s3p5__outline,
    .section3__phase5 .s3p5__bodywrap {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 32px;
    }

    /* Toggle: keep desktop absolute geometry (508.93 × 54.14) but reflow
       inline so it stacks with the other vertical-flow blocks above. */
    .section3__phase5 .s3p5__toggle {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto 32px;
    }

    .section3__phase5 .s3p5__heading {
        font-size: 28px;
    }

    .section3__phase5 .s3p5__mega {
        /* Inherit the desktop 205.596px font (≤770 rules override to 76px).
           At 771-1439 the stepped `zoom:` on .section3 scales it down to
           fit. Height must be explicit because the children below are
           absolutely positioned and don't contribute to parent height. */
        height: 1.2em;
    }

    /* Chromatic overlap: purple sits 0.2em to the right of orange, matching
       the desktop master's 41/205 ≈ 0.2 ratio, so the "46,7%" / "71,7%"
       glyphs overlap (plus-lighter blend on the parent produces the
       orange+purple → white intersection look) regardless of font size. */
    .section3__phase5 .s3p5__mega-num {
        position: absolute;
        top: 0;
        display: block;
    }

    .section3__phase5 .s3p5__mega-num--orange {
        left: 0;
    }

    .section3__phase5 .s3p5__mega-num--purple {
        left: 0.2em;
        margin-left: 0;
    }

    /* Overlap the two body paragraphs like desktop (purple over orange,
       toggle reveals one and fades the other to 10%). A single-cell grid
       stacks both children on top of each other AND auto-sizes its height
       to the taller paragraph, so no fixed height is needed on mobile. */
    .section3__phase5 .s3p5__bodywrap {
        display: grid;
        pointer-events: auto;
    }

    .section3__phase5 .s3p5__body {
        grid-area: 1 / 1;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Restore mobile minicopy paragraphs to a stacked column. */
    .section3__phase5 .s3p5__minicopy {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: auto;
    }

    .section3__phase5 .s3p5__minicopy p {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .section3__phase5 .s3p5__outline-top,
    .section3__phase5 .s3p5__outline-word,
    .section3__phase5 .s3p5__outline-bottom {
        position: relative;
        left: auto;
        top: auto;
        font-size: 56px;
        width: 100%;
        height: auto;
        white-space: normal;
    }

    .section3__phase5 .s3p5__outline-word--orange {
        margin-top: 8px;
    }
}

/* ==========================================================================
   SECTION 3+4 — MOBILE Phase 5 (≤770px)
   ==========================================================================
   Builds on the ≤1080 tablet stack:
     - Heading 25 px; body/minicopy 16 px; toggle labels 12 px (per spec).
     - Mega numbers re-overlap (chromatic effect) — tablet's inline-block flow
       wrapped them onto separate lines on narrow viewports.
     - Outline words re-overlap too — tablet stacked them with margin-top.
     - Toggle segments switch to %-based positions so they track the bar's
       100 % width (desktop px coords were inside a fixed 508.93 bar).         */
@media (max-width: 770px) {
    .section3__phase5 .s3p5__heading {
        font-size: 25px;
        line-height: 1.2;
    }

    /* Lime underline anchored to the inline-block span — desktop's fixed
       271.13 px width was sized for the 40 px font and overshoots when the
       heading drops to 25 px on mobile.                                      */
    .section3__phase5 .s3p5__heading .s3p5__underline-target::after {
        width: 100%;
    }

    .section3__phase5 .s3p5__minicopy p,
    .section3__phase5 .s3p5__body {
        font-size: 16px;
        line-height: 1.25;
    }

    /* Mega numbers — re-overlap via absolute positioning. .s3p5__mega is a query
       container; the FONT lives on the children (.s3p5__mega-num) so cqw resolves
       against this box's width — NOT the viewport (cqw on the container element
       itself resolves against its ancestor, which here is the viewport, and was
       making the number far too big). The orange number is in normal flow so it
       gives the container its height; purple overlaps it absolutely. */
    .section3__phase5 .s3p5__mega {
        position: relative;
        container-type: inline-size;
        height: auto;
    }

    .section3__phase5 .s3p5__mega-num {
        position: absolute;
        top: 0;
        display: block;
        margin: 0;
        /* Measured glyph advance of "46,7%"/"71,7%" (incl. the 0.2em purple
           offset + negative letter-spacing) ≈ 2.84em ⇒ 100%/2.84 ≈ 35cqw fills
           the box; 34cqw leaves a hair of margin so the stroke never clips. */
        font-size: 34cqw;
    }

    .section3__phase5 .s3p5__mega-num--orange {
        position: relative;
        left: 0;
    }

    .section3__phase5 .s3p5__mega-num--purple {
        /* chromatic offset (mirrors desktop's 41/205 ≈ 0.2 ratio); em-based so it
           tracks the fluid font above */
        left: 0.2em;
        margin-left: 0;
        /* defeat tablet rule */
    }

    /* Toggle — restore the bar height (tablet's `height: auto` collapses to 0
       because all children inside .s3p5__toggle-inner are absolute), shrink
       segments + pill via %, drop label font to 12. Bar 40 px per spec, so
       seg/pill vertical positions also scaled down from the desktop 54-px bar.
       Width: 100% so the %-positioned segments below track the bar's width
       (the tablet fallback no longer resets width on .s3p5__toggle). */
    .section3__phase5 .s3p5__toggle {
        width: 100%;
        height: 40px;
    }

    .section3__phase5 .s3p5__seg-label,
    .section3__phase5 .s3p5__seg-pill-label {
        font-size: 11px;
        line-height: 1;
    }

    /* Side segment labels — explicit left-alignment per spec */
    .section3__phase5 .s3p5__seg--left .s3p5__seg-label,
    .section3__phase5 .s3p5__seg--right .s3p5__seg-label {
        text-align: left;
        width: 100%;
    }

    .section3__phase5 .s3p5__seg--left,
    .section3__phase5 .s3p5__seg--right {
        top: 5px;
        height: 30px;
    }

    /* Mobile layout matches the 335×40 reference SVG exactly.
       All three segments share the active-pill bounds (top 3, height 34),
       so when any segment is active, its ::before pill (inset 0) renders
       at the same size and position as the SVG mockup's reference pill.
       Segment percentages within a 335-wide bar:
         · --left  : x   2 / w 28 % (2–30 %)
         · --mid   : x 33.6 / w 32.9 % (matches the SVG pill ≈ 110 px)
         · --right : x 70 / w 28 % (70–98 %)                             */
    .section3__phase5 .s3p5__seg--left {
        left: 2%;
        width: 28%;
        top: 3px;
        height: 34px;
        padding-left: 12px;
        /* text sits 12 px from pill's left edge */
        box-sizing: border-box;
    }

    .section3__phase5 .s3p5__seg--right {
        left: 70%;
        width: 28%;
        top: 3px;
        height: 34px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    .section3__phase5 .s3p5__seg--mid {
        top: 3px;
        height: 34px;
        left: 33.6%;
        width: 32.9%;
    }

    /* Active pill matches segment bounds exactly — no horizontal bleed past
       the bar (matches the reference SVG's pill at 112.56 / 110.22 wide).   */
    .section3__phase5 .s3p5__seg::before {
        inset: 0;
    }

    /* Outline words — re-overlap absolutely (tablet rule stacked them).
       Top + bottom rows sit flush (no gap); orange "завышенный" pinned to
       the right edge so it terminates at the same x as "уровень оплаты".    */
    .section3__phase5 .s3p5__outline-top {
        position: relative;
        height: 28px;
        /* clipped tighter than 36 px line-height — pulls the bottom row up */
        margin-bottom: -4px;
        /* slight overlap into bottom row */
    }

    .section3__phase5 .s3p5__outline-word {
        position: absolute;
        top: 0;
        font-size: 36px;
        line-height: 1;
        width: auto;
        white-space: nowrap;
        /* At 36px the em-based 0.014em ≈ 0.5px renders as a pale sub-pixel line.
           Pin an explicit width here: crisp + clearly thinner than the old 2px. */
        -webkit-text-stroke-width: 1.4px;
    }

    .section3__phase5 .s3p5__outline-word--purple {
        left: 0;
        right: auto;
    }

    .section3__phase5 .s3p5__outline-word--orange {
        left: auto;
        right: 0;
        /* pinned to container's right edge */
        margin-top: 0;
        /* defeat tablet rule */
    }

    .section3__phase5 .s3p5__outline-bottom {
        font-size: 36px;
        line-height: 1;
        margin-top: 0;
        /* see .s3p5__outline-word above — keep the white outline crisp at 36px */
        -webkit-text-stroke-width: 1.4px;
    }
}

/* ============================================================================
   Phase 6 — SECTION 5 (Figma 219:609)
   Two polygons that converge vertically on scroll. Initial state = outline-only,
   polygons translated off (left from above, right from below). Final state =
   both polygons at spec position with their fills enabled. The convergence is
   driven by --phase6-progress (0→1) set from JS on scroll; the fill→outline
   swap is a discrete state flip when progress crosses the meeting threshold.
   ============================================================================ */
/* --- Continuous lime→transparent gradient spanning phases 6, 7, 8, 9.
       Figma stops: 0% #C2F04F (100% opacity) → 100% #2F2F2F (0% opacity).
       Painted on the wrapper so the fade runs once across the combined
       height of the four sections instead of repeating per section.
       The wrapper breaks out of `.container`'s 100px gutter to paint
       the gradient edge-to-edge (100vw); the inner sections are then
       padded back to the container content area via the symmetric
       `padding-inline: calc(50vw - 50%)` trick. ----- */
.phase-gradient-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    background-color: #272727;
    background-image: linear-gradient(0deg,
            #C2F04F 0%,
            rgba(194, 240, 79, 0.7) 20%,
            rgba(194, 240, 79, 0.25) 45%,
            rgba(39, 39, 39, 0) 75%);
}

.section5.section5__phase6 {
    position: relative;
    width: 100%;
    margin: 0 auto 250px;
    padding: 0;
    background: transparent;
    /* gradient comes from .phase-gradient-wrap */
    color: #fff;
    overflow: hidden;
    --phase6-progress: 0;
    --canvas-scale: 1;
    --canvas-w: 1336;
    --canvas-h: 767;
}

.section5__phase6 .section5__viewport {
    position: relative;
    width: 100%;
    height: calc(var(--canvas-h) * 1px * var(--canvas-scale));
    overflow: hidden;
}

.section5__phase6 .section5__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--canvas-w) * 1px);
    height: calc(var(--canvas-h) * 1px);
    transform: translateX(-50%) scale(var(--canvas-scale));
    transform-origin: top center;
}

/* --- Heading + lime underline (positions from merged composite SVG) ---------- */
.section5__phase6 .section5__heading {
    position: absolute;
    left: 0;
    top: 25px;
    width: 1010px;
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 137.5%;
    letter-spacing: -0.02em;
    color: #fff;
    z-index: 5;
    pointer-events: none;
}

.section5__phase6 .section5__heading-mark {
    border-bottom: 1px solid transparent;
}

.section5__phase6 .section5__heading-underline {
    position: absolute;
    left: 697px;
    top: 84px;
    width: 224px;
    height: 1px;
    background: #C3F150;
    z-index: 6;
}

/* --- Polygon groups: positions from the merged composite SVG.
   Orange final: (222, 257), size 547x412. Initial: translateX(-222) -> canvas x=0.
   Purple final: (505, 229), size 585x486. Initial: translateX(+246) -> right edge of 1336 canvas. */
.section5__phase6 .section5__poly {
    position: absolute;
    will-change: transform;
}

.section5__phase6 .section5__poly--left {
    left: 221.43px;
    top: 253.77px;
    width: 547px;
    height: 412px;
    z-index: 2;
    transform: translate3d(calc(-221.43px * (1 - var(--phase6-progress))), 0, 0);
}

.section5__phase6 .section5__poly--right {
    left: 504.72px;
    top: 231.08px;
    width: 585px;
    height: 486px;
    z-index: 1;
    transform: translate3d(calc(246.28px * (1 - var(--phase6-progress))), 0, 0);
}

.section5__phase6 .section5__poly-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Show desktop polygon SVG by default; mobile variant is hidden until ≤770. */
.section5__phase6 .section5__poly-shape--mobile {
    display: none;
}

.section5__phase6 .section5__poly-fill {
    fill-opacity: 1;
    transition: fill-opacity 0.45s ease;
}

.section5__phase6[data-state="initial"] .section5__poly-fill {
    fill-opacity: 0;
}

/* KPI captions inside each polygon */
.section5__phase6 .section5__poly-kpi {
    position: absolute;
    margin: 0;
    font-family: 'Golos Text', 'Golos', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #fff;
    z-index: 4;
}

.section5__phase6 .section5__poly--left .section5__poly-kpi {
    left: 35px;
    top: 35px;
    width: 100%;
}

.section5__phase6 .section5__poly--right .section5__poly-kpi {
    left: 25px;
    top: 290px;
    width: 95%;
}

/* Mini opinion labels — anchored INSIDE their parent polygon so they slide
   together with the polygon during the phase6 merge animation. Positions
   are polygon-relative (canvas coord minus polygon's left/top).             */
.section5__phase6 .section5__opinion {
    position: absolute;
    margin: 0;
    font-family: 'Golos Text', 'Golos', sans-serif;
    font-weight: 500;
    font-size: 16px;
    /* 1.5× smaller than the prior 24px pass */
    line-height: 90%;
    letter-spacing: -0.05em;
    color: #fff;
    z-index: 6;
    pointer-events: none;
}

/* Inside .section5__poly--right (purple ⌐) — top-right strip of the L.
   Was canvas (779, 263); polygon at (504.72, 231.08). */
.section5__phase6 .section5__opinion--fundraisers {
    left: 274.28px;
    top: 31.92px;
}

/* Inside .section5__poly--left (orange Г) — bottom-left strip of the L.
   Was canvas (257, 627); polygon at (221.43, 253.77). 16px / 2-line block
   (~29 px tall) clears the strip's ~411 bottom edge from top 373.           */
.section5__phase6 .section5__opinion--employers {
    left: 35.57px;
    top: 373.23px;
}

/* Mobile: stack polygons, run a VERTICAL merge animation (desktop's was
   horizontal). Switch to mobile-only SVG variants whose Г-protrusion is
   exactly mirrored (170×108 in a 340×256 viewBox), so when phase6-progress
   approaches 1 the bottom polygon's notch puzzle-locks with the top one's. */
@media (max-width: 770px) {
    .section5.section5__phase6 {
        margin-bottom: 10px;
        /* phase6-progress is now JS-driven on scroll, like desktop */
    }

    .section5__phase6 .section5__poly-shape--desktop {
        display: none;
    }

    .section5__phase6 .section5__poly-shape--mobile {
        display: block;
    }

    .section5__phase6 .section5__viewport {
        height: auto;
    }

    .section5__phase6 .section5__canvas {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        transform: none;
        padding: 24px 16px 32px;
    }

    .section5__phase6 .section5__heading {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        font-size: 24px;
        margin-bottom: 32px;
    }

    /* Replace the absolute-positioned underline span with a border on the
       mark span so the lime line tracks "совпадение" wherever it wraps.    */
    .section5__phase6 .section5__heading-mark {
        border-bottom: 1px solid #C3F150;
    }

    .section5__phase6 .section5__heading-underline {
        display: none;
    }

    .section5__phase6 .section5__poly {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
        /* gap is supplied by the slide-in animation */
    }

    /* Both polygons share viewBox 340×256 (mobile SVG); aspect-ratio matches
       so the protrusion is the same 170×108 size on both → notch mirroring. */
    .section5__phase6 .section5__poly--left,
    .section5__phase6 .section5__poly--right {
        aspect-ratio: 340 / 256;
    }

    /* Vertical merge: top stays put (so it can't ride up into the heading);
       only the bottom polygon moves. At progress=0 there's a 16 px gap
       between them; at progress=1 the bottom slides up by 124 px → 108 px
       overlap with the top's notch (= the protrusion size).                  */
    .section5__phase6 .section5__poly--left {
        transform: none;
    }

    .section5__phase6 .section5__poly--right {
        margin-top: 16px;
        /* Slide up to close the 16px gap AND overlap by the protrusion height
           (108/256 = 42.1875% of the poly's own height). The % keeps the mesh
           exact at any width — the old fixed -124px only meshed at the 340px-wide
           reference size (16 + 108) and left a gap on wider phones (up to 420px). */
        transform: translate3d(0, calc((-16px - 42.1875%) * var(--phase6-progress)), 0);
    }

    .section5__phase6 .section5__poly-shape {
        width: 100%;
        height: 100%;
    }

    /* KPI text — anchored in % to each polygon. Coordinates derived from the
       reference mobile SVG (mask1 top, mask0 bottom, both ~338 × 256).      */
    .section5__phase6 .section5__poly-kpi {
        position: absolute;
        font-size: 16px;
    }

    .section5__phase6 .section5__poly--left .section5__poly-kpi {
        /* Top polygon Г: KPI in the top-full strip, indented ~32 / 12 */
        left: 8%;
        top: 12%;
        width: 84%;
    }

    .section5__phase6 .section5__poly--right .section5__poly-kpi {
        /* Bottom polygon ⌐: KPI in the bottom-full strip, indented ~25 / 150 */
        left: 7%;
        top: 56%;
        width: 86%;
    }

    /* Opinion labels — show on mobile, anchored in % to each polygon. */
    .section5__phase6 .section5__opinion {
        display: block;
        font-size: 12px;
    }

    .section5__phase6 .section5__opinion--employers {
        /* Top polygon's bottom-left strip — label sits low-left */
        left: 8%;
        top: 78%;
    }

    .section5__phase6 .section5__opinion--fundraisers {
        /* Bottom polygon's top-right strip — label sits high-right */
        left: 56%;
        top: 8%;
    }
}

/* ============================================================================
   Phase 7 — SECTION 6 (Figma 1440x736)
   Decorative orbital rings + centered heading + white pill CTA + vertical line.
   ============================================================================ */
@property --section6-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.section6.section6__phase7 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    /* gradient comes from .phase-gradient-wrap */
    color: #FBFBFB;
    overflow: visible;
    --canvas-scale: 1;
    --canvas-w: 1440;
    --canvas-h: 736;
}

.section6__phase7 .section6__viewport {
    position: relative;
    width: 100%;
    height: calc(var(--canvas-h) * 1px * var(--canvas-scale));
    overflow: visible;
    /* divider line extends below */
}

.section6__phase7 .section6__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--canvas-w) * 1px);
    height: calc(var(--canvas-h) * 1px);
    transform: translateX(-50%) scale(var(--canvas-scale));
    transform-origin: top center;
    /* The transform property already creates a stacking context, which would
       trap the ring's z-index inside. Lift the whole canvas above the gradient
       wrap below so the 1.7x-scaled ring's overflow stays visible across the
       section 6 → section 8 boundary on desktop too. */
    z-index: 2;
    cursor: pointer;
}

.section6__phase7 .section6__rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Lift the ring above the gradient wrap below so its 1.7x-scaled overflow
       isn't hidden by the wrap's opaque bg — the bottom of the ring stays
       visible across the section 6 → section 8 boundary. */
    z-index: 2;
    transform-box: fill-box;
    will-change: transform;
    /* Rotation is purely scroll-driven (360° sweep across the section's
       viewport range). No continuous auto-rotation. Ring viewBox paths
       are ~884px wide at scale 1.0; scale(0.961) targets ~850px diameter. */
    transform: rotate(calc(360deg * var(--section6-progress, 0))) scale(0.961);
}

@media (min-width: 771px) {
    body:not(.exp-page) .section6__phase7 .section6__cluster {
        display: contents;
    }

    body:not(.exp-page) .section6__phase7 .section6__rings {
        inset: auto;
        left: 50%;
        top: 50%;
        width: 997.9598109513645px;
        height: 1173.2429687902461px;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--section6-progress, 0)));
    }

    /* Section 8 intro — 67px below the section-6 divider line end */
    body:not(.exp-page) .section8__phase8 .s8__intro {
        top: calc(76px + 67px);
    }
}

/* Home page section 6 only — color rings, no hover swap */
body:not(.exp-page) .section6__phase7 .section6__rings--white {
    display: none;
}

body:not(.exp-page) .section6__phase7 .section6__rings--color {
    opacity: 1;
    pointer-events: none;
}

.section6__phase7 .section6__heading {
    position: absolute;
    top: 320px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 1010px;
    text-align: center;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 99%;
    letter-spacing: -0.01em;
    color: #FBFBFB;
    z-index: 2;
    pointer-events: none;
}

.section6__phase7 .section6__heading-underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.section6__phase7 .section6__cta {
    position: absolute;
    left: 470.211px;
    top: 387.728px;
    width: 490px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 30px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 58px;
    /* 60 - 2*1px border */
    text-align: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.18s ease, color 0.18s ease;
    text-decoration: none;
    /* defeat <a> default underline */
    display: block;
    /* anchor needs block to honour width/height */
    box-sizing: border-box;
}

.section6__phase7 .section6__cta:hover,
.section6__phase7 .section6__cta:focus-visible {
    background: #FFFFFF;
    color: #2F2F2F;
}

.section6__phase7 .section6__divider {
    position: absolute;
    left: 715.5px;
    top: 480px;
    width: 1px;
    height: 334px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 770px) {

    /* Clip the scaled ring horizontally only — overflow-x: clip avoids
       turning overflow-y into a scroll container, so the ring can still
       extend vertically across the section 6 → section 8 boundary. */
    .section6.section6__phase7 {
        overflow-x: clip;
    }

    .section6__phase7 .section6__viewport {
        height: auto;
        overflow-x: clip;
    }

    .section6__phase7 .section6__canvas {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        transform: none;
        padding: 64px 16px 48px;
        overflow-x: clip;
    }

    .section6__phase7 .section6__rings {
        opacity: 0.6;
        height: 100%;
        /* On mobile the canvas is the screen width (~360px), so the desktop
           scale renders the ring tiny. Bump the scale up so the ring
           dominates the viewport like in the design. */
        transform: rotate(calc(360deg * var(--section6-progress, 0))) scale(1.6);
    }

    .section6__phase7 .section6__heading {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        font-size: 24px;
        margin-bottom: 32px;
    }

    .section6__phase7 .section6__cta {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        font-size: 18px;
        line-height: 60px;
        display: block;
    }

    .section6__phase7 .section6__divider {
        display: none;
    }

    /* Home — break out of .container 16px gutter; padding only on .section6__cluster */
    body:not(.exp-page) .section6.section6__phase7 {
        width: calc(100% + 32px);
        max-width: 100vw;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }

    body:not(.exp-page) .section6__phase7 .section6__viewport,
    body:not(.exp-page) .section6__phase7 .section6__canvas {
        width: 100%;
        max-width: 100%;
    }

    body:not(.exp-page) .section6__phase7 .section6__viewport {
        overflow-y: visible;
    }

    body:not(.exp-page) .section6__phase7 .section6__canvas {
        position: relative;
        overflow: visible;
        padding: 0 0 53px;
    }

    /* Rings on canvas — shifted up so heading + CTA sit in the oval centre */
    body:not(.exp-page) .section6__phase7 .section6__canvas > .section6__rings-picture {
        position: absolute;
        left: 50%;
        top: -35.7075vw;
        width: 132vw;
        height: 132vw;
        margin: 0;
        transform: translateX(-50%);
        transform-origin: 50% 50%;
        z-index: 0;
        pointer-events: none;
    }

    body:not(.exp-page) .section6__phase7 .section6__canvas > .section6__rings {
        position: absolute !important;
        left: 50% !important;
        top: -35.7075vw !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        width: 132vw !important;
        max-width: 132vw !important;
        height: 132vw !important;
        margin: 0 !important;
        transform: translateX(-50%) rotate(calc(360deg * var(--section6-progress, 0))) !important;
        transform-origin: 50% 50%;
        transform-box: border-box;
        object-fit: contain;
        object-position: center center;
        opacity: 1 !important;
        z-index: 0;
        pointer-events: none;
    }

    body:not(.exp-page) .section6__phase7 .section6__canvas > .section6__rings-picture .section6__rings {
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        transform: rotate(calc(360deg * var(--section6-progress, 0))) !important;
    }

    body:not(.exp-page) .section6__phase7 .section6__cluster {
        position: relative;
        width: 100%;
        padding: 32px 20px 0;
        box-sizing: border-box;
        z-index: 2;
        overflow: visible;
    }

    body:not(.exp-page) .section6__phase7 .section6__rings--color {
        opacity: 1;
    }

    /* Home — rest of section 6 / 8 layout (index, not research page) */
    body:not(.exp-page) .section6__phase7 .section6__heading {
        margin-top: 0;
        text-align: center;
    }

    body:not(.exp-page) .section6__phase7 .section6__heading,
    body:not(.exp-page) .section6__phase7 .section6__cta {
        position: relative;
        z-index: 3;
    }

    body:not(.exp-page) .section6__phase7 .section6__cta {
        margin-bottom: 24px;
    }

    body:not(.exp-page) .section6__phase7 .section6__divider {
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        flex-shrink: 0;
        width: 1px;
        min-width: 1px;
        height: 213.0000000000002px !important;
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
        z-index: 4;
        pointer-events: none;
    }

    body:not(.exp-page) .section8__phase8 .section8__canvas {
        padding: 0 0 48px;
    }

    body:not(.exp-page) .section8__phase8 .s8__intro {
        margin-top: 0 !important;
        margin-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ============================================================
   Phase 8 — Section 8 (Figma node 219:650, FRAME "Buttons").
   1440×551 canvas. Dark green linear-gradient (180°, #31332B → #607137).
   Four cards at y=76: event(295×395) + story(295×454) + event + story.
   ============================================================ */
.section8.section8__phase8 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    /* gradient comes from .phase-gradient-wrap */
    color: #FFFFFF;
    overflow: hidden;
    --canvas-scale: 1;
    /* Canvas is 1240px (was 1440 with internal 100px gutters baked into
       card positions). The 100px gutter now lives once on `.container`. */
    --canvas-w: 1240;
    /* Canvas height extended to 800 so the intro (heading + body) fits
       above the cards without overlapping the longest (454px) story card. */
    --canvas-h: 800;
}

.section8__phase8 .section8__viewport {
    position: relative;
    width: 100%;
    height: calc(var(--canvas-h) * 1px * var(--canvas-scale));
}

.section8__phase8 .section8__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--canvas-w) * 1px);
    height: calc(var(--canvas-h) * 1px);
    transform: translateX(-50%) scale(var(--canvas-scale));
    transform-origin: top center;
    overflow: hidden;
}

/* --- Track is a horizontal scroll-snap carousel on desktop too — cards flow
       in a row and the prev/next pager scrolls between them. The active-
       outline behavior was dropped; the pager moves scroll position now. --- */
.section8__phase8 .s8__track {
    position: absolute;
    top: 276px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-start;
}

.section8__phase8 .s8__track::-webkit-scrollbar {
    display: none;
}

/* --- Card sizing: width 295, height by type (events shorter than stories).
       Position-classes are kept for backward compatibility but only their
       height now matters; horizontal placement comes from the flex flow.
       Internal layout is a grid so pills + connector flow as a row no
       matter how wide the pill labels are (longer JSON labels were colliding
       with the absolute-coordinate connector). */
.section8__phase8 .s8__card[data-href] {
    cursor: pointer;
}

.section8__phase8 .s8__card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 295px;
    width: 295px;
    scroll-snap-align: start;
    display: grid;
    /* minmax(0, auto) lets long pill labels shrink and the connector keep at
       least 20px so the divider line always renders between the two pills. */
    grid-template-columns: minmax(0, auto) minmax(20px, 1fr) auto;
    /* Heading row is 1fr so it absorbs any leftover space — that pins
       the caption row to the bottom of the card even when content is
       shorter than the 418px min-height. */
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "media    media     media"
        "pillL    connector pillR"
        "heading  heading   heading"
        "caption  caption   caption";
    align-items: center;
    column-gap: 8px;
    row-gap: 14px;
}

/* Uniform card height across all variants — set to the tallest natural
   height we observe (captions wrap to 3 lines in the widest variant ≈
   427px). 1-line / 2-line caption cards (which would otherwise sit at
   418 / 426) get the leftover space absorbed by the heading row's 1fr,
   so the bottom edges of every card in the row line up to the pixel. */
.section8__phase8 .s8__card,
.section8__phase8 .s8__card--event,
.section8__phase8 .s8__card--story,
.section8__phase8 .s8__card--pos1,
.section8__phase8 .s8__card--pos2,
.section8__phase8 .s8__card--pos3,
.section8__phase8 .s8__card--pos4 {
    min-height: 427px;
    align-content: start;
}

/* --- Child placement inside the grid card (desktop). Mobile re-applies the
       same grid via its own rules below. The padding-top:100% trick forces a
       1:1 box regardless of grid context — aspect-ratio is unreliable when
       the only children are absolutely positioned. */
.section8__phase8 .s8__media {
    position: relative;
    grid-area: media;
    width: 100%;
    height: 0;
    padding-top: 100%;
}

.section8__phase8 .s8__pill {
    position: relative;
    left: auto;
    top: auto;
}

.section8__phase8 .s8__pill--event-left,
.section8__phase8 .s8__pill--story-left {
    grid-area: pillL;
    justify-self: start;
}

.section8__phase8 .s8__pill--event-right,
.section8__phase8 .s8__pill--story-right {
    grid-area: pillR;
    justify-self: end;
}

.section8__phase8 .s8__connector {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    grid-area: connector;
}

.section8__phase8 .s8__heading {
    position: relative;
    top: auto;
    width: 100%;
    grid-area: heading;
}

.section8__phase8 .s8__caption {
    position: relative;
    grid-area: caption;
    align-self: end;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Golos Text', 'Golos', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.28px;
    color: #FFFFFF;
}

/* --- Thumbnail wrapper (sits in the `media` grid area; aspect 1:1 at card
       width). The variant-specific children stack inside via absolute pos. */
.section8__phase8 .s8__media {
    display: block;
    box-sizing: border-box;
    border: 0;
    background: #2F2F2F;
    overflow: hidden;
}

/* --- story-duotone (Figma 317:1257): white bg + base portrait full-bleed +
       purple-tinted overlay portrait via mix-blend-mode: darken at 50% opacity. */
.section8__phase8 .s8__media--story-duotone {
    position: relative;
    background: #FFFFFF;
}

.section8__phase8 .s8__media--story-duotone .s8__media-base {
    position: absolute;
    /* Figma frame 294.988 — base img at left:-33, top:-25, w:328.324, h:529.239 */
    left: -11.19%;
    top: -8.47%;
    width: 111.3%;
    height: auto;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.section8__phase8 .s8__media--story-duotone .s8__media-overlay {
    position: absolute;
    /* overlay at left:61.95, top:26.28, w:379.54, h:506.054 — partial bleed */
    left: 21%;
    top: 8.9%;
    width: 128.7%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: darken;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

/* --- duotone (Card B-style): full-bleed photo + duotone overlay (mix-blend). */
.section8__phase8 .s8__media--duotone {
    position: relative;
    background: #272727;
}

.section8__phase8 .s8__media--duotone .s8__media-base {
    position: absolute;
    top: -8.25%;
    left: 0;
    width: 111.25%;
    height: 179.5%;
    object-fit: cover;
    z-index: 0;
}

.section8__phase8 .s8__media--duotone .s8__media-overlay {
    position: absolute;
    left: 30%;
    top: 7.5%;
    width: 80%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: darken;
    z-index: 1;
    pointer-events: none;
}

.section8__phase8 .s8__media--duotone.s8__media--duotone-full {
    background: transparent;
}

.section8__phase8 .s8__media--duotone.s8__media--duotone-full .s8__media-face {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- photo-only-547 (Cards C/I/M): light-gray bg + purple-face image. */
.section8__phase8 .s8__media--photo-547 {
    position: relative;
    background: #F2F2F2;
}

.section8__phase8 .s8__media--photo-547 .s8__media-face {
    position: absolute;
    left: 12.75%;
    top: 3.75%;
    width: 87.25%;
    height: 96.25%;
    object-fit: contain;
    object-position: bottom right;
}

.section8__phase8 .s8__media--photo-547.s8__media--photo-full {
    background: transparent;
}

.section8__phase8 .s8__media--photo-547.s8__media--photo-full .s8__media-face {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- photo-orange (Card H): full-bleed photo, no orange duotone overlay. */
.section8__phase8 .s8__media--photo-orange {
    position: relative;
    background: transparent;
}

.section8__phase8 .s8__media--photo-orange .s8__media-face {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
}

/* --- dark-polygons (Card F): dark bg + lime border + polygons SVG. */
.section8__phase8 .s8__media--polygons {
    position: relative;
    background: #272727;
}

.section8__phase8 .s8__media--polygons .s8__media-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- dark-diagonal (Cards E/K events): dark bg + inline diagonal lines. */
.section8__phase8 .s8__media--diagonal {
    position: relative;
    background: #272727;
}

.section8__phase8 .s8__media--diagonal .s8__media-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.section8__phase8 .s8__media--diagonal .s8__media-diagonal-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* --- dark-blurred (Cards G/J): dark bg + blurred photo + white mix-blend
       title centred over it. */
.section8__phase8 .s8__media--blurred {
    position: relative;
    background: #272727;
}

.section8__phase8 .s8__media--blurred .s8__media-blurred-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    transform: scale(1.05);
    pointer-events: none;
}

.section8__phase8 .s8__media--blurred .s8__media-blurred-photo--full {
    filter: none;
    transform: none;
}

.section8__phase8 .s8__media--blurred .s8__media-blurred-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    margin: 0;
    text-align: center;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
}

/* --- bordered (Cards A/L): flipped layout — pills on top, large heading
       in the middle, small portrait + caption at bottom-left. Different
       grid + sizing than the standard 295×295 media card. Card-wide 1px
       white outline per Figma 317:1251 (`border border-solid border-white`
       on the whole frame); painted via inset box-shadow + padding so the
       stroke sits inside the card's 295px width without shifting child
       grid columns. */
.section8__phase8 .s8__card--bordered {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "pillL    pillR"
        "heading  heading"
        "media    caption";
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
    box-shadow: inset 0 0 0 1px #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

/* Hover states: every card gets a pointer cursor; the --bordered variant
   swaps its white frame for lime, while every other variant gets a lime
   ring around its media only. */
.section8__phase8 .s8__track .s8__card {
    cursor: pointer;
}

.section8__phase8 .s8__card--bordered:hover {
    box-shadow: inset 0 0 0 1px var(--accent-lime);
}

.section8__phase8 .s8__card:not(.s8__card--bordered) .s8__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s ease;
    z-index: 1;
}

.section8__phase8 .s8__card:not(.s8__card--bordered):hover .s8__media::after {
    border-color: var(--accent-lime);
}

/* No connector between the two pills in this layout. */
.section8__phase8 .s8__card--bordered .s8__connector {
    display: none;
}

/* Push the right pill to the card's right edge instead of sitting next
   to the left pill (the connector that used to fill the gap is hidden). */
.section8__phase8 .s8__card--bordered .s8__pill--story-right,
.section8__phase8 .s8__card--bordered .s8__pill--event-right {
    justify-self: end;
}

/* Heading takes most of the card vertically — bigger type, no max-height. */
.section8__phase8 .s8__card--bordered .s8__heading {
    grid-area: heading;
    align-self: start;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}

/* Media shrinks to a small portrait at bottom-left (defeat the global
   padding-top:100% aspect trick by setting padding-top:0 + explicit
   dimensions). No outline either. */
.section8__phase8 .s8__card--bordered .s8__media {
    grid-area: media;
    align-self: end;
    width: 80px;
    height: 108px;
    padding-top: 0;
    box-shadow: none;
    background: transparent;
}

.section8__phase8 .s8__card--bordered .s8__media .s8__media-inset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

/* Caption sits next to the portrait, bottom-aligned with it. */
.section8__phase8 .s8__card--bordered .s8__caption {
    grid-area: caption;
    align-self: end;
    justify-self: start;
}

/* --- generic / fallback: full-bleed photo. */
.section8__phase8 .s8__media--generic {
    position: relative;
    background: #F2F2F2;
}

.section8__phase8 .s8__media--generic .s8__media-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Pills (shared) — positioning comes from the card's grid (pillL / pillR
       grid areas); this rule only sets the typography + box. -------------- */
.section8__phase8 .s8__pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23.6px;
    padding: 3.69px 11.06px 5.16px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.section8__phase8 .s8__pill--outline {
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    /* Long JSON labels (e.g. "О показателях эффективности") need to shrink
       inside the grid cell so the connector keeps space. The inner span
       handles ellipsis since text-overflow doesn't apply to direct text
       children of an inline-flex container. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.section8__phase8 .s8__pill-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section8__phase8 .s8__pill--white {
    background: #FFFFFF;
    color: #2F2F2F;
}

.section8__phase8 .s8__pill--lime {
    background: #C2F04F;
    color: #2F2F2F;
}

.section8__phase8 .s8__pill--story-left,
.section8__phase8 .s8__pill--story-right {
    border-radius: 73.75px;
}

/* --- Connector line between pills (grid: connector area) ----------------- */
.section8__phase8 .s8__connector {
    height: 1px;
    background: #FFFFFF;
    width: 100%;
}

/* --- Heading (Golos Medium 16 / 100% / -0.32px tracking) per Figma 317:1267.
       Placed via grid (heading area); typography + box only here. --- */
.section8__phase8 .s8__heading {
    width: 100%;
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
    color: #FFFFFF;
}

/* --- Pager (Figma 219:513): two chevrons in the bottom-right of canvas.
       Sits OUTSIDE the .s8__track so it doesn't translate with the cards.
       Layout: 52×23.5 group, 11.84-wide chevrons separated by ~16.5px gap. */
.section8__phase8 .s8__nav {
    position: absolute;
    right: 0;
    /* 100px gutter now provided by `.container` padding */
    bottom: 24px;
    /* canvas 600 − 24 − 23.5 = 552.5 top, ~22px below the longest card */
    display: flex;
    align-items: center;
    gap: 16.5px;
    z-index: 5;
}

.section8__phase8 .s8__nav-btn {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: content-box;
    width: 11.84px;
    height: 23.5px;
    padding: 4px;
    /* enlarges the click target without shifting the visual */
    margin: -4px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.section8__phase8 .s8__nav-btn svg {
    display: block;
    width: 11.84px;
    height: 23.5px;
}

.section8__phase8 .s8__nav-btn[disabled] {
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

.section8__phase8 .s8__nav-btn:not([disabled]):hover,
.section8__phase8 .s8__nav-btn:not([disabled]):focus-visible {
    opacity: 0.7;
}

/* --- Desktop intro: centered heading + 2-line body above the cards ------ */
.section8__phase8 .s8__intro {
    position: absolute;
    left: 0;
    top: 76px;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    z-index: 2;
}

.section8__phase8 .s8__intro-heading {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 110%;
    letter-spacing: -0.02em;
}

.section8__phase8 .s8__intro-underline {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.section8__phase8 .s8__intro-underline:hover,
.section8__phase8 .s8__intro-underline:focus-visible {
    color: inherit;
    opacity: 0.85;
}

.section8__phase8 .s8__intro-body {
    max-width: 720px;
    margin: 24px auto 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.section8__phase8 .s8__intro-body--mobile {
    display: none;
    /* mobile copy hidden on desktop */
}

/* --- Dots are mobile-only --- */
.section8__phase8 .s8__dots {
    display: none;
}

/* --- Mobile (≤770px): drop the absolute canvas, intro on top,
       cards become a horizontal scroll-snap carousel, dots replace chevrons. */
@media (max-width: 770px) {
    .section8__phase8 .section8__viewport {
        height: auto;
    }

    .section8__phase8 .section8__canvas {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        transform: none;
        padding: 32px 16px 48px;
        overflow: visible;
    }

    /* --- Intro block (heading + body) above the carousel ----------------- */
    .section8__phase8 .s8__intro {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        text-align: left;
        margin: 0 0 60px;
    }

    .section8__phase8 .s8__intro-heading {
        margin: 0 0 16px;
        font-size: 28px;
        line-height: 110%;
    }

    .section8__phase8 .s8__intro-underline {
        text-underline-offset: 4px;
    }

    .section8__phase8 .s8__intro-body {
        max-width: none;
        margin: 0;
        font-size: 16px;
    }

    .section8__phase8 .s8__intro-body--desktop {
        display: none;
        /* desktop copy hidden on mobile */
    }

    .section8__phase8 .s8__intro-body--mobile {
        display: block;
        /* mobile copy shown */
    }

    /* --- Track becomes a horizontal scroll-snap carousel ----------------- */
    .section8__phase8 .s8__track {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: row;
        gap: 16px;
        /* Equalise card heights: stretch every card to the tallest in the row
           (the desktop base sets align-items: flex-start, which left mobile
           cards at their differing content heights). Each card's 1fr heading
           row absorbs the slack, keeping captions pinned to the bottom. */
        align-items: stretch;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 -16px;
        /* let cards bleed to viewport edges */
        padding: 0 16px;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .section8__phase8 .s8__track::-webkit-scrollbar {
        display: none;
    }

    .section8__phase8 .s8__card[data-active="true"] .s8__media {
        outline: none;
        /* no active highlight on mobile */
    }

    .section8__phase8 .s8__nav {
        display: none;
        /* chevrons replaced by dots */
    }

    .section8__phase8 .s8__card,
    .section8__phase8 .s8__card--pos1,
    .section8__phase8 .s8__card--pos2,
    .section8__phase8 .s8__card--pos3,
    .section8__phase8 .s8__card--pos4 {
        position: relative;
        left: auto;
        top: auto;
        flex: 0 0 calc(100% - 0px);
        /* one full-width card per snap */
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "media    media     media"
            "pillL    connector pillR"
            "heading  heading   heading"
            "caption  caption   caption";
        align-items: center;
        column-gap: 8px;
        row-gap: 14px;
    }

    /* The bordered story card keeps its DESKTOP layout on mobile — pills on top,
       big heading, small portrait + caption pinned to the bottom — instead of
       adopting the generic full-width-photo grid above. Without this the generic
       4-row areas combined with the desktop bordered's leftover `1fr` row left
       the pills row stretching (huge gaps) while the photo stayed an 80×108
       thumbnail in the wrong spot. Re-asserting the 2-col / 3-row grid here
       (later in source, equal specificity) restores the intended composition. */
    .section8__phase8 .s8__card--bordered {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "pillL    pillR"
            "heading  heading"
            "media    caption";
        align-items: start;
        column-gap: 16px;
        row-gap: 16px;
    }

    .section8__phase8 .s8__card--bordered .s8__heading {
        /* 30px per spec; editorial line breaks come from the title's \n
           (Figma 286:3114). line-height/tracking kept from the master. */
        font-size: 30px;
        line-height: 1;
        letter-spacing: -0.02em;
        text-align: left;
    }

    .section8__phase8 .s8__media {
        position: relative;
        grid-area: media;
        width: 100%;
        height: 0;
        padding-top: 100%;
    }

    .section8__phase8 .s8__pill--event-left,
    .section8__phase8 .s8__pill--story-left {
        position: relative;
        left: auto;
        top: auto;
        grid-area: pillL;
        justify-self: start;
    }

    .section8__phase8 .s8__pill--event-right,
    .section8__phase8 .s8__pill--story-right {
        position: relative;
        left: auto;
        top: auto;
        grid-area: pillR;
        justify-self: end;
    }

    .section8__phase8 .s8__connector {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        grid-area: connector;
    }

    .section8__phase8 .s8__heading {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        grid-area: heading;
    }

    .section8__phase8 .s8__caption {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        grid-area: caption;
    }

    /* --- Carousel pagination dots --------------------------------------- */
    .section8__phase8 .s8__dots {
        display: flex;
        gap: 8px;
        margin: 24px 0 0;
        align-items: center;
        justify-content: flex-start;
    }

    .section8__phase8 .s8__dot {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 0;
        max-width: 80px;
        height: 2px;
        padding: 6px 0;
        /* enlarge tap target */
        margin: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        position: relative;
    }

    .section8__phase8 .s8__dot::before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.4);
        transition: background 0.2s ease;
    }

    .section8__phase8 .s8__dot[aria-current="true"]::before {
        background: #FFFFFF;
    }
}

/* ============================================================
   Phase 9 — Section 9 (Figma node 219:558, GROUP "Group 2136137724").
   1440×600 canvas; group is 1239.59×465.3 anchored at left:100, top:76.
   Heading + 4 partner columns + bottom-right pager.
   Continues Phase 8's dark green linear-gradient background.
   ============================================================ */
.section9.section9__phase9 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    /* gradient comes from .phase-gradient-wrap */
    color: #FFFFFF;
    overflow: hidden;
    --canvas-scale: 1;
    /* Canvas is 1240px (was 1440 with internal 100px gutters baked into
       column positions). The 100px gutter now lives once on `.container`. */
    --canvas-w: 1240;
    --canvas-h: 600;
}

.section9__phase9 .section9__viewport {
    position: relative;
    width: 100%;
    height: calc(var(--canvas-h) * 1px * var(--canvas-scale));
}

.section9__phase9 .section9__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--canvas-w) * 1px);
    height: calc(var(--canvas-h) * 1px);
    transform: translateX(-50%) scale(var(--canvas-scale));
    transform-origin: top center;
    overflow: hidden;
}

/* --- Heading: Golos Medium 40 / 120% / -2%, white, center ---------------- */
.section9__phase9 .s9__heading {
    position: absolute;
    left: 0;
    top: 76px;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* --- Partner columns: positioned exactly per Figma group children -------- */
.section9__phase9 .s9__col {
    position: absolute;
    top: 219.08px;
    /* 76 (group offset) + 143.08 (cards row offset) */
}

.section9__phase9 .s9__col--1 {
    left: 0;
    width: 292.26px;
    height: 287.92px;
}

.section9__phase9 .s9__col--2 {
    left: 315.37px;
    width: 294.37px;
    height: 239.92px;
}

.section9__phase9 .s9__col--3 {
    left: 629.85px;
    width: 294.44px;
    height: 191.92px;
}

.section9__phase9 .s9__col--4 {
    left: 945.22px;
    width: 294.37px;
    height: 239.92px;
}

/* Logo at top of column (per-logo offsets/dimensions from Figma) */
.section9__phase9 .s9__logo {
    position: absolute;
    top: 0;
    display: block;
    user-select: none;
}

.section9__phase9 .s9__logo--658 {
    left: 2.03px;
    width: 86.09px;
    height: 47.53px;
}

.section9__phase9 .s9__logo--656 {
    left: 0;
    width: 69.3px;
    height: 61.07px;
}

.section9__phase9 .s9__logo--657 {
    left: 2.13px;
    width: 144.46px;
    height: 43.7px;
}

/* Body copy: starts at y=95.92 inside the column, full column width */
.section9__phase9 .s9__col-text {
    position: absolute;
    top: 95.92px;
    left: 0;
    width: 100%;
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.section9__phase9 .s9__col-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity 0.18s ease;
}

.section9__phase9 .s9__col-link:hover,
.section9__phase9 .s9__col-link:focus-visible {
    opacity: 0.7;
}

/* --- Pager (Figma 219:560): chevrons in bottom-right, mirrors Phase 8 ---- */
.section9__phase9 .s9__nav {
    position: absolute;
    right: 1.3px;
    /* 100px gutter now provided by `.container` padding;
                                  pager is 1.3px shy of canvas right edge per Figma */
    bottom: 59px;
    /* canvas 600 − (517.8 + 23.5) = 58.7 */
    display: flex;
    align-items: center;
    gap: 16.5px;
    z-index: 5;
}

.section9__phase9 .s9__nav-btn {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: content-box;
    width: 11.84px;
    height: 23.5px;
    padding: 4px;
    margin: -4px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.section9__phase9 .s9__nav-btn svg {
    display: block;
    width: 11.84px;
    height: 23.5px;
}

.section9__phase9 .s9__nav-btn[disabled] {
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

.section9__phase9 .s9__nav-btn:not([disabled]):hover,
.section9__phase9 .s9__nav-btn:not([disabled]):focus-visible {
    opacity: 0.7;
}

/* --- Track is a no-op pass-through on desktop (columns position absolutely
       relative to the canvas as before). It only takes over as a flex
       carousel on mobile (see media query below). --- */
.section9__phase9 .s9__track {
    display: contents;
}

/* --- Mobile-only dots are hidden on desktop --- */
.section9__phase9 .s9__dots {
    display: none;
}

/* --- Mobile (≤770px): heading shrinks, columns become a horizontal
       scroll-snap carousel, dots replace the chevrons. --- */
@media (max-width: 770px) {
    .section9__phase9 .section9__viewport {
        height: auto;
    }

    .section9__phase9 .section9__canvas {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        transform: none;
        padding: 48px 16px 56px;
        overflow: visible;
    }

    .section9__phase9 .s9__heading {
        position: relative;
        left: auto;
        top: auto;
        font-size: 24px;
        margin-bottom: 32px;
        text-align: left;
    }

    /* Track becomes the horizontal scroll-snap container */
    .section9__phase9 .s9__track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 -16px;
        padding: 0 16px;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .section9__phase9 .s9__track::-webkit-scrollbar {
        display: none;
    }

    .section9__phase9 .s9__col,
    .section9__phase9 .s9__col--1,
    .section9__phase9 .s9__col--2,
    .section9__phase9 .s9__col--3,
    .section9__phase9 .s9__col--4 {
        position: relative;
        left: auto;
        top: auto;
        flex: 0 0 calc(100% - 0px);
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        padding-top: 80px;
        /* room for absolutely-positioned logo */
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .section9__phase9 .s9__col-text {
        position: relative;
        top: auto;
    }

    .section9__phase9 .s9__nav {
        display: none;
        /* chevrons replaced by dots */
    }

    /* --- Carousel pagination dots ----------------------------------------- */
    .section9__phase9 .s9__dots {
        display: flex;
        gap: 8px;
        margin: 24px 0 0;
        align-items: center;
        justify-content: flex-start;
    }

    .section9__phase9 .s9__dot {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 0;
        max-width: 80px;
        height: 2px;
        padding: 6px 0;
        margin: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        position: relative;
    }

    .section9__phase9 .s9__dot::before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.4);
        transition: background 0.2s ease;
    }

    .section9__phase9 .s9__dot[aria-current="true"]::before {
        background: #FFFFFF;
    }
}

/* ============================================================
   Phase 10 — Footer 1:1 (Figma node 219:2555).
   Frame 1440×450.805, dark #272727 bg.
   Left col (x=102..~590): logo + 2 description paragraphs +
     bottom row "Об организаторах" + TG/VK + 2026.
   Right col (x=836..1338, w=501): heading + email input + name
     input + 2 checkboxes + lime "Подписаться" button.
   These rules override the older main.css footer styles. They
   are scoped under `footer` so the popup-research form (which
   reuses .footer-input/.footer-btn) keeps its old look.
   ============================================================ */
footer {
    /* Two-column layout mirroring Figma's 1440 frame. The site
       .container caps at 1270 with 15px side-padding, giving
       ~1240 content width — close to Figma's 1236 (=1440−2×102),
       so no extra horizontal padding is needed inside footer. */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 56px 0 62px;
    background: #272727;
    color: #FFFFFF;
    box-sizing: border-box;
}

footer .footer-block {
    max-width: none;
    /* override main.css 500px cap */
}

footer .footer-block__1 {
    width: 588px;
    flex: 0 0 588px;
    display: flex;
    flex-direction: column;
}

footer .footer-block__2 {
    width: 501.162px;
    /* matches input width; button extends 4.534px left of column */
    flex: 0 0 501.162px;
    display: flex;
    flex-direction: column;
    /* Pin text4 at the top, form at the bottom — so the form's last
       row (the submit button) lines up with .footer-wrap2 in block 1. */
    justify-content: space-between;
}

/* --- Left column ---------------------------------------------------------- */
footer .footer-wrap1 {
    display: block;
    /* not flex; logo + p stack */
    margin: 0 0 24px;
}

footer .footer-logo {
    display: block;
    width: 186.475px;
    height: 68.925px;
    max-width: none;
    margin: 0 0 32px;
    cursor: pointer;
}

footer .footer-text1,
footer .footer-text2 {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}

footer .footer-text2 {
    margin-top: 24px;
}

footer .footer-wrap2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    /* pin to bottom of left column */
    padding-top: 80px;
    /* but leave breathing room above */
}

footer .footer-wrap3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

footer .footer-wrap4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

footer .footer-link1 {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

footer .footer-social {
    display: block;
    width: 35px;
    height: 35px;
    max-width: none;
}

footer .footer-text3 {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: #FFFFFF;
    margin: 0;
    /* Pin "2026" to the bottom of .footer-wrap2 (which has
       align-items: center for the rest of the row).               */
    align-self: flex-end;
}

/* --- Right column heading ------------------------------------------------- */
footer .footer-text4 {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 28px;
    max-width: none;
    width: auto;
}

/* --- Inputs (email then name): lime border, transparent bg --------------- */
footer .footer-input {
    display: block;
    box-sizing: border-box;
    width: 501.162px;
    max-width: 100%;
    height: 50.81px;
    padding: 0 24px;
    border: 1px solid #C2F04F;
    border-radius: 0;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.02em;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

footer .footer-input__email {
    margin-bottom: 7.4px;
    /* 206.519 − (148.332+50.81) ≈ 7.38 */
}

footer .footer-input__name {
    margin-bottom: 27px;
    /* 284.05 − (206.52+50.81) ≈ 26.72 */
}

footer .footer-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.02em;
}

footer .footer-input:focus {
    border-color: #C2F04F;
    box-shadow: 0 0 0 1px #C2F04F inset;
}

/* --- Checkboxes: 10.275 square, white stroke ----------------------------- */
footer .footer-checkbox__wrap {
    display: flex;
    flex-direction: column;
    gap: 11.7px;
    /* 306.14 − 284.05 − 10.275 ≈ 11.81 */
    margin-bottom: 23px;
    /* 339.67 − 316.41 ≈ 23.26 */
}

footer .footer-checkbox__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

footer .footer-checkbox__input {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: transparent;
    background-image: none !important;
    /* override main.css svg fallback */
    border: 1.5px solid #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    margin: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

footer .footer-checkbox__input:hover {
    border-color: #C2F04F;
}

footer .footer-checkbox__input:checked {
    background-color: #C2F04F !important;
    border-color: #C2F04F;
    /* Dark checkmark on lime fill so the "on" state is unmistakable */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6.5L5 9L9.5 3.5' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
}

footer .footer-checkbox__input:focus-visible {
    outline: 2px solid #C2F04F;
    outline-offset: 2px;
}

footer .footer-checkbox__span {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    cursor: pointer;
}

footer .footer-checkbox__span a,
footer .footer-checkbox__link {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* --- CTA button: white by default, lime once the form is fully valid ----- */
footer .footer-btn {
    display: block;
    width: 505.696px;
    max-width: calc(100% + 4.534px);
    height: 48.821px;
    margin: 0 0 0 -4.534px;
    /* extends 4.534px left of input column per Figma */
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 24.4105px;
    background: #FFFFFF;
    color: #272727;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.18s ease;
}

footer .subscribe:valid .footer-btn {
    background: #C2F04F;
    border-color: #C2F04F;
}

footer .footer-btn:hover,
footer .footer-btn:focus-visible {
    opacity: 0.85;
}

/* --- Mobile fallback (≤770px): stack columns; keep lime palette --------- */
@media (max-width: 770px) {
    footer {
        flex-direction: column;
        gap: 48px;
        padding: 32px 16px 36px;
    }

    footer .footer-block,
    footer .footer-block__1,
    footer .footer-block__2 {
        width: 100%;
        flex: 1 1 auto;
        max-width: none;
    }

    footer .footer-block__1 {
        order: 2;
    }

    footer .footer-block__2 {
        order: 1;
    }

    footer .footer-logo {
        width: 140px;
        height: auto;
        margin-bottom: 20px;
    }

    footer .footer-text1,
    footer .footer-text2,
    footer .footer-text4 {
        font-size: 16px;
    }

    footer .footer-text2 {
        margin-top: 16px;
    }

    footer .footer-wrap2 {
        padding-top: 32px;
        flex-wrap: wrap;
        row-gap: 16px;
    }

    footer .footer-input {
        width: 100%;
        height: 46px;
        font-size: 14px;
        padding: 0 16px;
    }

    footer .footer-input::placeholder {
        font-size: 14px;
    }

    footer .footer-btn {
        width: 100%;
        height: 46px;
        font-size: 16px;
    }
}


/* ==========================================================================
   ===  Research (research.html)  ==========================================
   Phases F0–F11. Page is the long-form research article reached via the
   "Посмотреть полный текст" CTA on the index. Layout 1:1 with Figma frame
   282:503 (1440 × ~13360). Phase boundaries mirror the section list in that
   frame (Y-coords given in each phase header).

   Reuse strategy:
     • <header>/.topnav, <footer>, .popup-research, .burger-menu — verbatim
       markup from index.html (same component instances in Figma).
     • Mega numbers, segmented toggle, body palette — reuse .s3p5__* (phase F7).
     • Lime brand row — reuse .hero__brand markup (same logo_specproject.svg,
       same 18.4px Golos type).
   New per-phase CSS uses the `fs-` prefix to namespace.
   ========================================================================== */


/* ============================================================
   Phase F1 — Hero (Figma 282:503 children, frame y=0..941)
   Children (frame coords; canvas-y = frame-y - 58 nav):
     282:531 brand strip      x=561.34   y=112    316.92x18.21
     282:546 4-line heading   x=232      y=151    976x353
     282:509 descriptor block x=-11      y=551    1452x390.63
   Hero canvas: 1440 × 883 (= 941-58).
   "Исследование" link in topnav becomes active (lime underline 115px).
   ============================================================ */

/* Active state for "Исследование" link — overrides the ::after underline
   width/offset that's otherwise sized for the 4-char "Тема" link.          */
.topnav .topnav__link--issledovanie.topnav__link--active {
    color: #FFFFFF;
    /* defeat the disabled-look 50% white */
}

.topnav .topnav__link--issledovanie.topnav__link--active::after {
    left: 0;
    width: 115px;
    /* matches link width (line 440) */
}

/* Active state for "Опыт" link — same pattern as Исследование, sized to the
   42px-wide "Опыт" link instead of the 46.65px-wide Тема default. */
.topnav .topnav__link--opyt.topnav__link--active {
    color: #FFFFFF;
}

.topnav .topnav__link--opyt.topnav__link--active::after {
    left: 0;
    width: 42px;
}

.topnav .topnav__link--about.topnav__link--active {
    color: #FFFFFF;
}

.topnav .topnav__link--about.topnav__link--active::after {
    left: 0;
    width: 144px;
    /* matches link width (line 872) */
}

/* Hero shell. Sits flush below <header> (which is 58 tall) — no top margin
   like .hero on the index, since the FullStudy hero canvas already includes
   the descriptor block within its own 883 height.                            */
.fs-hero {
    position: relative;
    width: 100%;
    background: var(--bg-primary);
    /* #272727 */
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-hero__canvas {
    position: relative;
    width: 1440px;
    height: 883px;
    /* frame y 58..941 */
    flex-shrink: 0;
    margin-top: 58px;
}

/* --- Brand strip (282:531 at frame 561.34, 112 → canvas y=54) ----------- */
/* Same content as .hero__brand; copy of those rules with the new canvas-y. */
.fs-hero__brand {
    position: absolute;
    left: 561.34px;
    top: 54px;
    /* 112 - 58 nav */
    width: 316.92px;
    height: 18.21px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19.14px;
    z-index: 5;
}

.fs-hero__brand-word {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 18.4px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-white);
    white-space: nowrap;
    text-transform: lowercase;
}

.fs-hero__brand-logo {
    width: 190.79px;
    height: 18.21px;
    display: block;
    flex-shrink: 0;
}

/* --- 4-line heading (282:546 group at frame 232, 151 → canvas y=93) ------ */
/* Group is 976×353. Lines absolutely positioned at their parent-relative
   (x, y) inside the group, with per-line line-height (99 / 90 / 80 / 80%).  */
.fs-hero__caption {
    position: absolute;
    left: 232px;
    top: 93px;
    /* 151 - 58 */
    width: 976px;
    height: 353px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 106.93px;
    letter-spacing: -0.04em;
    color: var(--text-white);
    z-index: 5;
}

.fs-hero__caption-line {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.fs-hero__caption-line--1 {
    /* "Исследование" — 137,0 722×106 99% */
    left: 137px;
    top: 0;
    width: 722px;
    height: 106px;
    line-height: 99%;
}

.fs-hero__caption-line--2 {
    /* "фандрайзеров"  — 0,94 728×96 90% */
    left: 0;
    top: 94px;
    width: 728px;
    height: 96px;
    line-height: 90%;
}

.fs-hero__caption-line--3 {
    /* "и их"          — 484,183 205×86 80% */
    left: 484px;
    top: 183px;
    width: 205px;
    height: 86px;
    line-height: 80%;
}

.fs-hero__caption-line--4 {
    /* "нанимателей"   — 321,267 655×86 80% */
    left: 321px;
    top: 267px;
    width: 655px;
    height: 86px;
    line-height: 80%;
}

/* --- Descriptor block (282:509 at frame -11, 551 → canvas y=493) ---------
   The block bleeds 11 px past the 1440 canvas's left edge. Children carry
   their parent-relative (x, y) from spec; the block is `position: relative`
   so absolute children resolve against it.                                  */
.fs-hero__intro {
    position: absolute;
    left: -11px;
    top: 493px;
    /* 551 - 58 */
    width: 1452px;
    height: 390.63px;
    z-index: 4;
    background: var(--bg-primary);
    /* dark backdrop so plus-lighter blend on the highlights below can
       lift the orange/purple against #272727 within this stacking context */
}

/* On desktop this wrapper is transparent so the four paragraphs stay
   absolutely positioned relative to .fs-hero__intro exactly as before. On
   mobile (below) it becomes a real block whose paragraphs flow inline as one
   continuous run of text. */
.fs-hero__intro-text {
    display: contents;
}

/* Body type: Golos 20 / 120% / -2% / weight 500 (style_10VK6G). */
.fs-hero__intro-body,
.fs-hero__intro-highlight {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
}

.fs-hero__intro-highlight {
    mix-blend-mode: plus-lighter;
}

/* Top half of 282:527 (white). The Figma layer is one tall paragraph with
   internal line-breaks, but the visible flow has two highlight inserts in
   the middle — so we split it into two CSS paragraphs (--1 above, --2 below
   the highlights) anchored at the spec's vertical positions.                */
.fs-hero__intro-body--1 {
    /* lines 1..3 of 282:527 */
    left: 226px;
    top: 0;
    width: 1020px;
    color: var(--text-white);
    text-align: center;
}

/* Continuation paragraph — sits below the two highlight lines. Spec doesn't
   give a separate y; derived as: highlight-purple (108) + highlight height
   (~14) + a small gap ≈ 145 px from the top of the descriptor block.       */
.fs-hero__intro-body--2 {
    left: 226px;
    top: 145px;
    width: 1020px;
    color: var(--text-white);
    text-align: center;
}

/* Highlight (282:526 orange — at parent-rel 0,81; full-bleed left). */
.fs-hero__intro-highlight--orange {
    left: 70px;
    top: 81px;
    width: 1020px;
    color: var(--color-orange);
    /* #FF6E32 */
}

/* Highlight (282:528 purple — at parent-rel 432,108; offset right). */
.fs-hero__intro-highlight--purple {
    left: 432px;
    top: 108px;
    width: 1020px;
    color: var(--color-purple);
    /* #AA6EFF */
}

/* Dividers (282:529 horizontal, 282:530 small vertical at the line break) -- */
.fs-hero__intro-divider--h {
    /* 791×1 at parent-rel 335,311 */
    position: absolute;
    left: 335px;
    top: 311px;
    width: 791px;
    height: 1px;
    background: var(--overlay-cream-50, rgba(255, 255, 255, 0.5));
}

.fs-hero__intro-divider--v {
    /* 1×16 at parent-rel 687,340 */
    position: absolute;
    left: 687px;
    top: 340px;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.5);
}

/* Sreda credit row (282:510 group at parent-rel 339, 341, 822×49). Inside:
   logo (121.51×44.97) + text-group (684×49). Implemented via flex.          */
.fs-hero__sreda {
    position: absolute;
    left: 339px;
    top: 341px;
    width: 822.16px;
    height: 49.63px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16.33px;
    /* 137.84 - 121.51 */
}

.fs-hero__sreda-logo {
    width: var(--site-logo-sreda-w);
    height: var(--site-logo-sreda-h);
    margin-top: 2.33px;
    /* spec offset */
    display: block;
    flex-shrink: 0;
    cursor: pointer;
}

.fs-hero__sreda-text {
    width: 684.33px;
    flex-shrink: 0;
}

.fs-hero__sreda-label {
    display: inline;
    margin: 0 20px 0 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #939393;
    white-space: nowrap;
    /* spec fill_UDZ6VF */
}

.fs-hero__sreda-body {
    display: inline;
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    opacity: 0.5;
    /* per spec opacity */
}


/* ============================================================
   FullStudy F1 — MOBILE (≤770px)
   Collapse the absolute hero canvas into a vertical stack:
     - brand row centered at top
     - 4-line caption stacked, smaller font
     - descriptor flows as plain prose with the highlights inline
       (still color-coded via colour classes)
     - sreda credit becomes a column
   ============================================================ */
@media (max-width: 770px) {
    .fs-hero {
        overflow: hidden;
    }

    .fs-hero__canvas {
        width: 100%;
        height: auto;
        padding: 32px 16px 48px;
        box-sizing: border-box;
    }

    .fs-hero__brand {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        justify-content: center;
        margin: 0 auto 32px;
    }

    /* Mobile caption — figma 4-row layout (image #45):
         «Исследование»  centred
         «фандрайзеров»  left-aligned
         «и их»          right-aligned
         «нанимателей»   centred                                       */
    .fs-hero__caption {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        font-size: clamp(28px, 11vw, 64px);
        margin: 0 auto 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .fs-hero__caption-line {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
        line-height: 1;
        display: block;
    }

    .fs-hero__caption-line--1 {
        text-align: center;
    }

    .fs-hero__caption-line--2 {
        text-align: left;
    }

    .fs-hero__caption-line--3 {
        text-align: right;
    }

    .fs-hero__caption-line--4 {
        text-align: center;
    }

    .fs-hero__intro {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Wrapper becomes a real block (order 0 → first), and its paragraphs flow
       inline so the whole intro reads as one continuous run of text with the
       orange/purple highlights inline. Whitespace between the <p> tags collapses
       to a single space, so the sentences join correctly. */
    .fs-hero__intro-text {
        display: block;
        order: 0;
        width: 100%;
        text-align: center;
    }

    .fs-hero__intro-body,
    .fs-hero__intro-highlight {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        font-size: 16px;
        line-height: 1.25;
        text-align: center;
    }

    .fs-hero__intro-text .fs-hero__intro-body,
    .fs-hero__intro-text .fs-hero__intro-highlight {
        display: inline;
        width: auto;
    }

    .fs-hero__intro-divider--h {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 16px 0 8px;
        order: 2;
        /* between label (1) and logo (3) */
    }

    .fs-hero__intro-divider--v {
        display: none;
        /* the small kink isn't meaningful at 1-col */
    }

    /* Flatten the sreda block so its children become flex siblings of
       .fs-hero__intro — lets us reorder them as: label → divider → logo → body. */
    .fs-hero__sreda {
        display: contents;
    }

    .fs-hero__sreda-text {
        display: contents;
    }

    .fs-hero__sreda-label {
        order: 1;
        width: 100%;
        text-align: center;
        /* 30px gap above the sreda credit. .fs-hero__sreda-text is display:contents
           (no box → can't take margin), so it goes on its first laid-out child. */
        margin-top: 30px;
    }

    .fs-hero__sreda-logo {
        order: 3;
        align-self: center;
        margin-top: 0;
    }

    .fs-hero__sreda-body {
        order: 4;
        width: 100%;
        text-align: center;
    }
}


/* ============================================================
   Phase F2 — Methodology block + PDF/scroll-down CTA
   (Figma 282:747 + 282:786, frame y=1078..2640, height 1562)

   The two groups visually overlap on the bottom 103 px (282:786 starts
   at 1755 while 282:747 ends at 1858) so they share a single 1440-wide
   canvas. The lime→transparent gradient rectangle (282:748) lives at the
   top half, fading out before the orbital-rings CTA art (282:800).

   Section-relative coordinates = frame-y - 1078 for y, and frame-x for x.
   ============================================================ */
.fs-f2 {
    position: relative;
    width: 100%;
    margin-top: 137px;
    /* gap from F1 hero (frame 1078 - 941) */
    background: var(--bg-primary);
    /* #272727 carries between groups */
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f2__canvas {
    position: relative;
    width: 1440px;
    height: 1562px;
    flex-shrink: 0;
}

/* --- 282:748 lime → transparent gradient rectangle (1441×643 at -1, 137).
   Spec: linear-gradient(180deg, #C2F04F 0%, rgba(47,47,47,0) 95%). The
   rectangle bleeds 1 px past the canvas's left edge per spec.            */
.fs-f2__gradient {
    position: absolute;
    left: -1px;
    top: 137px;
    width: 1441px;
    height: 643px;
    background: linear-gradient(180deg, #C2F04F -11.86%, rgba(47, 47, 47, 0) 94.97%);
    pointer-events: none;
    z-index: 0;
}

/* --- 282:751 grid-line texture (1482×387 at -31, 290), soft-light blend
   so the white strokes only modulate the lime gradient underneath.       */
.fs-f2__diagram {
    position: absolute;
    left: -31px;
    top: 290px;
    width: 1482px;
    height: 387px;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 1;
}

/* --- 282:749 heading "Как проводилось исследование" (275×57 at 104, 0). */
.fs-f2__heading {
    position: absolute;
    left: 104px;
    top: 0;
    width: 275px;
    height: 57px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    z-index: 3;
}

/* --- 282:750 lead body (945×40 at 100, 190). */
.fs-f2__lead {
    position: absolute;
    left: 100px;
    top: 190px;
    width: 945px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    z-index: 3;
}

/* --- 282:775 date label "Ноябрь 2025 — Январь 2026:" (281×14 at 231, 325). */
.fs-f2__date {
    position: absolute;
    left: 231px;
    top: 325px;
    width: 281px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    color: var(--text-white);
    z-index: 3;
}

/* --- 282:776..780 + 282:781..785: bulleted rows.
   Lime 9×9 round bullet at frame x=192 (canvas-x=192), text at x=231.
   Each row is positioned absolutely at its spec y.                        */
.fs-f2__list {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 3;
}

.fs-f2__row {
    position: absolute;
    left: 231px;
    width: 1003px;
    /* widest row (282:778) */
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: var(--text-white);
    letter-spacing: 0;
}

.fs-f2__row--label {
    line-height: 120%;
}

.fs-f2__row--stat {
    line-height: 90%;
}

.fs-f2__row--y397 {
    top: 388px;
    left: 225px
}

.fs-f2__row--y445 {
    top: 435px;
    left: 225px
}

.fs-f2__row--y494 {
    top: 484px;
    left: 225px
}

.fs-f2__row--y542 {
    top: 532px;
    left: 225px
}

.fs-f2__row--y590 {
    top: 580px;
    left: 225px
}

/* Lime 9×9 bullet rendered as ::before, sized + positioned to land at
   frame x=192 (39 px to the left of the row's text origin). Top is set
   per row-type so the dot is centered on the first line of text — the
   line-height differs between label (120%) and stat (90%) rows. */
.fs-f2__row::before {
    content: "";
    position: absolute;
    left: -39px;
    /* 192 - 231 */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C2F04F;
    /* fill_FHZNGA */
}

.fs-f2__row--label::before {
    top: calc(0.6em - 4.5px);
    /* center on 24px first line (line-height 120%) */
}

.fs-f2__row--stat::before {
    top: calc(0.45em - 4.5px);
    /* center on 18px first line (line-height 90%) */
}

/* ============================================================
   Phase F2 (cont.) — PDF/scroll-down CTA (282:786, frame x=160, y=1755).
   Section-relative offsets:  group-x = 160, group-y = 1755 - 1078 = 677.
   ============================================================ */

/* 282:800 decorative orbital-rings art. Spec layout box is 1119.91 × 873
   (parent-rel 0,0), but the source SVG (805 × 628 viewBox) has its rings
   filling its entire viewBox edge-to-edge. Stretching to spec box makes
   the rings reach down to y=1550 — covering where the hint paragraph sits
   (y=1519..1567). Figma's render of the same SVG looks softer because of
   the per-path mix-blend-mode: plus-lighter that an <img>-loaded SVG
   ignores. To match Figma's visible ring extent (≈ 80 % of the group),
   render the SVG at 80 % scale and centre it inside the spec layout box. */
/* CSS variable driven by JS on scroll; 0 when section enters from below,
   1 when it has fully passed the top. Used to rotate the orbital rings. */
@property --fs-f2-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.fs-f2__cta-art {
    position: absolute;
    left: calc(160px + (1119.91px - 900px) / 2);
    /* horizontally centred in group */
    top: calc(677px + (873px - 702px) / 2);
    /* vertically centred in group */
    width: 900px;
    height: 702px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    /* scroll-driven full 360° clockwise rotation (matches the index
       section6 rings exactly). At progress=0 and progress=1 the rings
       are at the same horizontal orientation; in between they sweep
       through a full revolution. 180° was tried first but left the
       chromatic strokes mirrored at the end — not horizontally
       identical to the start. */
    transform: rotate(calc(360deg * var(--fs-f2-progress, 0))) scale(0.9);
    transform-origin: 50% 50%;
    will-change: transform;
}

/* 282:787 PDF pill button.
   Spec layout chain (frame y=394 is the OUTER hug-frame x position; the
   ACTUAL button is the inner Frame 282:788 with FIXED dims 526.66 × 68.21
   per layout_6QCIGR — size we use here. Border-radius 121.5 px makes it
   a pill regardless of height. Text style: 21.06 / 42.62 px Golos Medium. */
.fs-f2__cta-pdf {
    position: absolute;
    left: calc(160px + 305.5px);
    /* group-x + inner-x */
    top: calc(677px + 394px);
    /* group-y + inner-y */
    width: 526.66px;
    height: 68.21px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 121.5px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 21.06px;
    line-height: 1;
    /* defer vertical centring to flex */
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    z-index: 4;
    transition: background 0.18s ease, color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fs-f2__cta-pdf:hover,
.fs-f2__cta-pdf:focus-visible {
    background: #FFFFFF;
    color: #2F2F2F;
}

/* 282:792 share affordance — icon LEFT, text RIGHT.
   Spec sub-coords:
     282:794 icon at (0, 5.21)        32.07 × 32.55
     282:793 text at (48.52, 0)       286 × 42
   Group at parent-rel (401.5, 488), w=334.52 h=42, opacity 0.6.            */
.fs-f2__cta-share {
    position: absolute;
    left: calc(160px + 401.5px);
    top: calc(677px + 488px);
    width: 334.52px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    opacity: 0.6;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16.45px;
    /* 48.52 - 32.07 */
    z-index: 4;
    text-align: left;
}

.fs-f2__cta-share-icon {
    width: 32.07px;
    height: 32.55px;
    display: block;
    flex-shrink: 0;
}

.fs-f2__cta-share-text {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 21.49px;
    line-height: 100%;
    letter-spacing: -0.02em;
}

.fs-f2__cta-share:hover {
    opacity: 1;
}

/* 282:799 vertical hairline divider (1×107 at parent-rel 433, 552).
   On scroll the height grows from 107 → 280 (stops 10px above the
   .fs-f2__cta-hint top), driven by --fs-f2-divider-progress (a separate
   var so it doesn't share with the rotation). Top-anchored, so growth
   extends downward toward the hint.                                   */
.fs-f2__cta-divider {
    position: absolute;
    left: 50%;
    top: calc(677px + 552px);
    width: 1px;
    height: calc(107px + 173px * var(--fs-f2-divider-progress, 0));
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    z-index: 4;
    will-change: height;
}

/* 282:814 "Ниже — кратко..." prompt (parent-rel 453.49, 842, w=400, h≈48).
   Wraps to 2 lines naturally — Figma puts "выводы" at the start of line 2
   with a 74×1 lime underline (Vector 7941 at sub-y=43, exactly under the
   "выводы" word). Implemented as a `.fs-f2__cta-hint-link` span with a
   ::after pseudo of the spec dimensions.                                    */
.fs-f2__cta-hint {
    position: absolute;
    left: calc(160px + 453.49px);
    top: calc(677px + 842px);
    width: 400px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #D9D9D9;
    z-index: 4;
}

.fs-f2__cta-hint-link {
    position: relative;
    display: inline-block;
}

.fs-f2__cta-hint-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    /* sits just under the baseline */
    width: 100%;
    /* matches the word width (≈74 px for "выводы") */
    height: 1px;
    background: #C3F150;
    /* spec stroke fill_R2K7DS */
}

/* Invisible on desktop — children keep absolute coords on the canvas. */
.fs-f2__cta-foot,
.fs-f2__cta-rail {
    display: contents;
}


/* --- F2 mobile (≤770px) --------------------------------------------------
   Per Figma: three stacked bands — (1) dark band with the heading,
   (2) lime green band with the lead, (3) dark band with grid texture
   carrying the date label and the bulleted list. CTA cluster follows.    */
@media (max-width: 770px) {
    .fs-f2 {
        margin-top: 0;
        overflow: hidden;
        background: var(--bg-primary);
    }

    /* Canvas carries the single lime → dark gradient that the lead, date,
       and list all sit on. Mirrors the desktop spec (282:748): solid lime
       at the top of the gradient zone, fading to transparent (= page dark)
       across the lead/date/list area. The heading sits above the gradient
       with its own opaque dark background, so the dark→lime boundary is
       always crisp regardless of how the heading text wraps.              */
    .fs-f2__canvas {
        width: 100%;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        background-color: var(--bg-primary);
        background-image: linear-gradient(to bottom,
                #A6C53B 0,
                #A6C53B 330px,
                rgba(39, 39, 39, 0) 770px);
        background-repeat: no-repeat;
    }

    /* Desktop overlays don't apply to the stacked mobile layout. */
    .fs-f2__gradient,
    .fs-f2__diagram {
        display: none !important;
    }

    /* Heading — opaque dark band at the top, hides the lime portion of
       the canvas gradient that sits behind it.                            */
    .fs-f2__heading {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 56px 24px 32px;
        box-sizing: border-box;
        font-size: 28px;
        line-height: 110%;
        font-weight: 500;
        background: var(--bg-primary);
        z-index: 2;
        order: 1;
    }

    /* Lead — transparent so the canvas gradient (solid lime in this band)
       reads through.                                                       */
    .fs-f2__lead {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0;
        padding: 32px 24px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 135%;
        font-weight: 500;
        background: transparent;
        z-index: 2;
        order: 2;
    }

    /* Date + list — transparent so the canvas gradient fades behind them.
       Notebook-style grid (horizontal rules every 24px + a thin pair of
       verticals at x=48/72) is layered on top via background-image so it
       sits over the gradient like the desktop study_method_diagram.svg.   */
    .fs-f2__date {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0;
        padding: 40px 24px 16px 80px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 500;
        line-height: 120%;
        z-index: 2;
        order: 3;
        background-color: transparent;
        background-image:
            linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
            linear-gradient(to right, transparent 47px, rgba(255, 255, 255, 0.12) 47px 48px, transparent 48px 71px, rgba(255, 255, 255, 0.12) 71px 72px, transparent 72px);
        background-size: 100% 24px, 100% 100%;
        background-repeat: repeat-y, no-repeat;
        background-position: 0 0, 0 0;
    }

    .fs-f2__list {
        position: relative;
        margin: 0;
        padding: 24px 24px 40px 0;
        list-style: none;
        z-index: 2;
        order: 4;
        display: flex;
        flex-direction: column;
        gap: 24px;
        background-color: transparent;
        background-image:
            linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
            linear-gradient(to right, transparent 47px, rgba(255, 255, 255, 0.12) 47px 48px, transparent 48px 71px, rgba(255, 255, 255, 0.12) 71px 72px, transparent 72px);
        background-size: 100% 24px, 100% 100%;
        background-repeat: repeat-y, no-repeat;
        background-position: 0 0, 0 0;
    }

    .fs-f2__row {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        padding-left: 80px;
        padding-right: 24px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        /* match the 24px grid-cell height so each text line sits inside one cell */
    }

    .fs-f2__row::before {
        left: 56px;
        width: 6px;
        height: 6px;
        transform: none;
    }

    .fs-f2__row--label::before,
    .fs-f2__row--stat::before {
        top: 9px;
        /* center on the first 24px grid cell: 12 (cell mid) - 3 (half dot) */
    }

    /* CTA art — wider/flatter ellipse per Figma; spans nearly the full
       viewport width and stays in the natural flow.                       */
    .fs-f2__cta-art {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 1119.91 / 873;
        margin: 24px 0 0;
        align-self: stretch;
        order: 5;
    }

    .fs-f2__cta-pdf,
    .fs-f2__cta-foot,
    .fs-f2__cta-rail,
    .fs-f2__cta-share,
    .fs-f2__cta-divider,
    .fs-f2__cta-hint {
        position: relative;
        left: auto !important;
        top: auto !important;
    }

    .fs-f2__cta-foot {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        max-width: calc(100% - 32px);
        margin: 19px auto 70px;
        align-self: center;
        order: 7;
        box-sizing: border-box;
    }

    .fs-f2__cta-rail {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 13px;
        margin-top: 15px;
        /* Vertical line aligned to the right edge of the share icon (23.876px). */
        padding-left: calc(23.876px - 1px);
        width: 100%;
        box-sizing: border-box;
    }

    /* Button — solid white pill with dark label, vertically centred on
       the rings. The rings are 100vw wide with aspect 1119.91/873, so
       their height is 100vw / 1.283 ≈ 78vw. Pull the button up by
       (rings_height + button_height) / 2 from the natural post-rings
       position so the button's centre lands on the rings' centre.        */
    .fs-f2__cta-pdf {
        /* Figma 282:1554 — 332×43 pill, 13.28px label, radius 76.59. */
        width: 332px;
        max-width: calc(100% - 32px);
        /* Pull up onto the rings' centre: -(rings_height + button_height)/2,
           rings_height ≈ 78vw, button 43 ⇒ -39vw - 21.5px. */
        margin: calc(-39vw - 21.5px) auto 0;
        padding: 0;
        height: 43px;
        border-radius: 76.59px !important;
        align-self: center;
        box-sizing: border-box;
        background: #FFFFFF !important;
        color: #272727 !important;
        opacity: 1 !important;
        border: 0;
        order: 6;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 13.28px;
        line-height: 26.87px;
        letter-spacing: -0.02em;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .fs-f2__cta-pdf:hover,
    .fs-f2__cta-pdf:focus-visible {
        background: #FFFFFF !important;
        color: #272727 !important;
        opacity: 1 !important;
        border-radius: 76.59px !important;
    }

    /* Share row — inside .fs-f2__cta-foot; 12px gap icon → text.            */
    .fs-f2__cta-share {
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        align-self: flex-start;
        gap: 12px;
        box-sizing: border-box;
    }

    .fs-f2__cta-share picture {
        display: block;
        flex-shrink: 0;
        line-height: 0;
    }

    /* Figma 282:1549: icon 23.876 × 24.227 (#D9D9D9 via mobile SVG).       */
    .fs-f2__cta-share-icon {
        width: 23.876px;
        height: 24.227px;
        display: block;
    }

    .fs-f2__cta-share-text {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: -0.02em;
    }

    /* Figma mobile: 1×142 vertical line under the share icon's right edge. */
    .fs-f2__cta-divider {
        width: 1px;
        height: 142px;
        margin: 0;
        padding: 0;
        transform: none;
        align-self: flex-start;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.8);
    }

    .fs-f2__cta-hint {
        width: auto;
        max-width: 240px;
        /* Text sits below the 142px line + 13px gap (Figma mobile). */
        margin: calc(142px + 13px) 0 0;
        padding: 0;
        text-align: left;
        font-family: 'Golos Text', 'Golos', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 120%;
        letter-spacing: -0.02em;
        color: #D9D9D9;
        align-self: flex-start;
        box-sizing: border-box;
    }

    .fs-f2__cta-hint-link::after {
        bottom: -2px;
        height: 1px;
        background: #C3F150;
    }
}


/* ============================================================
   Phase F3 — "Слово" block (Figma 282:551 + 282:507/508 + 282:847/890 +
   320:2124 + 282:848, frame y=2776..3723, height 947).

   Section-relative coords = frame-y - 2776:
     282:551 heading + lime underline   x=100  y=0
     282:507 left body                  x=101  y=143  609×248
     282:508 right body                 x=817  y=221  569×178
     282:847 "Слово:" label             x=100  y=467  367×28
     282:890 word-marquee SVG           x=180  y=512.5 1080×141.5
     320:2124 callout                   x=100  y=700  469×247
     282:848 stat box                   x=654  y=700  606×108
   ============================================================ */
.fs-f3 {
    position: relative;
    width: 100%;
    margin-top: 136px;
    /* gap from F2 (frame 2776 - 2640) */
    background: var(--bg-primary);
    /* #272727 */
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f3__canvas {
    position: relative;
    width: 1440px;
    height: 947px;
    flex-shrink: 0;
}

/* --- 282:551..553 heading + 249 px lime underline at sub-y=64 ---------- */
.fs-f3__heading {
    position: absolute;
    left: 100px;
    top: 0;
    width: 453px;
    height: 64px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f3__heading-underline {
    position: absolute;
    left: 41px;
    /* 141 (group-rel) - 100 (heading-left within container is 0; spec underline at sub-x=141, heading text starts at sub-x=0) */
    top: 64px;
    width: 249px;
    height: 1px;
    background: #C3F150;
    /* spec stroke fill_R2K7DS */
    pointer-events: none;
}

/* --- 282:507/508 body columns (Golos Medium 20 / 130 % / -2 %, white) -- */
.fs-f3__body {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f3__body--left {
    left: 101px;
    top: 143px;
    /* 2919 - 2776 */
    width: 609px;
    height: 248px;
}

.fs-f3__body--right {
    left: 817px;
    top: 221px;
    /* 2997 - 2776 */
    width: 569px;
    height: 178px;
}

.fs-f3__hl--orange {
    color: var(--color-orange);
}

/* #FF6E32 */
.fs-f3__hl--purple {
    color: var(--color-purple);
}

/* #AA6EFF */

/* --- 282:847 "Слово:" purple-90% large label ---------------------------- */
.fs-f3__label {
    position: absolute;
    left: 100px;
    top: 467px;
    /* 3243 - 2776 */
    width: 367px;
    height: 28px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 90%;
    letter-spacing: -0.02em;
    color: #AA6EFF;
}

/* --- 282:890 horizontal-words SVG (1080 × 141.5 at 180, 512.5) --------- */
/* Desktop scroll fade: --fs-f3-progress on .fs-f3 (JS), marquee img below.  */
@property --fs-f3-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.fs-f3__words-wrap {
    position: absolute;
    left: 180px;
    top: 512.5px;
    /* 3288.5 - 2776 */
    width: 1080px;
    height: 141.5px;
    pointer-events: none;
}

.fs-f3__words--desktop {
    display: block;
    width: 100%;
    height: 100%;
    opacity: calc(1 - 0.8 * var(--fs-f3-progress, 0));
    will-change: opacity;
}

/* Mobile wordmark fade (used only ≤770px; inert on desktop). */
@property --fs-f3-wordmark-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --fs-f3-wordmark-letters-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

/* Mobile inline wordmark — hidden on desktop. */
.fs-f3__wordmark {
    display: none;
}

/* --- 320:2124 big purple callout (40 / 100 % / -2 %, purple 90 % alpha) - */
.fs-f3__callout {
    position: absolute;
    left: 100px;
    top: 700px;
    /* 3476 - 2776 */
    width: 469px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: rgba(170, 110, 255, 0.9);
}

.fs-f3__callout-num {
    /* Same color/size as parent — span exists for future treatment hooks. */
}

/* --- 282:848 stat-box: 606 × 108 with 1 px white frame + center divider.
   Divider at sub-x=312 splits into left (312 wide) + right (294 wide).
   Lines (282:856..862) reproduced via container border + .stats-divider. - */
.fs-f3__stats {
    position: absolute;
    left: 654px;
    top: 700px;
    width: 606px;
    height: 108px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
}

.fs-f3__stats-divider {
    position: absolute;
    left: 312px;
    top: 0;
    width: 1px;
    height: 108px;
    background: #FFFFFF;
}

/* Stat cells. Left cell: text top, percent below.
   Right cell: percent top, text below.                                   */
.fs-f3__stat {
    position: absolute;
    margin: 0;
    padding: 0;
}

.fs-f3__stat--left {
    /* sub group 282:853 at (18, 19.44), 279×62.64 */
    left: 18px;
    top: 19.44px;
    width: 279px;
    height: 62.64px;
}

.fs-f3__stat--right {
    /* sub group 282:850 at (347, 19.44), 236×62.64 */
    left: 347px;
    top: 19.44px;
    width: 236px;
    height: 62.64px;
}

.fs-f3__stat-text,
.fs-f3__stat-percent {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.02em;
    left: 0;
}

.fs-f3__stat-text {
    line-height: 110%;
    color: var(--text-white);
}

.fs-f3__stat-percent {
    line-height: 120%;
    color: rgba(170, 110, 255, 0.9);
}

/* Left cell: text top:0 (h=38.88), percent top:44.28 */
.fs-f3__stat--left .fs-f3__stat-text {
    top: 0;
    width: 279px;
    height: 38.88px;
}

.fs-f3__stat--left .fs-f3__stat-percent {
    top: 44.28px;
    width: 251.13px;
    height: 18.36px;
}

/* Right cell: percent top:0 (h=15.12), text top:31.32 */
.fs-f3__stat--right .fs-f3__stat-percent {
    top: 0;
    width: 231px;
    height: 15.12px;
}

.fs-f3__stat--right .fs-f3__stat-text {
    top: 31.32px;
    width: 236px;
    height: 31.32px;
}


/* --- F3 mobile (≤770px) ----------------------------------------------- */
@media (max-width: 770px) {
    .fs-f3 {
        margin-top: 0;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .fs-f3__canvas {
        position: relative;
        width: 100%;
        height: auto;
        padding: 56px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Reset absolute positioning so all children flow vertically. */
    .fs-f3__heading,
    .fs-f3__body,
    .fs-f3__label,
    .fs-f3__words-wrap,
    .fs-f3__words--desktop,
    .fs-f3__wordmark,
    .fs-f3__callout,
    .fs-f3__stats {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .fs-f3__heading {
        margin: 0 0 56px;
        padding: 0;
        font-size: 28px;
        line-height: 120%;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    .fs-f3__heading-underline {
        position: absolute;
        left: 162px;
        top: calc(28px * 1.2 * 2 + 2px);
        width: 108px;
        height: 1px;
        background: #C3F150;
        display: block;
        pointer-events: none;
    }

    .fs-f3__body {
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 135%;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    .fs-f3__body--left {
        margin-bottom: 24px;
    }

    /* Collapse the in-paragraph <br><br> so the left column reads as a
       single visual paragraph (matches Figma reference where the break
       falls after "обязанностей.", which is mid-text in the HTML).      */
    .fs-f3__body--left br+br {
        display: none;
    }

    /* --- "Слово:" label + mobile fundraiser wordmark SVG -------------- */
    .fs-f3__label {
        display: block !important;
        margin: 64px 0 10px;
        padding: 0;
        font-family: 'Golos Text', 'Golos', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 90%;
        letter-spacing: 0;
        color: rgba(170, 110, 255, 1);
    }

    /* Mobile wordmark scroll fade — progress on .fs-f3__words-wrap only. */
    .fs-f3__words-wrap {
        position: relative;
        width: 313.74609375px;
        max-width: 100%;
        height: 272.470703125px;
        aspect-ratio: auto;
        margin: 0 auto;
        padding: 0;
        align-self: center;
        box-sizing: border-box;
        --fs-f3-wordmark-progress: 0;
        --fs-f3-wordmark-letters-opacity: calc(1 - 0.8 * var(--fs-f3-wordmark-progress));
    }

    .fs-f3__words--desktop {
        display: none !important;
    }

    .fs-f3__wordmark {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .fs-f3__wordmark-quotes,
    .fs-f3__wordmark-quotes path {
        opacity: 1;
    }

    .fs-f3__wordmark-letters > g {
        opacity: var(--fs-f3-wordmark-letters-opacity, 1);
        will-change: opacity;
        transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* --- Horizontal stats box: 2 cells with vertical divider ---------
       Goes between the stacked word and the big purple callout per the
       figma — flex `order` re-orders past the DOM (callout precedes
       stats in the HTML).                                              */
    .fs-f3__stats {
        display: flex !important;
        margin: 40px 0 0;
        height: auto;
        flex-direction: row;
        align-items: stretch;
        border: 0;
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        padding: 16px 0;
        box-sizing: border-box;
        order: 1;
    }

    .fs-f3__stats-divider {
        position: relative;
        left: auto;
        top: auto;
        width: 1px;
        height: auto;
        align-self: stretch;
        background: #FFFFFF;
        flex-shrink: 0;
        order: 1;
    }

    .fs-f3__stat {
        position: relative;
        left: auto !important;
        top: auto !important;
        flex: 1 1 0;
        width: auto;
        height: auto;
        padding: 0 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .fs-f3__stat--left {
        order: 0;
        padding-left: 0;
    }

    .fs-f3__stat--right {
        order: 2;
        padding-right: 0;
    }

    .fs-f3__stat .fs-f3__stat-text,
    .fs-f3__stat .fs-f3__stat-percent {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 130%;
        letter-spacing: -0.02em;
        margin: 0;
    }

    .fs-f3__stat-text {
        color: var(--text-white);
    }

    .fs-f3__stat-percent {
        color: rgba(170, 110, 255, 0.9);
    }

    /* Left cell: text first, percent below. Right cell: percent first, text below. */
    .fs-f3__stat--left .fs-f3__stat-text {
        order: 1;
    }

    .fs-f3__stat--left .fs-f3__stat-percent {
        order: 2;
    }

    .fs-f3__stat--right .fs-f3__stat-percent {
        order: 1;
    }

    .fs-f3__stat--right .fs-f3__stat-text {
        order: 2;
    }

    /* --- Big purple callout below the stats -------------------------- */
    .fs-f3__callout {
        display: block !important;
        margin: 40px 0 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: clamp(28px, 8vw, 36px);
        line-height: 105%;
        letter-spacing: -0.02em;
        color: rgba(170, 110, 255, 0.9);
        word-break: normal;
        overflow-wrap: break-word;
        order: 2;
    }

    .fs-f3__callout-num {
        color: inherit;
    }

}


/* ============================================================
   Phase F4 — "Наниматели — в регионах, фандрайзеры — в Москве"
   (Figma 282:743 + 282:723 + 282:722 + 282:719 + 282:731,
   frame y=3802..4604, height 802).

   Section-relative coords = frame-y - 3802:
     282:743 heading                  x=99   y=0    399×64
     282:723 left circles + caps      x=106  y=99   629×625
     282:722 right body               x=817  y=141  528×196
     282:719 right pull-quote         x=817  y=363  529×301
     282:731 audience toggle          x=99   y=730  610.55×72.9
   ============================================================ */
.fs-f4 {
    position: relative;
    width: 100%;
    margin-top: 79px;
    /* gap from F3 (frame 3802 - 3723) */
    background: var(--bg-primary);
    /* #272727 */
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f4__canvas {
    position: relative;
    width: 1440px;
    height: 803px;
    /* spec: 730 toggle-top + 72.9 toggle-h ≈ 803 */
    flex-shrink: 0;
}

/* --- 282:743..746 heading + two 1 px lime underlines ----------------- */
.fs-f4__heading {
    position: absolute;
    left: 99px;
    top: 0;
    width: 399px;
    height: 64px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* 282:745 underline 140 wide at sub (244, 29) — under "регионах" on line 1 */
.fs-f4__heading-u1 {
    position: absolute;
    left: 244px;
    top: 29px;
    width: 140px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

/* 282:746 underline 132 wide at sub (243, 64) — under "Москве" on line 2 */
.fs-f4__heading-u2 {
    position: absolute;
    left: 243px;
    top: 64px;
    width: 132px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

/* --- 282:723 left graphic: 2 outlined circles + 2 outlined percentages
   overlapping at the centre, plus 2 contrasting captions overlapping at
   the bottom (sub-y=562). The two captions deliberately occupy the same
   x/y so the chromatic effect emerges when both are visible (data-state).
   --------------------------------------------------------------------- */
.fs-f4__graph {
    position: absolute;
    left: 106px;
    top: 99px;
    /* 3901 - 3802 */
    width: 629.77px;
    height: 625.39px;
    /* spec ellipse bbox */
    isolation: isolate;
    /* contain plus-lighter blend to this graph */
    background: var(--bg-primary);
    /* dark backdrop inside the isolated context so plus-lighter on the
       caps/crescents has #272727 to lift against (matches .fs-f4 parent) */
}

/* --- Crescent pie shapes (the "C" / horseshoe shapes Figma actually
   uses for 282:729 + 282:730). Original ellipse bboxes:
     purple: 625.39 × 625.39 at sub (2.37, 0)    SVG content 354 × 449
     orange: 531.28 × 531.28 at sub (-0, 0.28)   SVG content 333 × 271
   The downloaded SVGs were tightened by Figma's MCP to just the visible
   path bbox, so we centre each SVG inside its spec ellipse bbox.           */
.fs-f4__graph-pac {
    position: absolute;
    pointer-events: none;
    display: block;
    overflow: visible;
}

.fs-f4__graph-pac--purple {
    /* SVG centred inside spec bbox 625.39 × 625.39 at sub (2.37, 0).
       Centre = (2.37 + 625.39/2, 0 + 625.39/2) = (315.07, 312.70).
       SVG natural 354 × 449 → top-left = (315.07 - 177, 312.70 - 224.5). */
    left: 150.07px;
    top: 88.20px;
    width: 354px;
    height: 449px;
}

.fs-f4__graph-pac--orange {
    /* Centre of spec bbox 531.28 × 531.28 at sub (0, 0.28) is
       (265.64, 265.92). SVG natural 333 × 271 → top-left
       (265.64 - 166.5, 265.92 - 135.5) = (99.14, 130.42). */
    left: 20.14px;
    top: 30.42px;
    width: 333px;
    height: 271px;
}

/* --- Chromatic mega numbers (mirrors .s3p5__mega in index).
   Each number splits into .fs-f4__graph-digits (digits with the colour
   stroke that matches the side) + .fs-f4__graph-suffix (the ",X%" tail
   in WHITE), so the two numbers blend additively in plus-lighter — orange
   + purple → near-white at overlap, suffix sits on top in pure white.    */
.fs-f4__graph-num {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 71.24px;
    line-height: 130%;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    text-shadow: none;
    background: transparent;
    pointer-events: none;
    white-space: nowrap;
    paint-order: stroke fill;
    mix-blend-mode: plus-lighter;
    transition: opacity 0.3s ease;
}

.fs-f4__graph-num--orange {
    left: 118px;
    top: 266.28px;
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f4__graph-num--orange .fs-f4__graph-digits {
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f4__graph-num--purple {
    left: 181px;
    top: 266.28px;
    -webkit-text-stroke-color: var(--color-purple);
}

.fs-f4__graph-num--purple .fs-f4__graph-digits {
    -webkit-text-stroke-color: var(--color-purple);
}

.fs-f4__graph-suffix {
    -webkit-text-stroke-color: #FFFFFF;
    /* white tail (",3%" / "%") */
}

/* --- State-driven visibility (same pattern as s3p5):
   data-state="fundraisers" → orange (employer) side fades to 10 %
   data-state="employers"   → purple (fundraiser) side fades to 10 %
   data-state="both" (default) shows both with chromatic blend.            */
.fs-f4[data-state="fundraisers"] .fs-f4__graph-num--orange,
.fs-f4[data-state="fundraisers"] .fs-f4__graph-pac--orange {
    opacity: 0.1;
    pointer-events: none;
}

.fs-f4[data-state="employers"] .fs-f4__graph-num--purple,
.fs-f4[data-state="employers"] .fs-f4__graph-pac--purple {
    opacity: 0.1;
    pointer-events: none;
}

.fs-f4__graph-pac {
    transition: opacity 0.3s ease;
}

/* Captions (282:724 purple + 282:725 orange). Spec puts both at sub (0, 562)
   — solid-fill brand text with mix-blend-mode: plus-lighter so the two
   colours additively blend against the dark canvas. */
.fs-f4__graph-cap {
    position: absolute;
    left: 0;
    top: 562px;
    width: 458px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    -webkit-text-stroke-width: 0;
    mix-blend-mode: plus-lighter;
    transition: opacity 0.3s ease;
}

.fs-f4__graph-cap--purple {
    color: var(--color-purple);
    mix-blend-mode: plus-lighter;
}

.fs-f4__graph-cap--orange {
    color: var(--color-orange);
    mix-blend-mode: plus-lighter;
}

/* Single-side toggle states fade out the other caption (mirrors
   .s3p5 outline / mega behavior). */
.fs-f4[data-state="fundraisers"] .fs-f4__graph-cap--orange {
    opacity: 0.1;
}

.fs-f4[data-state="employers"] .fs-f4__graph-cap--purple {
    opacity: 0.1;
}

/* --- 282:722 right body (Golos Medium 20 / 130 %, white) -------------- */
.fs-f4__body {
    position: absolute;
    left: 817px;
    top: 141px;
    /* 3943 - 3802 */
    width: 528px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* --- 282:719..721 right pull-quote (45 / 100 %, white) with 178 px lime
   underline at sub (273, 130). ---------------------------------------- */
.fs-f4__quote {
    position: absolute;
    left: 817px;
    top: 363px;
    /* 4165 - 3802 */
    width: 529px;
    height: 301px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f4__quote-underline {
    position: absolute;
    left: 273px;
    top: 130px;
    width: 178px;
    height: 1px;
    background: #C3F150;
    /* spec stroke fill_R2K7DS */
    pointer-events: none;
}

/* --- 282:731..742 audience toggle. Reuses .s3p5__toggle markup from index;
   overrides here are dimension-only (toggle is bigger in F4 vs s3p5).
   Spec: outer 610.55 × 72.9, active centre pill 200.88 × 61.56 at sub
   (204.83, 5.66). Segment text Golos Medium 20.79 / 110 % / -5 %.       */
.fs-f4 .s3p5__toggle {
    position: absolute;
    left: 99px;
    top: 730px;
    /* spec: 4532 - 3802 */
    width: 610.55px;
    height: 72.9px;
}

.fs-f4 .s3p5__toggle-inner {
    border-radius: 75.35px;
    /* spec — bigger pill than s3p5's 62.81 */
}

/* Bigger labels (20.79 vs 17.33 in s3p5) per spec. */
.fs-f4 .s3p5__seg-label,
.fs-f4 .s3p5__seg-pill-label {
    font-size: 20.79px;
}

/* Segment heights are bigger in F4 (text fits the bigger pill). */
.fs-f4 .s3p5__seg {
    height: 23px;
}

.fs-f4 .s3p5__seg--left {
    left: 34.66px;
    top: 24.59px;
    width: 132px;
}

.fs-f4 .s3p5__seg--right {
    left: 458.55px;
    top: 24.59px;
    width: 115px;
}

.fs-f4 .s3p5__seg--mid {
    left: 204.83px;
    top: 5.66px;
    width: 200.88px;
    height: 61.56px;
}

/* When the left or right side seg is active in F4, its ::before pill should
   match the centre pill's vertical extent (top 5.66 → bottom 67.22, height
   61.56). The 23 px text-line of the side seg sits at top:24.59, so we need
   to expand the pill by 18.93 px up and 19.63 px down to span the same y
   as the centre pill — overrides the default s3p5 -7 -16 inset.            */
.fs-f4 .s3p5__seg--left::before,
.fs-f4 .s3p5__seg--right::before {
    inset: -18.93px -16px -19.63px;
}


/* --- F4 mobile (≤770px) ---------------------------------------------- */
@media (max-width: 770px) {
    .fs-f4 {
        margin-top: 0;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .fs-f4__canvas {
        width: 100%;
        height: auto;
        padding: calc(40 / 390 * 100vw) calc(20 / 390 * 100vw) calc(48 / 390 * 100vw);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fs-f4__heading,
    .fs-f4__graph,
    .fs-f4__body,
    .fs-f4__quote {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .fs-f4__heading {
        font-size: calc(24 / 390 * 100vw);
        line-height: 115%;
        max-width: 100%;
        margin: 0;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    /* Lime underlines under "регионах" (line 1) and "Москве" (line 2).
       Anchored to viewport so they scale with the heading typography.  */
    .fs-f4__heading-u1,
    .fs-f4__heading-u2 {
        display: block;
        position: absolute;
        height: 1.5px;
        background: #C3F150;
        pointer-events: none;
    }

    /* Underlines positioned in em-units relative to the inherited
       heading font-size — that way they track the typography even if
       the line wraps slightly differently across viewports. */
    .fs-f4__heading-u1 {
        left: 7.6em;
        /* after "Наниматели — в " */
        top: 1.18em;
        /* just below line 1 baseline */
        width: 4.6em;
        /* spans "регионах" */
    }

    .fs-f4__heading-u2 {
        left: 8.4em;
        /* after "фандрайзеры — в " */
        top: 2.33em;
        /* just below line 2 baseline */
        width: 3.4em;
        /* spans "Москве" */
    }

    /* Pie chart — chromatic crescents (purple "C" 70 % + orange "C" 47,3 %)
       with mega numbers and overlapping captions, scaled to viewport.    */
    .fs-f4__graph {
        max-width: 100%;
        aspect-ratio: 1;
        margin: calc(8 / 430 * 100vw) auto 0;
        isolation: isolate;
        background: var(--bg-primary);
        /* dark backdrop for plus-lighter blend (mirrors desktop) */
    }

    .fs-f4__graph-pac {
        position: absolute;
        height: auto;
    }

    .fs-f4__graph-pac--purple {
        left: calc(150.07 / 629.77 * 100%);
        top: calc(88.20 / 625.39 * 100%);
        width: calc(354 / 629.77 * 100%);
        aspect-ratio: 354 / 449;
        transform: none;
    }

    .fs-f4__graph-pac--orange {
        left: calc(20.14 / 629.77 * 100%);
        top: calc(30.42 / 625.39 * 100%);
        width: calc(333 / 629.77 * 100%);
        aspect-ratio: 333 / 271;
        transform: none;
    }

    /* Mega numbers — both anchored to the SAME starting X so digits
       chromatically overlap into "40,3 %" per Figma:
         pos 0: orange "4" + purple "7" → reads "4"
         pos 1: orange "7" + purple "0" → reads "0"
         pos 2: orange "," + purple "%" → reads ","
         pos 3-4: orange ",3%" tail
       The orange (5 chars, the wider one) is centred on the chart and
       purple inherits the same LEFT edge — `text-align: left` keeps
       both starting from the same x.                                  */
    .fs-f4__graph-num {
        position: absolute;
        top: 50%;
        font-size: clamp(48px, 14vw, 64px);
        line-height: 100%;
        letter-spacing: 0;
        white-space: nowrap;
        /* 2 px stroke matches the s3p5__mega chromatic look — at this
           thickness the orange + purple plus-lighter overlap reads as
           near-white where the strokes intersect.                      */
        -webkit-text-stroke-width: 2px;
        mix-blend-mode: plus-lighter;
        text-align: left;
    }

    .fs-f4__graph-num--orange {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Place purple's left edge at orange's left edge (orange ~2.6em
       wide, centred → its left edge sits at 50% − 1.3em).             */
    .fs-f4__graph-num--purple {
        left: 50%;
        transform: translate(-1.3em, -50%);
    }

    /* Mobile override: the comma, fractional digits and "%" should
       also be coloured (figma reference) rather than the desktop's
       white suffix-tail.                                              */
    .fs-f4__graph-num--orange .fs-f4__graph-suffix {
        -webkit-text-stroke-color: var(--color-orange);
    }

    .fs-f4__graph-num--purple .fs-f4__graph-suffix {
        -webkit-text-stroke-color: var(--color-purple);
    }

    /* Captions overlap chromatically near the bottom of the chart,
       same outline-stroke + plus-lighter pattern as desktop.         */
    .fs-f4__graph-cap {
        position: absolute;
        left: 0 !important;
        top: auto !important;
        bottom: calc(28 / 629.77 * 100%);
        width: 100%;
        font-size: calc(14 / 430 * 100vw);
        line-height: 120%;
        letter-spacing: -0.02em;
        text-align: left;
        margin: 0;
        padding: 0 calc(8 / 430 * 100vw);
        box-sizing: border-box;
        mix-blend-mode: plus-lighter;
    }

    .fs-f4__graph-cap--orange {
        margin-top: 0;
    }

    /* On mobile, hide the inactive side completely instead of fading
       to opacity 0.1 — at small sizes plus-lighter blend makes 10%
       still readable, which clutters the single-side states.         */
    .fs-f4[data-state="fundraisers"] .fs-f4__graph-num--orange,
    .fs-f4[data-state="fundraisers"] .fs-f4__graph-pac--orange,
    .fs-f4[data-state="fundraisers"] .fs-f4__graph-cap--orange,
    .fs-f4[data-state="employers"] .fs-f4__graph-num--purple,
    .fs-f4[data-state="employers"] .fs-f4__graph-pac--purple,
    .fs-f4[data-state="employers"] .fs-f4__graph-cap--purple {
        opacity: 0;
    }

    /* Stacking order on mobile: heading → graph → toggle → quote → body */
    .fs-f4__heading {
        order: 1;
    }

    .fs-f4__graph {
        order: 2;
    }

    .fs-f4 .s3p5__toggle {
        order: 3;
    }

    .fs-f4__quote {
        order: 4;
    }

    .fs-f4__body {
        order: 5;
    }

    .fs-f4__quote {
        margin: calc(56 / 430 * 100vw) 0 0;
        padding: 0;
        max-width: 14ch;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 105%;
        letter-spacing: -0.04em;
        color: var(--text-white);
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .fs-f4__quote-underline {
        display: none;
    }

    .fs-f4__body {
        margin: calc(24 / 430 * 100vw) 0 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 135%;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    /* .fs-f4__body-mark picks up underline from the global LIME
       UNDERLINE RULE (`[class*="-mark"]`) at top of file. */

    /* Toggle — white-pill style (active "обе стороны" centred). Reuses the
       s3p5 markup; only outer dimensions + segment positions are mobile.   */
    /* Match the index page (.section3__phase5) mobile toggle exactly:
       40 px tall bar, 11 px labels, side segs 28 % wide, mid 32.9 % at
       33.6 %, all flush-top at 3 px / 34 px tall.                       */
    .fs-f4 .s3p5__toggle {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
        height: 40px;
        margin: 24px auto 0;
    }

    .fs-f4 .s3p5__seg-label,
    .fs-f4 .s3p5__seg-pill-label {
        font-size: 11px;
        line-height: 34px;
        display: block;
    }

    .fs-f4 .s3p5__seg--left .s3p5__seg-label,
    .fs-f4 .s3p5__seg--right .s3p5__seg-label {
        text-align: left;
        width: 100%;
    }

    .fs-f4 .s3p5__seg--left {
        left: 2%;
        top: 3px;
        width: 28%;
        height: 34px;
        padding-left: 12px;
        transform: none;
    }

    .fs-f4 .s3p5__seg--right {
        left: 70%;
        right: auto;
        top: 3px;
        width: 28%;
        height: 34px;
        padding-left: 12px;
        transform: none;
    }

    .fs-f4 .s3p5__seg--mid {
        left: 33.6%;
        top: 3px;
        width: 32.9%;
        height: 34px;
        min-height: 0;
        transform: none;
    }

    /* Active-side pill spans the full bar (matches s3p5 mobile). */
    .fs-f4 .s3p5__seg::before {
        inset: 0;
    }

    .fs-f4 .s3p5__seg--left::before,
    .fs-f4 .s3p5__seg--right::before {
        inset: 0;
    }
}


/* ============================================================
   Phase F5 — "Разные поколения, разное образование"
   (Figma 282:579 + 282:646, frame y=4748..5912, height 1164).

   Section-relative coords = frame-y - 4748:
     282:579 education block:  x=98  y=0    1240×640.87
       heading + underline      x=100 y=0    331×57   (underline 107×1 at y=27)
       body                     x=100 y=133  610×118
       chart (2 cells)          x=98  y=309  1240×242
         left  cell (purple)    x=98  w=822  rounded 60.51
         right cell (orange)    x=936 w=402
       legend                   x=367 y=605  705×35.87
     282:646 generations:       x=367 y=744  705.05×420.87
       blob-orange              x=771 y=744  216×214
       blob-purple              x=509 y=800  103×101
       callout (orange)         x=457 y=1000 525×75   24/120% wt 500
       legend                   x=367 y=1129 705×35.87
   ============================================================ */
.fs-f5 {
    position: relative;
    width: 100%;
    margin-top: 143px;
    /* gap from F4 (frame 4748 - 4605) */
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f5__canvas {
    position: relative;
    width: 1440px;
    height: 1165px;
    /* spec: 1129 + 35.87 ≈ 1165 */
    flex-shrink: 0;
}

/* --- 282:581..583 heading + lime underline -------------------------- */
.fs-f5__edu-heading {
    position: absolute;
    left: 100px;
    top: 0;
    width: 331px;
    height: 57px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f5__edu-heading-underline {
    /* 282:583 Vector 7943: 107×1 lime stroke at sub (0, 27) */
    position: absolute;
    left: 0;
    top: 27px;
    width: 107px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

/* --- 282:580 body paragraph ---------------------------------------- */
.fs-f5__edu-body {
    position: absolute;
    left: 100px;
    top: 133px;
    width: 610px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* --- 282:584 chart container -------------------------------------- */
.fs-f5__chart {
    position: absolute;
    left: 98px;
    top: 309px;
    width: 1240px;
    height: 242px;
}

/* Two stroked rounded rectangles with internal text + mega percent.
   Two states driven by data-state on .fs-f5:
     "humanitarian" (default): purple wide LEFT (822) + orange narrow RIGHT (402)
                                — corresponds to humanitarian-education stats
     "technical":              purple narrow LEFT (403) + orange wide RIGHT (813)
                                — corresponds to technical-education stats
   Cells animate with a smooth width/left/top transition.                  */
.fs-f5__chart-cell {
    position: absolute;
    top: 0;
    height: 242px;
    border: 1px solid;
    border-radius: 60.51px;
    box-sizing: border-box;
    transition: left 0.4s ease, width 0.4s ease, border-color 0.3s ease, border-radius 0.3s ease;
}

@media (min-width: 771px) {
    .fs-f5[data-state="technical"] .fs-f5__chart-cell {
        border-radius: 0;
    }
}

.fs-f5[data-state="humanitarian"] .fs-f5__chart-cell--purple {
    left: 0;
    width: 822px;
    border-color: var(--color-purple);
}

.fs-f5[data-state="humanitarian"] .fs-f5__chart-cell--orange {
    left: 838px;
    width: 402px;
    border-color: var(--color-orange);
}

.fs-f5[data-state="technical"] .fs-f5__chart-cell--purple {
    left: 0;
    width: 402.98px;
    border-color: var(--color-purple);
}

.fs-f5[data-state="technical"] .fs-f5__chart-cell--orange {
    left: 426px;
    width: 812.98px;
    border-color: var(--color-orange);
}

/* Mega percent — sibling of cells, fixed coords on the chart canvas.
   Stays put when the cell frames swap proportions on toggle.
   Coords match the centre of state-1 cells:
     purple cell state-1: left:0   width:822 → centre x = 411
     orange cell state-1: left:838 width:402 → centre x = 1039          */
.fs-f5__chart-num {
    position: absolute;
    top: 42px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 100px;
    line-height: 120%;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.fs-f5__chart-num--purple {
    left: 240px;
    color: var(--color-purple);
    transition: left 0.4s ease;
}

@media (min-width: 771px) {
    .fs-f5[data-state="technical"] .fs-f5__chart-num--purple {
        left: 201px;
        /* centred inside the narrower 402.98 px technical-state cell */
    }
}

.fs-f5__chart-num--orange {
    left: 1039px;
    color: var(--color-orange);
}

/* Body text — sibling of cells, fixed coords on the chart canvas.
   Doesn't move when cell frames swap proportions.
     purple text state-1: cell-left 0   + sub-x 40 → absolute 40
     orange text state-1: cell-left 838 + sub-x 51 → absolute 889       */
.fs-f5__chart-text {
    position: absolute;
    top: 161px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    text-align: center;
    transform: translateX(-50%);
}

.fs-f5__chart-text--purple {
    left: 240px;
    width: 371px;
    color: var(--color-purple);
    transition: left 0.4s ease, width 0.4s ease;
}

@media (min-width: 771px) {
    .fs-f5[data-state="technical"] .fs-f5__chart-text--purple {
        left: 201px;
        width: 320px;
        /* centred under the number in the narrower technical cell */
    }
}

.fs-f5__chart-text--orange {
    left: 1039px;
    width: 300px;
    color: var(--color-orange);
}

/* State-driven text swap: only the [data-show] matching the section's
   data-state is visible; siblings are hidden.                          */
.fs-f5 [data-show] {
    display: none;
}

.fs-f5[data-state="humanitarian"] [data-show="humanitarian"] {
    display: inline;
}

.fs-f5[data-state="technical"] [data-show="technical"] {
    display: inline;
}

/* --- 282:591 / 282:650 legend rows ---------------------------------
   Both legends share a 4-column grid: swatch | text | swatch | text.
   The two text columns each take 1fr of the remaining space, so the
   second swatch sits at the same X in --edu and --gen regardless of
   how long the first text is.                                       */
.fs-f5__legend {
    position: absolute;
    left: 367px;
    width: 705px;
    height: 35.87px;
    display: grid;
    grid-template-columns: 35.87px minmax(0, 1fr) 35.87px minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    /* 46.45 - 35.87 ≈ 10.6 */
}

.fs-f5__legend--edu {
    top: 605px;
}

.fs-f5__legend--gen {
    top: 1129px;
}

/* Swatch is a 35.87 × 35.87 white circle, also acts as a toggle button
   (legend doubles as the chart-state selector). Active state shows a
   16px black dot in the centre via ::after.                            */
.fs-f5__legend-swatch {
    position: relative;
    width: 35.87px;
    height: 35.87px;
    border-radius: 50%;
    background: var(--text-white);
    flex-shrink: 0;
    /* button-element defaults reset */
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.fs-f5__legend-swatch:focus-visible {
    outline: 2px solid var(--accent-lime, #C2F04F);
    outline-offset: 4px;
}

/* Active-state 16px black dot. Triggers:
     • .fs-f5__legend-swatch.is-selected → per-swatch (class-based)      */
.fs-f5__legend-swatch.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    transform: translate(-50%, -50%);
}

.fs-f5__legend-text {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 90%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    white-space: nowrap;
}

/* --- 282:646 generations panel ------------------------------------- */
.fs-f5__gen {
    position: absolute;
    left: 367px;
    top: 744px;
    /* 5492 - 4748 */
    width: 705.05px;
    height: 420.87px;
}

/* Two starburst slots — purple (LEFT) and orange (RIGHT). Each slot is
   positioned at its BIG bounding box (216 × 214) and ALWAYS rendered at
   that size. To produce the "small" state we shrink it via transform:
   scale(); the visual centre is preserved so the SUN grows / shrinks in
   place. The big bounding boxes are mirrored horizontally:
     purple slot big bbox: left 85,  top 0  (centre ≈ 193, 107)
     orange slot big bbox: left 404, top 0  (centre ≈ 512, 107)
   In each state, ONE slot is at scale 1 (big), the other at scale ≈0.477
   (≈ 103 / 216, matching the original small spec).                       */
.fs-f5__gen-blob {
    position: absolute;
    pointer-events: none;
    display: block;
    width: 216px;
    height: 214px;
    transform-origin: 50% 50%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.fs-f5__gen-blob--purple-slot {
    left: 85px;
    top: 0;
}

.fs-f5__gen-blob--orange-slot {
    left: 404px;
    top: 0;
}

/* "older" — orange BIG, purple shrunk small.                            */
.fs-f5[data-state-gen="older"] .fs-f5__gen-blob--orange-slot {
    transform: scale(1);
}

.fs-f5[data-state-gen="older"] .fs-f5__gen-blob--purple-slot {
    transform: scale(0.477);
}

/* "younger" — purple BIG, orange shrunk small.                          */
.fs-f5[data-state-gen="younger"] .fs-f5__gen-blob--purple-slot {
    transform: scale(1);
}

.fs-f5[data-state-gen="younger"] .fs-f5__gen-blob--orange-slot {
    transform: scale(0.477);
}

/* Body copy swap: only the [data-show-gen] matching the current state
   is visible; the other is hidden via display.                          */
.fs-f5__gen [data-show-gen] {
    display: none;
}

.fs-f5[data-state-gen="older"] .fs-f5__gen-body [data-show-gen="older"] {
    display: inline;
}

.fs-f5[data-state-gen="younger"] .fs-f5__gen-body [data-show-gen="younger"] {
    display: inline;
}

.fs-f5__gen-body {
    position: absolute;
    left: 90px;
    top: 256px;
    width: 525px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.02em;
}

.fs-f5[data-state-gen="older"] .fs-f5__gen-body {
    color: var(--color-orange);
    text-align: center;
}

.fs-f5[data-state-gen="younger"] .fs-f5__gen-body {
    color: var(--color-purple);
    text-align: center;
}


/* --- F5 mobile (≤770px) ------------------------------------------- */
@media (max-width: 770px) {
    .fs-f5 {
        margin-top: 15px;
        overflow: hidden;
    }

    .fs-f5__canvas {
        width: 100%;
        height: auto;
        padding: 32px 16px 48px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fs-f5__edu-heading,
    .fs-f5__edu-body,
    .fs-f5__chart,
    .fs-f5__legend,
    .fs-f5__gen {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .fs-f5__edu-heading {
        font-size: 25px;
        line-height: 120%;
        max-width: 320px;
        margin-bottom: 16px;
    }

    /* .fs-f5__edu-heading-mark picks up underline from the global LIME
       UNDERLINE RULE (`[class*="__edu-heading-mark"]`) at top of file. */

    /* Underline lives below the desktop heading line; hide on mobile
       to avoid striking through the wrapped body copy.               */
    .fs-f5__edu-heading-underline {
        display: none !important;
    }

    .fs-f5__edu-body {
        font-size: 16px;
        line-height: 130%;
        margin-bottom: 24px;
    }

    /* Two outlined rounded-rect cards laid side by side via grid;
       percent + body text are SIBLINGS of the cells but pinned into
       the same grid cells via grid-column / grid-row, so they stack
       inside the visual card box.                                    */
    .fs-f5__chart {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
    }

    .fs-f5__chart-cell {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto;
        padding: 0;
        border: 1.5px solid;
        border-radius: 24px;
        background: transparent;
        align-self: stretch;
        justify-self: stretch;
        transition: none;
    }

    .fs-f5__chart-cell--purple {
        grid-column: 1;
        grid-row: 1;
        border-color: var(--color-purple) !important;
    }

    .fs-f5__chart-cell--orange {
        grid-column: 2;
        grid-row: 1;
        border-color: var(--color-orange) !important;
    }

    /* Per-state heights: humanitarian → purple is the taller card.  */
    .fs-f5[data-state="humanitarian"] .fs-f5__chart-cell--purple {
        height: calc(60vw + 60px);
    }

    .fs-f5[data-state="humanitarian"] .fs-f5__chart-cell--orange {
        height: calc(38vw + 30px);
    }

    .fs-f5[data-state="technical"] .fs-f5__chart-cell--purple {
        height: calc(38vw + 30px);
    }

    .fs-f5[data-state="technical"] .fs-f5__chart-cell--orange {
        height: calc(60vw + 60px);
    }

    .fs-f5[data-state="technical"] .fs-f5__chart-cell {
        border-radius: 0;
    }

    .fs-f5__chart-num {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none;
        margin: 0;
        padding: 24px 0 0 24px;
        font-size: 48px;
        line-height: 110%;
        display: block;
        text-align: left;
        align-self: start;
    }

    .fs-f5__chart-num--purple {
        grid-column: 1;
        grid-row: 1;
    }

    .fs-f5__chart-num--orange {
        grid-column: 2;
        grid-row: 1;
    }

    .fs-f5__chart-text {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto;
        margin: 0;
        padding: 88px 20px 0 24px;
        font-size: 13px;
        line-height: 125%;
        font-weight: 600;
        align-self: start;
        transform: none;
        text-align: left;
    }

    .fs-f5__chart-text--purple {
        grid-column: 1;
        grid-row: 1;
    }

    .fs-f5__chart-text--orange {
        grid-column: 2;
        grid-row: 1;
    }

    /* Legends — inline 4-column grid (swatch + text x 2).           */
    .fs-f5__legend {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 28px minmax(0, 1fr);
        column-gap: 10px;
        align-items: center;
    }

    .fs-f5__legend--edu {
        margin-top: 24px;
    }

    .fs-f5__legend--gen {
        margin-top: 24px;
    }

    .fs-f5__legend-swatch {
        width: 28px;
        height: 28px;
    }

    .fs-f5__legend-swatch.is-selected::after {
        width: 12px;
        height: 12px;
    }

    .fs-f5__legend-text {
        font-size: 13px;
        line-height: 120%;
        white-space: normal;
        margin-right: 0;
    }

    /* Generations panel — same desktop pattern (two big slots at fixed
       positions, transform-scale swap), just shrunk and pulled toward
       the centre. Desktop positions (purple 12 %, orange 57 % of 705 px
       panel) leave the blobs at the panel edges; on mobile we tighten
       the gap so both slots sit inside a centred ~80 % strip.            */
    .fs-f5__gen {
        margin-top: 48px;
        position: relative;
        width: 100%;
        height: auto;
        min-height: calc(45vw + 12px);
    }

    .fs-f5__gen-blob {
        position: absolute;
        width: 45%;
        aspect-ratio: 216 / 214;
        top: 0;
        transform-origin: 50% 50%;
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fs-f5__gen-blob--purple-slot {
        left: 10%;
    }

    .fs-f5__gen-blob--orange-slot {
        left: 45%;
    }

    .fs-f5[data-state-gen="older"] .fs-f5__gen-blob--orange-slot {
        transform: scale(1);
    }

    .fs-f5[data-state-gen="older"] .fs-f5__gen-blob--purple-slot {
        transform: scale(0.477);
    }

    .fs-f5[data-state-gen="younger"] .fs-f5__gen-blob--purple-slot {
        transform: scale(1);
    }

    .fs-f5[data-state-gen="younger"] .fs-f5__gen-blob--orange-slot {
        transform: scale(0.477);
    }

    .fs-f5__gen-body {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: calc(45vw + 30px) 0 0;
        font-size: 13px;
        line-height: 130%;
        font-weight: 500;
        text-align: center !important;
    }

    .fs-f5[data-state-gen="older"] .fs-f5__gen-body {
        color: var(--color-orange);
        text-align: center !important;
    }

    .fs-f5[data-state-gen="younger"] .fs-f5__gen-body {
        color: var(--color-purple);
        text-align: center !important;
    }
}


/* ============================================================
   Phase F6 — "Фандрайзер как «волшебная таблетка»"
   (Figma 282:684..695 + 282:696, frame y=6049..7194, height 1145).
   ============================================================ */
.fs-f6 {
    position: relative;
    width: 100%;
    margin-top: 137px;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f6__canvas {
    position: relative;
    width: 1440px;
    height: 1145px;
    flex-shrink: 0;
}

.fs-f6__heading {
    position: absolute;
    left: 99px;
    top: 0;
    width: 411px;
    height: 66px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f6__heading-underline {
    position: absolute;
    left: 1px;
    top: 66px;
    width: 336px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

.fs-f6__equation {
    position: absolute;
    left: 0;
    top: 0;
    width: 1440px;
    height: 460px;
    pointer-events: none;
    isolation: isolate;
}

/* Dark backdrop INSIDE the isolated context (top:66 to skip the heading
   area at top 0-66) so plus-lighter on the eq-words and ellipses inside
   has #272727 to lift against. z-index:-1 keeps the rectangle below the
   eq elements while staying within the isolated stacking context. */
.fs-f6__equation::before {
    content: "";
    position: absolute;
    left: 0;
    top: 66px;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: -1;
    pointer-events: none;
}

/* Each ellipse SVG canvas is the full 1243 × 234 with the ellipse drawn
   at its original Figma position inside; both stack at the same anchor
   and slide horizontally via --fs-f6-progress (0 = apart, 1 = overlapped
   on the SVG centre x = 621.5).
     purple ellipse centre: 365      → 621.5  → +256.5px
     orange ellipse centre: 845.665  → 621.5  → -224.165px               */
.fs-f6__eq-ellipse {
    position: absolute;
    left: 100px;
    top: 142px;
    width: 1243px;
    height: 234px;
    pointer-events: none;
    display: block;
    will-change: transform;
    /* Soft tween between scroll-driven progress samples so even fast
       scroll updates render smoothly.                                 */
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fs-f6__eq-ellipse--purple {
    transform: translateX(calc(256.5px * var(--fs-f6-progress, 0)));
}

.fs-f6__eq-ellipse--orange {
    transform: translateX(calc(-224.165px * var(--fs-f6-progress, 0)));
}

.fs-f6__eq-word,
.fs-f6__eq-eq {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 80px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    paint-order: stroke fill;
    mix-blend-mode: plus-lighter;
    white-space: nowrap;
    will-change: transform, opacity;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.3s ease-out;
}

/* Words follow their containing ellipse: orange word lives inside the
   purple ellipse on the LEFT, so it tracks the purple shift; purple word
   sits inside the orange ellipse on the RIGHT, so it tracks the orange
   shift. The "=" pair stays put — already centred between the words.   */
.fs-f6__eq-word--orange {
    left: 157px;
    top: 202px;
    -webkit-text-stroke-color: var(--color-orange);
    transform: translateX(calc(256.5px * var(--fs-f6-progress, 0)));
}

.fs-f6__eq-word--purple {
    left: 759px;
    top: 202px;
    -webkit-text-stroke-color: var(--color-purple);
    transform: translateX(calc(-224.165px * var(--fs-f6-progress, 0)));
}

.fs-f6__eq-eq--orange {
    left: 711px;
    top: 211px;
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f6__eq-eq--purple {
    left: 716px;
    top: 211px;
    -webkit-text-stroke-color: var(--color-purple);
}

/* The "=" pair fades out the moment motion starts (opacity hits 0 by
   the time progress reaches ~0.05) — the converged cluster reads as
   one blurred mark, not as an equation any more.                       */
.fs-f6__eq-eq {
    opacity: calc(1 - 20 * var(--fs-f6-progress, 0));
}

.fs-f6__callout {
    position: absolute;
    left: 558px;
    top: 442px;
    width: 323px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    text-align: center;
}

.fs-f6__hl--purple {
    color: var(--color-purple);
}

.fs-f6__hl--orange {
    color: var(--color-orange);
}

.fs-f6__quote {
    text-align: center;
    position: absolute;
    left: 97px;
    top: 585px;
    width: 1246px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f6__body {
    text-align: center;
    position: absolute;
    left: 265px;
    top: 693px;
    width: 909px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f6__final {
    position: absolute;
    left: 94px;
    top: 852px;
    width: 1241px;
    height: 293.82px;
}

.fs-f6__stat {
    position: absolute;
    left: 0;
    top: 0;
    width: 653px;
    height: 293.82px;
}

.fs-f6__stat-num {
    position: absolute;
    left: 2px;
    top: 0;
    width: 340px;
    height: 75px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 90px;
    line-height: 90%;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-orange);
    paint-order: stroke fill;
    white-space: nowrap;
}

.fs-f6__stat-dots {
    position: absolute;
    left: 2.03px;
    top: 91px;
    width: 614px;
    height: 67px;
    pointer-events: none;
    display: block;
}

.fs-f6__stat-text {
    position: absolute;
    left: 0;
    top: 174px;
    width: 653px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 90%;
    letter-spacing: -0.02em;
    color: var(--color-orange);
}

.fs-f6__final-body {
    position: absolute;
    left: 697px;
    top: 0;
    width: 544px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

@media (max-width: 770px) {

    /* --- F6 top block (Figma mobile: image copy 5.png) -------------------
       Stack: heading + lime underline -> Venn equation (orange ellipse over
       purple ellipse, words inside, single "=" at the overlap) -> unified
       body paragraph. The desktop "callout" line is hidden in mobile.    */
    .fs-f6 {
        margin-top: 0;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .fs-f6__canvas {
        width: 100%;
        height: auto;
        padding: 40px 24px 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fs-f6__heading,
    .fs-f6__equation,
    .fs-f6__callout,
    .fs-f6__quote,
    .fs-f6__body,
    .fs-f6__final {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .fs-f6__heading {
        order: 1;
        margin: 0;
        padding: 0;
        font-size: 28px;
        line-height: 115%;
        letter-spacing: -0.02em;
        font-weight: 500;
        color: var(--text-white);
    }

    .fs-f6__heading-underline {
        position: relative;
        left: 0;
        top: 2px;
        display: block;
        width: 222px;
        height: 1px;
        background: #C3F150;
    }

    /* Mobile-only scroll animation of the equation (desktop keeps its own
       horizontal converge). Staged sub-ranges of --fs-f6-progress, each
       clamped to 0..1 so it holds outside its window:
         --e  (0.00..0.15) ellipses expand, "=" goes fully transparent
         --c  (0.10..0.50) words fade (absorbed) + ellipses converge/centre
         --ci (0.50..0.80) wide ovals morph into concentric circles
         --t  (0.80..1.00) callout appears from transparency               */
    .fs-f6 {
        --e: clamp(0, calc(var(--fs-f6-progress, 0) / 0.15), 1);
        --c: clamp(0, calc((var(--fs-f6-progress, 0) - 0.1) / 0.4), 1);
        --ci: clamp(0, calc((var(--fs-f6-progress, 0) - 0.5) / 0.3), 1);
        --t: clamp(0, calc((var(--fs-f6-progress, 0) - 0.8) / 0.2), 1);
    }

    .fs-f6__equation {
        order: 2;
        margin: 36px 0 0;
        height: 220px;
        display: block;
        position: relative;
        /* containing block for the callout that ends up inside the circles */
        isolation: isolate;
        background: var(--bg-primary);
        /* dark backdrop for plus-lighter blend inside isolation */
    }

    .fs-f6__eq-ellipse {
        display: none !important;
    }

    /* The two ellipses. Both width AND height morph (wide oval → big round
       circle) over --ci; the 1px border stays uniform (no scale distortion).
       Centred via top/left:50% + translate(-50%,-50%) so growing the height
       never shifts the centre. A vertical offset (±41px, fading out over --c)
       gives the initial split — orange above, purple below — that converges to
       a shared centre. Final sizes (orange 220 / purple 180) are large enough
       to hold the callout text inside. */
    .fs-f6__equation::before,
    .fs-f6__equation::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        height: calc(122px * (1 - var(--ci)) + 220px * var(--ci));
        border-radius: 50%;
        background: transparent;
        pointer-events: none;
        box-sizing: border-box;
        will-change: transform, width, height;
        transition: transform 0.35s ease-out, width 0.35s ease-out,
            height 0.35s ease-out;
    }

    /* orange — outer circle; starts above centre, converges down. */
    .fs-f6__equation::before {
        width: calc((100% - 8px) * (1 - var(--ci)) + 220px * var(--ci));
        height: calc(122px * (1 - var(--ci)) + 220px * var(--ci));
        border: 1px solid var(--color-orange);
        transform: translate(-50%, calc(-50% - 41px * (1 - var(--c)))) scale(calc(1 + 0.06 * var(--e)));
    }

    /* purple — inner concentric circle; starts below centre, converges up. */
    .fs-f6__equation::after {
        width: calc((100% - 8px) * (1 - var(--ci)) + 180px * var(--ci));
        height: calc(122px * (1 - var(--ci)) + 180px * var(--ci));
        border: 1px solid var(--color-purple);
        transform: translate(-50%, calc(-50% + 41px * (1 - var(--c)))) scale(calc(1 + 0.06 * var(--e)));
    }

    .fs-f6__eq-word {
        position: absolute;
        left: 50%;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: -0.02em;
        -webkit-text-fill-color: currentColor;
        -webkit-text-stroke-width: 0;
        mix-blend-mode: normal;
        text-transform: capitalize;
        transform: translateX(-50%) !important;
        /* fade out as the ellipses converge over them ("absorbed") */
        opacity: calc(1 - var(--c));
        transition: opacity 0.3s ease-out;
    }

    .fs-f6__eq-word--orange {
        top: 60px;
        color: var(--color-orange);
    }

    .fs-f6__eq-word--purple {
        top: 142px;
        color: var(--color-purple);
    }

    .fs-f6__final {
        order: 5;
    }

    .fs-f6__eq-eq {
        position: absolute;
        left: 50%;
        top: 102px;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: -0.02em;
        -webkit-text-fill-color: currentColor;
        -webkit-text-stroke-width: 0;
        mix-blend-mode: normal;
        transform: translateX(-50%) !important;
        /* "=" goes fully transparent during the expand beat */
        opacity: calc(1 - var(--e));
        transition: opacity 0.3s ease-out;
    }

    .fs-f6__eq-eq--orange {
        color: var(--color-orange);
    }

    .fs-f6__eq-eq--purple {
        display: none;
    }

    /* Callout sits INSIDE the concentric circles (centred on y≈109, the shared
       circle centre) and appears from transparency once they're aligned (--t).
       z-index keeps it above the ::after circle. */
    .fs-f6__callout {
        display: block;
        position: absolute;
        /* !important to beat the shared `left/top: auto !important` reset above
           (otherwise the absolute callout falls back to its static top-left).
           Centred on the equation centre = the concentric circles' centre. */
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        /* fits inside the 180px purple circle (half-diagonal of the text box
           stays within the radius). */
        width: 130px;
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        opacity: var(--t);
        z-index: 2;
        transition: opacity 0.3s ease-out;
    }

    .fs-f6__quote {
        order: 3;
        margin: 36px 0 0;
        padding: 0;
        text-align: left;
        font-size: 16px;
        line-height: 135%;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: var(--text-white);
    }

    .fs-f6__quote br {
        display: none;
    }

    .fs-f6__body {
        order: 4;
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: 16px;
        line-height: 135%;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: var(--text-white);
    }

    /* --- F6 final block (Figma mobile: image copy 6.png) -----------------
       Two stacked groups:
         (1) stat: chromatic-stroke 84,2% + dots row + solid orange title
         (2) body card: lifted #2F2F2F panel with rounded corners and the
             two paragraphs in light grey.                                  */
    .fs-f6__final {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 8px;
    }

    .fs-f6__stat,
    .fs-f6__stat-num,
    .fs-f6__stat-dots,
    .fs-f6__stat-text,
    .fs-f6__final-body {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .fs-f6__stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-top: 40px;
    }

    .fs-f6__stat-num {
        display: block;
        margin: 0 0 10px;
        font-size: clamp(48px, 15vw, 60px);
        line-height: 90%;
        letter-spacing: -0.02em;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-orange);
    }

    .fs-f6__stat-dots {
        display: block;
        width: 100%;
        max-width: 320px;
        aspect-ratio: 614 / 67;
        margin: 0 0 18px;
    }

    .fs-f6__stat-text {
        margin: 0;
        font-size: clamp(28px, 9vw, 36px);
        line-height: 100%;
        letter-spacing: -0.02em;
        font-weight: 500;
        color: var(--color-orange);
    }

    .fs-f6__final-body {
        margin: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
        font-size: 15px;
        line-height: 135%;
        letter-spacing: -0.01em;
        color: #D6D6D6;
    }
}


/* ============================================================
   Phase F7 — "Работы больше, чем кажется"
   (Figma 282:554..563, frame y=7355..8101, height 746).
   ============================================================ */
.fs-f7 {
    position: relative;
    width: 100%;
    margin-top: 161px;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f7__canvas {
    position: relative;
    width: 1440px;
    height: 746px;
    flex-shrink: 0;
}

.fs-f7__heading {
    position: absolute;
    left: 99.21px;
    top: 0;
    width: 508.94px;
    height: 57px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f7__heading-underline {
    position: absolute;
    left: 117.79px;
    top: 31px;
    width: 117px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

.fs-f7__poly {
    position: absolute;
    pointer-events: none;
    display: block;
    overflow: visible;
    z-index: 1;
    /* Rotate from the fixed top corner: pin the top, swing the body.
       With transform-origin at top-centre, CSS rotate(+deg) (CW) swings
       the body LEFT and rotate(-deg) (CCW) swings it RIGHT. So orange
       (needs to swing right) gets a negative angle and purple (left)
       gets a positive one.                                            */
    transform-origin: 50% 0;
    will-change: transform;
}

.fs-f7__poly--orange {
    left: calc(465.86px - 174px / 2);
    top: calc(163.22px - 112px / 2);
    width: 174px;
    height: 112px;
    transform: rotate(calc(-55deg * var(--fs-f7-progress, 0)));
}

.fs-f7__poly--purple {
    left: calc(805.64px - 450px / 2);
    top: calc(231.71px - 286px / 2);
    width: 450px;
    height: 286px;
    transform: rotate(calc(55deg * var(--fs-f7-progress, 0)));
}

.fs-f7__num {
    position: absolute;
    top: 138px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 100px;
    line-height: 130%;
    letter-spacing: -0.02em;
    white-space: nowrap;
    z-index: 2;
}

.fs-f7__num--orange {
    left: 100px;
    width: 292px;
    color: var(--color-orange);
}

.fs-f7__num--purple {
    left: 1068px;
    width: 272px;
    color: var(--color-purple);
}

.fs-f7__cap {
    position: absolute;
    top: 269px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    z-index: 2;
}

.fs-f7__cap--orange {
    left: 99px;
    width: 290.01px;
    color: var(--color-orange);
}

.fs-f7__cap--purple {
    left: 1025px;
    width: 315px;
    color: var(--color-purple);
    text-align: right;
}

.fs-f7__bridge {
    position: absolute;
    left: 101px;
    top: 497px;
    width: 1239px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    text-align: center;
}

@media (max-width: 770px) {
    .fs-f7 {
        margin-top: 64px;
        overflow: hidden;
        background: var(--bg-primary);
    }

    /* --fs-f7-field: cluster's inner width (viewport minus 24px gutters).
       All absolute coordinates below are expressed as fractions of this
       field plus the 24px gutter, so the chart scales fluidly.           */
    .fs-f7__canvas {
        --fs-f7-field: calc(100vw - 48px);
        width: 100%;
        height: auto;
        padding: 32px 24px 48px;
        box-sizing: border-box;
        position: relative;
        display: block;
    }

    /* Heading — top-left, lime underline under "больше" */
    .fs-f7__heading {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin: 0 0 24px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    .fs-f7__heading-underline {
        display: none !important;
    }

    /* .fs-f7__heading-mark picks up underline from the global LIME
       UNDERLINE RULE (`[class*="__heading-mark"]`) at top of file. */

    /* Reserve vertical room for the absolute chart cluster directly below
       the heading. Cluster ≈ 0.96 × field + ~70px (top offset + caption
       block). Bridge paragraph then lands beneath this reserve.          */
    .fs-f7__heading::after {
        content: "";
        display: block;
        width: 100%;
        /* taller: the purple group now sits lower in the cluster */
        height: calc(var(--fs-f7-field) * 1.15 + 98px);
    }

    /* Polygons — absolutely positioned; ditch the desktop scroll-driven
       rotate transform.                                                  */
    .fs-f7__poly {
        position: absolute;
        display: block;
        transform: none;
        z-index: 1;
    }

    /* Orange polygon — the SVG points LEFT. On scroll it rotates from apex-left
       (progress 0) to apex-up (progress 1, 90° CW), pivoting around its SHARP
       VERTEX (the apex, SVG point ≈ 0% 69%) — i.e. the corner that sits right
       under the "46,7%" number. The apex stays anchored there while the body
       swings down into place.                                              */
    .fs-f7__poly--orange {
        /* Positioned so the apex (transform-origin, box-left @69%) sits right
           under the centre of the "46,7%" number. The apex is the fixed pivot,
           so it stays there through the whole rotation. */
        left: calc(24px + var(--fs-f7-field) * 0.20);
        top: calc(110px + var(--fs-f7-field) * 0.15);
        width: calc(var(--fs-f7-field) * 0.34);
        height: auto;
        transform-origin: 0% 69%;
        /* Ends at 0° (the resting position shown) when progress = 1; spins in
           from -180° as the section scrolls toward the screen centre. */
        transform: rotate(calc(180deg * (1 - var(--fs-f7-progress, 0))));
        transition: transform 0.25s ease-out;
    }

    /* Purple polygon — large triangle, lower-right of the cluster. On scroll it
       swings into its resting position (settling at 0° by progress 1), pivoting
       from its TOP vertex (SVG point (143,0.6) of 450×286 ≈ 32% 0%).        */
    .fs-f7__poly--purple {
        left: calc(24px + var(--fs-f7-field) * 0.44);
        top: calc(110px + var(--fs-f7-field) * 0.40);
        width: calc(var(--fs-f7-field) * 0.66);
        height: auto;
        transform-origin: 32% 0%;
        transform: rotate(calc(-45deg * (1 - var(--fs-f7-progress, 0))));
        transition: transform 0.25s ease-out;
    }

    /* Mega percentages — sit at the APEX of their polygons (upper-left). */
    .fs-f7__num {
        position: absolute;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 30px;
        line-height: 100%;
        letter-spacing: -0.02em;
        white-space: nowrap;
        z-index: 3;
    }

    .fs-f7__num--orange {
        left: calc(24px + var(--fs-f7-field) * 0.08);
        top: calc(110px + var(--fs-f7-field) * 0.18);
        width: auto;
        color: var(--color-orange);
    }

    .fs-f7__num--purple {
        left: calc(24px + var(--fs-f7-field) * 0.48);
        top: calc(110px + var(--fs-f7-field) * 0.30);
        width: auto;
        color: var(--color-purple);
    }

    /* Captions — under the polygons, two columns */
    .fs-f7__cap {
        position: absolute;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 130%;
        letter-spacing: -0.02em;
        z-index: 2;
    }

    .fs-f7__cap--orange {
        left: 24px;
        /* extra 32px gap above the caption */
        top: calc(110px + var(--fs-f7-field) * 0.55 + 32px);
        width: calc(var(--fs-f7-field) * 0.42);
        color: var(--color-orange);
    }

    .fs-f7__cap--purple {
        left: calc(24px + var(--fs-f7-field) * 0.46);
        top: calc(110px + var(--fs-f7-field) * 0.84);
        width: calc(var(--fs-f7-field) * 0.54);
        color: var(--color-purple);
    }

    /* Bridge text — sits in natural flow below the heading reserve. The
       figma mobile crop doesn't show this paragraph; preserve a coherent
       large-statement rhythm consistent with the rest of the section.   */
    .fs-f7__bridge {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 24px 0 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 105%;
        letter-spacing: -0.02em;
        color: var(--text-white);
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .fs-f7__bridge-tail {
        display: block;
        margin-top: 24px;
        font-size: 16px;
        line-height: 135%;
        font-weight: 500;
        letter-spacing: -0.01em;
        hyphens: manual;
        -webkit-hyphens: manual;
        word-break: normal;
        color: var(--text-white);
    }
}


/* ============================================================
   Phase F8 — KPI + оплата (two stacked sub-blocks with synced toggles).
   Figma 282:658 + 282:863, frame y=8176..9692, height 1516.
   Reuses .s3p5__toggle-inner markup; the s3p5 toggle base rules need
   .fs-f8 added to their selectors (done below as @supports-style
   parallel selectors right before .fs-f8 phase block).
   ============================================================ */

/* Extend s3p5 base toggle rules to also apply inside .fs-f8 (visual
   styling only; F4-specific dimension overrides DON'T extend here). */
.fs-f8 .s3p5__toggle-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* Stroke via inset box-shadow — see comment on .section3__phase5
       .s3p5__toggle-inner for why we avoid `border:` here. */
    box-shadow: inset 0 0 0 1px var(--text-white);
    border-radius: 62.81px;
    background: transparent;
    box-sizing: border-box;
    overflow: visible;
}

.fs-f8 .s3p5__seg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
}

.fs-f8 .s3p5__seg-label {
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17.33px;
    line-height: 90%;
    letter-spacing: -0.05em;
    color: var(--text-white);
    margin: 0;
    padding: 0;
    transition: opacity 0.2s ease;
}

.fs-f8 .s3p5__seg:focus-visible {
    outline: 2px solid var(--accent-lime, #C2F04F);
    outline-offset: 4px;
}

.fs-f8 .s3p5__seg::before {
    content: '';
    position: absolute;
    /* em-based inset so the pill scales with the segment label at any
       browser/text zoom level. */
    inset: -0.4em -0.92em;
    border-radius: 887.98px;
    background: transparent;
    z-index: 0;
    transition: opacity 0.18s ease;
    opacity: 0;
}

.fs-f8 .s3p5__seg-label,
.fs-f8 .s3p5__seg-pill-label {
    position: relative;
    z-index: 1;
}

.fs-f8[data-state="fundraisers"] .s3p5__seg--left::before {
    background: var(--color-purple);
    opacity: 1;
}

.fs-f8[data-state="employers"] .s3p5__seg--right::before {
    background: var(--color-orange);
    opacity: 1;
}

.fs-f8:not([data-state="both"]) .s3p5__seg-pill {
    opacity: 0;
}

.fs-f8 .s3p5__seg-pill {
    transition: opacity 0.18s ease;
}

.fs-f8[data-state="fundraisers"] .s3p5__seg--left .s3p5__seg-label,
.fs-f8[data-state="employers"] .s3p5__seg--right .s3p5__seg-label {
    color: var(--text-white);
    opacity: 1;
}

.fs-f8[data-state="fundraisers"] .s3p5__seg--right .s3p5__seg-label,
.fs-f8[data-state="fundraisers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.fs-f8[data-state="employers"] .s3p5__seg--left .s3p5__seg-label,
.fs-f8[data-state="employers"] .s3p5__seg--mid .s3p5__seg-pill-label,
.fs-f8[data-state="both"] .s3p5__seg--left .s3p5__seg-label,
.fs-f8[data-state="both"] .s3p5__seg--right .s3p5__seg-label {
    opacity: 0.45;
}

.fs-f8 .s3p5__seg-pill {
    position: absolute;
    inset: 0;
    border-radius: 887.98px;
    background: var(--text-white);
    box-shadow: -3.62px 0 0 0 var(--color-orange), 3.62px 0 0 0 var(--color-purple);
    z-index: 0;
}

.fs-f8 .s3p5__seg-pill-label {
    position: relative;
    z-index: 1;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 17.33px;
    line-height: 90%;
    letter-spacing: -0.05em;
    color: var(--text-white);
    text-align: center;
    width: 100%;
}

.fs-f8[data-state="both"] .s3p5__seg-pill-label {
    color: var(--bg-secondary);
}

/* Toggle segment positions (s3p5 layout: 508.93×54.14). */
.fs-f8 .s3p5__seg--left {
    left: 28.88px;
    top: 11.07px;
    width: 116px;
}

.fs-f8 .s3p5__seg--right {
    left: 369.54px;
    top: 11.07px;
    width: 105px;
}

.fs-f8 .s3p5__seg--mid {
    position: absolute;
    left: 171px;
    top: 4.21px;
    width: 167.44px;
    height: 45.72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* F8 section + canvas. */
.fs-f8 {
    position: relative;
    width: 100%;
    margin-top: 75px;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f8__canvas {
    position: relative;
    width: 1440px;
    height: 1516px;
    flex-shrink: 0;
}

.fs-f8__heading {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* .fs-f8__heading-mark picks up underline from the global LIME
   UNDERLINE RULE (`[class*="__heading-mark"]`) at top of file. */

.fs-f8__heading--1 {
    left: 99.21px;
    top: 0;
    width: 508.94px;
    height: 66px;
}

.fs-f8__heading--2 {
    left: 99px;
    top: 815px;
    width: 358px;
    height: 57px;
}

.fs-f8__heading-underline {
    position: absolute;
    left: 0;
    top: 35px;
    width: 100%;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

.fs-f8 .s3p5__mega.fs-f8__mega-1 {
    position: absolute;
    left: 98px;
    top: 112px;
    width: 603.26px;
    height: 247px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 205.6px;
    line-height: 1;
    letter-spacing: -0.02em;
    isolation: isolate;
    background: var(--bg-primary);
    /* dark backdrop inside isolation so plus-lighter lifts orange/purple */
}

.fs-f8 .s3p5__mega-num {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    text-shadow: none;
    background: transparent;
    pointer-events: none;
    white-space: nowrap;
    paint-order: stroke fill;
    mix-blend-mode: plus-lighter;
    /* tabular-nums keeps every digit the same width so "36,7" and "63,3"
       render identical widths — both white "%" glyphs then land on the
       exact same x and read as one (no doubled/gapped percent sign). */
    font-variant-numeric: tabular-nums;
}

.fs-f8 .s3p5__mega-num--orange {
    left: 60px;
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f8 .s3p5__mega-num--purple {
    left: 60px;
    -webkit-text-stroke-color: var(--color-purple);
}

.fs-f8 .s3p5__mega-num--orange .s3p5__mega-digits,
.fs-f8 .s3p5__mega-num--orange .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f8 .s3p5__mega-num--purple .s3p5__mega-digits,
.fs-f8 .s3p5__mega-num--purple .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-purple);
}

/* "%" stays white on the shared mega pattern. */
.s3p5__mega-percent {
    -webkit-text-stroke-color: #FFFFFF;
}

/* Both mega numbers ("36,7%" + "63,3%") overlap at the same left, but the
   digit clusters render at different widths — so the two white "%" glyphs
   land at slightly different x and the percent reads as a doubled outline.
   Pin "%" to a fixed x inside each (already absolutely-positioned)
   .s3p5__mega-num so both percent glyphs coincide exactly → one clean
   single-line "%". `left` is tuned to sit just after the digit cluster. */
.fs-f8__mega-1 .s3p5__mega-percent {
    position: absolute;
    left: 2.1em;
    top: 0;
}

.fs-f8__minicopy-1 {
    position: absolute;
    left: 817px;
    top: 167px;
    width: 494px;
    height: 120px;
    isolation: isolate;
    background: var(--bg-primary);
    /* dark backdrop inside isolation so plus-lighter lifts orange/purple */
}

/* Typography + overlap pattern mirror .section3__phase5 .s3p5__minicopy p:
   purple sits on top, orange is offset down by ~14px so the lines stagger
   instead of fully stacking (no mix-blend-mode trick).                  */
.fs-f8__minicopy {
    position: absolute;
    left: 0;
    width: 494px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    max-width: none;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}

.fs-f8__minicopy--purple {
    top: 0;
    color: var(--color-purple);
}

.fs-f8__minicopy--orange {
    top: 14px;
    color: var(--color-orange);
}

.fs-f8__connector-1 {
    position: absolute;
    left: 817px;
    top: 287px;
    width: 523px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f8 .s3p5__toggle.fs-f8__toggle--1 {
    position: absolute;
    left: 99px;
    top: 382px;
    width: 508.93px;
    height: 54.14px;
}

.fs-f8 .s3p5__toggle.fs-f8__toggle--2 {
    position: absolute;
    left: 466px;
    top: 1462px;
    width: 508.93px;
    height: 54.14px;
}

.fs-f8__body-1 {
    position: absolute;
    top: 509px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    transition: opacity 0.2s ease;
}

.fs-f8__body--purple {
    left: 100px;
    width: 575px;
    color: var(--color-purple);
}

.fs-f8__body--orange {
    left: 817px;
    width: 523px;
    color: var(--color-orange);
    text-align: end;
}

.fs-f8__word {
    position: absolute;
    top: 936px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 100px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    paint-order: stroke fill;
    mix-blend-mode: plus-lighter;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.fs-f8__word--orange {
    left: 296px;
    width: 610px;
    -webkit-text-stroke-color: var(--color-orange);
}

.fs-f8__word--purple {
    left: 436px;
    width: 694px;
    -webkit-text-stroke-color: var(--color-purple);
}

/* 282:868 decorative — two thin orange strokes (left vertical + right
   diagonal) behind the chromatic words / leads. Spec sub (205, 237),
   826×228 → section (304, 1052).                                          */
.fs-f8__deco {
    position: absolute;
    left: 304px;
    top: 1052px;
    width: 826px;
    height: 228px;
    pointer-events: none;
    display: block;
}

/* Mobile-only deco — hidden on desktop. */
.fs-f8__deco--mobile {
    display: none;
}

.fs-f8__lead {
    position: absolute;
    top: 1280px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 110%;
    letter-spacing: -0.02em;
    text-align: center;
    transition: opacity 0.2s ease;
}

.fs-f8__lead--purple {
    left: 189px;
    width: 1061px;
    color: var(--color-purple);
}

.fs-f8__lead--orange {
    left: 304px;
    width: 831px;
    color: var(--color-orange);
    mix-blend-mode: plus-lighter;
}

/* Decorative line transitions (inside .fs-f8__deco SVG paths). */
.fs-f8__deco-line {
    transition: opacity 0.2s ease;
}

/* State-driven visibility — fade the off-side to 10 %. */
.fs-f8[data-state="fundraisers"] .s3p5__mega-num--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__minicopy--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__body--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__word--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__lead--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__deco-line--orange,
.fs-f8[data-state="fundraisers"] .fs-f8__deco-poly--orange {
    opacity: 0.1;
    pointer-events: none;
}

.fs-f8[data-state="employers"] .s3p5__mega-num--purple,
.fs-f8[data-state="employers"] .fs-f8__minicopy--purple,
.fs-f8[data-state="employers"] .fs-f8__body--purple,
.fs-f8[data-state="employers"] .fs-f8__word--purple,
.fs-f8[data-state="employers"] .fs-f8__lead--purple,
.fs-f8[data-state="employers"] .fs-f8__deco-line--purple,
.fs-f8[data-state="employers"] .fs-f8__deco-poly--purple {
    opacity: 0.1;
    pointer-events: none;
}

/* Mirror of the s3p5 rule: when one side is selected in F8, the suffix
   on the highlighted number switches from chromatic-overlap white to
   the side's brand colour so all digits + comma read uniformly.        */
.fs-f8[data-state="fundraisers"] .s3p5__mega-num--purple .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-purple);
}

.fs-f8[data-state="employers"] .s3p5__mega-num--orange .s3p5__mega-suffix {
    -webkit-text-stroke-color: var(--color-orange);
}

@media (max-width: 770px) {
    .fs-f8 {
        margin-top: 24px;
        overflow: hidden;
    }

    .fs-f8__canvas {
        width: 100%;
        height: auto;
        padding: 32px 20px 48px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .fs-f8__heading,
    .fs-f8__heading--1,
    .fs-f8__heading--2,
    .fs-f8 .s3p5__mega.fs-f8__mega-1,
    .fs-f8__minicopy-1,
    .fs-f8__connector-1,
    .fs-f8 .s3p5__toggle,
    .fs-f8__body-1,
    .fs-f8__word,
    .fs-f8__deco,
    .fs-f8__lead {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .fs-f8__heading {
        font-size: 26px;
        line-height: 115%;
        letter-spacing: -0.02em;
    }

    .fs-f8__heading--1 br {
        display: inline;
    }

    .fs-f8__heading--2 br {
        display: none;
    }

    /* Underline sits below "без цели" on the second line only. */
    .fs-f8__heading--1 .fs-f8__heading-underline {
        position: absolute;
        left: 0;
        top: calc(2.15em + 4px);
        width: 4.4em;
        height: 1px;
        background: #C3F150;
    }

    /* .fs-f8__heading-mark picks up underline from the global LIME
       UNDERLINE RULE (`[class*="__heading-mark"]`) at top of file. */

    .fs-f8__heading--2 .fs-f8__heading-underline {
        display: none;
    }

    /* Sub-block 1 visual order per Figma image 9:
       heading -> connector -> mega -> minicopy -> toggle -> bodies. */
    .fs-f8__heading--1 {
        order: 1;
    }

    .fs-f8__connector-1 {
        order: 2;
    }

    .fs-f8 .s3p5__mega.fs-f8__mega-1 {
        order: 3;
        font-size: clamp(96px, 32vw, 140px);
        height: auto;
        min-height: 1.1em;
        line-height: 1;
        margin-top: 16px;
    }

    /* Pin chromatic numbers to x=0 on mobile so the overlap reads as a
       single chromatic word.                                            */
    .fs-f8 .s3p5__mega-num--orange {
        left: 0 !important;
    }

    /* Stack the two captions chromatically (both paragraphs at the same
       y, purple on top, orange offset slightly down) — matches figma.    */
    .fs-f8__minicopy-1 {
        order: 4;
        position: relative;
        display: block;
        height: auto;
        min-height: 4em;
        margin-top: 16px;
    }

    .fs-f8 .s3p5__toggle.fs-f8__toggle--1 {
        order: 5;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .fs-f8__bodyswipe--1 {
        order: 6;
    }

    .fs-f8__heading--2 {
        order: 10;
    }

    .fs-f8__word--orange {
        order: 11;
    }

    .fs-f8__word--purple {
        order: 11;
    }

    .fs-f8__deco {
        order: 11;
    }

    .fs-f8__lead--purple {
        order: 12;
    }

    .fs-f8__lead--orange {
        order: 12;
    }

    .fs-f8 .s3p5__toggle.fs-f8__toggle--2 {
        order: 13;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .fs-f8 .s3p5__mega-num--purple {
        left: 0 !important;
    }

    .fs-f8__minicopy {
        position: absolute;
        left: 0 !important;
        width: 100% !important;
        max-width: 100%;
        font-size: 16px;
        line-height: 130%;
        mix-blend-mode: normal;
    }

    .fs-f8__minicopy--purple {
        top: 0 !important;
    }

    .fs-f8__minicopy--orange {
        top: 14px !important;
    }

    .fs-f8__connector-1 {
        font-size: 16px;
        line-height: 130%;
    }

    /* Match the index page .section3__phase5 .s3p5__toggle--top mobile
       layout: 40 px tall bar, 11 px labels, segments at 2 / 33.6 / 70 %,
       active pill bound (top 3, height 34) shared by all segments.
       !important needed to defeat the desktop .fs-f8__toggle--1/2 rules
       (width:508.93 / height:54.14) which are equally specific.           */
    .fs-f8 .s3p5__toggle,
    .fs-f8 .s3p5__toggle.fs-f8__toggle--1,
    .fs-f8 .s3p5__toggle.fs-f8__toggle--2 {
        max-width: none !important;
        width: 100% !important;
        height: 40px !important;
        margin: 16px auto 0;
    }

    .fs-f8 .s3p5__seg-label,
    .fs-f8 .s3p5__seg-pill-label {
        font-size: 11px;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .fs-f8 .s3p5__seg--left .s3p5__seg-label,
    .fs-f8 .s3p5__seg--right .s3p5__seg-label {
        text-align: left;
        width: 100%;
    }

    .fs-f8 .s3p5__seg--left {
        left: 2%;
        width: 28%;
        top: 3px;
        height: 34px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    .fs-f8 .s3p5__seg--right {
        left: 70%;
        width: 28%;
        top: 3px;
        height: 34px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    .fs-f8 .s3p5__seg--mid {
        left: 33.6%;
        width: 32.9%;
        top: 3px;
        height: 34px;
    }

    .fs-f8 .s3p5__seg::before {
        inset: 0;
    }

    /* --- Body row (Figma image copy 10) -----------------------------------
       Purple body (left) + orange body (right) render as a two-column
       swipe pair. Purple stays in the flex-column flow at 78vw width;
       orange is pulled up + over so it sits on the same horizontal row.
       Orange extends past the viewport and is clipped by .fs-f8's
       overflow: hidden, leaving a sliver visible to suggest swipe. The
       orange's bottom space is reclaimed so the next flex item butts
       directly under the row. A decorative scroll-progress track +
       chevron under the row mimics the Figma swipe cue (anchored to
       the purple card).                                                   */
    /* Per figma 282:1833 (mobile body row):
         purple at x=22.64,  w=280
         orange at x=322.59, w=335 (extends past viewport)
       Mobile pattern: horizontal swipe via scroll-snap. The two cards
       sit in a flex row inside a touch-scrollable strip; each snaps to
       the start so the user can swipe between them. The strip extends
       past the canvas's 20 px padding (negative margins) so its right
       edge can show a sliver of the next card and its scrollbar isn't
       cut off by the surrounding column. Scrollbars are hidden.        */
    .fs-f8__bodyswipe {
        align-self: stretch;
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* tells scroll-snap to honour the 20 px gutter — without this,
           snap-align: start aligns to x=0 and the first card flushes
           against the viewport edge.                                    */
        scroll-padding-inline: 20px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fs-f8__bodyswipe::-webkit-scrollbar {
        display: none;
    }

    .fs-f8__body-1 {
        flex: 0 0 calc(100vw - 80px);
        max-width: calc(100vw - 80px);
        min-width: 0;
        scroll-snap-align: start;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        text-align: start;
        margin: 0;
        padding: 0;
        mix-blend-mode: plus-lighter;
    }

    .fs-f8__body--purple {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        color: var(--color-purple);
    }

    .fs-f8__body--orange {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        color: var(--color-orange);
        text-align: start;
        margin: 0;
    }

    /* Swipe-affordance indicator under the body swipe.
       Two visual states driven by data-step on the track element:
         data-step="0" → user on the first card, left half lit, chevron
                         points RIGHT (suggests "swipe forward")
         data-step="1" → user on the second card, right half lit,
                         chevron points LEFT (suggests "swipe back")
       JS in the inline script of research.html updates data-step in
       response to scroll on .fs-f8__bodyswipe.                          */
    .fs-f8__bodyswipe--1+.fs-f8__swipe-track,
    .fs-f8__bodyswipe+.fs-f8__swipe-track {
        order: 7;
        position: relative;
        width: 100%;
        height: 16px;
        margin: 12px 0 0;
        pointer-events: none;
    }

    /* dim full-width baseline */
    .fs-f8__swipe-track::before {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        top: 50%;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }

    /* bright fill — half-width, position drives "active step" */
    .fs-f8__swipe-fill {
        position: absolute;
        top: 50%;
        height: 1px;
        left: 14px;
        width: calc(50% - 14px);
        background: rgba(255, 255, 255, 0.7);
        transition: left 0.3s ease, transform 0.3s ease;
    }

    .fs-f8__swipe-track[data-step="1"] .fs-f8__swipe-fill {
        left: 50%;
    }

    /* chevron — flips direction + side based on step */
    .fs-f8__swipe-arrow {
        position: absolute;
        top: 50%;
        margin-top: -4px;
        width: 8px;
        height: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.7);
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        transition: right 0.3s ease, left 0.3s ease, transform 0.3s ease;
    }

    .fs-f8__swipe-track[data-step="0"] .fs-f8__swipe-arrow {
        right: 2px;
        left: auto;
        transform: rotate(45deg);
        /* points right */
    }

    .fs-f8__swipe-track[data-step="1"] .fs-f8__swipe-arrow {
        left: 2px;
        right: auto;
        transform: rotate(-135deg);
        /* points left */
    }

    .fs-f8__word {
        position: relative;
        left: auto !important;
        top: auto !important;
        margin: 0;
        width: 100%;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: clamp(38px, 11vw, 56px);
        line-height: 100%;
        letter-spacing: -0.02em;
        white-space: nowrap;
        text-align: left;
    }

    .fs-f8__word--orange {
        margin-bottom: -1em;
    }

    .fs-f8__word--purple {
        mix-blend-mode: normal;
        padding-left: 18vw;
    }

    /* Sub-block 2 chromatic area: two outlined words at top, two
       diagonal polygons behind them, two body texts overlapping below.
       All absolute decorative pieces (polygons) are anchored to the
       FLEX-ITEM word--orange (the first chromatic element) via offset
       parent, so they "float" over the chromatic group regardless of
       its measured height.                                              */
    .fs-f8__word {
        position: relative;
        order: 11;
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1;
        margin: 0;
        z-index: 2;
        height: 1em;
        white-space: nowrap;
    }

    .fs-f8__word--orange {
        padding-left: 4vw;
    }

    /* Pull purple up to sit on the SAME line as orange. Canvas has
       flex gap: 24 px, so margin-top needs to defeat both the line
       (1 em) and the gap.                                             */
    .fs-f8__word--purple {
        margin-top: calc(-1em - 24px);
        padding-left: 18vw;
        mix-blend-mode: plus-lighter;
    }

    /* Single decorative SVG carrying BOTH polygons in figma coords.
       viewBox 398×497 mirrors the sub-block 2 figma frame so all the
       chromatic decoration positions are 1:1 with figma 282:1935.
       The lead body texts overlap on top via -margin so they sit at
       y≈313 (~63 % of 497) in the SVG.                                  */
    /* Figma 282:1935 chromatic area is 398 × 408 (the box that holds
       both polygons). Use that as the deco's aspect ratio so polygons
       sit at their figma-relative positions. Pulled up so the orange
       polygon's top edge (which is at 109/408 ≈ 26.7 % of the deco
       height) lands right under the chromatic words. The vw-based
       calc scales with content width so the overlap stays consistent
       at any mobile viewport.                                          */
    /* Hide desktop SVG deco; show the mobile div with imported polygons. */
    .fs-f8__deco--desktop {
        display: none !important;
    }

    .fs-f8__deco--mobile {
        display: block;
    }

    .fs-f8__deco--mobile.fs-f8__deco {
        position: relative;
        display: block;
        order: 11;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 398 / 408;
        margin-top: calc(-0.27 * (100vw - 40px) - 16px);
        margin-bottom: 0;
        mix-blend-mode: plus-lighter;
        pointer-events: none;
    }

    /* Orange Polygon 8 — figma 282:1944. No transform; positioned
       at left=64 (relative to 398-wide box), top=109, w=236, h=191. */
    .fs-f8__deco-poly--orange {
        position: absolute;
        left: calc(64 / 398 * 100%);
        top: calc(109 / 408 * 100%);
        width: calc(236 / 398 * 100%);
        aspect-ratio: 236 / 191;
        display: block;
    }

    /* Purple Polygon 16 — figma 282:1962. Wrapped in the full
       398 × 408 box, content centred + rotated -137.78° + scaleY(-1)
       per figma. Polygon native 215 × 356.                            */
    .fs-f8__deco-poly-wrap {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fs-f8__deco-poly--purple {
        display: block;
        width: calc(215 / 398 * 100%);
        aspect-ratio: 215 / 356;
        transform: rotate(-137.78deg) scaleY(-1);
        flex: none;
    }

    .fs-f8__lead {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        mix-blend-mode: plus-lighter;
    }

    .fs-f8__lead strong {
        font-weight: 700;
    }

    /* Body texts sit INSIDE the diagonal-line band so they overlap
       the X-pattern. SVG height = (100vw - 40px) × 220/398 ≈ 0.553 ×
       content width. Pull purple up by ~55 % of that so its top lands
       at the X-crossing point. (220/398 × 0.55 ≈ 0.304 numeric.)      */
    .fs-f8__lead--purple {
        order: 12;
        margin-top: calc(-0.304 * 100vw);
        margin-left: 30px;
        width: 60%;
        z-index: 2;
        color: var(--color-purple);
    }

    .fs-f8__lead--orange {
        order: 12;
        margin-top: -193px;
        margin-left: 28vw;
        width: 65%;
        z-index: 2;
        color: var(--color-orange);
    }
}


/* ============================================================
   Phase F9 — Salary breakdown (Figma 282:567 + 282:568..573 +
   282:889 + 282:564..566, frame y=9752..10673, height 921).
   Two-column compare with vertical divider; static (no toggle).
   ============================================================ */
.fs-f9 {
    position: relative;
    width: 100%;
    margin-top: 60px;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f9__canvas {
    position: relative;
    width: 1440px;
    height: 921px;
    flex-shrink: 0;
}

.fs-f9__heading {
    position: absolute;
    left: 400px;
    top: 0;
    width: 614px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

/* 282:889 vertical divider line — 1 px white, 457 tall. */
.fs-f9__divider {
    position: absolute;
    left: 720px;
    top: 112px;
    width: 1px;
    height: 457px;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.fs-f9__row {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.fs-f9__row--purple {
    left: 104px;
    width: 561px;
    color: var(--color-purple);
}

.fs-f9__row--orange {
    left: 767px;
    width: 564px;
    color: var(--color-orange);
    text-align: right;
}

.fs-f9__row--y111 {
    top: 111px;
}

.fs-f9__row--y287 {
    top: 287px;
}

.fs-f9__row--y450 {
    top: 450px;
}

/* Mobile-only elements — hidden on desktop. */
.fs-f9__bodyswipe,
.fs-f9__swipe-track,
.fs-f9__takeaway-mobile {
    display: none;
}

.fs-f9__takeaway {
    position: absolute;
    top: 642px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f9__takeaway--left {
    left: 99px;
    width: 611px;
}

.fs-f9__takeaway--right {
    left: 791px;
    width: 548px;
}

.fs-f9__bridge {
    position: absolute;
    left: 100px;
    top: 813px;
    width: 1252px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--text-white);
}

/* Desktop / mobile have different copy + line-breaks. */
.fs-f9__bridge--mobile {
    display: none;
}

@media (max-width: 770px) {
    .fs-f9 {
        margin-top: 48px;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .fs-f9__canvas {
        width: 100%;
        height: auto;
        padding: 24px 0 40px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 100vw;
        grid-auto-rows: auto;
        row-gap: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: var(--bg-primary);
    }

    .fs-f9__canvas::-webkit-scrollbar {
        display: none;
    }

    /* Compare-strip carving pseudo: 640 × 660 px wide cell. Hosts the
       absolutely-positioned rows and makes the canvas scroll sideways.  */
    .fs-f9__canvas::before {
        content: "";
        grid-column: 1;
        grid-row: 2;
        position: relative;
        display: block;
        width: 640px;
        height: 660px;
    }

    /* Sticky scroll-cue rail — white left, faint right, small chevron. */
    .fs-f9__canvas::after {
        content: "";
        grid-column: 1;
        grid-row: 3;
        position: sticky;
        left: 0;
        display: block;
        width: 100vw;
        max-width: 100vw;
        height: 12px;
        margin: 8px 0 28px;
        background-image:
            linear-gradient(to right,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0) 24px,
                rgba(255, 255, 255, 0.95) 24px,
                rgba(255, 255, 255, 0.95) 38%,
                rgba(255, 255, 255, 0.18) 38%,
                rgba(255, 255, 255, 0.18) calc(100% - 28px),
                rgba(255, 255, 255, 0) calc(100% - 28px),
                rgba(255, 255, 255, 0) 100%),
            linear-gradient(135deg,
                transparent calc(50% - 0.6px),
                rgba(255, 255, 255, 0.95) calc(50% - 0.6px),
                rgba(255, 255, 255, 0.95) calc(50% + 0.6px),
                transparent calc(50% + 0.6px)),
            linear-gradient(45deg,
                transparent calc(50% - 0.6px),
                rgba(255, 255, 255, 0.95) calc(50% - 0.6px),
                rgba(255, 255, 255, 0.95) calc(50% + 0.6px),
                transparent calc(50% + 0.6px));
        background-position:
            0 5px,
            calc(100% - 24px) 0,
            calc(100% - 24px) 6px;
        background-size:
            100% 1px,
            10px 6px,
            10px 6px;
        background-repeat: no-repeat;
    }

    .fs-f9__divider {
        display: none;
    }

    /* Heading — sticky-pinned, full viewport width. */
    .fs-f9__heading {
        position: sticky;
        left: 0;
        top: auto;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 24px 28px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 130%;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--text-white);
        grid-column: 1;
        grid-row: 1;
    }

    /* Mobile: replace the 640-strip absolute-row layout with a simple
       horizontal swipe (figma 282:1842) — two cards (purple фандрайзер
       / orange наниматель), each holding the merged 3-paragraph copy.
       Scroll-snap so each swipe lands cleanly on a card.                */
    .fs-f9__row {
        display: none;
    }

    .fs-f9__canvas::before,
    .fs-f9__canvas::after {
        display: none;
    }

    .fs-f9__canvas {
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fs-f9__bodyswipe {
        display: flex !important;
        flex-direction: row;
        gap: 16px;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fs-f9__bodyswipe::-webkit-scrollbar {
        display: none;
    }

    .fs-f9__bodyswipe-card {
        flex: 0 0 calc(100vw - 80px);
        max-width: calc(100vw - 80px);
        scroll-snap-align: start;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        mix-blend-mode: plus-lighter;
    }

    .fs-f9__bodyswipe-card p {
        margin: 0 0 1.3em;
    }

    .fs-f9__bodyswipe-card p:last-child {
        margin-bottom: 0;
    }

    .fs-f9__bodyswipe-card--purple {
        color: var(--color-purple);
    }

    .fs-f9__bodyswipe-card--orange {
        color: var(--color-orange);
    }

    /* Step indicator — same pattern as fs-f8 swipe track. */
    .fs-f9__swipe-track {
        display: block !important;
        position: relative;
        width: 100%;
        height: 16px;
        margin: 12px 0 0;
        pointer-events: none;
    }

    .fs-f9__swipe-track::before {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        top: 50%;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }

    .fs-f9__swipe-fill {
        position: absolute;
        top: 50%;
        height: 1px;
        left: 14px;
        width: calc(50% - 14px);
        background: rgba(255, 255, 255, 0.7);
        transition: left 0.3s ease, transform 0.3s ease;
    }

    .fs-f9__swipe-track[data-step="1"] .fs-f9__swipe-fill {
        left: 50%;
    }

    .fs-f9__swipe-arrow {
        position: absolute;
        top: 50%;
        margin-top: -4px;
        width: 8px;
        height: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.7);
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        transition: right 0.3s ease, left 0.3s ease, transform 0.3s ease;
    }

    .fs-f9__swipe-track[data-step="0"] .fs-f9__swipe-arrow {
        right: 2px;
        left: auto;
        transform: rotate(45deg);
    }

    .fs-f9__swipe-track[data-step="1"] .fs-f9__swipe-arrow {
        left: 2px;
        right: auto;
        transform: rotate(-135deg);
    }

    /* Hide the desktop two-column takeaways; show the consolidated
       mobile version (figma 282:1956) with proper top spacing.         */
    .fs-f9__takeaway--left,
    .fs-f9__takeaway--right {
        display: none;
    }

    .fs-f9__takeaway-mobile {
        display: block !important;
        margin: 32px 20px 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--text-white);
    }

    /* Takeaways — sticky-pinned, full-width white paragraphs. */
    .fs-f9__takeaway {
        position: sticky;
        left: 0;
        top: auto;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 24px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 130%;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--text-white);
        grid-column: 1;
    }

    .fs-f9__takeaway--left {
        grid-row: 4;
    }

    .fs-f9__takeaway--right {
        grid-row: 5;
        padding-top: 16px;
    }

    /* Bridge (figma 282:1930) — 40 px white statement, line-height 0.9.
       Line breaks use explicit <br> in the HTML to match figma's
       exact wrap; auto-hyphenation disabled so the markup wins.       */
    /* Mobile: show the mobile bridge with manual <br>'s, hide
       desktop bridge.                                                  */
    .fs-f9__bridge--desktop {
        display: none;
    }

    .fs-f9__bridge--mobile {
        display: block;
    }

    .fs-f9__bridge {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        margin: 32px 0 0;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: left;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 0.9;
        letter-spacing: -0.02em;
        color: var(--text-white);
        mix-blend-mode: plus-lighter;
        hyphens: manual;
        -webkit-hyphens: manual;
        word-break: normal;
    }
}


/* ============================================================
   Phase F10 — "Опыт, за который не готовы платить"
   (Figma 282:601 + 282:574, frame y=10849..11806, height 957).

   Section-relative coords = frame-y - 10849:
     heading                  x=99   y=0    508.94×57   30/120 white
     lime underline           x=100  y=68   266×1
     orange rect              x=100  y=164  651×232
     purple rect              x=733  y=164  607×232
     orange label             x=146  y=208  271×43      20/144 white
     orange num "1–3 года"    x=146  y=295  527×28      40/130 white
     purple label             x=789  y=208  527×43      20/144 white
     purple num "1—3 лет..."  x=789  y=279  527×73      40/113 white
     body                     x=100  y=583  1240×144    20/130 white
     staircase (282:574)      x=518  y=803  403×154     40/90 white
       "… больше —"           sub (166, 0)
       "в полном тексте"      sub (0, 42)
       "результатов"          sub (107, 84)
       "исследования"         sub (40, 126)
   ============================================================ */
.fs-f10 {
    position: relative;
    width: 100%;
    margin-top: 176px;
    /* gap from F9 (frame 10849 - 10673) */
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

.fs-f10__canvas {
    position: relative;
    width: 1440px;
    height: 957px;
    flex-shrink: 0;
}

.fs-f10__heading {
    position: absolute;
    left: 99px;
    top: 0;
    width: 508.94px;
    height: 100px;
    /* +room for 2 wrapped lines */
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f10__heading-underline {
    position: absolute;
    left: 1px;
    top: 68px;
    width: 266px;
    height: 1px;
    background: #C3F150;
    pointer-events: none;
}

/* 282:602 grid overlay — sits ABOVE the rectangles (mix-blend-mode:
   soft-light bakes in the SVG; at the CSS level we keep z-index so
   the rectangles + labels stack underneath). Native size 1240×362
   at sub (1, 164), so section (100, 164).                              */
.fs-f10__grid {
    position: absolute;
    left: 100px;
    top: 164px;
    width: 1240px;
    height: 364px;
    pointer-events: none;
    display: block;
    z-index: 2;
    /* over the solid fills */
    mix-blend-mode: soft-light;
    /* lets the white strokes modulate the orange/purple under them */
}

/* Filled rectangles. Trimmed to leave an 18.21 px white strip between
   them (the two grid vertical lines at sub-x 632.66 + 650.87 mark the
   gap edges). Section coords:
     orange: 100..732.66 (width 632.66)
     strip : 732.66..750.87 (width 18.21)
     purple: 750.87..1340 (width 589.13)                                */
.fs-f10__rect {
    position: absolute;
    top: 164px;
    height: 232px;
    box-sizing: border-box;
    z-index: 1;
}

.fs-f10__rect--orange {
    left: 100px;
    width: 632.66px;
    background: var(--color-orange);
}

/* Purple rect grows on scroll (232 → 364); orange stays at 232px. */
.fs-f10__rect--purple {
    left: 750.87px;
    width: 589.13px;
    height: calc(232px + 132px * var(--fs-f10-progress, 0));
    background: var(--color-purple);
    will-change: height;
}

.fs-f10__strip {
    position: absolute;
    left: 732.66px;
    top: 164px;
    width: 18.21px;
    height: 232px;
    background: #FFFFFF;
    z-index: 1;
    pointer-events: none;
}

/* Labels — absolute children of the canvas, positioned at frame coords
   (frame-x - section-x = sub-x relative to 282:601 group at frame 99).  */
.fs-f10__rect-label,
.fs-f10__rect-num {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-white);
    z-index: 3;
    /* above grid + rects */
}

.fs-f10__rect-label {
    font-size: 20px;
    line-height: 144%;
}

.fs-f10__rect-num {
    font-size: 40px;
}

/* spec 282:641 at sub (46.79, 208) → section (145.79, 208) */
.fs-f10__rect-label--orange {
    left: 145.79px;
    top: 201px;
    width: 271.13px;
}

/* spec 282:642 — section coords (145.79, 279) */
.fs-f10__rect-num--orange {
    left: 145.79px;
    top: 279px;
    width: 527.98px;
    line-height: 130%;
}

/* spec 282:643 at sub (689.54, 208) → section (788.54, 208) */
.fs-f10__rect-label--purple {
    left: 788.54px;
    top: 213px;
    width: 527.98px;
}

/* spec 282:644 — section coords (788.79, 269); Golos Medium 40 / 113% */
.fs-f10__rect-num--purple {
    left: 788.79px;
    top: 269px;
    width: 527.98px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 40px;
    line-height: 113%;
    letter-spacing: 0;
    leading-trim: cap-height;
    text-box-trim: cap alphabetic;
}

/* 282:635 + 282:636 two body paragraphs under the rectangles. */
.fs-f10__body {
    position: absolute;
    top: 583px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.fs-f10__body--left {
    left: 100px;
    width: 610px;
    color: var(--text-white);
}

.fs-f10__body--right {
    left: 817px;
    width: 523px;
    color: var(--color-purple);
    text-align: right;
}

.fs-f10__body-hl {
    color: var(--color-orange);
}

/* 282:574 staircase pull text — 4 lines indented to step inward.
   Desktop copy lives inside .fs-f10; .fs-f11 also has a duplicate
   for mobile (rings wrap around it). Hide the f11 copy on desktop. */
.fs-f10__staircase {
    position: absolute;
    left: 518px;
    top: 803px;
    /* 11652 - 10849 */
    width: 403px;
    height: 154px;
    /* Sit above the F11 orbital rings (.fs-f11__rings, z-index: 1)
       wherever the two overlap. */
    z-index: 2;
}

.fs-f11 .fs-f10__staircase {
    display: none;
}

.fs-f10__staircase-line {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 90%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    white-space: nowrap;
}

.fs-f10__staircase-line--1 {
    left: 166.23px;
    top: 0;
}

/* "… больше —" */
.fs-f10__staircase-line--2 {
    left: 0;
    top: 42px;
}

/* "в полном тексте" */
.fs-f10__staircase-line--3 {
    left: 107.38px;
    top: 84px;
}

/* "результатов" */
.fs-f10__staircase-line--4 {
    left: 40.45px;
    top: 126px;
}

/* "исследования" */


/* --- F10 mobile (Figma reference) --------------------------------
   Heading + lime underline; chart with orange + purple bars
   side-by-side over a notebook grid that continues beneath them;
   two body paragraphs (white + purple). Staircase hidden on mobile.
   Uses CSS Grid so the chart placeholder + bars + strip + labels +
   numbers all share row 2 and overlap; bodies in rows 3 + 4.
   ------------------------------------------------------------------ */
@media (max-width: 770px) {
    .fs-f10 {
        margin-top: 5px;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .fs-f10__canvas {
        position: relative;
        width: 100%;
        height: auto;
        padding: 40px 16px 48px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 0;
        /* Drive rect heights from the actual grid height — figma grid
           is 381 wide × 320 tall, scaled to (100vw − 32 px) content.   */
        --fs-f10-grid-h: calc((100vw - 32px) * 320 / 381);
        --fs-f10-rect-base: calc(var(--fs-f10-grid-h) * 174 / 320);
    }

    /* On mobile: hide the desktop staircase inside fs-f10 and show
       the duplicate one in fs-f11 (so the orbital rings wrap it).    */
    .fs-f10 .fs-f10__staircase {
        display: none !important;
    }

    .fs-f11 .fs-f10__staircase {
        position: relative;
        display: block !important;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin: 50vw 0 0;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 25px;
        line-height: 0.9;
        letter-spacing: -0.02em;
        color: var(--text-white);
        mix-blend-mode: plus-lighter;
        order: 1;
        z-index: 4;
    }

    .fs-f10__staircase-line {
        display: block !important;
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto;
        margin: 0;
        font-size: 25px;
        line-height: 0.9;
        letter-spacing: -0.02em;
        text-align: center;
        white-space: nowrap;
    }

    .fs-f10__heading {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        left: auto !important;
        top: auto !important;
        width: 100%;
        height: auto;
        margin: 0 0 24px;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 26px;
        line-height: 115%;
        letter-spacing: -0.02em;
        color: var(--text-white);
    }

    .fs-f10__heading-underline {
        position: relative;
        left: 0;
        top: 6px;
        display: block;
        width: 196px;
        height: 1px;
        background: #C3F150;
    }

    /* Notebook grid (figma 282:1886) — picture/source swaps the
       desktop SVG (1240×362) for the mobile SVG (381×320) below
       770 px. Layered ON TOP of the chromatic rects so the grid
       lines visibly cross both the rects (subtle via soft-light
       blend) and the empty area below.                              */
    .fs-f10__grid {
        position: relative;
        grid-column: 1;
        grid-row: 2;
        display: block;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 381 / 320;
        margin: 0 0 32px;
        mix-blend-mode: soft-light;
        z-index: 3;
        pointer-events: none;
    }

    .fs-f10__grid img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    /* Stack bars + strip + inner texts into the same grid cell as
       the chart placeholder so they overlap it.                      */
    .fs-f10__rect,
    .fs-f10__strip,
    .fs-f10__rect-label,
    .fs-f10__rect-num {
        grid-column: 1;
        grid-row: 2;
    }

    .fs-f10__rect {
        position: relative !important;
        left: auto !important;
        top: 0 !important;
        margin: 0;
        padding: 0;
        height: var(--fs-f10-rect-base) !important;
        width: calc(50% - 4px) !important;
        z-index: 2;
        align-self: start;
        box-sizing: border-box;
        border-radius: 0;
        min-height: 0;
    }

    .fs-f10__rect--orange {
        background: var(--color-orange) !important;
        justify-self: start;
    }

    .fs-f10__rect--purple {
        background: var(--color-purple) !important;
        justify-self: end;
        height: calc(var(--fs-f10-rect-base) + (var(--fs-f10-grid-h) - var(--fs-f10-rect-base)) * var(--fs-f10-progress, 0)) !important;
        will-change: height;
    }

    .fs-f10__strip {
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: 0 !important;
        margin: 0;
        width: 8px !important;
        height: var(--fs-f10-rect-base) !important;
        background: #FFFFFF !important;
        z-index: 3;
        align-self: start;
        justify-self: center;
    }

    .fs-f10__rect-label {
        position: relative !important;
        left: auto !important;
        top: 16px !important;
        margin: 0;
        padding: 0 14px;
        width: calc(50% - 4px) !important;
        height: auto;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 125%;
        letter-spacing: -0.02em;
        color: var(--text-white);
        z-index: 4;
        align-self: start;
        box-sizing: border-box;
    }

    .fs-f10__rect-label--orange {
        justify-self: start;
    }

    .fs-f10__rect-label--purple {
        justify-self: end;
    }

    .fs-f10__rect-num {
        position: relative !important;
        left: auto !important;
        top: 100px !important;
        margin: 0;
        padding: 0 14px;
        width: calc(50% - 4px) !important;
        height: auto;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 26px;
        line-height: 110%;
        letter-spacing: -0.02em;
        color: var(--text-white);
        z-index: 4;
        align-self: start;
        box-sizing: border-box;
    }

    .fs-f10__rect-num--orange {
        justify-self: start;
    }

    .fs-f10__rect-num--purple {
        justify-self: end;
    }

    .fs-f10__rect-num br {
        display: inline;
    }

    .fs-f10__body {
        position: relative;
        grid-column: 1;
        left: auto !important;
        top: auto !important;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .fs-f10__body--left {
        grid-row: 3;
        color: var(--text-white);
        margin-top: 0;
        margin-bottom: 32px;
        mix-blend-mode: plus-lighter;
    }

    .fs-f10__body--right {
        grid-row: 4;
        color: var(--color-purple);
        mix-blend-mode: plus-lighter;
        text-align: left;
    }

    .fs-f10__body-hl {
        color: var(--color-orange);
    }
}


/* ============================================================
   Phase F11 — Final CTA + "Опыт" block
   (Figma 282:817 + 282:599, frame y=11745..12851, height 1106).

   Same orbital-rings backdrop + PDF + share + divider + bottom block
   pattern as F2; the PDF button here is SOLID white (not outline).

   Section-relative coords (= sub-y within 282:817):
     rings (282:599)            x=2 (101.77 - 99 group offset) y=4.46
                                1228.17×959.76
     PDF button (282:819)       sub (364, 412)     526.66×68.21
     share (282:823)            sub (460, 508)     334.52×42
     divider (282:830)          sub (627, 572)     1×136
     final block (282:842)      sub (416, 927)     421.85×179
       "Опыт" heading           sub (155, 0)       111.67×41
       underline (282:845)      sub (12.41, 43)    88.23×1
       body                     sub (0, 54)        421.85×125
   ============================================================ */
.fs-f11 {
    position: relative;
    width: 100%;
    margin-top: 60px;
    /* transparent so the lime gradient on the parent .phase-gradient-wrap
       shows through (same recipe as index sections 6-9).                  */
    background: transparent;
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

/* fs-f11 uses its own lime → transparent gradient (distinct from the
   index sections 6-9 recipe). Scoped via :has() to the wrap instance
   that contains .fs-f11 so the shared .phase-gradient-wrap rule and the
   index pages stay untouched. */
.phase-gradient-wrap:has(.fs-f11) {
    background-image: linear-gradient(0deg,
            #C2F04F -3.84%,
            rgba(47, 47, 47, 0) 48.58%);
}

.fs-f11__canvas {
    position: relative;
    width: 1440px;
    /* +96 px bottom space below the «Опыт» final block (figma height
       1106 → 1202 leaves 96 px of breathing room before the footer). */
    height: 1202px;
    flex-shrink: 0;
}

/* Orbital rings backdrop — reuse F2 cta art. Spec layout box is
   1228×960 starting at section (102, 4.46), but at that size the rings
   bottom (y≈964) collides with the "Опыт" heading at y=927. Scale to
   80 % so the rings still encircle button + share + divider but end
   well above the heading.
   New: 1228 × 0.80 = 982,  960 × 0.80 = 768 → ends at y≈772.
   Centred horizontally on the spec-box centre (x=716).                  */
.fs-f11__rings {
    position: absolute;
    left: calc(102px + (1228.17px - 982px) / 2);
    /* = 225 px */
    top: 4.46px;
    width: 982px;
    height: 768px;
    object-fit: contain;
    pointer-events: none;
    display: block;
    z-index: 1;
    /* Scroll-driven full 360° clockwise rotation — same model as
       .fs-f2__cta-art (rings end at the same horizontal orientation
       they started at, just having swept a full revolution).        */
    transform: rotate(calc(360deg * var(--fs-f11-progress, 0)));
    transform-origin: 50% 50%;
    will-change: transform;
}

/* SOLID white PDF button (vs F2's outline-only). Spec inner Frame
   526.66 × 68.21 with border-radius 121.5 → pill. Text #2F2F2F dark on
   white. Spec section x=466 puts button centre at x=729 — slightly
   right of the rings centre x=716. With the rings shrunk to 80 %, that
   13 px offset reads as off-centre, so we recentre the button on the
   rings centre: left = 716 − 526.66/2 = 452.67.                         */
a.fs-f11__cta-pdf,
.fs-f11__cta-pdf {
    position: absolute;
    left: 452.67px;
    top: 302px;
    width: 526.66px;
    height: 68.21px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 121.5px;
    background: #FFFFFF !important;
    color: #2F2F2F !important;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 21.06px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    z-index: 4;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.fs-f11__cta-pdf:hover,
a.fs-f11__cta-pdf:focus-visible,
.fs-f11__cta-pdf:hover,
.fs-f11__cta-pdf:focus-visible {
    background: #C2F04F !important;
    color: #2F2F2F !important;
}

/* Share affordance: icon left + text right. Section position: 102 + 460
   = 562. Sub: icon at (0, 5.21), text at (48.52, 0). Spec text colour
   white at ~60% opacity (fill_G7YDPI) — approximated as opacity 0.6.    */
.fs-f11__cta-share {
    position: absolute;
    left: 562px;
    top: 398px;
    width: 334.52px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    opacity: 0.6;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16.45px;
    z-index: 4;
    text-align: left;
}

.fs-f11__cta-share-icon {
    width: 32.07px;
    height: 32.55px;
    display: block;
    flex-shrink: 0;
    /* invert the dark icon to white (icon was originally dark on light) */
    filter: brightness(0) invert(1);
}

.fs-f11__cta-share-text {
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 21.49px;
    line-height: 100%;
    letter-spacing: -0.02em;
}

.fs-f11__cta-share:hover {
    opacity: 1;
}

/* Vertical hairline divider (1 × 136 at sub 627, 572 → section 729, 572).
   On scroll the height grows from 136 → 445 (stops 10px above the
   .fs-f11__final block at top: 927), driven by --fs-f11-divider-progress.
   Mirrors the .fs-f2__cta-divider behaviour.                              */
.fs-f11__cta-divider {
    position: absolute;
    left: 729px;
    top: 472px;
    width: 1px;
    height: calc(136px + 309px * var(--fs-f11-divider-progress, 0));
    background: rgba(255, 255, 255, 0.8);
    z-index: 4;
    will-change: height;
}

/* Final block: "Опыт" heading + underline + body. */
.fs-f11__final {
    position: absolute;
    left: 518px;
    /* 102 + 416 */
    top: 927px;
    width: 421.85px;
    height: 179px;
    z-index: 4;
}

.fs-f11__final-heading {
    position: absolute;
    left: 155px;
    /* sub 282:843 x=155 within 282:842 */
    top: 0;
    width: 111.67px;
    height: 41px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 34.46px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--text-white);
}

.fs-f11__final-heading-link {
    color: inherit;
    text-decoration: underline;
    /* Figma 282:845 — white line at opacity 0.8 under "Опыт". */
    text-decoration-color: rgba(255, 255, 255, 0.8);
    text-underline-offset: 0.12em;
}

.fs-f11__final-heading-underline {
    /* spec 282:845 line at sub (12.41, 43), 88.23 wide, opacity 0.8 */
    position: absolute;
    left: 12.41px;
    top: 43px;
    width: 88.23px;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.fs-f11__final-body {
    position: absolute;
    left: 0;
    top: 54px;
    width: 421.85px;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--text-white);
    text-align: center;
}


/* --- F11 mobile (≤770px) -----------------------------------------
   Per Figma reference: orbital rings sit as a full-width backdrop;
   the white pill PDF button is layered over the rings' centre and
   the share row sits just under it. A vertical hairline drops from
   below the share row to the "Опыт" final block (heading + body). */
@media (max-width: 770px) {

    /* Lime gradient backdrop — figma 282:1546:
         bg-gradient-to-b from-[#c2f04f] from-[11.876 %]
                          to-[rgba(47,47,47,0)] to-[97.024 %] + rotate-180
       Use `in oklab` interpolation so the lime → transparent fade
       passes through a darker mid-tone (like figma renders). The
       top end is rgba(194,240,79,0) — same lime hue at alpha 0 — so
       the gradient stays in the "lime family" instead of brightening
       through grey-mid. Page bg #272727 shows through at the top.    */
    .fs-f11 {
        margin-top: 0;
        overflow: hidden;
        background:
            linear-gradient(to top,
                #C2F04F 0%,
                rgba(194, 240, 79, 0) 55%,
                rgba(47, 47, 47, 0) 100%);
    }

    .fs-f11__canvas {
        width: 100%;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Reset desktop absolute positioning. */
    .fs-f11__rings,
    .fs-f11__cta-pdf,
    .fs-f11__cta-share,
    .fs-f11__cta-divider,
    .fs-f11__final {
        position: relative;
        left: auto !important;
        top: auto !important;
    }

    /* Rings (figma 282:1793) — large oval backdrop, centred and made
       SQUARE (130 vw × 130 vw) so rotation never changes the bounding
       box. The SVG (805 × 628) sits letterboxed inside via
       object-fit: contain. Combined transform: centre + rotate driven
       by --fs-f11-progress (set by main.js on scroll).                 */
    .fs-f11__rings {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) rotate(calc(360deg * var(--fs-f11-progress, 0))) !important;
        transform-origin: 50% 50%;
        width: 160vw;
        max-width: 160vw;
        height: 160vw;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        margin: 0 !important;
        align-self: auto;
        order: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 1;
    }

    /* Staircase pull text from fs-f10 takes order 1 in fs-f11 visual
       flow because it lives in fs-f10's flex column.                    */

    /* PDF button — 332×43 pill, 21px gap to share row. */
    a.fs-f11__cta-pdf,
    .fs-f11__cta-pdf {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 332px;
        max-width: calc(100% - 32px);
        height: 43px;
        margin: 32px auto 21px;
        padding: 0;
        font-size: 13.276px;
        line-height: 43px;
        letter-spacing: -0.02em;
        text-align: center;
        align-self: center;
        box-sizing: border-box;
        background: #FFFFFF !important;
        color: #2F2F2F !important;
        opacity: 1 !important;
        border: 0;
        border-radius: 76.59px !important;
        order: 2;
        z-index: 4;
    }

    .fs-f11__cta-pdf:hover,
    .fs-f11__cta-pdf:focus-visible {
        background: #FFFFFF;
        color: #2F2F2F;
        opacity: 1;
    }

    /* Share row — 31px below, then vertical divider. */
    .fs-f11__cta-share {
        width: 323px;
        max-width: calc(100% - 32px);
        height: auto;
        margin: 0 auto 31px;
        padding: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-self: center;
        gap: 12px;
        box-sizing: border-box;
        order: 3;
        z-index: 4;
        opacity: 1;
        color: rgba(255, 255, 255, 1);
    }

    .fs-f11__cta-share picture {
        display: block;
        flex-shrink: 0;
        line-height: 0;
    }

    .fs-f11__cta-share-icon {
        width: 16.285px;
        height: 16.527px;
        flex-shrink: 0;
        display: block;
        filter: none;
    }

    .fs-f11__cta-share-text br {
        display: inline;
    }

    .fs-f11__cta-share-text {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 10.92px;
        line-height: 100%;
        letter-spacing: -0.02em;
        text-align: left;
        color: rgba(255, 255, 255, 1);
    }

    /* Vertical hairline — 160px, 11px gap to "Опыт". */
    .fs-f11__cta-divider {
        width: 1px;
        height: 160px !important;
        margin: 0 auto 11px;
        align-self: center;
        background: rgba(255, 255, 255, 0.8);
        order: 4;
        z-index: 4;
        transform: none;
    }

    /* Final block — centred, "Опыт" heading + tiny underline + body. */
    .fs-f11__final {
        width: 100%;
        max-width: calc(100% - 32px);
        height: auto;
        margin: 0 auto 96px;
        padding: 0;
        text-align: center;
        align-self: center;
        order: 5;
        z-index: 4;
    }

    .fs-f11__final-heading,
    .fs-f11__final-heading-underline,
    .fs-f11__final-body {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto;
        height: auto;
    }

    .fs-f11__final-heading {
        display: inline-block;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 25px;
        line-height: 120%;
        letter-spacing: -0.02em;
        text-align: center;
        margin: 0 auto 6px;
        padding: 0;
    }

    .fs-f11__final-heading-link {
        color: rgba(255, 255, 255, 1);
    }

    .fs-f11__final-heading-underline {
        display: block;
        width: 60px;
        height: 1px;
        margin: 6px auto 16px;
        background: rgba(255, 255, 255, 0.8);
    }

    .fs-f11__final-body {
        width: 100%;
        font-size: 14px;
        line-height: 135%;
        text-align: center;
        margin: 0 auto;
    }
}


/* =============================================================
   Brand-coloured text/graphics — Figma global blend rule
   -------------------------------------------------------------
   In the Figma source, every layer painted in --color-orange or
   --color-purple sits on top of the dark canvas with blend mode
   "Plus Lighter". This lifts the colour additively against
   #272727, producing the slightly milky/luminous tint seen in
   the design (vs the muted look you get from straight RGB on a
   dark BG). All the chromatic-outline (text-stroke) selectors
   already declare this locally; the rule below covers the
   solid-fill brand text elements that were missing it.
   ============================================================= */
.section3__phase5 .s3p5__minicopy-purple,
.section3__phase5 .s3p5__minicopy-orange,
.section3__phase5 .s3p5__body--purple,
.section3__phase5 .s3p5__body--orange,
.fs-hero__intro-highlight--orange,
.fs-hero__intro-highlight--purple,
.fs-f3__hl--orange,
.fs-f3__hl--purple,
.fs-f5__chart-num--purple,
.fs-f5__chart-num--orange,
.fs-f5__chart-text--purple,
.fs-f5__chart-text--orange,
.fs-f5 .fs-f5__gen-body,
.fs-f6__hl--purple,
.fs-f6__hl--orange,
.fs-f6__stat-text,
.fs-f7__num--orange,
.fs-f7__num--purple,
.fs-f7__cap--orange,
.fs-f7__cap--purple,
.fs-f8__minicopy--purple,
.fs-f8__minicopy--orange,
.fs-f8__body--purple,
.fs-f8__body--orange,
.fs-f8__lead--purple,
.fs-f9__row--purple,
.fs-f9__row--orange,
.fs-f10__body--right,
.fs-f10__body-hl {
    mix-blend-mode: plus-lighter;
}


/* ============================================================================
   EXPERIENCE PAGE — Figma 286:2943 (1440 × 7188)
   Light page (#D2D2D2) with white cards, dark text. Hero on the same
   light surface; only the backstage photo at the bottom is dark.
   3-column 400-wide card grid; one XL card spans 2 columns × 2 rows.
   ============================================================================ */

.exp-page {
    background: #D2D2D2;
    color: #2F2F2F;
}

/* Header sits on the dark canvas globally — keep its colors as-is, just
   ensure it can read against light below it (header itself stays dark).
   Background inherits the shared header colour (var(--bg-secondary), #2F2F2F)
   so it matches the header on every other page. */
.exp-page header {
    color: #FFFFFF;
}

.exp {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    position: relative;
    background: #D2D2D2;
}


/* ---- Hero ---------------------------------------------------------------- */
.exp-hero {
    position: relative;
    padding-top: 60px;
    text-align: center;
    overflow: hidden;
    /* full-bleed against centered .exp container so background shapes
       can extend to viewport edges */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.exp-hero__canvas {
    position: relative;
    z-index: 1;
}

/* Mobile-only hero photo (Figma 286:5425). Hidden on desktop — desktop uses
   the decorative orbit/lines SVGs instead. */
.exp-hero__photo {
    display: none;
}

/* Mobile-only "Load more" button — hidden on desktop where all cards render
   in the grid. JS toggles `hidden` based on viewport + matched-card count. */
.exp-loadmore {
    display: none;
}

.exp-loadmore[hidden] {
    display: none !important;
}

.exp-hero__shape {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    height: auto;
    filter: none;
}

/* Треугольники: z-index на обёртке, progressive blur остаётся в inline SVG */
.exp-hero__lines-wrap {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    overflow: visible;
}

.exp-hero__lines-wrap--lg {
    top: -200px;
    right: -120px;
    width: 900px;
}

.exp-hero__lines-wrap--sm {
    top: 60px;
    left: -200px;
    width: 720px;
}

.exp-hero__lines-wrap .exp-hero__shape--lines-lg,
.exp-hero__lines-wrap .exp-hero__shape--lines-sm {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    z-index: auto;
    overflow: visible;
}

.exp-hero__shape--lines-sm .exp-lines-sm-prog,
.exp-hero__shape--lines-lg .exp-lines-lg-prog,
.exp-hero__shape--orbit-sm .exp-orbit-sm-prog,
.exp-hero__shape--orbit-lg .exp-orbit-lg-prog {
    mix-blend-mode: plus-lighter;
}

/* Большой эллипс — справа сверху, частично за кромку */
.exp-hero__shape--orbit-lg {
    top: -1300px;
    right: -1000px;
    width: 2200px;
    max-width: none;
}

/* Меньший эллипс — слева снизу, progressive blur только в SVG */
.exp-hero__shape--orbit-sm {
    bottom: -74px;
    left: -109px;
    width: 1000px;
    max-width: none;
    filter: none;
}

@media (max-width: 1280px) {
    .exp-hero__lines-wrap--lg {
        width: 760px;
        right: -100px;
    }

    .exp-hero__lines-wrap--sm {
        width: 600px;
        left: -80px;
    }

    .exp-hero__shape--orbit-lg {
        width: 960px;
        right: -191px;
        top: -388px;
    }

    .exp-hero__shape--orbit-sm {
        width: 640px;
        left: 65px;
        bottom: 164px;
    }
}

@media (max-width: 768px) {
    .exp-hero__lines-wrap--lg {
        width: 540px;
        right: -80px;
        top: 0;
    }

    .exp-hero__lines-wrap--sm {
        width: 460px;
        left: -60px;
        top: 60px;
    }

    .exp-hero__shape--orbit-lg {
        width: 720px;
        right: -300px;
        top: -120px;
    }

    .exp-hero__shape--orbit-sm {
        width: 480px;
        left: -160px;
        bottom: -140px;
    }
}

@media (max-width: 480px) {
    .exp-hero__lines-wrap--lg {
        width: 380px;
        right: -60px;
    }

    .exp-hero__lines-wrap--sm {
        width: 320px;
        left: -40px;
    }

    .exp-hero__shape--orbit-lg {
        width: 520px;
        right: -240px;
    }

    .exp-hero__shape--orbit-sm {
        display: none;
    }
}

.exp-hero__brand {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 32px 0 80px;
    color: #2F2F2F;
}

.exp-hero__brand-word {
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.04em;
}

.exp-hero__brand-logo {
    width: 190px;
    height: auto;
    /* invert the white SVG logo to render dark on light bg */
    filter: invert(1) hue-rotate(180deg) brightness(0.2);
    cursor: pointer;
}

/* Experience hero — dark logo asset (Figma 286:3859), no invert */
.exp-page .exp-hero__brand-logo {
    display: block;
    width: 191px;
    height: 19px;
    filter: none;
}

.exp-hero__title {
    margin: 0 auto;
    max-width: 910px;
}

.exp-hero__title-art {
    display: block;
    width: 100%;
    height: auto;
}

.exp-hero__title-fallback {
    display: none;
}

.exp-hero__title-line {
    display: block;
}

/* Green gradient panel (Figma 286:3872) — wraps intro + toggle + sub */
.exp-hero__panel {
    position: relative;
    z-index: 3;
    margin-top: 140px;
    padding: 80px 100px 120px;
    background: linear-gradient(to bottom, #C2F04F 0%, #C2F04F 36.114%, rgba(228, 229, 239, 0) 81.807%);
}

.exp-hero__intro {
    max-width: 1240px;
    margin: 0 auto 12px;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
    text-align: left;
}

.exp-hero__intro-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #2F2F2F;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.exp-hero__intro-link:hover,
.exp-hero__intro-link:focus-visible {
    color: inherit;
    text-decoration-color: #2F2F2F;
}


/* ---- Segmented filter (Figma 286:3242) ----------------------------------- */
.exp-toggle {
    width: 509px;
    max-width: 100%;
    height: 54px;
    margin: 56px auto 32px;
    border: 1px solid #2F2F2F;
    border-radius: 999px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 4px;
    box-sizing: border-box;
    background: transparent;
}

.exp-toggle__seg {
    background: transparent;
    border: 0;
    color: #2F2F2F;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.04em;
    padding: 0 16px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s ease, color 0.18s ease;
    position: relative;
    z-index: 1;
}

.exp-toggle__seg[aria-selected="true"] {
    opacity: 1;
    background: #2F2F2F;
    color: #FFFFFF;
    border-radius: 999px;
}

.exp-toggle__seg--mid {
    position: relative;
    width: 164px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exp-toggle__pill {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #2F2F2F;
    z-index: 0;
    transition: opacity 0.18s ease;
}

.exp-toggle__pill-label {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.04em;
}

.exp-toggle[data-state="texts"] .exp-toggle__seg--left,
.exp-toggle[data-state="events"] .exp-toggle__seg--right {
    opacity: 1;
}

.exp-toggle[data-state="texts"] .exp-toggle__pill,
.exp-toggle[data-state="events"] .exp-toggle__pill {
    opacity: 0;
}

.exp-toggle[data-state="texts"] .exp-toggle__pill-label,
.exp-toggle[data-state="events"] .exp-toggle__pill-label {
    color: #2F2F2F;
}

.exp-hero__sub {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: 0 auto 100px;
    text-align: center;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}


/* ---- Card grid ----------------------------------------------------------- */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-auto-rows: minmax(560px, auto);
    gap: 20px;
    justify-content: center;
    margin: 0 auto 80px;
    align-items: start;
}

.exp-card {
    width: 400px;
    min-height: 560px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, opacity 0.22s ease;
    color: #2F2F2F;
}

/* Same outline recipe as .section8__phase8 .s8__card on the homepage */
.exp-card--bordered {
    box-shadow: inset 0 0 0 1px #FFFFFF;
}

.exp-card--bordered:hover {
    box-shadow: inset 0 0 0 1px var(--accent-lime);
}

.exp-card:not(.exp-card--bordered) .exp-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    box-sizing: border-box;
    pointer-events: none;
    transition: border-color 0.2s ease;
    z-index: 10;
}

.exp-card:not(.exp-card--bordered):hover .exp-card__media::after {
    border-color: var(--accent-lime);
}

/* Card A caption — 20px Medium per Figma.
   Sits to the right of the inset photo, anchored to the bottom of the card.
   Compound selector outranks the later `.exp-card__sub { position: relative }`
   line in the shared "card content above the photo" rule (~line 11615). */
.exp-card__sub.exp-card__sub--inset {
    position: absolute;
    left: 110px;
    bottom: 28px;
    max-width: 260px;
    font-size: 20px;
    line-height: 1.2;
}

.exp-card[hidden] {
    display: none;
}

.exp-card[data-href] {
    cursor: pointer;
}

/* XL card spans 2 cols × 2 rows (818×1166 in Figma → ~820×1166 here) */
.exp-card--xl {
    grid-column: span 2;
    grid-row: span 2;
    width: 820px;
    height: 1166px;
    padding: 0;
    overflow: hidden;
}

.exp-card__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.exp-card--xl .exp-card__photo {
    object-position: bottom;
}

.exp-card__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    pointer-events: none;
}

.exp-card__xl-poster {
    display: block;
}

.exp-card__photo--inset {
    /* small inline image (Figma 286:3113 / 286:3207 — R6VB0502 65×98) */
    position: absolute;
    width: 65px;
    height: 98px;
    left: 33px;
    top: 438px;
    object-fit: cover;
    border-radius: 4px;
    z-index: 1;
}

/* Card content sits above the absolute photo (when present) */
.exp-card__tags,
.exp-card__kicker,
.exp-card__title,
.exp-card__sub,
.exp-card__body {
    position: relative;
    z-index: 2;
}

.exp-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.exp-tag {
    display: inline-flex;
    align-items: center;
    height: 31px;
    padding: 0 15px;
    border-radius: 100px;
    border: 1px solid #2F2F2F;
    background: transparent;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #2F2F2F;
    white-space: nowrap;
}

.exp-tag--ghost {
    border-color: #2F2F2F;
    background: #2F2F2F;
    color: #E4E5EF;
}

.exp-tag-divider {
    flex: 1;
    height: 0;
    border-top: 1px solid #2F2F2F;
    align-self: center;
}

.exp-card__kicker {
    margin: 0;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.exp-card__title {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

/* Photo/dark cards use 20px Golos Medium for title (Figma 286:3746 spec) */
.exp-card__title--mid {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.exp-card__sub {
    margin: 0;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2F2F2F;
    opacity: 0.78;
}

.exp-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}


/* ---- Partners section ---------------------------------------------------- */
.exp-partners {
    margin: 80px auto 96px;
    color: #2F2F2F;
}

/* Override section9 styles when reused inside exp-partners:
   no green/dark background, dark text instead of white */
.exp-partners.section9.section9__phase9 {
    background: transparent;
    color: #2F2F2F;
    overflow: visible;
}

.exp-partners .s9__heading,
.exp-partners .s9__col-text,
.exp-partners .s9__col-link {
    color: #2F2F2F;
}

.exp-partners .s9__nav-btn {
    color: #2F2F2F;
}

.exp-partners .s9__nav-btn[disabled] {
    color: rgba(47, 47, 47, 0.4);
}

.exp-partners__title {
    text-align: center;
    margin: 0 0 56px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #2F2F2F;
}

.exp-partners__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.exp-partner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exp-partner__logo {
    height: 60px;
    width: 100%;
    background: rgba(47, 47, 47, 0.08);
    border-radius: 6px;
}

.exp-partner__text {
    margin: 0;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #2F2F2F;
    opacity: 0.78;
}


/* ---- Discussion + circular CTA (Figma 286:3070..3095) ------------------ */
.exp-discuss {
    text-align: center;
    margin: 80px auto 96px;
    position: relative;
    color: #2F2F2F;
}

/* Override section6 styles when reused inside exp-discuss:
   no green/dark gradient bg, dark text, dark rings, black button → white on hover.
   Canvas is taller (900) so the near-square ring SVG can render large. */
.exp-discuss.section6.section6__phase7 {
    color: #2F2F2F;
    --canvas-h: 1200;
    --canvas-scale: 1 !important;
}

.exp-discuss .section6__heading {
    color: #2F2F2F;
    top: 520px;
    width: 100%;
}

/* Experience page only — white rings by default (no invert), color on hover. */
.exp-page .exp-discuss.section6.section6__phase7 .section6__rings {
    width: 1000px !important;
    height: auto !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(calc(360deg * var(--section6-progress, 0))) !important;
    transition: opacity 0.4s ease;
}

.exp-page .exp-discuss.section6.section6__phase7 .section6__rings--color {
    opacity: 0;
    pointer-events: auto;
}

.exp-page .exp-discuss.section6.section6__phase7 .section6__rings--color:hover {
    opacity: 1;
}

.exp-page .exp-discuss:has(.section6__rings--color:hover) .section6__rings--white {
    opacity: 0;
}

.exp-discuss .section6__cta {
    left: 50%;
    top: 640px;
    transform: translateX(-50%);
    width: 360px;
    border-color: #2F2F2F;
    color: #FFFFFF;
    background: #2F2F2F;
    margin-top: 50px;
}

.exp-discuss .section6__cta:hover,
.exp-discuss .section6__cta:focus-visible {
    background: #FFFFFF;
    color: #2F2F2F;
}

.exp-discuss .section6__divider {
    display: none;
}

/* Vertical hairline divider above the ring — grows on scroll, mirrors
   .fs-f11__cta-divider behavior. Driven by --exp-discuss-divider-progress. */
.exp-discuss__divider {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: calc(40px + 240px * var(--exp-discuss-divider-progress, 0));
    background: #2F2F2F;
    transform: translateX(-50%);
    z-index: 4;
    will-change: height;
    pointer-events: none;
}

.exp-discuss__text {
    max-width: 1106px;
    margin: 0 auto 80px;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.exp-discuss__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    color: #2F2F2F;
    text-decoration: none;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.02em;
    margin: 0 auto;
}

.exp-discuss__btn-circle {
    position: absolute;
    inset: 0;
    border: 1px solid #2F2F2F;
    border-radius: 50%;
    pointer-events: none;
}

.exp-discuss__btn-label {
    position: relative;
}

.exp-discuss__caption {
    margin-top: 24px;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #2F2F2F;
    opacity: 0.7;
}


/* ---- Backstage image hero (Figma 286:3062) ----------------------------- */
.exp-backstage {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;
    overflow: hidden;
    background: #1a1a1a;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.exp-backstage__slides {
    position: relative;
    width: 100%;
    height: 859.296875px;
    flex: 0 0 auto;
    z-index: 0;
}

.exp-backstage__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.exp-backstage__photo.is-active {
    opacity: 1;
}

.exp-backstage__head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: min(100%, 1440px);
    margin: 0;
    padding-top: 31px;
    min-height: 0;
    pointer-events: none;
}

/* Footer wrapper inside exp-backstage: transparent so the photo bg shows through */
.exp-backstage__footer-wrap {
    position: relative;
    z-index: 1;
    background: transparent !important;
    margin-top: 0;
}

@media (min-width: 771px) {

    .exp-backstage footer .footer-btn:hover,
    .exp-backstage footer .footer-btn:active,
    .exp-backstage footer .footer-btn:focus-visible {
        background: #C2F04F;
        border-color: #C2F04F;
        border-radius: 55.1864px;
        color: #272727;
        opacity: 1;
    }
}

.exp-backstage__photo--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.04) 0 12px,
            transparent 12px 24px);
}

.exp-backstage__overlay {
    position: relative;
    top: 0;
    width: 538px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-align: center;
}

/* 24px below quote; chevrons at x≈694 / 734 on 1440 canvas */
.exp-backstage__nav {
    position: relative;
    width: 100%;
    height: 32px;
    margin-top: 24px;
}

.exp-backstage__nav-btn {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
}

/* viewBox 14×25 — без сжатия; высота как у старого exp_arrow (24px) */
.exp-backstage__nav-btn svg {
    display: block;
    width: 13.44px;
    height: 24px;
    flex-shrink: 0;
}

.exp-backstage__nav-btn--prev {
    left: 693.78px;
}

.exp-backstage__nav-btn--next {
    left: 733.94px;
    color: #ffffff;
}

.exp-backstage__nav-btn:hover,
.exp-backstage__nav-btn:focus-visible {
    color: #ffffff;
}

.exp-backstage__nav-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}


/* Footer on light page — light variant. Keeping the existing dark footer
   would clash; override key colors here. */
.exp-page footer {
    color: #2F2F2F;
}


/* ---- Tablet / intermediate (771–1439px) -------------------------------
   Stepped `zoom:` scaling so the fixed-pixel 1440-canvas layout shrinks
   proportionally to fit narrower viewports — same recipe as the
   research / index pages. Zoom values match (max_width − 16) / 1440. */
@media (min-width: 771px) and (max-width: 870px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.52;
    }
}

@media (min-width: 871px) and (max-width: 970px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.59;
    }
}

@media (min-width: 971px) and (max-width: 1080px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.66;
    }
}

@media (min-width: 1081px) and (max-width: 1180px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.73;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.80;
    }
}

@media (min-width: 1281px) and (max-width: 1380px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.87;
    }
}

@media (min-width: 1381px) and (max-width: 1439px) {

    .exp-hero,
    .exp-grid,
    .exp-loadmore,
    .exp-partners,
    .exp-discuss,
    .exp-backstage {
        zoom: 0.94;
    }
}


/* ---- Mobile (≤ 770 px) -------------------------------------------------- */
@media (max-width: 770px) {
    .exp {
        padding: 0 16px;
    }

    /* Mobile hero — Figma 286:5425. Replaces the desktop decorative shapes
       with a full-bleed portrait photo (image 575), title overlaid using
       mix-blend-difference, the Спецпроект brand pinned over the bottom of
       the photo, and a lime-gradient panel beneath holding the intro + toggle.
       Hero coords below are taken straight from the Figma frame. */
    .exp-hero {
        padding-top: 0;
        position: relative;
    }

    /* Desktop's decorative orbits/lines are not part of the mobile design */
    .exp-hero__shape,
    .exp-hero__lines-wrap {
        display: none;
    }

    /* Full-bleed hero background (mobile). */
    .exp-hero__photo {
        display: block;
        width: 100%;
        aspect-ratio: 391 / 525;
        object-fit: cover;
        object-position: center;
    }

    /* Canvas overlays the photo so brand + title sit at Figma coordinates.
       Explicitly resetting z-index to auto — the desktop rule sets z-index:1
       which creates a stacking context that isolates the title's mix-blend
       from the photo behind, collapsing the blend to plain white. */
    .exp-hero__canvas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        min-height: 0;
        z-index: auto;
    }

    /* Title positioned at top-left of the photo per Figma node 286:5425
       (y=197, x=28). Styled with white text + mix-blend-mode: difference
       (same recipe as .exp-card__media-title) so it inverts against the
       portrait — light text on dark hair, dark on light skin. */
    .exp-hero__title {
        position: absolute;
        top: 197px;
        left: 28px;
        right: 28px;
        margin: 0;
        text-align: left;
        font-family: 'Golos Text VF', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 0.85;
        letter-spacing: -0.04em;
        color: #FFFFFF;
        mix-blend-mode: difference;
        pointer-events: none;
    }

    .exp-hero__title-art {
        display: none;
    }

    .exp-hero__title-fallback {
        display: block;
        text-align: left;
        font-family: 'Golos Text VF', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 0.85;
        letter-spacing: -0.04em;
        color: #FFFFFF;
        mix-blend-mode: difference;
    }

    /* "Опыт" is indented in the Figma (left=59 vs 28-29 for the rest) */
    .exp-hero__title-line:first-child {
        padding-left: 31px;
    }

    /* Brand "Спецпроект СРЕДА_СВОИХ" pinned at y=396 (over photo bottom) */
    .exp-hero__brand {
        position: absolute;
        top: 396px;
        left: 0;
        right: 0;
        padding: 0;
        gap: 14px;
    }

    .exp-page .exp-hero__brand-logo {
        width: 165px;
        height: auto;
    }

    /* Lime gradient panel sits below the photo. Negative margin pulls the
       lime up to overlap the bottom of the photo at Figma y≈449 of 525
       (the gradient covers ~20vw of the photo so the brand line sits in
       front of the solid lime). */
    .exp-hero__panel {
        position: relative;
        margin-top: -20vw;
        padding: 38px 20px 60px;
        background: linear-gradient(to bottom, #C2F04F 0%, #C2F04F 51.5%, rgba(228, 229, 239, 0) 81.8%);
    }

    .exp-hero__intro {
        font-size: 16px;
        line-height: 1.3;
        margin: 0 auto 12px;
        text-align: left;
    }

    .exp-toggle {
        margin: 32px auto 16px;
        width: 100%;
        height: 46px;
    }

    .exp-toggle__seg {
        font-size: 14px;
    }

    .exp-toggle__seg--mid {
        width: 120px;
        height: 38px;
    }

    .exp-hero__sub {
        font-size: 15px;
        margin-bottom: 56px;
    }

    .exp-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 37px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* Mobile load-more button: Q-icon on the left + 2-line dark label.
       `width: fit-content` + `margin: 0 auto` centers the button horizontally
       on the page; flex with `align-items: center` keeps the icon and label
       vertically aligned to each other. JS sets [hidden] when ≤ 3 matches. */
    .exp-loadmore {
        display: flex;
        align-items: center;
        gap: 20px;
        width: fit-content;
        margin: 24px auto 32px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        text-align: left;
    }

    .exp-loadmore__icon {
        flex: 0 0 auto;
        width: 30px;
        height: 40px;
        display: block;
    }

    .exp-loadmore__label {
        font-family: 'Golos Text VF', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #2F2F2F;
    }

    .exp-card,
    .exp-card--xl {
        width: 100%;
        height: auto;
        min-height: 0;
        grid-column: auto;
        grid-row: auto;
        padding: 16px 18px 20px;
    }

    /* Bordered card (A) on mobile — Figma 286:4277.
       Card 334×473 with ~26px side padding, 32px title, smaller inset photo
       (54×82) tucked above caption (16px) at the bottom-left. */
    .exp-card--bordered {
        min-height: 473px;
        padding: 22px 26px 24px;
    }

    .exp-card--bordered .exp-card__title {
        font-size: 32px;
    }

    .exp-card__photo--inset {
        width: 54px;
        height: 82px;
        left: 26px;
        top: auto;
        bottom: 26px;
    }

    .exp-card__sub.exp-card__sub--inset {
        font-size: 16px;
        left: 92px;
        bottom: 23px;
        max-width: 210px;
    }

    /* Media-wrapper / xl variants: card itself has no padding so the photo is
       full-bleed inside the card; the overlay (tags + title + caption) gets
       its own side padding instead — see the .exp-card__overlay rule below. */
    .exp-card.exp-card--photo,
    .exp-card.exp-card--dark,
    .exp-card.exp-card--blurred,
    .exp-card.exp-card--polygons,
    .exp-card.exp-card--xl {
        padding: 0;
    }

    /* Media block: square at card width (was 400px fixed on desktop) */
    .exp-card__media,
    .exp-card--photo>.exp-card__photo {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* XL card keeps its desktop portrait aspect when stacked on mobile */
    .exp-card--xl {
        aspect-ratio: 820 / 1166;
    }

    .exp-card--xl .exp-card__video {
        object-fit: cover;
        object-position: bottom;
    }

    /* Photo positioning inside media — desktop uses px tuned for 400×400.
       Convert to % so the inner image scales with the card width. */
    .exp-card--photo .exp-card__media .exp-card__photo {
        top: -8.25%;
        width: 111.25%;
        height: 179.5%;
    }

    .exp-card--photo .exp-card__media .exp-card__photo--duotone {
        left: 30%;
        top: 7.5%;
        width: 80%;
        height: auto;
    }

    .exp-card--photo-duotone-full .exp-card__media .exp-card__photo--single {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .exp-card--photo-only-547 .exp-card__media .exp-card__photo--duotone {
        left: 12.75%;
        top: 3.75%;
        width: 87.25%;
        height: 96.25%;
    }

    .exp-card--photo-only-547.exp-card--photo-full .exp-card__media .exp-card__photo--duotone,
    .exp-card--photo-orange .exp-card__media .exp-card__photo--duotone {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: normal;
    }

    .exp-tag {
        height: 26px;
        padding: 0 15px;
    }

    .exp-card__title {
        font-size: 28px;
    }

    .exp-card__title--mid {
        font-size: 16px;
        line-height: 1.2;
    }

    .exp-card__sub {
        font-size: 14px;
        line-height: 1.2;
    }

    /* Overlay: no side padding on mobile; 21px from media to tags, then 15+15 like desktop */
    .exp-card--photo .exp-card__overlay,
    .exp-card--dark .exp-card__overlay,
    .exp-card--blurred .exp-card__overlay,
    .exp-card--polygons .exp-card__overlay {
        padding: 21px 0 0;
        gap: 0;
    }

    .exp-card--photo .exp-card__overlay .exp-card__tags,
    .exp-card--dark .exp-card__overlay .exp-card__tags,
    .exp-card--blurred .exp-card__overlay .exp-card__tags,
    .exp-card--polygons .exp-card__overlay .exp-card__tags {
        margin-bottom: 15px;
    }

    .exp-card--photo .exp-card__overlay .exp-card__title,
    .exp-card--dark .exp-card__overlay .exp-card__title,
    .exp-card--blurred .exp-card__overlay .exp-card__title,
    .exp-card--polygons .exp-card__overlay .exp-card__title {
        margin: 0 0 15px;
    }

    .exp-card--photo .exp-card__overlay .exp-card__sub,
    .exp-card--dark .exp-card__overlay .exp-card__sub,
    .exp-card--blurred .exp-card__overlay .exp-card__sub,
    .exp-card--polygons .exp-card__overlay .exp-card__sub {
        margin: 0;
    }

    .exp-card--photo .exp-card__overlay .exp-card__title--mid,
    .exp-card--dark .exp-card__overlay .exp-card__title--mid,
    .exp-card--blurred .exp-card__overlay .exp-card__title--mid,
    .exp-card--polygons .exp-card__overlay .exp-card__title--mid {
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* Card G's centered media title scales with the smaller mobile media block */
    .exp-card__media-title {
        font-size: 32px;
    }

    .exp-card__kicker {
        font-size: 22px;
    }

    .exp-partners {
        margin: 56px auto 64px;
    }

    .exp-partners__title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .exp-partners__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .exp-discuss {
        margin: 56px auto 64px;
    }

    .exp-discuss__text {
        font-size: 22px;
    }

    .exp-discuss__btn {
        width: 240px;
        height: 240px;
        font-size: 16px;
    }

    /* Mobile exp-discuss layout per Figma node 286:4546+ (754px-tall section,
       with heading + CTA centered vertically and the ring composition filling
       the canvas like the base .section6__phase7 mobile rings).
       Section breaks out of the parent .exp 16px gutter so the rings extend
       edge-to-edge — needs the compound selector to outrank the base
       .section6.section6__phase7 { width: 100% } rule. */
    .exp-discuss.section6.section6__phase7 {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .exp-discuss.section6.section6__phase7 .section6__canvas {
        min-height: 750px;
        padding: 64px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }

    /* Heading: 25px Medium, lh 1.1, max 330px wide (Figma 286:4560). */
    .exp-discuss .section6__heading {
        top: auto;
        max-width: 330px;
        font-size: 25px;
        line-height: 1.1;
        margin: 0;
    }

    /* CTA: dark pill 332×43 with 14px white label (Figma 286:4565). */
    .exp-discuss .section6__cta {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 332px;
        height: 43px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 41px;
        border-radius: 22px;
    }

    /* Rings fill the canvas on mobile + scroll rotation with scale(1.6). */
    .exp-page .exp-discuss.section6.section6__phase7 .section6__rings {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        inset: 0 !important;
        left: auto !important;
        top: auto !important;
        transform: rotate(calc(360deg * var(--section6-progress, 0))) scale(1.6) !important;
    }

    .exp-backstage__head {
        padding-top: 16px;
    }

    .exp-backstage__overlay {
        width: 90%;
        top: 0;
        font-size: 16px;
    }

    /* Mobile: drop the backstage photo + quote and let the regular dark
       footer render on its own #272727 background */
    .exp-backstage {
        min-height: 0;
        padding-top: 0;
        background: transparent;
    }

    .exp-backstage__slides,
    .exp-backstage__head {
        display: none;
    }

    .exp-backstage__footer-wrap {
        background: #272727 !important;
    }
}


/* Photo card variant: full-bleed image with text overlay at the bottom */
.exp-card--photo {
    padding: 0;
    overflow: hidden;
}

/* Default photo for photo cards without media wrapper (C, H, I, M) — flow, full width 400 */
.exp-card--photo>.exp-card__photo {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 400px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Card B only: media wrapper 400×400 (Figma 286:3128) holds base image
   positioned with Figma coords for zoomed-in face + duotone overlay. */
.exp-card--photo .exp-card__media {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    flex: 0 0 auto;
}

.exp-card--photo .exp-card__media .exp-card__photo {
    position: absolute;
    top: -33px;
    width: 445px;
    height: 718px;
    object-fit: cover;
    z-index: 0;
}

.exp-card--photo .exp-card__media .exp-card__photo--duotone {
    position: absolute;
    left: 120px;
    top: 30px;
    width: 320px;
    height: auto;
    object-fit: contain;
    mix-blend-mode: darken;
    z-index: 1;
    pointer-events: none;
}

.exp-card--photo-duotone-full .exp-card__media .exp-card__photo--single {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Cards C, I, M (Figma 286:3214 / 286:3160 / 286:3225):
   light gray #f2f2f2 media bg + only image 547 (purple face) — no base 546.
   Figma coords: left:51 top:15 w:349 h:385 inside 400×400 media. */
.exp-card--photo-only-547 .exp-card__media {
    background: #f2f2f2;
}

.exp-card--photo-only-547 .exp-card__media .exp-card__photo--duotone {
    /* Figma coords (286:3223 etc): image 547 at left:51 top:15 w:349 h:385
       inside the 400×400 media box */
    left: 51px;
    top: 15px;
    width: 349px;
    height: 385px;
    transform: none;
    object-fit: contain;
    object-position: bottom right;
    mix-blend-mode: normal;
    opacity: 1;
}

.exp-card--photo-only-547.exp-card--photo-full .exp-card__media {
    background: transparent;
}

.exp-card--photo-only-547.exp-card--photo-full .exp-card__media .exp-card__photo--duotone {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Card H (Figma 286:3145): full-bleed photo, no orange duotone overlay */
.exp-card--photo-orange .exp-card__media {
    background: transparent;
}

.exp-card--photo-orange .exp-card__media .exp-card__photo--duotone {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
    opacity: 1;
}

/* old block kept for variants that still need full-bleed photo */
.exp-card--photo.exp-card--text-on-photo .exp-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.exp-card__overlay {
    position: relative;
    z-index: 2;
    padding: 22px 7px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #2F2F2F;
    flex: 1 1 auto;
}

/* Media cards: overlay without side padding (photo / dark / blurred / polygons). */
.exp-card--photo .exp-card__overlay,
.exp-card--dark .exp-card__overlay,
.exp-card--blurred .exp-card__overlay,
.exp-card--polygons .exp-card__overlay {
    padding: 22px 0 0;
    gap: 0;
}

.exp-card--photo .exp-card__overlay .exp-card__tags,
.exp-card--dark .exp-card__overlay .exp-card__tags,
.exp-card--blurred .exp-card__overlay .exp-card__tags,
.exp-card--polygons .exp-card__overlay .exp-card__tags {
    margin-bottom: 15px;
}

.exp-card--photo .exp-card__overlay .exp-card__title,
.exp-card--dark .exp-card__overlay .exp-card__title,
.exp-card--blurred .exp-card__overlay .exp-card__title,
.exp-card--polygons .exp-card__overlay .exp-card__title {
    margin: 0 0 15px;
}

.exp-card--photo .exp-card__overlay .exp-card__sub,
.exp-card--dark .exp-card__overlay .exp-card__sub,
.exp-card--blurred .exp-card__overlay .exp-card__sub,
.exp-card--polygons .exp-card__overlay .exp-card__sub {
    margin: 0;
}

/* text-on-photo variant: text floats on top of photo with white gradient bg */
.exp-card--text-on-photo .exp-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.96) 70%,
            rgba(255, 255, 255, 0) 100%);
}

.exp-card--photo .exp-card__title,
.exp-card--photo .exp-card__sub,
.exp-card--photo .exp-card__tags {
    color: #2F2F2F;
}

@media (max-width: 1439px) {
    .exp-backstage__nav-btn--prev {
        left: 48.18%;
    }

    .exp-backstage__nav-btn--next {
        left: 50.97%;
    }
}

/* XL card duotone overlay (Figma 286:3253: image 546 + image 547 with
   mix-blend-darken at 50% opacity, offset by ~96 px to create the
   ghosting/portrait effect) */
.exp-card--xl .exp-card__photo--duotone {
    mix-blend-mode: darken;
    z-index: 1;
}


/* ---- Card colour tints (Figma duotone overlays on the photo) ----------- */
.exp-card__tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 1;
    pointer-events: none;
}

/* tint covers full card on text-on-photo and XL variants */
.exp-card--text-on-photo .exp-card__tint,
.exp-card--xl .exp-card__tint {
    inset: 0;
    width: auto;
    height: auto;
}

.exp-card__tint--purple {
    background: #AA6EFF;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.exp-card__tint--purple-strong {
    background: #AA6EFF;
    mix-blend-mode: multiply;
    opacity: 0.75;
}

.exp-card__tint--orange {
    background: #FF6E32;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.exp-card__photo--blur {
    filter: blur(13.32px);
    transform: scale(1.08);
    /* hide blurred edge */
}

/* Title positioned at the TOP of a photo card (Figma 286:3132 / 286:3170) */
.exp-card__title--top {
    position: absolute;
    z-index: 3;
    top: 28px;
    left: 28px;
    right: 28px;
    margin: 0;
    text-align: left;
}

/* Card variant: text directly on photo (no white overlay panel) */
.exp-card--text-on-photo .exp-card__overlay {
    background: transparent;
}

.exp-card--text-on-photo .exp-card__title,
.exp-card--text-on-photo .exp-card__sub,
.exp-card--text-on-photo .exp-card__tags {
    color: #FFFFFF;
}


/* ---- Dark card variant (Figma 286:3100 / 286:3183) --------------------- */
.exp-card--dark {
    padding: 0;
    color: #2F2F2F;
    overflow: hidden;
    position: relative;
}

/* Square media block at top of card (analog of photo block in photo cards).
   Used by dark/polygons cards (286:3100, 286:3183, 286:3194). */
.exp-card__media {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    flex: 0 0 auto;
}

.exp-card--dark .exp-card__media,
.exp-card--polygons .exp-card__media {
    background: #272727;
}

/* Smaller title used on dark/event cards (Figma 20px) */
.exp-card__title--small {
    font-size: 20px;
    line-height: 1;
}

.exp-card__diagonal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.exp-card__diagonal-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.exp-card--dark .exp-card__tags,
.exp-card--dark .exp-card__title,
.exp-card--dark .exp-card__sub,
.exp-card--dark .exp-card__kicker,
.exp-card--dark .exp-card__body {
    position: relative;
    z-index: 2;
}


/* ---- Blurred-photo card variant (Figma 286:3766 / 286:3170) ----------
   Dark media block 400×400 with blurred face photo inside + 40px white
   centered title overlay (mix-blend-difference), tags + title + caption below */
.exp-card--blurred {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.exp-card--blurred .exp-card__media {
    /* background: #272727; */
}

.exp-card__photo--blurred {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(13.32px);
    pointer-events: none;
}

.exp-card__photo--blurred.exp-card__photo--full {
    filter: none;
}

.exp-card__media-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 90%;
    text-align: center;
    font-family: 'Golos Text VF', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    mix-blend-mode: difference;
    z-index: 2;
    pointer-events: none;
}


/* ---- Polygon card variant (Figma 286:3194 / 286:3804) -----------------
   Dark media block 400×400 with 3px lime border, polygons inside,
   tags + title + caption below in normal flow */
.exp-card--polygons {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.exp-card--polygons .exp-card__media {
    box-sizing: border-box;
}

.exp-card__polygons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


/* ---- Inverse / accent tag variants ------------------------------------- */
.exp-tag--inv {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.exp-tag--lime {
    background: #C2F04F;
    border-color: #C2F04F;
    color: #2F2F2F;
}

.exp-tag-divider--inv {
    border-top-color: #FFFFFF;
}

.exp-card__title--inv {
    color: #FFFFFF;
}

.exp-card__sub--inv {
    color: rgba(255, 255, 255, 0.78);
}

.exp-card__kicker--inv {
    color: #FFFFFF;
}

/* Footer on experience page is transparent — photo bg shows through */
.exp-page footer {
    background: transparent !important;
}




/* ============================================================================
   ABOUT PAGE  (Figma 276:449 desktop / 276:574 mobile)
   ============================================================================
   Page-specific layout for /about.html — "Об организаторах". Follows the
   same canvas/zoom pattern as the rest of the site: desktop laid out at a
   fixed 1440 px canvas with absolute positioning per Figma; zoom-ladder
   for 771–1439; dedicated mobile rules ≤ 770.
   ============================================================================ */

.about-page {
    background: #272727;
}

.about-page main.about {
    position: relative;
    width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 1960px;
    background: #272727;
    color: #FFFFFF;
    font-family: 'Golos Text', 'Golos', sans-serif;
    overflow: hidden;
}

/* Mobile-only mini brand mark — hidden on desktop */
.about-page .about__brand-mini {
    display: none;
}

/* ---- 1. HERO  (title + two-column intro with lime callout frame) ---- */
.about-hero {
    position: relative;
    height: 0;
}

.about-hero__title {
    position: absolute;
    left: 63px;
    top: 176.29px;
    margin: 0;
    width: 609px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: -0.7px;
    color: #FFFFFF;
}

.about-hero__lead {
    position: absolute;
    left: 63px;
    top: 272.58px;
    margin: 0;
    width: 870px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: -0.7px;
    color: #FFFFFF;
}

.about-hero__aside {
    position: absolute;
    left: 961px;
    top: 257.58px;
    width: 410.719px;
    margin: 0;
    padding: 0;
}

.about-hero__callout {
    margin: 0;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #FFFFFF;
}

.about-hero__callout-frame {
    display: inline-block;
    border: 1px solid #D9FF66;
    padding: 1px 8px 2px;
    margin-right: 2px;
    mix-blend-mode: plus-lighter;
    line-height: 1.1;
}

/* ---- 2. CTA  (decorative chromatic shapes + email) ---- */
.about-cta {
    position: relative;
    height: 0;
}

.about-cta__decor {
    position: absolute;
    left: 0;
    top: 408px;
    width: 1440px;
    height: calc(1440px * 1948 / 2762);
    pointer-events: none;
    background: url('../img/figma/about_cta_decor.png') center top / 100% 100% no-repeat;
}

/* CTA text */
.about-cta__lead {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 762.07px;
    margin: 0;
    width: 534px;
    text-align: center;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 28.571px;
    line-height: 1.1;
    color: #FFFFFF;
}

.about-cta__email {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 880.31px;
    z-index: 2;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 44.893px;
    line-height: 1.1;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

.about-cta__email:hover,
.about-cta__email:focus,
.about-cta__email:active {
    text-decoration: none;
}

/* ---- Shared logo dimensions (Среда своих + учредители, Figma) ------------ */
:root {
    --site-logo-sreda-w: 121.5px;
    --site-logo-sreda-h: 44.97px;
    --site-logo-sreda-mobile-w: 120px;
    --site-logo-founder-kosimp-w: 189.030px;
    --site-logo-founder-kosimp-h: 55.979px;
    --site-logo-founder-mdoo-w: 189.091px;
    --site-logo-founder-mdoo-h: 54.364px;
    --site-logo-founder-mobile-w: 143.534px;
    --site-logo-founder-mobile-h: 42.506px;
}

/* ---- 3. Founders / Organizer ---- */
.about-orgs {
    position: relative;
    height: 0;
}

.about-orgs__col {
    position: absolute;
}

.about-orgs__col--founders {
    left: 64px;
    top: 1254px;
    width: 480px;
}

.about-orgs__col--organizer {
    left: 618px;
    top: 1254px;
    width: 780px;
}

.about-orgs__heading {
    margin: 0 0 51px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #FFFFFF;
    white-space: nowrap;
}

.about-orgs__col--organizer .about-orgs__heading {
    white-space: nowrap;
}

.about-orgs__logos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 47px;
}

.about-orgs__logos .about-orgs__logo {
    display: block;
    object-fit: contain;
}

.about-orgs__logo--kosimp {
    width: var(--site-logo-founder-kosimp-w);
    height: var(--site-logo-founder-kosimp-h);
}

.about-orgs__logo--mdoo {
    width: var(--site-logo-founder-mdoo-w);
    height: var(--site-logo-founder-mdoo-h);
}

.about-orgs__col--organizer .about-orgs__logo--sreda {
    width: var(--site-logo-sreda-w);
    height: auto;
    margin: 0 0 48px;
    cursor: pointer;
}

.about-orgs__text {
    margin: 0 0 16px;
    width: 423px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.32px;
    color: #FFFFFF;
}

.about-orgs__col--organizer .about-orgs__text--lead {
    width: 424px;
    letter-spacing: 0;
    margin-bottom: 124px;
}

.about-orgs__col--organizer .about-orgs__text--sub {
    width: 758px;
    margin-bottom: 24px;
}

.about-orgs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-orgs__item {
    position: relative;
    padding-left: 22px;
    width: 290px;
    margin: 0 0 21px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #FFFFFF;
}

.about-orgs__dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 6.25px;
    height: 6.25px;
    background: #C2F04F;
    mix-blend-mode: plus-lighter;
}


/* ---- Zoom ladder for intermediate viewports (771–1439) ---- */
@media (min-width: 1381px) and (max-width: 1439px) {
    .about-page {
        zoom: 0.94;
    }
}

@media (min-width: 1281px) and (max-width: 1380px) {
    .about-page {
        zoom: 0.87;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    .about-page {
        zoom: 0.80;
    }
}

@media (min-width: 1081px) and (max-width: 1180px) {
    .about-page {
        zoom: 0.73;
    }
}

@media (min-width: 971px) and (max-width: 1080px) {
    .about-page {
        zoom: 0.66;
    }
}

@media (min-width: 871px) and (max-width: 970px) {
    .about-page {
        zoom: 0.59;
    }
}

@media (min-width: 771px) and (max-width: 870px) {
    .about-page {
        zoom: 0.52;
    }
}


/* ---- Mobile (≤ 770) ---- */
@media (max-width: 770px) {

    .about-page main.about {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        padding: 0;
        overflow: hidden;
    }

    /* Mini brand mark from Figma overlaps the existing burger button — keep
       hidden since the burger handles navigation on mobile. */
    .about-page .about__brand-mini {
        display: none;
    }

    /* Hero — restack flow */
    .about-hero {
        position: relative;
        height: auto;
        padding: 100px 20px 0;
    }

    .about-page .about-hero__title {
        position: static;
        width: auto;
        font-size: 25px;
        line-height: 1.1;
        letter-spacing: -0.5px;
        margin: 0 0 30px;
    }

    .about-page .about-hero__lead {
        position: static;
        width: auto;
        max-width: 336px;
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.44px;
        margin: 0 0 32px;
    }

    .about-page .about-hero__aside {
        position: static;
        width: auto;
        max-width: 336px;
        margin: 0;
    }

    .about-page .about-hero__callout {
        font-size: 14px;
        line-height: 1.35;
    }

    .about-page .about-hero__callout-frame {
        padding: 1px 5px 1px;
        font-size: 14px;
        line-height: 1.2;
    }

    /* CTA — высота по пропорциям final2 (750×1364), без обрезки декора */
    .about-cta {
        position: relative;
        width: 100%;
        aspect-ratio: 750 / 1364;
        height: auto;
        min-height: 0;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .about-page .about-cta__decor {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        background-image: url('../img/figma/about_cta_decor_mobile.png');
        background-repeat: no-repeat;
        background-position: center calc(50% + 40px);
        background-size: 100% auto;
    }

    .about-page .about-cta__lead {
        position: relative;
        z-index: 1;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        max-width: 335px;
        margin: 0 auto 24px;
        font-family: 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.1;
        letter-spacing: 0;
        text-align: center;
        color: #FFFFFF;
    }

    .about-page .about-cta__email {
        position: relative;
        z-index: 2;
        left: auto;
        top: auto;
        transform: none;
        display: inline-block;
        font-family: 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 25px;
        line-height: 1.1;
        letter-spacing: 0;
        text-align: center;
        color: #FFFFFF;
        text-decoration: none;
        cursor: pointer;
        pointer-events: auto;
        margin: 0 auto;
    }

    .about-page .about-cta__email:hover,
    .about-page .about-cta__email:focus,
    .about-page .about-cta__email:active {
        text-decoration: none;
    }

    /* Orgs */
    .about-orgs {
        position: relative;
        height: auto;
        padding: 40px 20px 60px;
    }

    .about-page .about-orgs__col {
        position: static;
        width: auto;
        max-width: 100%;
    }

    .about-page .about-orgs__col--founders {
        margin-bottom: 60px;
    }

    .about-page .about-orgs__heading {
        font-size: 20px;
        margin-bottom: 36px;
        white-space: normal;
    }

    .about-page .about-orgs__col--founders .about-orgs__heading {
        margin-bottom: 0;
    }

    .about-page .about-orgs__logos {
        gap: 28px;
        margin-top: 32px;
        margin-bottom: 28px;
    }

    .about-page .about-orgs__logos .about-orgs__logo {
        width: var(--site-logo-founder-mobile-w);
        height: var(--site-logo-founder-mobile-h);
        object-fit: contain;
    }

    /* Среда своих — единый мобильный размер на всех страницах */
    .section1__logo,
    .fs-hero__sreda-logo,
    .about-page .about-orgs__col--organizer .about-orgs__logo--sreda {
        width: var(--site-logo-sreda-mobile-w);
        height: auto;
    }

    .about-page .about-orgs__col--organizer .about-orgs__logo--sreda {
        margin: 0 0 36px;
    }

    .about-page .about-orgs__text {
        width: auto;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.35;
        letter-spacing: -0.28px;
    }

    .about-page .about-orgs__col--organizer .about-orgs__text--lead {
        width: auto;
        margin-bottom: 40px;
    }

    .about-page .about-orgs__col--organizer .about-orgs__text--sub {
        width: auto;
        margin-bottom: 24px;
    }

    .about-page .about-orgs__item {
        width: auto;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.2;
        padding-left: 22px;
        margin-bottom: 18px;
    }
}


/* ============================================================================
   PDF MODAL  (Figma 282:1092)
   ============================================================================
   Modal that opens on click of "Получить исследование в PDF" CTAs in
   research.html (.fs-f2__cta-pdf and .fs-f11__cta-pdf). Glass card with
   lime border + decorative swirls, close X in top-right.
   ============================================================================ */

.pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pdf-modal--open {
    display: flex;
}

.pdf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}

.pdf-modal__card {
    position: relative;
    width: 838px;
    max-width: 100%;
    min-height: 594px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid #C2F04F;
    border-radius: 100px;
    overflow: hidden;
    padding: 60px 70px 60px 70px;
    box-sizing: border-box;
}

.pdf-modal__decor {
    position: absolute;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: auto;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}

/* Close button — top-right corner of the card (shell wraps card + button). */
.pdf-modal__shell {
    position: relative;
    width: 838px;
    max-width: 100%;
}

.pdf-modal__close {
    position: absolute;
    top: -10px;
    right: 0;
    transform: translate(18%, -18%);
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-modal__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.pdf-modal__close:hover {
    opacity: 0.8;
}

.pdf-modal__body {
    position: relative;
    z-index: 1;
    margin-left: auto;
    width: 100%;
    max-width: 420px;
}

.pdf-modal__title {
    margin: 0 0 28px;
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 29px;
    line-height: 1.05;
    color: #FFFFFF;
}

.pdf-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdf-modal__input {
    height: 56px;
    padding: 0 28px;
    background: transparent;
    border: 0.5px solid #C2F04F;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -0.34px;
    outline: none;
    transition: border-color 0.15s ease;
}

.pdf-modal__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.pdf-modal__input:focus {
    border-color: #FFFFFF;
}

.pdf-modal__checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 8px;
}

.pdf-modal__check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pdf-modal__check-input {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: transparent;
    border: 1.5px solid #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pdf-modal__check-input:hover {
    border-color: #C2F04F;
}

.pdf-modal__check-input:checked {
    background-color: #C2F04F;
    border-color: #C2F04F;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6.5L5 9L9.5 3.5' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
}

.pdf-modal__check-text {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    color: #FFFFFF;
}

.pdf-modal__check-text a {
    color: inherit;
    text-decoration: underline;
}

.pdf-modal__submit {
    margin-top: 22px;
    height: 56px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    color: #272727;
    font-family: 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 17.7px;
    line-height: 1.1;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.pdf-modal__form:valid .pdf-modal__submit {
    background: #C2F04F;
    border-color: #C2F04F;
}

.pdf-modal__submit:hover {
    opacity: 0.9;
}

@media (max-width: 770px) {
    .pdf-modal {
        align-items: center;
        justify-content: center;
        padding: 16px;
        overflow-y: auto;
    }

    .pdf-modal__shell {
        width: 347.869140625px;
        height: auto;
        max-width: calc(100vw - 32px);
        margin: auto;
        flex-shrink: 0;
        overflow: visible;
    }

    .pdf-modal__card {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 22px 28px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        border: 1px solid #C2F04F;
        border-radius: 32px;
        overflow: hidden;
    }

    /* Эллипс — над стеклом (blur на .card), под контентом */
    .pdf-modal__card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: url(../img/figma/pdf_modal_shell_mobile.png) calc(50% + 20px) calc(-10% - 40px) / cover no-repeat;
        border-radius: inherit;
        mix-blend-mode: plus-lighter;
        pointer-events: none;
    }

    .pdf-modal__card::after {
        display: none;
    }

    .pdf-modal__decor {
        display: none;
    }

    .pdf-modal__close {
        top: -29px;
        right: -6px;
        left: auto;
        transform: none;
        width: 27.390625px;
        height: 27.390625px;
    }

    .pdf-modal__body {
        position: relative;
        z-index: 2;
        max-width: 100%;
    }

    .pdf-modal__title {
        margin: 131px 0 22px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.05;
        letter-spacing: 0;
    }

    .pdf-modal__input {
        display: block;
        box-sizing: border-box;
        width: 303.6796875px;
        max-width: 100%;
        height: 29.354084014892578px;
        margin: 0 auto;
        padding: 0 12px;
        border: 0.5px solid rgba(194, 240, 79, 1);
        border-radius: 0;
        font-family: 'Golos UI', 'Golos Text', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 1);
    }

    .pdf-modal__input::placeholder {
        font-family: 'Golos UI', 'Golos Text', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .pdf-modal__checks {
        width: 303.6796875px;
        max-width: 100%;
        margin: 2px auto 0;
    }

    .pdf-modal__check {
        align-items: center;
        gap: 6px;
    }

    .pdf-modal__check-input {
        width: 8.378134727478027px;
        height: 8.475166320800781px;
        flex: 0 0 8.378134727478027px;
        border-width: 1.1px;
        border-radius: 2px;
    }

    .pdf-modal__check-input:checked {
        background-size: 65% 65%;
    }

    .pdf-modal__check-text {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 8.78px;
        line-height: 16.47px;
        letter-spacing: 0;
        text-decoration: underline;
        text-decoration-style: solid;
        text-underline-offset: 0;
        text-decoration-thickness: from-font;
    }

    .pdf-modal__check-text a {
        color: inherit;
        text-decoration: underline;
        text-decoration-style: solid;
        text-underline-offset: 0;
        text-decoration-thickness: from-font;
    }

    .pdf-modal__submit {
        display: block;
        box-sizing: border-box;
        width: 307.869140625px;
        max-width: 100%;
        height: 40px;
        margin: 2px auto 0;
        padding: 0;
        border: 0.49px solid rgba(47, 47, 47, 1);
        border-radius: 0;
        background: #FFFFFF;
        color: #272727;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .pdf-modal__form:valid .pdf-modal__submit {
        background: #C2F04F;
        border-color: rgba(47, 47, 47, 1);
    }
}

/* ============================================================
   Copy-link toast — global element appended once by main.js when
   share buttons exist. Dark pill, fades in/out via opacity.
   ============================================================ */
.copy-toast {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: #404040;
    color: #FFFFFF;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 9999;
}

.copy-toast.is-visible {
    opacity: 1;
}

/* ============================================================
   Article page (/articles/1) — long-form interview layout.
   Flow-based (no absolute canvas); max text width 820px.
   ============================================================ */
.art-page {
    background: #D2D2D2;
    color: #2F2F2F;
}

.art-page header {
    color: #FFFFFF;
}

.art {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    position: relative;
    background: #D2D2D2;
}

.art-hero {
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
}

.art__content {
    display: flex;
    flex-direction: column;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
}

.art-hero__title {
    margin: 0;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #2F2F2F;
}

.art-hero__title-serif,
.art-hero__title-sans {
    display: block;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    color: inherit;
}

.art-hero__title-serif {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
}

.art-hero__title-sans {
    font-family: 'Golos', 'Golos Text', sans-serif;
}

/* Outlined «организаций/личный + бренд» — crossfade between two label PNGs. */
.art-labels {
    position: relative;
    width: 100%;
    max-width: 812px;
    margin: 40px auto 0;
    aspect-ratio: 812 / 272;
    pointer-events: none;
}

.art-labels__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    animation-fill-mode: both;
}

.art-labels__frame--1 {
    opacity: 1;
    animation: art-labels-state-1 6s ease-in-out infinite;
}

.art-labels__frame--2 {
    opacity: 0;
    animation: art-labels-state-2 6s ease-in-out infinite;
}

@keyframes art-labels-state-1 {

    0%,
    42% {
        opacity: 1;
    }

    50%,
    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes art-labels-state-2 {

    0%,
    42% {
        opacity: 0;
    }

    50%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .art-labels__frame--1,
    .art-labels__frame--2 {
        animation: none;
    }

    .art-labels__frame--2 {
        display: none;
    }
}

.art-words {
    position: relative;
    max-width: 820px;
    height: 160px;
    margin: 0 auto 40px;
    pointer-events: none;
}

.art-words__layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(812px, 100%);
    height: auto;
    object-fit: contain;
}

.art-words__layer--org {
    top: 0;
    z-index: 1;
}

.art-words__layer--brand {
    top: 48px;
    z-index: 2;
}

.art-lead {
    max-width: 820px;
    margin: 0 auto 64px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-hero .art-lead {
    margin: 122px 0 0;
    font-size: 25px;
}

.art-hero .art-lead strong {
    font-weight: 700;
}

/* Portrait — scroll crossfade (--art-portrait-progress, same sweep as section6). */
@property --art-portrait-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.art-portrait {
    --art-portrait-progress: 0;
    --art-portrait-o1: 1;
    --art-portrait-o2: 0;
    --art-portrait-o3: 0;
    width: 298px;
    max-width: 100%;
    margin: 0 auto 96px;
}

.art-hero .art-portrait {
    margin-top: 84px;
}

.art-portrait__frame {
    position: relative;
    overflow: hidden;
    background: #EAEAEA;
    aspect-ratio: 298 / 401;
}

.art-portrait__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.art-portrait__photo--1 {
    opacity: var(--art-portrait-o1);
}

.art-portrait__photo--2 {
    opacity: var(--art-portrait-o2);
}

.art-portrait__photo--3 {
    opacity: var(--art-portrait-o3);
}

@media (prefers-reduced-motion: reduce) {
    .art-portrait__photo--1 {
        opacity: 1;
    }

    .art-portrait__photo--2,
    .art-portrait__photo--3 {
        display: none;
    }
}

.art-block {
    max-width: 1032px;
    margin: 0 auto 48px;
    padding: 48px 40px;
    box-sizing: border-box;
    color: #2F2F2F;
}

.art-block--purple {
    margin-bottom: 107px;
    padding: 55px 105px 78px;
    mix-blend-mode: normal;
    color: rgba(47, 47, 47, 1);
    background: linear-gradient(180deg, #AA6EFF -4.17%, rgba(228, 229, 239, 0) 90.51%);
}

.art-block--purple .art-block__title {
    color: #2F2F2F;
}

.art-block--purple .art-block__body p {
    color: #2F2F2F;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
}

.art-block--purple .art-block__body p+p {
    margin-top: 1.3em;
}

.art-block--purple .art-quote p {
    color: #2F2F2F;
}

.art-block--orange {
    margin-bottom: 0;
    padding: 67px 96px 88px 112px;
    mix-blend-mode: normal;
    color: #2F2F2F;
    background: linear-gradient(180deg, #FF8C32 0%, rgba(228, 229, 239, 0) 90.51%);
}

.art-block--orange .art-block__title {
    margin: 0 0 25px;
}

.art-block--orange .art-block__title,
.art-block--orange .art-block__intro,
.art-block--orange .art-block__note,
.art-block--orange .art-block__closing,
.art-block--orange .art-step__pill,
.art-block--orange .art-step__text,
.art-block--orange .art-quote p {
    color: #2F2F2F;
}

.art-block--orange .art-block__intro {
    max-width: 825px;
    margin: 0 auto 62px;
}

.art-block--orange .art-block__intro p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    color: #2F2F2F;
}

.art-block--orange .art-block__intro p+p {
    margin-top: 1.3em;
}

.art-block--orange .art-steps {
    max-width: 820px;
    margin: 0 auto 45px;
    gap: 0;
}

.art-block--orange .art-step {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    max-width: 820px;
}

.art-block--orange .art-step:nth-child(1) {
    margin-bottom: 8px;
}

.art-block--orange .art-step:nth-child(2) {
    margin-bottom: 23px;
}

.art-block--orange .art-step__pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 400px;
    max-width: 100%;
    margin: 0;
    padding: 5px 15px 7px;
    flex-shrink: 0;
    border: 1px solid #000000;
    border-radius: 100px;
    opacity: 1;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

@media (min-width: 901px) {
    .art-block--orange .art-step:nth-child(1) .art-step__pill {
        height: 185px;
    }

    .art-block--orange .art-step:nth-child(2) .art-step__pill {
        height: 289px;
    }

    .art-block--orange .art-step:nth-child(3) .art-step__pill {
        height: 156px;
    }
}

.art-block--orange .art-block__note {
    max-width: 825px;
    margin: 0 auto;
    margin-top: 0;
}

.art-block--orange .art-quote {
    width: 100%;
    max-width: 810px;
    margin: 77px auto 0;
    padding: 0;
}

.art-block--orange .art-quote p {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    text-align: center;
}

.art-block--orange .art-block__closing {
    max-width: 825px;
    margin: 77px auto 0;
}

.art-block__title {
    max-width: 820px;
    margin: 0 0 25px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.art-block__body p,
.art-block__intro,
.art-block__note,
.art-note {
    max-width: 820px;
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
}

.art-block--purple .art-quote {
    width: 100%;
    max-width: 825px;
    margin: 60px auto 0;
    padding: 0;
}

.art-block--purple .art-quote p {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    text-align: center;
}

.art-block__intro {
    margin-bottom: 40px;
}

.art-block__note {
    margin-top: 40px;
}

.art-quote {
    max-width: 825px;
    margin: 0 auto 48px;
    padding: 0;
    border: 0;
    text-align: center;
}

.art-quote p {
    margin: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    color: #2F2F2F;
}

.art-note {
    max-width: 820px;
    margin: 0 auto 64px;
}

.art-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.art-step {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 24px;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
}

.art-step__pill {
    margin: 0;
    min-height: 120px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #000000;
    border-radius: 100px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2F2F2F;
    box-sizing: border-box;
}

.art-step__text {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    color: #2F2F2F;
}

.art-outro {
    width: 100%;
    max-width: 826.76px;
    min-height: 256px;
    margin: 130px auto 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.art-outro__label {
    margin: 0 0 10px;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(39, 39, 39, 1);
}

.art-outro__line {
    width: 87.84px;
    height: 0;
    margin: 0 auto 23px;
    border: 0;
    border-top: 1px solid rgba(39, 39, 39, 1);
}

.art-outro__text {
    margin: 0 0 110px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(39, 39, 39, 1);
}

/* CTA — white ellipse + study link. */
@property --art-cta-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.art-cta {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 0 30px;
    padding: 0 24px 0;
    box-sizing: border-box;
    overflow: visible;
    --art-cta-progress: 0;
}

.art-cta__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.art-cta__line-img {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 68px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.art-cta__line-img--top {
    margin-bottom: 10px;
}

.art-cta__divider--bottom {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 32px;
    margin: 0 auto;
    background-color: #272727;
    pointer-events: none;
}

.art-cta__stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 826px;
    height: 858px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* white_ellipse.png — scroll-driven 360° rotation (mirrors .fs-f2__cta-art). */
.art-cta__decor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1000px, 100%);
    height: auto;
    aspect-ratio: 1000 / 1176;
    transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.art-cta__ellipse {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: none;
    pointer-events: none;
}

.art-cta__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 571px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.art-cta__text {
    margin: 0 auto 58px;
    max-width: 571px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    color: rgba(39, 39, 39, 1);
}

.art-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 490px;
    max-width: 100%;
    height: 60px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #272727;
    border-radius: 30px;
    background-color: #272727;
    color: rgba(255, 255, 255, 1);
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 48.57px;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    mix-blend-mode: normal;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.art-cta__btn:visited {
    color: rgba(255, 255, 255, 1);
}

.art-cta__btn:hover,
.art-cta__btn:visited:hover,
.art-cta__btn:focus-visible {
    background-color: #FFFFFF;
    color: #2F2F2F;
}

.art-page footer {
    color: #FFFFFF;
}

@media (max-width: 770px) {
    .art {
        padding: 0;
    }

    .art-hero .art__content {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .art-hero {
        padding-top: 179px;
        padding-bottom: 48px;
    }

    .art-hero__title,
    .art-hero__title-serif,
    .art-hero__title-sans {
        font-size: 35px;
        line-height: 0.9;
        letter-spacing: -0.03em;
        text-align: center;
    }

    .art-hero__title {
        order: 1;
    }

    .art-hero .art-lead {
        order: 2;
        margin: 35px 0 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
    }

    .art-labels {
        order: 3;
        margin: 66px auto 0;
        max-width: 100%;
    }

    .art-labels__frame {
        object-position: center;
    }

    .art-hero .art-portrait {
        order: 4;
        width: 251.532px;
        max-width: 100%;
        margin: 40px auto 83px;
    }

    .art-portrait__frame {
        width: 251.532px;
        max-width: 100%;
        height: 338.386px;
        aspect-ratio: auto;
    }
}

@media (max-width: 900px) {
    .art {
        padding: 0;
    }

    .art-hero .art__content {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .art__article {
        padding: 32px 20px 64px;
    }

    .art-words {
        height: 120px;
        margin-bottom: 32px;
    }

    .art-words__layer--brand {
        top: 32px;
    }

    .art-lead {
        margin-bottom: 48px;
    }

    .art-block {
        padding: 32px 20px;
    }

    .art-block--purple {
        margin-bottom: 133px;
        padding: 31px 20px 0;
    }

    .art-block--purple .art-block__title {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        color: #2F2F2F;
    }

    .art-block--purple .art-quote {
        margin-top: 45px;
    }

    .art-block--orange {
        margin-bottom: 87px;
        padding: 19px 20px;
        box-sizing: border-box;
    }

    .art-block--orange .art-block__title {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        margin: 0 0 41px;
        color: #2F2F2F;
    }

    .art-block--orange .art-block__intro {
        margin: 0 0 31px;
        max-width: none;
    }

    .art-block--orange .art-block__intro p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-outro {
        min-height: 0;
        margin-top: 0;
        padding: 0 20px;
        text-align: center;
    }

    .art-outro__label {
        margin: 0 0 5px;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-outro__line {
        width: 64.13px;
        height: 0;
        margin: 0 auto 20px;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 1);
    }

    .art-outro__text {
        margin: 0 0 92px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-block--orange .art-steps {
        margin: 0;
        max-width: none;
        gap: 0;
    }

    .art-block--orange .art-step {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        max-width: none;
    }

    .art-block--orange .art-step:nth-child(1) {
        margin-bottom: 83px;
    }

    .art-block--orange .art-step:nth-child(2) {
        margin-bottom: 71px;
    }

    .art-block--orange .art-step:nth-child(3) {
        margin-bottom: 96px;
    }

    .art-block--orange .art-step__pill,
    .art-block--orange .art-step:nth-child(1) .art-step__pill,
    .art-block--orange .art-step:nth-child(2) .art-step__pill,
    .art-block--orange .art-step:nth-child(3) .art-step__pill {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: none;
        height: 101px;
        min-height: 101px;
        margin: 0;
        padding: 5px 15px 7px;
        border: 1px solid #000000;
        border-radius: 100px;
        opacity: 1;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-block--orange .art-step__text {
        margin: 15px 0 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-block--orange .art-block__note {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-block--orange .art-block__note strong {
        font-weight: 600;
    }

    .art-block--orange .art-quote {
        width: 334px;
        max-width: 334px;
        margin: 45px auto 0;
        padding: 0;
    }

    .art-block--orange .art-quote p {
        margin: 0;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-block--orange .art-block__closing {
        margin: 45px 0 0;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-step {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .art-step__pill {
        min-height: 80px;
    }

    .art-block__body p,
    .art-block__intro,
    .art-block__note,
    .art-note,
    .art-step__text {
        font-size: 18px;
        text-indent: 0;
    }

    .art-block--purple .art-block__body p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-block--purple .art-quote p {
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-quote p {
        text-indent: 0;
    }

    .art-cta {
        margin: 0 0 100px;
        padding: 0 20px 0;
        overflow-x: clip;
        overflow-y: visible;
    }

    .art-cta__line-img--top {
        display: block;
        flex-shrink: 0;
        width: 1px;
        height: 30.31px;
        margin: 0 auto 10px;
        padding: 0;
        border: 0;
        object-fit: fill;
    }

    /* CTA ellipse — full bleed within .art (no 100vw/120vw: those cause
       horizontal scroll). Stage breaks out of the 20px side padding.
       overflow: visible so scroll-rotated ring is never clipped. */
    .art-cta__stage {
        box-sizing: border-box;
        width: calc(100% + 40px);
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        height: auto;
        aspect-ratio: 452 / 467;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .art-cta__divider--bottom {
        display: block;
        flex-shrink: 0;
        width: 1px;
        height: 14.26px;
        margin: 0 auto;
        padding: 0;
        border: 0;
        background-color: #272727;
    }

    .art-cta__decor {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 452 / 467;
        overflow: visible;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
        transform-origin: 50% 50%;
        will-change: transform;
    }

    .art-cta__ellipse {
        display: block;
        width: 140%;
        height: 140%;
        object-fit: cover;
        pointer-events: none;
    }

    .art-cta__text {
        margin: 0 auto 20px;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-cta__btn {
        width: 303.89px;
        max-width: 100%;
        height: 37.21px;
        padding: 0 12px;
        border-radius: 18.61px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14.88px;
        line-height: 30.12px;
        letter-spacing: -0.02em;
        text-align: center;
    }
}

/* ============================================================
   Article 2 — KPI (dark theme)
   ============================================================ */
.art-page--2 {
    background: rgba(47, 47, 47, 1);
    color: #FFFFFF;
}

.art-page--2 .art {
    background: rgba(47, 47, 47, 1);
}

.art-page--2 .art__content {
    max-width: 857px;
    width: 100%;
}

.art-page--2 .art-hero {
    padding-top: 195px;
    padding-bottom: 0;
}

.art-page--2 .art-hero__title {
    box-sizing: border-box;
    width: 100%;
    max-width: 857px;
    min-height: 188px;
    margin: 0 auto;
}

.art-page--2 .art-hero__title {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #FFFFFF;
}

.art-page--2 .art-hero .art-lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    min-height: 352px;
    margin: 143px auto 176px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FFFFFF;
}

/* Article 2 — tip blocks */
.art-page--2 .art2-tip {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 66px;
}

.art-page--2 .art2-tip+.art2-tip {
    margin-top: 114px;
}

.art-page--2 .art2-tip--3 {
    margin-bottom: 52px;
}

.art-page--2 .art2-kpi-graphic {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 48px;
}

.art-page--2 .art2-kpi-graphic img {
    display: block;
    width: 100%;
    max-width: 797px;
    height: auto;
    margin: 0 auto;
}

.art-page--2 .art2-tip__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 122px;
    align-items: start;
}

.art-page--2 .art2-tip--4 .art2-tip__head {
    column-gap: 52px;
}

.art-page--2 .art2-tip__intro {
    min-width: 0;
}

.art-page--2 .art2-tip__label {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    paint-order: stroke fill;
}

.art-page--2 .art2-tip__title {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.art-page--2 .art2-tip__author {
    margin: 0;
}

.art-page--2 .art2-tip--1 .art2-tip__author,
.art-page--2 .art2-tip--2 .art2-tip__author {
    margin-top: 39px;
}

.art-page--2 .art2-tip--3 .art2-tip__author {
    margin-top: 11px;
}

.art-page--2 .art2-tip--4 .art2-tip__author {
    margin-top: 24px;
}

.art-page--2 .art2-tip__author {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(255, 140, 50, 1);
}

.art-page--2 .art2-tip__portrait {
    --art-portrait-o1: 1;
    --art-portrait-o2: 0;
    margin: 0;
    flex-shrink: 0;
    width: 298px;
    max-width: 100%;
}

.art-page--2 .art2-tip__portrait:not(.art2-tip__portrait--scroll) img {
    display: block;
    width: 298px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.art-page--2 .art2-tip__portrait-frame {
    position: relative;
    overflow: hidden;
    width: 298px;
    max-width: 100%;
    aspect-ratio: 298 / 401;
    background: rgba(47, 47, 47, 1);
}

.art-page--2 .art2-tip__portrait-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.art-page--2 .art2-tip__portrait-photo--1 {
    opacity: var(--art-portrait-o1);
}

.art-page--2 .art2-tip__portrait-photo--2 {
    opacity: var(--art-portrait-o2);
}

/* Совет 2: оранжевый дубликат пока не в репозитории — аппроксимация фильтром */
.art-page--2 .art2-tip--2 .art2-tip__portrait-photo--2 {
    filter: sepia(0.45) saturate(2.4) hue-rotate(350deg) brightness(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .art-page--2 .art2-tip__portrait-photo--1 {
        opacity: 1;
    }

    .art-page--2 .art2-tip__portrait-photo--2 {
        display: none;
    }
}

.art-page--2 .art2-tip__body {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 0;
    font-size: 20px;
    line-height: 1.3;
}

.art-page--2 .art2-tip--1 .art2-tip__body,
.art-page--2 .art2-tip--3 .art2-tip__body,
.art-page--2 .art2-tip--4 .art2-tip__body {
    margin-top: 37px;
}

.art-page--2 .art2-tip--2 .art2-tip__body {
    margin-top: 21px;
}

.art-page--2 .art2-tip__body p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: -0.02em;
    text-indent: 25px;
    color: #FFFFFF;
}

.art-page--2 .art2-tip__list {
    margin: 0;
    padding: 0 0 0 1.35em;
    list-style: decimal;
    list-style-position: outside;
}

.art-page--2 .art2-tip__list li {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-indent: 0;
}

.art-page--2 .art2-tip__list li+li {
    margin-top: 26px;
}

/* Stepped orange dividers between tips (Figma strokes −90° → horizontal spans). */
.art-page--2 .art2-lines {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 76px;
    padding: 0;
}

.art-page--2 .art2-lines__line {
    display: block;
    box-sizing: border-box;
    height: 0;
    border: 0;
    border-top: 1.5px solid rgba(255, 140, 50, 1);
}

.art-page--2 .art2-lines__line--1 {
    width: 247.92px;
    margin: 0 0 115px auto;
}

.art-page--2 .art2-lines__line--2 {
    width: 219.48px;
    margin: 0 auto 120px;
}

.art-page--2 .art2-lines__line--3 {
    width: 219.48px;
    margin: 0 auto 0 0;
}

.art-page--2 .art2-tip--4 {
    margin-bottom: 32px;
}

.art-page--2 .art-cta {
    margin-bottom: 120px;
}

.art-page--2 .art-cta__vline {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 159px;
    margin: 0 auto 10px;
    background: rgba(255, 255, 255, 1);
    pointer-events: none;
}

.art-page--2 .art-cta__text {
    margin-bottom: 58px;
    color: rgba(255, 255, 255, 1);
}

.art-page--2 .art-cta__btn {
    background-color: #FFFFFF;
    color: #272727;
    border: 1px solid #272727;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.art-page--2 .art-cta__btn:visited {
    color: #272727;
}

.art-page--2 .art-cta__btn:hover,
.art-page--2 .art-cta__btn:visited:hover,
.art-page--2 .art-cta__btn:focus-visible {
    background-color: #272727;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 1);
}

@media (max-width: 900px) {
    .art-page--2 .art-cta__vline {
        height: 30.31px;
    }

    .art-page--2 .art-cta {
        margin-bottom: 100px;
    }
}

@media (max-width: 770px) {
    .art-page--2 .art-hero {
        padding-top: 154px;
        padding-bottom: 0;
    }

    .art-page--2 .art-hero .art__content {
        padding: 0 39px;
        box-sizing: border-box;
    }

    .art-page--2 .art-hero__title {
        min-height: 0;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 35px;
        line-height: 0.9;
        letter-spacing: -0.03em;
        text-align: center;
    }

    .art-page--2 .art-hero .art-lead {
        min-height: 0;
        margin: 52px 0 103px;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
    }

    /* Tips — mobile (template from Совет 1) */
    .art-page--2 .art2-tip {
        box-sizing: border-box;
        max-width: none;
        margin-bottom: 0;
        padding: 0 39px;
    }

    .art-page--2 .art2-tip+.art2-tip {
        margin-top: 90px;
    }

    .art-page--2 .art2-tip__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
    }

    .art-page--2 .art2-tip__intro {
        display: contents;
    }

    .art-page--2 .art2-tip__label {
        order: 1;
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: transparent;
        -webkit-text-stroke: 0.7px rgba(255, 255, 255, 1);
        paint-order: stroke fill;
    }

    .art-page--2 .art2-tip__title {
        order: 2;
        margin: 0 0 68px;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: left;
    }

    .art-page--2 .art2-tip__portrait {
        order: 3;
        align-self: center;
        width: 217.140625px;
        max-width: 100%;
        margin: 0 auto 38px;
    }

    .art-page--2 .art2-tip__portrait-frame {
        width: 217.140625px;
        max-width: 100%;
        height: 294.779px;
        aspect-ratio: auto;
    }

    .art-page--2 .art2-tip__portrait:not(.art2-tip__portrait--scroll) img {
        display: block;
        width: 217.140625px;
        max-width: 100%;
        height: 294.779px;
        object-fit: cover;
        object-position: center top;
    }

    .art-page--2 .art2-tip__author {
        order: 4;
        align-self: center;
        box-sizing: border-box;
        width: 217.140625px;
        max-width: 100%;
        margin: 0 auto 74px;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
    }

    .art-page--2 .art2-tip--1 .art2-tip__author,
    .art-page--2 .art2-tip--2 .art2-tip__author,
    .art-page--2 .art2-tip--3 .art2-tip__author,
    .art-page--2 .art2-tip--4 .art2-tip__author {
        margin-top: 0;
    }

    .art-page--2 .art2-tip--1 .art2-tip__body,
    .art-page--2 .art2-tip--2 .art2-tip__body,
    .art-page--2 .art2-tip--3 .art2-tip__body,
    .art-page--2 .art2-tip--4 .art2-tip__body {
        margin-top: 0;
    }

    .art-page--2 .art2-tip--3 {
        margin-bottom: 0;
    }

    .art-page--2 .art2-kpi-graphic {
        margin-top: 90px;
        margin-bottom: 90px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 39px;
    }

    .art-page--2 .art2-kpi-graphic+.art2-tip {
        margin-top: 0;
    }

    .art-page--2 .art2-tip--4 {
        margin-bottom: 12px;
    }

    .art-page--2 .art-cta {
        margin: 0 0 100px;
        padding: 0 20px;
        overflow-x: clip;
        overflow-y: visible;
    }

    .art-page--2 .art-cta__vline {
        height: 109px;
        margin: 0 auto 10px;
    }

    .art-page--2 .art-cta__stage {
        box-sizing: border-box;
        width: calc(100% + 40px);
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        height: auto;
        aspect-ratio: 452 / 467;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .art-page--2 .art-cta__divider--bottom {
        display: block;
        flex-shrink: 0;
        width: 1px;
        height: 14.26px;
        margin: 0 auto;
        padding: 0;
        border: 0;
        background-color: rgba(47, 47, 47, 1);
    }

    .art-page--2 .art-cta__decor {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 452 / 467;
        overflow: visible;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
        transform-origin: 50% 50%;
        will-change: transform;
    }

    .art-page--2 .art-cta__ellipse {
        display: block;
        width: 140%;
        height: 140%;
        object-fit: cover;
        pointer-events: none;
    }

    .art-page--2 .art-cta__text {
        margin: 0 auto 17px;
        max-width: none;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }

    .art-page--2 .art-cta__btn {
        width: 303.88787841796875px;
        max-width: 100%;
        height: 37.21px;
        padding: 0 12px;
        border-radius: 18.61px;
        font-size: 14.88px;
        line-height: 30.12px;
        letter-spacing: -0.02em;
    }

    .art-page--2 .art2-tip__body {
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        line-height: 1.3;
    }

    .art-page--2 .art2-tip__body p,
    .art-page--2 .art2-tip__list li {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
    }

    .art-page--2 .art2-tip__list li {
        text-indent: 0;
    }

    .art-page--2 .art2-lines {
        display: flex;
        flex-direction: column;
        gap: 80px;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 90px auto;
        padding: 0 39px;
    }

    .art-page--2 .art2-lines__line {
        box-sizing: border-box;
        width: 90px;
        height: 0;
        border: 0;
        border-top: 1.5px solid rgba(255, 140, 50, 1);
        margin: 0;
    }

    .art-page--2 .art2-lines__line--1 {
        align-self: flex-end;
    }

    .art-page--2 .art2-lines__line--2 {
        align-self: center;
    }

    .art-page--2 .art2-lines__line--3 {
        align-self: flex-start;
    }
}

/* ============================================================
   Article 3 — hiring a fundraiser (orange gradient hero)
   ============================================================ */
.art-page--3 {
    background: #E4E5EF;
    color: #2F2F2F;
}

.art-page--3 .art {
    position: static;
    max-width: none;
    width: 100%;
    padding: 0;
    background: transparent;
}

.art-page--3 .art3-hero .art__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--3 :where([class*='art3']) {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
}

.art-page--3 .art-hero.art3-hero {
    box-sizing: border-box;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(180deg,
            #FF8C32 9.6%,
            rgba(228, 229, 239, 0) 95.95%),
        #E4E5EF;
}

.art-page--3 .art3-hero__title {
    box-sizing: border-box;
    width: 100%;
    max-width: 754px;
    margin: 195px auto 120px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--3 .art3-hero__title-accent {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    color: inherit;
}

.art-page--3 .art3-hero__lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 40px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--3 .art3-hero__portrait {
    --art-portrait-o1: 1;
    --art-portrait-o2: 0;
    display: grid;
    width: 297.82px;
    max-width: 100%;
    margin: 0 auto 55px;
}

.art-page--3 .art3-hero__portrait-photo {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

.art-page--3 .art3-hero__portrait-photo--1 {
    opacity: var(--art-portrait-o1);
}

.art-page--3 .art3-hero__portrait-photo--2 {
    opacity: var(--art-portrait-o2);
}

@media (prefers-reduced-motion: reduce) {
    .art-page--3 .art3-hero__portrait-photo--1 {
        opacity: 1;
    }

    .art-page--3 .art3-hero__portrait-photo--2 {
        display: none;
    }
}

.art-page--3 .art3-hero__intro {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 82px;
}

.art-page--3 .art3-hero__intro-text {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--3 .art3-hero__intro-text+.art3-hero__intro-text {
    margin-top: 1.3em;
}

.art-page--3 .art3-hero__intro-bio {
    font-weight: 600;
}

/* Article 3 — tip rows (pill + body, inline flow) */
.art-page--3 .art3-tips {
    width: 100%;
    padding: 0;
}

.art-page--3 .art3-tip {
    display: grid;
    grid-template-columns: 400px 399.9765625px;
    column-gap: 20px;
    align-items: center;
    box-sizing: border-box;
    width: 819.9765625px;
    max-width: 100%;
    margin: 0 auto;
}

.art-page--3 .art3-tip+.art3-tip {
    margin-top: 100px;
}

.art-page--3 .art3-tip--4+.art3-tip {
    margin-top: 90px;
}

.art-page--3 .art3-tip--5 {
    grid-template-columns: 400px 421px;
    align-items: start;
    width: 841px;
    margin-bottom: 55px;
}

.art-page--3 .art3-tip--5 .art3-tip__body {
    width: 421px;
}

.art-page--3 .art3-tip--5 .art3-tip__pill {
    height: 567px;
}

.art-page--3 .art3-vline {
    display: block;
    box-sizing: border-box;
    width: 1px;
    height: 199.64845614447086px;
    margin: 0 auto;
    border-left: 1px solid rgba(0, 0, 0, 1);
    pointer-events: none;
}

.art-page--3 .art-cta {
    margin: 0 auto 70px;
}

.art-page--3 .art3-tip--2 {
    align-items: start;
}

.art-page--3 .art3-tip__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    max-width: 100%;
}

.art-page--3 .art3-tip--2 .art3-tip__pill {
    height: 370px;
}

.art-page--3 .art3-tip--3 {
    grid-template-columns: 399.9765625px 400px;
    align-items: start;
    margin-bottom: 0;
}

.art-page--3 .art3-pullquote {
    box-sizing: border-box;
    width: 100%;
    max-width: 825.0985717773438px;
    margin: 67px auto 100px;
    padding: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    text-indent: 0;
    color: #2F2F2F;
}

.art-page--3 .art3-pullquote__line {
    display: inline;
}

@media (min-width: 771px) {
    .art-page--3 .art3-tips>.art3-pullquote .art3-pullquote__line {
        display: block;
    }

    .art-page--3 .art3-tips>.art3-pullquote .art3-pullquote__line:first-child {
        text-indent: 25px;
    }

    .art-page--3 .art3-tips>.art3-pullquote .art3-pullquote__line:first-child::before {
        content: '\00AB';
    }

    .art-page--3 .art3-tips>.art3-pullquote .art3-pullquote__line:last-child::after {
        content: '\00BB';
    }
}

.art-page--3 .art3-pullquote--mobile {
    display: none;
}

.art-page--3 .art3-tip--4 {
    grid-template-columns: 399.9765625px 400px;
    align-items: start;
}

.art-page--3 .art3-tip--4 .art3-tip__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    max-width: 100%;
}

.art-page--3 .art3-tip--4 .art3-tip__pill {
    height: 333px;
}

.art-page--3 .art3-tip__vector {
    display: block;
    width: 370.2347717285156px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 370.2347717285156 / 344.3809509277344;
    margin: 0;
}

.art-page--3 .art3-tip--3 .art3-tip__pill {
    height: 598px;
}

.art-page--3 .art3-tip__list {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
}

.art-page--3 .art3-tip__list li {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--3 .art3-tip__chunk {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.art-page--3 .art3-tip__chunk>p {
    margin: 0;
}

.art-page--3 .art3-tip__decor {
    display: block;
    width: 412px;
    max-width: 100%;
    height: auto;
    margin-top: 0;
    pointer-events: none;
}

.art-page--3 .art3-tip__pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 442px;
    margin: 0;
    padding: 5px 15px 7px;
    border: 1px solid rgba(255, 110, 50, 1);
    border-radius: 100px;
    background: transparent;
}

.art-page--3 .art3-tip__pill-text {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(255, 110, 50, 1);
}

.art-page--3 .art3-tip__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 399.9765625px;
    max-width: 100%;
    min-width: 0;
}

.art-page--3 .art3-tip__body p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

@media (max-width: 770px) {
    .art-page--3 .art-hero.art3-hero {
        padding-top: 0;
        padding-bottom: 0;
    }

    .art-page--3 .art3-hero .art__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 181px 39px 0;
        box-sizing: border-box;
    }

    .art-page--3 .art3-hero__title {
        order: 1;
        max-width: none;
        margin: 0 0 52px;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 37.36px;
        line-height: 0.9;
        letter-spacing: -0.03em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--3 .art3-hero__lead {
        order: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--3 .art3-hero__intro {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 0 0 43px;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-hero__intro-text {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--3 .art3-hero__intro-text+.art3-hero__intro-text {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-hero__intro-bio {
        display: block;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--3 .art3-hero__portrait {
        order: 4;
        width: 244.94772338867188px;
        height: 329.5274658203125px;
        max-width: 100%;
        margin: 0 auto 124px;
    }

    .art-page--3 .art3-hero__portrait-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .art-page--3 .art3-tips {
        padding: 0 39px;
        box-sizing: border-box;
    }

    .art-page--3 .art3-tip {
        grid-template-columns: 1fr;
        row-gap: 32px;
        width: 100%;
        max-width: none;
    }

    .art-page--3 .art3-tip__body {
        width: 100%;
    }

    .art-page--3 .art3-tip__aside {
        width: 100%;
    }

    .art-page--3 .art3-tip__pill {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 280px;
        margin: 0 auto;
    }

    .art-page--3 .art3-tip--1 {
        row-gap: 0;
    }

    .art-page--3 .art3-tip--1 .art3-tip__pill {
        box-sizing: border-box;
        width: 335px;
        max-width: 100%;
        height: 63px;
        min-height: 63px;
        margin: 0 auto 40px;
        padding: 5px 15px 7px;
        border: 1px solid rgba(255, 110, 50, 1);
    }

    .art-page--3 .art3-tip--1 .art3-tip__body {
        gap: 0;
    }

    .art-page--3 .art3-tip--1 .art3-tip__body p+p {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-tip--2 {
        row-gap: 0;
    }

    .art-page--3 .art3-tip--2 .art3-tip__aside {
        align-items: flex-start;
        width: 100%;
        margin-bottom: 0;
    }

    .art-page--3 .art3-tip--2 .art3-tip__pill {
        box-sizing: border-box;
        width: 335px;
        max-width: 100%;
        height: 79px;
        min-height: 79px;
        margin: 0;
        padding: 5px 15px 7px;
        border: 1px solid rgba(255, 110, 50, 1);
    }

    .art-page--3 .art3-tip--2 .art3-tip__decor {
        display: block;
        width: 217.56617736816406px;
        height: 160.43629455566406px;
        max-width: none;
        margin: 0;
        object-fit: contain;
        object-position: left center;
    }

    .art-page--3 .art3-tip--2 .art3-tip__body {
        gap: 0;
        margin-top: 7px;
    }

    .art-page--3 .art3-tip--2 .art3-tip__body p+p {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-tip:not(.art3-tip--2) .art3-tip__decor {
        width: min(100%, 412px);
        margin-top: 0;
    }

    .art-page--3 .art3-tip__pill-text {
        font-size: 22px;
    }

    .art-page--3 .art3-tip__body p,
    .art-page--3 .art3-tip__list li {
        font-size: 16px;
        text-indent: 25px;
    }

    .art-page--3 .art3-tip__list {
        padding-left: calc(25px + 1.1em);
    }

    .art-page--3 .art3-tip__list li {
        text-indent: 0;
    }

    .art-page--3 .art3-tips>.art3-pullquote {
        display: none;
    }

    .art-page--3 .art3-pullquote--mobile {
        display: block;
        margin: 40px 0 0;
        padding: 0;
        width: 100%;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: left;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-page--3 .art3-pullquote--mobile .art3-pullquote__line {
        display: inline;
    }

    .art-page--3 .art3-pullquote--mobile .art3-pullquote__line:first-child::before,
    .art-page--3 .art3-pullquote--mobile .art3-pullquote__line:last-child::after {
        content: none;
    }

    .art-page--3 .art3-pullquote--mobile .art3-pullquote__line+.art3-pullquote__line::before {
        content: '\00a0';
    }

    .art-page--3 .art3-pullquote--mobile .art3-pullquote__line:first-child {
        text-indent: 0;
    }

    .art-page--3 .art3-tip--2+.art3-tip--3 {
        margin-top: 45px;
    }

    .art-page--3 .art3-tip--3 {
        row-gap: 0;
    }

    .art-page--3 .art3-tip--3 .art3-tip__pill {
        order: 1;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 337px;
        max-width: 100%;
        height: 79px;
        min-height: 79px;
        margin: 0 auto 40px;
        padding: 5px 15px 7px;
        border: 1px solid rgba(255, 110, 50, 1);
        border-radius: 100px;
    }

    .art-page--3 .art3-tip--3 .art3-tip__body {
        order: 2;
        gap: 0;
    }

    .art-page--3 .art3-tip--3 .art3-tip__body>p,
    .art-page--3 .art3-tip--3 .art3-tip__chunk>p {
        text-align: left;
        text-indent: 25px;
    }

    .art-page--3 .art3-tip--3 .art3-tip__body>p+.art3-tip__chunk,
    .art-page--3 .art3-tip--3 .art3-tip__chunk+p {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-tip--3 .art3-tip__chunk>p+.art3-tip__list {
        margin-top: 0;
        padding-left: 10px;
    }

    .art-page--3 .art3-tip--3 .art3-tip__list li {
        text-indent: 0;
        text-align: left;
    }

    .art-page--3 .art3-tip--3+.art3-tip--4,
    .art-page--3 .art3-tip.art3-tip--4 {
        margin-top: 45px;
    }

    .art-page--3 .art3-tip--4 {
        display: flex;
        flex-direction: column;
        row-gap: 0;
    }

    .art-page--3 .art3-tip--4 .art3-tip__aside {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 40px;
    }

    .art-page--3 .art3-tip--4 .art3-tip__vector {
        display: block;
        width: 100%;
        max-width: 335px;
        height: auto;
        margin: 0 0 7px;
        object-fit: contain;
        object-position: left center;
    }

    .art-page--3 .art3-tip--4 .art3-tip__pill {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 337px;
        max-width: 100%;
        height: auto;
        min-height: 79px;
        margin: 0;
        padding: 5px 15px 7px;
        border: 1px solid rgba(255, 110, 50, 1);
        border-radius: 100px;
    }

    .art-page--3 .art3-tip--4 .art3-tip__body {
        order: 2;
        gap: 0;
        width: 100%;
    }

    .art-page--3 .art3-tip--4 .art3-tip__body p+p {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-tip--5 {
        row-gap: 0;
        width: 100%;
        margin-bottom: 56px;
    }

    .art-page--3 .art3-tip--5 .art3-tip__pill {
        box-sizing: border-box;
        width: 335px;
        max-width: 100%;
        height: 63px;
        min-height: 63px;
        margin: 0 auto 40px;
        padding: 5px 15px 7px;
        border: 1px solid rgba(255, 110, 50, 1);
        border-radius: 100px;
    }

    .art-page--3 .art3-tip--5 .art3-tip__body {
        width: 100%;
        gap: 0;
    }

    .art-page--3 .art3-tip--5 .art3-tip__body p+p {
        margin-top: 0;
        padding-top: 1.3em;
    }

    .art-page--3 .art3-vline {
        height: 66.0503918919189px;
    }

    .art-page--3 .art-cta {
        margin-bottom: 70px;
    }
}

/* ============================================================
   Article 4 — lime gradient hero
   ============================================================ */
.art-page--4 {
    background: #E4E5EF;
    color: #2F2F2F;
}

.art-page--4 .art {
    position: static;
    max-width: none;
    width: 100%;
    padding: 0;
    background: transparent;
}

.art-page--4 .art4-hero .art__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 821.5537109375px;
    margin: 0 auto;
    padding: 0;
}

.art-page--4 :where([class*='art4']) {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
}

.art-page--4 .art-hero.art4-hero {
    box-sizing: border-box;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(180deg,
            #C2F04F 20.71%,
            rgba(228, 229, 239, 0) 100%),
        #E4E5EF;
}

.art-page--4 .art4-hero__title {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 193px auto 110px;
    padding: 0;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--4 .art4-hero__title-serif {
    display: block;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    color: inherit;
}

.art-page--4 .art4-hero__title-sans {
    display: block;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    color: inherit;
}

.art-page--4 .art4-hero__lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 821.5537109375px;
    margin: 0 auto 68px;
}

.art-page--4 .art4-hero__lead p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--4 .art4-hero__lead p+p {
    margin-top: 1.3em;
}

.art-page--4 .art4-hero__portrait {
    --art-portrait-o1: 1;
    --art-portrait-o2: 0;
    display: grid;
    width: 300.46905517578125px;
    height: 405px;
    max-width: 100%;
    margin: 0 auto;
}

.art-page--4 .art4-hero__portrait-photo {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.art-page--4 .art4-hero__portrait-photo--1 {
    opacity: var(--art-portrait-o1);
}

.art-page--4 .art4-hero__portrait-photo--2 {
    opacity: var(--art-portrait-o2);
}

@media (prefers-reduced-motion: reduce) {
    .art-page--4 .art4-hero__portrait-photo--1 {
        opacity: 1;
    }

    .art-page--4 .art4-hero__portrait-photo--2 {
        display: none;
    }
}

.art-page--4 .art4-hero__intro {
    box-sizing: border-box;
    width: 100%;
    max-width: 821.5537109375px;
    margin: 37px auto 110px;
}

.art-page--4 .art4-hero__intro-text {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--4 .art4-hero__intro-accent {
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Article 4 — tips */
.art-page--4 .art4-tips {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
}

.art-page--4 .art4-tip {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.art-page--4 .art4-tip+.art4-tip {
    margin-top: 81px;
}

.art-page--4 .art4-tip--2 {
    margin-bottom: 0;
}

.art-page--4 .art4-tip--2+.art4-tip {
    margin-top: 118px;
}

.art-page--4 .art4-tip--3+.art4-tip--4 {
    margin-top: 103px;
}

.art-page--4 .art4-tip--4+.art4-tip--5 {
    margin-top: 95px;
}

.art-page--4 .art4-tip--5+.art4-tip--6 {
    margin-top: 30px;
}

.art-page--4 .art4-tip--6 .art4-tip__portrait {
    box-sizing: border-box;
    width: 820px;
    max-width: 100%;
    margin: 25px 0 65px;
}

.art-page--4 .art4-tip--6 .art4-tip__portrait-inner {
    display: grid;
    width: 100%;
}

.art-page--4 .art4-tip--6 .art4-tip__portrait-photo-wrap,
.art-page--4 .art4-tip--6 .art4-tip__portrait-caption {
    grid-area: 1 / 1;
}

.art-page--4 .art4-tip--6 .art4-tip__portrait-photo-wrap {
    overflow: hidden;
    width: 100%;
    isolation: isolate;
}

.art-page--4 .art4-tip--6 .art4-tip__portrait-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2460 / 1705;
    object-fit: cover;
    object-position: center;
    /* Initial blur; js/main.js clears only on the img, not caption/layout. */
    filter: blur(40px);
}

.art-page--4 .art4-tip--6 .art4-tip__portrait-caption {
    z-index: 1;
    align-self: end;
    justify-self: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0;
    padding: 0 0 76px;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 15px;
    text-align: center;
    color: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
}

.art-page--4 .art4-tip--6 .art4-tip__body {
    margin-top: 0;
    margin-bottom: 73px;
}

.art-page--4 .art4-tip--6 .art4-tip__body p {
    text-indent: 15px;
}

.art-page--4 .art4-tip--4 .art4-tip__body {
    margin-top: 23px;
}

.art-page--4 .art4-tip--4 .art4-tip__lead,
.art-page--4 .art4-tip--4 .art4-tip__note {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--4 .art4-tip__quote {
    margin: 23px 0 0;
    padding: 0;
    border: 0;
}

.art-page--4 .art4-tip--4 .art4-tip__note {
    margin-top: 49px;
    margin-bottom: 134px;
}

.art-page--4 .art4-tip--4 .art4-tip__quote p {
    margin: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip__head {
    margin: 0;
    background: transparent;
    color: inherit;
}

.art-page--4 .art4-tip__label {
    display: block;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 1);
    paint-order: stroke fill;
}

.art-page--4 .art4-tip__title {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip__body {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px 0 0;
}

.art-page--4 .art4-tip__body p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip__body p+p {
    margin-top: 1.3em;
}

.art-page--4 .art4-tip__chunk--lead {
    margin-bottom: 72px;
}

.art-page--4 .art4-tip__graphic {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 66px;
    padding: 0;
}

.art-page--4 .art4-tip__graphic img {
    display: block;
    width: 100%;
    max-width: 841px;
    height: auto;
    margin: 0 auto;
}

.art-page--4 .art4-tip--3 .art4-tip__body {
    margin-top: 21px;
}

.art-page--4 .art4-tip--3 .art4-tip__body>p:first-child {
    margin-bottom: 44px;
}

.art-page--4 .art4-tip--3 .art4-tip__context {
    margin: 0 0 36px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--3 .art4-tip__facts,
.art-page--4 .art4-tip--3 .art4-tip__avoid {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 61px;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
}

.art-page--4 .art4-tip--3 .art4-tip__facts {
    margin-bottom: 82px;
}

.art-page--4 .art4-tip--3 .art4-tip__avoid-copy {
    min-width: 0;
}

.art-page--4 .art4-tip--3 .art4-tip__check,
.art-page--4 .art4-tip--3 .art4-tip__avoid-art {
    margin: 0;
    padding: 0;
}

.art-page--4 .art4-tip--3 .art4-tip__check img,
.art-page--4 .art4-tip--3 .art4-tip__avoid-art img {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 369 / 321;
    margin: 0;
}

.art-page--4 .art4-tip--3 .art4-tip__list,
.art-page--4 .art4-tip--3 .art4-tip__avoid-list {
    margin: 0;
    padding: 0 0 0 1.15em;
    list-style: disc;
    list-style-position: outside;
}

.art-page--4 .art4-tip--3 .art4-tip__list li,
.art-page--4 .art4-tip--3 .art4-tip__avoid-list li {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--3 .art4-tip__avoid-note {
    margin: 40px 0 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--5 {
    margin-bottom: 0;
}

.art-page--4 .art4-tip--5 .art4-tip__title {
    max-width: 400px;
}

.art-page--4 .art4-tip--5 .art4-tip__logic {
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
    padding: 37px 61px 43px;
    border: 1px solid rgba(47, 47, 47, 1);
    border-radius: 48px;
    background: transparent;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-heading {
    margin: 0 0 18px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--5 .art4-tip__logic {
    display: block;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-grid {
    display: grid;
    grid-template-columns: 383px 295px;
    column-gap: 48px;
    align-items: start;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-col {
    min-width: 0;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-col--left {
    width: 383px;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-col--right {
    width: 295px;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-item+.art4-tip__logic-item {
    margin-top: 1.3em;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-item-title {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-item-text {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-tip--5 .art4-tip__logic-outro {
    grid-column: 1 / -1;
    margin: 44px 0 0;
    width: 100%;
    max-width: 814px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #2F2F2F;
}

.art-page--4 .art4-managers {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1030px;
    max-width: 100%;
    height: 685px;
    margin: 0 auto;
    padding: 86px 0 0;
    background: linear-gradient(180deg,
            #C2F04F 20.71%,
            rgba(228, 229, 239, 0) 100%);
}

.art-page--4 .art4-managers-head {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 51px;
    padding: 0;
    text-align: center;
    background: transparent;
}

.art-page--4 .art4-managers-head__title {
    display: inline-block;
    box-sizing: content-box;
    width: 213px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(39, 39, 39, 1);
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(39, 39, 39, 1);
    opacity: 1;
}

.art-page--4 .art4-managers-intro {
    box-sizing: border-box;
    width: 820px;
    max-width: 100%;
    margin: 0 auto;
}

.art-page--4 .art4-managers-intro p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--4 .art4-managers-intro p+p {
    margin-top: 1.3em;
}

.art-page--4 .art4-vline {
    display: block;
    box-sizing: border-box;
    width: 1px;
    height: 199.66433305475016px;
    margin: 55px auto 0;
    border-left: 1px solid rgba(0, 0, 0, 1);
    pointer-events: none;
}

.art-page--4 .art-cta {
    margin: 0 auto 70px;
}

@media (max-width: 770px) {
    body.art-page--4>header {
        display: none;
    }

    body.art-page--4>.header-burger__icon svg path {
        fill: #2F2F2F;
    }

    .art-page--4 .art-hero.art4-hero {
        padding-top: 0;
        padding-bottom: 0;
        background: linear-gradient(180deg,
                #C2F04F 0%,
                #C2F04F 14%,
                rgba(228, 229, 239, 0) 38%),
            #E4E5EF;
    }

    .art-page--4 .art4-hero .art__content {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 20px;
    }

    .art-page--4 .art4-tips {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 20px;
    }

    /* Override article-1 mobile flex order (.art-hero__title { order: 1 }). */
    .art-page--4 .art4-hero .art-hero__title {
        order: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 180px auto 75px;
        padding: 0;
        font-family: 'SangBleu Sunrise', 'SangBleu', serif;
        font-weight: 500;
        font-size: 35px;
        line-height: 90%;
        letter-spacing: -0.03em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--4 .art4-hero__title-serif,
    .art-page--4 .art4-hero__title-sans {
        display: block;
        font-family: inherit;
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        text-align: inherit;
        color: inherit;
    }

    .art-page--4 .art4-hero__lead {
        order: 1;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0 auto 31px;
        padding: 0;
    }

    .art-page--4 .art4-hero__portrait {
        order: 2;
        margin: 0 auto;
    }

    .art-page--4 .art4-hero__intro {
        order: 3;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 19px auto 99px;
        padding: 0;
    }

    .art-page--4 .art4-hero__intro-text {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--4 .art4-hero__intro-accent {
        font-family: inherit;
        font-weight: 600;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
    }

    .art-page--4 .art4-hero__lead p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--4 .art4-hero__lead p+p {
        margin-top: 1.3em;
    }

    .art-page--4 .art4-tip {
        box-sizing: border-box;
        max-width: 100%;
        padding: 0;
    }

    .art-page--4 .art4-tip+.art4-tip,
    .art-page--4 .art4-tip--2+.art4-tip,
    .art-page--4 .art4-tip--3+.art4-tip--4,
    .art-page--4 .art4-tip--4+.art4-tip--5,
    .art-page--4 .art4-tip--5+.art4-tip--6 {
        margin-top: 68px;
    }

    .art-page--4 .art4-tip__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .art-page--4 .art4-tip--1 .art4-tip__body,
    .art-page--4 .art4-tip--2 .art4-tip__body,
    .art-page--4 .art4-tip--3 .art4-tip__body {
        margin: 0;
        max-width: 100%;
    }

    .art-page--4 .art4-tip--1 .art4-tip__body p,
    .art-page--4 .art4-tip--2 .art4-tip__body p,
    .art-page--4 .art4-tip--3 .art4-tip__body>p,
    .art-page--4 .art4-tip--3 .art4-tip__context,
    .art-page--4 .art4-tip--3 .art4-tip__avoid-note {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--1 .art4-tip__body p+p,
    .art-page--4 .art4-tip--2 .art4-tip__body p+p {
        margin-top: 1.3em;
    }

    .art-page--4 .art4-tip--3 .art4-tip__body>p:first-child {
        margin: 0 0 32px;
    }

    .art-page--4 .art4-tip--3 .art4-tip__context {
        margin: 0 0 32px;
    }

    .art-page--4 .art4-tip--3 .art4-tip__facts,
    .art-page--4 .art4-tip--3 .art4-tip__avoid {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
    }

    .art-page--4 .art4-tip--3 .art4-tip__facts {
        margin: 0 0 33px;
    }

    .art-page--4 .art4-tip--3 .art4-tip__avoid {
        margin-bottom: 0;
    }

    .art-page--4 .art4-tip--3 .art4-tip__check,
    .art-page--4 .art4-tip--3 .art4-tip__avoid-art {
        width: 100%;
        max-width: min(100%, 400px);
        margin: 0 auto 32px;
    }

    .art-page--4 .art4-tip--3 .art4-tip__avoid-art {
        margin-bottom: 32px;
    }

    .art-page--4 .art4-tip--3 .art4-tip__avoid-copy {
        width: 100%;
    }

    .art-page--4 .art4-tip--3 .art4-tip__check img,
    .art-page--4 .art4-tip--3 .art4-tip__avoid-art img {
        display: block;
        width: 100%;
        max-width: min(100%, 400px);
        height: auto;
        aspect-ratio: 369 / 321;
        margin: 0 auto;
    }

    .art-page--4 .art4-tip--3 .art4-tip__list,
    .art-page--4 .art4-tip--3 .art4-tip__avoid-list {
        width: 100%;
        margin: 0;
        padding: 0 0 0 1.15em;
        list-style: disc;
        list-style-position: outside;
    }

    .art-page--4 .art4-tip--3 .art4-tip__list li,
    .art-page--4 .art4-tip--3 .art4-tip__avoid-list li {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--3 .art4-tip__avoid-note {
        margin: 32px 0 0;
    }

    .art-page--4 .art4-tip__label {
        margin: 0 0 5px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: 0.01em;
        text-align: left;
        color: transparent;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 1);
        paint-order: stroke fill;
    }

    .art-page--4 .art4-tip__title {
        max-width: none;
        margin: 0 0 45px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: left;
        text-transform: uppercase;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--4 .art4-tip__title {
        margin-bottom: 30px;
    }

    .art-page--4 .art4-tip--5 .art4-tip__title {
        margin-bottom: 39px;
    }

    .art-page--4 .art4-tip--5 .art4-tip__logic-heading,
    .art-page--4 .art4-tip--5 .art4-tip__logic-item-title,
    .art-page--4 .art4-tip--5 .art4-tip__logic-item-text,
    .art-page--4 .art4-tip--5 .art4-tip__logic-outro {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--4 .art4-tip__body {
        margin: 0;
        max-width: 100%;
    }

    .art-page--4 .art4-tip--4 .art4-tip__lead {
        margin: 0 0 36px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--4 .art4-tip__quote {
        box-sizing: border-box;
        width: 100%;
        max-width: 328.33203125px;
        margin: 0 auto;
        padding: 0;
        border: 0;
    }

    .art-page--4 .art4-tip--4 .art4-tip__quote p {
        margin: 0;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 35px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip--4 .art4-tip__note {
        margin: 49px 0 134px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip__body p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        color: #2F2F2F;
    }

    .art-page--4 .art4-tip__body p+p {
        margin-top: 1.3em;
    }

    .art-page--4 .art4-tip__chunk--lead {
        margin-bottom: 48px;
    }

    .art-page--4 .art4-tip--6 .art4-tip__title {
        margin-bottom: 31px;
    }

    .art-page--4 .art4-tip--6 .art4-tip__portrait {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw) 37px;
    }

    .art-page--4 .art4-tip--6 .art4-tip__portrait-inner {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .art-page--4 .art4-tip--6 .art4-tip__portrait-photo {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 2460 / 1705;
    }

    .art-page--4 .art4-tip--6 .art4-tip__portrait-caption {
        width: 337.66375732421875px;
        max-width: 337.66375732421875px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 0 19px;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 15px;
        text-align: center;
        color: #FFFFFF;
        mix-blend-mode: difference;
    }

    .art-page--4 .art4-tip--6 .art4-tip__portrait-caption br {
        display: none !important;
        height: 0;
        margin: 0;
        padding: 0;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
    }

    .art-page--4 .art4-tip--6 .art4-tip__body {
        margin-bottom: 57px;
    }

    .art-page--4 .art4-managers {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        min-height: 0;
        margin: 0 calc(50% - 50vw);
        padding: 16px 20px 48px;
        background: linear-gradient(180deg,
                #C2F04F 20.71%,
                rgba(228, 229, 239, 0) 100%);
    }

    .art-page--4 .art4-managers-head {
        width: 100%;
        max-width: none;
        margin: 0 auto 51px;
    }

    .art-page--4 .art4-managers-head__title {
        display: inline-block;
        box-sizing: content-box;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0 0 1px;
        border-bottom: 1px solid rgba(39, 39, 39, 1);
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-page--4 .art4-managers-intro {
        width: 338px;
        max-width: 338px;
        margin: 0 auto;
    }

    .art-page--4 .art4-managers-intro br {
        display: none !important;
        height: 0;
        margin: 0;
        padding: 0;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
    }

    .art-page--4 .art4-managers-intro p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--4 .art4-managers-intro p+p {
        margin-top: 1.3em;
    }

    .art-page--4 .art4-vline {
        display: block;
        box-sizing: border-box;
        width: 1px;
        max-width: none;
        height: 80.99055480957031px;
        margin: 35px auto 0;
        border-left: 1px solid #000;
        pointer-events: none;
    }

    .art-page--4 .art-cta {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw) 100px;
        padding: 0;
        overflow-x: clip;
        overflow-y: visible;
    }

    .art-page--4 .art-cta__stack {
        width: 100%;
    }

    .art-page--4 .art-cta__stage {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        height: auto;
        aspect-ratio: 452 / 467;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .art-page--4 .art-cta__content {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: none;
        padding: 0 20px;
    }

    .art-page--4 .art-cta__decor {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 452 / 467;
        overflow: visible;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
        transform-origin: 50% 50%;
        will-change: transform;
    }

    .art-page--4 .art-cta__ellipse {
        display: block;
        width: 155%;
        height: 155%;
        object-fit: cover;
        pointer-events: none;
    }

    .art-page--4 .art-cta__text {
        margin: 0;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-page--4 .art-cta__btn {
        box-sizing: border-box;
        width: 303px;
        max-width: 100%;
        height: 37.21px;
        padding: 0 12px;
        border-radius: 18.61px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14.88px;
        line-height: 30.12px;
        letter-spacing: -0.02em;
        text-align: center;
    }

    .art-page--4 .art4-tip__graphic {
        margin: 0 0 48px;
    }

    .art-page--4 .art4-tip__graphic img {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .art-page--4 .art4-tip--5 .art4-tip__logic {
        padding: 32px 24px;
        border-radius: 32px;
    }

    .art-page--4 .art4-tip--5 .art4-tip__logic-grid {
        grid-template-columns: 1fr;
        row-gap: 1.3em;
    }

    .art-page--4 .art4-tip--5 .art4-tip__logic-col--left,
    .art-page--4 .art4-tip--5 .art4-tip__logic-col--right {
        width: auto;
    }

    .art-page--4 .art4-tip--5 .art4-tip__logic-outro {
        max-width: none;
    }

}

/* ============================================================
   Article 5 — hero cover on top
   ============================================================ */
.art-page--5 {
    background: rgba(210, 210, 210, 1);
    color: #2F2F2F;
}

.art-page--5 .art {
    position: static;
    max-width: none;
    width: 100%;
    padding: 0;
    background: transparent;
}

.art-page--5 :where([class*='art5']:not(.art5-hero__cover):not(.art5-hero__title):not(.art5-body__figure--ghost):not(.art5-body__figure-photo):not(.art5-body__figure-ghost):not(.art5-body__figure-tint)) {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
}

.art-page--5 .art-hero.art5-hero {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    background: rgba(210, 210, 210, 1);
}

.art-page--5 .art5-hero__cover {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.art-page--5 .art5-hero__cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 886;
    object-fit: cover;
    object-position: center;
    /* Initial blur; js/main.js clears it on scroll. */
    filter: blur(20px);
}

/* Title on hero cover — white + mix-blend-mode: difference (sage/olive over photo). */
.art-page--5 .art5-hero__title {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 820px;
    max-width: 90%;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
}

.art-page--5 .art5-hero__title .sb {
    font-family: 'SangBleu Sunrise', 'SangBleu', 'Times New Roman', serif;
    font-weight: 500;
}

.art-page--5 .art5-hero .art__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 80px auto 0;
    padding: 0;
}

.art-page--5 .art5-hero__lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--5 .art5-hero__lead p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--5 .art5-hero__lead p+p {
    margin-top: 1.3em;
}

.art-page--5 .art5-hero__quote {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 100px auto 0;
    padding: 0;
    border: 0;
}

.art-page--5 .art5-hero__quote p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--5 .art5-hero__author {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 20px auto 0;
    padding: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--5 .art5-story {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--5 .art5-story__p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--5 .art5-story__p:nth-child(1) {
    margin-top: 35px;
}

.art-page--5 .art5-story__p:nth-child(2) {
    margin-top: 28px;
}

.art-page--5 .art5-story__p:nth-child(3) {
    margin-top: 27px;
}

.art-page--5 .art5-story__p--break {
    margin-top: 1.3em;
}

.art-page--5 .art5-story__figure {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 0;
    padding: 0;
}

.art-page--5 .art5-story__figure img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    aspect-ratio: 818 / 944;
    object-fit: cover;
    object-position: center;
}

.art-page--5 .art5-story__p--after-figure {
    margin-top: 45px;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
}

.art-page--5 .art5-story__p--continued {
    margin-top: 45px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
}

.art-page--5 .art5-story__p--gap {
    margin-top: 1.3em;
}

.art-page--5 .art5-line-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 0;
    padding: 0;
}

.art-page--5 .art5-line {
    display: block;
    box-sizing: border-box;
    width: 424px;
    max-width: 100%;
    height: 0;
    margin: 0 0 0 auto;
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 1);
}

.art-page--5 .art5-outro {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--5 .art5-outro__pull {
    margin: 40px 0 0;
    padding: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: center;
    color: #2F2F2F;
}

.art-page--5 .art5-outro__rule {
    display: block;
    box-sizing: border-box;
    width: 820px;
    max-width: 100%;
    height: 0;
    margin: 40px auto 45px;
    padding: 0;
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 1);
}

.art-page--5 .art5-body {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 97px;
    padding: 0;
}

.art-page--5 .art5-body p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--5 .art5-body p+p {
    margin-top: 1.3em;
}

.art-page--5 .art5-body__figure {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--5 .art5-body__figure:not(.art5-body__figure--ghost):not(.art5-body__figure--scroll):not(.art5-body__figure--444) img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    aspect-ratio: 352 / 459;
    object-fit: cover;
    object-position: center;
}

/* Ghost portrait — scroll crossfade (333_new → r6new); js/article.js sets --art-portrait-o1/o2. */
.art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll {
    --art-portrait-o1: 1;
    --art-portrait-o2: 0;
    display: grid;
    position: relative;
    isolation: isolate;
    width: 820px;
    max-width: 100%;
}

.art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo {
    grid-area: 1 / 1;
    display: block;
    width: 820px;
    max-width: 100%;
    height: 1069px;
    object-fit: cover;
    object-position: center;
}

.art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo--1 {
    opacity: var(--art-portrait-o1);
    z-index: 0;
}

.art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo--2 {
    opacity: var(--art-portrait-o2);
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo--1 {
        opacity: 1;
    }

    .art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo--2 {
        display: none;
    }
}

.art-page--5 .art5-body__p--after-figure {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--5 .art5-body__figure--444 {
    position: relative;
    display: grid;
    justify-items: center;
    width: 665.4921875px;
    height: 765.5078125px;
    max-width: 665.4921875px;
    margin: 90px auto 0;
}

.art-page--5 .art5-body__figure--444 .art5-body__figure-photo-wrap {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}

.art-page--5 .art5-body__figure--444 .art5-body__figure-photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: unset;
    object-fit: contain;
    object-position: center;
}

.art-page--5 .art5-body__figure--444 .art5-body__figure-photo--1 {
    /* filter:blur(20px) is the initial state; js/main.js clears it on scroll. */
    filter: blur(20px);
}

.art-page--5 .art5-body__figure--444 .art5-body__figure-text {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 820px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'SangBleu Sunrise', 'SangBleu', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    color: #FFFFFF;
    mix-blend-mode: difference;
    text-align: center;
}

.art-page--5 .art5-body__p--after-444 {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--5 .art5-body__p--lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 30px auto 21px;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 20px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--5 .art5-vline {
    display: block;
    box-sizing: border-box;
    width: 1px;
    height: 174.00353606712378px;
    margin: 0 auto;
    border-left: 1px solid rgba(0, 0, 0, 1);
    pointer-events: none;
}

.art-page--5 .art-cta {
    margin: 0 auto 144px;
}

.art-page--5 .art-cta__text {
    margin: 0 auto 58px;
    max-width: 571px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    color: rgba(39, 39, 39, 1);
}

@media (max-width: 770px) {
    body.art-page--5>header {
        display: none;
    }

    body.art-page--5>.header-burger__icon svg path {
        fill: #2F2F2F;
    }

    .art-page--5 .art {
        box-sizing: border-box;
        padding: 0 20px;
    }

    .art-page--5 .art-hero.art5-hero {
        padding-top: 0;
        padding-bottom: 0;
    }

    .art-page--5 .art5-hero .art__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 80px auto 0;
        padding: 0;
    }

    .art-page--5 .art5-hero__cover {
        order: 0;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
    }

    .art-page--5 .art5-hero__cover img {
        width: 100%;
        height: 814.61328125px;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center top;
    }

    .art-page--5 .art5-hero__title {
        width: 335px;
        max-width: 90%;
        font-size: 35px;
        line-height: 0.9;
        letter-spacing: -0.03em;
    }

    .art-page--5 .art5-hero__lead {
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .art-page--5 .art5-hero__lead p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--5 .art5-hero__quote {
        order: 2;
        width: 100%;
        max-width: none;
        margin-top: 100px;
    }

    .art-page--5 .art5-hero__quote p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 25px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--5 .art5-hero__author {
        order: 3;
        width: 100%;
        max-width: none;
        margin-top: 15px;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--5 .art5-story {
        order: 4;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .art-page--5 .art5-story__p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-story__p:nth-child(1) {
        margin-top: 48px;
    }

    .art-page--5 .art5-story__p:nth-child(2) {
        margin-top: 45px;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
    }

    .art-page--5 .art5-story__p:nth-child(3) {
        margin-top: 45px;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
    }

    .art-page--5 .art5-story__p--break {
        margin-top: 45px;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
    }

    .art-page--5 .art5-story__figure {
        order: 5;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 45px calc(50% - 50vw) 45px;
        padding: 0;
    }

    .art-page--5 .art5-story__figure img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 818 / 944;
        object-fit: cover;
        object-position: center;
    }

    .art-page--5 .art5-story__p--after-figure {
        order: 6;
        margin-top: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-story__p--continued {
        order: 7;
        margin-top: 45px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-story__p--gap {
        order: 8;
        margin-top: 45px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-story__p--gap+.art5-story__p--gap {
        order: 9;
        margin-top: 45px;
    }

    .art-page--5 .art5-line-wrap {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 45px auto 0;
        padding: 0;
    }

    .art-page--5 .art5-line {
        width: 172.15629577637117px;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
    }

    .art-page--5 .art5-outro {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 0;
    }

    .art-page--5 .art5-outro__pull {
        margin: 14px 0 0;
        padding: 0;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--5 .art5-outro__rule {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 0;
        margin: 15px 0 0;
        padding: 0;
        border: 0;
        border-top: 1.5px solid rgba(0, 0, 0, 1);
    }

    .art-page--5 .art5-body {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 45px auto 0;
        padding: 0;
    }

    .art-page--5 .art5-body p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-body p+p {
        margin-top: 1.3em;
    }

    .art-page--5 .art5-body__figure--ghost {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 45px 0 0;
        padding: 0;
    }

    .art-page--5 .art5-body__figure--ghost.art5-body__figure--scroll .art5-body__figure-photo {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    .art-page--5 .art5-body__p--after-figure {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 45px auto 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-body__figure--444 {
        position: relative;
        display: grid;
        justify-items: center;
        box-sizing: border-box;
        width: 318.2119140625px;
        height: 366.035400390625px;
        max-width: 100%;
        margin: 45px auto 0;
        padding: 0;
    }

    .art-page--5 .art5-body__figure--444 .art5-body__figure-photo-wrap {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .art-page--5 .art5-body__figure--444 .art5-body__figure-photo {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: unset;
        object-fit: contain;
        object-position: center;
    }

    .art-page--5 .art5-body__figure--444 .art5-body__figure-text {
        width: 100%;
        padding: 0 14px;
        font-size: 20px;
    }

    .art-page--5 .art5-body__p--after-444 {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 45px auto 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-body__p--lead {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 45px auto 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 20px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--5 .art5-vline {
        display: block;
        box-sizing: border-box;
        width: 0;
        height: 61.00315237606442px;
        margin: 10px auto 0;
        border-left: 0.45px solid rgba(0, 0, 0, 1);
        pointer-events: none;
    }

    .art-page--5 .art-cta {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw) 93px;
        padding: 0;
        overflow-x: clip;
        overflow-y: visible;
    }

    .art-page--5 .art-cta__stack {
        width: 100%;
    }

    .art-page--5 .art-cta__stage {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        height: auto;
        aspect-ratio: 452 / 467;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .art-page--5 .art-cta__content {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: none;
        padding: 0 20px;
    }

    .art-page--5 .art-cta__decor {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 452 / 467;
        overflow: visible;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
        transform-origin: 50% 50%;
        will-change: transform;
    }

    .art-page--5 .art-cta__ellipse {
        display: block;
        width: 170%;
        height: 170%;
        object-fit: cover;
        pointer-events: none;
    }

    .art-page--5 .art-cta__text {
        margin: 0;
        max-width: none;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-page--5 .art-cta__btn {
        box-sizing: border-box;
        width: 303px;
        max-width: 100%;
        height: 37.21px;
        padding: 0 12px;
        border-radius: 18.61px;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14.88px;
        line-height: 30.12px;
        letter-spacing: -0.02em;
        text-align: center;
    }
}

/* ============================================================
   Article 6 — placeholder
   ============================================================ */
.art-page--6 {
    background: rgba(210, 210, 210, 1);
    color: #2F2F2F;
}

.art-page--6 .art {
    position: static;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}

.art-page--6 :where([class*='art6']) {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
}

.art-page--6 .art-hero.art6-hero {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    background: rgba(210, 210, 210, 1);
}

.art-page--6 .art6-hero__cover {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.art-page--6 .art6-hero__cover picture {
    display: block;
    width: 100%;
}

.art-page--6 .art6-hero__cover img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Title on hero cover — white + mix-blend-mode: difference. */
.art-page--6 .art6-hero__title {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 128px;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 820px;
    max-width: 90%;
    margin: 0;
    padding: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: center;
    color: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
}

.art-page--6 .art6-hero__title .sb {
    font-family: 'SangBleu Sunrise', 'SangBleu', 'Times New Roman', serif;
    font-weight: 500;
}

.art-page--6 .art6-hero .art__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
}

.art-page--6 .art6-hero__lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 145px auto 0;
    padding: 0;
}

.art-page--6 .art6-hero__lead p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--6 .art6-hero__lead p+p {
    margin-top: 110px;
}

.art-page--6 .art6-hero__vline {
    display: none;
}

.art-page--6 .art6-hero__quote {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 132px auto 0;
    padding: 0;
    border: 0;
}

.art-page--6 .art6-hero__quote p {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 70px;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--6 .art6-hero__author {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 20px auto 0;
    padding: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--6 .art6-line-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 80px auto 0;
    padding: 0;
}

.art-page--6 .art6-line {
    display: block;
    box-sizing: border-box;
    width: 424px;
    max-width: 100%;
    height: 0;
    margin: 0 0 0 auto;
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 1);
}

.art-page--6 .art6-story {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 22px auto 0;
    padding: 0;
}

.art-page--6 .art6-story__p {
    margin: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    text-indent: 0;
    color: #2F2F2F;
}

.art-page--6 .art6-rule {
    display: block;
    box-sizing: border-box;
    width: 826px;
    max-width: 100%;
    height: 0;
    margin: 22px auto 0;
    padding: 0;
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 1);
}

.art-page--6 .art6-body {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 80px auto 0;
    padding: 0;
}

.art-page--6 .art6-body p:not(.art6-body__highlight) {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--6 .art6-body p + p:not(.art6-body__highlight) {
    margin-top: 1.3em;
}

.art-page--6 .art6-body__figure {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 105px;
    padding: 0;
}

.art-page--6 .art6-body__figure picture {
    display: block;
    width: 100%;
}

.art-page--6 .art6-body__figure:not(.art6-body__figure--photo2) img {
    display: block;
    width: 820px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
}

/* Body portrait — crossfade women1 → 6_6 on scroll (like .article-7-photo2). */
.art-page--6 .art6-body__figure--photo2 {
    display: inline-grid;
    grid-template-columns: 1fr;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #F4F4F4;
    --photo2-progress: 0;
}

.art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo {
    grid-area: 1 / 1;
    position: static;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo--1 {
    opacity: calc(1 - var(--photo2-progress));
    z-index: 1;
}

.art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo--2 {
    opacity: var(--photo2-progress);
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo--1 {
        opacity: 1;
    }

    .art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo--2 {
        display: none;
    }
}

@media (min-width: 771px) {
    .art-page--6 .art6-body__figure--photo2 {
        width: 820px;
        height: 923.69921875px;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo {
        width: 820px;
        height: 923.69921875px;
        max-width: none;
    }
}

.art-page--6 .art6-body--after-figure {
    margin-top: 0;
    margin-bottom: 63px;
}

.art-page--6 .art6-body--insight {
    margin-top: 0;
    margin-bottom: 0;
}

.art-page--6 .art6-body__setup {
    margin: 0;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-indent: 25px;
    text-align: left;
    color: #2F2F2F;
}

.art-page--6 .art6-body--insight .art6-body__highlight {
    margin-top: 45px;
    margin-bottom: 45px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    line-height: 130%;
    letter-spacing: -0.02em;
    text-indent: 25px;
    text-align: left;
    color: #2F2F2F;
}

@media (min-width: 771px) {
    .art-page--6 .art6-body--insight .art6-body__highlight {
        font-weight: 500;
        font-size: 30px;
    }
}

.art-page--6 .art6-body--continued {
    margin-top: 0;
}

.art-page--6 .art6-body__figure--222 {
    position: relative;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 45px auto 105px;
    padding: 0;
}

.art-page--6 .art6-body__figure--222 img {
    display: block;
    width: 671.54736328125px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 672 / 450;
    object-fit: cover;
    object-position: center;
    /* Black & white. blur(20px) is the initial state; js/main.js clears the
       blur on scroll but keeps the grayscale (see the 'grayscale(1) ' prefix
       passed to bind()). */
    filter: grayscale(1) blur(20px);
}

.art-page--6 .art6-body__figure--222 .art6-body__figure-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 960px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 0 30px;
    font-family: 'SangBleu Sunrise', 'SangBleu', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    mix-blend-mode: difference;
    text-align: center;
    pointer-events: none;
}

.art-page--6 .art6-body--after-222 {
    margin-top: 0;
}

.art-page--6 .art6-outro {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 108px auto 32px;
    padding: 0;
}

.art-page--6 .art6-outro__closing {
    box-sizing: border-box;
    width: 100%;
    max-width: 510px;
    margin: 0 auto;
    padding: 0;
    font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2F2F2F;
}

.art-page--6 .art6-outro__line {
    display: block;
    box-sizing: border-box;
    width: 472px;
    max-width: 100%;
    height: 0;
    margin: 5px auto 0;
    padding: 0;
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 1);
}

.art-page--6 .art6-body--tips {
    margin-top: 27px;
}

.art-page--6 .art6-vline {
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 141.79101084292796px;
    margin: 35px auto 0;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, 1);
    pointer-events: none;
}

.art-page--6 .art-cta {
    margin: 0 auto 214px;
}

.art-page--6 .art-cta__text {
    margin: 0 auto 58px;
    max-width: 571px;
    font-family: 'Golos', 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    color: rgba(39, 39, 39, 1);
}

@media (max-width: 770px) {
    body.art-page--6>header {
        display: none;
    }

    body.art-page--6>.header-burger__icon svg path {
        fill: #2F2F2F;
    }

    .art-page--6 .art-hero.art6-hero {
        padding-top: 0;
        padding-bottom: 0;
    }

    .art-page--6 .art6-hero__cover {
        order: 0;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
    }

    .art-page--6 .art6-hero__cover img {
        width: 100%;
        height: 839.32421875px;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center top;
    }

    .art-page--6 .art6-hero__title {
        top: 72%;
        bottom: auto;
        transform: translateX(-50%);
        width: 335px;
        max-width: 90%;
        font-size: 35px;
    }

    .art-page--6 .art {
        padding: 0 20px;
    }

    .art-page--6 .art-hero.art6-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .art-page--6 .art6-hero .art__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .art-page--6 .art6-hero__lead {
        order: 1;
        width: 100%;
        max-width: none;
        margin-top: 76px;
    }

    .art-page--6 .art6-hero__lead p {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--6 .art6-hero__lead p+p {
        margin-top: 110px;
    }

    .art-page--6 .art6-hero__vline {
        display: block;
        order: 2;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 0;
        height: 68px;
        margin: 21px auto 9px;
        padding: 0;
        border: 0;
        border-left: 1px solid rgba(39, 39, 39, 1);
        pointer-events: none;
    }

    .art-page--6 .art6-hero__quote {
        order: 3;
        box-sizing: border-box;
        width: 100%;
        max-width: 335px;
        margin: 0 auto;
        padding: 0;
    }

    .art-page--6 .art6-hero__quote p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 25px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--6 .art6-hero__author {
        order: 4;
        width: 100%;
        max-width: none;
        margin-top: 15px;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        color: #2F2F2F;
    }

    .art-page--6 .art6-line-wrap {
        order: 5;
        width: 100%;
        max-width: none;
        margin-top: 45px;
    }

    .art-page--6 .art6-line {
        width: 172.15629577637117px;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
    }

    .art-page--6 .art6-story {
        order: 6;
        width: 100%;
        max-width: none;
        margin: 14px 0;
    }

    .art-page--6 .art6-story__p {
        margin: 0;
        font-family: 'SangBleu Sunrise', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--6 .art6-rule {
        order: 6;
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-top: 1.5px solid rgba(0, 0, 0, 1);
    }

    .art-page--6 .art6-rule+.art6-body {
        order: 7;
        width: 100%;
        max-width: none;
        margin-top: 45px;
        margin-bottom: 0;
    }

    .art-page--6 .art6-body p:not(.art6-body__highlight) {
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--6 .art6-rule+.art6-body p:not(.art6-body__highlight) {
        text-indent: 25px;
    }

    .art-page--6 .art6-body p + p:not(.art6-body__highlight) {
        margin-top: 1.3em;
    }

    .art-page--6 .art6-body__figure:not(.art6-body__figure--222) {
        order: 8;
        box-sizing: border-box;
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        margin: 45px auto 0;
        padding: 0;
    }

    .art-page--6 .art6-body__figure--photo2 {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 909 / 1024;
    }

    .art-page--6 .art6-body__figure:not(.art6-body__figure--222):not(.art6-body__figure--photo2) img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        object-fit: cover;
        object-position: center;
    }

    .art-page--6 .art6-body__figure--photo2 .art6-body__figure-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .art-page--6 .art6-body--after-figure {
        order: 9;
        width: 100%;
        max-width: none;
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .art-page--6 .art6-body--after-figure p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--6 .art6-body--after-figure p+p {
        margin-top: 1.3em;
    }

    .art-page--6 .art6-body--insight {
        order: 10;
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    .art-page--6 .art6-body__setup {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--6 .art6-body--insight .art6-body__highlight {
        margin-top: 45px;
        margin-bottom: 45px;
        font-weight: 600;
        font-size: 20px;
    }

    .art-page--6 .art6-body--continued {
        order: 11;
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    .art-page--6 .art6-body--continued p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--6 .art6-body--continued p+p {
        margin-top: 1.3em;
    }

    .art-page--6 .art6-body__figure--222 {
        order: 12;
        display: block;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 45px calc(50% - 50vw) 0;
        padding: 0;
    }

    .art-page--6 .art6-body__figure--222 img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        aspect-ratio: 672 / 450;
        object-fit: cover;
        object-position: center;
    }

    .art-page--6 .art6-body__figure--222 .art6-body__figure-text {
        width: 100%;
        padding: 0 14px;
        font-size: 18px;
        opacity: 0;
    }

    .art-page--6 .art6-body--after-222 {
        order: 13;
        width: 100%;
        max-width: none;
        margin-top: 45px;
    }

    .art-page--6 .art6-body--after-222 p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-indent: 25px;
        text-align: left;
        color: #2F2F2F;
    }

    .art-page--6 .art6-outro {
        order: 14;
        width: 100%;
        max-width: none;
        margin: 75px auto 0;
    }

    .art-page--6 .art6-outro__closing {
        max-width: none;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    .art-page--6 .art6-outro__line {
        display: block;
        box-sizing: border-box;
        width: 266.77606201171875px;
        max-width: 100%;
        height: 0;
        margin: 3px auto 0;
        padding: 0;
        border: 0;
        border-top: 1.5px solid rgba(0, 0, 0, 1);
    }

    .art-page--6 .art6-body--tips {
        order: 15;
        width: 100%;
        max-width: none;
        margin: 45px auto 13px;
    }

    .art-page--6 .art6-body--tips p {
        margin: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: center;
        text-indent: 0;
        color: #2F2F2F;
    }

    .art-page--6 .art6-body--tips p+p {
        margin-top: 1.3em;
    }

    .art-page--6 .art6-vline {
        display: block;
        box-sizing: border-box;
        width: 0;
        height: 133.0000000000001px;
        margin: 0 auto 0;
        padding: 0;
        border: 0;
        border-left: 0.45px solid rgba(0, 0, 0, 1);
        pointer-events: none;
    }

    .art-page--6 .art-cta {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw) 105px;
        padding: 0;
        overflow-x: clip;
        overflow-y: visible;
    }

    .art-page--6 .art-cta__stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .art-page--6 .art-cta__stage {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        height: auto;
        aspect-ratio: 452 / 467;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .art-page--6 .art-cta__content {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: none;
        padding: 0 20px;
        text-align: center;
    }

    .art-page--6 .art-cta__decor {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 452 / 467;
        overflow: visible;
        transform: translate(-50%, -50%) rotate(calc(360deg * var(--art-cta-progress, 0)));
        transform-origin: 50% 50%;
        will-change: transform;
        pointer-events: none;
    }

    .art-page--6 .art-cta__ellipse {
        display: block;
        width: 170%;
        height: 170%;
        object-fit: cover;
        pointer-events: none;
    }

    .art-page--6 .art-cta__text {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        color: rgba(39, 39, 39, 1);
    }

    .art-page--6 .art-cta__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 303px;
        max-width: calc(100% - 40px);
        height: 37.21px;
        margin: 0;
        padding: 0 12px;
        border: 1px solid #272727;
        border-radius: 18.61px;
        background-color: #272727;
        color: rgba(255, 255, 255, 1);
        font-family: 'Golos', 'Golos Text', sans-serif;
        font-weight: 500;
        font-size: 14.88px;
        line-height: 30.12px;
        letter-spacing: -0.02em;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .art-page--6 .art-cta__btn:visited {
        color: rgba(255, 255, 255, 1);
    }

    .art-page--6 .art-cta__btn:hover,
    .art-page--6 .art-cta__btn:visited:hover,
    .art-page--6 .art-cta__btn:focus-visible {
        background-color: #FFFFFF;
        color: #2F2F2F;
        border-color: #272727;
    }
}