/* =====================================================================
   Відважна 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);
  transform:translate3d(0, var(--v26-para, 0px), 0);will-change:transform;
}
.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))}
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}
}
/* @end base */

/* @section about */
/* About keeps the approved intro (hero → About flight, headline, lead). V26 fixes: one reading
   column with a regular rhythm; the season sentence (TZ 148) is the column's opening line, set
   larger — no label repeating it; facts and the 5 200 000 scheme form one figures group on a
   real underlay, the scheme is shown (not folded). */
#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:28px}
#about.v26-about .v13-about-copy h2{font-size:var(--v26-h2)}
#about.v26-about .v13-about-lead,#about.v26-about .v13-about-reading{max-width:620px}
#about.v26-about .v13-about-reading{align-self:start}
#about.v26-about .v13-about-reading p+p{margin-top:20px}
#about.v26-about .v26-season-accent{margin:0 0 24px;max-width:28ch;font-size:calc(clamp(19px, 15px + .45vw, 23px) * var(--scale, 1));line-height:1.4;letter-spacing:-.005em;color:#f3f7ff}
/* 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}
/* 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 group: facts row + fund scheme over one caustic underlay */
.v26-about-figures{position:relative;isolation:isolate;margin-top:clamp(48px, 5vw, 72px);display:grid;gap:16px}
.v26-stage--about{inset:-24px -6vw -80px;--v26-o:.5;-webkit-mask:linear-gradient(transparent, #000 22%, #000 78%, transparent);mask:linear-gradient(transparent, #000 22%, #000 78%, transparent)}
.v26-stage--about::after{background:radial-gradient(70% 60% at 50% 50%, rgb(2 11 25 / 10%), var(--v26-ink) 92%)}
/* the six facts are an open row on the section (hairline dividers only); the 5 200 000 scheme is the one plaque
   (verify3 A-04: two glass slabs on a plain underlay read as gradient rectangles) */
#about.v26-about .v13-facts{margin:0;padding:8px 0 4px;border:0;border-radius:0;background:none!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-width:0;max-width:100%}
/* dividers per layout, explicit (v17/v20 rules leaked a missing or a lone line, verify3 A-09) */
#about.v26-about .v13-fact{border:0;border-right:1px solid rgb(166 198 238 / 16%);min-width:0}
#about.v26-about .v13-fact:last-child{border-right:0}
@media (min-width:701px) and (max-width:1100px){
  #about.v26-about .v13-fact:nth-child(3n){border-right:0}
  #about.v26-about .v13-fact:nth-child(n+4){border-top:1px solid rgb(166 198 238 / 16%)}
}
@media (max-width:700px){
  #about.v26-about .v13-fact:nth-child(2n){border-right:0}
  #about.v26-about .v13-fact:nth-child(n+3){border-top:1px solid rgb(166 198 238 / 16%)}
}
#about.v26-about .v13-fact strong{font-size:var(--v26-num-l);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#about.v26-about .v13-fact span{font-size:var(--v26-caption);color:var(--v26-muted)}
.v26-about-fund{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);column-gap:clamp(24px, 3vw, 56px);align-items:start;padding:clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 40px);min-width:0;max-width:100%}
.v26-about-figures{min-width:0;max-width:100%}
/* the plaque and its figures arrive as one unit — never an empty glass frame (verify3 A26-02) */
html.v26-motion .v26-about-fund{opacity:0;transform:translate3d(0, 24px, 0);transition:opacity 600ms var(--v26-ease), transform 700ms var(--v26-ease)}
html.v26-motion .v26-about-fund.is-in{opacity:1;transform:none}
.v26-about-fund strong{display:block;font-weight:400;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.v26-about-fund span{display:block;margin-top:8px;font-size:var(--v26-caption);line-height:1.45;color:var(--v26-muted)}
.v26-about-fund-total strong{font-size:var(--v26-num-l);line-height:1.05;letter-spacing:-.03em}
.v26-about-fund-total span{font-size:var(--v26-body);color:#d7e3f4}
.v26-about-awards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px clamp(16px, 2vw, 32px)}
.v26-about-fund strong small{font-size:var(--v26-body);letter-spacing:0;color:var(--v26-muted)}
.v26-about-awards li{padding-left:clamp(16px, 1.6vw, 24px);border-left:1px solid var(--v26-line)}
.v26-about-awards strong{font-size:var(--v26-num-m);line-height:1.1;letter-spacing:-.02em}
html.v26-motion #about .v13-about-copy h2 span{transition:opacity 120ms linear}
@media (max-width:1100px){
  #about.v26-about .v13-about-layout{grid-template-rows:none}
  .v26-about-fund{grid-template-columns:1fr;row-gap:22px}
}
/* 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 .v13-about-copy,#about .v13-about-reading{position:relative;z-index:1}
@media (max-width:700px){
  .v26-about-fund strong{white-space:normal}
  .v26-about-fund strong small{display:block;margin-top:4px}
  #about.v26-about .v13-about-copy h2{text-wrap:wrap}
  #about.v26-about .v13-about-copy h2{font-size:calc(min(32px, 7.6vw) * var(--scale, 1))}
  .v26-about-awards{grid-template-columns:1fr}
}
/* 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)}
}
/* figures that fit their cells (verify5 V5A-03 / NEW5-G9: «12 000+» crossed its divider and read «12 000+9»,
   «5 200 000 гривень» ran into the awards column, «1 000 000 гривень550 000» ran together) */
/* narrow phones: the numerals follow the width, so «12 000+» keeps clear of the divider at 360 */
@media (max-width:400px){html:not(.enlarged) #about.v26-about .v13-fact strong{font-size:min(var(--v26-num-l), 8vw)}}
/* enlarged text: the six facts take two columns on tablets and three on desktop (3 + 3), so every numeral keeps its
   cell; the fund total stands above the awards across the plaque, and the awards take one column up to 1100 px */
@media (min-width:701px) and (max-width:1000px){
  html.enlarged #about.v26-about .v13-facts{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:28px}
  html.enlarged #about.v26-about .v13-fact{border:0;border-right:1px solid rgb(166 198 238 / 16%)}
  html.enlarged #about.v26-about .v13-fact:nth-child(2n){border-right:0}
  html.enlarged #about.v26-about .v13-fact:nth-child(n+3){border-top:1px solid rgb(166 198 238 / 16%);padding-top:24px}
}
@media (min-width:1001px){
  html.enlarged #about.v26-about .v13-facts{grid-template-columns:repeat(3, minmax(0, 1fr));row-gap:28px}
  html.enlarged #about.v26-about .v13-fact{border:0;border-right:1px solid rgb(166 198 238 / 16%)}
  html.enlarged #about.v26-about .v13-fact:nth-child(3n){border-right:0}
  html.enlarged #about.v26-about .v13-fact:nth-child(n+4){border-top:1px solid rgb(166 198 238 / 16%);padding-top:24px}
}
@media (min-width:701px){
  html.enlarged .v26-about-fund{grid-template-columns:minmax(0, 1fr);row-gap:clamp(24px, 2.4vw, 32px)}
  html.enlarged .v26-about-fund strong{white-space:normal}
}
@media (min-width:701px) and (max-width:1100px){html.enlarged .v26-about-awards{grid-template-columns:minmax(0, 1fr)}}
/* enlarged text on phones: one fact per row in two columns that may wrap; the fund scheme in one column */
@media (max-width:700px){
  html.enlarged #about.v26-about .v13-facts{grid-template-columns:minmax(0, 1fr)}
  html.enlarged #about.v26-about .v13-fact{border-right:0!important;border-top:0}
  html.enlarged #about.v26-about .v13-fact+.v13-fact{border-top:1px solid rgb(166 198 238 / 16%)}
  html.enlarged #about.v26-about .v13-fact span{overflow-wrap:anywhere;hyphens:auto}
  html.enlarged .v26-about-fund strong{font-size:min(var(--v26-num-l), 11vw)}
  html.enlarged .v26-about-awards strong{font-size:min(var(--v26-num-m), 8.5vw)}
  html.enlarged .v26-about-fund span{overflow-wrap:anywhere;hyphens:auto}
}
/* @end about */

/* @section audience */
.v26-audience-layout{display:grid;gap:clamp(28px, 3vw, 44px)}
.v26-audience-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px 40px}
/* "кому → що зробите → результат → дія": who, result and actions follow each other with one gap
   on the left track; the checklist card on the right shares the top axis. */
.v26-aud-panel{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(32px, 4.5vw, 88px);row-gap:clamp(22px, 2.4vw, 32px);align-items:start}
.v26-aud-who{grid-column:1;grid-row:1;font-size:var(--v26-h3)!important;line-height:1.4!important;color:#f0f5fd!important;max-width:560px}
.v26-aud-benefits{grid-column:2;grid-row:1 / span 3;padding:clamp(28px, 2.6vw, 44px);align-self:stretch}   /* ends with the left column when that one is taller (verify3 A26-06) */
html.v26 .v26-aud-benefits .v26-h4{margin-bottom:20px;color:#fff}
.v26-aud-benefits .v26-checks{grid-template-columns:1fr;row-gap:14px}
.v26-aud-result{grid-column:1;grid-row:2;display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--v26-line);max-width:560px}
.v26-aud-result p{color:#e3ecf8!important;font-size:var(--v26-lead)!important;line-height:1.5!important}
.v26-aud-panel .v26-actions{grid-column:1;grid-row:3;align-self:start}
.v26-audience{padding-bottom:clamp(40px, 4vw, 64px)}
@media (max-width:1100px){
  .v26-aud-panel{grid-template-columns:1fr;grid-template-rows:none}
  .v26-aud-who,.v26-aud-benefits,.v26-aud-result,.v26-aud-panel .v26-actions{grid-column:1;grid-row:auto}
}
@media (max-width:700px){
  .v26-audience-top .v26-tabs{width:100%}
  .v26-aud-panel .v26-actions .v26-btn{flex:1 1 auto}
}
/* Approved 2026-10-15 (variant C): on desktop the checklist runs in two columns, so the panel and the
   left column are about the same height; the actions sit on the panel's bottom line. */
@media (min-width:1101px){
  html:not(.enlarged) .v26-aud-panel{grid-template-rows:auto auto 1fr}
  html:not(.enlarged) .v26-aud-panel .v26-aud-benefits{align-self:stretch;display:grid;align-content:center}
  html:not(.enlarged) .v26-aud-benefits .v26-checks{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px, 2vw, 32px);row-gap:14px}
  html:not(.enlarged) .v26-aud-panel .v26-actions{align-self:end}
}
/* Laptops (1101–1439): the checklist card takes the larger share, so its two columns keep the line lengths of 1440
   instead of one word per line, and the card no longer stretches the left column into a hole above the buttons
   (verify5 V5A-06) */
@media (min-width:1101px) and (max-width:1439px){
  html:not(.enlarged) .v26-aud-panel{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:clamp(28px, 3vw, 48px)}
}
/* enlarged text (one-column checklist): the glass hugs its list from the top line of the left column instead of
   stretching into an empty slab under it (verify5 V5A-07) */
@media (min-width:1101px){
  html.enlarged .v26-aud-panel .v26-aud-benefits{align-self:start}
}
/* @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}
.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}
/* 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)}
/* @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.
   «9 + 2» is one expression on a 3-track grid; captions sit under their own numerals without
   widening the tracks (B-14). The bootcamp panel: title + tabs → content (top-aligned) → accent strip. */
/* 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:translate3d(0, var(--v26-para, 0px), 0) scaleX(-1)}
#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:repeat(4, auto);column-gap:clamp(20px, 2vw, 32px)}
.v26-level{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:28px;padding:clamp(28px, 2.8vw, 48px)}
/* 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--national .v26-metric b{color:#e3ebf6}
.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{display:grid;gap:12px;align-content:start;justify-items:start}
.v26-level-for{font-size:var(--v26-body)!important}

/* «9 + 2»: one row of numerals on a 3-track grid (num | + | num) with equal gaps; captions in row 2 under
   their own numeral. Captions have inline-size containment, so they never widen a track: the first one
   spans the 9 and the plus (and reaches into the gap before the 2), the second takes the rest of the
   card; on a narrow card they wrap inside their own cell instead of spilling out (SF-C3). */
/* --mg: the gap on both sides of the plus. It is .38em, opened up just enough on narrower cards (1024–1366, the
   one-column tablet card) for «тижнів навчання» to keep one line under «9 +», as it does in the National card
   (B-N6): the caption (≈9.5 caption sizes wide) must fit 9 + gap + plus + (gap − 12 px). Both gaps stay equal. */
.v26-metric{--mg:max(.38em, calc((var(--v26-caption) * 9.6 - 1.28em + 14px) / 2));display:grid;grid-template-columns:max-content max-content minmax(max-content, 1fr);justify-content:start;align-content:start;column-gap:var(--mg);row-gap:12px;padding-block:24px;border-block:1px solid var(--v26-line);font-size:var(--v26-num-xl);line-height:.92}
.v26-metric-part{display:contents}
.v26-metric b,.v26-metric-plus{grid-row:1;justify-self:start;font-size:1em;line-height:.92;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;font-weight:400}
.v26-metric b{grid-column:1}
.v26-metric-plus{grid-column:2;color:var(--v26-glow)}
.v26-metric-part--2>b{grid-column:3}
.v26-metric-cap{grid-row:2;grid-column:1 / span 2;min-width:0;contain:inline-size;margin-right:calc(12px - var(--mg))}
.v26-metric-part--2>.v26-metric-cap{grid-column:3;margin-right:0}
.v26-level--national .v26-metric-cap{grid-column:1 / -1;margin-right:0}
.v26-metric-cap>span{display:block;font-size:var(--v26-caption);line-height:1.4;letter-spacing:0;color:var(--v26-muted);hyphens:manual;overflow-wrap:normal}

.v26-level-text{color:#d7e3f4!important;max-width:52ch}
.v26-level-limit,.v26-level-formats{display:flex;align-items:flex-start;gap:12px;align-self:end;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)}
/* the two formats are links down to the bootcamp panel (text links, not pills: chips stay static) */
.v26-level-formats{flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:4px;color:var(--v26-muted)}
.v26-nw{white-space:nowrap}
.v26-level-formats a{display:inline-block;padding-block:7px;color:#fff;text-decoration:underline;text-decoration-color:rgb(170 204 250 / 38%);text-underline-offset:6px;text-decoration-thickness:1px;font-size:var(--v26-body);transition:text-decoration-color 200ms}
.v26-level-formats a:hover{text-decoration-color:rgb(220 236 255 / 90%)}
.v26-level-formats a svg{display:inline-block;vertical-align:-.2em;width:18px;height:18px;margin-left:6px;fill:none;stroke:var(--v26-glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--v26-ease)}
.v26-level-formats a:hover svg{transform:translateY(2px)}

/* ---- 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%)}
/* phones: no map, so the centres are a plain list (TZ mobile «Замість карти — список міст») */
.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 → note), 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{grid-row:auto;grid-template-rows:none}
  /* 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}
}
@media (max-width:600px){
  .v26-map,.v26-cities,.v26-note-map{display:none}
  .v26-city-list{display:grid}
  .v26-camps-head .v26-tabs{width:100%}
}
@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 two captions cannot sit side by side under «9 + 2» (together they are wider than the card), so the sum
   is a column sum (CR4-SF-03): the plus in a left gutter, «2» right under «9», each caption under its own figure as on
   wide screens, with the card's full remaining width (one line each at 100%). Same at every text scale. */
@media (max-width:600px){
  .v26-level--advanced .v26-metric{grid-template-columns:max-content minmax(0, 1fr);column-gap:0;row-gap:8px}
  .v26-level--advanced .v26-metric b{grid-column:2;grid-row:1;justify-self:start}
  .v26-level--advanced .v26-metric-cap{grid-column:2;grid-row:2;margin:0 0 10px}
  .v26-level--advanced .v26-metric-plus{grid-column:1;grid-row:3;margin-right:.16em}
  .v26-level--advanced .v26-metric-part--2>b{grid-row:3}
  .v26-level--advanced .v26-metric-part--2>.v26-metric-cap{grid-row:4;margin:0}
}
/* 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}
}
/* 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: «КНУ ім. Тараса Шевченка» takes a full row, so every name fits one line and the nine centres make
   five full rows (no orphan cell); «Івано-Франківськ» never breaks at its hyphen (CR-SF3-05) */
.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))}}
/* @end formats */

/* @section funding */
/* 6. Funding (TZ 267–283). Reading order = TZ: H2 → lead → total → podium → condition → «Правила участі».
   Desktop: the copy column is one group — title, lead, the total, the condition and the action, top-aligned with
   the section's title line (C-N6); the podium stands in the right columns on a floor line that is never higher
   than the action's baseline.
   Podium: three 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).
   Each step is as tall as its content plus one rise per rank, so a face is never an empty slab (≤ ~35 % of it
   without content); sums sit at the top of each face and rise with the hierarchy; the tier names sit on one
   shared plinth band across all three steps (one seam, one chip row, chips never wrap). Pawn, 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 under the base and a soft pool of light around it. */
/* the floor glow and the podium pool stay inside the section: nothing widens the page */
.v26-funding{overflow-x:clip}
.v26-funding .v26-stage::after{background:linear-gradient(90deg, var(--v26-ink) 0%, rgb(2 11 25 / 74%) 32%, rgb(2 11 25 / 24%) 100%)}
/* Desktop grid: [copy column] [gutter] [step 1] [step 2] [step 3]. The title and the lead run across the copy
   column and the two lower steps (over the space the stair leaves free); total, condition and action follow
   in the copy column as one group. The last row takes any extra height of the podium, so the copy never splits. */
.v26-funding-layout{
  --step-gap:clamp(10px, 1.1vw, 18px);
  display:grid;grid-template-columns:minmax(0, 4.2fr) clamp(18px, 3.4vw, 78px) repeat(3, minmax(0, 2.6fr));
  grid-template-rows:auto auto auto auto auto 1fr;
  column-gap:var(--step-gap);align-items:start;
}
html.v26 .v26-funding-title{grid-column:1 / 5;grid-row:1;margin-bottom:20px;max-width:none}
html.v26 .v26-funding-lead{grid-column:1 / 5;grid-row:2;max-width:52ch}
.v26-fund-total{grid-column:1;grid-row:3;display:grid;justify-items:start;gap:10px;width:100%;margin-top:clamp(36px, 3.6vw, 64px);padding-top:24px;border-top:1px solid var(--v26-line)}
html.v26 .v26-fund-total .v26-display{margin:0;font-size:var(--v26-num-xl);line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap}
html.v26 .v26-fund-total .v26-display b{font-size:inherit;letter-spacing:inherit}
html.v26 .v26-fund-total .v26-display>span{display:block;margin-top:8px;font-size:var(--v26-lead);line-height:1.3;letter-spacing:0;color:var(--v26-muted)}
/* the fund figure rolls 0 → 6 in one continuous move (odometer), then rests as plain text */
.v26-roll{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.v26-roll-strip{display:block;transform:translate3d(0, 0, 0);transition:transform 1200ms cubic-bezier(.42,0,.2,1)}
.v26-funding .v26-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.v26 .v26-fund-note{grid-column:1;grid-row:4;max-width:40ch;margin-top:22px}
.v26-funding-rules{grid-column:1;grid-row:5;justify-self:start;margin-top:24px}
/* 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)))}

.v26-podium{
  --podium-h:clamp(320px, 13vw + 190px, 430px);--piece-h:calc(var(--podium-h) * .62);--base-h:clamp(54px, 4.2vw, 64px);
  --lid:clamp(10px, .9vw, 16px);--rise:clamp(19px, 1.6vw, 26px);
  grid-column:3 / 6;grid-row:1 / 7;align-self:end;position:relative;list-style:none;margin:0;padding:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(3, 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:-3%;right:0;bottom:-1px;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgb(150 196 255 / 50%) 16%, rgb(233 238 249 / 72%) 74%, transparent)}
.v26-podium::after{content:'';position:absolute;left:-6%;right:0;bottom:-40px;height:80px;pointer-events:none;z-index:-1;
  background:radial-gradient(56% 50% at 70% 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-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 (all three pieces): 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%)}

/* the step: lid (top face) + front face (sum) + plinth band (tier name). Height = content + one rise per rank. */
html.v26 .v26-tier-block.v26-glass{
  display:grid;grid-template-rows:auto var(--base-h);
  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 */
.v26-tier-lid{position:absolute;inset:0 0 auto;height:var(--lid);z-index:1;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%)}
/* 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(16px, 1.5vw, 26px);grid-row:1;position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:calc(var(--lid) + clamp(8px, .7vw, 13px)) var(--fx) calc(var(--rank) * var(--rise) + clamp(12px, 1.1vw, 18px));min-height:0}
.v26-tier-base{grid-row:2;position:relative;z-index:3;display:flex;align-items:center;min-width:0;padding:0 clamp(12px, 1.2vw, 20px);
  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%)}
.v26-tier-base .v26-plaque{flex:none}
html.v26 .v26-tier-sum{margin:0;font-size:var(--v26-num-m);line-height:1.08;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
html.v26 .v26-tier-sum span{font-size:var(--v26-body);letter-spacing:0;color:var(--v26-muted);margin-right:.1em}
html.v26 .v26-tier--top .v26-tier-sum{font-size:min(var(--v26-num-l), 15cqi)}
html.v26 .v26-tier-block.v26-glass{container-type:inline-size}
html.v26 .v26-tier-unit{margin:0;font-size:var(--v26-caption);line-height:1.4;color:var(--v26-faint)}

/* Choreography (motion only). The total rolls first; then each step grows out of the floor (.is-up) carrying its
   lid, its piece and its content: the sum fades in during the first third of the rise and counts from 0, the
   plinth chip slides in as the step lands (N-U6: a step is never a blank slab on screen). --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 820ms var(--v26-ease)}
html.v26-motion .v26-tier.is-up .v26-tier-rise{transform:none}
html.v26-motion .v26-tier-face{opacity:0;transition:opacity 260ms var(--v26-ease)}
html.v26-motion .v26-tier-base .v26-plaque{opacity:0;transform:translateX(-12px);transition:opacity 360ms var(--v26-ease) 300ms, transform 520ms var(--v26-ease) 300ms}
html.v26-motion .v26-tier.is-shown .v26-tier-face,html.v26-motion .v26-tier.is-shown .v26-tier-base .v26-plaque{opacity:1;transform:none}
html.v26-motion .v26-tier-piece{opacity:0;transition:opacity 600ms var(--v26-ease)}
html.v26-motion .v26-podium.is-armed .v26-tier-piece{opacity:1}

/* Tablet: one column of copy, the total on its own row, then the podium across the full width (the pawn and
   the rook stand on the lower steps, so nothing else shares the space above them). */
@media (max-width:1180px){
  .v26-funding-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-template-rows:none}
  html.v26 .v26-funding-title,html.v26 .v26-funding-lead,html.v26 .v26-fund-note,.v26-funding-rules{grid-column:1 / -1}
  html.v26 .v26-funding-title{grid-row:1}
  html.v26 .v26-funding-lead{grid-row:2;max-width:56ch}
  .v26-fund-total{grid-column:1 / -1;grid-row:3;align-self:start;margin-top:clamp(36px, 5vw, 56px)}
  .v26-podium{grid-column:1 / -1;grid-row:4;align-self:end;margin-top:clamp(28px, 4vw, 44px)}
  html.v26 .v26-fund-note{grid-row:5}
  .v26-funding-rules{grid-row:6}
}
/* Phones and small tablets (≤ 760 px), and tablets with enlarged text (≤ 1023 px, CR-FP-14): three 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 < rook 95 < queen 128 px). The two blocks below are
   the same rules: once for every phone, once for an enlarged-text tablet. */
@media (max-width:760px){
  .v26-funding-layout{grid-template-columns:minmax(0, 1fr)}
  .v26-funding-layout>*{grid-column:1!important;grid-row:auto!important}
  .v26-fund-total{margin-top:32px}
  .v26-podium{margin-top:28px}
  .v26-podium{grid-template-columns:minmax(0, 1fr);gap:10px;--base-h:auto;--piece-h:128px;--lid:0px}
  .v26-podium::before,.v26-podium::after{display:none}
  .v26-tier{clip-path:none}
  .v26-tier[data-tier="1"]{width:82%}
  .v26-tier[data-tier="2"]{width:91%}
  .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;border-radius:var(--v26-r-md)}
  .v26-tier-base{grid-row:1;background:none;box-shadow:none;padding:18px 18px 0}
  .v26-tier-face{grid-row:2;padding:10px 18px 18px}
  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%)}
  .v26-tier-piece{position:absolute;right:18px;bottom:18px;z-index:4;margin:0}
  .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:70px}
  .v26-tier[data-tier="1"] .v26-tier-face{padding-right:76px}
  .v26-tier[data-tier="2"] .v26-tier-face{padding-right:92px}
  .v26-tier--top .v26-tier-face{padding-bottom:24px;padding-right:96px}
  .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}
}
@media (min-width:761px) and (max-width:1023px){
  html.enlarged .v26-podium{grid-template-columns:minmax(0, 1fr);gap:10px;--base-h:auto;--piece-h:128px;--lid:0px;max-width:580px}
  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:82%}
  html.enlarged .v26-tier[data-tier="2"]{width:91%}
  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;border-radius:var(--v26-r-md)}
  html.enlarged .v26-tier-base{grid-row:1;background:none;box-shadow:none;padding:18px 18px 0}
  html.enlarged .v26-tier-face{grid-row:2;padding:10px 18px 18px}
  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}
  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:70px}
  html.enlarged .v26-tier[data-tier="1"] .v26-tier-face{padding-right:76px}
  html.enlarged .v26-tier[data-tier="2"] .v26-tier-face{padding-right:92px}
  html.enlarged .v26-tier--top .v26-tier-face{padding-bottom:24px;padding-right:96px}
  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.enlarged .v26-funding-layout{grid-template-columns:minmax(0, 1fr);grid-template-rows:none}
html.enlarged .v26-funding-layout>*{grid-column:1!important;grid-row:auto!important}
html.enlarged .v26-podium{margin-top:40px;align-self:start}
html.enlarged .v26-fund-total{margin-top:clamp(28px, 4vw, 40px)}
@media (min-width:1024px){
  html.enlarged .v26-tier-base{padding-block:12px}
}
html.enlarged .v26-tier-base .v26-plaque{flex:0 1 auto;white-space:normal;text-align:left}
html.v26.enlarged .v26-tier-sum{white-space:normal}
@media (max-width:760px){
  /* enlarged text on phones: the figures need the whole plate width; the top plate stays dominant by size */
  html.enlarged .v26-tier-piece{display:none}
  html.enlarged .v26-tier .v26-tier-face{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)}
}
/* Pawn and rook in the queen's material stand on the lower steps (feedback 2026-10-14). Their height follows
   the hierarchy of the podium: pawn .56, 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="rook"]{--pf:.74;--pa:.5953}
.v26-tier-piece--figure img{display:block;height:100%;width:auto;max-width:none}
/* @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; track tabs and
   the «NN / 09» 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.
   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, number 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 = number +
   title, body = media + description; only the open module plays.
   «Результат тижня» 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-pinned #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);transform-origin:50% 0;backface-visibility:hidden}
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-pinned .v26-program.is-compact .v26-module-result{display:none}
.v26-module-result.is-flipping{animation:v26-flip 520ms var(--v26-ease)}
@keyframes v26-flip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg);opacity:.2}55%{transform:rotateX(-90deg);opacity:.2}100%{transform:rotateX(0)}}

/* ---------- pinned scene ---------- */
/* head (CR-FP-02): H2 on the container axis and on the --v26-pin-top line; tabs + stepper at the right end of
   the row, bottom-aligned with the title's last line (below 1400 px they stack, right-aligned) */
html.v26-pinned .v26-program-head{margin-bottom:var(--head-gap, 28px)}
html.v26-pinned .v26-program-titles{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 40px}
html.v26-pinned .v26-program-titles .v26-h2{flex:1 1 0;min-width:0}
html.v26-pinned .v26-program-controls{flex:0 0 auto;align-self:flex-end;justify-content:flex-end;gap:10px 20px}
/* narrower laptops: tabs over the stepper, right-aligned, so the title keeps its two lines */
@media (max-width:1399px){html.v26-pinned .v26-program-controls{flex-direction:column;align-items:flex-end}}

/* 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-pinned .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-pinned .v26-modules{position:absolute;inset:0 0 auto;height:var(--card-h, 320px)}
html.v26-pinned #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-pinned #program .v26-module::before,html.v26-pinned #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-pinned #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-pinned .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-pinned .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-pinned .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-pinned .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-pinned .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-pinned .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 «Модуль NN») */
html.v26-pinned .v26-module-tag{display:block;position:absolute;left:14px;top:14px;z-index:3;min-width:38px;padding:5px 10px;border-radius:999px;text-align:center;
  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-pinned .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-pinned .v26-module-num,html.v26-pinned .v26-module-title,html.v26-pinned .v26-module-desc,html.v26-pinned .v26-module-extra{
  grid-column:2;position:relative;z-index:1;padding-inline:var(--pad);opacity:var(--ta, 1)}
html.v26-pinned .v26-module-num{grid-row:2;margin-bottom:12px}
html.v26-pinned .v26-module-title{grid-row:3;margin-bottom:14px;max-width:calc(24ch + 2 * var(--pad))}
html.v26-pinned .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-pinned #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-pinned #program .v26-module-title{font-size:clamp(var(--v26-h3), calc(var(--tile-w, 380px) * .09 - 18px), 40px)}
html.v26-pinned #program .v26-module-desc{font-size:clamp(var(--v26-body), calc(var(--tile-w, 380px) * .05 - 7px), 21px)}
@media (min-height:1200px){
  html.v26-pinned #program .v26-module-title{font-size:clamp(var(--v26-h3), 2.8vh, 40px)}
  html.v26-pinned #program .v26-module-desc{font-size:clamp(var(--v26-body), 1.5vh, 21px)}
}
html.v26-pinned .v26-module-extra{grid-row:5;margin-top:22px}
/* low laptops with long copy: no «Модуль NN» caption (the stepper carries the number), tighter plate */
html.v26-pinned #program.is-tight .v26-module{--vpad:18px}
html.v26-pinned .v26-program.is-tight .v26-module-num{display:none}
html.v26-pinned .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-pinned .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-pinned #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-pinned .v26-queen-stage--program,html.v26-pinned .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-pinned .v26-queen-stage--program{z-index:2;transform-origin:50% 100%}
html.v26-pinned .v26-queen-stage--program canvas{transform-origin:50% 100%;transform:rotate(var(--lean, 0deg))}
html.v26-pinned .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-pinned .v26-program-qrefl{display:block;z-index:1;opacity:var(--ra, .22);transform-origin:50% 0}
html.v26-pinned .v26-program-ground>.v26-program-qrefl{top:var(--board-u, 0px)}   /* (board coordinates, like the queen) */
html.v26-pinned .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-pinned #program .v26-module{background:none!important;box-shadow:none!important}
html.contrast.v26-pinned #program .v26-module-media{box-shadow:inset 0 0 0 2px rgb(214 232 255 / 80%)}

/* ---------- static flow ---------- */
html:not(.v26-pinned) .v26-program .v26-stepper{display:none}
html:not(.v26-pinned) .v26-program-head{display:block;margin-bottom:clamp(28px, 4vw, 44px)}
html:not(.v26-pinned) .v26-program-viewport{width:min(var(--v26-max), calc(100% - 2 * var(--v26-gutter)));margin-inline:auto}
html:not(.v26-pinned) .v26-modules{display:grid;gap:10px;transform:none!important}
html.v26:not(.v26-pinned) .v26-module.v26-glass{border-radius:var(--v26-r-md)}
html:not(.v26-pinned) .v26-module-media{aspect-ratio:16 / 9}
/* desktop (reduced motion, enlarged text, low screens; CR-FP-13): all nine modules at once as a grid of cards —
   media, «Модуль NN», title, description (+ data) — each card exactly as large as its content */
@media (min-width:1024px){
  html:not(.v26-pinned) .v26-modules{grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(14px, 1.4vw, 24px)}
  html.enlarged:not(.v26-pinned) .v26-modules{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html:not(.v26-pinned) .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)}
  html:not(.v26-pinned) .v26-module-body{display:contents}
  html:not(.v26-pinned) .v26-module-media{grid-row:1;border-radius:calc(var(--v26-r-md) - 6px);margin-bottom:clamp(18px, 1.6vw, 24px)}
  html:not(.v26-pinned) .v26-module-num{grid-row:2;padding-inline:var(--cx);margin-bottom:8px}
  html:not(.v26-pinned) .v26-module-title{grid-row:3;padding-inline:var(--cx);margin-bottom:10px}
  html:not(.v26-pinned) .v26-module-desc{grid-row:4;padding-inline:var(--cx)}
  html:not(.v26-pinned) .v26-module-extra{grid-row:5;align-self:start;padding-inline:var(--cx);margin-top:18px}
  /* two columns (enlarged text): module 09 would stand alone with an empty half beside it (C-N8), so it spans the
     row as one horizontal card — its picture on the left, its copy beside it, centred on the picture */
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd){grid-column:1 / -1;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(20px, 2.4vw, 40px);padding:8px}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) .v26-module-media{grid-column:1;grid-row:1 / -1;margin-bottom:0}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) :is(.v26-module-num, .v26-module-title, .v26-module-desc, .v26-module-extra){grid-column:2}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) .v26-module-num{grid-row:2}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) .v26-module-title{grid-row:3}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) .v26-module-desc{grid-row:4}
  html.enlarged:not(.v26-pinned) .v26-module:last-child:nth-child(odd) .v26-module-extra{grid-row:5}
}
/* phones and tablets: the TZ's vertical accordion (one module open; header = number + title, body = media +
   description; the tapped header stays in place) */
@media (max-width:1023px){html:not(.v26-pinned) .v26-module-num{display:none}}
.v26-module-toggle{display:flex;align-items:baseline;gap:clamp(14px, 2vw, 28px);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{flex:none;min-width:2.4ch;font-size:var(--v26-caption);letter-spacing:.04em;color:var(--v26-faint);font-variant-numeric:tabular-nums}
.v26-module-toggle-title{flex:1;min-width:0}
.v26-module-toggle svg{flex:none;align-self:center;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-pinned) .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-pinned) .v26-module-body[hidden]{display:none}
  html.v26-motion:not(.v26-pinned) .v26-module-body:not([hidden]){animation:v26-acc-in 360ms var(--v26-ease)}
  html:not(.v26-pinned) .v26-module-media{grid-column:1;grid-row:1 / span 2;border-radius:var(--v26-r-sm)}
  html:not(.v26-pinned) .v26-module-body>.v26-module-desc{grid-column:2;grid-row:1;max-width:62ch}
  html:not(.v26-pinned) .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-pinned) .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-pinned) .v26-module-body{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:16px}
  html:not(.v26-pinned) .v26-module-body>*{grid-column:1!important;grid-row:auto!important}
  .v26-program-controls,.v26-program-controls .v26-tabs{width:100%}
}
/* enlarged text on phones (CR-FP-R4-04): the two track tabs stack and the indicator moves vertically, so
   «Діюча підприємиця» never runs past its pill */
@media (max-width:600px){
  html.enlarged #program .v26-tabs{grid-template-columns:1fr;width:100%}
  html.enlarged #program .v26-tabs::before{right:5px;width:auto;bottom:auto;height:calc((100% - 10px) / 2);transform:translateY(calc(var(--i) * 100%))}
}
/* 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-pinned) .v26-module-body{grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:18px}
  html.enlarged:not(.v26-pinned) .v26-module-body>*{grid-column:1!important;grid-row:auto!important}
  html.v26.enlarged:not(.v26-pinned) .v26-module-body>.v26-module-desc{max-width:none}
}
/* phones with enlarged text (C-N2 / NEW-G2): the number goes above the title, so the title gets the whole width
   between the card's edge and the chevron; long words hyphenate inside that width, never run under the chevron */
@media (max-width:480px){
  html.enlarged .v26-module-toggle{display:grid;grid-template-columns:minmax(0, 1fr) 22px;grid-template-areas:'num chev' 'title chev';column-gap:12px;row-gap:2px;padding-inline:16px 14px}
  html.enlarged .v26-module-toggle-num{grid-area:num}
  html.enlarged .v26-module-toggle-title{grid-area:title;font-size:calc(var(--v26-h3) * .86);line-height:1.22;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  html.enlarged .v26-module-toggle svg{grid-area:chev}
}

/* ---------- 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-pinned #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-pinned #program .v26-module-plate{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.v26-pinned #program .v26-module-plate::before,html.v26-pinned #program .v26-module-plate::after{content:none!important}
html.v26-pinned #program .v26-module-media{clip-path:inset(calc(12px * var(--pa, 0)) round calc(var(--r) - 12px * var(--pa, 0)))}
html.v26-pinned #program .v26-module.is-active .v26-module-media{box-shadow:none}
html.v26-pinned #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-pinned #program .v26-module::before{-webkit-mask:none;mask:none;background:none;box-shadow:none;border:3px solid #fff;padding:0;box-sizing:border-box}
/* @end program */

/* @section compass */
/* 8. Compass (feedback 2026-10-14/15, verify3 D3-N1…N4, D3-N8, verify5 D5-N8): the heading, two compact steps that carry
   the TZ sentence split into its two actions, a connector that draws itself, and beside them the approved glass compass
   («шахове скло»): a seamless 10 s loop (960 / 1440 files) melting into the page through a radial mask; its poster
   stands in under reduced motion. The registration date stays with Stage 01 below. */
.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" "route figure";column-gap:clamp(32px, 4.5vw, 96px);row-gap:clamp(28px, 3vw, 44px);align-items:start}
.v26-compass-figure{align-self:center}
.v26-compass-title{grid-area:title}
html.v26 .v26-compass .v26-compass-title{max-width:24ch}
.v26-route2-wrap{grid-area:route;display:grid;gap:14px;min-width:0;position:relative;z-index:1}   /* above the loop's masked overhang */
.v26-route2{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-rows:auto 40px auto}
.v26-route2-step{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;column-gap:clamp(16px, 1.6vw, 28px);padding:clamp(16px, 1.3vw, 22px) clamp(20px, 1.7vw, 28px);min-width:0}
.v26-route2-step--goal{background:radial-gradient(90% 70% at 0% 0%, rgb(110 170 255 / 30%), transparent 60%), linear-gradient(158deg, rgb(52 112 214 / 44%) 0%, rgb(22 60 128 / 50%) 40%, rgb(8 26 58 / 72%) 100%)}
.v26-route2 .v26-step-num{font-size:var(--v26-num-m);min-width:2ch}
.v26-route2-text{margin:0;font-size:var(--v26-lead);line-height:1.35;color:#eef4ff;text-wrap:pretty;min-width:0}
.v26-route2-action{justify-self:end}
.v26-route2-action .v26-btn{white-space:nowrap}
html.v26 .v26-route2-note{padding-left:4px}
/* the connector runs down from 01's numeral to 02's */
.v26-route2-link{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:calc(clamp(20px, 1.7vw, 28px) + 1ch);font-size:var(--v26-num-m)}
.v26-route2-track{position:relative;flex:1;width:2px;border-radius:2px;background:repeating-linear-gradient(180deg, rgb(150 196 255 / 30%) 0 4px, transparent 4px 11px)}
.v26-route2-track i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, #6fa6ff, #cfe2ff);box-shadow:0 0 10px rgb(127 178 255 / 85%);transform:scaleY(var(--p, 1));transform-origin:center top}
.v26-route2-link svg{flex:none;width:18px;height:12px;margin:-2px 0 0 -8px;overflow:visible;opacity:var(--p, 1)}
.v26-route2-link path{fill:none;stroke:#cfe2ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgb(127 178 255 / 85%))}
/* Approved 2026-10-15 (sketch «шахове скло»): a glass compass with a chessboard dial; its needle searches and settles in
   a seamless 10 s loop. The square video melts into the page through a radial mask. */
.v26-compass-figure{grid-area:figure;position:relative;margin:0;justify-self:center;width:min(100%, clamp(360px, 36vw, 600px));aspect-ratio:1;pointer-events:none;overflow:visible}
.v26-compass-loop{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.32);transform-origin:50% 56%;
  -webkit-mask:radial-gradient(closest-side, #000 56%, transparent 96%);mask:radial-gradient(closest-side, #000 56%, transparent 96%)}
@media (max-width:1100px){
  .v26-compass-layout{grid-template-columns:minmax(0, 1fr);grid-template-areas:"title" "route" "figure"}
  .v26-compass-figure{width:min(100%, 420px)}
}
/* tablets and phones: both steps share one layout: number, sentence, then the action under the sentence */
@media (max-width:900px){
  .v26-route2-step{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"num text" "num action";row-gap:14px;align-items:start}
  .v26-route2 .v26-step-num{grid-area:num}
  .v26-route2-text{grid-area:text}
  .v26-route2-action{grid-area:action;justify-self:start}
}
/* phones: the compass stays (verify5 U5-N2 / D5-N6), centred under the note; the dark top of the frame tucks under
   the row gap (its masked edge is transparent), so the disc sits close to the steps it belongs to */
@media (max-width:700px){ .v26-compass-figure{width:min(78vw, 300px);margin:-28px auto -16px} }
/* enlarged text: one column below 1200 px, the steps no wider than their content needs (verify5 D5-N7: a full-width
   strip was half empty glass); from 1200 px the desktop pair returns under a full-width heading — steps left, compass
   right, each step's action under its sentence — so the compass stays in the first view */
html.enlarged .v26-compass-layout{grid-template-columns:minmax(0, 1fr);grid-template-areas:"title" "route" "figure"}
html.enlarged .v26-route2-wrap{max-width:min(100%, calc(820px * var(--scale, 1)))}
html.enlarged .v26-route2-action .v26-btn{white-space:normal;max-width:100%}
@media (min-width:1200px){
  html.enlarged .v26-compass-layout{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);grid-template-areas:"title title" "route figure"}
  html.enlarged .v26-route2-wrap{max-width:none}
  html.enlarged .v26-route2-step{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"num text" "num action";row-gap:14px;align-items:start}
  html.enlarged .v26-route2 .v26-step-num{grid-area:num}
  html.enlarged .v26-route2-text{grid-area:text}
  html.enlarged .v26-route2-action{grid-area:action;justify-self:start}
}
@media (max-width:1100px){
  html.enlarged .v26-route2-step{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"num text" "num action";row-gap:14px;align-items:start}
  html.enlarged .v26-route2 .v26-step-num{grid-area:num}
  html.enlarged .v26-route2-text{grid-area:text}
  html.enlarged .v26-route2-action{grid-area:action;justify-self:start}
}
.v26-compass{overflow-x:clip}   /* the scaled compass loop never widens the page */
/* pinned: #stages starts 67 px up (base pin line), under the compass's masked reflection; the compass paints above the
   board's dark top band, so the 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). Pinned: two fixed zones — copy on the left (title, ONE stage card that
   cross-fades in place, the stepper and 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}
.v26-stage-cal{flex:none}
.v26-stage-cal svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-3px}
.v26-stage-cal.is-pulse{animation:v26-stage-pulse 1.5s var(--v26-ease) 1}
@keyframes v26-stage-pulse{0%{box-shadow:0 0 0 0 rgb(127 178 255 / 75%), 0 14px 34px -20px rgb(42 107 224 / 85%)}100%{box-shadow:0 0 0 16px rgb(127 178 255 / 0%), 0 14px 34px -20px rgb(42 107 224 / 85%)}}
/* The TZ note qualifies the dates: frame footer under the card (pinned), date slot of stage 02 (static). */
.v26-stages-frame>.v26-stages-tbd{margin-top:18px;padding-top:14px;border-top:1px solid var(--v26-line)}
html.v26-pinned .v26-stage-date.v26-stage-tbd,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-frame>.v26-stages-tbd,html:not(.v26-pinned) .v26-stages-controls,html:not(.v26-pinned) .v26-board{display:none}
.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:
   each light is its own layer, so the plate is never repainted while scrolling); 04 and 06 flare in their pause */
.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;will-change:opacity;
  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).
   The button only positions; the label carries the surface, the 01 status plaque sits under it. */
.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-num{font-size:var(--v26-caption);line-height:1.3;letter-spacing:.06em;color:var(--v26-faint);font-variant-numeric:tabular-nums}
.v26-route-chip-name{font-size:var(--v26-caption);line-height:1.3}
.v26-route-chip .v26-stage-cal{justify-self:start;min-height:22px;padding:2px 10px;gap:6px;font-size:calc(12px * var(--scale, 1));line-height:1.2}
.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-visited .v26-route-chip-num{color:#9cc2ff}
.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-num{color:#cfe2ff}
.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-num,.v26-board.is-compact .v26-route-chip-name{font-size:calc(12px * var(--scale, 1))}
.v26-board.is-compact .v26-route-chip .v26-stage-cal{min-height:20px;padding:1px 8px;font-size:calc(11px * var(--scale, 1))}
.v26-board.is-compact .v26-route-chip{gap:3px}
@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{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%)}
html:not(.v26-pinned) .v26-stage-item.is-cal{background:linear-gradient(90deg, rgb(42 107 224 / 16%), rgb(42 107 224 / 0%) 72%)}
.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.v26:not(.v26-pinned) .v26-stages .v26-stage-tbd{font-size:var(--v26-caption);line-height:1.5;color:var(--v26-faint)}
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}
  html.v26:not(.v26-pinned) .v26-stages .v26-stage-tbd{flex-basis:100%}
  .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{padding:18px 22px}html.v26-pinned .v26-stages-frame>.v26-stages-tbd{margin-top:12px;padding-top:10px}}
/* 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;will-change:opacity}
@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 */
/* one calendar status for the whole scene, beside the counter: neither the route chips nor the 01 card repeat it, so
   it shows exactly once at every step (verify5 D-07) */
.v26-stages-now{display:none;margin:0}
html.v26-pinned .v26-stages-now:not([hidden]){display:inline-flex;align-items:center;gap:10px;font-size:var(--v26-caption);color:var(--v26-text)}
html.v26-pinned .v26-route-chip .v26-stage-cal,html.v26-pinned .v26-stage-card .v26-stage-cal{display:none}
/* @end stages */

/* @section results */
/* Trust screen. Pinned: the camera travels over the three seasons (TZ) — 3 steps — and ends on the
   queen: she glides in held above her glass drum, turns from her side through the 45° view to face the
   reader, and is set down on the drum (contact shadow, the light comes up — the «результат» state);
   then the camera pulls back and up from the container's left line, the field calms and the scene
   releases. The cases («Як змінювалися бізнеси») follow as their own block (#results-cases).
   Head: the H2 on the pinned title line, the years scale (the one position indicator, TZ) + arrows under
   it, the intro beside both on the shared split-head column line (7 : 5, same as Stories and People).
   Season panel (≥ 1024): one 2 × 2 grid — row 1: plaque + H3 | the first row of facts; row 2: the lead
   figure | the second row of facts. Every rule line is shared (fact rules on the plaque's top line and on
   the lead's rule), so there is no empty block beside the title; the panel's height and width follow its
   content (1 / 2 / 3 fact columns). Below 1024 px (and with enlarged text below 1280) the head sits above
   one band: lead + facts. With enlarged text from 1280, season 1 (two facts) reads in one row. On tall
   pinned screens (≥ 1600 × 1000) the figures grow from their tokens with the frame height, so the scene
   fills about three quarters of the frame.
   Transitions (JS): a season the camera leaves fades out as one group before the pan, so a figure is
   never shown without its title.
   The next season previews as a title card: plaque, title and lead (final value, never 0) on a glass
   that dissolves past the lead; the rest of the panel and its facts (figure, label and rule together)
   open with the camera as it arrives, and its figures count 0 → value once at least half in view.
   No outline numerals, no dot fields, base type tokens only. */
.v26-results{--cw:min(var(--v26-max), 100cqw - 2 * var(--v26-gutter));--tg:24px;
  --pw0:max(calc(var(--cw) * .45), 500px);--pw1:max(calc(var(--cw) * .6), 660px);--pw2:max(calc(var(--cw) * .74), 700px)}
.v26-results h3,.v26-results h4,.v26-results-cases h3,.v26-results-cases h4,html.v26.enlarged .v26-results h3,html.v26.enlarged .v26-results-cases h3{-webkit-hyphens:manual;hyphens:manual}
.v26-results .v26-nobr,.v26-results-cases .v26-nobr{white-space:nowrap}
/* head: H2 on the pinned title line (base --v26-pin-top) with the years bar under it; the intro beside both,
   starting on the split-head column line shared with Stories and People (E3-07) */
.v26-results-head{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);grid-template-areas:'title intro' 'bar intro';column-gap:clamp(32px, 5vw, 96px);align-items:start;margin-bottom:clamp(28px, 3.6vh, 60px)}
.v26-results-head .v26-h2{grid-area:title}
html.v26 .v26-results-head .v26-h2{max-width:25ch}
.v26-results-head .v26-body{grid-area:intro;max-width:64ch;justify-self:start}
.v26-results-viewport{position:relative;flex:none;display:flex;align-items:flex-start;container-type:inline-size}
/* what the scene draws per frame takes its value at once: the global reduced-motion rule (v17.css `*{transition-duration:.01ms}`)
   kept the pinned track offset for two frames over the fresh ribbon at the OS switch — S2 showed S3 (verify5 E3-02) */
.v26-results-track,.v26-results-head,.v26-results-viewport,.v26-season-panel,.v26-season-panel .v26-sp-head>*,.v26-stat,.v26-stat>*{transition:none!important}
.v26-results-track{list-style:none;margin:0;padding:0 max(var(--v26-gutter), calc((100% - var(--v26-max)) / 2));display:flex;align-items:flex-start;gap:var(--tg);will-change:transform}
/* ---------- season panel ---------- */
.v26-season-panel{
  --pt:clamp(26px, 4.2vh, 60px);--pb:clamp(28px, 4.6vh, 64px);--px:clamp(26px, 2.7vw, 56px);--rg:clamp(22px, 3.6vh, 48px);--fr:clamp(20px, 3vh, 44px);--rule:clamp(14px, 1.6vh, 24px);
  --lc:calc(var(--v26-h3) * 11.5);--cg:clamp(28px, 3.2vw, 60px);--fcg:clamp(18px, 2vw, 40px);
  container-type:inline-size;flex:none;width:var(--w);
  display:grid;align-content:start;row-gap:var(--rg);
  padding:var(--pt) var(--px) var(--pb);
  opacity:var(--o, 1)
}
.v26-season-panel[data-panel="0"]{--w:var(--pw0)}
.v26-season-panel[data-panel="1"]{--w:var(--pw1)}
.v26-season-panel[data-panel="2"]{--w:var(--pw2)}
.v26-sp-head{display:grid;gap:14px;justify-items:start;align-content:start;min-width:0}
/* the title wraps by the column, never by a ch cap, and balanced: «Цифрова / еволюція бізнесу», never a lone «бізнесу» (H-18) */
html.v26 .v26-results .v26-sp-head .v26-h3{max-width:100%;text-wrap:balance}
/* band (below 1024): the lead figure + the facts on one top rule */
.v26-sp-body{display:grid;grid-template-columns:max-content minmax(0, 1fr);column-gap:var(--cg);align-items:start}
.v26-sp-facts{--cols:2;display:grid;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:var(--fr) var(--fcg)}
.v26-season-panel[data-facts="6"] .v26-sp-facts{--cols:3}
.v26-season-panel[data-facts="6"] .v26-sp-facts>:first-child{grid-column:span 2}
/* a fact = figure + label under its rule; the rule fades with them (JS sets --to), so a hidden fact never
   leaves an empty ruled cell behind (E3-03) */
.v26-stat{position:relative;display:grid;gap:6px;align-content:start;padding-top:var(--rule)}
.v26-stat::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--v26-line);opacity:var(--to, 1)}
.v26-stat>*{opacity:var(--to, 1)}
.v26-stat b{font-size:var(--v26-num-l);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.v26-stat>span{font-size:var(--v26-body);line-height:1.4;color:var(--v26-muted)}
.v26-stat--lead{gap:10px;padding-right:4px}
.v26-stat--lead::before{background:rgb(170 206 255 / 34%)}
/* the lead figure never outgrows its panel (phones, enlarged text): capped by the panel's own width */
.v26-stat--lead b{font-size:min(var(--v26-num-xl), 22cqw);letter-spacing:-.05em}
.v26-stat--lead>span{font-size:var(--v26-lead);color:#d7e3f4}
/* ≥ 1024: the 2 × 2 season grid. Column 1 = max(title measure, lead figure); the facts take 1 / 2 / 3
   columns on the two shared rows (subgrid), so season 1's two facts stand beside the title and the lead. */
@media (min-width:1024px){
  .v26-season-panel{grid-template-columns:minmax(var(--lc), max-content) minmax(0, 1fr);grid-template-rows:auto auto;column-gap:var(--cg)}
  .v26-sp-head{grid-column:1;grid-row:1;contain:inline-size}
  .v26-sp-body{display:contents}
  .v26-stat--lead{grid-column:1;grid-row:2}
  .v26-sp-facts{grid-column:2;grid-row:1 / span 2;grid-template-rows:subgrid;row-gap:var(--rg);column-gap:var(--fcg)}
  .v26-season-panel[data-facts="3"] .v26-sp-facts{--cols:1}
}
/* enlarged text between 1024 and 1279: not enough width for the grid — head above the band */
@media (min-width:1024px) and (max-width:1279px){
  html.enlarged .v26-season-panel{grid-template-columns:minmax(0, 1fr);grid-template-rows:none}
  html.enlarged .v26-sp-head{grid-column:auto;grid-row:auto;contain:none}
  html.enlarged .v26-sp-body{display:grid}
  html.enlarged .v26-stat--lead{grid-column:auto;grid-row:auto}
  html.enlarged .v26-sp-facts{grid-column:auto;grid-row:auto;grid-template-rows:none;row-gap:var(--fr)}
  html.enlarged .v26-season-panel[data-facts="3"] .v26-sp-facts{--cols:2}
  html.enlarged .v26-season-panel[data-facts="6"] .v26-sp-facts{--cols:2}
}
/* tall screens (1920 × 1080 and up, 2560 × 1440), pinned: the camera comes closer (CR4-02). The figures grow
   from their own tokens with the frame height (lead up to × 1.3, facts up to × 1.4) and the spacing follows,
   so the panels fill about three quarters of the frame instead of leaving a dark band under them; titles,
   labels and plaques keep their tokens, and the panel is still exactly as tall as its content. */
@media (min-height:1000px) and (min-width:1600px){
  .v26-season-panel{--pt:clamp(40px, 4.4vh, 60px);--pb:clamp(42px, 4.8vh, 64px);--rg:clamp(30px, 3.6vh, 52px);--fr:clamp(28px, 3.2vh, 48px);--rule:clamp(18px, 1.8vh, 26px)}
  .v26-results-head{margin-bottom:clamp(40px, 4.2vh, 64px)}
  html.v26-pinned .v26-results:not(.is-flow){--pw0:calc(var(--cw) * .47);--pw1:calc(var(--cw) * .62);--pw2:calc(var(--cw) * .74)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-season-panel{--pt:clamp(48px, 6.2vh, 96px);--pb:clamp(52px, 6.8vh, 104px);--rg:clamp(36px, 5vh, 76px);--rule:clamp(20px, 2.3vh, 34px)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-stat--lead b{font-size:min(clamp(var(--v26-num-xl), 8.2vh, calc(var(--v26-num-xl) * 1.3)), 22cqw)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-sp-facts .v26-stat b{font-size:clamp(var(--v26-num-l), 5vh, calc(var(--v26-num-l) * 1.4))}  html.v26-pinned .v26-results:not(.is-flow) .v26-results-head{margin-bottom:clamp(40px, 6.4vh, 96px)}
}
/* ---------- the result: the queen is set down on a glass drum (pinned, wide static ribbon) ----------
   The drum is seen from the queen's own camera height: a shallow top face (the same flat ellipse as her
   base) with a lit front rim, the drum's side below it and a soft floor shadow. On the top face, under
   her base: the contact shadow (tight and dark when she stands, small and faint while she is held above
   it) and the light pool (the result state). JS sets --qh / --pw / --pe / --ps (geometry), --ql (lift, px),
   --qt (lean, deg), --land (0 held … 1 standing) and --touch (the moment she lands). */
.v26-results-crown{position:relative;flex:none;list-style:none;width:calc(var(--cw) - var(--pw2) - var(--tg));height:var(--crown-h, 380px);pointer-events:none}
.v26-crown-stage{position:absolute;inset:0}
/* backlight: rises with the result state, calms on release */
.v26-crown-aura{position:absolute;left:50%;bottom:calc(var(--ps, 50px) + var(--pe, 20px));width:calc(var(--qh, 380px) * .95);height:calc(var(--qh, 380px) * 1.02);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgb(150 196 255 / 26%), rgb(60 122 240 / 10%) 55%, transparent);mix-blend-mode:screen;opacity:calc(var(--res, 0) * var(--calm, 1))}
.v26-crown-plinth{position:absolute;left:50%;bottom:0;width:var(--pw, 240px);height:calc(var(--ps, 50px) + var(--pe, 20px));transform:translateX(-50%)}
/* floor shadow under the drum */
.v26-crown-plinth::after{content:'';position:absolute;left:-10%;right:-10%;bottom:calc(var(--pe, 20px) * -.9);height:calc(var(--pe, 20px) * 2.2);border-radius:50%;background:radial-gradient(closest-side, rgb(0 4 14 / 78%), transparent);z-index:-1}
.v26-crown-side{position:absolute;left:0;right:0;top:calc(var(--pe, 20px) / 2);bottom:0;overflow:hidden;
  border-radius:0 0 50% 50% / 0 0 calc(var(--pe, 20px) / 2) calc(var(--pe, 20px) / 2);
  background:
    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%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 -1.5px 0 rgb(170 208 255 / 55%), inset 0 2px 6px rgb(190 220 255 / 22%)}
/* the crystal's light passes down into the glass under her (result state) */
.v26-crown-side::before{content:'';position:absolute;left:14%;right:14%;top:0;height:100%;background:radial-gradient(52% 100% at 50% 0%, rgb(150 198 255 / 62%), rgb(80 140 250 / 18%) 60%, transparent);opacity:calc(.2 + .8 * var(--res, 0) * var(--calm, 1))}
/* a soft caustic where the drum meets the floor */
.v26-crown-side::after{content:'';position:absolute;left:20%;right:20%;bottom:0;height:40%;border-radius:50%;background:radial-gradient(closest-side, rgb(150 198 255 / 30%), transparent);opacity:calc(.3 + .7 * var(--res, 0) * var(--calm, 1))}
.v26-crown-top{position:absolute;left:0;right:0;top:0;height:var(--pe, 20px);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, under the base: the light pool (result state; it flares as she lands) and the contact shadow */
.v26-crown-top::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:min(1, calc(.15 + .85 * var(--res, 0) * var(--calm, 1) + .35 * var(--touch, 0)));transform:scale(calc(1 + .12 * var(--touch, 0)))}
.v26-crown-top::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);
  opacity:calc(.32 + .68 * var(--land, 1));transform:scale(calc(.62 + .38 * var(--land, 1)))}
.v26-crown-queen{position:absolute;left:50%;bottom:calc(var(--ps, 50px) + var(--pe, 20px) / 2 - var(--qh, 380px) * .019);width:calc(var(--qh, 380px) * .5415);height:var(--qh, 380px);
  transform:translateX(-50%) translateY(calc(-1px * var(--ql, 0))) rotate(var(--qt, 0deg));transform-origin:50% 96%}
.v26-crown-queen canvas{display:block;width:100%;height:100%}
/* ---------- years scale + arrows (under the H2) ---------- */
.v26-results-scale{grid-area:bar;display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px, 3vw, 48px);margin-top:clamp(16px, 2.4vh, 36px)}
.v26-scale{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));flex:0 1 420px}
.v26-scale::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:rgb(150 196 255 / 18%)}
.v26-scale::after{content:'';position:absolute;left:0;top:0;height:2px;width:calc(var(--sp, 0) * 100%);background:#a9cdff;box-shadow:0 0 10px rgb(127 178 255 / 80%)}
.v26-scale button{display:flex;align-items:baseline;min-height:44px;padding:14px 0 0;border:0;background:none;color:var(--v26-faint);font:inherit;font-size:var(--v26-caption);cursor:pointer;text-align:left;white-space:nowrap}
@media (max-width:420px){.v26-scale{grid-template-columns:auto auto auto;justify-content:space-between;column-gap:10px}}
/* every year is at least a 44 px target («2023», «2024» were 33 px wide on phones, verify5 G-09); the label keeps its place
   on the scale: left in its column, and the middle year centred on the phone scale */
#results [data-goto]{min-width:44px}
@media (max-width:420px){#results .v26-scale [data-goto="1"]{justify-content:center}}
.v26-scale button:hover{color:#dbe8fa}
.v26-scale button.is-active{color:#fff}
html.v26-pinned .v26-results-viewport{cursor:grab}
html.v26-pinned .v26-results-viewport.is-dragging{cursor:grabbing}
html.v26-pinned .v26-results-viewport.is-dragging *{user-select:none}
/* pinned frame edges: the track fades out softly at the frame's edges, as the Stories rail does (E3-04).
   Below 1808 the frame is the screen (fade = the gutter, so a panel at rest is never dimmed); from 1808
   (container + 2 × 64) the frame is the container plus a 64 px fade band on each side. */
html.v26-pinned .v26-results:not(.is-flow) .v26-results-viewport{--fe:var(--v26-gutter);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 var(--fe), #000 calc(100% - var(--fe)), transparent 100%);mask:linear-gradient(90deg, transparent 0, #000 var(--fe), #000 calc(100% - var(--fe)), transparent 100%)}
@media (min-width:1808px){
  html.v26-pinned .v26-results:not(.is-flow) .v26-results-viewport{--fe:64px;width:min(var(--v26-max) + 128px, 100%);margin-inline:auto}
  html.v26-pinned .v26-results:not(.is-flow){--cw:calc(100cqw - 128px)}
  html.v26-pinned .v26-results:not(.is-flow) .v26-results-track{padding:0 64px}
}
/* the next season's preview: its glass dissolves past the lead (JS sets --rv, the reveal edge, from the
   panel's left); as the camera arrives the edge sweeps open and the facts appear with it. A passed season's
   glass dissolves into the frame's left edge the same way (--lv) as the camera leaves it. */
html.v26-pinned .v26-results:not(.is-flow) .v26-season-panel{--m:linear-gradient(90deg, transparent var(--lv, -400px), #000 calc(var(--lv, -400px) + 180px), #000 var(--rv, 100%), transparent calc(var(--rv, 100%) + 130px));-webkit-mask:var(--m);mask:var(--m)}
/* low laptops (1366×650, 1280×720): spacing tightens, the fact figures step down one token; labels stay
   on the body size (≥ 15 px, MISSED-H-02); the years bar keeps ≥ 26 px from the panels (E-R13) */
@media (max-height:820px){
  .v26-results-head{margin-bottom:28px}
  .v26-results-head .v26-body{line-height:1.55}
  .v26-results-scale{margin-top:10px}
  .v26-season-panel{--pt:20px;--pb:22px;--px:28px;--rg:16px;--fr:12px;--rule:10px}
  .v26-sp-head{gap:10px}
  .v26-stat{gap:4px}
  .v26-sp-facts .v26-stat b{font-size:var(--v26-num-m)}
  .v26-stat--lead{gap:6px}
}
@media (max-height:820px) and (pointer:fine){.v26-scale button{padding-top:10px;min-height:34px}}
@media (max-width:1200px){.v26-scale{flex-basis:340px}.v26-results-scale{gap:24px}}
@media (max-height:700px){
  .v26-results-head{margin-bottom:26px}
  .v26-season-panel{--pt:18px;--pb:18px;--px:26px;--rg:12px}
}
/* ---------- static flow (phone, tablet, reduced motion, enlarged text, fit guard) ----------
   The three seasons are a native swipe ribbon, each panel at its own height on one top line.
   The text of a panel that the ribbon edge cuts fades out (JS); the cut glass fades softly over its
   visible strip only. */
html:not(.v26-pinned) .v26-results-viewport,.v26-results.is-flow .v26-results-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--v26-gutter), calc((100% - var(--v26-max)) / 2));-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  -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%)}
html:not(.v26-pinned) .v26-results-viewport::-webkit-scrollbar,.v26-results.is-flow .v26-results-viewport::-webkit-scrollbar{display:none}
html:not(.v26-pinned) .v26-results-track,.v26-results.is-flow .v26-results-track{transform:none!important}
/* the ribbon takes the height of the season in view (JS); the cases follow closely as the section's last panel */
html:not(.v26-pinned) .v26-results-viewport,.v26-results.is-flow .v26-results-viewport{overflow-y:hidden;align-items:flex-start}
html:not(.v26-pinned) .v26-results,html.v26-pinned .v26-results.is-flow{padding-bottom:clamp(20px, 2.4vw, 32px)}
html:not(.v26-pinned) .v26-results-cases{padding-top:0}
html:not(.v26-pinned) .v26-season-panel,.v26-results.is-flow .v26-season-panel{scroll-snap-align:start;opacity:1}
/* a taller neighbour peeking into the ribbon fades out above the ribbon's bottom instead of a flat cut (JS sets --cut) */
html:not(.v26-pinned) .v26-season-panel[style*="--cut"],.v26-results.is-flow .v26-season-panel[style*="--cut"]{-webkit-mask:linear-gradient(180deg, #000 calc(100% - var(--cut) - 56px), transparent calc(100% - var(--cut)));mask:linear-gradient(180deg, #000 calc(100% - var(--cut) - 56px), transparent calc(100% - var(--cut)))}
/* tablets, phones and enlarged text: no room for the drum — the ribbon ends on the last season */
@media (max-width:1023px){html:not(.v26-pinned) .v26-results-crown,.v26-results.is-flow .v26-results-crown{display:none}}
html.enlarged .v26-results-crown{display:none}
html:not(.v26-pinned) .v26-scale::after,.v26-results.is-flow .v26-scale::after{display:none}
.v26-results-viewport:focus-visible{outline:2px solid #b9daff;outline-offset:-2px}
/* fit guard: pinned page, but Results did not fit the viewport — it reads as a normal section */
html.v26-pinned .v26-results.is-flow{height:auto;padding-top:var(--v26-section-pad)}
html.v26-pinned #results.is-flow .v26-pin{position:relative;top:auto;height:auto;overflow:visible;display:block;padding:0}
/* enlarged text, wide screens: every season takes the row minus a 96 px hint of the next one (no half-empty peek) */
@media (min-width:1024px){
  html.enlarged .v26-season-panel[data-panel]{--w:calc(var(--cw) - 96px - var(--tg))}
  html.enlarged .v26-results-track{padding-right:calc(max(var(--v26-gutter), (100% - var(--v26-max)) / 2) + 96px + var(--tg))}
}
/* enlarged text from 1280: season 1 has only two facts, so its whole season reads in ONE row on one top line —
   plaque + title | ~5 000 учасниць | 6 переможниць | 1,3 млн грн — no empty glass beside short labels (CR4-03) */
@media (min-width:1280px){
  html.enlarged .v26-season-panel[data-facts="3"]{grid-template-columns:minmax(0, 1fr) repeat(3, max-content);grid-template-rows:auto;column-gap:clamp(24px, 2.2vw, 48px)}
  html.enlarged .v26-season-panel[data-facts="3"] .v26-sp-head{grid-column:1;grid-row:1}
  html.enlarged .v26-season-panel[data-facts="3"] .v26-stat--lead{grid-column:2;grid-row:1}
  html.enlarged .v26-season-panel[data-facts="3"] .v26-stat--lead b{font-size:min(var(--v26-num-xl), 8.6cqw)}
  html.enlarged .v26-season-panel[data-facts="3"] .v26-sp-facts{display:contents}
}
/* tablets and phones: one season per view, the next one peeks (all three the same width) */
@media (max-width:1023px){
  html:not(.v26-pinned) .v26-season-panel{--w:calc(100cqw - 2 * var(--v26-gutter) - clamp(28px, 7vw, 72px))}
  /* two fact columns everywhere; season 3 opens with its longest fact across both */
  html:not(.v26-pinned) .v26-season-panel[data-facts="6"] .v26-sp-facts{--cols:2}
}
@media (max-width:1000px){
  .v26-results-head{grid-template-columns:minmax(0, 1fr);grid-template-areas:'title' 'intro' 'bar';row-gap:16px}
  .v26-results-scale{margin-top:4px}
}
@media (max-width:700px){
  html:not(.v26-pinned) .v26-results-track{gap:12px}
  .v26-season-panel{--pt:24px;--pb:24px;--px:22px}
  .v26-sp-body{grid-template-columns:minmax(0, 1fr);row-gap:18px}
  .v26-sp-facts .v26-stat b{font-size:var(--v26-num-m)}
  /* phones: years and arrows on one row above the ribbon (they never move under a finger) */
  .v26-results-scale{gap:12px;margin-top:0}
  .v26-scale{flex:1 1 auto}
  html.enlarged .v26-results-scale{flex-wrap:wrap}
  html.enlarged .v26-scale{flex-basis:100%}
  html.enlarged .v26-results-scale .v26-stepper{margin-left:auto}
}
html.enlarged .v26-results-head{grid-template-columns:minmax(0, 1fr);grid-template-areas:'title' 'intro' 'bar';row-gap:16px}
@media (max-width:1023px){html.enlarged .v26-sp-body{grid-template-columns:minmax(0, 1fr);row-gap:18px}}
/* enlarged text: titles never hyphenate mid-word — the size is capped by the panel so the longest word fits */
html.v26.enlarged .v26-results .v26-sp-head .v26-h3{font-size:min(var(--v26-h3), 10cqw)}
/* the narrowest phones: season 1's two facts stack («переможниць» is one long word at the body size) */
@media (max-width:380px){.v26-season-panel[data-facts="3"] .v26-sp-facts{--cols:1}}
/* enlarged text on phones: one fact per row (a long label at 125–150 % never runs into its neighbour) */
@media (max-width:560px){html.enlarged .v26-season-panel[data-facts] .v26-sp-facts{--cols:1}html.enlarged .v26-season-panel[data-facts] .v26-sp-facts>:nth-child(n){grid-column:auto}}

/* ---------- cases: «Як змінювалися бізнеси» (own block after the pinned travel) ----------
   One header row (plaque + H3). Below it two columns on one top and one bottom line: the quote card
   (quote above, author under a rule — one group) and the four cases as an even 2 × 2 grid (equal row
   heights, aligned bottoms); the source note hangs directly under the cases. In pinned mode the block
   rises into the free band under the released scene (JS sets --pull), so it reads as the scene's last panel.
   Every grid track is minmax(0, …): a long word at enlarged sizes wraps inside its card, it never widens the page (NEW-G2). */
.v26-results-cases{padding-top:clamp(28px, 3vw, 48px)}
html.v26-pinned .v26-results-cases{margin-top:calc(-1 * var(--pull, 0px));padding-top:0}
.v26-cases-panel{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);grid-template-areas:'head head' 'quote list' '. note';column-gap:clamp(14px, 1.4vw, 22px);row-gap:12px;padding:clamp(24px, 2.6vw, 44px);min-width:0}
.v26-cases-panel>*{min-width:0}
.v26-cases-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:clamp(8px, 1.2vw, 16px)}
html.v26 .v26-results-cases #cases-title{text-wrap:balance}
.v26-cases-quote{grid-area:quote;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(22px, 2.2vw, 34px);border-radius:var(--v26-r-md);background:rgb(4 16 38 / 48%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 16%), inset 0 1px 0 rgb(220 236 255 / 10%)}
.v26-cases-quote blockquote{margin:0}
html.v26 .v26-cases-quote blockquote p{font-size:var(--v26-h3);line-height:1.42;letter-spacing:-.01em;color:#f2f6fd}
.v26-cases-quote figcaption{display:grid;gap:2px;padding-top:16px;border-top:1px solid var(--v26-line);font-size:var(--v26-body);line-height:1.45}
.v26-cases-quote figcaption b{color:#fff}
.v26-cases-quote figcaption span{font-size:var(--v26-caption);color:var(--v26-faint)}
.v26-cases-list{grid-area:list;position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;gap:12px}
.v26-case{position:relative;display:grid;grid-template-columns:minmax(0, 1fr);gap:8px;align-content:start;min-width:0;padding:18px 22px 20px;border-radius:var(--v26-r-md);background:rgb(4 16 38 / 48%);box-shadow:inset 0 0 0 1px rgb(166 198 238 / 16%), inset 0 1px 0 rgb(220 236 255 / 10%)}
.v26-case h4{margin:0;font-size:var(--v26-h4);line-height:1.35;font-weight:400;color:#fff}
.v26-case h4 span{margin-left:6px;font-size:var(--v26-caption);color:var(--v26-faint)}
/* case copy is running text: the body token, never a caption */
html.v26 .v26-case p{font-size:var(--v26-body);line-height:1.55;color:#cad8ec}
.v26-case-more{justify-self:start;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--v26-caption);color:#cfe2ff;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(190 214 248 / 45%)}
.v26-case-more[hidden]{display:none}
.v26-cases-note{grid-area:note;max-width:100%}
html.contrast .v26-cases-quote{background:#04152f!important}
/* narrower laptops: the cards wrap more, so the quote column gives them width (quote and grid stay about equally tall) */
@media (max-width:1400px){.v26-cases-panel{grid-template-columns:minmax(0, 4.25fr) minmax(0, 7.75fr)}}
/* enlarged text (every width): the quote takes the full row above the cases (no towering quote column) */
html.enlarged .v26-cases-panel{grid-template-columns:minmax(0, 1fr);grid-template-areas:'head' 'quote' 'list' 'note';row-gap:14px}
html.enlarged .v26-cases-list{grid-auto-rows:auto}
@media (min-width:1700px){html.v26.enlarged .v26-cases-quote blockquote p{max-width:52ch}}
@media (max-width:1000px){
  .v26-cases-panel{grid-template-columns:minmax(0, 1fr);grid-template-areas:'head' 'quote' 'list' 'note';row-gap:14px}
  .v26-cases-list{grid-auto-rows:auto}
  .v26-cases-quote{gap:20px}
}
@media (max-width:700px){
  /* phones: the cases are a swipe ribbon of cards; long texts open with a tap (TZ 357) */
  .v26-cases-panel{padding:24px 0 22px}
  .v26-cases-head,.v26-cases-note{padding-inline:22px}
  .v26-cases-quote{margin-inline:12px;padding:20px 18px}
  .v26-cases-list{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;grid-auto-rows:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;padding:4px 12px 6px;scrollbar-width:none;overscroll-behavior-x:contain;align-items:start;
    -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-cases-list::-webkit-scrollbar{display:none}
  .v26-cases-list:focus-visible{outline:2px solid #b9daff;outline-offset:-2px;border-radius:var(--v26-r-md)}
  .v26-case{scroll-snap-align:start;padding:16px 18px 12px}
  /* a card that the ribbon edge cuts keeps its glass, its text fades out (JS sets --tv) */
  .v26-case>*{opacity:var(--tv, 1)}
  .v26-case p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .v26-case.is-open p{display:block;-webkit-line-clamp:unset;overflow:visible}
}
/* enlarged text on the narrowest phones: the quote never outgrows the screen (NEW-G2) */
@media (max-width:420px){
  html.v26.enlarged .v26-cases-quote blockquote p{font-size:min(var(--v26-h3), 6.8vw);-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
  html.enlarged .v26-case p,html.enlarged .v26-case h4{overflow-wrap:break-word}
}
/* enlarged text on phones: a long compound may break at its own hyphen rather than overrun the card */
@media (max-width:560px){html.enlarged .v26-results-cases .v26-nobr{white-space:normal}}
/* @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)}
/* split head on the column line shared with Results and People (7 : 5, E3-07) */
.v26-stories .v26-head--split{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
.v26-stories .v26-head--split>.v26-body{justify-self:start;max-width:64ch}
@media (max-width:1000px){.v26-stories .v26-head--split{grid-template-columns:minmax(0, 1fr)}}
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}
}
/* @end stories */

/* @section people */
/* Speakers, mentors, experts — variant A (approved by the user 2026-10-16 for 20–30 people per tab): 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). */
.v26-people-head{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);align-items:end;margin-bottom:clamp(24px, 2.4vw, 36px)}
.v26-people-tabs{width:100%;margin-bottom:clamp(28px, 3vw, 44px)}
.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 every tab switch / «Показати всіх» (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-tabs{min-width:0;max-width:100%}
  .v26-people-tabs .v26-tab{min-width:0;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;padding:8px 14px}
  .v26-people-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (max-width:820px){.v26-people-tabs .v26-tab{padding:8px 10px}}
@media (max-width:760px){.v26-people-tabs .v26-tab{font-size:calc(13px * var(--scale, 1))}}
@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}}
@media (max-width:560px){
  /* three equal rows: every label on one line, nothing hidden off-screen */
  .v26-people-tabs{grid-template-columns:1fr;grid-auto-rows:minmax(44px, 1fr);border-radius:26px}
  .v26-people-tabs::before{bottom:auto;width:calc(100% - 10px);height:calc((100% - 10px) / 3);border-radius:21px;transform:translateY(calc(var(--i) * 100%))}
  .v26-people-tabs .v26-tab{white-space:normal;padding:10px 16px;font-size:calc(14px * var(--scale, 1))}}
/* 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))}
@media (max-width:760px){html.enlarged .v26-people-tabs{grid-template-columns:1fr;grid-auto-rows:minmax(44px, 1fr);border-radius:26px}
  html.enlarged .v26-people-tabs::before{bottom:auto;width:calc(100% - 10px);height:calc((100% - 10px) / 3);border-radius:21px;transform:translateY(calc(var(--i) * 100%))}}
html.contrast .v26-pcard-ph{box-shadow:inset 0 0 0 1px rgb(214 232 255 / 80%)}
/* @end people */

/* @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. */
/* 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 pawn can stand: pawn's left edge = band right − .936 × art height (image x 1610 of 2688 × 1152).
   The photograph is attached only once the band is within a viewport (JS .is-near, verify5 NEW5-G10). */
.v26-mentor-band{--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:url('assets/v26/mentor/mentor-queen-2688.webp')!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) - .936 * 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) * .79), rgb(4 20 58 / 28%) calc(var(--mh) * .85), rgb(4 20 58 / 78%) calc(var(--mh) * .92), #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) * .79), rgb(4 20 58 / 28%) calc(var(--mh) * .85), rgb(4 20 58 / 78%) calc(var(--mh) * .92), #04143a calc(var(--mh) - 6px))!important}
  html.enlarged .v26-mentor-text{max-width:none!important}
}
/* @end mentor */

/* @section faq */
/* Quiet V4 field (facets) under the title column; the reading column stays on calm ink. */
.v26-faq-field{--v26-o:.34;--v26-pos:20% 40%}
.v26-faq-field::after{background:linear-gradient(90deg, rgb(2 11 25 / 30%) 0%, rgb(2 11 25 / 70%) 34%, rgb(2 11 25 / 94%) 52%, var(--v26-ink) 100%)}
.v26-faq-layout{display:grid;grid-template-columns:minmax(0, 4.4fr) minmax(0, 7.6fr);gap:clamp(32px, 4.5vw, 96px);align-items:start}
.v26-faq-intro{display:grid;gap:18px;position:sticky;top:120px}
.v26-faq-source{max-width:46ch}
.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-layout{grid-template-columns:1fr}.v26-faq-intro{position:static}.v26-faq-field{display:none}}
@media (max-width:600px){.v26-accordion summary{padding:14px 10px;gap:16px}.v26-answer{padding:8px 10px 22px}}
html.enlarged .v26-faq-intro{position:static}
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 */
/* One grid for both rows: identity | menu | actions, and below it legal | note | «На початок» on the same
   column lines (subgrid), so every bottom item sits under its top counterpart. */
.v26-footer{position:relative;padding:clamp(56px, 5.6vw, 96px) 0 32px;color:var(--v26-text);border-top:1px solid var(--v26-line);background:linear-gradient(180deg, rgb(5 25 58 / 40%), var(--v26-ink))}
/* the columns continue the FAQ/contacts grid: identity and legal in the FAQ title column (4.4 / 12 of the
   container minus the gap), menu and note start on the accordion/contacts axis, actions end on the container edge */
.v26-footer>.v26-wrap{--v26-fgap:clamp(32px, 4.5vw, 96px);display:grid;grid-template-columns:calc((100% - var(--v26-fgap)) * 11 / 30) minmax(0, 1fr) max-content;column-gap:var(--v26-fgap)}
.v26-footer-top,.v26-footer-bottom{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start}
.v26-footer-id{display:grid;gap:18px;align-content:start;justify-items:start}
.v26-footer-brand{display:block;border-radius:10px}
.v26-footer-brand img{width:190px;height:auto;display:block}
.v26-footer-id p{margin:0;max-width:34ch;font-size:var(--v26-body);line-height:1.6;color:var(--v26-muted)}
.v26-footer-nav{display:grid;grid-template-columns:repeat(2, max-content);column-gap:clamp(32px, 3.2vw, 56px);row-gap:2px;align-content:start;margin-top:-8px}
.v26-footer-nav a{display:flex;align-items:center;min-height:40px;color:#dbe6f6;text-decoration:none;font-size:var(--v26-body);line-height:1.3;white-space:nowrap}
.v26-footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.v26-footer-actions{display:grid;gap:12px;align-content:start}
.v26-footer-actions .v26-btn{width:100%}
.v26-footer-bottom{align-items:center;row-gap:14px;margin-top:clamp(44px, 4.4vw, 64px);padding-top:20px;border-top:1px solid var(--v26-line)}
.v26-footer-legal{display:flex;flex-wrap:wrap;gap:4px 28px}
.v26-footer-legal button{min-height:40px;padding:4px 0;border:0;background:none;color:#cbd9ee;font:inherit;font-size:var(--v26-caption);line-height:1.4;text-align:left;cursor:pointer}
.v26-footer-legal button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
html.v26 .v26-footer-note{margin:0;max-width:34ch;font-size:var(--v26-caption);line-height:1.5;color:var(--v26-faint)}
.v26-footer-top-link{justify-self:end;min-height:40px;font-size:var(--v26-caption);white-space:nowrap}
/* ≤ 1100 (and enlarged text ≤ 1440): identity on its own row, menu | actions below; bottom = legal + «На початок» / note */
@media (max-width:1100px){
  .v26-footer>.v26-wrap{grid-template-columns:minmax(0, 1fr) max-content}
  .v26-footer-top{row-gap:36px}
  .v26-footer-id{grid-column:1 / -1}
  .v26-footer-bottom{grid-template-columns:minmax(0, 1fr) max-content;grid-template-areas:"legal top" "note note"}
  .v26-footer-legal{grid-area:legal}.v26-footer-note{grid-area:note}.v26-footer-top-link{grid-area:top}
  html.v26 .v26-footer-note{max-width:none}
}
@media (max-width:1440px){
  html.enlarged .v26-footer>.v26-wrap{grid-template-columns:minmax(0, 1fr) max-content}
  html.enlarged .v26-footer-top{row-gap:36px}
  html.enlarged .v26-footer-id{grid-column:1 / -1}
  html.enlarged .v26-footer-bottom{grid-template-columns:minmax(0, 1fr) max-content;grid-template-areas:"legal top" "note note"}
  html.enlarged .v26-footer-legal{grid-area:legal}html.enlarged .v26-footer-note{grid-area:note}html.enlarged .v26-footer-top-link{grid-area:top}
  html.v26.enlarged .v26-footer-note{max-width:none}
}
/* ≤ 600: one column; the to-top link pairs with the note row, never orphaned */
@media (max-width:600px){
  .v26-footer>.v26-wrap{grid-template-columns:minmax(0, 1fr) max-content;column-gap:20px}
  .v26-footer-top{row-gap:32px}
  .v26-footer-nav,.v26-footer-actions{grid-column:1 / -1}
  .v26-footer-bottom{grid-template-areas:"legal legal" "note top";align-items:end}
  .v26-footer-nav a,.v26-footer-legal button,.v26-footer-top-link{min-height:44px}
}
@media (max-width:374px){.v26-footer-nav{grid-template-columns:1fr}}
@media (max-width:1100px){html.enlarged .v26-footer-nav,html.enlarged .v26-footer-actions{grid-column:1 / -1}html.enlarged .v26-footer-nav{grid-template-columns:1fr}html.enlarged .v26-footer-bottom{grid-template-areas:"legal legal" "note note" "top top"}html.enlarged .v26-footer-top-link{justify-self:start}}
html.contrast .v26-footer{border-color:rgb(150 178 220)}
html.contrast .v26-footer-bottom{border-color:rgb(150 178 220)}
html.contrast .v26-footer p,html.contrast .v26-footer-nav a,html.contrast .v26-footer-legal button,html.contrast .v26-footer .v26-note,html.contrast .v26-footer .v26-text-link{color:#fff}
html.contrast .v26-footer .v26-btn--secondary{box-shadow:inset 0 0 0 1px #dfeaff}
/* touch tablets and phones: every footer control is a 44 px target (verify3 G-09) */
@media (pointer:coarse){
  .v26-footer-nav a,.v26-footer-legal button,.v26-footer-top-link,.v26-footer .v26-text-link{min-height:44px;display:inline-flex;align-items:center}
}
/* the footer brand plaque uses the radius token (verify3 H-15) */
.v26-footer-brand{border-radius:var(--v26-r-sm)}
/* Approved 2026-10-15 (variant B): a centred footer — the logo, the line, the menu in one row, both actions,
   the organisers' and partners' logos, then the documents. */
.v26-footer{text-align:center;padding-top:clamp(64px, 6vw, 104px);background:radial-gradient(60% 80% at 50% 0%, rgb(42 107 224 / 22%), transparent 70%), var(--v26-ink)}
.v26-footer>.v26-wrap{display:block}
.v26-footer-top{display:grid;justify-items:center;gap:28px}
.v26-footer-id{justify-items:center}
.v26-footer-brand img{width:clamp(220px, 18vw, 300px)}
.v26-footer-id p{text-align:center;max-width:none}
.v26-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px;margin:0}
.v26-footer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.v26-footer-actions .v26-btn{width:auto}
.v26-footer-partners{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px clamp(28px, 3vw, 48px);margin:clamp(40px, 4vw, 56px) 0 0;padding:clamp(28px, 3vw, 40px) 0 0;border-top:1px solid rgb(166 198 238 / 16%)}
.v26-footer-partners img{display:block;height:clamp(24px, 1.9vw, 30px);width:auto;opacity:.78;transition:opacity 200ms var(--v26-ease)}
.v26-footer-partners li:hover img{opacity:1}
/* bottom row: legal | domain | «На початок» on a 1fr · auto · 1fr grid, so the domain stands on the page axis
   (a space-between row put it 182 px off the axis, verify5 U5-N8) */
.v26-footer-bottom{display:grid;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);grid-template-areas:"legal note top";align-items:center;gap:12px 28px;text-align:left}
.v26-footer-legal{grid-area:legal;justify-self:start}
html.v26 .v26-footer-note{grid-area:note;justify-self:center;text-align:center;max-width:none}
.v26-footer-top-link{grid-area:top;justify-self:end}
/* every menu link is at least a 44 px target, «FAQ» included (verify5 G-09) */
.v26-footer-nav a{min-width:44px;justify-content:center}
/* tablets (and enlarged text up to 1440): everything on the axis — the bottom row stacks and centres, the menu is a
   3 × 2 grid and the logos 3 + 3, so no lone «FAQ», «ПриватБанк» or «На початок» on a row (verify5 E5-06) */
@media (max-width:1100px){
  .v26-footer-bottom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
  .v26-footer-legal{justify-content:center}
  .v26-footer-legal button{text-align:center}
}
@media (max-width:1440px){
  html.enlarged .v26-footer-bottom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
  html.enlarged .v26-footer-legal{justify-content:center}
  html.enlarged .v26-footer-legal button{text-align:center}
}
@media (min-width:701px) and (max-width:1100px){
  html.v26 .v26-footer-nav{display:grid;grid-template-columns:repeat(3, minmax(max-content, 1fr));width:min(100%, 680px);gap:4px 32px}   /* even columns, never narrower than a label */
  .v26-footer-partners{display:grid;grid-template-columns:repeat(3, max-content);justify-content:center;justify-items:center;gap:22px 48px}
}
/* phones: both actions centred on the axis at one width (a wrapping column flex sized them to their text at the
   left edge), the documents stacked and centred, the logos 2 + 2 + 2 (verify5 E5-06 / U5-N8) */
@media (max-width:700px){
  .v26-footer-nav{display:grid;grid-template-columns:repeat(2, max-content);justify-content:center;column-gap:28px}
  .v26-footer-actions{flex-direction:column;flex-wrap:nowrap;align-items:center;width:100%}
  .v26-footer-actions .v26-btn{width:min(100%, 320px)}
  .v26-footer-partners{display:grid;grid-template-columns:repeat(2, max-content);justify-content:center;justify-items:center;gap:18px 28px}
  .v26-footer-legal{flex-direction:column;align-items:center;gap:0}
}
/* @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}}
/* @end chrome */