/* =====================================================================
   Відважна 4 — V26 system (consolidated from V25).
   Base = tokens, primitives, materials, controls, scene frame, modes.
   Every section owns exactly one /* @section id */ ... /* @end id */ block.
   Header, hero, menu and the hero→About transition keep their approved
   files (v17, hero-v12, v14-journey, v19-hero, v20-intro).
   ===================================================================== */
/* @section base */
@font-face{font-family:eUkraine;src:url('assets/fonts/e-Ukraine-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --v26-ink:#020b19;
  --v26-navy:#05193a;
  --v26-cobalt:#2a6be0;
  --v26-glow:#7fb2ff;
  --v26-text:#eef4fd;
  --v26-muted:#bccde6;
  --v26-faint:#93abcf;
  --v26-line:rgb(164 196 240 / 16%);
  --v26-max:1680px;
  --v26-gutter:40px;
  --v26-ease:cubic-bezier(.22,1,.36,1);
  --v26-r-lg:28px;
  --v26-r-md:20px;
  --v26-r-sm:14px;
  /* Type scale. --scale is multiplied once, here, never in components. */
  --v26-h1:calc(clamp(38px, 3.9vw, 72px) * var(--scale, 1));
  --v26-h2:calc(clamp(32px, 14px + 2.5vw, 46px) * var(--scale, 1));
  --v26-h3:calc(clamp(20px, 15px + .55vw, 26px) * var(--scale, 1));
  --v26-h4:calc(18px * var(--scale, 1));
  --v26-lead:calc(clamp(17px, 14px + .32vw, 20px) * var(--scale, 1));
  --v26-body:calc(clamp(15px, 14px + .14vw, 17px) * var(--scale, 1));
  --v26-caption:calc(13px * var(--scale, 1));
  --v26-section-pad:clamp(64px, 6.2vw, 112px);
  /* pinned scenes: every title sits on one line below the header (80 px) — feedback 2026-10-14 «близько до меню» */
  --v26-pin-top:calc(80px + clamp(60px, 8.5vh, 104px));
  /* three numeric steps used by every figure on the page */
  --v26-num-xl:calc(clamp(56px, 3.4vw + 22px, 92px) * var(--scale, 1));
  --v26-num-l:calc(clamp(34px, 1.6vw + 18px, 52px) * var(--scale, 1));
  --v26-num-m:calc(clamp(26px, .9vw + 14px, 36px) * var(--scale, 1));
  /* Figma V4 plaque edge: cobalt → steel → white. */
  --v26-edge:linear-gradient(125deg, #2f7bf0 0%, #3a7ccc 40%, #e9eef9 88%);
}
@media (max-width:1100px){:root{--v26-gutter:40px}}  /* tablet axis = header outer edge (A-14) */
@media (max-width:600px){:root{--v26-gutter:24px}}

html.v26,html.v26 body{background:var(--v26-ink)}
html.v26 body{overflow-x:clip}

/* ---------- Layout primitives ---------- */
.v26-wrap{width:min(var(--v26-max), calc(100% - 2 * var(--v26-gutter)));margin-inline:auto}
.v26-section{position:relative;isolation:isolate;padding-block:var(--v26-section-pad);color:var(--v26-text);scroll-margin-top:0}
.v26-section[hidden]{display:none!important}
.v26-head{display:grid;gap:20px;margin-bottom:clamp(36px, 4vw, 64px)}
.v26-head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;column-gap:clamp(32px,5vw,96px)}
.v26-head--split>.v26-body{max-width:56ch;justify-self:end}

/* ---------- Typography ---------- */
html.v26 .v26-h2,html.v26 .v26-h3,html.v26 .v26-h4{margin:0;font-weight:400;color:var(--v26-text);text-wrap:balance}
html.v26 .v26-h2{font-size:var(--v26-h2);line-height:1.12;letter-spacing:-.025em;max-width:22ch}
html.v26 .v26-h3{font-size:var(--v26-h3);line-height:1.25;letter-spacing:-.01em}
html.v26 .v26-h4{font-size:var(--v26-h4);line-height:1.4}
.v26-lead{margin:0;font-size:var(--v26-lead);line-height:1.55;color:#d7e3f4;max-width:44ch}
html.v26 .v26-section p,html.v26 .v26-footer p{text-wrap:pretty}
.v26-body,.v26-section p{font-size:var(--v26-body);line-height:1.65}
.v26-section p{margin:0;color:var(--v26-muted)}
.v26-section .v26-lead{font-size:var(--v26-lead);color:#d7e3f4}
html.v26 .v26-label{display:inline-block;margin:0;font-size:var(--v26-caption);line-height:1.4;letter-spacing:.02em;color:var(--v26-faint);font-weight:400}
html.v26 .v26-note{font-size:var(--v26-caption);line-height:1.5;color:var(--v26-faint)}
.v26-display{margin:0;font-size:var(--v26-h1);line-height:1;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.v26-section b,.v26-section strong{font-weight:400;color:var(--v26-text)}

/* ---------- Glass material ---------- */
.v26-glass{
  position:relative;isolation:isolate;border-radius:var(--v26-r-lg);
  background:
    radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 16%), transparent 60%),
    linear-gradient(158deg, rgb(40 92 180 / 22%) 0%, rgb(14 40 88 / 36%) 36%, rgb(6 20 46 / 58%) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgb(230 242 255 / 20%), 0 40px 90px -54px rgb(0 0 0 / 90%);
}
/* rim: the Figma plaque edge — cobalt at the lit corner, steel along the sides, white at the far corner */
.v26-glass::before{
  content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(140deg, #9cc2ff 0%, rgb(47 123 240 / 70%) 14%, rgb(58 124 204 / 20%) 40%, rgb(70 130 220 / 8%) 62%, rgb(150 190 245 / 30%) 84%, rgb(233 238 249 / 78%) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* a whisper of grain only — no dot pattern inside panels (user: less frost, fewer dots) */
.v26-glass::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:url('assets/v7-matte-grain.png') center/180px;opacity:.12;mix-blend-mode:soft-light}

/* V4 plaque (Figma board "2": the "Посада" pill): deep navy fill with grain and a
   vivid cobalt → white gradient edge. One component for season marks, tier names,
   stage status and the contact e-mail. Sizes: --sm (chips), default, --lg (feature). */
.v26-plaque{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;padding:7px 18px;border-radius:999px;white-space:nowrap;
  font-size:calc(14px * var(--scale, 1));line-height:1.25;color:#fff;text-decoration:none;
  background:linear-gradient(180deg, #0c2452, #071a3d);
  box-shadow:0 14px 34px -20px rgb(42 107 224 / 85%);
}
.v26-plaque::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--v26-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.v26-plaque::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url('assets/v7-matte-grain.png') center/180px;opacity:.16;mix-blend-mode:soft-light;pointer-events:none}
.v26-plaque--sm{min-height:30px;padding:4px 13px;font-size:var(--v26-caption)}
.v26-plaque--lg{min-height:64px;padding:14px 30px;gap:14px;font-size:var(--v26-h3);letter-spacing:-.01em}
.v26-plaque--lg::before{padding:1.5px}

/* V4 brand field (Figma badge / merch): cobalt surface with the halftone dot grid
   whose dots grow toward the bottom. Used sparingly: mentor band, contact plaque. */
.v26-brandfield{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--v26-r-lg);
  background:linear-gradient(165deg, #123f9f 0%, #0b2c74 38%, #071d4d 72%, #05163b 100%);
  box-shadow:inset 0 1px 0 rgb(230 242 255 / 22%), 0 50px 110px -60px rgb(20 80 200 / 70%);
}
.v26-brandfield::before{content:'';position:absolute;inset:auto 0 0 0;height:32%;z-index:-1;background:url('assets/v26/halftone.png') center bottom/1600px auto repeat-x;opacity:.28;pointer-events:none;
  -webkit-mask:linear-gradient(180deg, transparent, #000 85%);mask:linear-gradient(180deg, transparent, #000 85%)}
.v26-brandfield::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg, rgb(150 196 255 / 80%), rgb(70 126 220 / 18%) 32%, rgb(40 90 180 / 0%) 58%, rgb(233 238 249 / 55%));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

/* Atmospheric underlay: the material the glass refracts. Fades into the page. */
.v26-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);mask:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent)}
.v26-stage::before{
  content:'';position:absolute;inset:-10% -2%;background:var(--v26-img-near, none) var(--v26-pos, center)/cover no-repeat;opacity:var(--v26-o, .5);
  /* static (perf 2026-10-16, MacBook): a moving image inside a masked underlay is re-composited through the mask on every
     scroll frame (formats 25% → 0%, compass 20% → 0% missed frames without it); the season horizon keeps its camera */
}
.v26-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--v26-ink) 0%, rgb(2 11 25 / 55%) 34%, rgb(2 11 25 / 10%) 70%, rgb(2 11 25 / 40%) 100%)}
.v26-stage--facets{--v26-img:radial-gradient(60% 55% at 82% 30%, rgb(42 107 224 / 34%), transparent 70%), radial-gradient(45% 50% at 12% 80%, rgb(30 80 190 / 22%), transparent 70%);--v26-o:1}
.v26-stage--caustics{--v26-img:radial-gradient(55% 60% at 20% 40%, rgb(42 107 224 / 30%), transparent 70%), radial-gradient(50% 45% at 85% 75%, rgb(30 80 190 / 20%), transparent 70%);--v26-o:1}
.v26-stage--architecture{--v26-img:radial-gradient(60% 60% at 75% 55%, rgb(52 118 232 / 34%), transparent 70%), radial-gradient(40% 40% at 15% 20%, rgb(30 80 190 / 16%), transparent 70%);--v26-o:1}
.v26-stage--horizon{--v26-img:url('assets/v20/cobalt-horizon-poster.webp');--v26-o:.62;--v26-pos:50% 80%}
.v26-stage--low{--v26-o:.7}

/* ---------- Controls ---------- */
.v26-btn{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:calc(15px * var(--scale, 1));line-height:1.3;color:var(--v26-text);text-decoration:none;white-space:nowrap;
  transition:transform 220ms var(--v26-ease), background-color 220ms var(--v26-ease), box-shadow 220ms var(--v26-ease);
}
.v26-btn--primary{background:linear-gradient(115deg, #1a4a86, #0b2a55);box-shadow:0 18px 40px -22px rgb(42 107 224 / 90%)}
.v26-btn--primary::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(125deg, #2f7bf0, #3a7ccc 40%, #e9eef9 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.v26-btn--primary:hover{background:linear-gradient(115deg, #2259a0, #0f3466)}
.v26-btn--secondary{background:rgb(10 34 70 / 38%);box-shadow:inset 0 0 0 1px rgb(190 214 248 / 34%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v26-btn--secondary:hover{background:rgb(24 60 112 / 50%);box-shadow:inset 0 0 0 1px rgb(210 228 255 / 58%)}
.v26-btn--small{min-height:42px;padding:10px 20px;font-size:calc(14px * var(--scale, 1))}
.v26-btn:active{transform:translateY(1px)}
.v26-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--v26-text);text-decoration:none;font-size:var(--v26-body);background:none;border:0;padding:6px 0;cursor:pointer}
.v26-text-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--v26-ease)}
.v26-text-link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgb(190 214 248 / 50%)}
.v26-text-link:hover svg{transform:translate(2px,-2px)}
.v26-icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;border:0;cursor:pointer;color:var(--v26-text);background:rgb(10 34 70 / 45%);box-shadow:inset 0 0 0 1px rgb(190 214 248 / 28%);transition:background-color 200ms var(--v26-ease), opacity 200ms}
.v26-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v26-icon-btn:hover:not(:disabled):not([aria-disabled="true"]){background:rgb(30 70 130 / 55%)}
.v26-icon-btn:disabled{opacity:.32;cursor:default}
/* an end-of-range stepper button stays focusable (aria-disabled), so it dims its colour, not its focus ring (C5-06) */
.v26-icon-btn[aria-disabled="true"]{cursor:default;color:rgb(238 244 253 / 36%);background:rgb(10 34 70 / 30%);box-shadow:inset 0 0 0 1px rgb(190 214 248 / 14%)}
.v26-stepper{display:flex;align-items:center;gap:14px}
.v26-counter{min-width:72px;text-align:center;font-size:calc(14px * var(--scale, 1));letter-spacing:.04em;color:var(--v26-faint);font-variant-numeric:tabular-nums}
.v26-counter b{color:var(--v26-text);font-weight:400}
.v26-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.v26-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;font-size:var(--v26-caption);line-height:1.3;color:#d4e3f8;background:rgb(120 166 232 / 14%)}
.v26-chip--accent{color:#fff;background:linear-gradient(115deg, rgb(42 107 224 / 55%), rgb(20 60 130 / 45%))}
.v26-chip--ai{min-height:24px;padding:2px 10px;margin-left:10px}

/* One tab system for categories, seasons, people and formats. */
.v26-tabs{
  --i:0;position:relative;display:grid;grid-template-columns:repeat(var(--tabs, 2), minmax(0, 1fr));
  padding:5px;border-radius:999px;background:rgb(6 24 52 / 62%);box-shadow:inset 0 0 0 1px rgb(170 204 250 / 18%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:max-content;max-width:100%;
}
.v26-tabs::before{
  content:'';position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--tabs, 2));border-radius:999px;
  background:linear-gradient(180deg, rgb(225 238 255 / 20%), rgb(160 200 255 / 10%));box-shadow:inset 0 0 0 1px rgb(220 236 255 / 42%), inset 0 1px 0 rgb(255 255 255 / 30%);
  transform:translateX(calc(var(--i) * 100%));transition:transform 300ms var(--v26-ease);
}
.v26-tab{position:relative;z-index:1;min-height:44px;padding:10px 22px;border:0;border-radius:999px;background:none;cursor:pointer;font:inherit;font-size:calc(14px * var(--scale, 1));line-height:1.3;color:#c3d4ec;white-space:nowrap;text-align:center;transition:color 200ms var(--v26-ease)}
.v26-tab[aria-selected="true"]{color:#fff}
.v26-tab:hover{color:#fff}
.v26-tab:focus-visible,.v26-btn:focus-visible,.v26-icon-btn:focus-visible,.v26-section :focus-visible,.v26-footer :focus-visible{outline:2px solid #b9daff;outline-offset:4px}

/* Stacked panels share one grid cell: stable height, no overlapping text. */
.v26-swap{display:grid;position:relative}
.v26-swap>*{grid-area:1/1;transition:opacity 220ms var(--v26-ease), transform 300ms var(--v26-ease), visibility 0s linear 300ms;opacity:0;visibility:hidden;transform:translateY(10px)}
.v26-swap>:not(.is-active){position:absolute;inset:0 0 auto 0}
.v26-swap>.is-active{opacity:1;visibility:visible;transform:none;transition:opacity 260ms var(--v26-ease) 140ms, transform 300ms var(--v26-ease) 140ms, visibility 0s}

.v26-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v26-checks li{position:relative;padding-left:34px;font-size:var(--v26-body);line-height:1.5;color:#dbe6f6}
.v26-checks li::before{content:'';position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:rgb(70 130 230 / 18%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17.5 8.4' fill='none' stroke='%23cfe2ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1px rgb(150 196 255 / 38%)}

/* Reveal motion (enabled only when JS + motion are available). */
html.v26-motion [data-reveal="title"]{clip-path:inset(0 0 100% 0);transform:translateY(.4em);transition:clip-path 680ms var(--v26-ease), transform 680ms var(--v26-ease)}
html.v26-motion [data-reveal="title"].is-in{clip-path:inset(-.2em -.2em -.35em -.2em);transform:none}
html.v26-motion [data-reveal-item]{opacity:0;transform:translateY(48px);transition:opacity 560ms var(--v26-ease), transform 560ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 90ms)}
html.v26-motion [data-reveal-item].is-in{opacity:1;transform:none}

/* ======================= Pinned scene frame ======================= */
html.v26-pinned .v26-section[data-scene]{padding-block:0;height:var(--v26-scene-h, 300vh)}
/* entering a pinned scene from a flow section: the gap equals the page's section rhythm, not padding + pin line
   (the pinned title still settles on --v26-pin-top once the scene holds; verify3 N-U4) */
html.v26-pinned .v26-section:not([data-scene]) + .v26-section[data-scene]{margin-top:calc(var(--v26-section-pad) - var(--v26-pin-top))}
/* «Для кого» → the pinned scene after it («Етапи програми» since 2026-10-20; the rules were made for «Четвертий сезон»,
   bug report 2026-10-19): a pull-up below Audience's bottom padding (clamp(40px, 4vw, 64px) in the audience region —
   keep the two in step) let the scene's ink top cover the panel's lower edge and the buttons. The pull-up stops 16 px
   below Audience's content, so the scene's H2 sits 16 px + the pin line under it (a little over the section step);
   the selector outranks the rule above. Re-verified for «Етапи» 2026-10-20 at 2560×1600, 2560×1440, 1920×1080 and
   1440×900@2: no seam at the scene's top (≤ 0.7/255), the audience band unchanged by the scene. */
html.v26-pinned .v26-section.v26-audience:not([data-scene]) + .v26-section[data-scene]{margin-top:max(calc(var(--v26-section-pad) - var(--v26-pin-top)), calc(16px - clamp(40px, 4vw, 64px)))}
/* …and Audience's glow finishes its fade exactly where the scene begins (the band under the buttons, 2026-10-19):
   the scene's top is painted in the page ink (the season's top fade; the stages board's top shade), so a glow still
   running under it ended on a hard line */
html.v26-pinned #audience>.v26-stage{bottom:max(0px, calc(-1 * max(calc(var(--v26-section-pad) - var(--v26-pin-top)), calc(16px - clamp(40px, 4vw, 64px)))))}
/* …and Audience paints above the scene's top: the band they share is only Audience's bottom padding, where the
   buttons' glow (box-shadow, ~36 px below them) was cut flat by the scene's ink top (feedback 2026-10-19) */
html.v26-pinned #audience{z-index:1}
html.v26-pinned .v26-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--v26-pin-top);padding-bottom:32px;box-sizing:border-box}
.v26-pin{position:relative}
html.v26-pinned .v26-pin>.v26-stage{-webkit-mask:linear-gradient(to bottom, transparent 4%, #000 20%, #000 82%, transparent 96%);mask:linear-gradient(to bottom, transparent 4%, #000 20%, #000 82%, transparent 96%)}

/* Module drawer (desktop: side panel; phone: full-screen sheet). */
.v26-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(520px, 100vw);max-width:100vw;height:100vh;height:100dvh;max-height:none;padding:clamp(24px, 3vw, 44px);border:0;color:var(--v26-text);background:linear-gradient(160deg, #0f2d58, #061630 60%);box-shadow:-40px 0 90px -30px rgb(0 0 0 / 80%), inset 1px 0 0 rgb(150 196 255 / 26%);overflow:auto}
.v26-drawer::backdrop{background:rgb(1 6 16 / 64%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.v26-drawer[open]{animation:v26-drawer-in 420ms var(--v26-ease)}
@keyframes v26-drawer-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.v26-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.v26-drawer-desc{margin:14px 0 22px;font-size:var(--v26-body);line-height:1.65;color:var(--v26-muted)}
.v26-drawer-track{margin:0 0 22px;font-size:var(--v26-body)}
.v26-drawer-list{display:grid;gap:12px;margin:0}
.v26-drawer-list div{padding:16px 18px;border-radius:var(--v26-r-sm);background:rgb(4 16 38 / 55%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 14%)}
.v26-drawer-list dt{font-size:var(--v26-h4);margin-bottom:6px}
.v26-drawer-list dd{margin:0;font-size:var(--v26-caption);line-height:1.55;color:var(--v26-faint)}
@media (max-width:700px){.v26-drawer{inset:auto 0 0 0;width:100vw;height:auto;max-height:92dvh;border-radius:24px 24px 0 0}}

@media (max-width:900px){.v26-head--split{grid-template-columns:1fr}.v26-head--split>.v26-body{justify-self:start}}
/* ======================= Modes ======================= */
html.contrast .v26-section p,html.contrast .v26-label,html.contrast .v26-note{color:#fff!important}
html.contrast .v26-glass,html.contrast .v26-stack-card,html.contrast .v26-module{background:#04152f!important}
html.enlarged .v26-funding-layout,html.enlarged .v26-compass-layout,html.enlarged .v26-faq-layout,html.enlarged .v26-results-head{grid-template-columns:1fr}
html.enlarged .v26-head--split{grid-template-columns:1fr}
html.enlarged .v26-head--split>*{justify-self:start!important}
html.enlarged .v26-tab{white-space:normal}
html.enlarged .v26-tabs{border-radius:24px}
html.enlarged .v26-tabs::before{border-radius:20px}
@media (prefers-reduced-motion:reduce){
  .v26-swap>*,.v26-tabs::before,.v26-story,.v26-btn{transition-duration:120ms!important;transition-delay:0s!important}
}
html.quiet .v26-swap>*,html.quiet .v26-tabs::before{transition-duration:120ms!important;transition-delay:0s!important}
@media (max-height:820px){
  :root{--v26-pin-top:calc(80px + clamp(48px, 7vh, 60px))}   /* ≥128 px at 720 high: never glued to the menu (verify3 N-U7) */
  html.v26-pinned .v26-pin{padding-bottom:20px}
}
@media (max-height:700px){:root{--v26-pin-top:122px}}
@media (max-width:440px){
  .v26-tab{padding:8px 10px;font-size:calc(13px * var(--scale, 1));white-space:normal;line-height:1.25}
  .v26-tabs{width:100%}
}
html.v26-pinned .v26-section[data-scene]{scroll-margin-top:-110px}

html.v26-pinned [data-drag]{cursor:grab}
html.v26-pinned [data-drag].is-dragging{cursor:grabbing}
/* Hero partner strip — equal optical weight (handoff §3). Tiles, order, blur and edge fade are the approved
   ones; only the heavy wordmarks are scaled down toward the light ministry lockups. */
.v12-partner-group li:nth-child(3) img{max-height:32px}
.v12-partner-group li:nth-child(4) img{max-height:23px}
.v12-partner-group li:nth-child(5) img{width:80px;max-height:21px}
.v12-partner-group li:nth-child(6) img{width:134px;max-height:20px}
/* Low laptops (≈1366×650): the approved hero keeps its composition; only its vertical rhythm tightens
   so the partner strip stays fully on the first screen (A-16). */
@media (max-height:680px) and (min-width:901px){
  html:not(.enlarged) .v12-hero{padding-top:100px;padding-bottom:104px}
  html:not(.enlarged) .v12-copy h1{margin-top:10px}
  html:not(.enlarged) .v12-lead{margin-top:18px}
  html:not(.enlarged) .v12-actions{margin-top:22px}
  html:not(.enlarged) .v12-highlights{margin-top:18px}
}
/* underlay images are attached when the stage is near the viewport (G-12) */
.v26-stage.is-near{--v26-img-near:var(--v26-img)}
html.quiet .v26-stage,html.enlarged .v26-stage{--v26-img-near:var(--v26-img)}
/* wide screens: section titles keep growing with the 1680 container (G-13); ≤1680 keeps the approved 46px */
/* above 1440 the H2 keeps growing with the frame (H2/H1 ≥ .7 at 1920 and 2560, verify3 H-18) */
@media (min-width:1441px){:root{--v26-h2:calc(clamp(46px, 1.67vw + 22px, 62px) * var(--scale, 1))}}
@media (min-width:1800px){:root{--v26-h1:calc(clamp(72px, 2.4vw + 26px, 88px) * var(--scale, 1))}}
/* enlarged text on phones: headings never break mid-word, stay inside the column (G-07) */
@media (max-width:600px){html.enlarged{--v26-h2:min(calc(32px * var(--scale, 1)), 10.5vw)}
  html.enlarged .v26-section h2,html.enlarged .v26-section h3,html.enlarged #about h2{overflow-wrap:normal;word-break:normal;hyphens:auto}
  html.enlarged #about.v26-about .v13-facts{grid-template-columns:1fr}
  html.enlarged #about.v26-about .v13-fact{border-right:0}}
/* coarse pointers: every control reaches a 44px target (G-09) */
@media (pointer:coarse){
  .v26-footer-nav a,.v26-footer-legal button,.v26-level-formats a,.v26-btn--small,.v26-scale button,.v26-text-link,.v26-cities button{min-height:44px}
  .v26-text-link{padding-block:10px}
  .v26-pin-btn::after{content:'';position:absolute;inset:-7px}
}
/* off-screen hero fireflies stop (v26.js base: html.v26-ff-off) */
html.v26-ff-off .v12-fireflies{display:none}
/* the sparks belong to the hero: none while the scene flies or rests in About (animated dots under the flight mask
   re-composite it every frame — MacBook 2026-10-16) */
/* (a 300 ms fade, not a cut, when the flight starts; a fade in when the scene is back in the hero — round-6 F7) */
.v14-shared-surface .v12-fireflies{animation:v26-ff-out 300ms linear forwards}
.v12-hero .v12-fireflies{animation:v26-ff-in 500ms linear}
@keyframes v26-ff-out{from{opacity:1}to{opacity:0;visibility:hidden;display:none}}
@keyframes v26-ff-in{from{opacity:0}to{opacity:1}}
html.quiet .v12-fireflies{animation:none}
/* Perf 2026-10-16 (measured on the user's MacBook, Chrome 154 @2): a backdrop blur is re-rendered under every glass
   panel on each scroll frame — with the moving section backdrops behind them that cost 70–100% of the frames in the
   upper half of the page (a local software-raster proxy: «Для кого» 73% → 0%, буткемпи 100% → 0% with the blur off).
   The glass keeps its tint, rim and grain and loses only the blur (the user asked for less frost on 2026-10-14); the
   tint is a shade denser to keep the panels' weight. The approved hero (its chips and partner strip) and the header
   keep theirs: small, and static against their own backdrop. */
html.v26 main section:not(.v12-hero):not(.v12-partners) *,
html.v26 main section:not(.v12-hero):not(.v12-partners) *::before,
html.v26 main section:not(.v12-hero):not(.v12-partners) *::after,
html.v26 main section.v26-camps{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.v26 .v12-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(5 29 59 / 90%)}   /* fixed over everything: re-blurred on every scroll frame */
html.v26 .v26-glass{background:
    radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 18%), transparent 60%),
    linear-gradient(158deg, rgb(40 92 180 / 26%) 0%, rgb(14 40 88 / 44%) 36%, rgb(6 20 46 / 68%) 100%)}
/* the hero poster lies under the playing loop at the same size and mask: hidden while the video shows (one fewer
   ~10-megapixel layer per frame on Retina; perf 2026-10-16); it returns whenever the video is hidden or not ready */
.v12-scene.is-video-ready .v12-poster{visibility:hidden;transition:visibility 0s linear 220ms}   /* after the loop's 160 ms fade-in */
html.quiet .v12-scene .v12-poster,.is-motion-paused .v12-scene .v12-poster{visibility:visible}
/* the hero's own chips and partner cards drop the blur too (MacBook load report 2026-10-16: frames of 130–280 ms in the
   hero while the loop plays behind them); they sit on the dark side of the frame or are near-opaque, so a little more
   tint keeps their look */
html.v26 .v12-deadline{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(11 39 76 / 72%)}
html.v26 .v12-highlights li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(22 49 86 / 48%)}
html.v26 .v12-partner-group li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(5 29 59 / 86%)}
/* @end base */

/* @section about */
/* About keeps the approved intro (hero → About flight, headline words, the queen's art column). Edits 2026-10-20
   («Поєднуємо у один екран»): the title, one paragraph and the five figures read as one screen beside the queen at
   1440×900 and 1920×1080. The figures are varied glass plaques under the copy, in two columns («урізноманітнюємо
   плашки, щоб були помітні, … у дві колонки»): the participants (12 000+, 500) as wide plaques with the large figure,
   the programme (9 modules, 10 cities) as compact ones beside them, and the 5 200 000 fund as the one feature plaque
   across the column (its breakdown lives only in Funding). */
#about.v26-about>.v13-shell{max-width:var(--v26-max);width:calc(100% - 2 * var(--v26-gutter))}
/* the art window and the caustic underlay bleed past the column: clipped at the section (no scroll container, so the
   sticky art keeps working), whatever the older sheets say (verify5 V5A-05) */
#about.v26-about{overflow-x:clip}
#about.v26-about .v13-about-layout{align-content:start;grid-template-rows:auto 1fr;row-gap:clamp(32px, 4.4vh, 48px)}
/* «Відважна 4» — системний / розвиток вашого бізнесу: v19-hero breaks the line after the third word span */
#about.v26-about .v13-about-copy h2{font-size:var(--v26-h2)}
/* the one paragraph is the section's lead */
#about.v26-about .v13-about-lead{max-width:40em;margin-top:clamp(18px, 2.4vh, 26px);font-size:var(--v26-lead);line-height:1.55;color:#d7e3f4}
#about.v26-about .v13-about-reading{align-self:start;max-width:none}
/* the landed art fades at top and bottom too (no pasted rectangle edge) */
#about .v13-art-window{-webkit-mask:linear-gradient(90deg, transparent, #000 19%, #000 88%, transparent), linear-gradient(transparent, #000 10%, #000 86%, transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg, transparent, #000 19%, #000 88%, transparent), linear-gradient(transparent, #000 10%, #000 86%, transparent);mask-composite:intersect}
/* hero → About flight: the image's left part recedes under the About copy column, and its top/bottom edges feather, so
   floor lines never sit behind the headline, lead or season line. The About JS writes the edge (--v26-fe, at the copy
   column, stopped short of the queen — FB15-BUG) and the alpha left of it (--v26-fa, dimming as the H2 arrives — A-03)
   on the surface from the flight frame */
.v14-shared-surface:not(.is-landed){
  -webkit-mask-image:linear-gradient(90deg, rgb(0 0 0 / var(--v26-fa, 1)) calc(var(--v26-fe, 0%) - 6%), #000 calc(var(--v26-fe, 0%) + 8%), #000 94%, transparent), linear-gradient(transparent, #000 8%, #000 88%, transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, rgb(0 0 0 / var(--v26-fa, 1)) calc(var(--v26-fe, 0%) - 6%), #000 calc(var(--v26-fe, 0%) + 8%), #000 94%, transparent), linear-gradient(transparent, #000 8%, #000 88%, transparent);mask-composite:intersect}
/* the queen's art spans the whole screen of copy and plaques (it was a fixed 570 px, short of the plaques at 1920 and
   beyond), never taller than the screen under the header; the flight lands on this box (v14-journey reads the slot) */
@media (min-width:1001px){html:not(.enlarged) #about.v26-about .v13-system-art{height:clamp(570px, 100%, calc(100vh - 150px))}}
/* quiet modes (reduced motion / enlarged text): no flight, so the art column shows the approved poster */
html.quiet #about .v13-art-window,html.enlarged #about .v13-art-window{background:url('assets/v12-hero-poster-1600.webp') 74% 46%/cover no-repeat}

/* figures: five plaques over one caustic underlay (the glass needs something to refract) */
.v26-about-figures{position:relative;isolation:isolate;min-width:0;max-width:100%}
.v26-stage--about{inset:-64px -40px -80px -8vw;--v26-o:.5;-webkit-mask:linear-gradient(transparent, #000 24%, #000 76%, transparent);mask:linear-gradient(transparent, #000 24%, #000 76%, transparent)}
.v26-stage--about::after{background:radial-gradient(70% 60% at 50% 50%, rgb(2 11 25 / 10%), var(--v26-ink) 92%)}
.v26-about-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:clamp(12px, 1vw, 16px)}
.v26-about-fact{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:0;min-height:clamp(112px, 13.6vh, 148px);padding:clamp(18px, 1.5vw, 26px) clamp(20px, 1.7vw, 28px);border-radius:var(--v26-r-md)}
.v26-about-fact strong{display:block;font-weight:400;font-size:var(--v26-num-l);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.v26-about-fact span{display:block;font-size:var(--v26-body);line-height:1.4;color:var(--v26-muted)}
/* wide plaques: the figure and its words side by side on one base line */
.v26-about-fact--wide{grid-column:span 4;flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:clamp(20px, 2.4vw, 40px)}
.v26-about-fact--wide strong{font-size:var(--v26-num-xl);line-height:.86}
.v26-about-fact--wide span{max-width:17ch}
/* the fund: the feature plaque — lit cobalt glass with the V4 edge, the largest figure on the screen */
.v26-about-fact--fund{grid-column:1 / -1;justify-content:flex-end;gap:clamp(10px, 1.2vh, 14px);min-height:clamp(128px, 16.5vh, 176px);padding:clamp(22px, 2vw, 32px) clamp(24px, 2.2vw, 36px)}
html.v26 #about .v26-about-fact--fund{
  background:
    radial-gradient(70% 150% at 0% 0%, rgb(96 164 255 / 34%), transparent 62%),
    radial-gradient(55% 120% at 100% 100%, rgb(42 107 224 / 34%), transparent 70%),
    linear-gradient(150deg, rgb(24 70 156 / 72%) 0%, rgb(11 38 92 / 80%) 52%, rgb(6 22 56 / 88%) 100%);
  box-shadow:inset 0 1px 0 rgb(230 242 255 / 30%), 0 44px 90px -48px rgb(42 107 224 / 80%)}
.v26-about-fact--fund::before{background:var(--v26-edge)}
.v26-about-fact--fund strong{font-size:var(--v26-num-xl);line-height:.9}
.v26-about-fact--fund strong small{margin-left:.18em;font-size:var(--v26-lead);letter-spacing:0;color:#d7e3f4}
.v26-about-fact--fund span{font-size:var(--v26-lead);line-height:1.4;color:#e3ecf8}
html.v26-motion #about .v13-about-copy h2 span{transition:opacity 120ms linear}
/* a counter stays unseen until it starts counting (base marks the start with data-counted), so a plaque rising into
   view at the screen's edge never shows «0+» */
html.v26-motion #about .v26-about-fact strong[data-count]{transition:opacity 260ms var(--v26-ease)}
html.v26-motion #about .v26-about-fact strong[data-count]:not([data-counted]){opacity:0}
@media (max-width:1100px){
  #about.v26-about .v13-about-layout{grid-template-rows:none}
}
/* tablet: one column like the phone (v20-intro forces two columns at every width) */
@media (min-width:701px) and (max-width:1000px){
  #about.v26-about .v13-about-layout{display:flex;flex-direction:column;gap:28px;min-height:0}
  #about.v26-about .v13-art-column{order:3;width:100%;margin-top:64px}
  #about.v26-about .v13-system-art{position:relative;top:auto;height:min(520px, 62vw)}
  #about.v26-about .v13-about-reading{margin-top:12px}
}
#about .v13-about-copy,#about .v13-about-reading{position:relative;z-index:1}
/* ≤ 1000 px the hero keeps its queen (no flight): the About column shows no second copy of her (feedback 2026-10-17:
   «двічі повторюється головне зображення першого екрана»), in every mode */
@media (max-width:1000px){#about.v26-about .v13-art-column{display:none}}
/* enlarged text keeps the stacked layout up to 1199 px: no second queen there either (round-6 review BR-04) */
@media (max-width:1199px){html.enlarged #about.v26-about .v13-art-column{display:none}}
/* narrow desktops (1001–1300): the copy column takes more of the row, the title wraps where it fits (no forced break
   that would leave «системний» alone on a line), and the wide plaques stack their figure over their words (side by side
   «попередніх» ran out of the plaque at 1280) */
@media (min-width:1001px) and (max-width:1300px){
  html:not(.enlarged) #about.v26-about .v13-about-layout{grid-template-columns:minmax(0, 1.3fr) minmax(0, .85fr);column-gap:56px}
  #about.v26-about .v13-about-copy h2{text-wrap:balance}
  #about.v26-about .v13-about-copy h2 span:nth-child(3)::after{content:none}
  .v26-about-fact--wide{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px}
  .v26-about-fact--wide span{max-width:none}
}
/* laptops with a low screen: the plaques tighten so the screen still holds the whole section */
@media (min-width:1001px) and (max-height:820px){
  .v26-about-fact{min-height:104px;padding-block:16px}
  .v26-about-fact--fund{min-height:120px;padding-block:20px}
}
/* 1280×720-class screens: the fund plaque ended 17 px under the fold (Codex E1, open item 5) — a little tighter still */
@media (min-width:1001px) and (max-height:740px){
  .v26-about-facts{gap:10px}
  .v26-about-fact{min-height:0;gap:10px;padding-block:13px}
  .v26-about-fact--fund{min-height:0;padding-block:16px}
}
/* phones: 12 000+, 500 and the fund across the column, 9 and «10 міст» side by side (dense packing pulls «10 міст» up
   beside 9, so no compact plaque stands alone in its row) */
@media (max-width:700px){
  .v26-about-facts{grid-auto-flow:row dense}
  #about.v26-about .v13-about-copy h2{text-wrap:wrap}
  /* (capped at 9.4vw: at 150% ««Відважна 4» —» is one unbreakable unit and must stay inside the column) */
  #about.v26-about .v13-about-copy h2{font-size:min(calc(min(32px, 7.6vw) * var(--scale, 1)), 9.4vw)}
  #about.v26-about .v13-about-lead{font-size:var(--v26-body);line-height:1.6}
  #about.v26-about .v13-about-reading{margin-top:8px}
  .v26-about-facts{gap:10px}
  .v26-about-fact{grid-column:span 3;min-height:0;gap:12px;padding:18px}
  .v26-about-fact--wide,.v26-about-fact--fund{grid-column:1 / -1}
  .v26-about-fact strong{font-size:min(var(--v26-num-l), 9vw)}
  .v26-about-fact--wide strong{font-size:min(var(--v26-num-xl), 12.5vw)}
  .v26-about-fact span{font-size:calc(14px * var(--scale, 1))}
  .v26-about-fact--fund{display:block;padding:22px 20px}
  .v26-about-fact--fund strong{font-size:min(var(--v26-num-xl), 12.5vw)}
  .v26-about-fact--fund strong small{display:block;margin:8px 0 0;font-size:var(--v26-body)}
  .v26-about-fact--fund span{margin-top:12px;font-size:var(--v26-body)}
}
/* narrow phones (360): «12 000+» at 12.5vw leaves its label no room beside it — the label goes under the number */
@media (max-width:380px){
  .v26-about-fact--wide{flex-direction:column;align-items:flex-start;gap:10px}
  .v26-about-fact--wide span{max-width:none}
}
/* enlarged text on desktop (≥1200): the copy and the art share the field again — the reading column on the left, the
   still queen (no flight with enlarged text) in a sticky column beside it, instead of one narrow column with the queen
   between paragraphs and an empty right half (verify5 NEW-G6) */
@media (min-width:1200px){
  html.enlarged #about.v26-about .v13-about-layout{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);column-gap:clamp(40px, 4vw, 72px)}
  html.enlarged #about.v26-about .v13-art-column{grid-column:2;grid-row:1 / 3;align-self:stretch}
  html.enlarged #about.v26-about .v13-about-reading{grid-column:1;grid-row:2}
  html.enlarged #about.v26-about .v13-system-art{position:sticky;top:120px;max-width:none;margin:0;height:min(570px, 72vh)}
}
/* enlarged text: single column; the art follows the text instead of opening a hole after the lead */
@media (max-width:1199px){
  html.enlarged #about.v26-about .v13-about-layout{display:flex;flex-direction:column;gap:28px;min-height:0}
  html.enlarged #about.v26-about .v13-art-column{order:3;width:100%;margin-top:64px}
  html.enlarged #about.v26-about .v13-system-art{position:relative;top:auto;height:min(420px, 50vw)}
}
/* enlarged text: every plaque stacks its figure over its words, the figures may wrap («гривень» under the number), and
   the compact plaques take half the column (three per row would cut «Поглибленого» at 150%) */
html.enlarged .v26-about-fact--wide{flex-direction:column;align-items:flex-start;justify-content:space-between}
html.enlarged .v26-about-fact--wide span{max-width:none}
html.enlarged .v26-about-fact strong{white-space:normal}
html.enlarged .v26-about-fact span{overflow-wrap:anywhere;hyphens:auto}
html.enlarged .v26-about-facts{grid-auto-flow:row dense}
html.enlarged .v26-about-fact{grid-column:span 3}
html.enlarged .v26-about-fact--wide,html.enlarged .v26-about-fact--fund{grid-column:1 / -1}
html.enlarged .v26-about-fact--fund strong{font-size:min(var(--v26-num-xl), 11vw)}
@media (max-width:700px){
  html.enlarged .v26-about-fact{grid-column:1 / -1}
  html.enlarged .v26-about-fact strong{font-size:min(var(--v26-num-l), 11vw)}
}
/* «Що чекає на учасниць» (edits 2.0): no forced breaks from the old title's word rules (v13-sections / v19-hero) */
html.v26 #about .v13-about-copy h2 span::after{content:none}
/* edits 2.0: three equal plaques (9 · 500 · 10) over the fund; phones: 9 + 500, then «10 міст…» and the fund across */
.v26-about-facts>.v26-about-fact:not(.v26-about-fact--fund){grid-column:span 2}
@media (max-width:700px){
  .v26-about-facts>.v26-about-fact:not(.v26-about-fact--fund){grid-column:span 3}
  .v26-about-facts>.v26-about-fact:nth-child(3):not(.v26-about-fact--fund){grid-column:1 / -1}
}
/* @end about */

/* @section audience */
/* «Для кого» (E4, 2026-10-30): two equal categories and «Окремий напрям» — social business is a direction a participant
   moves into later, not a third category of registration. Name, who and text share rows across the two cards (subgrid). */
.v26-aud-head{margin-bottom:clamp(28px, 3vw, 48px)}
.v26-aud-list{--aud-gap:clamp(16px, 1.4vw, 24px);--aud-pad-x:clamp(28px, 3.4vw, 60px);--aud-pad-y:clamp(28px, 3vw, 52px);--aud-row:clamp(16px, 1.6vw, 24px);--aud-rule:clamp(8px, 1vw, 16px);display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--aud-gap)}
.v26-aud-card{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto auto 1fr;row-gap:var(--aud-row);align-content:start;padding:var(--aud-pad-y) var(--aud-pad-x)}
.v26-aud-lead{display:contents}
html.v26 .v26-aud-name{margin:0;font-size:calc(clamp(28px, 2.9vw, 44px) * var(--scale, 1));font-weight:400;line-height:1.04;letter-spacing:-.03em;color:#fff}
html.v26 .v26-aud-who{max-width:46ch;font-size:var(--v26-lead);line-height:1.5;color:#d7e3f4}
html.v26 .v26-aud-text{margin-top:var(--aud-rule);padding-top:clamp(16px, 1.6vw, 24px);border-top:1px solid var(--v26-line);font-size:var(--v26-body);line-height:1.6;color:var(--v26-muted)}
.v26-audience{padding-bottom:clamp(40px, 4vw, 64px)}
@supports (grid-template-rows:subgrid){
  .v26-aud-list{row-gap:0}
  .v26-aud-card:not(.v26-aud-card--track){grid-row:span 3;grid-template-rows:subgrid}
}
/* «Окремий напрям»: a full-width band under the two categories, its right half on the second card's text line */
.v26-aud-card--track{grid-column:1 / -1;grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-rows:auto 1fr;column-gap:calc(var(--aud-gap) + 2 * var(--aud-pad-x));margin-top:var(--aud-gap)}
html.v26 .v26-aud-card--track{background:
  radial-gradient(60% 130% at 100% 0%, rgb(42 107 224 / 34%), transparent 70%),
  linear-gradient(158deg, rgb(40 92 180 / 26%) 0%, rgb(14 40 88 / 40%) 40%, rgb(6 20 46 / 58%) 100%)}
html.v26 .v26-aud-card--track .v26-aud-name{display:grid;justify-items:start;gap:clamp(12px, 1.2vw, 18px)}
html.v26 .v26-aud-tag{letter-spacing:normal}
@media (min-width:901px){
  html.v26 .v26-aud-card--track .v26-aud-text{grid-column:2;grid-row:1 / 3;align-self:end;margin-top:0;padding-top:0;border-top:0}
}
/* the two categories as translucent cobalt glass with the names set large, the type is the picture; the direction stays dark glass, they lead and it follows.
   Solid cobalt stood out from the rest of the page (client 2026-11-03), so the night shows through it now */
html.v26 .v26-aud-card:not(.v26-aud-card--track){background:
  radial-gradient(90% 70% at 0% 0%, rgb(110 168 255 / 20%), transparent 60%),
  linear-gradient(165deg, rgb(44 100 208 / 50%) 0%, rgb(28 70 160 / 38%) 100%)}
html.v26 .v26-aud-card:not(.v26-aud-card--track) .v26-aud-who{color:#fff}
html.v26 .v26-aud-card:not(.v26-aud-card--track) .v26-aud-text{border-top-color:rgb(255 255 255 / 26%);color:#e4edff}
/* tablets and phones: one column */
@media (max-width:900px){
  .v26-aud-list{grid-template-columns:minmax(0, 1fr);row-gap:var(--aud-gap)}
  .v26-aud-card:not(.v26-aud-card--track){grid-row:auto;grid-template-rows:none}
  .v26-aud-card--track{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;column-gap:0;margin-top:0}
}
@media (max-width:700px){
  .v26-aud-list{--aud-pad-x:22px;--aud-pad-y:26px}
}
/* enlarged text: a name wraps at its space, never at a hyphen; on phones a kept-together phrase may wrap, or it runs out of the card */
html.v26.enlarged .v26-audience .v26-aud-name{-webkit-hyphens:manual;hyphens:manual}
@media (max-width:480px){html.enlarged .v26-aud-who .v26-nw{white-space:normal}}
.v26-aud-cta{display:flex;justify-content:center;margin-top:clamp(24px, 2.6vw, 40px)}
@media (max-width:600px){.v26-aud-cta .v26-btn{width:min(100%, 320px)}}
/* @end audience */

/* @section season */
/* 4. Season — one pinned scene (TZ 224). The camera circles the queen and comes down to her eye level, one view
   per thesis (assets/v26/season-formats/queen-orbit: the lead's Kling move cut to RGBA — 45° high three-quarter →
   front → three-quarter → low → eye-level side); the far horizon (crystals, horizon glow) descends with the camera
   behind her and meets her base line at 06. The only floor is a dark glossy floor that mirrors the far crystals:
   her reflection and her contact light lie on it; no board, no tiles anywhere (the backdrop's photographic tile
   floor is cut at the horizon — static flow included). On entry she settles onto her line; after 06 her
   reflection shortens while Formats rises. Copy and cards sit above her; the H2 sits on the base pinned-title
   line; on tall frames she stands lower and larger. Cards are V26 glass; one thesis is readable at a time. */
.v26-season-layout{display:grid;grid-template-columns:minmax(0, 4.6fr) minmax(0, 2.3fr) minmax(0, 5.1fr);align-items:start;column-gap:clamp(24px, 3vw, 56px)}
.v26-season-copy{position:relative;z-index:2;display:grid;gap:22px;align-content:start}
.v26-season-copy .v26-lead{max-width:34ch}
@media (max-width:1023px){.v26-season-copy .v26-lead{max-width:44ch}}
.v26-season-figure{position:relative;align-self:stretch;pointer-events:none}
/* the rig is not a stacking context (no transform, no blend): her halo and her contact light screen onto the
   scene's own floor, and she stands in front of the far horizon (the orbit frames are RGBA: the queen alone) */
.v26-queen-rig{position:absolute;top:var(--q-top, 0px);left:50%;width:var(--q-w, 280px);height:var(--q-h, 600px);margin-left:calc(var(--q-w, 280px) / -2)}
.v26-queen-stage{position:absolute;inset:0}
.v26-queen-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* her light: a halo behind the body (the orbit frames carry their own square and reflection) */
.v26-queen-aura{position:absolute;left:-14%;right:-14%;top:6%;height:72%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%, rgb(86 146 255 / 30%), rgb(42 107 224 / 10%) 46%, transparent 72%);opacity:.45;pointer-events:none;mix-blend-mode:screen;will-change:transform}
.v26-queen-pool{position:absolute;left:-34%;right:-34%;top:75.5%;height:13%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%, rgb(170 208 255 / 62%), rgb(70 130 240 / 24%) 42%, transparent 72%);mix-blend-mode:screen;opacity:.6;pointer-events:none}

.v26-season-deck{position:relative;z-index:2;display:grid;gap:24px;justify-items:start;align-content:start;min-width:0}
/* the stack is a frame: the next card rises from its lower edge; earlier cards peek above it */
/* (a 28 px band under the resting card lets the incoming card emerge softly instead of from a hard cut) */
.v26-stack{position:relative;list-style:none;margin:-48px 0 -28px;padding:48px 0 28px;display:grid;width:100%;overflow:hidden}
html.v26-pinned .v26-stack{-webkit-mask:linear-gradient(to bottom, #000 calc(100% - 30px), transparent calc(100% - 2px));mask:linear-gradient(to bottom, #000 calc(100% - 30px), transparent calc(100% - 2px))}
.v26-stack-card{grid-area:1 / 1;position:relative;min-width:0;transform-origin:50% 0;will-change:transform}
.v26-stack-card .v26-stack-shade,.v26-stack-card .v26-stack-light{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.v26-stack-card .v26-stack-shade{z-index:1;background:#030e22}
/* the edge facing the queen catches her light */
.v26-stack-card .v26-stack-light{z-index:0;background:radial-gradient(55% 75% at 0% 58%, rgb(120 176 255 / 30%), rgb(60 120 230 / 8%) 55%, transparent 75%)}
.v26-stack-inner{position:relative;z-index:3;display:grid;align-content:start;justify-items:start;padding:clamp(28px, 2.6vw, 44px)}
.v26-stack-inner .v26-stack-num{display:block;margin-bottom:18px}
html.v26 .v26-stack-inner .v26-h3{max-width:24ch;margin-bottom:12px}
.v26-stack-inner p{max-width:46ch;color:#d3e0f2!important}
.v26-season-live{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* pinned: content hangs from the header line so the title arrives with the scene; on tall frames
   the group sits a little lower and grows (wider card padding, taller queen) so the board reads as
   the stage under it, not as leftover space (SF-C5) */
html.v26-pinned #new .v26-pin{justify-content:flex-start;padding-top:var(--v26-pin-top);padding-bottom:0}
/* the title keeps «Четвертий сезон —» on its first line on laptop widths too (1280/1366 broke it into «Четвертий» /
   «сезон —» / …): the copy column never gets narrower than that line (≈10.4 title sizes, at most 47% of the row);
   the queen's and the deck's columns share the rest */
html.v26-pinned .v26-season-layout{grid-template-columns:minmax(min(calc(var(--v26-h2) * 10.4), 47%), 4.6fr) minmax(0, 2.3fr) minmax(0, 5.1fr)}
@media (min-height:1000px) and (min-width:1600px){
  html.v26-pinned #new .v26-stack-inner{padding:clamp(44px, 4.2vh, 64px)}
  html.v26-pinned #new .v26-season-copy{gap:28px}
}
/* the tallest frames (2560×1440 class): the thesis card grows with the frame — the TZ's «великий» numeral takes the
   display size and the card its widest padding — while the queen grows in JS (B-N3) */
@media (min-height:1200px) and (min-width:2000px){
  html.v26-pinned #new .v26-stack-inner{padding:72px 72px 76px}
  html.v26-pinned #new .v26-stack-inner .v26-stack-num{font-size:var(--v26-num-xl);margin-bottom:26px}
  html.v26-pinned #new .v26-stack-inner .v26-h3{margin-bottom:18px}
  html.v26-pinned #new .v26-season-copy{gap:32px}
  html.v26-pinned #new .v26-season-deck{gap:32px}
}
html.v26-pinned #new .v26-pin>.v26-stage{-webkit-mask:linear-gradient(to bottom, transparent 3%, #000 18%, #000 74%, transparent 93%);mask:linear-gradient(to bottom, transparent 3%, #000 18%, #000 74%, transparent 93%)}
html.v26-pinned #new .v26-stage--horizon::before{background-size:var(--hz-size, cover);background-position:var(--hz-pos, 50% 80%);transform-origin:50% var(--cam-o, 60%);
  transform:translate3d(0, calc(var(--v26-para, 0px) + var(--cam-y, 0px)), 0) scale(var(--cam-s, 1))}
/* the far crystals stay behind the glass; the right edge of the board fades out */
#new .v26-stage::after{background:linear-gradient(90deg, var(--v26-ink) 0%, rgb(2 11 25 / 52%) 28%, rgb(2 11 25 / 6%) 54%, rgb(2 11 25 / 18%) 78%, rgb(2 11 25 / 70%) 92%, rgb(2 11 25 / 94%) 100%)}
html.v26-pinned .v26-stack-card{transform:translate3d(0, 125%, 0)}
html.v26-pinned #formats{margin-top:calc(-1 * var(--season-tuck, 0px))}

/* Static flow (phones, tablets, reduced motion, enlarged text): every thesis in a grid. */
html:not(.v26-pinned) .v26-season-layout{grid-template-columns:minmax(0, 1fr);row-gap:clamp(32px, 4vw, 48px)}
html:not(.v26-pinned) .v26-season-figure,html:not(.v26-pinned) #new .v26-stepper{display:none}
html:not(.v26-pinned) #new .v26-stage--horizon::before{-webkit-mask:linear-gradient(to bottom, #000 calc(var(--hz-cut, 57%) - 24px), transparent calc(var(--hz-cut, 57%) + 36px));mask:linear-gradient(to bottom, #000 calc(var(--hz-cut, 57%) - 24px), transparent calc(var(--hz-cut, 57%) + 36px))}
html:not(.v26-pinned) .v26-season-deck{display:block}
html:not(.v26-pinned) .v26-stack{margin:0;padding:0;overflow:visible;gap:16px;grid-template-columns:minmax(0, 1fr)}
html:not(.v26-pinned) .v26-stack-card{grid-area:auto;transform:none}
html:not(.v26-pinned) .v26-stack-num{font-size:var(--v26-num-l)}
html.v26-motion:not(.v26-pinned) #new .v26-stack-card[data-reveal-item]:not(.is-in){transform:translateY(24px)}
@media (min-width:600px){html:not(.v26-pinned) .v26-stack{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:1024px){html:not(.v26-pinned) .v26-stack{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (min-width:1024px){html.enlarged:not(.v26-pinned) .v26-stack{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:1024px){html:not(.v26-pinned) .v26-season-copy{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:end;column-gap:clamp(32px, 5vw, 96px)}
  html:not(.v26-pinned) .v26-season-copy .v26-lead{justify-self:end}}
html.enlarged:not(.v26-pinned) .v26-season-copy{grid-template-columns:minmax(0, 1fr)}
html.enlarged:not(.v26-pinned) .v26-season-copy .v26-lead{justify-self:start}
/* Phones and tablets, static flow with motion (2026-10-17): the queen of the desktop scene is a sticky figure behind
   the theses; v26.js turns her (orbit frames) as the cards pass. The cards keep their glass and pass over her; the gaps
   between them show her whole. Her light is a plain pool (no blend over the moving page). */
#new.is-orbit-flow .v26-season-layout{--of-h:min(76svh, 168vw);--of-gap:40px;row-gap:var(--of-gap)}
/* the deck rides up over the figure (a negative margin on the deck, not on the figure: the figure's whole box stays
   inside the layout, so she stops at the season's end and never reaches into Formats) */
#new.is-orbit-flow .v26-season-figure{display:block;position:sticky;top:calc(50svh - var(--of-h) / 2 + 24px);height:var(--of-h);z-index:0;overflow:clip}   /* her light's halo never widens the page */
#new.is-orbit-flow .v26-season-deck{margin-top:calc(-1 * (var(--of-h) + var(--of-gap)))}
/* the theses stay readable over her: a denser glass in this mode */
#new.is-orbit-flow .v26-stack-card{background-color:rgb(4 16 38 / 84%)}
#new.is-orbit-flow .v26-queen-rig{top:0;left:0;width:100%;height:100%;margin:0}
#new.is-orbit-flow .v26-orbit{top:62%;width:calc(var(--of-h) * 600 / 1062);height:var(--of-h);transform:translate(-50%, -64%)}
#new.is-orbit-flow .v26-queen-aura{display:none}
#new.is-orbit-flow .v26-queen-pool{top:62%;--pool-w:calc(var(--of-h) * .62);mix-blend-mode:normal;opacity:.4}
#new.is-orbit-flow .v26-season-deck{position:relative;z-index:1;padding:calc(var(--of-h) * .8) 0 calc(var(--of-h) * .78)}   /* she stands alone before 01 and after 06 */
/* one column with vertical gaps only, at a readable width (round-6 review F2: the gap shorthand also opened a 300 px
   column gap between two squeezed columns on tablets) */
#new.is-orbit-flow .v26-stack{grid-template-columns:minmax(0, 1fr);column-gap:0;row-gap:max(16px, 30svh);max-width:560px;margin-inline:auto}
/* a flow ↔ pinned switch re-lays the season out: browser scroll anchoring inside it threw the reader into Formats (BR-02) */
#new *{overflow-anchor:none}
/* display headings never hyphenate; on phones the title is capped so «наступний» keeps its line (SF-C8) */
#new-title,#new .v26-h3{hyphens:manual}
/* tablet static flow: the title takes the full measure and balances into two lines (CR-SF3-06) */
@media (min-width:600px) and (max-width:1023px){html.v26:not(.v26-pinned) #new-title{max-width:none}}
@media (max-width:600px){#new-title,#formats-title{font-size:min(var(--v26-h2), 9.5vw)}}
/* Feedback 2026-10-14 («не просто крутилась … сторони, 45 градусів, спускатись»): the orbit frame hangs from the
   rig's feet point (50% / 82%); JS scales it so her height stays the layout's and shifts it so the current frame's
   base sits exactly on that point. The frames carry only the queen and her reflection on alpha (CR-SF3-01). */
.v26-orbit{position:absolute;left:50%;top:82%;width:var(--orbit-w, 340px);height:var(--orbit-h, 602px);transform-origin:0 0;transform:translate(-50%, -64%);pointer-events:none}
/* the canvas covers only the box her body and reflection occupy in every frame (JS draws that crop; V5A-02) */
.v26-orbit canvas{position:absolute;left:30%;top:19%;width:42%;height:81%;display:block}
/* her contact light on the floor: a soft cobalt ellipse under her base (JS sets its ratio from the camera height) */
#new .v26-queen-pool{left:50%;right:auto;top:82%;width:var(--pool-w, 360px);height:var(--pool-w, 360px);margin:calc(var(--pool-w, 360px) / -2) 0 0 calc(var(--pool-w, 360px) / -2);
  background:radial-gradient(closest-side, rgb(176 212 255 / 62%), rgb(92 150 250 / 34%) 26%, rgb(42 107 224 / 13%) 58%, transparent);mix-blend-mode:screen;transform:scale(1, .2);will-change:transform;opacity:.9}
/* the backdrop's floor ends at the horizon (its tiles would be a second, disagreeing floor) … */
html.v26-pinned #new .v26-stage--horizon::before{-webkit-mask:linear-gradient(to bottom, #000 calc(var(--cam-o, 60%) - 2px), rgb(0 0 0 / 30%) calc(var(--cam-o, 60%) + 12px), transparent calc(var(--cam-o, 60%) + 64px));mask:linear-gradient(to bottom, #000 calc(var(--cam-o, 60%) - 2px), rgb(0 0 0 / 30%) calc(var(--cam-o, 60%) + 12px), transparent calc(var(--cam-o, 60%) + 64px))}
/* … and below it a dark glossy floor: it mirrors the far crystals and catches the horizon glow around her —
   reflections and light only, no texture */
.v26-season-floor{display:none}
html.v26-pinned .v26-season-floor{display:block;position:absolute;left:0;right:0;top:0;height:var(--fl-h, 50vh);z-index:-1;pointer-events:none;will-change:transform;transform-origin:50% 0;
  background:radial-gradient(52% 70% at var(--fx, 50%) 0%, rgb(56 116 232 / 18%), rgb(30 80 190 / 6%) 50%, transparent 80%),radial-gradient(16% 28% at var(--fx, 50%) 0%, rgb(120 170 255 / 12%), transparent 80%)}
html.v26-pinned .v26-season-floor::before{content:'';position:absolute;left:-2%;right:-2%;top:0;height:100%;background:var(--fl-img, none) 50% var(--fl-y, 0px)/var(--fl-size, cover) no-repeat;transform:scaleY(-1);opacity:.5;
  -webkit-mask:linear-gradient(to top, #000 0%, rgb(0 0 0 / 55%) 24%, rgb(0 0 0 / 18%) 55%, transparent 88%),linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 45%) 18%, #000 42%, #000 88%, transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(to top, #000 0%, rgb(0 0 0 / 55%) 24%, rgb(0 0 0 / 18%) 55%, transparent 88%),linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 45%) 18%, #000 42%, #000 88%, transparent 100%);mask-composite:intersect}
html.contrast .v26-season-floor{opacity:.3}
/* wide and dense screens get the backdrop at its native 2400 px instead of the 1920 video poster (G-11; JS uses the
   same query for the floor's mirror image and caps the drawn size at 1.2× the source) */
@media (min-width:1800px), (min-resolution:1.5dppx){#new .v26-stage--horizon{--v26-img:url('assets/v26/season-formats/cobalt-horizon-2400.webp')}}
/* her light also spills faintly across the floor around her (the pool's own ellipse, ~2.4× wider) */
#new .v26-queen-pool::after{content:'';position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side, rgb(64 128 240 / 16%), rgb(42 107 224 / 6%) 55%, transparent)}
/* while the far horizon passes behind the stepper (theses 01–03, laptop and tall frames), a soft ink veil keeps
   its glow off the controls (CR-SF3-02); JS sets --veil from the horizon's distance to the stepper */
html.v26-pinned #new .v26-stepper{position:relative;isolation:isolate}
html.v26-pinned #new .v26-stepper::before{content:'';position:absolute;z-index:-1;left:-30px;right:-64px;top:-12px;bottom:-26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgb(2 11 25 / 92%), rgb(2 11 25 / 62%) 52%, rgb(2 11 25 / 0%));opacity:var(--veil, 0)}
/* perf 2026-10-16 (MacBook): the horizon's top / bottom fade is painted in the page ink over the image instead of a
   mask on the whole underlay — that mask, over the moving camera, was re-composited on every frame (a MacBook proxy:
   8% → 1% missed frames in this scene). Same picture: the underlay lies on the page ink, and the floor paints above it. */
html.v26-pinned #new .v26-pin>.v26-stage{-webkit-mask:none!important;mask:none!important}
html.v26-pinned #new .v26-pin>.v26-stage::after{background:
  linear-gradient(to bottom, rgb(2 11 25 / 0) 74%, var(--v26-ink) 93%),
  linear-gradient(90deg, var(--v26-ink) 0%, rgb(2 11 25 / 52%) 28%, rgb(2 11 25 / 6%) 54%, rgb(2 11 25 / 18%) 78%, rgb(2 11 25 / 70%) 92%, rgb(2 11 25 / 94%) 100%)}
/* The top fade (ink 3% → clear 18% of the frame) lies over the whole scene, the floor included: on the stage alone it
   left the floor's horizon edge — 40 px under the scene's top in the high views and on the approach — as a hard band
   under «Для кого»'s buttons (2026-10-19). Since «Етапи» precede the season (2026-10-20) the band holds solid ink to
   ≈7% of the frame (the edge sat under a 90% veil and still showed as a 13-level step) and eases out by 22%. */
html.v26-pinned #new .v26-pin::after{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, var(--v26-ink) 32%, rgb(2 11 25 / 82%) 48%, rgb(2 11 25 / 50%) 66%, rgb(2 11 25 / 20%) 84%, rgb(2 11 25 / 0))}
/* edits 2.0: a small thematic icon instead of 01–06 (glass tile, the site's line style) */
.v26-stack-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border-radius:15px;
  background:linear-gradient(160deg, rgb(64 130 240 / 30%), rgb(14 40 92 / 50%));box-shadow:inset 0 0 0 1px rgb(150 196 255 / 34%), 0 10px 28px -14px rgb(42 107 224 / 80%)}
.v26-stack-icon svg{width:26px;height:26px;fill:none;stroke:#e4efff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1600px){html.v26-pinned #new .v26-stack-inner .v26-stack-icon{width:60px;height:60px;margin-bottom:26px;border-radius:17px}html.v26-pinned #new .v26-stack-icon svg{width:30px;height:30px}}
@media (max-width:700px){.v26-stack-icon{width:46px;height:46px;margin-bottom:16px;border-radius:13px}.v26-stack-icon svg{width:23px;height:23px}}
html.contrast .v26-stack-icon{background:#04152f;box-shadow:inset 0 0 0 1px rgb(214 232 255 / 80%)}
/* @end season */

/* @section formats */
/* 5. Formats («Формати навчання»). The caustic glass underlay stays lit where the panels sit, so the V26 glass has
   light to refract (B-12). National = the basic level: the same glass at lower intensity, no accent. Client edits
   2026-10-20: the two cards are compact (no «9 + 2», no «Два формати» links) and led by their «9». The bootcamp
   panel: title + tabs → content (top-aligned) → accent strip; ten centres, as in the registration form. */
/* two crops of the caustic glass, cross-faded: one lights the level cards, the mirrored one the
   bootcamp panel (one image stretched over the whole section was zoomed into a single dark facet) */
#formats>.v26-stage{--v26-o:.9;--v26-pos:56% 42%;bottom:auto;height:60%;-webkit-mask:linear-gradient(to bottom, transparent, #000 15%, #000 72%, transparent);mask:linear-gradient(to bottom, transparent, #000 15%, #000 72%, transparent)}
#formats>.v26-formats-stage-low{--v26-pos:24% 64%;top:auto;bottom:0;height:58%;-webkit-mask:linear-gradient(to bottom, transparent, #000 26%, #000 84%, transparent);mask:linear-gradient(to bottom, transparent, #000 26%, #000 84%, transparent)}
#formats>.v26-formats-stage-low::before{transform:scaleX(-1)}   /* static (perf 2026-10-16) */
#formats>.v26-stage::after{background:linear-gradient(90deg, rgb(2 11 25 / 50%) 0%, rgb(2 11 25 / 8%) 24%, rgb(2 11 25 / 8%) 76%, rgb(2 11 25 / 46%) 100%)}
#formats>.v26-stage:first-child::after{background:
  linear-gradient(180deg, rgb(2 11 25 / 70%) 0%, rgb(2 11 25 / 12%) 24%, rgb(2 11 25 / 0%) 60%),
  linear-gradient(90deg, rgb(2 11 25 / 50%) 0%, rgb(2 11 25 / 8%) 24%, rgb(2 11 25 / 8%) 76%, rgb(2 11 25 / 46%) 100%)}

.v26-levels{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-rows:auto auto auto;column-gap:clamp(20px, 2vw, 32px);container-type:inline-size}
/* A level card: [9 | head → text]. The national level's limit is a note right under its card (outside the glass, so
   neither card carries an empty footer — the client: «забагато вільного простору»); the card names it with
   aria-describedby. Head and text sit in rows shared by both cards (subgrid), so the two levels read line by line
   and the cards end together. The numeral scales with the card (cqi of the pair: a card is half of it on two
   columns, all of it on one); the pair, not the card, is the size container — containment on the card would stop it
   being a subgrid. The card clips its content (the numeral's glow below never widens the page). */
.v26-level{--gap:clamp(22px, 2.4vw, 44px);grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;grid-template-columns:max-content minmax(0, 1fr);
  grid-template-areas:"num head" "num text";column-gap:var(--gap);row-gap:16px;padding:clamp(24px, 2.3vw, 40px);overflow:clip}
/* the basic level: the same glass with the light turned down — no lit corner, a steel rim without
   the cobalt flare, no cobalt glow under it; the advanced level keeps the full material */
.v26-glass.v26-level--national{background:linear-gradient(170deg, rgb(20 40 78 / 46%) 0%, rgb(8 22 48 / 70%) 46%, rgb(5 15 34 / 86%) 100%);
  box-shadow:inset 0 1px 0 rgb(220 232 250 / 9%), 0 40px 90px -54px rgb(0 0 0 / 90%)}
.v26-level--national::before{opacity:.42;background:linear-gradient(140deg, rgb(160 186 222 / 55%) 0%, rgb(120 150 196 / 18%) 30%, rgb(90 120 170 / 8%) 62%, rgb(170 194 228 / 34%) 100%)}
.v26-level--national::after{opacity:.14}
.v26-level--national .v26-chip{background:rgb(150 176 214 / 12%);color:#c3d1e6}
.v26-level--advanced{background:
    radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 30%), transparent 60%),
    linear-gradient(158deg, rgb(44 98 190 / 38%) 0%, rgb(16 44 94 / 48%) 36%, rgb(6 20 46 / 70%) 100%);
  box-shadow:inset 0 1px 0 rgb(230 242 255 / 24%), 0 44px 100px -48px rgb(30 96 220 / 78%)}
.v26-level-head{grid-area:head;display:grid;gap:10px;align-content:start;justify-items:start}
.v26-level-for{font-size:var(--v26-body)!important}

/* «9» — the accent of the block (client edits 2026-10-20; the 2 weeks of implementation are gone): one numeral per
   card, as tall as the head and the text beside it, behind a hairline that closes the column. Lit glass, not an
   outline: white at the top, cobalt at the foot (the advanced level brighter, the national one in steel); a display
   figure, so it keeps its size at every text scale (the caption beside it follows the scale). The glyph
   box is a full 1em (so the clipped gradient covers the whole digit), tightened by negative margins. Its caption
   is min-content wide: it never widens the column and always stacks «тижнів / навчання». */
.v26-level-weeks{grid-area:num;position:relative;display:grid;align-content:start;justify-items:start;margin:0;padding-right:var(--gap);border-right:1px solid var(--v26-line)}
html.v26 .v26-level-weeks b{display:block;margin:-.13em 0 -.11em -.05em;font-size:clamp(104px, var(--num, 15cqi), 236px);line-height:1;letter-spacing:-.04em;font-weight:400;font-variant-numeric:tabular-nums;
  color:#fff;background:linear-gradient(180deg, #fff 22%, #b7d1ff 58%, #4d8af0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.v26-level--national .v26-level-weeks b{background-image:linear-gradient(180deg, #eef3fa 22%, #b9c8de 60%, #7c93b8 100%)}
.v26-level-weeks>span{display:block;width:min-content;margin-top:14px;font-size:var(--v26-body);line-height:1.35;color:var(--v26-muted)}
/* a soft cobalt light behind the advanced numeral (a painted gradient, no filter: the card moves on reveal) */
.v26-level--advanced .v26-level-weeks::before{content:'';position:absolute;left:-30%;top:-14%;width:min(150%, 300px);height:90%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgb(86 150 255 / 26%), rgb(42 107 224 / 8%) 60%, transparent)}

.v26-level-text{grid-area:text;color:#d7e3f4!important;max-width:52ch}
.v26-level-limit{grid-column:1;grid-row:3;display:flex;align-items:flex-start;gap:12px;max-width:62ch;margin-top:18px!important;padding-inline:clamp(24px, 2.3vw, 40px);font-size:var(--v26-body)}
.v26-level-limit svg{flex:none;width:22px;height:22px;margin-top:.1em;fill:none;stroke:#93abcf;stroke-width:1.8;stroke-linecap:round;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(147 171 207 / 50%)}
.v26-level-limit span{color:var(--v26-faint)}
.v26-nw{white-space:nowrap}
.v26-pair{white-space:nowrap;word-spacing:-.08em}

/* ---- bootcamp formats ---- */
.v26-camps{margin-top:clamp(20px, 2vw, 32px);padding:clamp(28px, 2.8vw, 48px);scroll-margin-top:96px}
.v26-camps-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-bottom:clamp(24px, 2.4vw, 36px)}
.v26-tab-short{display:none}
.v26-camp-panel{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 6fr);gap:clamp(24px, 3.5vw, 64px);align-items:start}
.v26-camp-copy{display:grid;gap:22px;align-content:start}
.v26-cities{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px}
.v26-cities button{min-height:46px;padding:10px 16px;border:0;border-radius:var(--v26-r-sm);background:rgb(8 26 56 / 52%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 16%);color:#cfdcf0;font:inherit;font-size:calc(14px * var(--scale, 1));line-height:1.3;text-align:left;cursor:pointer;transition:background-color 200ms, box-shadow 200ms, color 200ms}
.v26-cities button:hover{color:#fff;box-shadow:inset 0 0 0 1px rgb(190 214 248 / 40%)}
.v26-cities button[aria-pressed="true"]{color:#fff;background:linear-gradient(115deg, rgb(42 107 224 / 40%), rgb(14 47 92 / 60%));box-shadow:inset 0 0 0 1px rgb(150 196 255 / 60%)}
/* the plain list of centres (TZ mobile «Замість карти — список міст») is no longer shown: phones keep the map (2026-10-17) */
.v26-city-list{display:none;list-style:none;margin:0;padding:0;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:20px}
.v26-city-list li{display:flex;align-items:center;min-height:44px;padding-block:8px;border-bottom:1px solid var(--v26-line);font-size:var(--v26-body);line-height:1.35;color:#dbe6f6}

/* the map is sized by JS to the height of the copy beside it (lead → list), so the two columns end
   together; it sits centred in the space beside the list (no slab of glass under either column) */
.v26-map{position:relative;margin:0;aspect-ratio:919 / 622;width:100%;max-width:620px;justify-self:center;align-self:center}
@media (min-width:1280px){.v26-cities button{min-height:50px}}
.v26-map img{width:100%;height:100%;display:block;filter:drop-shadow(0 30px 50px rgb(0 0 0 / 60%))}
.v26-pin-btn{position:absolute;left:var(--x);top:var(--y);width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:none;cursor:pointer}
.v26-pin-btn i{position:absolute;inset:10px;border-radius:50%;background:#cfe2ff;box-shadow:0 0 0 4px rgb(127 178 255 / 18%), 0 0 16px 2px rgb(127 178 255 / 60%);transition:transform 260ms var(--v26-ease), background-color 200ms}
.v26-pin-btn.is-active i{transform:scale(1.5);background:#fff;box-shadow:0 0 0 6px rgb(127 178 255 / 30%), 0 0 26px 6px rgb(127 178 255 / 75%)}
/* the city name is a small V4 plaque beside the active marker (JS picks the side that stays inside
   the map and clear of other markers) */
.v26-map-label{position:absolute;left:0;top:0;margin:0;z-index:3;pointer-events:none;transform:translate3d(var(--lx, 0px), var(--ly, 0px), 0);transition:transform 360ms var(--v26-ease), opacity 200ms}
.v26-map-label:not(.is-placed){opacity:0}
html.v26 .v26-map-label{font-size:calc(14px * var(--scale, 1))}

/* virtual bootcamp: the TZ sentence and the same map of Ukraine as the offline tab, in its «everywhere» state —
   no centres, no city plaque: the whole country lit (CR4-SF-02; nothing repeats the level cards above). The map sits
   exactly where the offline map is, so a tab switch reads as one map changing state; the lit layer comes up after the
   panel has faded in. The lead is a caption on the panel's left axis, centred on the map. */
#camp-virtual{align-items:center}
/* the panel's one statement, at the scale's h3 step and the lead's colour: one block of 3–4 lines on the map's centre */
@media (min-width:601px){#camp-virtual .v26-lead{font-size:var(--v26-h3);line-height:1.4;max-width:23ch;text-wrap:balance}}
@media (min-width:601px) and (max-width:1000px){#camp-virtual .v26-lead{max-width:34ch}}
.v26-map--online{pointer-events:none}
.v26-map--online img{position:absolute;inset:0}
.v26-map--online .v26-map-lit{filter:drop-shadow(0 0 22px rgb(86 146 255 / 42%)) drop-shadow(0 30px 50px rgb(0 0 0 / 55%));opacity:0;transform:scale(.985);transition:opacity 700ms var(--v26-ease), transform 900ms var(--v26-ease)}
#camp-virtual.is-active .v26-map-lit{opacity:1;transform:none;transition-delay:220ms}
html.quiet .v26-map--online .v26-map-lit{transition:none}
@media (prefers-reduced-motion:reduce){.v26-map--online .v26-map-lit{transition:none}}

.v26-accent-strip{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:clamp(24px, 2.4vw, 36px);padding:20px 24px;border-radius:var(--v26-r-md);text-decoration:none;color:#eef4fd;
  background:linear-gradient(110deg, rgb(42 107 224 / 44%), rgb(18 56 118 / 40%) 55%, rgb(8 26 56 / 40%));font-size:var(--v26-lead);line-height:1.45;transition:background-color 200ms}
.v26-accent-strip::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--v26-edge);opacity:.8;transition:opacity 200ms;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.v26-accent-strip:hover::before{opacity:1}
/* when the sentence wraps (1024–1366, tablets), its two lines are balanced: no lone «підтримку» */
.v26-accent-strip>[data-copy-line]{text-wrap:balance}
.v26-accent-go{display:inline-block;max-width:100%;font-size:calc(14px * var(--scale, 1));color:#d7e3f4}
.v26-accent-go svg{display:inline-block;vertical-align:-.25em;width:18px;height:18px;margin-left:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--v26-ease)}
.v26-accent-strip:hover .v26-accent-go svg{transform:translateX(3px)}

/* wide screens: the panel's type follows the larger surface (B-16) */
@media (min-width:1600px){
  .v26-cities button{min-height:58px;font-size:calc(16px * var(--scale, 1))}
  .v26-camp-panel{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr)}
  .v26-map{max-width:760px}
  .v26-cities{gap:10px}
  html.v26 .v26-map-label{font-size:calc(15px * var(--scale, 1))}
}
/* tablet: the map comes first, so a tapped city lights up in view (B-15) */
@media (max-width:1000px){
  .v26-levels{grid-template-columns:1fr;grid-template-rows:none;row-gap:20px}
  .v26-level{--num:28cqi;grid-row:auto;grid-template-rows:none}
  .v26-level-limit{grid-row:auto;margin-top:-2px!important}
  /* one column: lead → map → list, so a tapped city lights up in view */
  .v26-camp-panel{grid-template-columns:1fr;row-gap:22px}
  .v26-camp-copy{display:contents}
  .v26-camp-copy>.v26-lead{order:-2}
  .v26-map{order:-1;justify-self:center}
}
/* phones keep the map (feedback 2026-10-17: «повернути карту» — over the TZ's plain list): lead → map at the panel's
   full width → the centres as compact pills; a tap lights the centre on the map, as on desktop */
@media (max-width:600px){
  .v26-camps-head .v26-tabs{width:100%}
  .v26-map{width:calc(100% + 16px);max-width:none;margin-inline:-8px}
  .v26-cities{display:flex;flex-wrap:wrap;gap:8px}
  .v26-cities button{min-height:44px;padding:8px 14px;border-radius:999px;font-size:calc(14px * var(--scale, 1))}   /* 44 px touch target (G-09) */
  html.v26 .v26-map-label{max-width:calc(100% - 8px)}
}
@media (max-width:440px){
  .v26-camps .v26-tab-full{display:none}
  .v26-camps .v26-tab-short{display:inline}
}
@media (max-width:420px){.v26-cities,.v26-city-list{grid-template-columns:1fr}}
/* Phones: the numeral stands beside the head (chip, title, audience); the text takes the card's full width below it,
   so it reads in full lines. Enlarged text on phones: the numeral and its caption become one row under the head. */
@media (max-width:600px){
  .v26-level{--gap:18px;grid-template-areas:"num head" "text text";row-gap:20px}
  .v26-level-limit{padding-inline:4px}
  html.v26 .v26-level-weeks b{font-size:clamp(84px, 27cqi, 124px)}
  .v26-level-weeks>span{margin-top:10px;font-size:var(--v26-caption)}
  html.enlarged .v26-level{grid-template-columns:minmax(0, 1fr);grid-template-areas:"head" "num" "text"}
  html.enlarged .v26-level-weeks{grid-auto-flow:column;align-items:end;justify-content:start;column-gap:16px;padding:0 0 18px;border-right:0;border-bottom:1px solid var(--v26-line)}
  html.enlarged .v26-level-weeks>span{margin:0 0 .4em}
}
/* enlarged text: two levels side by side while they fit (≥1280), otherwise one column of a readable width */
@media (max-width:1279px){
  html.enlarged .v26-levels{grid-template-columns:minmax(0, 880px);grid-template-rows:none;row-gap:20px}
  html.enlarged .v26-level{grid-row:auto;grid-template-rows:none}
  html.enlarged .v26-level-limit{grid-row:auto;margin-top:-2px!important}
}
/* enlarged text on phones: the two tabs stack, the indicator moves vertically (G-07) */
@media (max-width:600px){
  html.enlarged .v26-camps .v26-tabs{grid-template-columns:1fr;width:100%}
  html.enlarged .v26-camps .v26-tabs::before{right:5px;width:auto;bottom:auto;height:calc((100% - 10px) / 2);transform:translateY(calc(var(--i) * 100%))}
  html.enlarged .v26-cities{grid-template-columns:1fr}
}
/* display headings never hyphenate (SF-C8) */
#formats .v26-h2,#formats .v26-h3{hyphens:manual}
/* the centres: ten equal cells, as in the registration form (Луцьк included, 2026-10-20) — five full rows of two, no
   orphan cell; «Івано-Франківськ» never breaks at its hyphen (CR-SF3-05). .v26-city-wide is kept for a long name. */
.v26-cities .v26-city-wide,.v26-city-list .v26-city-wide{grid-column:1 / -1}
/* The bootcamp tabs keep one height (CR-SF3-04): from 1001 px both panels share the swap cell, so a tab switch never
   moves the page below; the virtual panel takes that height with its map. */
@media (min-width:1001px){
  html:not(.enlarged) #camps .v26-swap>:not(.is-active){position:relative;inset:auto}
}
/* enlarged text below 1280: the panels take the tablet order (lead → map → centres) at full width, so the centre
   names keep one line; with enlarged text the two tabs keep their own heights */
@media (min-width:1001px) and (max-width:1279px){
  html.enlarged .v26-camp-panel{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:22px}
  html.enlarged .v26-camp-copy{display:contents}
  html.enlarged #camps .v26-camp-copy>*{grid-column:auto;grid-row:auto}
  html.enlarged .v26-camp-copy>.v26-lead{order:-2}
  html.enlarged #camps .v26-map{order:-1;grid-column:auto;grid-row:auto}
  html.enlarged .v26-map{justify-self:center}
}
/* Feedback 2026-10-15: the map is large again (as in the earlier iteration) and every centre is an equal cell —
   KNU is not stretched across the list. The list keeps two columns; long names wrap inside their cell. */
@media (min-width:1001px){
  .v26-camp-panel{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);align-items:center}
  .v26-map{max-width:none;width:100%;justify-self:stretch}
  .v26-cities button{min-height:46px;padding:10px 14px;line-height:1.25;text-wrap:balance}
}
@media (min-width:1600px){
  .v26-camp-panel{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr)}
  .v26-map{max-width:none}
}
/* A centre chip is never narrower than «Івано-Франківськ» (≈9.9 chip sizes, never broken at its hyphen, CR-SF3-05)
   plus its padding: where two such chips do not fit the copy column (1001–1101 px, and 125–150% text on laptops) the
   list takes one column, and fitMap grows the map with the taller copy; never more than two columns (verify5 V5A-04) */
@media (min-width:1001px){.v26-cities{grid-template-columns:repeat(auto-fit, minmax(min(100%, max(calc(14px * var(--scale, 1) * 10.1 + 28px), calc(50% - 4px))), 1fr))}}
/* 1001–1179 px with normal text: the copy column takes 5/11, so the approved two-column list fits (feedback
   2026-10-15: «the list keeps two columns»); the map stays the large picture of the panel */
@media (min-width:1001px) and (max-width:1179px){html:not(.enlarged) .v26-camp-panel{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr)}}
@media (min-width:1600px){.v26-cities{grid-template-columns:repeat(auto-fit, minmax(min(100%, max(calc(16px * var(--scale, 1) * 10.1 + 28px), calc(50% - 5px))), 1fr))}}
/* the level chips stay one line (360: «Конкурсний відбір» wrapped, E1 review) */
#formats .v26-chip{white-space:nowrap}
/* ---- edits 2.0: levels without «9»; each card closes with its note in a shared row ---- */
.v26-levels{grid-template-rows:auto auto auto}
html.v26 .v26-level{grid-row:1 / span 3;grid-template-columns:minmax(0, 1fr);grid-template-areas:"head" "text" "note";row-gap:14px}
.v26-level-note{grid-area:note;align-self:end;display:flex;align-items:flex-start;gap:12px;margin:8px 0 0!important;padding-top:16px;border-top:1px solid var(--v26-line);font-size:var(--v26-body)}
.v26-level-note svg{flex:none;width:22px;height:22px;margin-top:.1em;fill:none;stroke:#cfe2ff;stroke-width:1.8;stroke-linecap:round;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(150 196 255 / 55%)}
.v26-level-note span{color:#d7e3f4}
.v26-level-note--limit svg{stroke:#93abcf;box-shadow:inset 0 0 0 1px rgb(147 171 207 / 50%)}
.v26-level-note--limit span{color:var(--v26-faint)}
html.v26 .v26-level-for{color:#cfdcf0}
@media (max-width:1000px){html.v26 .v26-level{grid-row:auto;grid-template-rows:none}}
@media (max-width:1279px){html.enlarged .v26-level{grid-row:auto;grid-template-rows:none}}
/* ---- edits 2.0: the bootcamps as two compact cards (offline: pills + map; virtual: the 3D visual) ---- */
.v26-camps{margin-top:clamp(40px, 4vw, 64px);padding:0}
html.v26 .v26-camps-title{margin:0 0 clamp(18px, 1.8vw, 26px)}
.v26-camp-cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(16px, 1.6vw, 28px);align-items:stretch}
.v26-camp{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(24px, 2.2vw, 36px)}
html.v26 .v26-camp-name{margin:0;font-size:var(--v26-h3);font-weight:400;line-height:1.25;color:#fff}
html.v26 .v26-camp-text{margin:0;max-width:44ch;font-size:var(--v26-body);line-height:1.55;color:#d7e3f4}
.v26-camp .v26-cities{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.v26-camp .v26-cities button{min-height:36px;padding:6px 12px;border-radius:999px;font-size:calc(13px * var(--scale, 1));line-height:1.3;text-wrap:nowrap}
@media (pointer:coarse){.v26-camp .v26-cities button{min-height:44px}}
.v26-camp .v26-map{order:0;width:100%;max-width:520px;margin:auto auto 0;align-self:center;justify-self:auto}
.v26-camp-visual{position:relative;flex:1 1 auto;min-height:220px;margin:6px 0 0;border-radius:calc(var(--v26-r-md) - 6px);overflow:hidden;background:#030b1c}
.v26-camp-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){
  .v26-camp-cards{grid-template-columns:minmax(0, 1fr)}
  .v26-camp .v26-map{max-width:560px}
  .v26-camp-visual{flex:none;min-height:0;aspect-ratio:16 / 9}
}
@media (max-width:1279px){html.enlarged .v26-camp-cards{grid-template-columns:minmax(0, 1fr)}html.enlarged .v26-camp-visual{flex:none;min-height:0;aspect-ratio:16 / 9}}
@media (max-width:600px){.v26-camp{padding:22px 18px}.v26-camp .v26-map{width:calc(100% + 12px);margin-inline:-6px}}
/* @end formats */

/* @section funding */
/* 6. Funding (client edits 2026-10-20). The podium is the section: one composition across the container, four V26
   glass steps rising left to right — pawn «по 200 000 грн · для 6 початківиць» → knight «по 350 000 грн · для
   7 діючих підприємиць» → rook «550 000 грн · головна відзнака — «Початківиця»» → queen «1 000 000 грн · головна
   відзнака — «Діюча підприємиця»» — and «Правила участі» centred under it. The copy column is gone (title, lead, the
   fund total — it lives in About — and the condition); the H2 stays for assistive technology and the anchor.
   Podium: V26 glass steps (rim and grain only: no dot field, no chess-cell, checker or tile pattern). Each step is a
   solid seen slightly from above: a shallow lit top face (the lid) over the front face (C-09 / R04). A step is as
   tall as its content plus one rise per rank; the sum sits in the middle of the face, centred under its piece (a
   taller step is never an empty slab under its figure), and rises with the hierarchy; who it is for sits on one plinth band shared by all four steps (one seam, one row).
   Pawn, knight, rook and queen (one sapphire material) stand on the lids inside the same rising group, so each is
   lifted by its step; every piece meets its lid with the same contact: a dark core and a soft pool of light. */
/* the floor glow and the podium pool stay inside the section: nothing widens the page */
.v26-funding{overflow-x:clip}
/* the room: light pooled under the taller steps, the sides fall off evenly (no copy column to keep dark any more) */
.v26-funding .v26-stage--architecture{--v26-img:radial-gradient(58% 54% at 60% 70%, rgb(52 118 232 / 32%), transparent 70%), radial-gradient(36% 40% at 16% 34%, rgb(30 80 190 / 12%), transparent 70%)}
.v26-funding .v26-stage::after{background:linear-gradient(90deg, rgb(2 11 25 / 72%) 0%, rgb(2 11 25 / 20%) 26%, rgb(2 11 25 / 12%) 70%, rgb(2 11 25 / 56%) 100%)}
.v26-funding-layout{display:grid;justify-items:center;position:relative}
/* the title is back (user 2026-10-20): in the flow above the podium on tablets / phones / enlarged text; on wide
   screens in the free corner above the pawn and the knight, so the podium keeps its place */
html.v26 .v26-funding-title{justify-self:start;margin:0 0 clamp(28px, 4vw, 64px)}   /* (html.v26: the shared h2 margin:0 used to win, 2026-10-21) */
@media (min-width:1181px){html:not(.enlarged) .v26-funding-title{position:absolute;left:0;top:0;z-index:3;margin:0;max-width:min(62%, 22ch)}}
.v26-funding .v26-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v26-funding-rules{margin-top:clamp(36px, 3.6vw, 60px)}
/* the Program scene that follows is pinned: its H2 sits on the pin line, so Funding hands over with a shorter
   bottom padding — floor → Program title ≈ one flow junction (two section paddings), not one plus the pin line */
html.v26-pinned .v26-funding{padding-bottom:max(40px, calc(2 * var(--v26-section-pad) - var(--v26-pin-top)))}
/* that scene starts under Funding's last pixels (its negative margin): Funding is drawn above it, so «Правила участі»
   at the foot of the section takes the clicks (the scene's top band is transparent; same fix as Audience → Season) */
html.v26-pinned .v26-funding{z-index:1}

/* --piece-h = the queen; the others follow the hierarchy (pawn .56 < knight .65 < rook .74). It follows the window's
   height too, so the whole podium and its action fit one screen on short laptops. */
.v26-podium{
  --step-gap:clamp(10px, 1.1vw, 18px);
  --piece-h:clamp(200px, min(23vw, 38vh), 440px);
  --lid:clamp(10px, .9vw, 16px);--rise:clamp(18px, 2vw, 36px);
  --who:var(--v26-body);--base-h:calc(var(--who) * 1.35 * 2 + 24px);
  position:relative;width:100%;list-style:none;margin:0;padding:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:var(--step-gap);align-items:end;
}
/* the floor the steps grow from: a lit glass line and a soft reflection pool beneath it */
.v26-podium::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgb(150 196 255 / 46%) 12%, rgb(233 238 249 / 74%) 68%, rgb(150 196 255 / 40%) 92%, transparent)}
.v26-podium::after{content:'';position:absolute;left:-4%;right:-4%;bottom:-44px;height:88px;pointer-events:none;z-index:-1;
  background:radial-gradient(54% 50% at 62% 42%, rgb(90 150 255 / 30%), rgb(42 107 224 / 8%) 56%, transparent 76%)}
/* each tier is clipped at the floor line, so a step grows out of the floor instead of sliding in */
.v26-tier{--rank:0;position:relative;min-width:0;clip-path:inset(-200% -60% 0 -60%)}
.v26-tier[data-tier="2"]{--rank:1}
.v26-tier[data-tier="3"]{--rank:2}
.v26-tier[data-tier="4"]{--rank:3}
/* «Соціальний бізнес» (client 2026-11-03): ascending order — right after «Початківиця», as high as that other 550 000 award, before the 1 000 000 top */
.v26-tier[data-tier="5"]{--rank:2}
.v26-tier-rise{display:flex;flex-direction:column}
/* a piece stands in the middle of its step's lid (its base half a lid deep into it) */
.v26-tier-piece{position:relative;z-index:2;height:var(--piece-h);margin-bottom:calc(var(--lid) * -.5);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.v26-tier-piece--slot{height:0}
.v26-queen-stage--podium{position:relative;width:calc(var(--piece-h) * .5415);height:100%;flex:none}
/* contact (every piece): a dark core where the base meets the lid and a soft pool of light around it on the lid;
   both follow the piece's footprint (--foot = drawn width of its base). On phones each piece stands the same way at
   the right end of its own plate. */
.v26-tier-piece{--foot:calc(var(--piece-h) * .5)}
.v26-tier-piece::after{content:'';position:absolute;left:50%;bottom:calc(var(--lid) * -.5 - 3px);width:calc(var(--foot) * 1.45);height:calc(var(--lid) + 6px);transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgb(0 5 16 / 92%) 0%, rgb(0 5 16 / 70%) 46%, rgb(0 5 16 / 22%) 66%, transparent 80%)}
.v26-tier-piece::before{content:'';position:absolute;left:50%;bottom:calc(var(--lid) * -.5);width:calc(var(--foot) * 2.6);height:calc(var(--lid) * 1.6 + 4px);transform:translateX(-50%);border-radius:50%;z-index:-2;
  background:radial-gradient(50% 50% at 50% 50%, rgb(186 220 255 / 62%), rgb(110 165 252 / 26%) 46%, transparent 72%)}
/* Pawn, knight and rook in the queen's material (Higgsfield; knight 2026-10-20). Their height follows the hierarchy
   of the podium: pawn .56, knight .65, rook .74 of the queen (--pa = the render's width / height). */
.v26-tier-piece.v26-tier-piece--figure{height:calc(var(--piece-h) * var(--pf, .6));--foot:calc(var(--piece-h) * var(--pf, .6) * var(--pa, .55) * .9)}
.v26-tier-piece--figure[data-piece="pawn"]{--pf:.56;--pa:.5516}
.v26-tier-piece--figure[data-piece="knight"]{--pf:.65;--pa:.4969}
.v26-tier-piece--figure[data-piece="rook"]{--pf:.74;--pa:.5953}
/* the queen: the sharp crystal cut-out of «Поточний сезон» (E1 feedback: the turning 300×554 frames were soft) */
.v26-tier-piece--figure[data-piece="queen"]{--pf:1;--pa:.4618}
.v26-tier-piece--figure img{display:block;height:100%;width:auto;max-width:none}

/* the step: lid (top face) + front face (sum) + plinth band (who). Height = content + one rise per rank. */
html.v26 .v26-tier-block.v26-glass{
  display:grid;grid-template-rows:auto var(--base-h);container-type:inline-size;
  border-radius:var(--v26-r-sm) var(--v26-r-sm) 0 0;overflow:hidden;
  background:
    radial-gradient(80% 46% at 0% 0%, rgb(110 168 255 / 20%), transparent 64%),
    linear-gradient(180deg, rgb(56 112 210 / 30%) 0%, rgb(20 56 120 / 40%) 40%, rgb(6 22 50 / 76%) 100%);
}
html.v26 .v26-tier--top .v26-tier-block.v26-glass{
  background:
    radial-gradient(80% 50% at 0% 0%, rgb(120 176 255 / 26%), transparent 64%),
    linear-gradient(180deg, rgb(80 144 250 / 44%) 0%, rgb(36 96 210 / 40%) 36%, rgb(8 30 72 / 80%) 100%);
  box-shadow:inset 0 1px 0 rgb(245 250 255 / 60%), 0 -30px 90px -36px rgb(80 150 255 / 55%), 0 40px 90px -54px rgb(0 0 0 / 90%);
}
/* the lid: the step's top face seen from slightly above — lighter than the front, brightest at its front edge,
   where the light catches the corner; the pieces' contact sits on it. As a step lands, one glint runs along it. */
.v26-tier-lid{position:absolute;inset:0 0 auto;height:var(--lid);z-index:1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg, rgb(150 196 255 / 26%), rgb(176 212 255 / 34%) 78%, rgb(226 238 255 / 0%) 100%);
  box-shadow:inset 0 -1px 0 rgb(226 240 255 / 62%), 0 1px 0 rgb(0 8 22 / 35%), 0 6px 14px -6px rgb(0 8 22 / 55%)}
html.v26 .v26-tier--top .v26-tier-lid{background:linear-gradient(180deg, rgb(170 210 255 / 34%), rgb(200 226 255 / 48%) 78%, rgb(236 244 255 / 0%) 100%);
  box-shadow:inset 0 -1px 0 rgb(240 247 255 / 80%), 0 1px 0 rgb(0 8 22 / 30%), 0 6px 14px -6px rgb(0 8 22 / 50%)}
/* «Соціальний бізнес» is a lighter glass than the «Початківиця» step of the same height: brightness climbs towards the 1 000 000 top */
html.v26 .v26-tier[data-tier="5"] .v26-tier-block.v26-glass{background:
    radial-gradient(80% 46% at 0% 0%, rgb(150 198 255 / 32%), transparent 64%),
    linear-gradient(180deg, rgb(112 166 246 / 50%) 0%, rgb(58 110 198 / 46%) 40%, rgb(14 40 86 / 70%) 100%)}
html.v26 .v26-tier[data-tier="5"] .v26-tier-lid{background:linear-gradient(180deg, rgb(166 206 255 / 30%), rgb(192 222 255 / 42%) 78%, rgb(232 242 255 / 0%) 100%)}
.v26-tier-lid::after{content:'';position:absolute;inset:0;opacity:0;transform:translate3d(-100%, 0, 0);
  background:linear-gradient(90deg, transparent 0%, rgb(236 245 255 / 0%) 30%, rgb(236 245 255 / 85%) 50%, rgb(236 245 255 / 0%) 70%, transparent 100%)}
/* material: clean glass, grain only (feedback 2026-10-14: fewer dots, so no halftone on the steps) */
html.v26 .v26-tier-block.v26-glass::after{background:url('assets/v7-matte-grain.png') center/180px;opacity:.28;-webkit-mask:none;mask:none}
.v26-tier-face{--fx:clamp(12px, 1.4vw, 26px);grid-row:1;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--lid) + clamp(12px, 1vw, 18px) + var(--rank) * var(--rise) / 2) var(--fx) calc(clamp(12px, 1vw, 18px) + var(--rank) * var(--rise) / 2);min-height:0}
.v26-tier-base{grid-row:2;position:relative;z-index:3;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 clamp(10px, 1.2vw, 20px);text-align:center;
  background:linear-gradient(180deg, rgb(4 16 38 / 30%), rgb(2 10 26 / 58%));box-shadow:inset 0 1px 0 rgb(170 206 255 / 24%)}
html.v26 .v26-tier-sum{margin:0;font-size:min(var(--v26-num-m), 13cqi);line-height:1.08;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}   /* «по 200 000 грн» is glued by no-break spaces */
html.v26 .v26-tier-sum b{font-size:inherit;letter-spacing:inherit}
html.v26 .v26-tier-sum span{font-size:var(--v26-body);letter-spacing:0;color:var(--v26-muted)}
html.v26 .v26-tier-sum span:first-child{margin-right:.1em}
html.v26 .v26-tier:is([data-tier="3"], [data-tier="5"]) .v26-tier-sum{font-size:min(calc((var(--v26-num-m) + var(--v26-num-l)) / 2), 13cqi)}
html.v26 .v26-tier--top .v26-tier-sum{font-size:min(var(--v26-num-l), 14cqi)}
html.v26 .v26-tier-who{margin:0;font-size:var(--who);line-height:1.35;color:#d7e3f4}
html.v26 .v26-tier--top .v26-tier-who,html.v26 .v26-tier:is([data-tier="3"], [data-tier="5"]) .v26-tier-who{color:#fff}
/* five steps (client 2026-11-03): «грн» sits under every sum, so «1 000 000 грн» clears the narrower steps' edges;
   below 1024 px the steps turn into plates, so «Діюча підприємиця» is never squeezed into a 130 px column */
html.v26 .v26-tier-sum span:last-child{display:block;margin-top:2px}

/* Choreography (motion only): one tier after another, smallest to largest (client: «з'являються по черзі, від
   найменшої до найбільшої фігури»). Each tier: its piece appears on the floor line (fades up and settles), then the
   step grows out of the floor (.is-up) carrying its lid, the piece and its content — the sum fades in during the
   first third of the rise and counts from 0, the plinth line slides in as the step lands (N-U6: a step is never a
   blank slab on screen), and a glint runs along the lid (.is-landed). --bh = the step's own height (v26.js), so it
   starts exactly under the floor line. */
html.v26-motion .v26-tier-rise{transform:translate3d(0, calc(var(--bh, 240px) + 2px), 0);transition:transform 860ms var(--v26-ease)}
html.v26-motion .v26-tier.is-up .v26-tier-rise{transform:none}
html.v26-motion .v26-tier-piece{opacity:0;transform:translate3d(0, 16px, 0) scale(.96);transform-origin:50% 100%;transition:opacity 480ms var(--v26-ease), transform 680ms var(--v26-ease)}
html.v26-motion .v26-tier.is-piece .v26-tier-piece{opacity:1;transform:none}
html.v26-motion .v26-tier-face{opacity:0;transition:opacity 280ms var(--v26-ease)}
html.v26-motion .v26-tier-who{opacity:0;transform:translate3d(0, 8px, 0);transition:opacity 380ms var(--v26-ease) 320ms, transform 560ms var(--v26-ease) 320ms}
html.v26-motion .v26-tier.is-shown .v26-tier-face,html.v26-motion .v26-tier.is-shown .v26-tier-who{opacity:1;transform:none}
html.v26-motion .v26-tier.is-landed .v26-tier-lid::after{animation:v26-lid-glint 1100ms var(--v26-ease) both}
/* a lid never waits alone on the floor before its piece (E1 review: four slivers on an empty screen) */
html.v26-motion .v26-tier-lid{transition:opacity 360ms var(--v26-ease)}
html.v26-motion .v26-tier:not(.is-piece) .v26-tier-lid{opacity:0}
@keyframes v26-lid-glint{0%{opacity:0;transform:translate3d(-100%, 0, 0)}18%{opacity:1}100%{opacity:0;transform:translate3d(100%, 0, 0)}}

/* Tablets: the same podium, tighter — the pieces a little larger for the narrow steps, the line under each sum at the
   caption size, and «грн» under every sum (never inline on one step and wrapped on the next) */
@media (max-width:1180px){
  .v26-podium{--who:var(--v26-caption);--rise:clamp(14px, 1.8vw, 22px);--piece-h:clamp(200px, min(30vw, 34vh), 300px)}
  html.v26 .v26-tier-sum span{font-size:var(--v26-caption)}
}
/* Phones and small tablets (≤ 760 px), and enlarged text up to 1279 px: four stepped glass plates whose widths follow
   the hierarchy. Each piece stands on a small lit shelf at the right end of its own plate, and its height follows
   the hierarchy too (pawn 72 < knight 84 < rook 95 < queen 128 px). Each plate: sum, then who it is for. The two
   blocks below are the same rules: once for every phone, once for enlarged text on tablets and small laptops. */
@media (max-width:1023px){
  .v26-podium{grid-template-columns:minmax(0, 1fr);gap:10px;--base-h:auto;--piece-h:128px;--lid:0px;--who:var(--v26-body)}
  .v26-podium::before,.v26-podium::after{display:none}
  .v26-tier{clip-path:none}
  .v26-tier[data-tier="1"]{width:80%}
  .v26-tier[data-tier="2"]{width:87%}
  .v26-tier:is([data-tier="3"], [data-tier="5"]){width:94%}
  .v26-tier-rise{display:block;position:relative}
  .v26-tier-lid{display:none}
  html.v26 .v26-tier-block.v26-glass{height:auto;min-height:0;grid-template-rows:auto auto;align-content:center;border-radius:var(--v26-r-md)}
  .v26-tier-face{align-items:flex-start;text-align:left;padding:18px 18px 0}
  .v26-tier-base{justify-content:flex-start;text-align:left;background:none;box-shadow:none;padding:8px 18px 18px}
  html.v26 .v26-tier-sum{font-size:min(var(--v26-num-m), 6.6vw)}   /* «по 200 000 грн» keeps one line down to 360 px */
  @media (max-width:380px){html.v26 .v26-tier-sum{font-size:min(var(--v26-num-m), 6.1vw)}}   /* clear of the aligned pawn / knight (2026-10-21) */
  html.v26 .v26-tier--top .v26-tier-sum{font-size:min(var(--v26-num-l), 8.6vw)}
  html.v26 .v26-tier:is([data-tier="3"], [data-tier="5"]) .v26-tier-sum{font-size:min(calc((var(--v26-num-m) + var(--v26-num-l)) / 2), 7.6vw)}
  html.v26 .v26-tier-sum span{font-size:var(--v26-body)}
  html.v26 .v26-tier-sum span:last-child{display:inline;margin-top:0}
  html.v26 .v26-tier--top .v26-tier-block.v26-glass{min-height:168px;background:
    radial-gradient(40% 60% at 88% 78%, rgb(150 200 255 / 30%), transparent 72%),
    linear-gradient(170deg, rgb(80 144 250 / 46%) 0%, rgb(36 96 210 / 40%) 40%, rgb(8 30 72 / 82%) 100%)}
  /* one 56 px box per piece, the piece centred in it: every centre the same 46 px from its plate's edge (2026-10-21) */
  .v26-tier-piece{position:absolute;right:18px;bottom:18px;z-index:4;margin:0;width:56px;justify-content:center}
  .v26-tier-piece::after{bottom:-6px;width:var(--foot);height:12px}
  .v26-tier-piece::before{bottom:-1px;width:calc(var(--foot) * 1.9);height:3px;z-index:1;background:radial-gradient(50% 50% at 50% 50%, rgb(225 238 255 / 90%), rgb(120 175 255 / 34%) 46%, transparent 74%)}
  .v26-tier--top .v26-tier-piece{height:128px;width:56px}
  /* every plate holds its piece with 18 px above and below (pawn 72, knight 84, rook 95 px; 2026-10-21) */
  html.v26 .v26-tier[data-tier="1"] .v26-tier-block.v26-glass{min-height:108px}
  html.v26 .v26-tier[data-tier="2"] .v26-tier-block.v26-glass{min-height:120px}
  html.v26 .v26-tier:is([data-tier="3"], [data-tier="5"]) .v26-tier-block.v26-glass{min-height:131px}
  .v26-tier[data-tier="1"] :is(.v26-tier-face, .v26-tier-base){padding-right:72px}
  .v26-tier[data-tier="2"] :is(.v26-tier-face, .v26-tier-base){padding-right:76px}
  .v26-tier[data-tier="3"] :is(.v26-tier-face, .v26-tier-base){padding-right:92px}
  .v26-tier--top :is(.v26-tier-face, .v26-tier-base){padding-right:100px}
  .v26-tier--top .v26-tier-base{padding-bottom:24px}
  .v26-queen-stage--podium{width:100%}
  html.v26-motion .v26-tier-rise{transform:translate3d(-24px, 0, 0);opacity:0;transition:transform 640ms var(--v26-ease), opacity 480ms var(--v26-ease)}
  html.v26-motion .v26-tier.is-up .v26-tier-rise{transform:none;opacity:1}
  html.v26-motion .v26-tier-piece{transition-delay:180ms}
}
@media (min-width:761px) and (max-width:1023px){.v26-podium{max-width:640px}}   /* portrait tablets: plates as wide as with enlarged text */
@media (min-width:761px) and (max-width:1279px){
  html.enlarged .v26-podium{grid-template-columns:minmax(0, 1fr);gap:10px;--base-h:auto;--piece-h:128px;--lid:0px;--who:var(--v26-body);max-width:640px}
  html.enlarged .v26-podium::before,html.enlarged .v26-podium::after{display:none}
  html.enlarged .v26-tier{clip-path:none}
  html.enlarged .v26-tier[data-tier="1"]{width:80%}
  html.enlarged .v26-tier[data-tier="2"]{width:87%}
  html.enlarged .v26-tier:is([data-tier="3"], [data-tier="5"]){width:94%}
  html.enlarged .v26-tier-rise{display:block;position:relative}
  html.enlarged .v26-tier-lid{display:none}
  html.v26.enlarged .v26-tier-block.v26-glass{height:auto;min-height:0;grid-template-rows:auto auto;align-content:center;border-radius:var(--v26-r-md)}
  html.enlarged .v26-tier-face{align-items:flex-start;text-align:left;padding:18px 18px 0}
  html.enlarged .v26-tier-base{justify-content:flex-start;text-align:left;background:none;box-shadow:none;padding:8px 18px 18px}
  html.v26.enlarged .v26-tier-sum{font-size:var(--v26-num-m)}
  html.v26.enlarged .v26-tier--top .v26-tier-sum{font-size:var(--v26-num-l)}
  html.v26.enlarged .v26-tier-sum span{font-size:var(--v26-body)}
  html.v26.enlarged .v26-tier--top .v26-tier-block.v26-glass{min-height:168px;background:
    radial-gradient(40% 60% at 88% 78%, rgb(150 200 255 / 30%), transparent 72%),
    linear-gradient(170deg, rgb(80 144 250 / 46%) 0%, rgb(36 96 210 / 40%) 40%, rgb(8 30 72 / 82%) 100%)}
  html.enlarged .v26-tier-piece{position:absolute;right:18px;bottom:18px;z-index:4;margin:0;width:56px;justify-content:center}
  html.enlarged .v26-tier-piece::after{bottom:-6px;width:var(--foot);height:12px}
  html.enlarged .v26-tier-piece::before{bottom:-1px;width:calc(var(--foot) * 1.9);height:3px;z-index:1;background:radial-gradient(50% 50% at 50% 50%, rgb(225 238 255 / 90%), rgb(120 175 255 / 34%) 46%, transparent 74%)}
  html.enlarged .v26-tier--top .v26-tier-piece{height:128px;width:56px}
  html.v26.enlarged .v26-tier[data-tier="1"] .v26-tier-block.v26-glass{min-height:108px}
  html.v26.enlarged .v26-tier[data-tier="2"] .v26-tier-block.v26-glass{min-height:120px}
  html.v26.enlarged .v26-tier:is([data-tier="3"], [data-tier="5"]) .v26-tier-block.v26-glass{min-height:131px}
  html.enlarged .v26-tier[data-tier="1"] :is(.v26-tier-face, .v26-tier-base){padding-right:72px}
  html.enlarged .v26-tier[data-tier="2"] :is(.v26-tier-face, .v26-tier-base){padding-right:76px}
  html.enlarged .v26-tier[data-tier="3"] :is(.v26-tier-face, .v26-tier-base){padding-right:92px}
  html.enlarged .v26-tier--top :is(.v26-tier-face, .v26-tier-base){padding-right:100px}
  html.enlarged .v26-tier--top .v26-tier-base{padding-bottom:24px}
  html.enlarged .v26-queen-stage--podium{width:100%}
  html.v26-motion.enlarged .v26-tier-rise{transform:translate3d(-24px, 0, 0);opacity:0;transition:transform 640ms var(--v26-ease), opacity 480ms var(--v26-ease)}
  html.v26-motion.enlarged .v26-tier.is-up .v26-tier-rise{transform:none;opacity:1}
  html.v26-motion.enlarged .v26-tier-piece{transition-delay:180ms}
}
/* enlarged text on wide screens: the four steps stay; the plinth band takes three lines and long names may wrap.
   With enlarged text «грн» always sits under the sum, on every step and plate alike. */
@media (min-width:1280px){
  html.enlarged .v26-podium{--base-h:calc(var(--who) * 1.35 * 3 + 24px)}
}
html.enlarged .v26-tier-who .v26-nw{white-space:normal}
html.v26.enlarged .v26-tier-sum span:last-child{display:block;margin-top:2px}
@media (max-width:760px){
  /* enlarged text on phones: the figures need the whole plate width; the bottom plate stays dominant by size */
  html.enlarged .v26-tier-piece{display:none}
  html.enlarged .v26-tier :is(.v26-tier-face, .v26-tier-base){padding-right:18px}
  html.v26.enlarged .v26-tier--top .v26-tier-sum{font-size:min(var(--v26-num-l), 12.5vw)}
  html.v26.enlarged .v26-tier-sum{font-size:min(var(--v26-num-m), 10vw);white-space:normal}
}
/* edits 2.0: one queen travels over the steps (pawn, knight and rook are gone). The wrap reserves her height above
   the tallest step; v26.js places her by the steps' boxes (--qx / --qy) and hops her from step to step. */
.v26-podium-wrap{position:relative;width:100%;--piece-h:clamp(200px, min(23vw, 38vh), 440px);--lid:clamp(10px, .9vw, 16px);padding-top:calc(var(--piece-h) - var(--lid) * .5 + var(--q-room, 0px))}
@media (max-width:1180px){.v26-podium-wrap{--piece-h:clamp(200px, min(30vw, 34vh), 300px)}}
.v26-tier-piece--stacked{display:none}
.v26-podium-queen{position:absolute;transform-origin:50% 92%;left:0;top:0;z-index:4;height:var(--piece-h);width:calc(var(--piece-h) * .4618);pointer-events:none;
  transform:translate3d(var(--qx, 0px), var(--qy, 0px), 0);opacity:0;transition:opacity 420ms var(--v26-ease)}
.v26-podium-queen.is-on{opacity:1}
/* her contact shadow and light pool lie on the lid under her base, not on her: v26.js fades them as she is lifted */
.v26-podium-shadow{--foot:calc(var(--piece-h) * .4618 * .9);position:absolute;left:0;top:0;z-index:3;width:calc(var(--piece-h) * .4618);height:0;pointer-events:none;
  transform:translate3d(var(--qx, 0px), calc(var(--qy, 0px) + var(--piece-h)), 0);transform-origin:50% 0;opacity:0;transition:opacity 420ms var(--v26-ease)}
.v26-podium-shadow.is-on{opacity:1}
.v26-podium-queen img{display:block;width:100%;height:100%;max-width:none}
.v26-podium-shadow::after{content:'';position:absolute;left:50%;bottom:calc(var(--lid) * -.5 - 3px);width:calc(var(--foot) * 1.45);height:calc(var(--lid) + 6px);transform:translateX(-50%);border-radius:50%;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%, rgb(0 5 16 / 92%) 0%, rgb(0 5 16 / 70%) 46%, rgb(0 5 16 / 22%) 66%, transparent 80%)}
.v26-podium-shadow::before{content:'';position:absolute;left:50%;bottom:calc(var(--lid) * -.5);width:calc(var(--foot) * 2.6);height:calc(var(--lid) * 1.6 + 4px);transform:translateX(-50%);border-radius:50%;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgb(186 220 255 / 62%), rgb(110 165 252 / 26%) 46%, transparent 72%)}
html.quiet :is(.v26-podium-queen, .v26-podium-shadow){transition:none}
/* the plates layout keeps her on the top plate only; the other plates no longer hold a piece */
@media (max-width:1023px){
  .v26-podium-wrap{padding-top:0}
  :is(.v26-podium-queen, .v26-podium-shadow){display:none}
  .v26-tier-piece--stacked{display:flex}
  .v26-tier:not(.v26-tier--top) :is(.v26-tier-face, .v26-tier-base){padding-right:18px}
}
@media (min-width:761px) and (max-width:1279px){
  html.enlarged .v26-podium-wrap{padding-top:0}
  html.enlarged :is(.v26-podium-queen, .v26-podium-shadow){display:none}
  html.enlarged .v26-tier-piece--stacked{display:flex}
  html.enlarged .v26-tier:not(.v26-tier--top) :is(.v26-tier-face, .v26-tier-base){padding-right:18px}
}
/* @end funding */

/* @section program */
/* 7. Nine modules (TZ 285–312).
   Pinned (desktop): the head (H2 on the shared container axis and on the --v26-pin-top line; the «1 / 9»
   stepper at the right end of the same row) → a row of nine module tiles → a glass floor of
   nine cells in perspective under them, with the queen. No track switch: the modules are the same for both
   categories (client 2026-10-20); modules are named «Модуль N».
   The row reads like a filmstrip: the active module stands on the container's left axis as a full card
   (media tile + a glass text plate that slides out from behind it); the following modules wait on the
   right as real previews (media, «Модуль N» tag, scale .85, dimmed; a tag cut by the frame edge is hidden).
   Changing module (round 5, verify5 U5-N1 / C5-01): the open copy fades in place; then one continuous motion — the
   open card folds into its tile while the next one unfolds out of its own, the row slides by exactly the camera's
   move (every tile one way, at one pace, never an empty slot) and the queen is lifted and set down on the next cell
   (the seam of its tile and plate = the middle of the open cell); then the new copy fades in at its place. Each
   plate is fitted to its own copy (v26.js): a short copy gets a narrower plate, so every open card is about equally
   full. The camera only
   travels between rest layouts: 01–08 keep the open card on the H2 axis; at 09 the row's end sits on the
   container's right edge, so step 09 is as full as step 01 and the queen hops there herself. On large screens
   the plate copy grows with its tile (it fills the plate). No outline numerals (feedback 2026-10-14), no tile
   texture under the floor (calm caustics underlay only).
   The floor is a stage band (CR-FP-10): about a quarter of the frame, lit only near the cards' base line,
   rims fading toward the viewer, the pictures mirrored faintly in it. Geometry (tile, plate, card and floor
   heights, queen size) is set by v26.js from the space left under the head, so the scene fits 1280×720 and
   1366×650 with nothing overlapping.
   After module 09 the camera tips down toward the board (TZ: «камера повертається вниз, до вигляду зверху»).
   Static on desktop (reduced motion, enlarged text, low height): a grid of all nine module cards; only the
   card under the pointer plays. Static below 1024 px (TZ): an accordion; one module open, header = «Модуль N»
   over the title, body = media + description; only the open module plays. A module may have a still only (no loop).
   «Результат тижня» and «Деталі модуля» are rendered only from config data (see v26.js). */
.v26-program{--r:var(--v26-r-lg)}
.v26-program .v26-nw{white-space:nowrap}   /* hyphenated compounds never break at the hyphen */
.v26-program-titles{display:grid;gap:20px;justify-items:start;min-width:0}
.v26-program-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.v26-program .v26-counter{min-width:84px}

/* ---------- module card (shared) ---------- */
.v26-modules{list-style:none;margin:0;padding:0}
html.v26 .v26-module.v26-glass{position:relative;overflow:hidden;border-radius:var(--v26-r-lg)}
/* cards carry text on most of their glass: grain and rim only, no halftone behind copy */
html.v26 .v26-module.v26-glass::after{background:url('assets/v7-matte-grain.png') center/180px;opacity:.26;-webkit-mask:none;mask:none}
.v26-module-plate,.v26-module-tag{display:none}
.v26-module-media{position:relative;margin:0;background:#030d22;overflow:hidden}
.v26-module-media img,.v26-module-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.v26-module-media video{opacity:0;transition:opacity 400ms;pointer-events:none}
.v26-module-media video.is-playing{opacity:1}
/* pinned: only the module in front and the one coming in keep a video in the page; the others show their poster
   (v26.js, verify5 NEW5-G1: paused video layers halved the scene's frame rate) */
html.v26-prog-pin #program .v26-module-media video.is-dormant{display:none}
html.v26 .v26-module-num{margin:0;font-size:var(--v26-caption);line-height:1.4;letter-spacing:.04em;color:var(--v26-faint)}
html.v26 .v26-module-title{margin:0}
html.v26 .v26-module-desc{margin:0;font-size:var(--v26-body);line-height:1.6;color:#d0dcef;max-width:60ch}
.v26-module-extra{display:grid;gap:16px;justify-items:start}
.v26-module-result{display:grid;gap:4px;width:100%;padding-top:12px;border-top:1px solid var(--v26-line)}
html.v26 .v26-module-result p{margin:0;font-size:var(--v26-body);line-height:1.5;color:var(--v26-muted)}
/* a result-only module needs no drawer while its result is on the card; compact cards move it there */
.v26-module-extra.is-result-only [data-role="details"]{display:none}
.v26-program.is-compact .v26-module-extra.is-result-only [data-role="details"]{display:inline-flex}
html.v26-prog-pin .v26-program.is-compact .v26-module-result{display:none}

/* ---------- pinned scene ---------- */
/* head (CR-FP-02): H2 on the container axis and on the --v26-pin-top line; the stepper at the right end of the
   row, bottom-aligned with the title's last line */
html.v26-prog-pin .v26-program-head{margin-bottom:var(--head-gap, 28px)}
html.v26-prog-pin .v26-program-titles{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 40px}
html.v26-prog-pin .v26-program-titles .v26-h2{flex:1 1 0;min-width:0}
html.v26-prog-pin .v26-program-controls{flex:0 0 auto;align-self:flex-end;justify-content:flex-end;gap:10px 20px}

/* the row: full-bleed, faded only in the outer gutters (the active card's edge on the container axis stays crisp) */
.v26-program-viewport{--wl:40px}
/* (the masked box reaches down over the floor, so the tiles' reflections in the glass floor fade with the row) */
html.v26-prog-pin .v26-program-viewport{position:relative;flex:none;width:100%;height:calc(var(--card-h, 320px) + var(--board-h, 200px));margin-bottom:calc(var(--board-h, 200px) * -1);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 calc(var(--wl) * .8), #000 calc(100% - var(--wl) * .8), transparent);
  mask:linear-gradient(90deg, transparent 0, #000 calc(var(--wl) * .8), #000 calc(100% - var(--wl) * .8), transparent)}
html.v26-prog-pin .v26-modules{position:absolute;inset:0 0 auto;height:var(--card-h, 320px)}
html.v26-prog-pin #program .v26-module{
  --pad:clamp(24px, 2.4vw, 44px);position:absolute;left:0;bottom:0;overflow:visible;
  width:calc(var(--tile-w, 380px) + var(--panel-w, 480px));height:var(--card-h, 320px);
  display:grid;grid-template-columns:var(--tile-w, 380px) minmax(0, 1fr);
  grid-template-rows:minmax(var(--vpad, var(--pad)), 1fr) auto auto auto auto minmax(var(--vpad, var(--pad)), 1fr);
  transform-origin:0 100%;transform:translate3d(var(--x, 0px), 0, 0) scale(var(--s, 1));
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;
}
html.v26-prog-pin #program .v26-module::before,html.v26-prog-pin #program .v26-module::after{display:none}
/* the hidden row of text copies v26.js measures the plates on (contained: trial widths never re-lay out the scene) */
#program .v26-module-measure{display:none}
html.v26-prog-pin #program .v26-module-measure{display:block;position:absolute;left:0;top:0;width:100%;height:var(--card-h, 320px);visibility:hidden;contain:strict;pointer-events:none}
html.v26-prog-pin .v26-module-body{display:contents}
/* media tile: the module's own render, framed by the V4 rim; neighbours are dimmed by a veil (the tile stays
   opaque, so a plate parked behind it never shows through) */
html.v26-prog-pin .v26-module-media{grid-column:1;grid-row:1 / -1;z-index:2;border-radius:var(--r);
  box-shadow:0 34px 70px -40px rgb(0 0 0 / 90%), 0 0 0 1px rgb(150 196 255 / 10%)}
html.v26-prog-pin .v26-module-media::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(2 11 25 / var(--dim, 0))}
html.v26-prog-pin .v26-module-media::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(140deg, #9cc2ff 0%, rgb(47 123 240 / 60%) 16%, rgb(58 124 204 / 16%) 42%, rgb(70 130 220 / 6%) 64%, rgb(150 190 245 / 26%) 86%, rgb(233 238 249 / 64%) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.v26-prog-pin .v26-module.is-active .v26-module-media{box-shadow:0 40px 90px -42px rgb(30 90 200 / 70%), 0 0 0 1px rgb(150 196 255 / 14%)}
/* the glass floor mirrors the pictures faintly (pictures only: a copy is never mirrored) */
html.v26-prog-pin .v26-module-media{-webkit-box-reflect:below 0px linear-gradient(transparent 58%, rgb(0 0 0 / 30%))}
/* the number tag of a waiting module (fades out as its card opens: the plate then carries «Модуль N») */
html.v26-prog-pin .v26-module-tag{display:block;position:absolute;left:14px;top:14px;z-index:3;min-width:38px;padding:5px 12px;border-radius:999px;text-align:center;white-space:nowrap;
  font-size:var(--v26-caption);line-height:1.2;letter-spacing:.04em;color:#e6efff;background:rgb(4 16 38 / 70%);box-shadow:inset 0 0 0 1px rgb(170 206 255 / 30%);
  opacity:var(--tg, 0)}
/* the text plate: one glass panel joined to the tile (it starts under the tile's rounded edge); it slides
   out from behind the media when the module opens and back when it closes */
html.v26-prog-pin .v26-module-plate{display:block;grid-column:2;grid-row:1 / -1;margin-left:calc(var(--r) * -1);z-index:0;
  transform:translate3d(var(--px, 0px), 0, 0);opacity:var(--pa, 1)}
/* the copy stays in its place and fades there (--ta): out before its card folds, in once the next card has unfolded
   (v26.js), so it never slides under a picture or past its plate (N-U8 / C5-01) */
html.v26-prog-pin .v26-module-num,html.v26-prog-pin .v26-module-title,html.v26-prog-pin .v26-module-desc,html.v26-prog-pin .v26-module-extra{
  grid-column:2;position:relative;z-index:1;padding-inline:var(--pad);opacity:var(--ta, 1)}
html.v26-prog-pin .v26-module-num{grid-row:2;margin-bottom:12px}
html.v26-prog-pin .v26-module-title{grid-row:3;margin-bottom:14px;max-width:calc(24ch + 2 * var(--pad))}
html.v26-prog-pin .v26-module-desc{grid-row:4;max-width:calc(46ch + 2 * var(--pad))}
/* each plate is fitted to its own copy (v26.js, C-N5): the lines are balanced, so a fitted plate never ends on one word */
html.v26-prog-pin #program :is(.v26-module-title, .v26-module-desc){text-wrap:balance}
/* large screens (C-N5): the copy grows with its tile, so it fills its plate instead of floating in a big empty slab
   (the scale's h3 / body sizes stay the floor; v26.js measures the card after the tile width is set) */
html.v26-prog-pin #program .v26-module-title{font-size:clamp(var(--v26-h3), calc(var(--tile-w, 380px) * .09 - 18px), 40px)}
html.v26-prog-pin #program .v26-module-desc{font-size:clamp(var(--v26-body), calc(var(--tile-w, 380px) * .05 - 7px), 21px)}
@media (min-height:1200px){
  html.v26-prog-pin #program .v26-module-title{font-size:clamp(var(--v26-h3), 2.8vh, 40px)}
  html.v26-prog-pin #program .v26-module-desc{font-size:clamp(var(--v26-body), 1.5vh, 21px)}
}
html.v26-prog-pin .v26-module-extra{grid-row:5;margin-top:22px}
/* low laptops with long copy: no «Модуль N» caption (the stepper carries the number), tighter plate */
html.v26-prog-pin #program.is-tight .v26-module{--vpad:18px}
html.v26-prog-pin .v26-program.is-tight .v26-module-num{display:none}
html.v26-prog-pin .v26-program.is-tight .v26-module-extra{margin-top:14px}

/* the floor: nine glass cells in perspective, drawn per frame under the cards (v26.js), with the queen,
   her reflection and her contact light; the board starts at the cards' base line */
.v26-program-board{display:none}
html.v26-prog-pin .v26-program-board{display:block;position:relative;flex:none;width:100%;height:var(--board-h, 200px);pointer-events:none}
/* after module 09 the camera tips down toward the board (exit beat, v26.js): the row recedes, the floor flattens and
   lights her route, and the queen makes one explicit move — lifted, turned to a three-quarter view, set down a step
   forward (the floor canvas reaches up over the risen row's base, --board-u, and down over the frame's bottom padding,
   --board-x, so her contact goes with her) */
.v26-program-ground{position:absolute;left:0;top:calc(var(--board-u, 0px) * -1);width:100%;height:calc(100% + var(--board-x, 0px) + var(--board-u, 0px))}
.v26-program-floor{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the ground (the floor and her reflection) ends on the frame's edge. In the exit beat she comes forward and her pool
   and reflection reach toward that edge, so there its last 40 px fade out (--gf, v26.js): as the scene then scrolls away
   they never end on a hard line across the screen (verify5 C5-03). Before the beat it is not masked. */
html.v26-prog-pin #program .v26-program-ground.is-receding{-webkit-mask:linear-gradient(#000 calc(100% - 40px * var(--gf, 0)), transparent);mask:linear-gradient(#000 calc(100% - 40px * var(--gf, 0)), transparent)}
html.v26-prog-pin .v26-queen-stage--program,html.v26-prog-pin .v26-program-qrefl{position:absolute;left:0;top:0;inset:0 auto auto 0;width:calc(var(--qh, 120px) * .5415);height:var(--qh, 120px);will-change:transform}
html.v26-prog-pin .v26-queen-stage--program{z-index:2;transform-origin:50% 100%}
html.v26-prog-pin .v26-queen-stage--program canvas{transform-origin:50% 100%;transform:rotate(var(--lean, 0deg))}
html.v26-prog-pin .v26-program.is-noqueen :is(.v26-queen-stage--program, .v26-program-qrefl){visibility:hidden}
/* the reflection: the same frame, mirrored under the contact line, faint and fading away from it */
.v26-program-qrefl{display:none}
html.v26-prog-pin .v26-program-qrefl{display:block;z-index:1;opacity:var(--ra, .22);transform-origin:50% 0}
html.v26-prog-pin .v26-program-ground>.v26-program-qrefl{top:var(--board-u, 0px)}   /* (board coordinates, like the queen) */
html.v26-prog-pin .v26-program-qrefl canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 0;transform:rotate(calc(var(--lean, 0deg) * -1)) translateY(100%) scaleY(-1);
  -webkit-mask:linear-gradient(0deg, #000 0%, rgb(0 0 0 / 40%) 22%, transparent 52%);mask:linear-gradient(0deg, #000 0%, rgb(0 0 0 / 40%) 22%, transparent 52%)}

/* high contrast: the row keeps solid grounds on the tile and the plate only (not on the empty card box) */
html.contrast.v26-prog-pin #program .v26-module{background:none!important;box-shadow:none!important}
html.contrast.v26-prog-pin #program .v26-module-media{box-shadow:inset 0 0 0 2px rgb(214 232 255 / 80%)}

/* ---------- static flow ---------- */
.v26-program-foot{display:none}   /* (the arrows belong to the desktop row; the accordion shows every module) */
html:not(.v26-prog-pin) .v26-program-head{display:block;margin-bottom:clamp(28px, 4vw, 44px)}
html:not(.v26-prog-pin) .v26-program-viewport{width:min(var(--v26-max), calc(100% - 2 * var(--v26-gutter)));margin-inline:auto}
html:not(.v26-prog-pin) .v26-modules{display:grid;gap:10px;transform:none!important}
html.v26:not(.v26-prog-pin) .v26-module.v26-glass{border-radius:var(--v26-r-md)}
html:not(.v26-prog-pin) .v26-module-media{aspect-ratio:16 / 9}
/* desktop (client 2026-10-23, variant Б: «щоб можна було переглянути модулі самостійно … бо зараз це займає багато
   місця»): the nine modules are one row of cards running past the screen's right edge, which the reader scrolls —
   arrows, trackpad, drag; no timer, no pinned scene. Card = media, «Модуль N», title, description (+ data), all the
   row's cards as tall as its tallest */
@media (min-width:1024px){
  html:not(.v26-prog-pin) .v26-program-viewport{width:auto;margin-inline:0}
  /* the first card on the page's left line, about a third of the fourth one showing at the screen's edge (with
     enlarged text: two cards and a third of the next) */
  html:not(.v26-prog-pin) .v26-modules{--edge:max(var(--v26-gutter), (100% - var(--v26-max)) / 2);grid-auto-flow:column;grid-auto-columns:calc(100% / 3.35);
    gap:clamp(14px, 1.4vw, 24px);padding-inline:var(--edge);scroll-padding-inline:var(--edge);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  html:not(.v26-prog-pin) .v26-modules::-webkit-scrollbar{display:none}
  html.enlarged:not(.v26-prog-pin) .v26-modules{grid-auto-columns:calc(100% / 2.3)}
  html:not(.v26-prog-pin) .v26-modules.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
  html:not(.v26-prog-pin) .v26-module{--cx:clamp(14px, 1.4vw, 22px);display:grid;grid-template-rows:auto auto auto auto 1fr;align-content:start;padding:8px 8px clamp(22px, 2vw, 30px);scroll-snap-align:start}
  html:not(.v26-prog-pin) .v26-module-body{display:contents}
  html:not(.v26-prog-pin) .v26-module-media{grid-row:1;border-radius:calc(var(--v26-r-md) - 6px);margin-bottom:clamp(18px, 1.6vw, 24px)}
  html:not(.v26-prog-pin) .v26-module-num{grid-row:2;padding-inline:var(--cx);margin-bottom:8px}
  html:not(.v26-prog-pin) .v26-module-title{grid-row:3;padding-inline:var(--cx);margin-bottom:10px}
  html:not(.v26-prog-pin) .v26-module-desc{grid-row:4;padding-inline:var(--cx)}
  html:not(.v26-prog-pin) .v26-module-extra{grid-row:5;align-self:start;padding-inline:var(--cx);margin-top:18px}
  /* below the row: how far along it the reader is (the line), the modules in full view and the arrows */
  html:not(.v26-prog-pin) .v26-program-foot{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:clamp(20px, 2vw, 28px)}
  .v26-program-bar{position:relative;flex:1 1 auto;max-width:420px;height:2px;border-radius:2px;background:rgb(190 214 248 / 18%)}
  .v26-program-bar i{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:inherit;background:#d8e6fb}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){html:not(.v26-prog-pin) .v26-modules{cursor:grab}}
/* phones and tablets: the TZ's vertical accordion (one module open; header = «Модуль N» over the title, so the
   title has the whole width beside the chevron; body = media + description; the tapped header stays in place) */
@media (max-width:1023px){html:not(.v26-prog-pin) .v26-module-num{display:none}}
.v26-module-toggle{display:grid;grid-template-columns:minmax(0, 1fr) 22px;grid-template-areas:'num chev' 'title chev';align-items:center;column-gap:clamp(14px, 2vw, 28px);row-gap:4px;width:100%;min-height:64px;padding:16px clamp(18px, 2.2vw, 32px);border:0;background:none;cursor:pointer;text-align:left;font:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:var(--v26-text)}
.v26-module-toggle-num{grid-area:num;font-size:var(--v26-caption);line-height:1.4;letter-spacing:.04em;color:var(--v26-faint)}
.v26-module-toggle-title{grid-area:title;min-width:0}
.v26-module-toggle svg{grid-area:chev;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 300ms var(--v26-ease)}
.v26-module-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.v26-module-toggle:focus-visible{outline:2px solid #b9daff;outline-offset:-4px;border-radius:var(--v26-r-md)}
/* open module (tablet): the loop and the description side by side, both from the top of the body; the
   description is a lead-size block (≈ 34ch) */
@keyframes v26-acc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:1023px){
  html:not(.v26-prog-pin) .v26-module-body{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:auto 1fr;align-items:start;column-gap:clamp(20px, 3vw, 40px);row-gap:20px;padding:0 clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px)}
  html:not(.v26-prog-pin) .v26-module-body[hidden]{display:none}
  html.v26-motion:not(.v26-prog-pin) .v26-module-body:not([hidden]){animation:v26-acc-in 360ms var(--v26-ease)}
  html:not(.v26-prog-pin) .v26-module-media{grid-column:1;grid-row:1 / span 2;border-radius:var(--v26-r-sm)}
  html:not(.v26-prog-pin) .v26-module-body>.v26-module-desc{grid-column:2;grid-row:1;max-width:62ch}
  html:not(.v26-prog-pin) .v26-module-body>.v26-module-extra{grid-column:2;grid-row:2;max-width:62ch}
}
@media (min-width:701px) and (max-width:1023px){html.v26:not(.v26-prog-pin) .v26-module-body>.v26-module-desc{font-size:var(--v26-lead);line-height:1.45;max-width:34ch;color:var(--v26-text)}}
@media (max-width:700px){
  html:not(.v26-prog-pin) .v26-module-body{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:16px}
  html:not(.v26-prog-pin) .v26-module-body>*{grid-column:1!important;grid-row:auto!important}
}
/* enlarged text on tablets (CR-FP-R4-05): the open module stacks — the loop across the card, the description under
   it at full width (≈ 40 characters a line at 150 %), as on phones */
@media (min-width:701px) and (max-width:1023px){
  html.enlarged:not(.v26-prog-pin) .v26-module-body{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:18px}
  html.enlarged:not(.v26-prog-pin) .v26-module-body>*{grid-column:1!important;grid-row:auto!important}
  html.v26.enlarged:not(.v26-prog-pin) .v26-module-body>.v26-module-desc{max-width:none}
}
/* phones with enlarged text (C-N2 / NEW-G2): the title (whole width between the card's edge and the chevron) sets a
   little smaller; long words hyphenate inside that width, never run under the chevron */
@media (max-width:480px){
  html.enlarged .v26-module-toggle{column-gap:12px;row-gap:2px;padding-inline:16px 14px}
  html.enlarged .v26-module-toggle-title{font-size:calc(var(--v26-h3) * .86);line-height:1.22;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ---------- drawer (opened only when a module has data) ---------- */
.v26-drawer b{font-weight:400}
.v26-drawer-list:empty{display:none}
html.v26 .v26-drawer-list dd{font-size:var(--v26-body);line-height:1.6;color:var(--v26-muted)}
@media (max-width:700px){
  html.v26 .v26-drawer{inset:0;width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;padding:0 20px 28px}
  html.v26 .v26-drawer-top{position:sticky;top:0;z-index:2;margin:0 -20px 18px;padding:14px 20px;background:linear-gradient(180deg, #0f2d58 72%, rgb(15 45 88 / 0%))}
}
/* Feedback 2026-10-15: the open module is ONE element — one glass outline around the picture (inset, inner radius)
   and the copy, not a picture tile with a separate text plate under it. The approved look (approve/program2-A) is an
   outline, not a filled slab: a 1.5 px rim (the glass rim mask, kept explicit here), painted by a deep-blue gradient
   with a faint inner light line and a top highlight; the card has no fill and no glow (verify5 C5-05). It spans the
   tile + the open part of the plate (--cw, v26.js) as the card folds and unfolds, and fades with its glass (--pa); a
   waiting module stays a plain picture tile with its own rim. */
html.v26-prog-pin #program .v26-module::before{display:block!important;content:'';position:absolute;left:0;top:0;bottom:0;z-index:0;pointer-events:none;
  width:var(--cw, calc(var(--tile-w, 380px) + var(--panel-w, 480px)));padding:1.5px;border-radius:var(--r);opacity:var(--pa, 1);
  background:linear-gradient(160deg, rgb(32 78 165 / 42%), rgb(10 30 70 / 78%) 55%, rgb(5 18 44 / 90%));
  box-shadow:inset 0 0 0 1px rgb(170 205 255 / 22%), inset 0 1px 0 rgb(220 235 255 / 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.v26-prog-pin #program .v26-module-plate{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.v26-prog-pin #program .v26-module-plate::before,html.v26-prog-pin #program .v26-module-plate::after{content:none!important}
html.v26-prog-pin #program .v26-module-media{clip-path:inset(calc(12px * var(--pa, 0)) round calc(var(--r) - 12px * var(--pa, 0)))}
html.v26-prog-pin #program .v26-module.is-active .v26-module-media{box-shadow:none}
html.v26-prog-pin #program .v26-module-media::after{opacity:calc(1 - var(--pa, 0))}
/* high contrast: a solid 3 px white ring instead of the 1.5 px rim (the rim mask would cut it to 1.5 px, C5-05) */
html.contrast.v26-prog-pin #program .v26-module::before{-webkit-mask:none;mask:none;background:none;box-shadow:none;border:3px solid #fff;padding:0;box-sizing:border-box}
/* edits 2.0: the program is a flow section in every mode (the shared pinned frame no longer holds it) */
html.v26-pinned #program .v26-pin{position:relative;top:auto;height:auto;overflow:visible;display:block;padding:0}
/* Funding hands over to a flow section now: the usual section step instead of the pin-line handover */
html.v26-pinned .v26-funding{padding-bottom:var(--v26-section-pad)}
/* @end program */

/* @section compass */
/* 8. Compass (client edits 2026-10-20): the heading «Компас цифрової зрілості: оцініть стартову точку», two sentences
   (what the questionnaire does, then what the reader gets), the two portal links (secondary: sign in to Дія.Бізнес;
   primary: take the Compass; both open in a new tab), and the «Як пройти Компас?» disclosure: four steps on a glass
   panel that unfolds on hover (fine pointers) and on click / tap / Enter for everyone (v26.js). On two-column desktops
   it unfolds over the free space under the copy, so opening it never moves the page under the pointer; on one column
   it opens in the flow, as the module accordion does. Beside the copy: the hexagonal crystal map «Шестикутна мапа»
   (a seamless 10 s loop melting into the page through a radial mask; its poster stands in under
   reduced motion). The 3D slot is the figure: a replacement may be another loop (same data-poster / data-src /
   data-src-hd) or a still <img>; both get the same size and mask. */
/* (shared: the gradient numeral is also used by the season's stack cards) */
.v26-step-num{font-size:var(--v26-num-l);line-height:.9;letter-spacing:-.05em;color:transparent;background:linear-gradient(170deg, #ffffff 10%, #9cc2ff 60%, rgb(80 140 240 / 55%));-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
.v26-compass-layout{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);grid-template-rows:auto 1fr;grid-template-areas:"title figure" "copy figure";column-gap:clamp(32px, 4.5vw, 96px);row-gap:clamp(24px, 2.4vw, 36px);align-items:start}
.v26-compass-title{grid-area:title}
html.v26 .v26-compass .v26-compass-title{max-width:24ch}
.v26-compass-copy{grid-area:copy;display:grid;justify-items:start;min-width:0;position:relative;z-index:1}   /* above the loop's masked overhang */
html.v26 .v26-compass .v26-compass-lead{max-width:48ch;color:#eef4ff}
html.v26 .v26-compass .v26-compass-result{max-width:52ch;margin-top:14px;font-size:var(--v26-body);line-height:1.6;color:var(--v26-muted)}
.v26-compass-actions{margin-top:clamp(26px, 2.4vw, 36px)}

/* «Як пройти Компас?»: a disclosure control (not a third CTA: no fill, a chevron in a ring), then the steps panel */
.v26-howto{width:100%;margin-top:clamp(18px, 1.8vw, 26px)}
html.v26 .v26-howto-head{margin:0;font:inherit}
.v26-howto-toggle{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--v26-body);line-height:1.3;color:var(--v26-text);text-align:left}
.v26-howto-toggle svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  box-shadow:inset 0 0 0 1px rgb(190 214 248 / 34%);background:rgb(10 34 70 / 38%);transition:transform 300ms var(--v26-ease), background-color 200ms var(--v26-ease), box-shadow 200ms var(--v26-ease)}
.v26-howto.is-open .v26-howto-toggle svg{background:rgb(24 60 112 / 50%);box-shadow:inset 0 0 0 1px rgb(210 228 255 / 58%)}
@media (hover:hover){
  .v26-howto-toggle:hover svg{background:rgb(24 60 112 / 50%);box-shadow:inset 0 0 0 1px rgb(210 228 255 / 58%)}
  .v26-howto-toggle:hover span{text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgb(190 214 248 / 50%)}
}
.v26-howto-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.v26-howto-toggle:focus-visible{outline:2px solid #b9daff;outline-offset:4px;border-radius:8px}
/* the panel: four steps, two by two where it is wide enough (one column below 520 px of panel width) */
.v26-howto-body{margin-top:12px;container-type:inline-size}
.v26-howto-steps{list-style:none;margin:0;padding:clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 30px);border-radius:var(--v26-r-md);display:grid;grid-template-columns:minmax(0, 1fr);gap:16px}
@container (min-width:520px){.v26-howto-steps{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(24px, 2.4vw, 40px);row-gap:18px}}
.v26-howto-steps li{display:grid;grid-template-columns:2.2ch minmax(0, 1fr);column-gap:14px;align-items:start}
.v26-howto-steps .v26-step-num{font-size:var(--v26-num-m);text-align:center}
html.v26 .v26-howto-steps p{margin:0;padding-top:.2em;font-size:var(--v26-body);line-height:1.5;color:#dbe6f6}
/* collapsed (v26.js marks the box ready; without script the steps simply stay open): out of the flow on one column… */
.v26-howto.is-ready:not(.is-open) .v26-howto-body{display:none}
/* …on two-column desktops the panel unfolds over the free space under the copy, beside the compass, so opening it never
   moves the page under the pointer; where that space is shorter than the panel, v26.js reserves just the difference
   (--howto-reserve), so the panel never reaches the next section's content */
@media (min-width:1101px){
  html:not(.enlarged) .v26-howto{position:relative;margin-bottom:var(--howto-reserve, 0px)}
  html:not(.enlarged) .v26-howto-body{position:absolute;left:0;right:0;top:100%;z-index:3}
  html:not(.enlarged) .v26-howto.is-ready:not(.is-open) .v26-howto-body{display:block;visibility:hidden;opacity:0;transition:opacity 200ms var(--v26-ease), visibility 0s linear 200ms}
}
/* unfolding (motion on): the panel opens downward from the control, then the steps rise one by one, 1 to 4 */
html.v26-motion .v26-howto.is-open .v26-howto-steps{animation:v26-howto-unfold 460ms var(--v26-ease) both}
html.v26-motion .v26-howto.is-open .v26-howto-steps>li{animation:v26-howto-step 420ms var(--v26-ease) both;animation-delay:calc(110ms + var(--i, 0) * 70ms)}
.v26-howto-steps>li:nth-child(2){--i:1}
.v26-howto-steps>li:nth-child(3){--i:2}
.v26-howto-steps>li:nth-child(4){--i:3}
@keyframes v26-howto-unfold{from{clip-path:inset(0 0 100% 0 round 20px);opacity:.5}to{clip-path:inset(0 0 0 0 round 20px);opacity:1}}
@keyframes v26-howto-step{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* «Шестикутна мапа» (concept 3b, approved 2026-10-20): a flat hexagonal sapphire-glass map tile with contour lines; in a
   seamless 10 s loop the start ring gathers light, the dotted route lights up dot by dot, each pin rises a little and
   glows as the light reaches it, and the goal pin flares last; then all settles. The square video melts into the page
   through an elliptical mask (opaque over the whole hexagon and the goal pin; the floor reflection fades out downward;
   transparent before the frame's edges). */
.v26-compass-figure{grid-area:figure;position:relative;margin:0;align-self:center;justify-self:center;width:min(100%, clamp(360px, 36vw, 600px));aspect-ratio:1;pointer-events:none;overflow:visible}
.v26-compass-loop,.v26-compass-figure>img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.25);transform-origin:50% 50%;
  -webkit-mask:radial-gradient(50% 42% at 50% 47%, #000 74%, transparent 100%);mask:radial-gradient(50% 42% at 50% 47%, #000 74%, transparent 100%)}
@media (max-width:1100px){
  .v26-compass-layout{grid-template-columns:minmax(0, 1fr);grid-template-areas:"title" "copy" "figure"}
  .v26-compass-figure{width:min(100%, 420px)}
}
/* phones: the two links take the row's width (the long one wraps inside its pill); the compass stays (verify5 U5-N2 /
   D5-N6), centred under the copy; the dark top of the frame tucks under the row gap (its masked edge is transparent) */
@media (max-width:600px){
  .v26-compass-actions{display:grid;grid-template-columns:minmax(0, 1fr);width:100%;gap:12px}
  .v26-compass-actions .v26-btn{white-space:normal;text-align:center;padding-inline:22px}
}
@media (max-width:700px){ .v26-compass-figure{width:min(78vw, 300px);margin:-28px auto -16px} }
/* enlarged text: one column below 1200 px; from 1200 px the desktop pair returns under a full-width heading (copy
   left, compass right), so the compass stays in the first view */
html.enlarged .v26-compass-layout{grid-template-columns:minmax(0, 1fr);grid-template-areas:"title" "copy" "figure"}
html.enlarged .v26-compass-copy{max-width:min(100%, calc(820px * var(--scale, 1)))}
html.enlarged .v26-compass-actions .v26-btn{white-space:normal;max-width:100%;text-align:center}
@media (min-width:1200px){
  html.enlarged .v26-compass-layout{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);grid-template-areas:"title title" "copy figure"}
  html.enlarged .v26-compass-copy{max-width:none}
}
.v26-compass{overflow-x:clip}   /* the scaled compass loop never widens the page */
/* pinned: the compass paints above the next scene's dark top band, so its masked reflection fades out instead of being
   cut by a straight line (verify5 D5-N2) */
html.v26-pinned #compass{position:relative;z-index:2}
/* @end compass */

/* @section stages */
/* 9. Етапи (TZ 313–338; five stages and the copy of the client's edits 2026-10-20). Pinned: two fixed zones — copy
   on the left (title, ONE stage plaque that cross-fades in place and carries the only stage number and the prev/next
   arrows, the stage-01 actions under it); one bounded glass board on the right (slab, route, nodes and light drawn
   in v26.js) with the real queen standing on it. Static (reduced motion, enlarged text, <1024 wide or <600 high):
   a two-column timeline ≤880 px. */
.v26-stages .v26-stage--architecture{--v26-o:.46;--v26-pos:64% 38%}
.v26-stages-copy{display:flex;flex-direction:column;gap:clamp(18px, 2.8vh, 34px);min-width:0}
.v26-stages-head{display:grid;gap:12px}
.v26-stages-frame{padding:clamp(22px, 1.8vw, 32px) clamp(22px, 1.9vw, 34px)}
.v26-stage-list{list-style:none;margin:0;padding:0;display:grid}
.v26-stage-card{display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:clamp(12px, 1vw, 16px);row-gap:10px;align-items:baseline}
.v26-stage-side,.v26-stage-main{display:contents}
.v26-stage-num{grid-column:1;grid-row:1;font-size:var(--v26-num-m);line-height:1;letter-spacing:-.03em;color:var(--v26-glow);font-variant-numeric:tabular-nums}
.v26-stage-head{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;min-width:0}
html.v26 .v26-stages .v26-stage-date{grid-column:1 / -1;font-size:var(--v26-body);line-height:1.45;color:#fff}
.v26-stage-text{grid-column:1 / -1;max-width:62ch}
.v26-stage-actions{grid-column:1 / -1;margin-top:8px}
html.v26-pinned .v26-stage-actions,html.v26-pinned .v26-stage-marker,html.v26-pinned .v26-stages-queen{display:none}
html:not(.v26-pinned) .v26-stages-controls,html:not(.v26-pinned) .v26-board,html:not(.v26-pinned) .v26-stages-stepper,html:not(.v26-pinned) .v26-stages-glint{display:none}
/* The number is shown on the plaque only (feedback 2026-10-20: it was repeated under it and on the board); prev / next
   stand on the plaque's top line, centred on its number, and the title row keeps clear of them. */
html.v26-pinned .v26-stages-frame{--pad-t:clamp(22px, 1.8vw, 32px);--pad-x:clamp(22px, 1.9vw, 34px);padding:var(--pad-t) var(--pad-x)}
html.v26-pinned .v26-stages-stepper{position:absolute;z-index:3;top:calc(var(--pad-t) + var(--v26-num-m) / 2 - 23px);right:calc(var(--pad-x) - 6px);gap:8px}
html.v26-pinned .v26-stage-head{padding-right:calc(46px * 2 + 8px + 6px)}
/* …and the plaque lights up as a new stage comes into it (v26.js lightPlaque, ≈1.3 s): a light runs along its rim
   and a short cobalt glow blooms around it — the glass's own light, no movement of the plaque */
.v26-stages-glint{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgb(150 192 255 / 40%), 0 0 48px -12px rgb(64 136 255 / 80%), inset 0 0 44px -18px rgb(127 178 255 / 55%)}
.v26-stages-glint::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(110deg, transparent 32%, rgb(156 194 255 / 85%) 45%, #fff 50%, rgb(156 194 255 / 85%) 55%, transparent 68%) 100% 0/300% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.v26-stages-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px, 1.8vw, 30px)}
.v26-stages-cta{gap:12px}
/* the end of the range reads as quieter through colour, not transparency (focusable controls stay ≥ .5 opacity) */
.v26-stages-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- pinned frame ---------- */
html.v26-pinned .v26-stages-layout{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(min(470px, 44%), 37fr) minmax(0, 63fr);grid-template-rows:minmax(0, 1fr);column-gap:clamp(28px, 3.4vw, 72px);align-items:center}
/* One card place: the six cards share one grid cell, so the frame keeps the tallest card's height.
   The outgoing text is gone before the incoming one starts (no two readable texts at once); it fades on a symmetric
   curve (the page ease dropped it by ≈.45 in its first frame; verify5 rule: ≤ .3 per frame). */
html.v26-pinned .v26-stage-item{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0, 10px, 0);transition:opacity 140ms cubic-bezier(.4, 0, .6, 1), transform 220ms var(--v26-ease), visibility 0s linear 220ms}
html.v26-pinned .v26-stage-item.is-active{opacity:1;visibility:visible;transform:none;transition:opacity 320ms var(--v26-ease) 150ms, transform 420ms var(--v26-ease) 150ms, visibility 0s}
/* The board: one generated plate (camera ≈40° above a glass chessboard) and the queen cut from the same
   render, so she stands on it in its own perspective (feedback 2026-10-14). Pinned, it fills the scene;
   the copy column sits over its dimmed, faded left edge. The camera (v26.js) follows the queen. */
.v26-board{position:relative;align-self:stretch;min-width:0;min-height:0;overflow:hidden}
html.v26-pinned #stages .v26-wrap,html.v26-pinned #stages .v26-stages-layout{position:static}
html.v26-pinned #stages .v26-board{position:absolute;inset:0;z-index:0}
html.v26-pinned #stages .v26-stages-copy{position:relative;z-index:2}
html.v26-pinned #stages .v26-stage--architecture{display:none}
/* the floor (plate, route, lit squares) fades out above the pin's bottom edge (a band of ≈19vh, 110–170 px, so short
   screens keep their lit near squares), and the scene meets #results without a straight seam (verify5 U5-N6); the
   queen, her light and the labels stand above it, unmasked */
.v26-board-floor{position:absolute;inset:0;pointer-events:none}
/* nor is the glow under the stage-01 actions cut there on short screens (1366×650: the pin's clip edge ran 20 px under
   the buttons, a 5–8 level step): when the copy fits the pin (v26.js: is-fit), the pin clips with a margin; overflow:clip
   keeps it from becoming a scroll container. Where the copy does not fit (1024×600), the hard clip stays. */
html.v26-pinned #stages.is-fit .v26-pin{overflow:clip;overflow-clip-margin:48px}
html.v26-pinned #stages .v26-board-floor{-webkit-mask:linear-gradient(180deg, #000 calc(100% - clamp(110px, 19vh, 170px)), transparent calc(100% - 10px));mask:linear-gradient(180deg, #000 calc(100% - clamp(110px, 19vh, 170px)), transparent calc(100% - 10px))}
.v26-board-cam{position:absolute;left:0;top:0;width:2688px;height:1520px;transform-origin:0 0;will-change:transform}
.v26-board-plate{display:block;width:100%;height:100%;max-width:none;filter:brightness(.76) saturate(.92) contrast(1.06);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%);mask:linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%)}
/* the lit squares of the route: passed ones stay lit, the next one lights up as she lands (JS sets the opacity); 04 and
   06 flare in their pause. They are painted into the camera's layer, blended over the same plate (perf 2026-10-17:
   twelve blended layers of their own cost the compositor more every frame than repainting the squares that change) */
.v26-board-cell{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:2.3;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:.12;
  background:radial-gradient(closest-side, rgb(170 210 255), rgb(80 140 255 / 38%) 60%, transparent);mix-blend-mode:screen}
/* the board reads as a scene, the copy as a page: the copy column is dimmed down to its last row (--copy-b, set by
   v26.js), then the dimming fades out so the near squares carry the lower left as a lit floor (CR-STAGES-R3-04);
   the scene's top and bottom edges and the far left fade to the page */
.v26-board::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgb(2 11 25 / 94%) 0, rgb(2 11 25 / 78%) 28%, rgb(2 11 25 / 30%) 42%, rgb(2 11 25 / 0) 54%);
  -webkit-mask:linear-gradient(180deg, #000 calc(var(--copy-b, 100%) + 28px), transparent calc(var(--copy-b, 100%) + 240px));mask:linear-gradient(180deg, #000 calc(var(--copy-b, 100%) + 28px), transparent calc(var(--copy-b, 100%) + 240px))}
.v26-board::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgb(2 11 25 / 70%) 0, rgb(2 11 25 / 0) 12%),
    linear-gradient(180deg, rgb(2 11 25 / 92%) 0, rgb(2 11 25 / 0) 22%, rgb(2 11 25 / 0) 84%, rgb(2 11 25 / 92%) 100%)}
.v26-board-glow{position:absolute;left:-50px;top:-21px;width:100px;height:42px;z-index:2;border-radius:50%;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(closest-side, rgb(180 215 255 / 62%), rgb(90 150 255 / 20%) 55%, transparent);mix-blend-mode:screen}
.v26-board-queen{position:absolute;left:0;top:0;z-index:3;width:618px;height:1366px;transform-origin:0 0;pointer-events:none;will-change:transform}
/* the figure is held by the neck while it is carried: lift and lean pivot there, the base swings */
.v26-board-fig{position:absolute;left:0;top:0;width:618px;height:955px;transform-origin:235px 330px;will-change:transform}
.v26-board-body,.v26-board-lit{position:absolute;left:0;top:0;width:618px;height:955px;max-width:none}
/* her mirror image pivots on the mirrored neck (888 + (888 − 330) − 865) */
.v26-board-refl{position:absolute;left:0;top:865px;width:618px;height:501px;max-width:none;transform-origin:235px 581px;will-change:transform,opacity}
/* «в дії» (04): light rises inside the glass and a cobalt backlight wakes behind her;
   «готово» (06): a soft top light falls on her and pools on the square. Light only — the figure is never deformed. */
.v26-board-lit{filter:brightness(1.55) saturate(1.25);mix-blend-mode:screen;opacity:calc(var(--act, 0) * .42 + var(--done, 0) * .3)}
/* «в дії»: while she stands on 04 a band of light keeps rising through the glass (her own facets, brightened) */
.v26-board-sweep{position:absolute;left:0;top:0;width:618px;height:955px;max-width:none;pointer-events:none;mix-blend-mode:screen;opacity:var(--act, 0);filter:brightness(2.7) saturate(1.3);
  -webkit-mask:linear-gradient(0deg, transparent, #000 50%, transparent) 0 170%/100% 42% no-repeat;mask:linear-gradient(0deg, transparent, #000 50%, transparent) 0 170%/100% 42% no-repeat}
.v26-board-queen.is-act .v26-board-sweep{animation:v26-stage-sweep 2.8s cubic-bezier(.45,0,.35,1) infinite}
@keyframes v26-stage-sweep{0%{-webkit-mask-position:0 170%;mask-position:0 170%}64%,100%{-webkit-mask-position:0 -70%;mask-position:0 -70%}}
.v26-board-queen::before{content:'';position:absolute;left:-40%;top:-12%;width:180%;height:90%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgb(120 175 255 / 55%), rgb(60 120 240 / 16%) 60%, transparent);mix-blend-mode:screen;
  opacity:calc(var(--act, 0) * .75 + var(--done, 0) * .35)}
/* «готово»: a soft stage light from above (Grand Pitch Day is a stage), soft on every edge, ending in the pool on her square */
.v26-board-beam{position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;transform-origin:0 0;pointer-events:none;mix-blend-mode:screen;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg, rgb(200 226 255 / 0%) 0%, rgb(200 226 255 / 10%) 40%, rgb(214 234 255 / 26%) 90%, rgb(214 234 255 / 0%) 100%);
  -webkit-mask:conic-gradient(from 162deg at 50% -30%, transparent 0deg, #000 13deg, #000 23deg, transparent 36deg);mask:conic-gradient(from 162deg at 50% -30%, transparent 0deg, #000 13deg, #000 23deg, transparent 36deg)}
/* labels fade on a symmetric curve (≤ .2 opacity per frame); one switched off fades where it stood (v26.js, D5-N3) */
.v26-route-chip{transition:opacity 260ms cubic-bezier(.4, 0, .6, 1), visibility 0s}
.v26-route-chip.is-off{opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(.4, 0, .6, 1), visibility 0s linear 200ms}
/* static wide layout (reduced motion): the board is a framed still beside the timeline */
html:not(.v26-pinned) .v26-board{-webkit-mask:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);mask-composite:intersect}
html:not(.v26-pinned) .v26-board::after{background:radial-gradient(90% 80% at 50% 55%, transparent 50%, rgb(2 11 25 / 55%) 100%)}
html:not(.v26-pinned) .v26-board::before{display:none}
html:not(.v26-pinned) .v26-board-glow{display:none}
.v26-route-chips{position:absolute;inset:0;z-index:4;pointer-events:none}
/* Route labels: compact plaques standing in front of their node (never above it, where the queen is), names only
   (no numbers: the plaque carries them). The button only positions; the label carries the surface. */
.v26-route-chip{position:absolute;left:0;top:0;display:grid;justify-items:end;gap:5px;padding:0;border:0;border-radius:13px;font:inherit;color:#d6e4f7;background:none;cursor:pointer;pointer-events:auto;transform:translate3d(var(--x, 0px), var(--y, 0px), 0)}
.v26-route-chip-label{position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:5px 12px 6px;border-radius:13px;white-space:nowrap;background:rgb(4 18 42 / 84%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 22%), 0 10px 26px -16px rgb(0 0 0 / 90%);transition:background-color 260ms var(--v26-ease), box-shadow 260ms var(--v26-ease), color 260ms var(--v26-ease)}
.v26-route-chip-name{font-size:var(--v26-caption);line-height:1.3}
.v26-route-chip:hover .v26-route-chip-label{background:rgb(14 40 84 / 84%)}
.v26-route-chip.is-future{color:#b4c6e0}
.v26-route-chip.is-visited{color:#eaf2ff}
.v26-route-chip.is-visited .v26-route-chip-label{background:rgb(10 36 80 / 88%);box-shadow:inset 0 0 0 1px rgb(120 172 250 / 52%), 0 10px 26px -16px rgb(0 0 0 / 90%)}
.v26-route-chip.is-active{color:#fff}
.v26-route-chip.is-active .v26-route-chip-label{background:linear-gradient(180deg, #123272, #081d45);box-shadow:inset 0 0 0 1px rgb(214 230 255 / 30%), 0 14px 34px -18px rgb(42 107 224 / 90%)}
.v26-route-chip.is-active .v26-route-chip-label::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--v26-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* narrow free field (pinned at 1024–1200 px): tighter labels; every label keeps its name (CR-STAGES-07) */
.v26-board.is-compact .v26-route-chip-label{gap:5px;padding:4px 9px 5px;border-radius:11px}
.v26-board.is-compact .v26-route-chip-name{font-size:calc(12px * var(--scale, 1))}
@media (pointer:coarse){.v26-route-chip-label{min-height:44px;align-items:center}}

/* ---------- static timeline (reduced motion, enlarged text, tablets, phones) ---------- */
.v26-stages{--gut:76px}
html:not(.v26-pinned) .v26-stages-layout{display:block}
html:not(.v26-pinned) .v26-stages-copy{gap:clamp(28px, 4vw, 44px);max-width:min(100%, calc(880px * var(--scale, 1)))}
html:not(.v26-pinned) .v26-stages-frame{padding:clamp(6px, 1vw, 12px) clamp(18px, 2.6vw, 34px) clamp(6px, 1vw, 12px) 0}
html:not(.v26-pinned) .v26-stage-list{position:relative}
html:not(.v26-pinned) .v26-stage-list::before,html:not(.v26-pinned) .v26-stage-list::after{content:'';position:absolute;left:calc(var(--gut) / 2 - 1px);top:var(--line-top, 40px);height:var(--line-h, calc(100% - 80px));width:2px;border-radius:2px;background:rgb(150 196 255 / 18%)}
html:not(.v26-pinned) .v26-stage-list::after{height:calc(var(--line-h, calc(100% - 80px)) * var(--fill, 0));background:linear-gradient(180deg, #4f8ff0, #b9d6ff);box-shadow:0 0 12px rgb(127 178 255 / 60%)}
html:not(.v26-pinned) .v26-stage-item{position:relative;display:grid;grid-template-columns:var(--gut) minmax(0, 1fr);padding-block:clamp(20px, 2.4vw, 28px)}
html:not(.v26-pinned) .v26-stage-item+.v26-stage-item{border-top:1px solid var(--v26-line)}
.v26-stage-marker{grid-column:1;grid-row:1;justify-self:center;position:relative;z-index:1;width:14px;height:14px;margin-top:calc(var(--v26-num-m) * .5 - 7px);border-radius:4px;background:#0b2449;box-shadow:inset 0 0 0 1.5px rgb(150 196 255 / 55%)}
.v26-stage-item.is-passed .v26-stage-marker,.v26-stage-item.is-reached .v26-stage-marker{background:linear-gradient(160deg, #6aa3ff, #2a6be0);box-shadow:inset 0 0 0 1.5px #cfe2ff}
/* calendar-current stage: a lit node on the line; the board's queen (same sprite) stands on a small glass plinth in its card */
.v26-stage-item.is-cal .v26-stage-marker{width:16px;height:16px;margin-top:calc(var(--v26-num-m) * .5 - 8px);border-radius:4px;background:linear-gradient(160deg, #a9cdff, #2a6be0);box-shadow:inset 0 0 0 1.5px #e3efff, 0 0 18px rgb(127 178 255 / 80%)}
/* the static form of the plaque's highlight (v26.js): a node lights up as the filling line reaches it, and the last
   stage reached carries the band and a lit number — it fades in with motion and simply stands with reduced motion */
html:not(.v26-pinned) .v26-stage-item{isolation:isolate}
/* the band of the first / last stage meets the panel's rounded corners: the panel clips it (no scroll container) */
html:not(.v26-pinned) .v26-stages-frame{overflow:clip}
html:not(.v26-pinned) .v26-stage-item::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(90deg, rgb(42 107 224 / 18%), rgb(42 107 224 / 0%) 72%);transition:opacity 420ms var(--v26-ease)}
html:not(.v26-pinned) .v26-stage-item.is-current::before{opacity:1}
/* high contrast paints the card solid (chrome), so the band would only frame it: there the lit number and node mark it */
html.contrast:not(.v26-pinned) .v26-stage-item::before{display:none}
html:not(.v26-pinned) .v26-stage-num{transition:color 320ms var(--v26-ease), text-shadow 320ms var(--v26-ease)}
html:not(.v26-pinned) .v26-stage-item.is-current .v26-stage-num{color:#cfe2ff;text-shadow:0 0 22px rgb(127 178 255 / 60%)}
html:not(.v26-pinned) .v26-stage-item.is-current .v26-stage-marker{box-shadow:inset 0 0 0 1.5px #e3efff, 0 0 18px rgb(127 178 255 / 80%)}
@media (prefers-reduced-motion:reduce){html:not(.v26-pinned) .v26-stage-item::before,html:not(.v26-pinned) .v26-stage-num{transition:none}}
html.quiet:not(.v26-pinned) .v26-stage-item::before,html.quiet:not(.v26-pinned) .v26-stage-num,html.reduced-motion:not(.v26-pinned) .v26-stage-item::before,html.reduced-motion:not(.v26-pinned) .v26-stage-num{transition:none}
.v26-stages-queen{display:none}
html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stages-queen{--qh:136px;--pw:calc(var(--qh) * .7);--pt:10px;display:block;position:relative;width:var(--pw);height:calc(var(--qh) + var(--pw) * .15 + var(--pt));pointer-events:none}
/* sprite: base centre at (235, 888) of 618 x 955; it stands on the centre of the plinth's top face */
.v26-stages-queen-body,.v26-stages-queen-refl{position:absolute;left:calc(var(--pw) / 2 - var(--qh) * .2646);width:calc(var(--qh) * .696);max-width:none;height:auto}
.v26-stages-queen-body{top:0;z-index:2}
/* her mirror image only shows on the glass top face */
.v26-stages-queen-refl{top:calc(var(--qh) * .974);z-index:1;opacity:.7;-webkit-mask:radial-gradient(50% 18.6% at 38% 4.6%, #000 55%, transparent 100%);mask:radial-gradient(50% 18.6% at 38% 4.6%, #000 55%, transparent 100%)}
.v26-stages-plinth{position:absolute;left:0;top:calc(var(--qh) - var(--pw) * .15);width:var(--pw);height:calc(var(--pw) * .3 + var(--pt))}
.v26-stages-plinth::before{content:'';position:absolute;left:0;right:0;top:calc(var(--pw) * .15);bottom:0;border-radius:0 0 50% 50% / 0 0 calc(var(--pw) * .15) calc(var(--pw) * .15);
  background:linear-gradient(90deg, #0a2250, #2c66c8 42%, #6c9ee8 58%, #0d2b62);box-shadow:inset 0 -1px 0 rgb(200 222 255 / 35%), 0 14px 22px -12px rgb(0 0 0 / 80%)}
.v26-stages-plinth::after{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--pw) * .3);border-radius:50%;
  background:radial-gradient(closest-side, rgb(226 238 255 / 95%), #7aaef6 34%, #2a62c4 74%, #1a4596);box-shadow:inset 0 0 0 1px rgb(226 238 255 / 60%), 0 0 26px 2px rgb(127 178 255 / 55%)}
html:not(.v26-pinned) .v26-stage-card{grid-column:2;grid-template-columns:minmax(0, calc(200px * var(--scale, 1))) minmax(0, 1fr);column-gap:clamp(20px, 3vw, 36px);align-items:start}
html:not(.v26-pinned) .v26-stage-side{display:grid;gap:8px;align-content:start;grid-column:1;grid-row:1 / span 2}
html:not(.v26-pinned) .v26-stage-main{display:grid;gap:10px;grid-column:2;grid-row:1}
html:not(.v26-pinned) .v26-stage-main>*{grid-column:auto;grid-row:auto}
html:not(.v26-pinned) .v26-stage-head{justify-content:flex-start}
html.v26:not(.v26-pinned) .v26-stages .v26-stage-date{grid-column:auto}
html:not(.v26-pinned) .v26-stage-actions{grid-column:2;grid-row:2;margin-top:6px}
/* a long label wraps inside the card's text column instead of crossing the panel rim (enlarged text, CR-STAGES-R3-01) */
html:not(.v26-pinned) .v26-stage-actions .v26-btn{max-width:100%;white-space:normal;text-align:center}
/* wide static layout (reduced motion, ≥1180 px, normal text size): the still board stands beside the timeline */
@media (min-width:1180px){
  html:not(.v26-pinned):not(.enlarged) .v26-stages-layout{display:grid;grid-template-columns:minmax(0, 880px) minmax(340px, 1fr);column-gap:clamp(40px, 4vw, 80px);align-items:start}
  html:not(.v26-pinned):not(.enlarged) .v26-board{display:block;position:sticky;top:110px;height:min(640px, calc(100vh - 150px));margin-top:clamp(110px, 9vw, 150px)}
  /* the board already shows the queen at the calendar stage: the timeline keeps a lit node only */
  html:not(.v26-pinned):not(.enlarged) .v26-stage-item.is-cal .v26-stages-queen{display:none}
}
/* tablets, enlarged text: the queen stands under the stage's number and date */
@media (min-width:761px){
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-side{grid-row:1}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stages-queen{--qh:124px;grid-column:1;grid-row:2 / span 2;align-self:start;margin:12px 0 2px 2px}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-main{grid-row:1}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-actions{grid-row:2;align-self:start}
}
html:not(.v26-pinned) .v26-route-chips{display:none}

@media (max-width:760px){
  .v26-stages{--gut:46px}
  html:not(.v26-pinned) .v26-stages-frame{padding-right:18px}
  html:not(.v26-pinned) .v26-stage-card{grid-template-columns:minmax(0, 1fr);row-gap:10px}
  html:not(.v26-pinned) .v26-stage-side{grid-row:auto;grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
  html:not(.v26-pinned) .v26-stage-main{grid-column:1;grid-row:auto}
  html:not(.v26-pinned) .v26-stage-actions{grid-column:1;grid-row:auto}
  .v26-stage-actions .v26-btn{flex:1 1 220px;padding-inline:clamp(16px, 5vw, 28px)}
  /* phones: the queen (about 120 px) stands at the card's top right, beside the number, date and title; the text runs full width below */
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-card{grid-template-columns:minmax(0, 1fr) auto;column-gap:14px}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stages-queen{--qh:120px;grid-column:2;grid-row:1 / span 2;align-self:end;margin-right:2px}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-side{grid-column:1;grid-row:1}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-main{display:contents}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-head{grid-column:1;grid-row:2;align-self:end}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-text{grid-column:1 / -1;grid-row:3}
  html:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-actions{grid-column:1 / -1;grid-row:4}
  /* enlarged text: the queen stays beside the number and date only; the title gets the full width (no broken words) */
  html.enlarged:not(.v26-pinned) .v26-stage-item.is-cal .v26-stages-queen{grid-row:1}
  html.enlarged:not(.v26-pinned) .v26-stage-item.is-cal .v26-stage-head{grid-column:1 / -1}
}
/* the title sits on the page's pinned-title line (base --v26-pin-top), not centred in the leftover height */
html.v26-pinned .v26-stages-layout{align-items:start}
@media (max-height:700px){html.v26-pinned .v26-stages-copy{gap:14px}html.v26-pinned #stages .v26-stages-frame{--pad-t:18px;--pad-x:22px}}
/* Round 4 (verify3): the route lights square by square — the plate is the same render with the route unlit,
   and each lit square is its own additive layer (sources/v26/queen-motion/route-layers), lit as she lands. */
.v26-board-route{position:absolute;inset:0;pointer-events:none}   /* no filter here: it would isolate the additive blend */
.v26-board-route i{position:absolute;display:block;background:no-repeat 0 0/100% 100%;mix-blend-mode:plus-lighter;opacity:0}   /* in the camera's layer (perf 2026-10-17) */
@supports not (mix-blend-mode:plus-lighter){.v26-board-route i{mix-blend-mode:screen}}
/* the plate may end above the frame's bottom on the establishing view: its lower edge fades into the floor */
.v26-board-plate{-webkit-mask:linear-gradient(90deg, transparent 0, #000 14%, #000 94%, transparent 100%), linear-gradient(180deg, #000 0, #000 88%, transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg, transparent 0, #000 14%, #000 94%, transparent 100%), linear-gradient(180deg, #000 0, #000 88%, transparent 100%);mask-composite:intersect}
/* a soft shadow on the square under her while she is carried, so the lift reads as height above the board */
.v26-board-shadow{position:absolute;left:-50px;top:-21px;width:100px;height:42px;z-index:2;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side, rgb(0 6 22 / 85%), rgb(0 6 22 / 40%) 55%, transparent);filter:blur(2px)}
/* labels glide to a new spot relative to their square (JS: chipAnim), never lagging behind the moving board */
/* edits 2.0: no stage numbers; the deadline in the plaque's top-right corner, prev / next at its bottom-right */
.v26-stage-side:empty{display:none}
html.v26-pinned .v26-stage-card{grid-template-columns:minmax(0, 1fr) auto;align-items:center}
html.v26-pinned .v26-stage-head{grid-column:1;grid-row:1;padding-right:0}
html.v26.v26-pinned .v26-stages .v26-stage-date{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;padding:5px 12px;border-radius:999px;white-space:nowrap;
  font-size:var(--v26-caption);line-height:1.35;color:#dbe7f8;background:rgb(42 107 224 / 16%);box-shadow:inset 0 0 0 1px rgb(150 196 255 / 30%)}
html.v26-pinned .v26-stage-text{grid-column:1 / -1}
html.v26-pinned .v26-stages-frame{padding-bottom:calc(var(--pad-t) + 54px)}
html.v26-pinned .v26-stages-stepper{top:auto;bottom:calc(var(--pad-t) - 6px)}
/* a long date and title share the top line down to 1024 px wide; below a 420 px plaque the date goes under the title */
@media (max-width:1180px){html.v26.v26-pinned .v26-stages .v26-stage-date{white-space:normal;text-align:right}}
/* @end stages */

/* @section results */
/* «Еволюція проєкту» (client edits 2026-10-20): every season had its own queen, and they differ — S1 the flat
   white silhouette of the first key visual (SVG), S2 the glossy white 3D queen, S3 the matte white queen with
   neon rings, S4 (the current season) the V26 crystal queen. They stand in one row on identical glass drums
   (same height, same light, same contact shadow); under them one timeline with the years. The active season's
   queen is lit — backlight, light pool on her drum, full opacity — the others step back (JS sets --lit per
   season, 0 … 1, and --sp, the light's travel along the timeline). Its facts read in ONE glass panel beside the
   row; the contents cross-fade (JS): the old season's text is gone before the new one shows.
   Head: the H2 and the one accent left of the old intro (12 000+), on the split-head column line (7 : 5).
   Body: the row (7) | the panel (5), on one top and one bottom line. The row is a tab list: the queens size
   from the column width (≤ 1.72 × the column, so the drums never touch) and, pinned, from the frame height left
   under the head (JS sets --qh-max). Below 1024 px (and with enlarged text below 1280) the panel follows the row.
   The cases block («Як змінювалися бізнеси») is gone (edits 2026-10-20). No outline numerals, no dot fields. */
.v26-results{--evo-gap:clamp(32px, 5vw, 96px)}
.v26-results h3,html.v26.enlarged .v26-results h3{-webkit-hyphens:manual;hyphens:manual}
.v26-results-head{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);column-gap:var(--evo-gap);align-items:end;margin-bottom:clamp(28px, 4vh, 56px)}
html.v26 .v26-results-head .v26-h2{max-width:25ch}
/* the accent: the figure beside its label, standing on the H2's last line */
.v26-evo-total{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(14px, 1.4vw, 22px);margin:0 0 .15em!important}
.v26-evo-total b{flex:none;font-size:var(--v26-num-l);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 28px rgb(120 176 255 / 45%)}
/* (the label takes the row beside the figure while 14 characters fit there — with enlarged text it goes under it) */
html.v26 .v26-evo-total>span{flex:1 1 14ch;min-width:min(100%, 14ch);max-width:24ch;font-size:var(--v26-body);line-height:1.45;color:var(--v26-muted)}
.v26-evo-body{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);column-gap:var(--evo-gap);align-items:stretch}
/* ---------- the row: four seasons on one timeline ----------
   One subgrid for the four tabs: the figures stand on one bottom line, the rail (dots + line), the years and
   the captions share their rows. --qh: the queen's height; the drum (--pw wide, side --ps, top face --pe)
   scales with it, so every queen meets her drum the same way. */
.v26-evo-row{
  --qh:min(43cqw, var(--qh-max, 46vh));--pw:calc(var(--qh) * .52);--pe:calc(var(--pw) * .16);--ps:calc(var(--pw) * .13);
  container-type:inline-size;position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-rows:1fr 30px auto auto;min-width:0
}
/* the timeline: one quiet line from the first season to the last, and the light along it (--sp) */
.v26-evo-row::before,.v26-evo-row::after{content:'';grid-row:2;grid-column:1 / -1;align-self:center;justify-self:start;margin-left:12.5%;height:1px;pointer-events:none}
.v26-evo-row::before{width:75%;background:rgb(150 196 255 / 22%)}
.v26-evo-row::after{width:calc(75% * var(--sp, 0));height:2px;background:linear-gradient(90deg, rgb(120 170 250 / 40%), #a9cdff);box-shadow:0 0 12px rgb(127 178 255 / 75%)}
.v26-evo-season{
  --lit:0;position:relative;grid-row:1 / span 4;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0, 1fr);justify-items:center;min-width:0;margin:0;padding:0 2px 6px;
  border:0;border-radius:var(--v26-r-md);background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent
}
.v26-evo-season:first-child{--lit:1}
.v26-section .v26-evo-season:focus-visible{outline:2px solid #b9daff;outline-offset:2px}
/* the dot on the timeline: lit with its season */
.v26-evo-season::before{content:'';grid-row:2;align-self:center;z-index:1;width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb, #dceaff calc(var(--lit) * 100%), #1d3a6c);box-shadow:0 0 0 1px rgb(150 196 255 / 40%), 0 0 calc(14px * var(--lit)) rgb(127 178 255 / 90%)}
.v26-evo-figure{grid-row:1;align-self:end;position:relative;display:block;width:100%;height:calc(var(--qh) * 1.05 + var(--ps) + var(--pe) / 2);pointer-events:none}
/* backlight behind the lit queen (≤ 16 px past its column: never wider than the page's gutter) */
.v26-evo-aura{position:absolute;left:50%;bottom:calc(var(--ps) + var(--pe) * .3);width:min(calc(var(--qh) * .92), calc(100% + 32px));height:calc(var(--qh) * 1.04);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgb(150 196 255 / 30%), rgb(60 122 240 / 13%) 56%, transparent);opacity:var(--lit)}
/* the queen: her base meets the drum's top face; the others step back into the shade — darker, a little smaller,
   still solid (a translucent piece let the drum's rim show through her base) */
.v26-evo-queen{position:absolute;left:50%;bottom:calc(var(--ps) + var(--pe) / 2 - var(--qh) * var(--sink, .02));display:block;width:auto;max-width:none;height:var(--qh);
  transform:translateX(-50%) scale(calc(.93 + .07 * var(--lit)));transform-origin:50% 100%;filter:brightness(calc(.5 + .5 * var(--lit)))}
/* each season in its own column (explicit: the timeline items already hold row 2 across all four) */
.v26-evo-season:nth-child(1){grid-column:1;--sink:0}
.v26-evo-season:nth-child(2){grid-column:2;--sink:.022}
.v26-evo-season:nth-child(3){grid-column:3;--sink:.02}
.v26-evo-season:nth-child(4){grid-column:4;--sink:.024}
/* the glass drum (the old result drum, one per season): side, top face, floor shadow */
.v26-evo-plinth{position:absolute;left:50%;bottom:0;width:var(--pw);height:calc(var(--ps) + var(--pe));transform:translateX(-50%)}
.v26-evo-plinth::after{content:'';position:absolute;left:-12%;right:-12%;bottom:calc(var(--pe) * -.8);height:calc(var(--pe) * 2);border-radius:50%;background:radial-gradient(closest-side, rgb(0 4 14 / 76%), transparent);z-index:-1}
.v26-evo-plinth::before{content:'';position:absolute;left:0;right:0;top:calc(var(--pe) / 2);bottom:0;border-radius:0 0 50% 50% / 0 0 calc(var(--pe) / 2) calc(var(--pe) / 2);
  background:
    radial-gradient(52% 120% at 50% 0%, rgb(150 198 255 / calc(.1 + .5 * var(--lit))), transparent 70%),
    linear-gradient(90deg, rgb(178 212 255 / 46%) 0%, rgb(96 152 246 / 22%) 7%, rgb(52 108 220 / 16%) 22%, rgb(10 32 80 / 30%) 52%, rgb(14 44 104 / 22%) 80%, rgb(120 170 250 / 26%) 94%, rgb(214 232 255 / 52%) 100%),
    linear-gradient(180deg, rgb(70 128 236 / 40%) 0%, rgb(20 60 150 / 34%) 38%, rgb(6 22 56 / 76%) 100%);
  box-shadow:inset 0 -1.5px 0 rgb(170 208 255 / 55%), inset 0 2px 6px rgb(190 220 255 / 22%)}
.v26-evo-plinth i{position:absolute;left:0;right:0;top:0;height:var(--pe);border-radius:50%;
  background:radial-gradient(60% 140% at 34% 20%, rgb(196 224 255 / 46%), rgb(84 142 240 / 30%) 52%, rgb(30 78 176 / 40%));
  box-shadow:inset 0 0 0 1px rgb(178 212 255 / 46%), inset 0 -1.5px 0 rgb(240 247 255 / 90%), 0 0 10px rgb(120 176 255 / 18%)}
/* on the top face: the light pool of the lit season and the contact shadow under every base */
.v26-evo-plinth i::before{content:'';position:absolute;left:6%;right:6%;top:-20%;bottom:-40%;border-radius:50%;background:radial-gradient(closest-side, rgb(214 236 255 / 90%), rgb(120 176 255 / 46%) 50%, transparent);opacity:calc(.12 + .88 * var(--lit))}
.v26-evo-plinth i::after{content:'';position:absolute;left:17%;right:17%;top:24%;bottom:6%;border-radius:50%;background:radial-gradient(closest-side, rgb(0 10 30 / 82%), rgb(0 10 30 / 40%) 62%, transparent)}
/* years and captions */
.v26-evo-year{grid-row:3;padding-top:6px;font-size:calc(17px * var(--scale, 1));line-height:1.3;letter-spacing:-.01em;white-space:nowrap;color:color-mix(in srgb, #fff calc(var(--lit) * 100%), #9fb6d8)}
.v26-evo-name{grid-row:4;padding-top:2px;font-size:var(--v26-caption);line-height:1.35;color:color-mix(in srgb, #cfe0f7 calc(var(--lit) * 100%), #8aa3c8)}
@media (hover:hover){.v26-evo-season:hover .v26-evo-year{color:#fff}}
/* ---------- the panel: one glass, the season's facts cross-fade inside it ----------
   The four panels share one cell (its height = the tallest, so the pinned layout never moves) and stand on its
   bottom line, the row's bottom line. The glass behind them takes the height of the season shown (JS sets --gh
   from the position, so it grows and settles with the change): no empty glass above a short season. Stacked
   (below 1024 / enlarged text) the panels hang from the top and the cell itself follows the glass, so the page
   below never jumps. */
.v26-evo-panels{position:relative;isolation:isolate;display:grid;min-width:0;container-type:inline-size}
.v26-evo-panels>.v26-evo-glass{position:absolute;left:0;right:0;bottom:0;height:var(--gh, 100%);z-index:0;pointer-events:none}
.v26-evo-panel{--pp:clamp(24px, 2.6vw, 40px);position:relative;z-index:1;grid-area:1 / 1;align-self:end;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--pp)}
.v26-evo-panel:not(#evo-panel-1){opacity:0;visibility:hidden}
.v26-evo-panel .v26-sp-head{display:grid;gap:12px;justify-items:start;margin-bottom:clamp(18px, 2.6vh, 32px)}
html.v26 .v26-evo-panel .v26-h3{max-width:100%;text-wrap:balance}
.v26-evo-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.v26-evo-panel .v26-stat--lead{display:grid;gap:8px;align-content:start}
.v26-evo-panel .v26-stat--lead b{font-size:min(var(--v26-num-xl), 22cqw);line-height:1;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
html.v26 .v26-evo-panel .v26-stat--lead>span{font-size:var(--v26-lead);line-height:1.4;color:#d7e3f4}
/* season 4: a seven-digit fund — the figure fits the panel, «грн» rides beside it */
.v26-evo-panel .v26-stat--fund b{font-size:min(var(--v26-num-xl), 13.5cqw)}
.v26-stat--fund b small{margin-left:.06em;font-size:.4em;letter-spacing:0;color:#d7e3f4}
/* the rest: a ledger — figure | label rows on shared rules */
.v26-evo-facts{--fn:var(--v26-num-m);list-style:none;align-self:stretch;margin:clamp(14px, 2vh, 22px) 0 0;padding:0;display:grid}
.v26-evo-facts li{display:grid;grid-template-columns:calc(var(--fn) * 2.4) minmax(0, 1fr);column-gap:clamp(12px, 1.2vw, 20px);align-items:center;padding-block:clamp(9px, 1.25vh, 13px);border-top:1px solid var(--v26-line)}
.v26-evo-facts b{font-size:var(--fn);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
html.v26 .v26-evo-facts li>span{font-size:var(--v26-body);line-height:1.4;color:var(--v26-muted)}
.v26-evo-cta{margin-top:clamp(14px, 2vh, 22px)}
/* ---------- pinned frame ---------- */
/* fit guard: pinned page, but Results did not fit the frame — it reads as a normal section */
html.v26-pinned .v26-results.is-flow{height:auto;padding-block:var(--v26-section-pad)}
html.v26-pinned #results.is-flow .v26-pin{position:relative;top:auto;height:auto;overflow:visible;display:block;padding:0}
/* low laptops (1366 × 768, 1280 × 720): the spacing tightens, the lead figure steps down one token */
@media (max-height:820px){
  .v26-results-head{margin-bottom:22px}
  .v26-evo-panel{--pp:22px 26px}
  .v26-evo-panel .v26-sp-head{gap:10px;margin-bottom:14px}
  .v26-evo-panel .v26-stat--lead{gap:4px}
  .v26-evo-panel .v26-stat--lead b{font-size:min(var(--v26-num-l), 22cqw)}
  .v26-evo-panel .v26-stat--fund b{font-size:min(var(--v26-num-l), 13.5cqw)}
  .v26-evo-facts{margin-top:10px}
  .v26-evo-facts li{padding-block:7px}
  .v26-evo-row{grid-template-rows:1fr 24px auto auto}
}
/* laptops with ≈ 650 px of window (1366 × 768 with the browser bar): the lead figure and its label share a line,
   the ledger rows close up and the button steps down, so the whole season still fits the pinned frame */
@media (max-height:700px){
  .v26-results-head{margin-bottom:16px}
  .v26-evo-panel .v26-sp-head{margin-bottom:10px}
  .v26-evo-panel .v26-stat--lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .v26-evo-facts li{padding-block:5px}
  .v26-evo-cta{min-height:42px;margin-top:10px;padding:10px 20px}
}
/* tall screens (1920 × 1080 and up), pinned: the figures grow with the frame, so the scene fills it */
@media (min-height:1000px) and (min-width:1600px){
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panel .v26-stat--lead b{font-size:min(clamp(var(--v26-num-xl), 8.2vh, calc(var(--v26-num-xl) * 1.25)), 22cqw)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panel .v26-stat--fund b{font-size:min(clamp(var(--v26-num-xl), 8.2vh, calc(var(--v26-num-xl) * 1.25)), 13.5cqw)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-facts li{padding-block:clamp(13px, 1.6vh, 20px)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-facts{--fn:clamp(var(--v26-num-m), 3.6vh, calc(var(--v26-num-m) * 1.3))}
}
/* very wide and tall frames (2560 × 1440): the 1680 container leaves the row narrow for the frame, so the row takes
   two thirds of it — the queens grow with the columns (the panel keeps ≥ 520 px) */
@media (min-width:2200px) and (min-height:1200px){.v26-results-head,.v26-evo-body{grid-template-columns:minmax(0, 8fr) minmax(0, 4fr)}}
/* tall portrait frames (iPad Pro 12.9″ upright, 1024 × 1366): side by side the queens are width-capped and the lower
   third stays empty, so the row takes the full width and the card goes under it in two columns (facts on the right) */
@media (min-width:1024px) and (orientation:portrait) and (min-height:1100px){
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-body{grid-template-columns:minmax(0, 1fr);row-gap:clamp(28px, 3vh, 44px)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-row{--qh:min(40cqw, 30vh, 440px)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panels{align-items:start}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panels>.v26-evo-glass{top:0;bottom:auto}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panel{align-self:start;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:var(--evo-gap);align-content:start}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-panel>*{grid-column:1}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-facts{grid-column:2;grid-row:1 / span 4;margin-top:0;align-self:start}
  html.v26-pinned .v26-results:not(.is-flow) .v26-evo-cta{justify-self:start}
}
/* ---------- static flow below 1024 px (and enlarged text below 1280): the panel follows the row ---------- */
@media (max-width:1023px){
  .v26-results-head{grid-template-columns:minmax(0, 1fr);row-gap:18px}
  .v26-evo-body{grid-template-columns:minmax(0, 1fr);row-gap:clamp(20px, 3vw, 32px)}
  .v26-evo-row{--qh:min(42cqw, 40vh, 420px)}
  .v26-evo-panels{align-items:start}
  .v26-evo-panels>.v26-evo-glass{top:0;bottom:auto}
  .v26-evo-panel{align-self:start}
}
@media (max-width:1279px){
  html.enlarged .v26-evo-body{grid-template-columns:minmax(0, 1fr);row-gap:24px}
  html.enlarged .v26-evo-row{--qh:min(42cqw, 44vh, 420px)}
  html.enlarged .v26-evo-panels{align-items:start}
  html.enlarged .v26-evo-panels>.v26-evo-glass{top:0;bottom:auto}
  html.enlarged .v26-evo-panel{align-self:start}
}
/* (the base gives enlarged heads a plain 1fr; here the track never grows past the column with a long figure) */
html.enlarged .v26-results .v26-results-head{grid-template-columns:minmax(0, 1fr);row-gap:18px}
/* phones: the year steps down, captions may take two lines */
@media (max-width:600px){
  .v26-evo-row{grid-template-rows:1fr 26px auto auto}
  .v26-evo-year{font-size:calc(13px * var(--scale, 1))}
  .v26-evo-name{max-width:11ch}
  .v26-evo-panel{--pp:22px 20px}
  .v26-evo-total{align-items:flex-start}
}
/* the narrowest phones: «2025–2026» never touches its neighbour */
@media (max-width:380px){.v26-evo-year{font-size:calc(12px * var(--scale, 1))}}
/* enlarged text on phones: a long label wraps under its figure's column, years may wrap */
@media (max-width:560px){html.enlarged .v26-evo-facts li{grid-template-columns:minmax(0, max-content) minmax(0, 1fr)}html.enlarged .v26-evo-year{white-space:normal;max-width:100%}html.enlarged .v26-evo-name{font-size:min(var(--v26-caption), 3.8vw)}}
html.contrast .v26-evo-year,html.contrast .v26-evo-name{color:#fff}
html.contrast .v26-evo-season[aria-selected="true"] .v26-evo-year{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* @end results */

/* @section stories */
/* Ribbon of verified Дія.Бізнес stories. Desktop shows ~2.3 cards so the ribbon really moves
   (drag with inertia, arrows, keyboard); the grab cursor appears only while it overflows. One
   subgrid keeps season / name / business / result / link rows aligned across cards. Photos get one
   shared grade (slight desaturation + a cobalt fade under the caption plate; faces untouched, the
   plate never lands on a face: each photo carries its own focal point --fy, measured chin clearance
   ≥ 26 px at 360–2560 px and 150 % text) and the caption sits on a sapphire glass plate that overlaps the lower
   edge of the photo — the photo is the underlay the glass refracts. A close-up portrait is shown
   whole (--fit) on a blurred, darkened extension of itself, so all three faces sit above the plate
   at similar scale. The caption plate of a card that the ribbon edge cuts fades out with its text (JS sets --tv).
   Hover: tilt ≤ 6° on an inner wrapper. */
.v26-stories{--rt:var(--v26-h3)}
/* the head is the H2 alone: the intro beside it is gone (client edits 2026-10-20) */
html .v26-stories .v26-story h3{-webkit-hyphens:manual;hyphens:manual}
.v26-stories .v26-nobr{white-space:nowrap}
.v26-rail{
  /* desktop: two whole cards and a ≤ 96 px hint of the third, so the rail's end leaves the same ≤ 96 px
     stub of the first card (NEW-E-06: never a near-empty slab at either end) */
  --gap:24px;--peek:76px;--overlap:clamp(44px, 4.4vw, 68px);
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--gap) - var(--peek)) / 2);
  grid-template-rows:auto auto auto auto 1fr auto;column-gap:var(--gap);row-gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:-16px -4px 0;padding:16px 4px 28px;scroll-padding-inline:4px;outline-offset:6px
}
.v26-rail::-webkit-scrollbar{display:none}
.v26-rail.is-scrollable{cursor:grab;-webkit-mask:linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);mask:linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%)}
.v26-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.v26-rail.is-dragging *{user-select:none}
.v26-rail.is-dragging a{pointer-events:none}
.v26-rail img{-webkit-user-drag:none;user-select:none}
.v26-story{grid-row:span 6;display:grid;grid-template-rows:subgrid;scroll-snap-align:start;min-width:0}
.v26-story-in{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-width:0;transform:perspective(1100px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));transform-origin:50% 45%;transition:transform 420ms var(--v26-ease)}
.v26-story-photo{position:relative;grid-row:1;aspect-ratio:3 / 2;margin-bottom:calc(-1 * var(--overlap));border-radius:var(--v26-r-lg) var(--v26-r-lg) 0 0;overflow:hidden;background:#071a37;isolation:isolate;
  /* the photo melts into the caption plate: no bottom rim, no corners beside the plate (E3-06) */
  --pm:linear-gradient(180deg, #000 calc(100% - var(--overlap) - 40px), rgb(0 0 0 / 50%) calc(100% - var(--overlap)), transparent calc(100% - var(--overlap) + 26px));-webkit-mask:var(--pm);mask:var(--pm)}
.v26-story-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--fy, 20%);filter:saturate(.8) contrast(1.03);transition:transform 600ms var(--v26-ease), filter 500ms var(--v26-ease)}
/* one shared grade: a cobalt fade rising from the bottom (under the glass plate, below every chin),
   a cool wash on the edges — the faces stay untouched */
.v26-story-photo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgb(6 26 66 / 0) var(--gy, 50%), rgb(18 56 132 / 30%) calc(var(--gy, 50%) + 20%), rgb(4 18 46 / 88%) 100%), radial-gradient(130% 90% at 50% 30%, transparent 58%, rgb(8 30 76 / 42%) 100%);
  box-shadow:inset 0 0 0 1px rgb(166 198 238 / 18%)}
/* close-up portrait: the whole square photo, centred, its sides melting into a blurred, darkened
   extension of the same picture — the chin stays well above the plate at every aspect ratio */
.v26-story-photo--fit{--gy:76%}
.v26-story-photo--fit::before{content:'';position:absolute;inset:-40px;z-index:-1;background:var(--src) 50% 40% / cover no-repeat;filter:blur(26px) saturate(.5) brightness(.42)}
.v26-story-photo--fit img{position:absolute;top:0;bottom:0;left:0;right:0;width:auto;height:100%;max-width:100%;margin-inline:auto;object-fit:cover;object-position:50% 0;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);mask:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%)}
.v26-story:hover .v26-story-photo img{transform:scale(1.04) translateY(-6px);filter:saturate(1) contrast(1.02)}
.v26-story-copy{grid-row:2 / -1;display:grid;grid-template-rows:subgrid;row-gap:8px;justify-items:start;align-items:start;position:relative;z-index:1;margin-inline:14px;padding:20px 22px 12px;border-radius:var(--v26-r-md)}
/* a card cut by the ribbon edge keeps its photo; its caption plate fades out with its text (JS sets --tv),
   so a peek never shows an empty glass slab */
.v26-story-copy{opacity:var(--tv, 1)}
html.v26 .v26-story-copy.v26-glass{border-radius:var(--v26-r-md);
  /* a denser tint under the plate's top edge, so photo highlights never bleed through the caption */
  background:linear-gradient(180deg, rgb(8 26 62 / 62%) 0, rgb(8 26 62 / 22%) 64px, transparent 110px),
    radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 16%), transparent 60%),
    linear-gradient(158deg, rgb(40 92 180 / 22%) 0%, rgb(14 40 88 / 36%) 36%, rgb(6 20 46 / 58%) 100%)}
.v26-story-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px!important}
html.v26 .v26-stories .v26-story-copy .v26-h3{align-self:end;font-size:var(--rt)}
.v26-story-biz{color:var(--v26-faint)!important;font-size:var(--v26-body)}
/* reserved: the source has no city yet — the slot stays hidden until the organisers confirm it */
.v26-story-city::before{content:' · '}
.v26-story-result{margin-top:4px!important;color:#d6e2f3!important;max-width:46ch}
.v26-story-copy .v26-text-link{align-self:end;margin-top:2px;min-height:44px}
.v26-rail-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:8px}
/* entrance: a short rise, one after another (80 ms), triggered once for the whole rail. No horizontal travel:
   a card waiting at +72 px stuck out of the 3-up grid and widened the layout viewport on touch tablets
   until the reveal (verify5 NEW5-G4 / E5-09) */
html.v26-motion .v26-rail>.v26-story[data-reveal-item]{transform:translate3d(0, 24px, 0);transition:opacity 560ms var(--v26-ease), transform 680ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 80ms)}
html.v26-motion .v26-rail>.v26-story[data-reveal-item].is-in{transform:none}
@media (min-width:1800px){.v26-rail{--gap:28px;--peek:84px}}
/* tablets: two whole cards per view (a cut card would only show an empty plate), the third one swipes in */
@media (max-width:1000px){.v26-rail{grid-auto-columns:calc((100% - var(--gap)) / 2)}.v26-story-photo{aspect-ratio:6 / 5}}
@media (max-width:700px){
  .v26-rail{grid-auto-columns:84%;--gap:14px;scroll-padding-inline:4px}
  .v26-story-photo{aspect-ratio:1 / 1}
  .v26-story-copy{margin-inline:10px;padding:18px 18px 10px}
}
html.enlarged .v26-rail{grid-auto-columns:calc((100% - var(--gap)) / 2)}
@media (min-width:1001px){html.enlarged .v26-rail{grid-auto-columns:calc((100% - var(--gap) - var(--peek)) / 2)}html.enlarged .v26-story-photo{aspect-ratio:16 / 10}}
@media (max-width:700px){html.enlarged .v26-rail{grid-auto-columns:88%}}
@media (prefers-reduced-motion:reduce){.v26-story-in{transition:none}}
/* Approved 2026-10-15 (variant A, «стандартно, але гарно»): each story is one glass card — the photo (4:3)
   inside it, then season, name, business, result, and «Читати історію» on the cards' common bottom line. */
#stories .v26-story-in{display:flex!important;flex-direction:column;height:100%;padding:12px;border-radius:var(--v26-r-lg);transform:none!important;
  background:linear-gradient(170deg, rgb(28 70 150 / 34%), rgb(8 26 58 / 72%));box-shadow:inset 0 0 0 1px rgb(170 205 255 / 20%), 0 30px 60px -40px rgb(0 8 30 / 90%)}
#stories .v26-story-photo{margin:0!important;aspect-ratio:4 / 3!important;border-radius:calc(var(--v26-r-lg) - 8px)!important}
#stories .v26-story-photo img{object-position:50% 22%!important;filter:none!important}
/* a crisp rounded photo, as in the approved mock: none of the V25 overlap treatment survives here — no bottom
   mask (it fogged the lower third and ate the bottom corners), no cobalt grade, no blurred side extension
   (verify5 E5-03) */
#stories .v26-story-photo{-webkit-mask:none!important;mask:none!important}
#stories .v26-story-photo::after,#stories .v26-story-photo::before{content:none!important}
#stories .v26-story-photo--fit img{position:static;width:100%;height:100%;max-width:none;margin:0;-webkit-mask:none;mask:none;object-position:50% 18%!important}
#stories .v26-story-copy{display:flex!important;flex-direction:column;align-items:flex-start!important;text-align:left!important;flex:1;gap:8px;margin:0!important;padding:20px 14px 12px!important;
  background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:1!important}
#stories .v26-story-copy::before,#stories .v26-story-copy::after{content:none!important}
#stories .v26-story-copy>*{align-self:flex-start!important;justify-self:start!important;margin-inline:0!important;text-align:left!important}
/* the name follows the text size (125 / 150 %), so it stays above the result text (verify5 E5-05) */
#stories .v26-story-copy .v26-h3{font-size:calc(clamp(22px, 1.6vw, 28px) * var(--scale, 1));margin-top:4px}
#stories .v26-story-biz{color:#9cc2ff!important}
#stories .v26-story-copy .v26-text-link{margin-top:auto!important;padding-top:14px}
#stories .v26-story:hover .v26-story-in{box-shadow:inset 0 0 0 1px rgb(200 225 255 / 36%), 0 36px 70px -40px rgb(20 70 180 / 70%)}
/* three stories fit one row on desktop: a plain grid, no rail controls. One row only: the rail's six subgrid
   rows and a shared gap left five empty row gaps under the cards, so the source note floated 110–148 px
   below them; it now sits 24 px under the cards (verify5 E5-04) */
@media (min-width:1001px){
  #stories .v26-rail{display:grid!important;grid-template-columns:repeat(3, minmax(0, 1fr))!important;grid-template-rows:none!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;row-gap:0!important;column-gap:clamp(16px, 1.6vw, 28px)!important;overflow:visible!important;-webkit-mask:none!important;mask:none!important;padding:0!important}
  #stories .v26-story{display:block!important;grid-row:auto!important;translate:none!important}
  #stories [data-rail-controls]{display:none!important}
  #stories .v26-rail-foot{margin-top:24px}
}
/* edits 2.0: smaller story cards — a lower photo and a tighter text block */
#stories .v26-story-photo{aspect-ratio:16 / 10!important}
@media (max-width:700px){#stories .v26-story-photo{aspect-ratio:5 / 4!important}}
#stories .v26-story-in{padding:10px}
#stories .v26-story-copy{gap:6px;padding:16px 12px 8px!important}
#stories .v26-story-copy .v26-h3{font-size:calc(clamp(20px, 1.45vw, 26px) * var(--scale, 1))}
/* @end stories */

/* @section people */
/* «Спікери Національного лекторію» is one line on desktop (the shared 22ch cap broke it as «… / лекторію», E1 review) */
html.v26 #people-title{max-width:32ch}
/* Speakers of the National lectorium — variant A (approved by the user 2026-10-16 for 20–30 people): a compact portrait
   grid (6 / 4 / 3 / 2 per row) with the name and position under each colour portrait (feedback 2026-10-15: no
   black-and-white, no «Демо»); the first 12 and «Показати всіх (N)» (TZ 381); a click opens the person panel with the
   topic and bio (right drawer, bottom sheet on phones), browsable with ←/→. Entrance: grid order, 60 ms apart (TZ 384).
   2026-10-20 (client edits E1): mentors and bootcamp experts are removed, so the tabs are gone and the block is titled
   by its one group; the menu item «Спікери та амбасадорки» lands here, the ambassadors follow below. */
.v26-people-head{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);align-items:end;margin-bottom:clamp(28px, 3vw, 48px)}
.v26-people-grid{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:clamp(22px, 2vw, 32px) clamp(14px, 1.4vw, 22px)}
.v26-pcard{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-width:0;cursor:pointer;border-radius:20px}
.v26-pcard-ph{display:block;position:relative;aspect-ratio:4 / 5;border-radius:18px;overflow:hidden;background:#0c2445;
  box-shadow:inset 0 0 0 1px rgb(170 205 255 / 22%), 0 18px 40px -28px rgb(30 90 200 / 70%)}
.v26-pcard-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 600ms var(--v26-ease)}
.v26-pcard-ph::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(190 220 255 / 0%);transition:box-shadow 300ms var(--v26-ease)}
.v26-pcard:hover .v26-pcard-ph img,.v26-pcard:focus-visible .v26-pcard-ph img{transform:scale(1.04)}
.v26-pcard:hover .v26-pcard-ph::after{box-shadow:inset 0 0 0 1.5px rgb(190 220 255 / 55%)}
.v26-pcard:focus-visible{outline:2px solid #b9daff;outline-offset:4px}
.v26-pcard-name{margin-top:10px;font-size:calc(17px * var(--scale, 1));line-height:1.25;color:#fff;text-wrap:balance}
.v26-pcard-role{font-size:calc(13.5px * var(--scale, 1));line-height:1.4;color:var(--v26-muted)}
.v26-people-more{display:flex;justify-content:center;margin-top:clamp(28px, 3vw, 40px)}
.v26-people-more[hidden]{display:none}
/* entrance: grid order, 60 ms apart — on first view (base reveal) and on «Показати всіх» (replay) */
html.v26-motion .v26-people-grid>.v26-person[data-reveal-item]{transition-delay:calc(var(--d, 0) * 60ms)}
@keyframes v26-person-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
html.v26-motion .v26-person.is-entering{animation:v26-person-in 520ms var(--v26-ease) both;animation-delay:calc(100ms + var(--k, 0) * 60ms)}
html.quiet .v26-person.is-entering{animation:none}
@media (prefers-reduced-motion:reduce){.v26-person.is-entering{animation:none}}
/* person panel (the module drawer's shell: right drawer, bottom sheet on phones) */
.v26-pdrawer{display:none;flex-direction:column;gap:14px}
.v26-pdrawer[open]{display:flex}
.v26-pdrawer::backdrop{background:rgb(1 7 18 / 62%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.v26-pd-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.v26-pd-group{margin:0;font-size:var(--v26-caption);letter-spacing:.04em;color:var(--v26-muted)}
.v26-pd-ph{margin:6px 0 4px;aspect-ratio:4 / 3;border-radius:20px;overflow:hidden;background:#0c2445;box-shadow:inset 0 0 0 1px rgb(170 205 255 / 22%)}
.v26-pd-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
html.v26 .v26-pd-name{margin:6px 0 0;color:#fff}
html.v26 .v26-pdrawer .v26-pd-role{align-self:flex-start;max-width:100%;white-space:normal;text-align:left}
.v26-pd-topic{margin:2px 0 0;color:#cfe1ff;font-size:var(--v26-body);line-height:1.5}
.v26-pd-topic:empty{display:none}
.v26-pd-bio{color:var(--v26-muted);font-size:var(--v26-body);line-height:1.6}
.v26-pd-bio p{margin:0 0 .8em}
.v26-pd-nav{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:16px;color:var(--v26-muted);font-variant-numeric:tabular-nums}
/* responsive grid */
@media (max-width:1279px){.v26-people-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (max-width:1000px){.v26-people-head{grid-template-columns:minmax(0, 1fr)}
  .v26-people-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (max-width:640px){.v26-people-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px 14px}
  .v26-pcard-name{font-size:calc(16px * var(--scale, 1))}
  .v26-pd-ph{aspect-ratio:16 / 10}}
/* enlarged text: fewer, larger portraits */
html.enlarged .v26-people-head{grid-template-columns:1fr}
html.enlarged .v26-people-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(200px * var(--scale, 1))), 1fr))}
html.contrast .v26-pcard-ph{box-shadow:inset 0 0 0 1px rgb(214 232 255 / 80%)}

/* Ambassadors (2026-10-20, client edits E1 «Додаємо екран з амбасадорками програми»; DEMO line-up — invented people and
   generated portraits until the organisers send the real list, see the HTML comment). Related to the speakers, not a
   copy: fewer, larger faces with a word about each, like the previous seasons' block (photo · name · 1–2 sentences).
   Horizontal glass cards: the portrait is set into the glass on the left (4:5, 20 px radius inside the 28 px card; the
   generated studio portraits share one navy backdrop and key light), the name on two lines, the role, one sentence;
   the text column starts on the portrait's top edge. 3 per row from 1280 px, 2 per row at 1024–1279; below 1024 a swipe
   rail of upright cards with arrow buttons (TZ: «Стрічка портретів»). Entrance (TZ: «портрети виїжджають по черзі
   знизу»): the cards rise one after another, 110 ms apart, and each portrait slides up inside its frame. */
.v26-amb-head{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);align-items:end}
html.v26 .v26-amb-head>.v26-body{justify-self:start;max-width:52ch}
.v26-amb-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(18px, 1.6vw, 28px)}
.v26-amb{display:grid;grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);column-gap:clamp(16px, 1.4vw, 26px);min-width:0;padding:10px}
/* the frame is at least 4:5 of its column (the ::before strut) and grows with the row when the text is taller */
.v26-amb-ph{position:relative;margin:0;align-self:stretch;border-radius:var(--v26-r-md);overflow:hidden;background:#0b1f45;
  box-shadow:inset 0 0 0 1px rgb(170 205 255 / 16%)}
.v26-amb-ph::before{content:'';display:block;padding-top:125%}
.v26-amb-ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform-origin:50% 100%}
/* the frame's hairline sits above the photograph */
.v26-amb-ph::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(190 218 255 / 18%);pointer-events:none}
.v26-amb-copy{display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(10px, 1vw, 16px) clamp(8px, .9vw, 16px) 12px 0}
html.v26 .v26-amb-name{color:#fff}
.v26-amb-name span{display:block}
html.v26 .v26-section .v26-amb-role{color:#9cc2ff;font-size:var(--v26-body);line-height:1.4}
html.v26 .v26-section .v26-amb-bio{margin-top:2px;font-size:calc(clamp(14px, 11px + .25vw, 16px) * var(--scale, 1));line-height:1.55;color:#cfdcef}
.v26-amb .v26-nobr{white-space:nowrap}   /* hyphenated words never split at the hyphen */
.v26-amb-foot{display:flex;justify-content:flex-end;margin-top:6px}
.v26-amb-foot[hidden]{display:none}
/* entrance */
html.v26-motion .v26-amb[data-reveal-item]{transform:translate3d(0, 40px, 0);transition:opacity 620ms var(--v26-ease), transform 760ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 110ms)}
html.v26-motion .v26-amb[data-reveal-item].is-in{transform:none}
html.v26-motion .v26-amb-ph img{transform:translate3d(0, 10%, 0) scale(1.12);transition:transform 1100ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 110ms + 60ms)}
html.v26-motion .v26-amb.is-in .v26-amb-ph img{transform:none}
@media (max-width:1279px){.v26-amb-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:1000px){.v26-amb-head{grid-template-columns:minmax(0, 1fr)}}
/* below 1024: the rail runs edge to edge (the gutter becomes its inner padding), one card and a part of the next in view */
@media (max-width:1023px){
  .v26-amb-grid{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--v26-gutter));padding:6px var(--v26-gutter) 18px;scroll-padding-inline:var(--v26-gutter)}
  .v26-amb-grid::-webkit-scrollbar{display:none}
  .v26-amb-grid:focus-visible{outline:2px solid #b9daff;outline-offset:-2px;border-radius:var(--v26-r-lg)}
  .v26-amb{flex:0 0 clamp(250px, 72vw, 320px);grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 1fr;row-gap:14px;scroll-snap-align:start}
  .v26-amb-ph{align-self:start}
  .v26-amb-copy{gap:8px;padding:0 10px 12px}
  .v26-amb-name span{display:inline}
}
/* enlarged text: wider cards, never a cramped text column */
html.enlarged .v26-amb-head{grid-template-columns:1fr}
@media (min-width:1024px){html.enlarged .v26-amb-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(380px * var(--scale, 1))), 1fr))}}
@media (max-width:1023px){html.enlarged .v26-amb{flex-basis:min(84vw, calc(300px * var(--scale, 1)))}}
html.contrast .v26-amb-ph::after{box-shadow:inset 0 0 0 1px rgb(214 232 255 / 70%)}
html.contrast .v26-section .v26-amb-role{color:#fff}
/* @end people */

/* @section media */
/* Media partners (2026-10-20, client edits E1 «Додати невеликий екран з медіапартнерами за прикладом»: a dark band, the
   title, one row of light low-contrast rounded tiles with one logo each). DEMO marks until the partners are confirmed
   (see the HTML comment). A compact screen on the page ink: the tiles are V26 glass in its lightest form — a pale veil
   with the hairline rim and the lit top edge, no blur — and the monochrome logos share one optical height.
   6 per row from 1100 px, 3 per row on tablets, 2 per row on phones. Entrance: tiles in reading order, 70 ms apart. */
.v26-media{padding-block:clamp(40px, 4.4vw, 80px)}
html.v26 .v26-media .v26-h2{margin-bottom:clamp(24px, 2.6vw, 40px)}
.v26-media-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:clamp(12px, 1.2vw, 20px)}
.v26-media-tile{position:relative;display:grid;place-items:center;min-width:0;min-height:clamp(84px, 6.4vw, 116px);padding:16px 18px;border-radius:var(--v26-r-md);
  background:linear-gradient(165deg, rgb(206 224 255 / 15%) 0%, rgb(150 186 240 / 8%) 100%);
  box-shadow:inset 0 0 0 1px rgb(196 218 250 / 17%), inset 0 1px 0 rgb(255 255 255 / 14%)}
/* one optical height: the condensed caps marks (IPSUM, DOLOR) a step taller than the lowercase wordmarks */
.v26-media-tile img{display:block;width:auto;max-width:100%;height:clamp(30px, 2.3vw, 42px);object-fit:contain;opacity:.82}
.v26-media-tile img.v26-media-tall{height:clamp(33px, 2.55vw, 46px)}
html.v26-motion .v26-media-tile[data-reveal-item]{transform:translate3d(0, 16px, 0);transition-delay:calc(var(--d, 0) * 70ms)}
html.v26-motion .v26-media-tile[data-reveal-item].is-in{transform:none}
@media (max-width:1099px){.v26-media-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (max-width:600px){
  .v26-media-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
  .v26-media-tile{min-height:76px;padding:12px 14px}
  .v26-media-tile img{height:28px}
  .v26-media-tile img.v26-media-tall{height:31px}
}
html.enlarged .v26-media-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(180px * var(--scale, 1))), 1fr))}
html.contrast .v26-media-tile{background:#0a2148;box-shadow:inset 0 0 0 1px rgb(214 232 255 / 60%)}
html.contrast .v26-media-tile img{opacity:1}
/* @end media */

/* @section sendpulse */
/* Technology partner (2026-11-02, client: «додати на лендинг ще один екран за прикладом попереднього сезону», variant A2
   approved by the user). Copy | a glass map: the SendPulse logo on a plaque in the centre, five tools around it, each with
   a small drawing of what it does. Lines are drawn by v26.js from the real layout; a comet runs to one tool at a time and
   the drawing acts out its scene. Rest state of every drawing = the finished action (reduced motion shows just that).
   Phones (≤700) and enlarged text switch the map to a list: logo on top, a trunk line, one row per tool. */
.v26-sp{padding-block:clamp(48px, 5.6vw, 96px)}
.v26-sp-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(40px, 5vw, 96px);align-items:center}
.v26-sp-copy{display:grid;grid-template-columns:minmax(0, 1fr);gap:clamp(20px, 1.9vw, 28px);align-content:center}
.v26-sp-copy>*{margin:0}
.v26-sp-map{position:relative;container-type:inline-size;aspect-ratio:5 / 4}
html.v26 .v26-sp-map.v26-glass{background:radial-gradient(40% 46% at 50% 46%, rgb(42 107 224 / 36%), transparent 72%),radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 18%), transparent 60%),linear-gradient(158deg, rgb(40 92 180 / 26%) 0%, rgb(14 40 88 / 44%) 36%, rgb(6 20 46 / 68%) 100%)}
.v26-sp-map.is-armed:not(.is-in) :is(.v26-sp-hub, .v26-sp-node, .v26-sp-lines){opacity:0}

.v26-sp-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.v26-sp-lines path{fill:none;stroke-linecap:round}
.sp-ln{stroke:rgb(127 178 255 / 30%);stroke-width:1.2}
.sp-ln-lit{stroke:#7fb2ff;stroke-width:1.6;opacity:0;transition:opacity 400ms ease}
.sp-ln-lit.is-lit{opacity:1}
.sp-cm{opacity:0}
.sp-cm-h{stroke:#eaf3ff;stroke-width:4}
.sp-cm-t{stroke:#7fb2ff;stroke-width:2.5;stroke-opacity:.5}
.sp-cm-l{stroke:#7fb2ff;stroke-width:1.5;stroke-opacity:.25}

.v26-sp-map .v26-sp-hub{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:3;box-shadow:0 0 0 10px rgb(42 107 224 / 12%),0 30px 80px -24px rgb(42 107 224 / 95%)}
.v26-sp-hub img{position:relative;z-index:1;display:block;width:auto;height:clamp(22px, 1.7vw, 28px)}
.v26-sp-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #7fb2ff;opacity:0;pointer-events:none}

.v26-sp-nodes{margin:0;padding:0;list-style:none}
.v26-sp-node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;z-index:3;display:grid;gap:8px;width:clamp(180px, 24cqw, 204px);padding:10px;border-radius:18px;background:linear-gradient(160deg, #0c2452, #071a3d);box-shadow:inset 0 0 0 1px rgb(164 196 240 / 16%),0 24px 48px -30px rgb(0 0 0 / 85%);transition:transform 500ms cubic-bezier(.23, 1, .32, 1)}
.v26-sp-node::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #7fb2ff,0 18px 40px -16px rgb(42 107 224 / 80%);opacity:0;transition:opacity 400ms ease;pointer-events:none}
.v26-sp-node.is-on{transform:translateY(-4px)}
.v26-sp-node.is-on::after{opacity:1}
.v26-sp-ill{display:block;overflow:hidden;border-radius:12px;background:rgb(4 14 34 / 70%);box-shadow:inset 0 0 0 1px rgb(164 196 240 / 8%)}
.v26-sp-ill svg{display:block;width:100%;height:auto;aspect-ratio:160 / 96;stroke-linejoin:round;stroke-linecap:round}
.v26-sp-label{padding:0 2px 2px;font-size:calc(15px * var(--scale, 1));line-height:1.25;text-align:center;color:#d3e0f2;transition:color 400ms ease}
.v26-sp-node.is-on .v26-sp-label{color:#fff}

/* drawings: rest state = the finished action */
:where(.v26-sp-ill svg *){transform-box:fill-box;transform-origin:center}
.sp-e-flap{fill:#0f2e66;stroke:#cfe2ff;stroke-width:1.5;transform-origin:50% 100%}
.sp-e-back{fill:rgb(12 36 82);stroke:#cfe2ff;stroke-width:1.5}
.sp-e-front{fill:#0d2a5c;stroke:#cfe2ff;stroke-width:1.5}
.sp-e-shut{fill:#123370;stroke:#cfe2ff;stroke-width:1.5;transform-origin:50% 0;transform:scaleY(0);opacity:0}
.sp-e-badge{opacity:0}
.sp-e-badge circle{fill:#2a6be0}
.sp-e-badge path{fill:none;stroke:#fff;stroke-width:2}

.sp-c-in>rect:first-child,.sp-c-typing>rect{fill:rgb(188 205 230 / 16%)}
.sp-c-in{transform-origin:100% 100%}
.sp-c-out,.sp-c-typing{transform-origin:0 100%}
.sp-bar{fill:#cfe2ff}
.sp-dim{opacity:.5}
.sp-c-bot>circle:first-child{fill:#2a6be0}
.sp-eye{fill:#fff}
.sp-c-typing{opacity:0}
.sp-c-dot{fill:#cfe2ff}
.sp-c-out>rect:first-child{fill:#2a6be0}
.sp-c-chip>rect:first-child{fill:none;stroke:#7fb2ff;stroke-width:1.2}
.sp-chip-bar{fill:#7fb2ff}

.sp-s-frame{fill:rgb(8 24 56);stroke:rgb(188 205 230 / 30%);stroke-width:1.2}
.sp-s-rule{fill:none;stroke:rgb(188 205 230 / 22%);stroke-width:1.2}
.sp-s-p>circle:not([fill]){fill:rgb(188 205 230 / 45%)}
.sp-s-url{fill:rgb(188 205 230 / 16%)}
.sp-s-h{fill:#cfe2ff}
.sp-s-t{fill:rgb(207 226 255 / 45%)}
.sp-s-btn{fill:#2a6be0}
.sp-s-flash{fill:#fff;opacity:0}
.sp-s-tile{fill:rgb(188 205 230 / 14%)}
.sp-s-cursor{fill:#fff;stroke:#05193a;stroke-width:1;transform-box:view-box;transform-origin:0 0;transform:translate(132px, 78px);opacity:0}

.sp-k-col>rect:last-child{fill:rgb(188 205 230 / 8%)}
.sp-k-head{fill:rgb(188 205 230 / 40%)}
.sp-k-hl{fill:rgb(42 107 224 / 14%);stroke:#7fb2ff;stroke-width:1.5;opacity:0}
.sp-k-static rect{fill:rgb(188 205 230 / 18%)}
.sp-k-card{transform:translate(113px, 43px)}
.sp-k-card>rect:first-child{fill:#2a6be0;stroke:#9cc2ff;stroke-width:1}
.sp-k-cardbar{fill:#fff;opacity:.85}

.sp-a-wire{fill:none;stroke:rgb(188 205 230 / 32%);stroke-width:1.5}
.sp-a-route{fill:none;stroke:#7fb2ff;stroke-width:1.8;stroke-dasharray:100}
.sp-a-flow{opacity:0}
.sp-a-head{fill:none;stroke:#fff;stroke-width:3.5;stroke-dasharray:.1 200}
.sp-a-tail{fill:none;stroke:#7fb2ff;stroke-width:2;stroke-opacity:.6;stroke-dasharray:14 200;stroke-dashoffset:14}
.sp-a-box,.sp-a-dia{fill:rgb(8 24 56);stroke:rgb(188 205 230 / 35%);stroke-width:1.2}
.sp-a-on{fill:#2a6be0;stroke:#7fb2ff;stroke-width:1.2}
.sp-a-diaon{opacity:0}
.sp-a-bolt,.sp-a-bar{fill:#fff}

/* enlarged text: one column and the list layout at every width (the map's labels would not fit at 1.5×);
   the list rules repeat below inside ≤700 with the same specificity */
html.enlarged .v26-sp-grid{grid-template-columns:minmax(0, 1fr)}
html.enlarged .v26-sp-map{max-width:880px}
html:where(.enlarged) .v26-sp-map{aspect-ratio:auto;padding:20px 16px}
html:where(.enlarged) .v26-sp-map .v26-sp-hub{position:relative;left:auto;top:auto;translate:none}
html:where(.enlarged) .v26-sp-nodes{display:grid;gap:12px;margin-top:28px;padding-left:44px}
html:where(.enlarged) .v26-sp-node{position:relative;left:auto;top:auto;translate:none;width:auto;grid-template-columns:calc(84px * var(--scale, 1)) 1fr;align-items:center;gap:14px;padding:8px}
html:where(.enlarged) .v26-sp-node.is-on{transform:translateX(3px)}
html:where(.enlarged) .v26-sp-ill{border-radius:10px}
html:where(.enlarged) .v26-sp-label{padding:0;text-align:left}

html.contrast .v26-sp-node{background:#0a2148;box-shadow:inset 0 0 0 1px rgb(214 232 255 / 60%),0 24px 48px -30px rgb(0 0 0 / 85%)}
html.contrast .sp-ln{stroke:rgb(214 232 255 / 55%)}
html.contrast .v26-sp-label{color:#fff}

@media (max-width:1100px){
  .v26-sp-grid{grid-template-columns:minmax(0, 1fr)}
  .v26-sp-map{aspect-ratio:3 / 2}
  .v26-sp-node{width:clamp(180px, 22cqw, 204px)}
}
@media (max-width:800px){.v26-sp-map{aspect-ratio:4 / 3}}
@media (max-width:700px){
  html .v26-sp-map{aspect-ratio:auto;padding:20px 16px}
  html .v26-sp-map .v26-sp-hub{position:relative;left:auto;top:auto;translate:none}
  html .v26-sp-nodes{display:grid;gap:12px;margin-top:28px;padding-left:44px}
  html .v26-sp-node{position:relative;left:auto;top:auto;translate:none;width:auto;grid-template-columns:calc(84px * var(--scale, 1)) 1fr;align-items:center;gap:14px;padding:8px}
  html .v26-sp-node.is-on{transform:translateX(3px)}
  html .v26-sp-ill{border-radius:10px}
  html .v26-sp-label{padding:0;text-align:left}
}
@media (max-width:600px){#sp-title{font-size:min(var(--v26-h2), 8.3vw)}}
@media (max-width:400px){
  html .v26-sp-map{padding:20px 14px}
  html .v26-sp-nodes{padding-left:40px}
  html .v26-sp-node{grid-template-columns:calc(72px * var(--scale, 1)) 1fr;gap:12px}
  .v26-sp-label{font-size:calc(14px * var(--scale, 1))}
}
/* enlarged text on phones: the drawing sits above its label, so a 1.25–1.5× label neither wraps nor pushes the row out */
@media (max-width:560px){
  html.enlarged .v26-sp-node{grid-template-columns:minmax(0, 1fr);justify-items:start;gap:8px}
  html.enlarged .v26-sp-ill{width:calc(84px * var(--scale, 1))}
}
/* @end sendpulse */

/* @section mentor */
/* Mentor (TZ 400–409): the page's contrast band. Container-wide, brighter cobalt brand field (Figma badge):
   halftone whose dots grow toward the bottom, V4 rim, sapphire glass planes framing a centred call.
   Composition = centred statement → explanation → action (contacts is a compact text | queen plaque).
   The CTA is an inverted primary: the brightest, highest-contrast object in the band. */
.v26-mentor{padding-block:clamp(48px, 5.6vw, 96px)}
.v26-mentor-band{
  display:grid;justify-items:center;text-align:center;
  padding:clamp(56px, 5vw, 96px) clamp(24px, 6vw, 120px) clamp(64px, 5.6vw, 104px);
  background:
    url('assets/v7-matte-grain.png') center/180px,
    radial-gradient(58% 80% at 50% 0%, rgb(126 176 255 / 30%), transparent 72%),
    radial-gradient(36% 70% at 0% 0%, rgb(160 202 255 / 30%), transparent 74%),
    linear-gradient(176deg, #2461d6 0%, #1a4dc1 36%, #1441a8 66%, #0e318a 100%);
  background-blend-mode:soft-light, normal, normal, normal;   /* grain sits in the light, it does not dust the surface */
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 34%), 0 70px 130px -72px rgb(42 107 224 / 85%);
}
/* halftone: light dots that grow toward the bottom (assets/v26/closing/halftone-light.webp) */
.v26-mentor-band::before{height:64%;background:url('assets/v26/closing/halftone-light.webp') center bottom/1440px auto repeat-x;opacity:.24;mix-blend-mode:screen;
  -webkit-mask:linear-gradient(180deg, transparent, #000 58%);mask:linear-gradient(180deg, transparent, #000 58%)}
/* rim: V4 plaque edge — lit cobalt corner, steel sides, white far corner */
.v26-mentor-band::after{padding:1.5px;background:linear-gradient(128deg, #d6e7ff 0%, rgb(120 170 255 / 75%) 14%, rgb(90 140 230 / 16%) 40%, rgb(90 140 230 / 10%) 62%, rgb(190 215 255 / 45%) 86%, #f4f8ff 100%)}
/* sapphire glass planes (Figma board 8) frame the call from both sides; the centre stays calm under the text */
.v26-mentor-glass{position:absolute;inset:0;z-index:-1;pointer-events:none;background:none 50% 60%/cover no-repeat;mix-blend-mode:screen;opacity:.72;
  -webkit-mask:linear-gradient(90deg, #000 0%, rgb(0 0 0 / 70%) 13%, transparent 31%, transparent 69%, rgb(0 0 0 / 70%) 87%, #000 100%);
  mask:linear-gradient(90deg, #000 0%, rgb(0 0 0 / 70%) 13%, transparent 31%, transparent 69%, rgb(0 0 0 / 70%) 87%, #000 100%)}
.v26-mentor-text{position:relative;display:grid;justify-items:center;gap:clamp(20px, 1.9vw, 28px);width:100%;max-width:880px}
/* the photograph is attached only when the band is within a viewport of the reader (JS .is-near) */
.v26-mentor-glass.is-near{background-image:url('assets/v10-background-architecture.webp')}
html.v26 .v26-mentor .v26-h2{max-width:20ch;width:100%;color:#fff}
.v26-mentor .v26-lead{max-width:58ch;color:#f2f7ff;text-wrap:pretty}
.v26-mentor-action{margin-top:clamp(6px, .8vw, 14px)}
/* inverted primary on the contrast band (base request: promote to .v26-btn--invert) */
.v26-mentor .v26-btn--invert{min-height:56px;padding:15px 36px;font-size:calc(16px * var(--scale, 1));color:#05193a;
  background:linear-gradient(180deg, #ffffff 0%, #e6efff 100%);
  box-shadow:inset 0 -1px 0 rgb(42 107 224 / 22%), 0 26px 50px -24px rgb(2 12 44 / 90%), 0 0 0 1px rgb(255 255 255 / 55%)}
.v26-mentor .v26-btn--invert::before{background:linear-gradient(125deg, #2f7bf0 0%, #9cc2ff 40%, #ffffff 80%)}
.v26-mentor .v26-btn--invert:hover{background:#fff;box-shadow:inset 0 -1px 0 rgb(42 107 224 / 22%), 0 26px 50px -24px rgb(2 12 44 / 90%), 0 0 0 6px rgb(255 255 255 / 16%)}
.v26-mentor .v26-btn--invert:focus-visible{outline:2px solid #fff;outline-offset:5px}
/* magnet: separate `translate` property, so it never fights the reveal transform (≤ 8 px, fine pointer only — JS) */
.v26-mentor .v26-magnetic{translate:var(--mx, 0px) var(--my, 0px);transition:translate 420ms var(--v26-ease), transform 220ms var(--v26-ease), background-color 220ms var(--v26-ease), box-shadow 220ms var(--v26-ease)}
html.quiet .v26-mentor .v26-magnetic{translate:none}
@media (prefers-reduced-motion:reduce){.v26-mentor .v26-magnetic{translate:none}}

/* Closing headings (mentor, FAQ, contacts) reveal line by line through a mask: 660 ms, 110 ms stagger.
   JS splits [data-lines] into .v26-ln blocks; until then the base title mask keeps the heading hidden.
   The lines start (.is-lined) only when the whole heading is above the lower 14 % of the viewport. */
html.v26 [data-lines]{width:100%}
[data-lines] .v26-ln{display:block}
[data-lines] .v26-ln-probe{display:inline-block}
html.v26-motion [data-lines].is-split{clip-path:none;transform:none;transition:none}
html.v26-motion [data-lines].is-split .v26-ln{clip-path:inset(0 0 100% 0);transform:translateY(.42em);transition:clip-path 660ms var(--v26-ease), transform 660ms var(--v26-ease);transition-delay:calc(var(--ln, 0) * 110ms)}
html.v26-motion [data-lines].is-split.is-lined .v26-ln{clip-path:inset(-.25em -.3em -.4em -.3em);transform:none}
/* the copy of a band, plaque or FAQ intro follows its heading (JS adds .is-in to the box when the heading is released);
   a short rise that stays inside the plaque's clip */
html.v26-motion [data-closing-item]{opacity:0;transform:translateY(18px);transition:opacity 560ms var(--v26-ease), transform 560ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 90ms + 240ms)}
html.v26-motion .is-in [data-closing-item]{opacity:1;transform:none}

@media (max-width:700px){
  .v26-mentor-band{justify-items:start;text-align:left;padding:44px 24px 48px}
  .v26-mentor-text{justify-items:start}
  .v26-mentor-action,.v26-mentor-action .v26-btn{width:100%}
  .v26-mentor-glass{opacity:.4;background-position:88% 60%;-webkit-mask:linear-gradient(270deg, #000 0%, transparent 46%);mask:linear-gradient(270deg, #000 0%, transparent 46%)}
  .v26-mentor-band::before{height:46%}
}
@media (max-width:420px){.v26-mentor-band{padding-inline:20px}}
/* low laptops (1366×650): the whole band — heading to CTA — fits under the header in one view */
@media (max-height:760px) and (min-width:701px){.v26-mentor-band{padding-block:44px 52px}.v26-mentor-text{gap:18px}}
html.enlarged .v26-mentor-text{max-width:min(100%, 1040px)}
/* contrast mode: deeper flat cobalt, white text, decorative layers ≤ .2 */
html.contrast .v26-mentor-band{background:linear-gradient(176deg, #123c9c, #0b2b78)}
html.contrast .v26-mentor-glass{opacity:.12}
html.contrast .v26-mentor-band::before{opacity:.14}
html.contrast .v26-mentor .v26-lead,html.contrast .v26-mentor .v26-h2{color:#fff}

/* Feedback 2026-10-14: «крапки й фон погані — менше патерну, контраст тексту». The band is a calm deep
   sapphire with one soft light from above; the dot field is gone; the glass planes stay at the edges only. */
.v26-mentor-band{
  background:
    radial-gradient(70% 90% at 50% -10%, rgb(110 160 255 / 26%), transparent 70%),
    linear-gradient(180deg, #123b93 0%, #0d2d76 46%, #08205a 100%);
  background-blend-mode:normal}
.v26-mentor-band::before{content:none;display:none}
.v26-mentor-glass{opacity:.42}
.v26-mentor .v26-lead{color:#eef4ff}
/* keyboard focus inside a band or plaque always shows its heading and copy (verify3 NEW-G1) */
:is(.v26-contact-plaque, .v26-mentor-band, .v26-faq-intro):focus-within :is([data-closing-item], [data-lines] .v26-ln){opacity:1!important;transform:none!important;clip-path:none!important}
/* Approved 2026-10-15 (sketch «королева світить пішаку»): a band with the scene on the right, the text on its dark left field.
   Art since 2026-10-20 (client edits E1, concept A «руки», approved by the user): two crystal hands, the mentor's over the
   learner's, move one pawn; they enter from the top-right edge, so the subject is the hands and the pawn. */
/* The art's scale is decoupled from the band height (verify5 E5-02 / U5-N7): it fills the band as approved, but never grows
   past --ah, a width-only cap that sits at or just above the band's natural height at 100 % (1280–2560), so
   enlarged text or a narrow laptop makes the band taller, not the pawn bigger and further left. The art is anchored
   right-bottom (its top rows are near ink and melt into the band through ::before). The text column ends ≥ 48 px
   left of where the subject can stand: its left edge = band right − --mentor-reach × art height (hands art: fingertips and
   the pawn's lit base at image x ≈ 1700 of 2688 × 1152 → .86; pawn base row ≈ .79 → --mentor-floor .80).
   The photograph is attached only once the band is within a viewport (JS .is-near, verify5 NEW5-G10).
   Swap slot (2026-10-20, client edits E1: a new mentor visual is being designed): the art is one variable, --mentor-art,
   with two numbers that describe its composition — --mentor-reach (how far left of the band's right edge the subject
   can stand, as a share of the art height; drives the text column) and --mentor-floor (the image row, as a share of
   its height, under which the stacked layout dissolves it into the band above the heading). A new image with the same
   right-bottom anchoring needs only these three values. */
.v26-mentor-band{--mentor-art:url('assets/v26/mentor/mentor-hands-2688.webp');--mentor-reach:.86;--mentor-floor:.8;
  --mpx:clamp(36px, 4.4vw, 80px);--ah:clamp(440px, 19vw + 310px, 800px);
  justify-items:start!important;text-align:left!important;min-height:clamp(440px, 36vw, 600px);align-content:center;padding:clamp(48px, 4.4vw, 80px) var(--mpx)!important;
  background-image:none!important;background-color:#04143a!important;background-repeat:no-repeat!important;background-position:right bottom!important;background-size:auto min(100%, var(--ah))!important;
  box-shadow:inset 0 0 0 1px rgb(190 215 255 / 22%), 0 70px 130px -72px rgb(42 107 224 / 70%)!important}
.v26-mentor-band.is-near{background-image:var(--mentor-art)!important}
/* left field (the text reads on ink) + a soft top edge when the band is taller than the art (0 px at 100 %) */
.v26-mentor-band::before{content:''!important;display:block!important;position:absolute;inset:0;z-index:0;height:auto!important;opacity:1!important;mix-blend-mode:normal!important;-webkit-mask:none!important;mask:none!important;
  background:linear-gradient(180deg, #04143a calc(100% - min(100%, var(--ah))), rgb(4 20 58 / 0) calc(100% - min(100%, var(--ah)) + min(56px, max(0px, 100% - var(--ah))))),
    linear-gradient(90deg, #04143a 0%, rgb(4 20 58 / 92%) 30%, rgb(4 20 58 / 0) 62%)!important;border-radius:inherit}
/* this overlay is the text's ink field and the art's fade, not decoration: contrast mode keeps it whole (the generic
   brandfield rule dims ::before to .16, which left the stacked art with a hard seam under the H2, verify5 E5-01) */
html.contrast .v26-mentor-band.v26-brandfield::before{opacity:1!important}
.v26-mentor-glass{display:none!important}
.v26-mentor-text{position:relative;z-index:1;justify-items:start!important;max-width:min(600px, 48%, 100% + var(--mpx) - var(--mentor-reach) * var(--ah) - 48px)!important}
html.v26 .v26-mentor .v26-h2{max-width:16ch!important}
/* Stacked (≤ 1000 px, and enlarged text ≤ 1100 px, where the side layout leaves the text too narrow): the scene on
   top, the text below. The art dissolves into the band above the heading — the fade starts under the pawn's base
   (image row ≈ .78 of its height), runs through the reflections and is solid ink 6 px above the art's end; the H2
   starts 8 px below it, so no hard seam and no heading on the board (verify5 E5-01 / U5-N3). */
@media (max-width:1000px){
  .v26-mentor-band{--mh:clamp(260px, 54vw, 400px);min-height:0;padding:calc(var(--mh) + 8px) 24px 40px!important;background-size:auto var(--mh)!important;background-position:right top!important}
  .v26-mentor-band::before{background:linear-gradient(180deg, rgb(4 20 58 / 0) 0, rgb(4 20 58 / 0) calc(var(--mh) * var(--mentor-floor)), rgb(4 20 58 / 28%) calc(var(--mh) * (var(--mentor-floor) + .06)), rgb(4 20 58 / 78%) calc(var(--mh) * (var(--mentor-floor) + .13)), #04143a calc(var(--mh) - 6px))!important}
  .v26-mentor-text{max-width:none!important}
}
@media (min-width:1001px) and (max-width:1100px){
  html.enlarged .v26-mentor-band{--mh:clamp(400px, 40vw, 440px);min-height:0;padding:calc(var(--mh) + 8px) 40px 44px!important;background-size:auto var(--mh)!important;background-position:right top!important}
  html.enlarged .v26-mentor-band::before{background:linear-gradient(180deg, rgb(4 20 58 / 0) 0, rgb(4 20 58 / 0) calc(var(--mh) * var(--mentor-floor)), rgb(4 20 58 / 28%) calc(var(--mh) * (var(--mentor-floor) + .06)), rgb(4 20 58 / 78%) calc(var(--mh) * (var(--mentor-floor) + .13)), #04143a calc(var(--mh) - 6px))!important}
  html.enlarged .v26-mentor-text{max-width:none!important}
}
/* edits 2.0: the contacts live in the mentor band (and under the FAQ) */
/* composition (2026-10-23, variant В): the message (H2 + lead) is one group, the actions one bar under it — the
   button, a hairline, «Контакти» over the address. The bar needs ~540 px; a narrower column (phones, the 1001–1320 px
   side layout) and enlarged text stack it: the hairline turns horizontal and the contacts go under the button. */
.v26-mentor-text{row-gap:clamp(18px, 1.6vw, 24px);container-type:inline-size}
@media (max-height:760px) and (min-width:701px){.v26-mentor-text{row-gap:18px}}
.v26-mentor-action{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:clamp(10px, 1.4vw, 22px)}
.v26-mentor-contact{align-self:stretch;display:grid;justify-items:start;gap:6px;padding-top:18px;border-top:1px solid rgb(190 214 248 / 26%)}
.v26-mentor-contact .v26-label{color:#cfe0ff}
@container (min-width:540px){
  html:not(.enlarged) .v26-mentor-action{flex-direction:row;align-items:center;gap:28px}
  html:not(.enlarged) .v26-mentor-contact{align-self:auto;padding:0 0 0 28px;border-top:0;border-left:1px solid rgb(190 214 248 / 30%)}
}
.v26-mentor-link{position:relative;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding-bottom:3px;font-size:calc(17px * var(--scale, 1));line-height:1.3;color:#fff;text-decoration:none;border-bottom:1px solid rgb(160 200 255 / 45%);transition:border-color 220ms var(--v26-ease)}
.v26-mentor-link::after{content:'';position:absolute;inset:-10px -8px}   /* a 44 px target without moving the line */
.v26-mentor-link:hover{border-bottom-color:#fff}
.v26-mentor-link:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
.v26-mentor-link svg{flex:none;width:22px;height:22px;fill:none;stroke:#cfe2ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html.v26 .v26-faq-mail{grid-column:1 / -1;margin:0;font-size:var(--v26-body);line-height:1.55;color:var(--v26-muted)}
.v26-faq-mail a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(190 214 248 / 50%);overflow-wrap:anywhere}
.v26-faq-mail a:hover{text-decoration-color:#fff}
/* @end mentor */

/* @section faq */
/* 2026-10-20 (client edits E1, after the client's reference): instead of the long title and its note — one line with
   «FAQ» on the left and the «Подати заявку» action on the right (stacked on phones), the questions below across the
   container. The quiet V4 field (facets) glows behind the title line only; the reading rows stay on calm ink. */
.v26-faq-field{--v26-o:.34;--v26-pos:20% 40%}
.v26-faq-field::after{background:linear-gradient(180deg, rgb(2 11 25 / 26%) 0%, rgb(2 11 25 / 72%) 22%, rgb(2 11 25 / 94%) 40%, var(--v26-ink) 62%)}
.v26-faq-layout{display:grid;grid-template-columns:minmax(0, 1fr);gap:clamp(28px, 3vw, 48px)}
.v26-faq-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
/* the line-reveal heading keeps its own width here (the closing rule stretches [data-lines] to the column) */
html.v26 .v26-faq-intro [data-lines]{width:auto;max-width:none}
.v26-faq-action{flex:none}
.v26-accordion{border-top:1px solid var(--v26-line)}
.v26-accordion details{border-bottom:1px solid var(--v26-line)}
/* the row is the focus/hover surface: rounded, fully inside the column, its ring 2 px inside the row edge */
.v26-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-block:4px;padding:16px 14px;border-radius:var(--v26-r-sm);cursor:pointer;list-style:none;font-size:var(--v26-h4);line-height:1.4;color:#eef4fd;scroll-margin-top:112px;transition:background-color 200ms var(--v26-ease), color 200ms var(--v26-ease)}
.v26-accordion summary::-webkit-details-marker{display:none}
.v26-accordion summary:hover{color:#fff;background:rgb(120 166 232 / 7%)}
html.v26 .v26-accordion summary:focus-visible{outline:2px solid #b9daff;outline-offset:-2px}
.v26-accordion summary i{position:relative;flex:none;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(190 214 248 / 32%);transition:transform 300ms var(--v26-ease), background-color 200ms}
.v26-accordion summary i::before,.v26-accordion summary i::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.6px;margin:-.8px 0 0 -6.5px;background:currentColor;border-radius:2px}
.v26-accordion summary i::after{transform:rotate(90deg);transition:transform 300ms var(--v26-ease)}
.v26-accordion details[open] summary i{background:rgb(42 107 224 / 30%)}
.v26-accordion details[open] summary i::after{transform:rotate(0)}
/* answer text starts ≥ 8 px under the focused row's ring */
.v26-answer{display:grid;gap:12px;padding:8px 64px 24px 14px}
.v26-answer p{max-width:68ch}
/* opening an item: the answer settles in under its question (opacity + 6 px rise, 320 ms) */
html.v26-motion .v26-accordion details[open] .v26-answer{animation:v26-faq-open 320ms var(--v26-ease)}
@keyframes v26-faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.v26-answer .v26-pending{color:var(--v26-faint);font-size:var(--v26-caption)}
@media (max-width:1000px){.v26-faq-field{display:none}}
/* phones: the title, then the action across the column */
@media (max-width:600px){
  .v26-faq-intro{flex-direction:column;align-items:stretch;gap:20px}
  .v26-faq-action .v26-btn{width:100%}
  .v26-accordion summary{padding:14px 10px;gap:16px}.v26-answer{padding:8px 10px 22px}
}
html.contrast .v26-faq-field{opacity:.4}
html.contrast .v26-accordion,html.contrast .v26-accordion details{border-color:rgb(150 178 220)}
html.contrast .v26-accordion summary,html.contrast .v26-answer p,html.contrast .v26-answer b{color:#fff!important}
html.contrast .v26-accordion summary i{box-shadow:inset 0 0 0 1px #dfeaff}
/* rows rise 12 px only (row pitch ≈77 px: a rising row never reaches the next one); rows entering from the top appear in place */
html.v26-motion .v26-accordion>details[data-reveal-item]:not(.is-in){transform:translate3d(0, 12px, 0)}
html.v26-motion .v26-accordion>details.is-instant{transition:none}
/* @end faq */

/* @section contacts */
/* Previous seasons' logic in V4: a compact plaque sized to its content — the heading, one mail plaque and
   the approved queen-on-the-horizon art right beside it (no empty gradient between them, no caption).
   Axis (CL-C2): on laptops and wider the plaque continues the FAQ reading column — its left edge on the
   accordion's column, its right edge on the container (accordion, footer actions). Narrower, or with
   enlarged text, it spans the container. The art takes the rest of the plaque width. */
.v26-contacts{padding-block:clamp(48px, 5.6vw, 96px) clamp(64px, 6vw, 112px)}
.v26-contacts .v26-wrap{display:grid;grid-template-columns:minmax(0, 4.4fr) minmax(0, 7.6fr);column-gap:clamp(32px, 4.5vw, 96px)}
/* the art takes the rest of the plaque, up to ~2.1× the plaque height, so the queen keeps her headroom and
   reflection when the plaque spans a wide container (any spare width stays with the text) */
.v26-contact-plaque{grid-column:2;min-width:0;display:grid;grid-template-columns:minmax(max-content, 1fr) minmax(0, calc(440px + 140px * var(--scale, 1)))}
@media (max-width:1239px){.v26-contact-plaque{grid-column:1 / -1}}
html.enlarged .v26-contact-plaque{grid-column:1 / -1}
.v26-contact-text{position:relative;z-index:1;display:grid;gap:clamp(22px, 2.2vw, 30px);align-content:center;justify-items:start;padding:clamp(40px, 4.2vw, 64px) clamp(28px, 2.6vw, 44px) clamp(40px, 4.2vw, 64px) clamp(32px, 4.2vw, 64px)}
.v26-mail svg{flex:none;width:26px;height:26px;fill:none;stroke:#cfe2ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v26-mail{transition:opacity 560ms var(--v26-ease), transform 560ms var(--v26-ease), box-shadow 220ms var(--v26-ease)}
.v26-mail:hover{box-shadow:0 18px 40px -18px rgb(80 150 255 / 90%)}
html.v26-motion .v26-mail[data-closing-item]{transition:opacity 560ms var(--v26-ease), transform 560ms var(--v26-ease), box-shadow 220ms var(--v26-ease);transition-delay:calc(var(--d, 0) * 90ms + 240ms), calc(var(--d, 0) * 90ms + 240ms), 0s}
.v26-contact-art{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 60%) 16%, #000 34%);mask:linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 60%) 16%, #000 34%)}
/* dedicated 2:1 crop of the approved render (assets/v26/closing/contact-queen-*.webp, from the 3980 px master):
   queen centred, crown ~14 % from the top, reflection in the lower fifth — shown at its own scale, never blown up */
.v26-contact-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
/* entry: a short settle once the plaque is released with its heading */
html.v26-motion .v26-contact-art img{transform:scale(1.06);transform-origin:50% 62%;transition:transform 1600ms var(--v26-ease)}
html.v26-motion .is-in .v26-contact-art img{transform:none}
/* the queen's light answers the mail action */
.v26-contact-art::after{content:'';position:absolute;inset:0;background:radial-gradient(34% 44% at 50% 80%, rgb(120 180 255 / 55%), transparent 72%);mix-blend-mode:screen;opacity:0;transition:opacity 520ms var(--v26-ease);pointer-events:none}
.v26-contact-plaque:has(.v26-mail:hover) .v26-contact-art::after,.v26-contact-plaque:has(.v26-mail:focus-visible) .v26-contact-art::after{opacity:1}
@media (max-width:760px){
  .v26-contact-plaque{grid-template-columns:1fr}
  .v26-contact-art{order:-1;height:clamp(200px, 44vw, 300px);-webkit-mask:linear-gradient(0deg, transparent 0%, #000 42%);mask:linear-gradient(0deg, transparent 0%, #000 42%)}
  .v26-contact-art img{object-position:50% 30%}
  .v26-contact-text{padding:4px 28px 36px;margin-top:-28px}
}
/* narrow screens / enlarged text: the address may break only after «@» (<wbr> in markup) */
@media (max-width:640px){
  .v26-mail{font-size:min(calc(16px * var(--scale, 1)), 6vw);padding:12px 20px;gap:10px;max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:left;justify-content:flex-start}
  .v26-mail svg{width:20px;height:20px}
  .v26-contact-text{padding:4px 18px 30px}
}
@media (max-width:380px){.v26-contact-text{padding-inline:14px}.v26-mail{padding-inline:16px}}
@media (max-width:1200px){html.enlarged .v26-contact-plaque{grid-template-columns:1fr}html.enlarged .v26-contact-art{order:-1;height:240px;-webkit-mask:linear-gradient(0deg, transparent 0%, #000 42%);mask:linear-gradient(0deg, transparent 0%, #000 42%)}html.enlarged .v26-contact-art img{object-position:50% 30%}html.enlarged .v26-contact-text{margin-top:-24px}}
html.enlarged .v26-mail{white-space:normal;overflow-wrap:normal;text-align:left}
html.contrast .v26-contact-plaque{background:linear-gradient(165deg, #0d2f78, #061a44)}
html.contrast .v26-contact-plaque::before{opacity:.18}
html.contrast .v26-contact-text{margin-top:0}
/* Feedback 2026-10-14: the plaque spans the container (no empty FAQ-title column beside it) and carries no dot band. */
.v26-contact-plaque{grid-column:1 / -1}
.v26-contact-plaque::before{content:none}
/* full-width plaque: the art takes the wider share so no blank gradient sits between the mail and the queen (verify3 F3-N5) */
@media (min-width:1240px){
  html:not(.enlarged) .v26-contact-plaque{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);min-height:clamp(280px, 21vw, 380px)}
  html:not(.enlarged) .v26-contact-art{-webkit-mask:linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 55%) 12%, #000 26%);mask:linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 55%) 12%, #000 26%)}
  html:not(.enlarged) .v26-contact-art img{object-position:58% 32%}
}
/* Approved 2026-10-15: the Figma concept image (queen in the corridor of light), not a repeat of the hero. */
@media (min-width:1240px){
  html:not(.enlarged) .v26-contact-plaque{min-height:clamp(420px, 34vw, 560px)}
  html:not(.enlarged) .v26-contact-art{-webkit-mask:linear-gradient(90deg, transparent 0, rgb(0 0 0 / 60%) 14%, #000 30%);mask:linear-gradient(90deg, transparent 0, rgb(0 0 0 / 60%) 14%, #000 30%)}
}
.v26-contact-art img{object-position:70% 50%!important}
/* @end contacts */

/* @section footer */
/* Client 2026-10-20: no second menu (on phones it took almost a whole screen). The footer keeps only the logo, the
   season line, «Подати заявку», the partners' logos and the two documents — one centred axis (the approved
   variant B, 2026-10-15), compact: identity and action, a hairline, the logos in one row, the documents below. */
.v26-footer{position:relative;padding:clamp(52px, 4.6vw, 84px) 0 clamp(20px, 1.8vw, 28px);color:var(--v26-text);text-align:center;border-top:1px solid var(--v26-line);
  background:radial-gradient(60% 80% at 50% 0%, rgb(42 107 224 / 22%), transparent 70%), var(--v26-ink)}
.v26-footer-top{display:grid;justify-items:center;gap:0}
.v26-footer-brand{display:block;border-radius:var(--v26-r-sm)}
.v26-footer-brand img{display:block;width:clamp(196px, 14vw, 252px);height:auto}
html.v26 .v26-footer-line{margin:16px 0 0;max-width:none;font-size:var(--v26-body);line-height:1.55;color:var(--v26-muted);text-wrap:balance}
.v26-footer-cta{margin-top:28px}
/* the same marks as the hero strip at the footer's scale: optical heights from hero-v12.css ([data-logo] → --logo-h) */
.v26-footer-partners{--k:.9;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px clamp(32px, 3.4vw, 56px);
  margin:clamp(40px, 3.6vw, 56px) 0 0;padding:clamp(32px, 2.8vw, 44px) 0 0;border-top:1px solid rgb(166 198 238 / 16%)}
.v26-footer-partners li{display:flex;align-items:center;justify-content:center;min-height:44px}
.v26-footer-partners img{display:block;width:auto;height:calc(var(--logo-h, 40px) * var(--k))}
.v26-footer-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 14px;margin-top:clamp(28px, 2.6vw, 40px)}
.v26-footer-legal span{color:var(--v26-faint)}
.v26-footer-legal button{min-height:40px;padding:4px 2px;border:0;background:none;color:#cbd9ee;font:inherit;font-size:var(--v26-caption);line-height:1.4;cursor:pointer}
.v26-footer-legal button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1800px){.v26-footer-partners{--k:1}}
@media (max-width:1279px){.v26-footer-partners{--k:.8}}
/* tablets: the six logos 3 + 3 on even columns, never a lone mark on a row */
@media (max-width:1100px){
  .v26-footer-partners{display:grid;grid-template-columns:repeat(3, max-content);justify-content:center;justify-items:center;gap:22px 56px}
}
html.enlarged .v26-footer-partners{display:grid;grid-template-columns:repeat(3, max-content);justify-content:center;justify-items:center;gap:22px 48px}
/* phones: one column on the axis — the action at one comfortable width, the logos 2 + 2 + 2 */
@media (max-width:700px){
  .v26-footer{padding-top:48px}
  .v26-footer-brand img{width:187px}
  html.v26 .v26-footer-line{margin-top:14px;max-width:30ch}
  .v26-footer-cta{width:min(100%, 320px);margin-top:24px}
  .v26-footer-partners,html.enlarged .v26-footer-partners{--k:.62;grid-template-columns:repeat(2, max-content);gap:18px 32px;margin-top:36px;padding-top:28px}
  .v26-footer-legal{margin-top:24px}
}
/* the two documents stack on narrow phones (one row would leave the «·» hanging at the line end) */
@media (max-width:480px){
  .v26-footer-legal{flex-direction:column;margin-top:18px}
  .v26-footer-legal span{display:none}
}
@media (max-width:374px){.v26-footer-partners,html.enlarged .v26-footer-partners{--k:.56;column-gap:24px}}
/* touch: every footer control is a 44 px target */
@media (pointer:coarse){.v26-footer-legal button{min-height:44px}}
@media (max-width:600px){.v26-footer-legal button{min-height:44px}}
html.contrast .v26-footer,html.contrast .v26-footer-partners{border-color:rgb(150 178 220)}
html.contrast .v26-footer p,html.contrast .v26-footer-legal :is(button,span){color:#fff}
/* She's Next beside the logo (2026-10-21): the header's pair at the footer's scale, on the footer's axis */
html.v26 .v26-footer-cobrand{--cb-h:calc(clamp(196px, 14vw, 252px) * .253);--cb-gap:clamp(24px, 2.1vw, 33px);justify-content:center}
@media (max-width:700px){
  .v26-footer-brand img{width:172px}
  html.v26 .v26-footer-cobrand{--cb-h:42px;--cb-gap:19px}
}
@media (max-width:374px){
  .v26-footer-brand img{width:149px}
  html.v26 .v26-footer-cobrand{--cb-h:37px;--cb-gap:14px}
}
/* Visa's rule (client 2026-10-21): a thin divider between every two neighbouring marks, centred in the gap; none opens a row.
   Tablets 3 + 3 and phones 2 + 2 + 2 are centred rows (full-width ::before/::after spacers break them), so each divider
   keeps equal space to both of its marks. */
.v26-footer-partners{--cg:clamp(32px, 3.4vw, 56px);column-gap:var(--cg)}
.v26-footer-partners li{position:relative}
.v26-footer-partners li+li::before{content:'';position:absolute;left:calc(var(--cg) / -2);top:50%;width:1px;height:calc(40px * var(--k));translate:-50% -50%;background:rgb(186 211 242 / 24%)}
html.contrast .v26-footer-partners li+li::before{background:rgb(205 226 255 / 72%)}
@media (max-width:1100px){
  .v26-footer-partners{--cg:56px;display:flex;row-gap:0}
  .v26-footer-partners li:nth-child(n+4){order:3}
  .v26-footer-partners::after{content:'';flex-basis:100%;height:22px;order:2}
  .v26-footer-partners li:nth-child(3n+1)::before{content:none}
}
html.enlarged .v26-footer-partners{--cg:48px;display:flex;row-gap:0;column-gap:var(--cg)}
html.enlarged .v26-footer-partners li:nth-child(n+4){order:3}
html.enlarged .v26-footer-partners::after{content:'';flex-basis:100%;height:22px;order:2}
html.enlarged .v26-footer-partners li:nth-child(3n+1)::before{content:none}
@media (max-width:700px){
  .v26-footer-partners,html.enlarged .v26-footer-partners{--cg:32px;row-gap:0}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners) li:nth-child(n+3){order:3}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners) li:nth-child(n+5){order:5}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners)::before{content:'';flex-basis:100%;height:18px;order:2}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners)::after{height:18px;order:4}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners) li:nth-child(3n+1)::before{content:''}
  :is(.v26-footer-partners, html.enlarged .v26-footer-partners) li:nth-child(odd)::before{content:none}
}
@media (max-width:374px){.v26-footer-partners,html.enlarged .v26-footer-partners{--cg:24px}}
/* ≤ 339 px: Мінцифра + Мінеко (the widest pair) would not share a row */
@media (max-width:339px){.v26-footer-partners,html.enlarged .v26-footer-partners{--k:.52;--cg:20px}}
/* ≤ 339 px: the footer pair keeps air inside the 272 px column */
@media (max-width:339px){.v26-footer-brand img{width:136px}html.v26 .v26-footer-cobrand{--cb-h:33px;--cb-gap:11px}}
/* @end footer */

/* @section chrome */
/* Dialogs, demo forms, the accessibility panel and the global «Підвищений контраст» mode in the
   V26 system. The header, hero and menu keep their approved look; only their text scales
   (hero-v12.css) and contrast mode raises their edges. */

/* ---------- Dialog: one sapphire-glass surface for the demo forms and honest document states ---------- */
#v16-dialog{
  position:fixed;inset:0;box-sizing:border-box;margin:auto;padding:0;border:0;overflow:hidden;
  width:min(calc(620px * var(--scale, 1)), calc(100% - 32px));max-width:none;height:fit-content;max-height:min(880px, calc(100dvh - 48px));
  color:var(--v26-text);font-size:var(--v26-body);line-height:1.6;
}
#v16-dialog[open]{display:flex;flex-direction:column}
#v16-dialog[data-kind="info"]{width:min(calc(540px * var(--scale, 1)), calc(100% - 32px))}
/* forms keep their top edge while inline errors appear (v26.js sets --v26-dlg-top when the dialog opens) */
@media (min-width:601px){
  #v16-dialog[data-kind="form"][style*="--v26-dlg-top"]{margin:var(--v26-dlg-top) auto auto;max-height:calc(100dvh - var(--v26-dlg-top) - var(--v26-dlg-gap, 24px))}
}
/* denser fill than section glass: the dialog carries form controls over a moving page */
#v16-dialog.v26-glass,#v12-access-panel.v26-glass{
  background:
    radial-gradient(90% 70% at 0% 0%, rgb(96 156 250 / 24%), transparent 60%),
    linear-gradient(158deg, rgb(36 86 176 / 56%) 0%, rgb(12 36 80 / 82%) 38%, rgb(5 18 42 / 93%) 100%);
}
#v16-dialog::backdrop{background:rgb(1 7 18 / 62%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* the Figma plaque material (grain + edge) without the halftone field: no dots behind reading text */
:is(#v16-dialog,#v12-access-panel).v26-glass::after{background:url('assets/v7-matte-grain.png') center/180px;opacity:.26;-webkit-mask:none;mask:none}
.v26-dialog-head{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(24px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px) 0}
html.v26 .v26-dialog-title{margin:0;padding-top:7px;max-width:22ch;font-size:var(--v26-h3);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.v26-dialog-close{margin:-2px -6px 0 0}
.v26-dialog-body{position:relative;z-index:3;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(22px, 2.6vw, 36px) clamp(24px, 2.4vw, 34px);scrollbar-width:thin;scrollbar-color:rgb(150 196 255 / 40%) transparent;
  /* scrolled content dissolves under the title instead of being cut by a hard edge (fades live inside the padding) */
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);mask:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%)}
/* the form's primary action sits outside the scrolling fields: always whole, never under the fade */
.v26-dialog-foot{position:relative;z-index:3;flex:none;padding:10px clamp(22px, 2.6vw, 36px) clamp(24px, 2.4vw, 34px)}
.v26-dialog-foot[hidden]{display:none}
.v26-dialog-foot::before{content:'';position:absolute;top:0;left:clamp(22px, 2.6vw, 36px);right:clamp(22px, 2.6vw, 36px);height:1px;background:rgb(166 198 238 / 26%);opacity:0;transition:opacity 200ms var(--v26-ease)}
#v16-dialog[data-scrolls] .v26-dialog-foot::before{opacity:1}
#v16-dialog[data-foot] .v26-dialog-body{padding-bottom:14px}
/* the page behind the modal keeps its scroll position. Where the system draws a classic scrollbar,
   its width (--v26-sbw, measured in v26.js) is given back as padding, so nothing behind the backdrop
   reflows; the fixed header and panel keep their place too. */
html.v26-modal-open{overflow:hidden;padding-right:var(--v26-sbw, 0px)}
html.v26-modal-open .v12-header,html.v26-modal-open #v12-access-panel{margin-right:var(--v26-sbw, 0px)}
@media (min-width:1761px){html.v26-modal-open .v12-header{margin-right:0;translate:calc(var(--v26-sbw, 0px) / -2) 0}}
html.v26 .v26-dialog-text{margin:0;max-width:52ch;font-size:var(--v26-body);line-height:1.6;color:#dbe6f6}
.v26-dialog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.v26-dialog-done{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--v26-r-md);background:rgb(4 16 38 / 46%);box-shadow:inset 0 0 0 1px rgb(150 196 255 / 30%)}
.v26-dialog-done svg{flex:none;width:30px;height:30px;padding:4px;box-sizing:border-box;border-radius:50%;background:rgb(70 130 230 / 30%);box-shadow:inset 0 0 0 1px rgb(150 196 255 / 55%);fill:none;stroke:#eaf3ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.v26 .v26-dialog-done p{margin:0;padding-top:3px;font-size:var(--v26-body);line-height:1.6;color:#eef4fd}
.v26-dialog-done:focus{outline:none}
.v26-dialog-done:focus-visible{outline:2px solid #b9daff;outline-offset:4px}

/* ---------- Demo form ---------- */
.v26-form{display:grid;gap:18px}
html.v26 .v26-form-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 2px;padding:13px 16px;border-radius:var(--v26-r-sm);background:rgb(4 16 38 / 44%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 18%);font-size:var(--v26-caption);line-height:1.55;color:var(--v26-muted)}
.v26-form-note svg{flex:none;width:calc(20px * var(--scale, 1));height:calc(20px * var(--scale, 1));margin-top:-1px;fill:none;stroke:#9cc2ff;stroke-width:1.6;stroke-linecap:round}
.v26-form-field{display:grid;gap:8px;min-width:0}
.v26-form-field label{font-size:calc(14px * var(--scale, 1));line-height:1.4;color:#dbe6f6}
.v26-form-field label span{color:var(--v26-faint);white-space:nowrap}
.v26-input,.v26-select{
  box-sizing:border-box;display:block;width:100%;min-height:52px;margin:0;padding:13px 16px;border:0;border-radius:var(--v26-r-sm);
  font:inherit;font-size:calc(16px * var(--scale, 1));line-height:1.4;color:#fff;caret-color:#b9daff;color-scheme:dark;
  background-color:rgb(2 11 25 / 58%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 30%);
  transition:box-shadow 180ms var(--v26-ease), background-color 180ms var(--v26-ease);
}
textarea.v26-input{min-height:124px;resize:vertical}
.v26-select{
  -webkit-appearance:none;appearance:none;padding-right:50px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23cfe2ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:calc(18px * var(--scale, 1)) calc(18px * var(--scale, 1));
}
.v26-select option{background:#06173a;color:#fff}
@media (hover:hover){.v26-input:hover,.v26-select:hover{box-shadow:inset 0 0 0 1px rgb(190 214 248 / 52%)}}
.v26-input:focus-visible,.v26-select:focus-visible{outline:2px solid #b9daff;outline-offset:3px;background-color:rgb(4 18 42 / 74%);box-shadow:inset 0 0 0 1px rgb(200 224 255 / 82%)}
.v26-input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px #ff9f9f}
html.v26 .v26-form-error{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:var(--v26-caption);line-height:1.45;color:#ffc9c9}
.v26-form-error::before{content:'';flex:none;width:calc(16px * var(--scale, 1));height:calc(16px * var(--scale, 1));margin-top:calc(1px + 2px * (var(--scale, 1) - 1));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ff9f9f' stroke-width='1.8'/%3E%3Cpath d='M12 7.5v6M12 16.4v.2' stroke='%23ff9f9f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.v26 .v26-form-error[hidden]{display:none}
.v26-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v26-form-pair{display:grid;gap:18px;min-width:0}
.v26-form-submit{width:100%}

/* ---------- Motion: the glass rises in; reduced motion opens instantly ---------- */
@keyframes v26-dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v26-sheet-in{from{opacity:.3;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes v26-backdrop-in{from{opacity:0}to{opacity:1}}
html:not(.quiet) #v16-dialog[open]{animation:v26-dialog-in 380ms var(--v26-ease)}
html:not(.quiet) #v16-dialog[open]::backdrop{animation:v26-backdrop-in 260ms linear}
@media (prefers-reduced-motion:reduce){#v16-dialog[open],#v16-dialog[open]::backdrop{animation:none!important}}

/* phones: a full-width sheet anchored to the bottom edge */
@media (max-width:600px){
  #v16-dialog,#v16-dialog[data-kind="info"]{inset:auto 0 0 0;margin:0;width:100%;max-height:calc(100dvh - 12px);border-radius:24px 24px 0 0}
  .v26-dialog-head{padding:20px 18px 0 22px}
  .v26-dialog-body{padding:18px 22px calc(24px + env(safe-area-inset-bottom, 0px))}
  .v26-dialog-foot{padding:10px 22px calc(22px + env(safe-area-inset-bottom, 0px))}
  .v26-dialog-foot::before{left:22px;right:22px}
  html:not(.quiet) #v16-dialog[open]{animation-name:v26-sheet-in;animation-duration:420ms}
  .v26-dialog-actions .v26-btn{flex:1 1 auto}
  .v26-dialog-close{width:44px;height:44px}
}
/* short screens (laptops and small phones): compact form rhythm; controls stay ≥ 44px tall */
@media (max-height:760px){
  .v26-dialog-body{padding-top:14px}
  .v26-form,.v26-form-pair{gap:12px}
  .v26-form-field{gap:6px}
  .v26-input,.v26-select{min-height:46px;padding-block:10px}
  textarea.v26-input{min-height:0;height:calc(3 * 1.4em + 20px);height:calc(3lh + 20px)}
  html.v26 .v26-form-note{padding:10px 14px}
}
/* short laptop screens: the whole application form fits without scrolling */
@media (min-width:601px) and (max-height:760px){
  #v16-dialog{--v26-dlg-gap:12px;max-height:calc(100dvh - 24px)}
  .v26-dialog-head{padding-top:22px}
  .v26-dialog-body{padding-bottom:22px}
  .v26-dialog-foot{padding-bottom:20px}
  /* the two choices share one row; their controls share the bottom edge */
  .v26-form-pair{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:14px;align-items:end}
}

/* enlarged text on wide screens: the two choices share a row so the form keeps its height */
@media (min-width:900px){
  html.enlarged .v26-form-pair{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:16px;align-items:end}
}

/* ---------- Accessibility panel: same glass, V4 rim, switches instead of grey checkboxes ---------- */
#v12-access-panel.v26-glass{position:fixed;overflow:hidden;padding:0;border:0;border-radius:var(--v26-r-md);box-shadow:inset 0 1px 0 rgb(230 242 255 / 18%), 0 30px 70px -28px rgb(0 0 0 / 88%)}
#v12-access-panel.v26-glass:not([hidden]){display:flex;flex-direction:column}
.v26-access-scroll{position:relative;z-index:3;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 18px}
#v12-access-panel .v12-panel-top{align-items:flex-start}
#v12-access-panel legend{padding:0}
#v12-access-panel .v12-panel-top h2{padding-top:5px;color:#fff}
#v12-access-panel .v12-panel-top button{width:40px;height:40px;border:0;color:#eef4fd;background:rgb(10 34 70 / 55%);box-shadow:inset 0 0 0 1px rgb(190 214 248 / 30%);transition:background-color 200ms var(--v26-ease)}
#v12-access-panel .v12-text-size button{background:rgb(10 34 70 / 55%);box-shadow:inset 0 0 0 1px rgb(190 214 248 / 34%);transition:background-color 200ms var(--v26-ease)}
@media (hover:hover){#v12-access-panel :is(.v12-panel-top button,.v12-text-size button):hover:not(:disabled){background:rgb(30 70 130 / 62%)}}
#v12-access-panel .v12-text-size button:disabled{opacity:.36}
#v12-access-panel .v12-text-size output{color:#fff}
#v12-access-panel .v12-view-option{min-height:44px;margin:0 0 6px;cursor:pointer;color:#eef4fd}
#v12-access-panel .v12-view-option input{
  -webkit-appearance:none;appearance:none;position:relative;flex:none;width:46px;height:28px;margin:0;border-radius:999px;cursor:pointer;
  background:rgb(2 11 25 / 62%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 46%);transition:background-color 200ms var(--v26-ease), box-shadow 200ms var(--v26-ease);
}
#v12-access-panel .v12-view-option input::before{content:'';position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#a9bfdd;transition:transform 220ms var(--v26-ease), background-color 200ms var(--v26-ease)}
#v12-access-panel .v12-view-option input:checked{background:linear-gradient(115deg, #2f7bf0, #1a4a86);box-shadow:inset 0 0 0 1px rgb(205 226 255 / 72%)}
#v12-access-panel .v12-view-option input:checked::before{transform:translateX(18px);background:#fff}
#v12-access-panel .v12-reset{margin-top:6px;color:#cfe0f8;text-decoration:underline;text-decoration-color:rgb(190 214 248 / 40%);text-underline-offset:4px}
@media (hover:hover){#v12-access-panel .v12-reset:hover{color:#fff;text-decoration-color:currentColor}}
html.quiet #v12-access-panel .v12-view-option input,html.quiet #v12-access-panel .v12-view-option input::before{transition:none}
@media (max-width:600px){
  #v12-access-panel .v12-text-size button,#v12-access-panel .v12-panel-top button{width:44px;height:44px}
}

/* ---------- Menu at enlarged text: the approved card keeps its look; its CTA label stays on one line ---------- */
html.enlarged #v12-menu-dialog .v12-button{padding-inline:14px;white-space:nowrap}

/* ---------- In-page navigation: the section heading receives focus (not interactive, so no ring) ---------- */
html.v26 [data-v26-focus-target]:focus{outline:none}

/* ---------- «Підвищений контраст» across every V26 section ----------
   Text becomes white, hairlines and control edges ≥ 3:1, decorative media behind text ≤ 0.2,
   overlays on media get a solid ground. Hero, header and menu keep their approved rules and only
   gain stronger edges. */
html.contrast{--v26-text:#fff;--v26-muted:#fff;--v26-faint:#eaf2fd;--v26-line:rgb(205 226 255 / 66%)}
html.contrast :is(#about,.v26-section,.v26-footer,.v26-drawer,#v16-dialog,#v12-access-panel,#v12-menu-dialog) :is(h1,h2,h3,h4,p,li,dt,dd,span,a,button,summary,label,legend,figcaption,blockquote,cite,small,strong,b,em,time,output,td,th,div):not(.v26-outline-num):not(.v26-program-bignum):not(.v26-form-error):not(.v26-btn):not(.v26-btn *){color:#fff}
/* buttons take #fff from the --v26-text token, so a button with its own light fill keeps its dark label */
html.contrast :is(.v26-outline-num,.v26-program-bignum){-webkit-text-stroke-color:rgb(170 210 255 / 18%)}
/* solid grounds behind text that sits on media or on translucent panels */
html.contrast :is(#v16-dialog,#v12-access-panel,.v26-drawer,.v26-stage-card,.v26-map-label,.v26-virtual-art figcaption,.v26-case,.v26-form-note,.v26-dialog-done){background:#04152f!important}
html.contrast :is(.v26-input,.v26-select){background-color:#020b19}
/* edges ≥ 3:1 */
html.contrast :is(.v26-tabs,.v26-cities button,.v26-case,.v26-cell,.v26-stage-chip,.v26-map-label,.v26-virtual-art figcaption,.v26-level--national,.v26-module,.v26-drawer-list div,.v26-icon-btn,.v26-btn--secondary,.v26-chip,.v26-accordion summary i,.v26-form-note,.v26-input,.v26-select,.v26-dialog-done,.v26-story-photo,.v26-person-photo,.v26-level-formats a,.v26-now,.v26-stage-check){box-shadow:inset 0 0 0 1px rgb(214 232 255 / 80%)}
html.contrast :is(.v26-cell.is-active,.v26-cities button[aria-pressed="true"],.v26-module.is-active){box-shadow:inset 0 0 0 3px #fff}
html.contrast .v26-dialog-foot::before{background:rgb(214 232 255 / 80%)}
html.contrast .v26-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #ffb3b3}
html.contrast :is(.v26-glass,.v26-plaque,.v26-btn--primary,.v26-level--advanced)::before,
html.contrast :is(.v26-brandfield,.v26-tier-block,.v26-stack-card)::after{background:rgb(222 236 255 / 92%)}
html.contrast #v12-access-panel .v12-view-option input{box-shadow:inset 0 0 0 1.5px #fff}
html.contrast #v12-access-panel :is(.v12-panel-top button,.v12-text-size button){box-shadow:inset 0 0 0 1px rgb(214 232 255 / 80%)}
html.contrast :is(.v12-header,#v12-menu-dialog){border-color:rgb(205 226 255 / 72%)}
html.contrast #v12-menu-dialog{background:#03152e}
/* decorative media behind text (!important: sections tune these opacities with their own, more specific rules) */
html.contrast .v26-stage::before{opacity:.14!important}
html.contrast :is(.v26-glass,.v26-plaque)::after{opacity:.06!important}
html.contrast .v26-brandfield::before{opacity:.16!important}
html.contrast .v26-mentor-media{opacity:.14!important}
html.contrast .v26-stack-card::before{opacity:.1!important}
html.contrast #v16-dialog::backdrop{background:rgb(1 6 16 / 86%)}
/* Preloader (TZ 103–104, 135; markup and timing: the HTML region `preloader`). The line draws the queen in 0.8 s; then
   the outline glides onto her place in the hero while the screen clears (.36 s) and fades on her (≤ 1.2 s in all). */
.v26-preloader{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:grid;place-items:center;
  background-color:rgb(2 10 23);transition:background-color 360ms cubic-bezier(.6,0,.2,1)}
.v26-preloader::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%, rgb(20 60 140 / 34%), transparent 70%);transition:opacity 360ms cubic-bezier(.6,0,.2,1)}
.v26-preloader svg{height:min(46vh, 420px);width:auto;overflow:visible;transform-origin:0 0;
  filter:drop-shadow(0 0 6px rgb(90 160 255 / 55%));transition:transform 360ms cubic-bezier(.6,0,.2,1), opacity 120ms linear 240ms}
.v26-preloader path{stroke:#b9d8ff;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.v26-pl-out{animation:v26-pl-draw 800ms cubic-bezier(.45,.05,.3,1) forwards}
.v26-pl-in{stroke-opacity:.7;animation:v26-pl-draw 340ms cubic-bezier(.45,.05,.3,1) 440ms forwards}
@keyframes v26-pl-draw{to{stroke-dashoffset:0}}
.v26-preloader.is-leaving{background-color:rgb(2 10 23 / 0)}
.v26-preloader.is-leaving::before{opacity:0}
.v26-preloader.is-leaving svg{opacity:0}
@media (prefers-reduced-motion: reduce){.v26-preloader{display:none}}
/* She's Next beside the programme logo (2026-10-21): logo · thin rule · mark, one grid item of the header.
   --cb-h is the mark's height, --cb-gap the space on both sides of the rule. Every width keeps the nav on the
   page axis with at least 20 px to the mark, and the header actions whole. */
.v26-cobrand{--cb-h:40px;--cb-gap:21px;display:flex;align-items:center;min-width:0}
.v26-cobrand-mark{display:flex;align-items:center;flex:none;height:calc(var(--cb-h) * .93);margin-left:var(--cb-gap);padding-left:var(--cb-gap);border-left:1px solid rgb(255 255 255 / 50%)}
.v26-cobrand-mark img{display:block;width:auto;height:var(--cb-h)}
html.contrast .v26-cobrand-mark{border-color:rgb(205 226 255 / 72%)}
@media (max-width:1535px){.v26-cobrand{--cb-h:35px;--cb-gap:14px}}
/* 1280–1439: the nav sets 12 px and centres between the pair and the actions, equal space on both of its sides */
@media (max-width:1439px) and (min-width:1280px){
  .v26-cobrand{--cb-h:33px;--cb-gap:14px}
  html.v26:not(.enlarged) .v12-header-inner{grid-template-columns:auto minmax(0, 1fr) auto}
  html.v26:not(.enlarged) .v12-nav{justify-self:center;gap:10px}
  html.v26:not(.enlarged) .v12-nav :is(a, button){font-size:calc(12px * var(--scale, 1))}
}
@media (max-width:1365px) and (min-width:1280px){html.v26:not(.enlarged) .v12-header-actions .v12-apply{width:150px}}
@media (max-width:900px){.v26-cobrand{--cb-h:33px;--cb-gap:14px}}
/* from 601 to 659 px the header's apply button would squeeze the pair: the hero's own button stays the first action */
@media (min-width:601px) and (max-width:659px){.v12-header-actions .v12-apply{display:none}}
@media (max-width:600px){.v26-cobrand{--cb-h:28px;--cb-gap:10px}}
@media (max-width:389px){html.v26 .v12-brand{width:127px}}
@media (max-width:374px){html.v26 .v12-brand{width:119px}.v26-cobrand{--cb-h:26px;--cb-gap:9px}}
@media (max-width:359px){
  html.v26 .v12-header{left:12px;right:12px;padding-inline:12px}
  html.v26 .v12-brand{width:105px}
  .v26-cobrand{--cb-h:24px;--cb-gap:7px}
}
/* @end chrome */
/* @section qa-fixes — QA sweep 2026-10-23 */
/* enlarged text on phones: the hero line, the audience cards and the city chips stay inside the screen (PH-05) */
@media (max-width:600px){
  html.enlarged .v12-copy h1{font-size:min(calc(34px * var(--scale, 1)), 11.2vw)}
  html.enlarged .v26-aud-who{font-size:min(var(--v26-lead), 7.1vw)}
  html.enlarged .v26-camp .v26-cities button{text-wrap:wrap}
}
html.enlarged .v26-funding-layout,html.enlarged .v26-compass-layout,html.enlarged .v26-faq-layout,html.enlarged .v26-results-head{grid-template-columns:minmax(0, 1fr)}
.v26-mentor-text{grid-template-columns:minmax(0, 1fr)}
/* touch: the access panel's controls and the mentor's mail reach 44px on tablets too (PH-03, TB-03) */
@media (pointer:coarse){
  #v12-access-panel .v12-text-size button{width:44px;height:44px}
  #v12-access-panel .v12-reset{min-height:44px}
}
/* the mentor's mail stays on one line on 360px phones (PH-04) */
@media (max-width:380px){.v26-mentor-link{gap:8px;font-size:calc(16px * var(--scale, 1))}}
/* 320px at 150%: a long word in a FAQ question pushed the toggle off screen, «Відважної 4» ran past the mentor card,
   «підприємиця» ran past the audience card (its grid area is 92px narrower than the screen) (PH-05) */
.v26-accordion summary span{min-width:0;overflow-wrap:break-word}
@media (max-width:600px){
  html.enlarged .v26-accordion summary{font-size:min(var(--v26-h4), 7.2vw);hyphens:auto}
  html.enlarged #mentor-title{font-size:min(var(--v26-h2), calc((100vw - 96px) / 7.9))}
  html.enlarged .v26-aud-name{font-size:min(var(--v26-num-m), calc((100vw - 92px) / 7.5))}
}
/* @end qa-fixes */