/* Jost — открытый аналог Futura с кириллицей (OFL, файлы рядом: assets/fonts/web/OFL.txt).
   Absolute URL: app.css отдаётся по /assets/offerius/app.css, относительный путь уехал бы в чужой префикс. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/offerius/fonts/jost-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/offerius/fonts/jost-latin.woff2) format('woff2');
  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: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/offerius/fonts/jost-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/offerius/fonts/jost-italic-latin.woff2) format('woff2');
  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 {
  --of-ink: #14211c;
  --of-muted: #56635d;
  --of-green: #176b4d;
  --of-green-dark: #0f523a;
  --of-mint: #dff3e8;
  --of-paper: #fbfaf6;
  --of-white: #fff;
  --of-line: #d8ded9;
  --of-warn: #8a4b12;
  --of-warn-bg: #fff3dc;
  --of-error: #a52b2b;
  --of-error-bg: #fff0f0;
  --of-radius: 18px;
  --of-radius-sm: 12px;
  --of-radius-lg: 28px;
  --of-transition: 160ms cubic-bezier(.4, 0, .2, 1);
  --of-transition-slow: 300ms cubic-bezier(.4, 0, .2, 1);
  --of-shadow: 0 18px 50px rgba(20, 33, 28, .08);
  --of-shadow-btn: 0 1px 2px rgba(20, 33, 28, .10);
  --of-shadow-btn-hover: 0 4px 12px rgba(20, 33, 28, .16);
  --of-shadow-card: 0 8px 24px rgba(20, 33, 28, .04);
  --of-shadow-card-hover: 0 14px 34px rgba(20, 33, 28, .10);
  --of-focus: 0 0 0 3px #fbfaf6, 0 0 0 6px #176b4d;
  --of-font: 'Jost', 'Futura PT', Futura, ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  /* Palette tokens: canonical values for what late-added sections referenced
     via diverging fallbacks (stream U2), extended with the ui-polish DELTA set. */
  --of-border: var(--of-line);
  --of-surface: #f2f5f2;
  --of-surface-soft: #f3f7f3;
  --of-soft: var(--of-mint);
  --of-accent-d: var(--of-green-dark);
  --of-hover: #eef1ed;
  --of-mint-soft: #edf8f2;
  --of-mint-strong: #b9dfc7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--of-paper); color: var(--of-ink); font-family: var(--of-font); }
a { text-underline-offset: .2em; color: var(--of-green-dark); }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 0; box-shadow: var(--of-focus); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.skip-link { position: fixed; z-index: 1000; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--of-ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.shell, .site-header, .site-footer, .content-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: .65rem; color: var(--of-ink); font-size: 1.18rem; font-weight: 800; text-decoration: none; }
.brand__mark { width: 34px; height: 34px; color: var(--of-green); fill: currentColor; }
.primary-nav { display: flex; align-items: center; gap: .25rem; }
.primary-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .75rem; color: var(--of-ink); text-decoration: none; border-radius: 10px; }
.primary-nav a:hover { background: #eef1ed; }
.button, button.button, input[type="submit"].button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: .75rem 1.2rem; background: var(--of-green); color: #fff; font-weight: 750; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--of-green-dark); color: #fff; }
.button--small { min-height: 44px !important; padding-inline: 1rem !important; background: var(--of-green) !important; color: #fff !important; }
.button--full { width: 100%; }
.button--secondary { background: var(--of-white); color: var(--of-green); border: 1px solid var(--of-line); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 690px; padding-block: clamp(4rem, 9vw, 8rem); }
.hero h1 { max-width: 11ch; margin: .45rem 0 1.3rem; font-size: clamp(2.7rem, 6vw, 5.3rem); letter-spacing: -.055em; }
.hero__lead { max-width: 650px; color: var(--of-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.eyebrow { color: var(--of-green); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.trust-note { display: flex; gap: .5rem; margin-top: 1.2rem; color: var(--of-muted); font-size: .9rem; }
.trust-note span { color: var(--of-green); font-weight: 900; }
.product-demo { position: relative; overflow: hidden; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--of-line); border-radius: 26px; background: rgba(255,255,255,.92); box-shadow: var(--of-shadow); }
.product-demo::before { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -90px; border-radius: 50%; background: var(--of-mint); z-index: 0; }
.product-demo > * { position: relative; }
.demo-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; color: var(--of-muted); }
.match-score { color: var(--of-green-dark); background: var(--of-mint); padding: .35rem .65rem; border-radius: 999px; font-weight: 800; }
.product-demo h2 { margin-top: 2rem; font-size: 1.45rem; }
.reason-list { display: grid; gap: .7rem; padding: 0; list-style: none; }
.reason-list li { padding: .85rem; background: #f3f7f3; border-radius: 10px; }
.reason-list .risk { background: var(--of-warn-bg); color: #6d3c0f; }
.demo-step { margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--of-line); }
.demo-step span, .demo-step strong { display: block; }
.demo-step span { color: var(--of-muted); font-size: .82rem; }

.section { padding-block: clamp(4rem, 8vw, 7rem); }
.urgency-band { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--of-ink); color: #fff; }
.urgency-band h2 { max-width: 850px; margin: .5rem 0 1rem; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.urgency-band p:last-child { max-width: 720px; color: #cbd4cf; }
.urgency-band .eyebrow, .final-cta .eyebrow { color: #7ee0b3; }
.section > h2, .control-grid h2 { max-width: 720px; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin-top: 3rem; list-style: none; }
.steps li, .principle-card { padding: 1.5rem; border: 1px solid var(--of-line); border-radius: var(--of-radius); background: rgba(255,255,255,.55); }
.steps li > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--of-mint); color: var(--of-green-dark); font-weight: 800; }
.steps h3, .principle-card h3 { margin-bottom: .35rem; }
.steps p, .principle-card p { margin: 0; color: var(--of-muted); }
.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.control-grid > div:first-child { grid-row: span 3; padding-right: 2rem; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.capability-index { color: var(--of-green); font-size: .78rem; font-weight: 850; letter-spacing: .08em; }
.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-section h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; }
.faq-list { display: grid; gap: .75rem; }
.faq-list details { border: 1px solid var(--of-line); border-radius: 14px; background: var(--of-white); }
.faq-list summary { min-height: 56px; display: flex; align-items: center; padding: .8rem 1rem; font-weight: 800; cursor: pointer; }
.faq-list p { margin: 0; padding: 0 1rem 1rem; color: var(--of-muted); }
.final-cta { margin-block: 3rem 7rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 28px; background: var(--of-ink); color: #fff; text-align: center; }
.final-cta h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.final-cta p { color: #cbd4cf; }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding-block: 3rem; border-top: 1px solid var(--of-line); color: var(--of-muted); }
.site-footer strong { color: var(--of-ink); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .5rem; }
.site-footer small { grid-column: 1 / -1; }
.content-shell { min-height: 65vh; padding-block: 3rem 6rem; }

.of-shell { width: min(100%, 1020px); margin-inline: auto; }
.of-narrow { max-width: 560px; }
.of-lead { color: var(--of-muted); font-size: 1.1rem; }
.of-card { padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--of-line); border-radius: var(--of-radius); background: var(--of-white); box-shadow: 0 8px 24px rgba(20,33,28,.04); }
.of-stack { display: grid; gap: 1rem; }
.of-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.of-field { display: grid; gap: .4rem; }
.of-field label { font-weight: 700; }
.of-field input, .of-field select, .of-field textarea { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid #aab4ae; border-radius: 10px; background: #fff; color: var(--of-ink); }
.of-field textarea { min-height: 150px; resize: vertical; }
.of-hint { color: var(--of-muted); font-size: .86rem; }
.of-password { position: relative; }
.of-password input { padding-right: 9rem; }
.of-password button { position: absolute; right: 3px; top: 3px; min-height: 42px; border: 0; border-radius: 8px; background: transparent; color: var(--of-green); font-weight: 700; cursor: pointer; }
.of-alert { padding: 1rem; border-radius: 10px; }
.of-alert--error { border: 1px solid #e6a0a0; background: var(--of-error-bg); color: #7d2020; }
.of-alert--success { border: 1px solid #91c4a9; background: #ecf8f1; color: #104e37; }
.of-error { color: var(--of-error); font-size: .88rem; }
.of-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; color: var(--of-muted); }
.of-progress progress { flex: 1; accent-color: var(--of-green); }

.jobs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
.jobs-filter { position: sticky; top: 1rem; }
.jobs-filter summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.jobs-filter__body { display: grid; gap: 1rem; padding-top: 1rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .65rem; border-radius: 999px; background: var(--of-mint); color: var(--of-green-dark); font-size: .88rem; font-weight: 700; }
.of-price { margin: .4rem 0 1rem; color: var(--of-green-dark); font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 850; }
.of-consent { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.45; }
.job-list { display: grid; gap: 1rem; }
.job-card { display: grid; gap: .9rem; }
.job-card__top { display: flex; justify-content: space-between; gap: 1rem; }
.job-card h2, .job-card h3 { margin: 0; font-size: 1.35rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--of-muted); }
.match-reasons { margin: 0; padding-left: 1.2rem; color: #274d3d; }
.job-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.job-actions a:not(.button) { min-height: 44px; display: inline-flex; align-items: center; }
.match-badge { min-width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid #acd2bd; border-radius: 50%; background: var(--of-mint); color: var(--of-green-dark); font-weight: 850; }
.of-skeleton { min-height: 160px; background: linear-gradient(90deg,#f1f2ef 25%,#fafafa 50%,#f1f2ef 75%); background-size: 200% 100%; animation: of-shimmer 1.4s infinite; }
@keyframes of-shimmer { to { background-position: -200% 0; } }

.dashboard-hero { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; border-color: #98bea9; background: linear-gradient(135deg,#fff,#edf8f2); }
.dashboard-hero h2 { margin-top: 0; }
.activation-card__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.activation-card__head h2 { margin: 0; }
.activation-card__head > strong { color: var(--of-green-dark); font-size: 1.35rem; }
.activation-card > progress { width: 100%; height: .55rem; margin: 1rem 0; accent-color: var(--of-green); }
.activation-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; color: var(--of-muted); }
.activation-steps li { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .88rem; }
.activation-steps li > span:first-child { display: inline-grid; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid var(--of-line, #d8ded9); border-radius: 50%; background: #f4f6f3; }
.activation-steps .is-complete { color: var(--of-ink); }
.activation-steps .is-complete > span:first-child { border-color: var(--of-green); background: var(--of-green); color: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kpi strong { display: block; font-size: 2rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: .85rem; border-bottom: 1px solid var(--of-line); text-align: left; }
.data-table th { font-size: .82rem; color: var(--of-muted); }
/* Cabinet shell grid keyed on the deterministic body class (functions.php
   adds of-app-shell exactly when AppPages::nav() renders) — NOT on :has(> .app-nav):
   a wrapper injected by a content filter or a :has()-less browser used to collapse
   the grid and render the nav as a full-width list. */
.of-app-shell .entry-content { width: min(1180px, calc(100% - 2rem)); max-width: none; margin-inline: auto; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.of-app-shell .entry-content > .of-shell { width: 100%; min-width: 0; }
/* Stream U7: /avtootkliki/ composition is owned by SearchPages::searches() —
   one .searches-layout wrapper (portrait, pulse, step strip, nav, searches)
   laid out deterministically. The former :has()-based placement rules collapsed
   into auto-placement chaos whenever :has() was unavailable — the same failure
   class the kabinet fixed via body class (U3). */
.of-app-shell .entry-content > .searches-layout { grid-column: 1 / -1; }
.searches-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.searches-layout > [data-search-portrait],
.searches-layout > [data-search-pulse],
.searches-layout > [data-step-progress] { grid-column: 1 / -1; }
.searches-layout > .app-nav { grid-column: 1; }
.searches-layout > .of-shell { grid-column: 2; min-width: 0; }
.app-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: .55rem; border: 1px solid var(--of-line); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 14px 34px rgba(20,33,28,.07); backdrop-filter: blur(14px); }
.app-nav a { min-height: 48px; display: inline-flex; align-items: center; gap: .7rem; padding: .65rem .75rem; color: var(--of-muted); border-radius: 11px; text-decoration: none; font-weight: 700; }
.app-nav a:hover { background: #f2f5f2; color: var(--of-ink); }
.app-nav a[aria-current="page"] { background: var(--of-mint); color: var(--of-green-dark); font-weight: 850; }
.app-nav__marker { flex: 0 0 auto; display: inline-flex; color: inherit; }
.app-nav__marker .of-icon { width: 20px; height: 20px; }
.of-icon { flex: 0 0 auto; }
.activation-steps li > span:first-child .of-icon { width: 15px; height: 15px; }
.app-nav a[aria-current="page"] .app-nav__marker { color: var(--of-green-dark); }
.of-sitemap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.raise-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.raise-feed li { display: flex; align-items: baseline; gap: .6rem; padding: .35rem .55rem; border-radius: 8px; background: #f4f6f3; }
.raise-feed__when { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--of-muted); font-size: .85rem; }
.raise-feed--muted li { background: transparent; padding-inline: 0; color: var(--of-muted); }
.match-tier--strong { border-color: var(--of-green); background: var(--of-green); color: #fff; }
.match-tier--fair { border-color: #91c4a9; background: #ecf8f1; color: #104e37; }
.match-tier--weak { background: #f2f5f2; color: var(--of-muted); }
.why-match { display: grid; gap: .3rem; }
.why-match__title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--of-muted); }
.why-match ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.why-match li { position: relative; padding-left: 1.1rem; font-size: .92rem; }
.why-match li::before { content: '✓'; position: absolute; left: 0; color: var(--of-green); font-weight: 800; }
[data-personal-matches] h2 { margin-bottom: .4rem; }
.support-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-size: .92rem; }
.support-view { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0; }
.support-search { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.support-search .of-field { flex: 1 1 260px; }
.jobs-layout--wide { grid-template-columns: 300px 1fr; }
.page-vakansii .of-shell { width: min(1400px, calc(100% - 2rem)); }
.jobs-filter__reset { display: inline-block; margin-top: .5rem; font-size: .9rem; color: var(--of-muted); }
.jobs-filter fieldset.of-field { border: 0; padding: 0; margin: 0; }
.jobs-filter legend { font-weight: 700; padding: 0; margin-bottom: .4rem; }
.logged-in-next { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.logged-in-next .button { min-height: 52px; display: inline-flex; align-items: center; padding: .8rem 1.4rem; font-size: 1.02rem; }
@media (max-width: 480px) { .logged-in-next { flex-direction: column; } .logged-in-next .button { width: 100%; justify-content: center; } }
.empty-mascot { display: flex; justify-content: center; margin: .25rem 0 .75rem; }
.empty-mascot img { max-height: 160px; width: auto; }
.empty-mascot--inline { align-items: center; gap: .75rem; margin: .5rem 0 0; }
.empty-mascot--inline img { max-height: 96px; }
.empty-mascot--inline p { margin: 0; }
.error-mascot { display: block; margin: 0 auto 1.25rem; width: 180px; height: auto; }
[data-movement-empty] { text-align: left; }
[data-movement-empty] h3 { margin: .25rem 0 .4rem; }
.of-sitemap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.of-sitemap ul a { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .35rem .55rem; border-radius: 9px; color: var(--of-ink); text-decoration: none; }
.of-sitemap ul a:hover { background: var(--of-mint); }
.of-sitemap h2 { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.mode-picker { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--of-line); border-radius: 12px; }
.mode-picker legend { padding-inline: .35rem; font-weight: 800; }
.mode-picker label, .of-consent { min-height: 44px; display: flex; align-items: center; gap: .65rem; }
.mode-picker input, .of-consent input { width: 20px; height: 20px; accent-color: var(--of-green); }

/* Stream U6: the phone shell (stacked layout + fixed bottom tab bar) starts at
   768px, not 900px — desktop browsers at Windows display scaling (125–150%)
   report ~850–960 CSS px, and the tab bar used to cover content there. */
@media (max-width: 768px) {
  .of-app-shell .content-shell { padding-bottom: 7rem; }
  .of-app-shell .entry-content { width: 100%; display: block; }
  .of-app-shell .entry-content > .of-shell { width: min(100%, 1020px); }
  .searches-layout { display: block; }
  .app-nav { position: fixed; z-index: 80; left: 50%; right: auto; top: auto; bottom: max(.55rem, env(safe-area-inset-bottom)); width: min(720px, calc(100% - 1rem)); grid-auto-flow: column; grid-auto-columns: minmax(7.25rem, 1fr); display: grid; flex-direction: row; margin: 0; padding: .45rem; overflow-x: auto; overscroll-behavior-inline: contain; transform: translateX(-50%); border-radius: 17px; box-shadow: 0 18px 50px rgba(20,33,28,.2); scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav[data-nav-fade] { background-image: linear-gradient(90deg, rgba(255,255,255,0) calc(100% - 2.75rem), rgba(255,255,255,.97) calc(100% - .4rem)); }
  .app-nav a { min-height: 52px; justify-content: center; gap: .45rem; padding: .5rem .65rem; text-align: center; white-space: nowrap; font-size: .9rem; }
  .app-nav__marker { width: .45rem; height: .45rem; }
}

/* Stream U6: narrow-desktop zone (scaled laptops) — keep the two-column shell
   but give the content column more room than the default 224px sidebar. */
@media (min-width: 769px) and (max-width: 1000px) {
  .of-app-shell .entry-content { grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; }
  .searches-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 760px) {
  .primary-nav a:not(.button) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 3rem; }
  .hero h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .product-demo { scroll-margin-top: 1rem; }
  .steps, .control-grid, .capability-grid, .faq-section, .of-grid, .kpi-grid, .answer-topic-grid { grid-template-columns: 1fr; }
  .control-grid > div:first-child { grid-row: auto; }
  .jobs-layout { display: flex; flex-direction: column; }
  .jobs-results { order: 1; width: 100%; }
  .jobs-filter { position: static; order: 2; width: 100%; }
  .jobs-filter:not([open]) .jobs-filter__body { display: none; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .activation-steps { grid-template-columns: 1fr 1fr; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .shell, .site-header, .site-footer, .content-shell { width: min(100% - 1rem, 1180px); }
  .brand span { font-size: 1rem; }
  .primary-nav .button { padding-inline: .7rem !important; }
  .job-card__top { flex-direction: column-reverse; }
}
.account-chip{display:inline-flex;align-items:center;gap:.55rem;max-width:16rem;padding:.35rem .7rem;border:1px solid var(--border,#d9e0e7);border-radius:999px;background:var(--surface,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-chip__avatar{display:grid;place-items:center;width:1.8rem;height:1.8rem;flex:0 0 auto;border-radius:50%;background:#183b56;color:#fff;font-weight:700}.auth-shell{width:min(100% - 2rem,30rem);margin:4rem auto}.primary-nav--account{gap:.8rem}
.employer-heading{display:flex;align-items:center;gap:.8rem}.employer-heading--action{margin-top:1rem}.employer-heading h2,.employer-heading h3,.employer-heading p{margin-top:0}.employer-mark{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:0 0 auto;border-radius:.8rem;background:linear-gradient(145deg,#173f5f,#246b83);color:#fff;font-size:.82rem;font-weight:850;letter-spacing:.03em;box-shadow:0 6px 18px rgba(23,63,95,.18)}
.employer-mark--1{background:linear-gradient(145deg,#245844,#318160)}.employer-mark--2{background:linear-gradient(145deg,#584125,#8b6737)}.employer-mark--3{background:linear-gradient(145deg,#42345f,#66508f)}.employer-mark--4{background:linear-gradient(145deg,#5c3038,#8b4854)}.employer-mark--5{background:linear-gradient(145deg,#24515c,#347788)}
.answer-preview__list { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.answer-preview__list li { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--of-border, #dbe3ee); border-radius: .85rem; background: var(--of-surface-soft, #f7f9fc); }
.answer-preview__list span { color: #166534; }
.answer-preview__list .answer-preview__attention { color: #9a3412; }
.answer-readiness { display: grid; gap: .85rem; padding: 1rem 1.1rem; border-radius: 1rem; background: linear-gradient(135deg, #edf8f1, #f6fbf8); color: #245844; }
.answer-readiness__summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: .65rem; }
.answer-readiness strong { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1; }
.answer-readiness progress { width: 100%; height: .7rem; overflow: hidden; border: 0; border-radius: 999px; background: #d8e9df; accent-color: #245844; }
.answer-readiness progress::-webkit-progress-bar { background: #d8e9df; border-radius: 999px; }
.answer-readiness progress::-webkit-progress-value { background: #245844; border-radius: 999px; }
.answer-readiness progress::-moz-progress-bar { background: #245844; border-radius: 999px; }
.answer-readiness p { margin: 0; }
.answer-readiness .button { justify-self: start; }
.answer-readiness__complete { padding: .8rem 1rem; border: 1px solid #b9dfc7; border-radius: .8rem; background: #fff; font-weight: 700; }
.answer-topics { border: 1px solid var(--of-border, #dbe3ee); border-radius: 1rem; background: #fff; overflow: hidden; }
.answer-topics summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px; padding: .85rem 1rem; cursor: pointer; font-weight: 800; list-style-position: inside; }
.answer-topics summary .muted { font-size: .86rem; font-weight: 600; }
.answer-topics[open] summary { border-bottom: 1px solid var(--of-border, #dbe3ee); }
.answer-topics .answer-topic-grid { padding: .75rem; }
.answer-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.answer-topic { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--of-border, #dbe3ee); border-radius: .9rem; background: var(--of-surface-soft, #f7f9fc); }
.answer-topic h3, .answer-topic p { margin: 0; }
.answer-topic h3 { font-size: 1rem; }
.answer-topic p { margin-top: .35rem; color: var(--of-muted, #64748b); font-size: .9rem; }
.answer-topic .chip { flex: 0 0 auto; }
.answer-topic--ready { border-color: #b9dfc7; }
.answer-topic--missing { border-color: #f1d0a9; }
.answer-topic--manual { border-color: #d5dee8; background: #f9fafd; }
.answer-topic--focused { border-color: #245844; box-shadow: 0 0 0 3px rgba(36, 88, 68, .12); }
@media (max-width: 760px) { .answer-topic-grid { grid-template-columns: 1fr; } }
.canary-preview details { border: 1px solid var(--of-border, #dbe3ee); border-radius: .9rem; overflow: hidden; }
.canary-preview summary { cursor: pointer; padding: .9rem 1rem; font-weight: 750; background: var(--of-surface-soft, #f7f9fc); }
.canary-preview__letter { padding: 1rem; white-space: normal; line-height: 1.65; }
.canary-preview__answers { display: grid; gap: .75rem; margin: 0; }
.canary-preview__answers div { display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: .8rem; background: var(--of-surface-soft, #f7f9fc); }
.canary-preview__answers dt { font-weight: 700; }
.canary-preview__answers dd { margin: 0; color: #166534; }
.button:disabled { cursor: not-allowed; opacity: .58; }

/* --- Article (blog post) --- */
.article-shell { max-width: 820px; }
.article-shell .wp-block-post-title { margin-bottom: .5rem; letter-spacing: -.01em; }
.article-shell .article-date { color: var(--of-muted, #5c6b64); font-size: .9rem; margin-bottom: 2rem; }
.article-shell .entry-content { font-size: 1.05rem; line-height: 1.7; }
.article-shell .entry-content h2 { font-size: 1.45rem; margin-top: 2.2rem; letter-spacing: -.01em; }
.article-shell .entry-content h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.article-shell .entry-content p { margin-block: 1rem; }
.article-shell .entry-content ul { padding-left: 1.25rem; margin-block: 1rem; }
/* Sprint 32 (stream N): per-h2 article figures — mascot scenes (webp) and
   article-specific svg infographics served from /assets/offerius/articles/. */
.article-shell figure.article-figure {
    margin: 2rem 0;
    background: #fbfaf6;
    border: 1px solid var(--of-line, #e5e9e6);
    border-radius: 14px;
    overflow: hidden;
}
.article-shell figure.article-figure img,
.article-shell figure.article-figure svg {
    display: block;
    width: 100%;
    height: auto;
}
.article-shell figure.article-figure figcaption {
    padding: .6rem 1rem .8rem;
    font-size: .85rem;
    color: var(--of-muted, #5c6b64);
    border-top: 1px solid var(--of-line, #e5e9e6);
}
.article-tools { margin-top: 3rem; padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--of-line); border-radius: var(--of-radius); background: var(--of-white); }
.article-tools h2 { margin-top: 0; font-size: 1.15rem; }
.article-tools__list { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.article-tools__list li { margin-block: .35rem; }
.article-cta { margin-block: 0; }
.error-shell { align-content: start; }
.error-shell h1 { letter-spacing: -.01em; }

/* --- Direction interview --- */
.chip--direction { background: var(--of-green); color: #fff; }
.answer-topic__meta { color: var(--of-muted, #5c6b64); font-size: .82rem; margin-block: .15rem 0; }
.answer-direction-title { margin-top: 1.25rem; font-size: 1rem; }
.answer-topic--stale .chip { border: 1px solid var(--of-line); }

/* --- Market wording gap (T-B6) --- */
.market-block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--of-line); }
.market-terms { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.market-term { padding: .75rem 1rem; border: 1px solid var(--of-line); border-radius: 10px; background: var(--of-white); }
.market-term__note { display: block; margin-top: .35rem; color: var(--of-muted, #5c6b64); font-size: .92rem; }
.market-term form { margin-top: .35rem; }
.button--link { background: none; border: 0; padding: 0; color: var(--of-green); font-weight: 650; cursor: pointer; text-decoration: underline; }

/* --- Connected resumes picker (T-B8) --- */
details.manual-resume { padding-block: 1rem; }
details.manual-resume > summary { cursor: pointer; display: grid; gap: .35rem; }
details.manual-resume > summary h2 { margin: 0; }
details.manual-resume[open] > summary { margin-bottom: 1rem; }

/* --- Applications movement feed (T-B10) --- */
.app-nav__badge { margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: var(--of-green); color: #fff; font-size: .78rem; font-weight: 700; }
.movement-counters { display: flex; flex-wrap: wrap; gap: .5rem; }
.movement-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.movement-feed__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .65rem .75rem; border: 1px solid var(--of-line); border-radius: 12px; }
.movement-feed__status { font-weight: 700; color: var(--of-green-dark); }
.movement-feed__vacancy { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.movement-feed__employer { color: #5f6f66; }
.movement-feed time { color: #5f6f66; font-size: .85rem; }
.chip--muted { background: #eef1ef; color: #5f6f66; }

/* --- Blog navigation (T-C10) --- */
.blog-index__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.blog-index__list a { font-weight: 600; }
.breadcrumbs { font-size: .88rem; color: #5f6f66; margin-bottom: 1rem; }
.breadcrumbs a { color: var(--of-green-dark); }

/* --- Consent revoke danger zone (T-B7) --- */
.privacy-danger-zone { border: 1px solid #d9a7a7; }
.privacy-danger-zone .eyebrow { color: #a33; }
.button--danger { background: #a33; color: #fff; border-color: #822; }
.button--danger:hover { background: #822; }

/* T-V8: главная по vault-концепту — буллиты, боль, факты, состав доступа. */
.hero__bullets { list-style: none; margin: 20px 0; max-width: 560px; padding: 0; }
.hero__bullets li { padding: 5px 0 5px 30px; position: relative; font-weight: 500; }
.hero__bullets li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--of-soft, #e7f4ee); color: var(--of-accent-d, #0b7f57); font-size: .8rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pain { padding: 48px 20px; }
.pain p { max-width: 760px; color: var(--of-muted, #56635d); }
.pain h2 { margin-bottom: .8rem; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 14px; }
.fact { background: #fff; border: 1px solid var(--of-line, #e4e7ec); border-radius: 12px; padding: 20px 16px; text-align: center; }
.fact b { display: block; font-size: 1.6rem; color: var(--of-accent-d, #0b7f57); letter-spacing: -.02em; margin-bottom: 6px; }
.fact span { font-size: .88rem; color: var(--of-muted, #56635d); }
.facts-note, .includes-note { max-width: 760px; color: var(--of-muted, #56635d); font-size: .95rem; }
.includes-band .includes-list { list-style: none; margin: 18px 0 12px; max-width: 820px; padding: 0; }
.includes-list li { padding: 8px 0 8px 30px; position: relative; }
.includes-list li::before { content: "✓"; position: absolute; left: 2px; top: 8px; color: var(--of-accent-d, #0b7f57); font-weight: 700; }
.fact-result { font-weight: 600; color: var(--of-ink, #14211c); font-size: .95rem; margin-top: 8px; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; } }
/* Sprint 18 (T-V9/V10/V12/V13): honesty bands, fit grid, CTA microcopy, control links. */
.control-links { grid-column: 1 / -1; max-width: 760px; margin: 10px 0 0; color: var(--of-muted, #56635d); font-size: .95rem; }
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.fit-list { list-style: none; margin: 10px 0 0; padding: 0; color: var(--of-muted, #56635d); }
.fit-list li { padding: 6px 0 6px 26px; position: relative; }
.fit-list li::before { position: absolute; left: 2px; top: 6px; font-weight: 700; color: var(--of-accent-d, #0b7f57); }
.fit-grid .principle-card:first-child .fit-list li::before { content: "✓"; }
.fit-grid .principle-card:last-child .fit-list li::before { content: "–"; color: var(--of-muted, #56635d); }
.guarantee-band { background: #f2f8f4; border: 1px solid var(--of-line, #e4e7ec); border-radius: 24px; }
.guarantee-band .facts-note { max-width: 820px; }
.cta-note { max-width: 560px; margin: 14px auto 0; color: #cbd4cf; font-size: .92rem; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }
/* T-K1: metrics wall - today/total duo cells. */
.stat-duo .duo-row { display: flex; gap: 8px; margin-bottom: 10px; }
.stat-duo .duo-cell { flex: 1; }
.stat-duo .duo-cell b { display: block; font-size: 1.45rem; color: var(--of-accent-d, #0b7f57); letter-spacing: -.02em; }
.stat-duo .duo-cell i { display: block; font-style: normal; font-size: .78rem; color: var(--of-muted, #56635d); }
.stat-duo .duo-cell + .duo-cell { border-left: 1px solid var(--of-line, #e4e7ec); }
/* T-A18: employer logos on the grade showcase pages. */
.employer-logo { border-radius: 8px; background: #fff; object-fit: contain; border: 1px solid var(--of-line, #e4e9e6); }

/* T-S3: хабы тем /news-topic/<slug>/ */
.topic-hub h1 { margin-bottom: .4rem; }
.topic-hub__intro { color: var(--of-muted, #56635d); max-width: 720px; }
.topic-hub__others { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .95rem; }
.topic-hub__others a { color: var(--of-accent-d, #0b7f57); font-weight: 600; }

/* Спринт 26 (stream N): table of contents on long blog posts (ArticleToc). */
.article-toc { margin: 1.2rem 0 1.6rem; padding: .9rem 1.1rem; background: var(--of-surface, #f4f7f5); border: 1px solid var(--of-line, #e4e7ec); border-radius: 10px; }
.article-toc__title { margin: 0 0 .45rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--of-muted, #56635d); }
.article-toc__list { margin: 0; padding-left: 1.15rem; }
.article-toc__list li { margin: .18rem 0; }
.article-toc__list a { color: var(--of-accent-d, #0b7f57); text-decoration: none; }
.article-toc__list a:hover { text-decoration: underline; }

/* ============================================================
   ui-polish внедрение (этапы A+B+D, поток U3) — правила из
   docs/design/previews/ui-polish/*.html блок DELTA, префикс .next
   снят. Этап C (хедер-стекло/бургер) и E (лендинг) — позже.
   ============================================================ */

/* --- Этап A2. Устранение утечек палитры --- */
.account-chip { border-color: var(--of-line); background: var(--of-white); }
.account-chip__avatar { background: var(--of-green); }

.employer-mark { background: linear-gradient(145deg, #245844, #318160); box-shadow: 0 6px 18px rgba(20, 33, 28, .16); } /* лес */
.employer-mark--1 { background: linear-gradient(145deg, #8a5a1e, #b07c2f); } /* амбер-охра */
.employer-mark--2 { background: linear-gradient(145deg, #7a4034, #9d5f47); } /* терракота */
.employer-mark--3 { background: linear-gradient(145deg, #5a5f33, #7a7f45); } /* олива */
.employer-mark--4 { background: linear-gradient(145deg, #3f6b57, #5b8a70); } /* шалфей */
.employer-mark--5 { background: linear-gradient(145deg, #1f5f5a, #2f7d74); } /* тил */

.answer-readiness { color: var(--of-green-dark); background: linear-gradient(135deg, var(--of-mint-soft), #f6fbf8); }
.answer-readiness progress,
.answer-readiness progress::-webkit-progress-bar { background: var(--of-mint); }
.answer-readiness progress::-webkit-progress-value,
.answer-readiness progress::-moz-progress-bar { background: var(--of-green); }
.answer-preview__list span,
.canary-preview__answers dd { color: var(--of-green-dark); }
.answer-topic--ready { border-color: var(--of-mint-strong); }
.answer-topic--manual { border-color: var(--of-line); background: var(--of-surface-soft); }
.answer-topic--focused { border-color: var(--of-green-dark); box-shadow: 0 0 0 3px rgba(23, 107, 77, .12); }

/* --- Этап B. Движение (переходы, hover-физика) --- */
.button { box-shadow: var(--of-shadow-btn); transition: background-color var(--of-transition), color var(--of-transition), border-color var(--of-transition), box-shadow var(--of-transition), transform var(--of-transition); }
.button:hover { box-shadow: var(--of-shadow-btn-hover); }
.button:active { transform: scale(.98); }
.button--secondary:hover { border-color: var(--of-mint-strong); background: #f6faf7; }

.primary-nav a,
.app-nav a,
.of-sitemap ul a { transition: background-color var(--of-transition), color var(--of-transition); }
.primary-nav a:hover { background: var(--of-hover); }
.primary-nav a[aria-current="page"] { background: var(--of-mint-soft); color: var(--of-green-dark); font-weight: 800; }
.app-nav a:hover { background: var(--of-hover); }
/* длинные подписи меню (напр. «Ответы работодателям»): иконка по первой строке */
.app-nav a { align-items: flex-start; line-height: 1.25; }
.app-nav__marker { margin-top: .15rem; }
@media (max-width: 768px) { .app-nav a { align-items: center; } }
.chip { transition: background-color var(--of-transition), color var(--of-transition), border-color var(--of-transition); }

.principle-card,
.steps li,
.job-card.of-card { transition: transform 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1); }
.principle-card:hover,
.steps li:hover,
.job-card.of-card:hover { transform: translateY(-2px); box-shadow: var(--of-shadow-card-hover); border-color: var(--of-mint-strong); }

/* details: свой chevron + плавное появление контента */
.faq-list summary,
.answer-topics summary,
.canary-preview summary { list-style: none; }
.faq-list summary::-webkit-details-marker,
.answer-topics summary::-webkit-details-marker,
.canary-preview summary::-webkit-details-marker { display: none; }
.faq-list summary { position: relative; padding-right: 3rem; }
.faq-list summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--of-green); border-bottom: 2px solid var(--of-green); transform: translateY(-70%) rotate(45deg); transition: transform var(--of-transition); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-list details[open] p { animation: of-fade-slide 200ms cubic-bezier(.4, 0, .2, 1); }

/* прогресс: единая кастомная полоса вместо accent-color */
.activation-card > progress { -webkit-appearance: none; appearance: none; height: .55rem; overflow: hidden; border-radius: 999px; background: var(--of-mint); }
.activation-card > progress::-webkit-progress-bar { background: var(--of-mint); border-radius: 999px; }
.activation-card > progress::-webkit-progress-value { background: var(--of-green); border-radius: 999px; }
.activation-card > progress::-moz-progress-bar { background: var(--of-green); border-radius: 999px; }

/* цифры не прыгают */
.kpi strong,
.activation-card__head > strong,
.app-nav__badge,
.answer-readiness strong { font-variant-numeric: tabular-nums; }

/* --- Этап D. Паттерны кабинета --- */
.of-tile { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: var(--of-mint); color: var(--of-green-dark); }
.of-tile .of-icon { width: 20px; height: 20px; }
.of-tile--lg { width: 44px; height: 44px; border-radius: 14px; }
.of-tile--lg .of-icon { width: 24px; height: 24px; }
.of-card__head { display: flex; align-items: center; gap: .8rem; }
.of-card__head .eyebrow { margin: 0; }
.of-card__head h2, .of-card__head h3 { margin: 0; }
.app-nav__group { display: block; padding: .85rem .75rem .25rem; color: var(--of-muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.app-nav .app-nav__group:first-child { padding-top: .3rem; }
@media (max-width: 768px) { .app-nav .app-nav__group { display: none; } }
.of-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; }
.of-section-head h2 { margin: 0; }
.text-link--arrow::after { content: "→"; margin-left: .35rem; display: inline-block; transition: transform var(--of-transition); }
.text-link--arrow:hover::after { transform: translateX(3px); }
.of-empty { display: grid; justify-items: center; gap: .65rem; padding: 2.2rem 1.2rem; text-align: center; }
.of-empty h3 { margin: 0; }
.of-empty p { margin: 0; max-width: 44ch; color: var(--of-muted); }
.of-empty .button { margin-top: .5rem; }

@keyframes of-fade-slide { from { opacity: 0; transform: translateY(-4px); } }