/* Stadika UI: built by php artisan ui:build from v3.partials.base-css, v3.partials.components-css, v3.partials.ui-css. Do not edit, edit the partials. */
@font-face { font-family: "Literata"; src: url("/fonts/v2/literata-cyr.woff2") format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; src: url("/fonts/v2/literata-ext.woff2") format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Literata"; src: url("/fonts/v2/literata-lat.woff2") format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("/fonts/v2/onest-cyr.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("/fonts/v2/onest-ext.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Onest"; src: url("/fonts/v2/onest-lat.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #fff;
  --paper: #f4f1ea;
  --soft: #f6f7f9;
  --ink: #12141a;
  --text: #2b2e36;
  --muted: #646a78;
  --line: #e4e2dc;
  --accent: #2434c9;
  --accent-dark: #1a2799;
  --accent-soft: #eceefc;
  --lime: #d4f53c;
  --brand: #2434c9; /* logo and header CTA, does not change with the section accent */
  --brand-dark: #1a2799; /* hover of the header CTA */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px;
  --star: #e2a610; /* rating stars: gold in every hub (Vlad 17.10: «звёзды должны быть золотые, а не чёрные»), not the hub accent */
  /* #60 stage 1, tokens v2 (Stadika UI, DESIGN-SYSTEM-2026-11-07 3.1): additions only, every v1 name above stays */
  /* states: one red, one green, one amber for the whole site (errors of fields, success toasts, «горит» deadlines) */
  --err: #c62828; --err-soft: #fdecec;
  --ok: #1e7f4f; --ok-soft: #e6f4ec;
  --warn: #b26a00; --warn-soft: #fdf3e1;
  /* type scale (Onest text, Literata headings) */
  --fs-xs: 13px; --fs-s: 14px; --fs-m: 16px; --fs-l: 18px; --fs-xl: 22px; --fs-h3: 26px;
  --fs-h2: clamp(32px, 3.6vw, 48px); --fs-h1: clamp(38px, 5vw, 64px);
  /* radii: three values (fields and small cards, cards, big blocks) + the pill of buttons */
  --r-s: 10px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  /* shadows: rest, hover lift, overlay (modal, toast) */
  --sh-1: 0 1px 2px rgba(18, 20, 26, .06), 0 2px 8px -4px rgba(18, 20, 26, .08);
  --sh-2: 0 12px 28px -16px rgba(20, 20, 40, .38);
  --sh-3: 0 24px 60px -20px rgba(10, 10, 30, .45);
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 104px;
  /* fields: one height for input, select and the field button */
  --field-h: 50px;
  /* motion: one curve, three durations, the hover lift of cards and buttons (3 px, 200 ms) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .15s; --dur-2: .2s; --dur-3: .35s;
  --lift: -3px;
  /* breakpoints (CSS variables do not work inside @media, these are for JS and the docs): 480, 768, 1180, 1360 */
  --bp-s: 480px; --bp-m: 768px; --bp-l: 1180px; --bp-xl: 1360px;
  /* layers: sticky CTA < header < cookie < modal < toast */
  --z-sticky: 40; --z-header: 50; --z-cookie: 60; --z-modal: 900; --z-toast: 1000;
}
/* three directions, one system (Vlad 16.10): only the accent changes. body data-dir="abroad|russia|ai|edtech|neutral" */
body[data-dir="russia"], [data-hub="russia"] { --accent: #0a7c70; --accent-dark: #07564f; --accent-soft: #e3eeea; --lime: #edc96b; }
body[data-dir="ai"], [data-hub="ai"] { --accent: #5b3fd6; --accent-dark: #4229b0; --accent-soft: #eeeafc; --lime: #d4f53c; }
/* a block of another hub inside a page (cross-links, entity cards with hub=...): data-hub="abroad|russia|ai" on the block */
[data-hub="abroad"] { --accent: #2434c9; --accent-dark: #1a2799; --accent-soft: #eceefc; --lime: #d4f53c; }
/* #60 stage 0 (Vlad 07.11): EdTech is a section theme like the hubs, bordeaux from here, not from its header */
body[data-dir="edtech"], [data-hub="edtech"] { --accent: #9e1f3a; --accent-dark: #7f1830; --accent-soft: #f6e8eb; }
/* rating stars (v3.partials.stars): gold filled, light empty, the number stays in the text colour */
.stars { display: inline-flex; gap: 1px; color: var(--star); letter-spacing: 0; white-space: nowrap; line-height: 1; vertical-align: -1px; }
.stars .off { color: #dcd7cb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* B7 (decisions p.3): every v3 map is Leaflet over Yandex tiles, the Leaflet credit has no flag icon */
.leaflet-attribution-flag { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
/* #60 stage 0: form controls take the page font (Onest), not the Arial of the browser; size and weight stay with the component classes */
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
/* #60 stage 0: one colour of a link in running text on every page: the section accent, darker on hover (fine print and legal lines too) */
p a:not([class]), .lead a:not([class]), .fine a:not([class]) { color: var(--accent); }
p a:not([class]):hover, .lead a:not([class]):hover, .fine a:not([class]):hover { color: var(--accent-dark); }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 104px 0 0; }
.band { background: var(--paper); margin-top: 104px; padding: 88px 0; }
.band + .section { padding-top: 104px; }
.label { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--accent); margin-bottom: 14px; }
.h2 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 300; }
.lead { color: var(--muted); font-size: 18px; margin-top: 16px; max-width: 640px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.see-all { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.see-all:hover { color: var(--accent); }
/* w20 fix: long «see all» labels (e.g. «Все стажировки: Гостиничный бизнес и Туризм») wrap on phones instead of widening the page */
@media (max-width: 640px) { .see-all { white-space: normal; max-width: 100%; overflow-wrap: break-word; } }
/* 24.10 (Sasha): a long label that wraps on a phone («Выиграть стипендию с наставником») stays centred with tight leading, not a tall pill with small left-aligned text */
@media (max-width: 640px) { .btn { line-height: 1.3; } }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }
.btn--white { background: #fff; color: var(--ink); border-color: #c9ccd4; }
.btn--white:hover { border-color: var(--ink); color: var(--ink); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #c4e62a; color: var(--ink); }
.more { font-weight: 600; }
.more::after { content: " →"; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.art { border-radius: var(--r); overflow: hidden; background: var(--paper); }
.art img { width: 100%; height: 100%; object-fit: cover; }

/* header: three directions, their sections open as a dropdown on hover/focus (Vlad 09.10) */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hdr-top { display: flex; align-items: center; gap: 36px; height: 68px; }
.logo { display: flex; flex: none; }
.logo svg { height: 26px; width: auto; display: block; }
/* the logo is the base brand colour, the same blue as the «Бесплатная консультация» button, in every section (Vlad 16.10) */
.logo path { fill: var(--brand); }
/* cookie card components.cookie_consent_v3 (its inline style sets #0061af on :root and cs-purple/cs-orange/cs-yellow on body
   classes after the head): the accent of the direction on v3 and skinned pages; html body[data-dir] wins over body.cs-* (wave 5 T29) */
html body[data-dir] { --cookie-theme-color: var(--accent); --cookie-theme-hover: var(--accent-dark); }
.dirs-nav { display: flex; gap: 28px; align-self: stretch; }
.dd { position: relative; display: flex; align-items: center; }
.dirs-nav a { color: var(--ink); white-space: nowrap; }
.dd-top { font-weight: 600; font-size: 16px; }
.dd-top::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .5; transition: transform .15s; }
.dd:hover .dd-top, .dd:focus-within .dd-top { color: var(--accent); }
.dd:hover .dd-top::after, .dd:focus-within .dd-top::after { transform: translateY(3px) rotate(225deg); }
.dd-menu { position: absolute; top: 100%; left: -18px; min-width: 250px; padding: 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(20,20,40,.25); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { display: flex; align-items: center; gap: 12px; padding: 7px 18px 7px 12px; font-size: 15px; transition: background .15s, color .15s; }
.dd-menu a:hover { color: var(--accent); background: var(--paper); }
.dd-menu .ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--paper); color: var(--accent); transition: background .2s, color .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.dd-menu .ico svg { width: 18px; height: 18px; }
.dd-menu a:hover .ico { background: var(--accent); color: #fff; transform: scale(1.08) rotate(-4deg); }
.dd-menu a { opacity: 0; transform: translateX(-6px); }
.dd:hover .dd-menu a, .dd:focus-within .dd-menu a { opacity: 1; transform: none; transition: opacity .25s, transform .25s, background .15s, color .15s; }
.dd:hover .dd-menu a:nth-child(2), .dd:focus-within .dd-menu a:nth-child(2) { transition-delay: .03s; }
.dd:hover .dd-menu a:nth-child(3), .dd:focus-within .dd-menu a:nth-child(3) { transition-delay: .06s; }
.dd:hover .dd-menu a:nth-child(4), .dd:focus-within .dd-menu a:nth-child(4) { transition-delay: .09s; }
.dd:hover .dd-menu a:nth-child(5), .dd:focus-within .dd-menu a:nth-child(5) { transition-delay: .12s; }
.dd:hover .dd-menu a:nth-child(6), .dd:focus-within .dd-menu a:nth-child(6) { transition-delay: .15s; }
.dd:hover .dd-menu a:hover { transition-delay: 0s; }
.dd-menu--2 { display: grid; grid-template-columns: repeat(2, minmax(240px, max-content)); column-gap: 6px; width: max-content; }
/* #55: named groups of a list, small grey caps like «Валюта цен» in the burger; not links */
.dd-grp-t { display: block; padding: 12px 18px 4px 12px; font-size: 11.5px; line-height: 1.3; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--muted); }
.dd-col > .dd-grp:first-child .dd-grp-t { padding-top: 4px; }
.hdr { transition: box-shadow .25s; }
.hdr.scrolled { box-shadow: 0 8px 24px -18px rgba(20,20,40,.35); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.hdr-right a { color: var(--ink); font-size: 15px; white-space: nowrap; }
.hdr-right a:hover { color: var(--accent); }
.hdr-right .btn { color: #fff; padding: 10px 18px; font-size: 14px; }
/* the «Бесплатная консультация» button is --brand like the logo in every direction (wave 5, task 3a): the section accent is overridden on the button */
.hdr-right .hdr-cta { --accent: var(--brand); --accent-dark: var(--brand-dark); }
/* Vlad 19.10: «.hdr-right a:hover» (0,2,1) painted the text of the button blue on its blue fill; the button keeps white text on a darker fill */
.hdr-right a.btn--accent:hover, .hdr-right a.btn--accent:focus-visible { color: #fff; background: var(--accent-dark); }
/* B6 account: the initial in a circle with the dropdown for a signed-in user, the person icon + «Войти» for a guest */
.hdr-login { display: inline-flex; align-items: center; gap: 6px; }
.hdr-login-ico, .hdr-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.hdr-login-ico { color: var(--ink); }
.hdr-login-ico svg { width: 20px; height: 20px; }
.hdr-login:hover .hdr-login-ico { color: var(--accent); }
.hdr-ava { background: var(--accent-soft); color: var(--accent-dark); font: 600 15px/1 var(--sans); transition: background .15s, color .15s; }
.hdr-acc:hover .hdr-ava, .hdr-acc:focus-within .hdr-ava { background: var(--accent); color: #fff; }
.hdr-acc-menu { left: auto; right: -10px; min-width: 220px; }
.hdr-acc-name { margin: 2px 0 6px; padding: 0 18px 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-out { margin: 0; }
.hdr-out button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 18px 7px 12px; border: 0; background: none; font: 15px var(--sans); color: var(--ink); cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.hdr-out button:hover { color: var(--accent); background: var(--paper); }
.hdr-out .ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--paper); color: var(--accent); }
.hdr-out .ico svg { width: 18px; height: 18px; }
/* W1 19.10 №19: currency switcher (sign + code), its menu like the account one; on a phone the pills in the burger */
.hdr-cur-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s; }
.hdr-cur-btn::after { content: ""; width: 5px; height: 5px; margin: 0 0 3px 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .5; }
.hdr-cur-btn:hover, .hdr-cur:focus-within .hdr-cur-btn { border-color: var(--accent); color: var(--accent); }
.hdr-cur-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hdr-cur-sign { font-weight: 600; }
.hdr-cur-menu { left: auto; right: -10px; min-width: 190px; }
.hdr-cur-menu .ico { font: 600 15px/1 var(--sans); font-style: normal; }
.hdr-cur-menu a[aria-current] { color: var(--accent); font-weight: 600; }
.hdr-cur-menu a[aria-current] .ico { background: var(--accent); color: #fff; }
.hdr-cur-m { display: none; }
.hdr-cur-m-t { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.hdr-cur-m a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); }
.hdr-cur-m a[aria-current] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 1181-1520 px (measured with Onest): the 1200 px column does not hold «Родителям» and the switcher together, «Родителям»
   goes (as below 1360 before) and the gaps get tighter; above 1520 both stay, the row fits the screen */
@media (min-width: 1181px) and (max-width: 1520px) {
  .hdr-right .hide-md { display: none; }
  .hdr-top { gap: 24px; }
  .dirs-nav { gap: 20px; }
  .hdr-right { gap: 16px; }
  .hdr-cur-btn { padding: 0 10px; }
}
@media (max-width: 760px) {
  .hdr.open .hdr-cur-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  /* on a phone the header keeps only the account (icon or initial), the rest is in the burger */
  .hdr-right { display: flex; gap: 0; }
  .hdr-right > :not(.hdr-acc) { display: none; }
  .hdr-login span { display: none; }
  .burger { margin-left: 4px; }
}
.burger { display: none; margin-left: 4px; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* footer (markup from v2.partials.footer) */
.ftr { margin-top: 104px; border-top: 1px solid var(--line); padding: 48px 0 32px; font-size: 15px; }
.ftr .wrap { max-width: 1200px; }
.ftr-grid { display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 24px; }
.ftr h4 { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.ftr h4 i { display: none; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 12px; line-height: 1.3; }
.ftr li a { color: var(--ink); }
.ftr li a:hover { color: var(--accent); }
.ftr .logo-svg { display: flex; color: var(--ink); }
.ftr .logo-svg svg { height: 24px; width: auto; }
.ftr-bottom { margin-top: 36px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }

/* 18.10.2026: logo + three directions + «Родителям», «Войти» and the button need 1244 px, the header ran past the screen from
   1101 to 1283 px (4 px at 1280) and past the 1200 px column up to 1360: «Родителям» goes into the burger below 1360, the
   burger itself comes below 1180 instead of 1100 */
@media (max-width: 1360px) {
  .hdr-right .hide-md { display: none; }
}
@media (max-width: 1180px) {
  .dirs-nav, .hdr-right .hide-md { display: none; }
  .burger { display: block; }
  .hdr.open .dirs-nav { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; order: 10; padding: 4px 0 20px; }
  .hdr.open .dirs-nav .dd { display: block; }
  .hdr.open .dirs-nav .dd-top::after { display: none; }
  .hdr.open .dirs-nav .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 4px 0 10px; background: none; min-width: 0; }
  .hdr.open .dirs-nav .dd-menu a { padding: 5px 0 5px 4px; color: var(--muted); opacity: 1; transform: none; }
  .hdr.open .dirs-nav .dd-menu .ico { width: 28px; height: 28px; }
  .hdr-top { flex-wrap: wrap; height: auto; min-height: 68px; }
}
@media (max-width: 1100px) {
  .ftr-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .hdr-top { min-height: 60px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  /* 07.11.2026 design-check: every link at least 32 px high for a finger; the rhythm stays (20 px line + 12 px gap = 32) */
  .logo, .ftr .logo-svg { min-height: 32px; align-items: center; }
  .ftr li { margin-bottom: 0; }
  .ftr li a, .ftr h4 a { display: inline-flex; align-items: center; min-height: 32px; }
}
/* Vlad 27.10 (phone screenshot): the open menu was taller than the screen and the sticky header never scrolled. The open
   header now scrolls itself, the page under it is locked, the four sections are an accordion */
.hdr .dd-hub, .hdr .dn-m { display: none; }
.hdr.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* #17 06.11 (Vlad's phone in the Telegram Mini App, the same in mobile Chrome): overflow hidden on body too made body the scroll
   box of the sticky header, so after a scroll the open menu stayed at the top of the page, out of sight. Only html locks the page */
html.hdr-lock { overflow: hidden; }
.hdr.open .dirs-nav { gap: 0; padding: 0 0 28px; }
.hdr.open .dirs-nav .dd { border-bottom: 1px solid var(--line); }
.hdr.open .dirs-nav .dd-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font-size: 17px; white-space: normal; color: var(--ink); }
.hdr.open .dirs-nav .dd-top::after { display: inline-block; flex: none; margin: 0 8px 4px 12px; transform: rotate(45deg); }
.hdr.open .dirs-nav .dd.is-open .dd-top { color: var(--accent); }
.hdr.open .dirs-nav .dd.is-open .dd-top::after { transform: translateY(3px) rotate(225deg); }
.hdr.open .dirs-nav .dd:not(.is-open) .dd-menu { display: none; }
.hdr.open .dirs-nav .dd-menu { padding: 0 0 12px; }
.hdr.open .dirs-nav .dd-menu a { padding: 7px 0 7px 4px; }
.hdr.open .dirs-nav .dd-menu a.dd-hub { display: flex; color: var(--ink); font-weight: 600; }
.hdr.open .dirs-nav .dd.is-open .dd-menu--2 { display: block; width: auto; }
.hdr.open .dirs-nav .dd-grp-t { padding: 12px 0 2px 4px; }
.hdr.open .dn-m { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 0 16px; }
.hdr.open .dn-m .dn-m-link { font-size: 17px; font-weight: 600; padding: 0 2px; }
.hdr.open .dn-m .dn-m-pwa { font: inherit; font-size: 17px; font-weight: 600; text-align: left; color: var(--brand); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.hdr.open .dn-m .dn-m-pwa[hidden], .hdr .dn-m-pwa-hint[hidden] { display: none; }
.hdr.open .dn-m .dn-m-pwa-hint { margin: -6px 0 0; padding: 0 2px; font-size: 14px; line-height: 1.4; color: var(--muted, #666); }
.hdr.open .dn-m .btn { --accent: var(--brand); --accent-dark: var(--brand-dark); justify-content: center; text-align: center; color: #fff; padding: 14px 18px; font-size: 16px; }
/* the burger turns into a cross while the menu is open */
.burger span { transition: transform .2s, opacity .2s; }
.hdr.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.open .burger span:nth-child(2) { opacity: 0; }
.hdr.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .section { padding-top: 72px; }
  .band { margin-top: 72px; padding: 64px 0; }
}

/* motion (Vlad 09.10: the site should feel alive on hover and scroll). Reveal only when JS set html.rv-on; off for reduced motion */
.rv-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.rv-on .rv.in { opacity: 1; transform: none; }
.art img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
a:hover > .art img, .dir:hover .art img, .art:hover img { transform: scale(1.04); }
.btn { transition: background .15s, border-color .15s, color .15s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(20,20,40,.45); }
.btn:active { transform: translateY(0); box-shadow: none; }
.more::after { content: "→"; margin-left: .3em; display: inline-block; transition: transform .2s; }
.more:hover::after, a:hover .more::after { transform: translateX(4px); }
.see-all { transition: color .15s, text-underline-offset .2s; }
.see-all:hover { text-underline-offset: 7px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rv-on .rv { opacity: 1; transform: none; }
}

/* hero */
.v3-hero { padding: 48px 0 0; }
.v3-hero--page { padding-top: 20px; }
.v3-hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.v3-hero-grid--solo { grid-template-columns: 1fr; }
.v3-hero h1 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; }
.v3-hero--page h1 { font-size: clamp(34px, 4vw, 54px); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; max-width: 900px; }
.v3-hero h1 em { font-style: normal; color: var(--accent); }
.v3-hero .lead { font-size: 19px; max-width: 620px; }
.v3-hero--page .lead { font-size: 18px; max-width: 760px; }
.v3-hero .art { aspect-ratio: 3 / 2; }
.v3-trust { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 20px; margin-top: 48px; border-top: 1px solid var(--ink); }
.v3-trust div { padding-top: 16px; }
.v3-trust b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.4vw, 48px); color: var(--ink); letter-spacing: -.03em; line-height: 1.05; }
.v3-trust span { color: var(--muted); font-size: 15px; }

/* card: white with a thin line (default) or paper; a link only when it has href */
.v3-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.v3-card { display: flex; flex-direction: column; border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; color: var(--text); }
.v3-card--paper { background: var(--paper); border-color: transparent; }
a.v3-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s; }
a.v3-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(20,20,40,.4); border-color: transparent; }
.v3-card .art { border-radius: 0; aspect-ratio: 4 / 3; position: relative; }
.v3-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.v3-card .kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--accent); margin-bottom: 6px; }
.v3-card h3 { font: 600 17px/1.35 var(--sans); color: var(--ink); letter-spacing: 0; }
.v3-card--serif h3 { font: 400 22px/1.2 var(--serif); letter-spacing: -.02em; }
a.v3-card:hover h3 { color: var(--accent-dark); }
.v3-card .meta { color: var(--muted); font-size: 14px; margin-top: 4px; }
.v3-card .text { color: var(--muted); font-size: 15px; margin-top: 8px; }
.v3-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.v3-card .tags span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper); color: var(--text); }
.v3-card--paper .tags span { background: #fff; }
.v3-card .tags span.acc { background: var(--accent-soft); color: var(--accent-dark); }
.v3-card .more { color: var(--accent); margin-top: auto; padding-top: 14px; font-size: 15px; }
.v3-card .tags + .more { margin-top: 0; }

/* filters: search with a round button, chips (links or buttons), extra fields from the slot */
.v3-filters { margin-top: 28px; }
.v3-filters-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v3-search { position: relative; flex: 1 1 360px; max-width: 560px; }
.v3-search input { width: 100%; height: 54px; padding: 0 62px 0 22px; border: 1px solid #c9ccd4; border-radius: 999px; font: 16px var(--sans); color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.v3-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.v3-search button { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.v3-search button:hover { background: var(--accent-dark); }
.v3-filters select { height: 46px; padding: 0 42px 0 16px; border: 1px solid #c9ccd4; border-radius: 999px; font: 15px var(--sans); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2312141a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; } /* IA 19.10 W1: drawn chevron, 14px from the edge */
.v3-filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.v3-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.v3-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #c9ccd4; border-radius: 999px; color: var(--ink); font: 600 14px var(--sans); background: #fff; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.v3-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.v3-chip.is-active, .v3-chip[aria-pressed="true"], .v3-chip[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.v3-chip i { font-style: normal; font-weight: 400; color: var(--muted); }
.v3-chip.is-active i, .v3-chip[aria-pressed="true"] i, .v3-chip[aria-current] i { color: rgba(255,255,255,.7); }

/* pagination */
.v3-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; }
.v3-pager a, .v3-pager span { min-width: 42px; height: 42px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; }
.v3-pager a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.v3-pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.v3-pager .gap { border: 0; background: none; min-width: 20px; padding: 0; color: var(--muted); }
.v3-pager .off { color: #b4b8c2; }

/* breadcrumbs */
.v3-crumbs { font-size: 14px; color: var(--muted); padding-top: 28px; }
.v3-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.v3-crumbs li + li::before { content: "/"; margin: 0 8px; color: #b4b8c2; }
.v3-crumbs a { color: var(--muted); }
.v3-crumbs a:hover { color: var(--accent); }
.v3-crumbs [aria-current] { color: var(--ink); }
/* W6 №8: crumbs of the full cards on the beige band, edge to edge (full-bleed without leaving .wrap); the page head follows */
.v3-crumbs.v3-crumbs--band { padding-top: 16px; padding-bottom: 16px; margin-top: 0; margin-bottom: 24px; background: var(--paper, #f4f1ea); box-shadow: 0 0 0 100vmax var(--paper, #f4f1ea); clip-path: inset(0 -100vmax); }
:has(> .v3-crumbs--band:first-child), :has(> .wrap:first-child > .v3-crumbs--band:first-child) { padding-top: 0; }
@media (max-width: 760px) { .v3-crumbs.v3-crumbs--band { padding-top: 12px; padding-bottom: 12px; margin-bottom: 16px; } }

/* lead form: consultation block (texts and photo as on v3/advisers, form = the site consultation form) */
.v3-lead { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.v3-lead--solo { grid-template-columns: 1fr; }
.v3-lead .art { aspect-ratio: 1000 / 470; }
.v3-ticks { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.band .v3-ticks, .band .v3-ticks li { border-color: #dcd8cf; }
.v3-ticks li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); color: var(--ink); }
.v3-ticks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 7px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.v3-lead .fine { color: var(--muted); font-size: 14px; margin-top: 16px; }
.v3-lead .btn { border: 0; cursor: pointer; font-family: var(--sans); }

/* cta: accent band (as the final block of the hubs) or paper */
.v3-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; background: var(--accent); border-radius: 20px; padding: 48px; color: #e4e7ff; }
.v3-cta .h2 { color: #fff; }
.v3-cta p { margin-top: 12px; max-width: 620px; font-size: 18px; }
.v3-cta .cta-row { margin-top: 0; }
.v3-cta--paper { background: var(--paper); color: var(--text); }
.v3-cta--paper .h2 { color: var(--ink); }
.v3-cta--paper p { color: var(--muted); }

/* ad slot: the slot keeps its own markup (ads.assets); the wrapper only gives the v3 spacing */
.v3-ad { margin-top: 56px; }
.v3-ad:empty { display: none; }
/* badge of a house ad: opacity .7 of ads.assets gave 4:1 on the light creatives (Lighthouse color-contrast); the old pages keep ads.assets as is */
.adx .adx-badge { opacity: .9; }

/* section menu under the header (subnav section of v3.layout), shared with the skin */
.v3-subnav { position: relative; z-index: 40; border-bottom: 1px solid var(--line); background: #fff; font-family: var(--sans); }
.v3-subnav .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px !important; padding-bottom: 10px !important; }
.v3-subnav .wrap::-webkit-scrollbar { display: none; }
.v3-subnav a { flex: none; padding: 7px 14px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: background .15s, color .15s; }
.v3-subnav a:hover { background: var(--soft); color: var(--accent); }
.v3-subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }

@media (max-width: 1000px) {
  .v3-cards:not(.v3-cards--c1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3-lead { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .v3-hero { padding-top: 32px; }
  .v3-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .v3-hero .lead { font-size: 17px; }
  .v3-trust { grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 36px; }
  .v3-trust div { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .v3-cards { gap: 12px; }
  .v3-cards--1m { grid-template-columns: 1fr; }
  .v3-card-body { padding: 14px; }
  .v3-cta { padding: 32px 22px; }
  .v3-pager .num:not([aria-current]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  a.v3-card:hover { transform: none; }
}
/* W15 №72: frames whose only image failed to load (v3.partials.img-fallback marks them) are not shown empty */
.ru-logo.img-broken, .cs-logo-art.img-broken, .ec--image .ec-media.img-broken, .rs-org-logo.img-broken, .rs-op-logo.img-broken { display: none; }

/* buttons: .btn of base-css is THE button; x-ui.button only adds sizes, the ghost variant, the busy and disabled states */
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--ghost { background: transparent; color: var(--accent); border-color: transparent; }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-dark); }
.btn--block { display: flex; width: 100%; }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; transform: none; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); border-right-color: transparent; animation: ui-spin .7s linear infinite; }
.btn--white.is-busy::before, .btn--ghost.is-busy::before { border-color: var(--accent); border-right-color: transparent; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* fields: x-ui.field / x-ui.consent / x-ui.form, one height, one radius, one red, the texts of the lang file ui.php */
.ui-field { display: grid; gap: 6px; min-width: 0; }
.ui-field-l { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.ui-field-l .ui-req { color: var(--err); margin-left: 2px; }
.ui-input { box-sizing: border-box; width: 100%; min-height: var(--field-h); padding: 12px 16px; border: 1px solid #cfd2d9; border-radius: var(--r-s); background: #fff; color: var(--ink); font: 400 var(--fs-m)/1.4 var(--sans); transition: border-color var(--dur-1), box-shadow var(--dur-2); -webkit-appearance: none; appearance: none; }
textarea.ui-input { min-height: 120px; resize: vertical; }
select.ui-input { padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23646a78' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.ui-input::placeholder { color: #9a9fab; }
.ui-input:hover { border-color: var(--muted); }
.ui-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-input:disabled { background: var(--soft); color: var(--muted); cursor: not-allowed; }
.ui-field.is-error .ui-input, .ui-input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.ui-field.is-ok .ui-input { border-color: var(--ok); }
.ui-field-hint { font-size: var(--fs-xs); color: var(--muted); }
.ui-field-err { font-size: var(--fs-xs); color: var(--err); font-weight: 500; }
.ui-field-err:empty { display: none; }
.ui-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-s); color: var(--muted); line-height: 1.45; cursor: pointer; }
.ui-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ui-consent a { color: var(--accent); }
.ui-consent.is-error { color: var(--err); }
.ui-form { display: grid; gap: var(--sp-4); }
.ui-form-err { padding: 12px 16px; border-radius: var(--r-s); background: var(--err-soft); color: var(--err); font-size: var(--fs-s); }
.ui-form-err:empty { display: none; }

/* modal: x-ui.modal, only the native <dialog> (Esc, focus trap and the top layer come from the browser) */
.ui-modal { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--r-l); background: #fff; color: var(--text); box-shadow: var(--sh-3); overflow: auto; }
.ui-modal::backdrop { background: rgba(12, 14, 22, .55); backdrop-filter: blur(2px); }
.ui-modal[open] { animation: ui-modal-in var(--dur-3) var(--ease); }
.ui-modal[open]::backdrop { animation: ui-fade var(--dur-3) ease; }
.ui-modal-in { padding: 28px 28px 26px; }
.ui-modal-h { font: 400 var(--fs-h3)/1.2 var(--serif); color: var(--ink); margin: 0 44px 12px 0; }
.ui-modal-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-1), transform var(--dur-2) var(--ease); }
.ui-modal-x:hover { background: var(--accent-soft); color: var(--accent); transform: rotate(90deg); }
.ui-modal-x:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.ui-modal-x svg { width: 18px; height: 18px; }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .ui-modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; } .ui-modal-in { padding: 24px 18px 22px; } }
body.ui-modal-open { overflow: hidden; }

/* counter: x-ui.counter, a number that counts up once when it scrolls into view (data-count) */
.ui-count { font-variant-numeric: tabular-nums; }

/* cards: one hover for every card of the library (lift 3 px, 200 ms, one curve) */
.ui-lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); }
.ui-lift:hover { transform: translateY(var(--lift)); box-shadow: var(--sh-2); }

@media (prefers-reduced-motion: reduce) {
  .ui-modal[open], .ui-modal[open]::backdrop { animation: none; }
  .ui-lift, .ui-modal-x { transition: none; } .ui-lift:hover { transform: none; }
  .btn.is-busy::before { animation-duration: 2s; }
}

/* tabs: x-ui.tabs / x-ui.tab (#62) */
.ui-tabs { display: grid; gap: 12px; }
.ui-tab { all: unset; box-sizing: border-box; display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s; }
.ui-tab:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(20, 20, 40, .35); }
.ui-tab:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-color: var(--accent); }
.ui-tab[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.ui-tab .ui-tab-chev { margin-left: auto; flex: none; width: 22px; height: 22px; color: var(--accent); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ui-tab[aria-expanded="true"] .ui-tab-chev { transform: rotate(90deg); }
.ui-tab-panel { min-width: 0; }
.ui-tabs.is-ready .ui-tab-panel[hidden] { display: none; }
.ui-tabs.is-ready .ui-tab-panel:not([hidden]) { animation: ui-tab-in .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes ui-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) {
  .ui-tabs.is-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(var(--ui-rows), auto) 1fr; column-gap: 28px; row-gap: 12px; align-items: start; }
  .ui-tabs.is-ready > .ui-tab { grid-column: 1; }
  .ui-tabs.is-ready > .ui-tab-panel { grid-column: 2; grid-row: 1 / -1; }
  .ui-tabs.is-ready .ui-tab-chev { transform: none; }
  .ui-tabs.is-ready .ui-tab[aria-expanded="true"] .ui-tab-chev { transform: translateX(4px); }
}
@media (max-width: 760px) {
  .ui-tab .ui-tab-chev { transform: rotate(90deg); }
  .ui-tab[aria-expanded="true"] .ui-tab-chev { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .ui-tab, .ui-tab .ui-tab-chev { transition: none; } .ui-tab:hover { transform: none; } .ui-tabs.is-ready .ui-tab-panel:not([hidden]) { animation: none; } }

/* accordion (FAQ): x-ui.accordion / x-ui.accordion-item (#62) */
.ui-acc { display: grid; gap: 10px; }
.ui-acc-item { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .25s; }
.ui-acc-item:hover { border-color: var(--accent); box-shadow: 0 10px 24px -18px rgba(20, 20, 40, .35); }
.ui-acc-item.is-open { border-color: var(--accent); }
.ui-acc-h { margin: 0; font: inherit; }
.ui-acc-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; font: 600 17px/1.35 var(--sans); color: var(--ink); cursor: pointer; border-radius: 16px; }
.ui-acc-btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.ui-acc-ic { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .2s, color .2s; }
.ui-acc-ic svg { width: 16px; height: 16px; }
.ui-acc-btn:hover .ui-acc-ic { background: var(--accent); color: #fff; }
.ui-acc-btn[aria-expanded="true"] .ui-acc-ic { transform: rotate(45deg); }
.ui-acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.ui-acc-panel > div { overflow: hidden; min-height: 0; }
.ui-acc-panel .in { padding: 0 22px 20px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.ui-acc-panel .in p { margin: 0; }
.ui-acc-panel .in a { color: var(--accent); }
.ui-acc.is-ready .ui-acc-panel:not(.is-open) { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1), visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .ui-acc-panel, .ui-acc.is-ready .ui-acc-panel:not(.is-open), .ui-acc-ic { transition: none; } }

/* toast: x-ui.toast (#62) */
.ui-toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font: 500 15px/1.4 var(--sans); box-shadow: 0 18px 40px -14px rgba(10, 10, 30, .5); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s; }
.ui-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: opacity .3s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.ui-toast-ic { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .ui-toast, .ui-toast.is-on { transition: none; } }
.ui-toast.is-err .ui-toast-ic { background: var(--err); }