/*
 * THE LAYOUT OF THE NEW PUBLIC PAGES.
 *
 * ⚠⚠ IT IS A SEPARATE FILE BECAUSE `front.css` IS THE DESIGN'S OWN `bundle.css` BYTE FOR BYTE and a test
 * holds it to that, so that a change in the design tool can be re-exported and dropped straight in. That
 * file owns the components — type, buttons, cards, tiers, tables. This one owns how they are arranged, and
 * it is ours.
 *
 * ⚠⚠⚠ EVERY CLASS NAME THE PAGES WRITE MUST BE DEFINED HERE OR IN ONE OF THOSE TWO FILES.
 * `EveryClassTheNewSiteWritesIsDefinedTest` renders the page and fails on any name it cannot find in a
 * stylesheet. A class that is named in markup and defined nowhere renders unstyled, never fails, and has
 * cost this project three separate afternoons.
 *
 * ⚠⚠ LOGICAL PROPERTIES THROUGHOUT — `margin-inline-start`, `padding-inline`, `inset-inline-end` — so that
 * Persian mirrors on its own rather than by a second set of rules somebody has to remember to write. The
 * one place a physical property is overridden is the design's own `.o-stat`, which draws a `border-left`.
 *
 * ⚠ The grid is the design system's: 1200 wide, margins 120 / 40 / 16, sections 120 / 80 / 64 tall, and the
 * spacing steps are the `--space-*` tokens rather than typed pixels.
 */

/*
 * ⚠⚠⚠ WHY THESE RULES CARRY `.o-root` AND THE REST OF THIS FILE DOES NOT — 2026-09-21, AND IT IS THE
 * WHOLE REASON THE HOME PAGE DID NOT MATCH THE DESIGN.
 *
 * `front.css` is the design's own bundle, byte for byte, and it contains:
 *     .o-root h1,.o-root h2,.o-root h3,.o-root h4,.o-root p { margin: 0 }
 * That is specificity **0-1-1** (a class and a type). Every layout rule in this file written as a single
 * class is **0-1-0** — so on a heading or a paragraph it LOSES, silently. The rule parses, the browser
 * applies everything else in it (`max-width` survived; the margin did not), and nothing anywhere fails.
 *
 * ⚠⚠ THE DESIGN DOES NOT HIT THIS because it applies its spacing as INLINE `style=` attributes — 371 of
 * them on the Home page alone — and an inline style outranks any selector. The site re-expressed the same
 * numbers as classes, which is the right thing to do, and lost every one of them to the designer's reset.
 * **Measured, not reasoned: `.p-sec__lead` asks for `margin-block: 16px 40px` and computed 0px on the live
 * page, while a fresh <p> given the identical declaration computed 16px.**
 *
 * ⚠ `.o-root` IS THE BODY CLASS ON EVERY FRONT PAGE (`views/layouts/front.php`), including the legal
 * pages, which have no `.p-page` wrapper — so scoping to `.p-page` would have fixed five pages and broken
 * the sixth. Prefixing raises these to 0-2-1 and changes nothing else.
 * ⚠⚠ THE LIST IS DERIVED, NOT KEPT BY HAND: `TheLayoutRulesOutrankTheDesignsResetTest` re-derives every
 * class that lands on an h1-h4 or p and fails on any margin rule of ours that would lose. A hand-kept list
 * of thirteen is exactly the shape this project has been bitten by.
 */

/* ── the page, and the one gutter every section shares ─────────────────────────────────────────────── */

/*
 * ⚠ THE BROWSER'S OWN BODY MARGIN IS EIGHT PIXELS A SIDE AND THE DESIGN'S STYLESHEET DOES NOT CLEAR IT.
 * Left alone it makes every section sixteen pixels narrower than drawn — measured at 1 184 against the 1 200
 * the grid asks for, which is exactly the sort of difference nobody sees and every column inherits.
 */
body { margin: 0; }

.p-page { background: var(--background); color: var(--text-primary); }

/*
 * ⚠⚠ THE MARGINS SIT OUTSIDE THE CONTAINER, NOT INSIDE IT. The design system gives a container of 1200
 * and a page margin of 120, and its own pages draw a section as `padding: 0 120px` on a 1440 canvas — 1200
 * of content. Written as `max-width: 1200` PLUS `padding-inline: 120` the content comes out 960, which is
 * what this file said at first: every section 240 pixels narrower than drawn, measured in a browser rather
 * than noticed by reading.
 */
.p-shell {
    max-width: calc(var(--container-max) + 2 * var(--margin-desktop));
    margin-inline: auto;
    padding-inline: var(--margin-desktop);
}
.p-shell--narrow { max-width: calc(860px + 2 * var(--margin-desktop)); }

.p-main { display: block; }

.p-sec { padding-block: var(--space-30) 0; }

/*
 * ⚠⚠ THE TWO FULL-BLEED BANDS, AND THEY WERE MISSING ENTIRELY — measured 2026-09-21 against the design:
 * «Опыт экспертов» is drawn on **#09152A across the full 1440**, and «Мы управляем риском» on
 * **#F7F9FB**; the site had no background on either. They also carry 120 of padding at BOTH ends, where
 * `.p-sec` gives 120 and 0 — which is where 240 of the page's missing height was.
 * ⚠ The dark band's text colours are the design's own: white headings, --slate-300 body, --blue-300 links.
 */

/*
 * ⚠⚠⚠ AND THE LIGHT CARDS INSIDE THE DARK BAND KEEP THEIR OWN COLOURS. The first version of the band
 * set its text colours on the SECTION, which reached straight into the white `.o-card` stages — measured
 * immediately afterwards: **eleven pieces of text under 4.5:1, seven of them WHITE ON WHITE and therefore
 * invisible.** A defect I introduced and then found, in that order, by measuring contrast rather than
 * trusting the screenshot I had just looked at.
 * ⚠ The chips are light too, and so is anything the design puts on a card.
 */ .p-sec--dark .p-chip { color: var(--text-primary); } .p-sec--dark .p-flow__name { color: var(--text-primary); } .p-sec--dark .p-chip { color: var(--text-secondary); }

/* ⚠ the footer's eyebrows and legal type were still on the light theme's tokens — --link and
   --text-secondary on navy measure 2.4:1 and 2.5:1. The design uses --slate-350 for both. */
.o-root .p-sec__lead { max-width: var(--measure); margin-block: var(--space-4) var(--space-12); }

/* ── the header ────────────────────────────────────────────────────────────────────────────────────── */

/*
 * ⚠⚠ THE HEADER IS OURS, NOT THE DESIGN'S `.o-header`. That component is a complete header for a page with
 * no container of its own — it carries `padding: 0 40px` and a fixed 80-pixel height — so wrapping our own
 * shell in it indented the header forty pixels further than every other section and put two flex containers
 * in a row. Measured at 1 155 of content where the rest of the page had 1 184. The parts INSIDE it are
 * still the design's: the navigation, the language chip and the two buttons.
 */
/*
 * ⚠⚠ `[hidden]` IS MADE TO STICK, AND IT HAS TO BE. From piece 6 the calculator draws all five level
 * badges and all five share sentences and hides four of each, and the script shows the one the answer table
 * names. The design's own stylesheet gives `.o-tier` `display: inline-flex`, which BEATS the browser's
 * built-in `[hidden] { display: none }` — so without this rule the card would show five levels at once and
 * every test that reads the finished page would still be green, because the markup would be exactly right.
 */
[hidden] { display: none !important; }
/* ⚠ The design: after a little scrolling the header lifts off the text. The script adds this class and
   nothing else; how far "a little" is comes from the page, never from the script. */

/* the language control: the browser's own opener, so this control needs no script even now that one exists */

/*
 * ── the phone menu ────────────────────────────────────────────────────────────────────────────────────
 * ⚠⚠ NO SCRIPT. It is the browser's own opener, exactly like the language chip above and the questions
 * block — which is why piece 6's script is the two calculators and the header's shadow and nothing else.
 * ⚠ `.o-burger`, `.o-mobile-sheet` and `.o-mobile-sheet__link` are the DESIGN's own, already in its
 * stylesheet since the archive landed; only the markup had never been drawn.
 */
/* ⚠ Full width and wrapping — the design's own long-language rule, which German will need everywhere. */

/* ── the hero ──────────────────────────────────────────────────────────────────────────────────────── */

.p-hero { padding-block: 72px var(--space-24); background: var(--gradient-hero); }
.p-hero__inner {
    display: grid;
    /* ⚠ THE DESIGN GIVES THE TEXT A FIXED 760 AND THE ART THE REST. Written as 1.05fr the text
       column came out ~600 and the Russian headline wrapped to FIVE lines against the design's
       three — 205px of the page's difference, and the largest single block left. */
    grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
}
.p-hero__text { min-width: 0; }
/* ⚠ 44/54, THE DESIGN'S OWN OVERRIDE of `.o-display`. The site drew `.o-h1` at 48/56, which is a
   different rung and wraps differently. `white-space: nowrap` is deliberately NOT copied: the design
   can afford it on a 1440 canvas it controls, and a public page cannot. */
.o-root .p-hero__title { margin: 0; font: 700 44px/54px var(--font-head); letter-spacing: -0.02em; }
.p-hero__title span { display: block; }
.o-root .p-hero__lead { max-width: var(--measure); margin-block: var(--space-6) var(--space-8); }
.p-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-10); }
.p-hero__art img { display: block; width: 100%; height: auto; }

/* ── the statistics band ───────────────────────────────────────────────────────────────────────────── */
/* ⚠ the design's own rule draws a physical left border; mirrored here so Persian divides correctly */
/* the small qualifier the fourth cell puts ABOVE its figure */
/* ⚠ a CAPTION in the big slot may wrap; a figure never may. See the view for the measurement. */

/* ── cards, in the three arrangements the page uses ────────────────────────────────────────────────── */

.p-grid { display: grid; gap: var(--space-6); }
.p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.p-card { padding: var(--space-6); }
.o-root .p-card__head { margin: var(--space-4) 0 0; }
.o-root .p-card__text { margin: var(--space-2) 0 0; color: var(--text-secondary); }

/* ── how it works ──────────────────────────────────────────────────────────────────────────────────── */

.p-steps__list { margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.p-step { display: flex; flex-direction: column; }
.p-step__art {
    display: block;
    width: 100%;
    height: auto;
    margin-block: var(--space-4) 0;
    border-radius: var(--radius-md);
}

/* ── the analysts and the machine ──────────────────────────────────────────────────────────────────── */

.p-experts { margin-block-start: var(--space-8); }
.p-experts__prose { max-width: var(--measure); }
.p-experts__prose p { margin-block: 0 var(--space-4); color: var(--text-secondary); }
.p-flow__stage { flex: 1 1 220px; padding: var(--space-5); }
.o-root .p-flow__name { margin-block: var(--space-3) 0; font: 700 18px/24px var(--font-head); }
.p-flow__stage p { margin-block: var(--space-1) 0; color: var(--text-secondary); }
/* ⚠ a directional icon mirrors with the page; the design system asks for exactly this */

.p-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4) 0;
    padding: 0;
    list-style: none;
}
.p-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    color: var(--text-secondary);
    font: 500 13px/20px var(--font-body);
}

/* ── managing risk ─────────────────────────────────────────────────────────────────────────────────── */

.p-risk__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
    margin-block-start: var(--space-12);
}
.p-risk__art img { display: block; width: 100%; height: auto; }
.p-risk__cards { display: grid; gap: var(--space-4); }
.p-risk__card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }
.p-risk__card .o-icon-tile { flex: none; margin: 0; }

/* ── the daily report's column headings ────────────────────────────────────────────────────────────── */

/* ── the income calculator, in the state it opens in ───────────────────────────────────────────────── */
.p-calc__field { margin-block-start: var(--space-5); }
.p-calc__amount { margin-block-start: var(--space-2); font: 600 20px/28px var(--font-head); }
.p-calc__slider { width: 100%; margin-block: var(--space-3) 0; accent-color: var(--accent); }
.p-calc__bounds { display: flex; justify-content: space-between; margin-block-start: var(--space-1); }
.p-calc__result {
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.p-calc__resultHead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.p-calc__income { margin-block-start: var(--space-2); font: 700 48px/1.1 var(--font-head); }

/* ── the press row ─────────────────────────────────────────────────────────────────────────────────── */

.p-press { margin-block-start: var(--space-8); }
.p-press__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
}
.p-press__outlet {
    font: 700 17px/20px var(--font-head);
    letter-spacing: -0.01em;
    color: var(--text-muted);
}
.o-root .p-press__head { display: block; margin-block: var(--space-4) var(--space-4); flex-grow: 1; }
.p-press__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.p-press__read { color: var(--link); font: 600 15px/22px var(--font-body); }
.p-press__domain { color: var(--text-muted); }

/* ── the three paths ───────────────────────────────────────────────────────────────────────────────── */

/* ── questions and answers ─────────────────────────────────────────────────────────────────────────── */

.p-faq { margin-block-start: var(--space-8); }
.p-faq__item { border-block-end: 1px solid var(--divider); }
.p-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    cursor: pointer;
    list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q:hover { color: var(--link); }
.p-faq__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--link);
    transition: transform 240ms ease;
}
.p-faq__item[open] .p-faq__mark { transform: rotate(45deg); }
.o-root .p-faq__a { margin: 0 0 var(--space-5); max-width: var(--measure); color: var(--text-secondary); }

/* ── the closing call ──────────────────────────────────────────────────────────────────────────────── */

.p-cta {
    padding: var(--space-16) var(--space-12);
    border-radius: var(--radius-xl);
    background: var(--brand-navy-900);
    color: var(--brand-white);
    text-align: center;
}
.o-root .p-cta__title { margin: 0; color: var(--brand-white); }
.o-root .p-cta__lead { margin-block: var(--space-4) var(--space-8); color: var(--slate-300); }

/* ── the footer ────────────────────────────────────────────────────────────────────────────────────── */

/*
 * ⚠⚠ THE FOOTER IS NAVY, NOT GREY. All five design pages draw `<footer style="background: #09152A">`;
 * the site drew `--surface-alt`, which is the pale grey. Its text colours are the design's own, and they
 * are the same four it uses in the dark band above.
 * ⚠ THIS IS A SHARED COMPONENT: the change reaches the other four public pages' footers too, which is
 * correct — the design draws them identically — but it is more than the Home page.
 */
/* ⚠ the three legal documents do not exist yet, so these are words rather than doors — see HomeData */

/* ── piece 5: the four other pages ─────────────────────────────────────────────────────────────────── */

/*
 * ⚠⚠ EVERY NAME BELOW IS WRITTEN BY A PAGE AND MUST BE DEFINED, and every rule below must actually declare
 * something — `EveryClassTheNewSiteWritesIsDefinedTest` renders all five pages and refuses both an undefined
 * name and an EMPTY rule, because a hollow rule is the easy way to turn a red board green while the class
 * stays inert. Logical properties throughout, so Persian mirrors on its own.
 */

.p-gap-top { margin-block-start: var(--space-10); }

/* the statistics band that sits under a hero, used by four of the five pages */
.p-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    padding-block: var(--space-10);
    border-block-start: 1px solid var(--divider);
    margin-block-start: var(--space-10);
}
.p-band__cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.p-band__above { font: 600 13px/16px var(--font-head); color: var(--text-secondary); }
.p-band__n { font: 700 28px/1.15 var(--font-head); letter-spacing: -0.02em; }
.p-band__l { font: 500 14px/20px var(--font-body); color: var(--text-secondary); }

/* the picture some cards carry above their heading */
.p-card__art { display: block; width: 112px; height: 112px; margin-block-end: var(--space-4); }
.p-card--figure { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── the tier ladder ───────────────────────────────────────────────────────────────────────────────── */

.p-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.p-tier { display: flex; flex-direction: column; align-items: center; padding: var(--space-6) var(--space-5); }
.p-tier__art { display: block; width: 88px; height: 88px; margin-block-end: var(--space-4); }
.p-tier__head { text-align: center; }
.p-tier__range { margin-block-start: var(--space-1); font: 600 17px/24px var(--font-head); color: var(--text-secondary); }
.p-tier__shares {
    width: 100%;
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--divider);
    text-align: center;
}
.p-tier__client { font: 700 32px/1.15 var(--font-head); color: var(--link); }
.p-tier__company { margin-block-start: var(--space-1); color: var(--text-secondary); }

.p-notes { margin-block: var(--space-6) 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.p-notes li { color: var(--text-secondary); }
.p-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--text-primary);
}
.p-note svg { flex: none; color: var(--link); margin-block-start: 2px; }

/* ── the full income calculator ────────────────────────────────────────────────────────────────────── */

.p-fullcalc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    margin-block-start: var(--space-10);
    padding: var(--space-8);
}
.p-fullcalc__controls { min-width: 0; }
.p-fullcalc__result { min-width: 0; padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-alt); }
.p-fullcalc__lines { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-4); }
.p-fullcalc__line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.p-fullcalc__line .o-num { white-space: nowrap; color: var(--text-primary); }
.p-fullcalc__less { color: var(--text-secondary); }
.p-fullcalc__totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block-start: var(--space-5); }
.p-fullcalc__total { padding: var(--space-4); border: 1.5px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.p-fullcalc__big { margin-block-start: var(--space-1); font: 700 32px/40px var(--font-head); letter-spacing: -0.02em; }
.p-fullcalc__cta { display: flex; justify-content: center; margin-block-start: var(--space-8); }

.p-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
/* ⚠ A real button from piece 6 — it moves the slider to a position the answer table already holds.
   `is-active` marks the chosen one; it is the site's own class and the script only ever moves it. */
.p-quick__pick { cursor: pointer; }
.p-quick__pick.is-active { border-color: var(--accent); color: var(--link); }

.p-compare { margin-block-start: var(--space-10); }

/*
 * ── the analyst application ───────────────────────────────────────────────────────────────────────────
 * ⚠⚠ THE REFUSAL STATES ARE DEFINED HERE BECAUSE A CLASS NAMED IN MARKUP AND DEFINED NOWHERE RENDERS
 * UNSTYLED — this project's purest silent defect, met three times. `is-error` marks WHICH field was
 * refused; without it the reader gets a sentence and no idea where to look.
 * ⚠ They are drawn only on a refusal, so the sweep that reads the finished page never sees them at rest —
 * `TheAnalystFormSubmitsOnlyToUsTest` asserts each of them is defined, for that reason.
 */
.p-form__field.is-error .o-input,
.p-form__field.is-error .o-select,
.p-form__field.is-error .o-textarea { border-color: var(--error-text); }
.p-form__error { display: block; margin-block-start: var(--space-1); color: var(--error-text); }
.p-form__consent.is-error { color: var(--error-text); }
.p-form__failed { margin-block-end: var(--space-5); color: var(--error-text); }
.p-form__sent { color: var(--text-primary); }
.p-form--sent { display: flex; justify-content: center; }

/* ⚠ The picture sits between its label and its box, so the three read as one control. It is 120×50 as the
   framework draws it, and the size is stated in the markup as well so the page does not jump while it
   loads. */
.p-form__captcha { align-items: flex-start; }
.p-form__picture {
    display: block;
    margin-block: var(--space-2);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-xs);
    background: var(--surface);
}

/* ── the client stories ────────────────────────────────────────────────────────────────────────────── */

.p-story { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.p-story__who { display: flex; align-items: center; gap: var(--space-3); }
.p-story__face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--link);
}
.p-story__name { display: block; font: 700 16px/22px var(--font-head); }

/* ── the founder, the register and the experts blocks on «О компании» ──────────────────────────────── */

.p-founder { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.p-founder__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    aspect-ratio: 4 / 5;
    border: 1.5px dashed var(--border-input);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-5);
}
.p-founder__who { min-width: 0; }
.o-root .p-founder__role { margin-block: var(--space-2) var(--space-5); color: var(--text-secondary); }
.p-founder__quote {
    margin: var(--space-6) 0 0;
    padding: var(--space-5) var(--space-6);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}
.p-founder__quote svg { color: var(--accent); margin-block-end: var(--space-2); }

.p-experts__count { padding: var(--space-6); }
.p-experts__point { margin-block-end: var(--space-6); }
.p-experts__point h3 { margin: 0 0 var(--space-2); }

.p-registry { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8); margin-block-start: var(--space-10); }
.p-registry__art { display: block; width: 100%; height: auto; }
.p-registry__list { margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.p-registry__row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--space-4); }
.p-registry__row dt { color: var(--text-secondary); }
.p-registry__row dd { margin: 0; }
.p-registry__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-block-start: var(--space-4);
    color: var(--link);
    font: 600 15px/22px var(--font-body);
    text-decoration: none;
}
.p-registry__link:hover { text-decoration: underline; }

/* ── the partners page ─────────────────────────────────────────────────────────────────────────────── */

.p-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; margin-block-start: var(--space-10); }
.p-example__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.p-example__did { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface); }
.p-example__did p { margin: 0; }
.p-example__reward { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--blue-50); }
.p-example__reward p { margin: 0; color: var(--accent-pressed); }

.p-partcalc { padding: var(--space-8); }
.p-partcalc__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.p-partcalc__out { font: 700 20px/28px var(--font-head); color: var(--link); }

.p-why { padding: var(--space-8); text-align: center; }
.p-why .o-icon-tile { margin-inline: auto; }
.p-why h2 { margin-block: var(--space-4) var(--space-3); }
.p-why p { margin: 0; color: var(--text-secondary); }

/* ── the analysts page and its inert application ───────────────────────────────────────────────────── */

.p-hero__figures { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-6) var(--space-6); }

.p-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); padding: var(--space-8); margin-block-start: var(--space-8); }
.p-form__group { grid-column: 1 / -1; margin-block-start: var(--space-4); }
.p-form__field { margin: 0; min-width: 0; }
.p-form__field--wide { grid-column: 1 / -1; }
.p-form__consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--space-3); }
.p-form__check { flex: none; width: 20px; height: 20px; margin-block-start: 2px; accent-color: var(--accent); }
.p-form__send { grid-column: 1 / -1; justify-self: start; }
.p-form .o-legal { grid-column: 1 / -1; margin: 0; }

.p-cta--light { background: var(--surface-alt); color: var(--text-primary); }
.p-cta--light .o-h2 { color: var(--text-primary); }

/* ── the tablet and the phone, for everything piece 5 added ────────────────────────────────────────── */

@media (max-width: 1023px) {
    .p-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-fullcalc { grid-template-columns: minmax(0, 1fr); }
    .p-founder { grid-template-columns: minmax(0, 1fr); }
    .p-registry { grid-template-columns: minmax(0, 1fr); }
    .p-example { grid-template-columns: minmax(0, 1fr); }
    .p-registry__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

@media (max-width: 767px) {
    .p-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
    .p-grid--5 { grid-template-columns: minmax(0, 1fr); }
    .p-fullcalc { padding: var(--space-5); }
    .p-fullcalc__totals { grid-template-columns: minmax(0, 1fr); }
    .p-form { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
    .p-hero__figures { gap: var(--space-5); }

    /*
     * ⚠⚠ ON A PHONE A BUTTON GOES FULL WIDTH AND ITS WORDS MAY WRAP. The design's own `.o-btn` is
     * `white-space: nowrap`, which is right on a wide screen and is what pushed «For analysts — terms and
     * application →» 348 pixels wide inside a 303-pixel column — **the only thing making the About page
     * scroll sideways at 375, and it was a BOX rather than ink, so the ink sweep could not see it.** The
     * design system's own long-language note asks for exactly this: button rows wrap, and on mobile buttons
     * go full width. ⚠ It is also what German will need on every page.
     */
    .p-cta .o-btn,
    .p-hero__cta .o-btn {
        width: 100%;
        white-space: normal;
        height: auto;
        min-height: 52px;
        padding-block: var(--space-3);
    }
}

/* ── Persian ───────────────────────────────────────────────────────────────────────────────────────── */

/*
 * ⚠⚠ THE MIRRORING IS AUTOMATIC; THE TYPOGRAPHY IS NOT. Every rule above uses logical properties, so the
 * page turns round on its own — measured: the Persian characters of a sentence descend right to left and a
 * money figure inside one still reads left to right. But the design system's RTL note asks for four things
 * mirroring alone does not give, and without them Persian was only reaching Vazirmatn by FONT FALLBACK,
 * behind Raleway and Onest, with Latin line-heights and Latin letter-spacing.
 *
 * ⚠ The eyebrow is the one that would look like a bug rather than a nuance: the design sets it in capitals
 * with wide letter-spacing, and Persian has no capitals — so the rule asks for bold instead.
 */
/*
 * ⚠ THE TYPE CLASSES HAVE TO BE NAMED. Setting the family on the page alone changed the headings and left
 * every paragraph reading "Raleway, Vazirmatn" — the design's own `.o-lead`, `.o-body` and the rest declare
 * a family of their own, so Persian was arriving in Vazirmatn only because Raleway has no Persian glyphs and
 * the browser fell through to it. Measured, not assumed. ⚠ `.o-num` is deliberately NOT in this list: the
 * figures stay Latin in all seven languages by the owner's ruling, and Onest is what makes them line up.
 */
[dir="rtl"] .p-page,
[dir="rtl"] .p-page .o-display,
[dir="rtl"] .p-page .o-lead,
[dir="rtl"] .p-page .o-body,
[dir="rtl"] .p-page .o-small,
[dir="rtl"] .p-page .o-caption,
[dir="rtl"] .p-page .o-legal,
[dir="rtl"] .p-page .o-label,
[dir="rtl"] .p-page .o-meta,
[dir="rtl"] .p-page .o-btn,
[dir="rtl"] .p-page .o-nav a { font-family: var(--font-fa); }
[dir="rtl"] .p-page h1,
[dir="rtl"] .p-page h2,
[dir="rtl"] .p-page h3,
[dir="rtl"] .p-page h4 { font-family: var(--font-fa); letter-spacing: normal; line-height: 1.35; }
[dir="rtl"] .p-page p,
[dir="rtl"] .p-page li { line-height: 1.9; }
[dir="rtl"] .o-eyebrow { text-transform: none; letter-spacing: normal; font-weight: 700; }

/* ── the tablet ────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .p-shell { padding-inline: var(--margin-tablet); }
    .p-sec { padding-block-start: var(--space-20); }
    .p-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .p-grid--3, .p-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-risk__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ── the phone ─────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .p-shell { padding-inline: var(--margin-mobile); }
    .p-sec { padding-block-start: var(--space-16); }
    /*
     * ⚠⚠ THE PHONE HAS ITS OWN NUMBERS AND THEY ARE NOT THE DESKTOP'S SCALED DOWN — read from the
     * design's own `home-mobile.html`: sections 64/16, the hero 40 16 48, its heading 31/37, the button
     * row 28 above with a 12 gap, and the last section 64 at the bottom.
     * ⚠⚠⚠ AND THE STATS CARD DOES **NOT** OVERLAP ON A PHONE: the mobile design gives it
     * `padding: 32px 16px 0` and no negative margin. Left alone, the desktop's -40 would have pulled it
     * over the hero at every width.
     */
    .p-hero { padding-block: var(--space-10) var(--space-12); }
    .o-root .p-hero__title { font: 700 31px/37px var(--font-head); letter-spacing: -0.015em; }
    .p-hero__cta { gap: var(--space-3); margin-block-start: 28px; }
    /* ⚠ the design's mobile footer is 40 above and 28 below, and sits 64 under the last section — which
       the site reaches as a margin rather than that section's padding, to the same 64 on screen. */
    /*
     * ⚠⚠ THE PHONE HEADER IS THE DESIGN'S: logo, the primary button, the burger. The wide navigation and
     * the two bar buttons go away and the sheet carries them instead — the same captions, drawn twice,
     * because one set cannot be both a row in a bar and a column in a sheet without a script to move it.
     */
    /*
     * ⚠ THE LANGUAGE MENU HANGS OFF THE LEFT EDGE ON A PHONE IF IT STAYS ANCHORED TO THE CHIP'S END.
     * Measured with the menu OPEN at 375: it spanned −55 to 113, fifty-five pixels outside the screen, and
     * closed it showed nothing at all. A control is only measurable in the state a reader puts it in.
     */
    /* ⚠ the design's StatStrip says the phone shows two by two, not a single column */
    .p-grid--3, .p-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .p-calc__income { font-size: 40px; }
    .p-cta { padding: var(--space-10) var(--space-5); }
}

/* ── THE LONG-LANGUAGE RULE ─────────────────────────────────────────────────────────────────────
   ⚠⚠⚠ IT LIVES HERE, IN OUR OWN STYLESHEET, AND NOT IN front.css. I put it in front.css first and
   TheFrontTokensComeFromTheDesignRecordTest caught it: front.css IS the design archive's
   css/bundle.css byte for byte, copied and never edited, so that a fresh export can be dropped
   straight in. The moment somebody "just fixes one thing" there, the archive stops being the record
   of what the site looks like and the next export silently undoes the fix. The test says what to do
   instead, in as many words: give the change its own stylesheet with its own name. pages.css is
   ours and loads AFTER front.css, so it wins without touching the design's file.

   THE RULE IS THE DESIGN SYSTEM'S OWN — design-system/components/GermanLength and
   guidelines/40-multilingual-rtl.md both say it: `hyphens: auto` with the correct `lang`, heights
   grow, TYPE SIZE IS NEVER REDUCED PER LANGUAGE. <html lang> follows the reader on the new site, so
   `auto` has the dictionary it needs.

   ⚠⚠ IT WAS NEVER A GERMAN PROBLEM. Measured 2026-09-19 across five pages, three languages and
   three widths, box and ink: RUSSIAN 16 words hanging outside their box, GERMAN 14, ENGLISH 3, the
   worst of all Russian's «Профессиональный» at 81.6px on the LIVE Home page. All at 1024 and
   nowhere else, and no page ever gained a sideways scrollbar, which is why nothing complained. */
/* ⚠⚠⚠ THE TWO BANDS ARE MEASURED, NOT CHOSEN. The owner's rule: a rule that earns nothing still
   costs something. So it is on only where it is needed, and "needed" was found by turning it OFF
   and measuring every page in RU, DE and EN at sixteen widths:

        320  RU 4 words out (worst +31)   DE 1 out (+18, «Obergrenze»)
        340  RU 2 (+21)                   DE 1 (+8)
        360  RU 1 (+11)                   DE clean
        375  RU 1 (+3)                    DE clean
        390 .. 1010                       ALL THREE CLEAN
       1024  RU 16 (+82, «Профессиональный»)  DE 14 (+36, «Staatsbürgerschaft»)  EN 3 (+3)
       1100  RU 7 (+43)                   DE 4 (+17)
       1200  RU 3 (+18)
       1280  RU 1 (+2)
       1300 .. 1600                       ALL THREE CLEAN

   ⚠⚠ SO THE PHONE IS NOT CLEAN AFTER ALL — just not at 390, which is the width we had been testing.
   At 375 and below Russian needs it and at 340 and below German does too. The boundaries sit just
   outside the last width measured as failing and just short of the first measured clean.

   ⚠⚠⚠ AND BECAUSE THE RULE IS NOW CONFINED, THE MEASUREMENT MUST COVER THE WHOLE RANGE. A recorded
   measurement at three widths would be blind at exactly the widths where the rule no longer
   applies. measure-overflow.py records twelve widths for that reason, and they bracket both bands
   AND both clean shoulders. If the text changes the bands can move, and that is what the guard is
   for. */
@media (max-width:389px), (min-width:1011px) and (max-width:1299px) {
    .o-root{overflow-wrap:break-word}   /* hyphens: auto removed 2026-09-21 - see the end of this file */
}

/* ⚠⚠⚠ AND THE FIGURES COME STRAIGHT BACK OUT OF BOTH OF THEM. A MONEY FIGURE IS NEVER BROKEN.
   Putting overflow-wrap on the root cut «24,3%» across two lines — 214px then 82px — and the tell
   was that the fault count went DOWN, three to zero: a figure cut in half no longer hangs out of
   its box. An instrument that counts faults can report an improvement when the fault has turned
   into a worse one it does not count. A figure hanging out of its box is a sizing question on the
   owner's list; a figure cut in half is a lie about money. */
/* ⚠⚠⚠ ONLY overflow-wrap COMES OFF, NOT hyphens, AND THE DIFFERENCE IS A REAL DEFECT I SHIPPED FOR
   AN HOUR. `.o-num` is the figure FONT, and it is worn by prose too: «Obergrenze» and «Одинаково»
   sit in `o-num p-band__n` on the partners page. Setting `hyphens: none` on the class disabled
   hyphenation for those WORDS, and at 320px they hung 18px and 15px outside their box with
   `hyphens=none` recorded beside them. A rule that selects by CLASS cannot tell a figure from a
   word; only the CONTENT can, which is how the measurement does it.
   `overflow-wrap` is the one that had to go: it is what cut «24,3%» in half. `hyphens: auto` is
   harmless on a figure — hyphenation works from a dictionary of words and «24,3%» is not in one. */
.o-root .o-num{overflow-wrap:normal;word-break:normal}

/* ⚠⚠ `overflow-wrap: break-word` above is MINE and is NOT in the design system. `hyphens: auto`
   alone removed 33 of the 34; the 34th is Russian's «статистика».» — a word glued to a closing
   guillemet and a full stop, which hyphenation will not break at all (measured: hyphenate-limit-
   chars changes nothing; overflow-wrap takes 92.6px to 89.6 in a 91px box). It is a LAST RESORT:
   where hyphenation can break a word, hyphenation still wins. Without it the guard would have to
   tolerate 1.6px, and a guard loosened to let a change through is not a guard. It comes out the
   day the owner says so, and then that 1.6px needs a ruling of its own. */

/* ══ THE LEGAL DOCUMENTS ════════════════════════════════════════════════════════════════════════
   /new/risk, /new/privacy, /new/cookies. One view draws all three; the document decides the rest.
   ⚠ Every class the view writes is defined here with a real rule. An empty rule does not count as
   a definition, and a class named in markup and defined nowhere renders unstyled without ever
   failing — three instances of that on this project already. */
.p-legal{padding-bottom:var(--space-10)}
.p-legal__shell{max-width:760px}
.o-root .p-legal__title{margin-bottom:var(--space-6)}
.o-root .p-legal__fallback{margin-bottom:var(--space-6);color:var(--text-muted)}
.p-legal__body{display:block}
.o-root .p-legal__body > * + *{margin-top:var(--space-4)}
.o-root .p-legal__h2{margin-top:var(--space-8)}
.o-root .p-legal__h3{margin-top:var(--space-6)}
.o-root .p-legal__h4{margin-top:var(--space-5)}
.p-legal__p{color:var(--text-primary)}
.p-legal__list{padding-left:22px;list-style:disc}
.p-legal__list li{margin-top:6px}
.p-legal__rule{border:0;border-top:1px solid var(--divider);margin:var(--space-8) 0}
.p-legal__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
    background:var(--brand-grey-100);border-radius:4px;padding:1px 5px}
/* ⚠⚠ A TABLE GETS ITS OWN SIDEWAYS SCROLLER AND THAT IS NOT A DETAIL. A four-column cookie table
   cannot fit at 320px, and without this the whole page would scroll sideways instead. The overflow
   measurement excludes anything inside its own scroller for exactly this reason. */
.p-legal__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ⚠⚠ HYPHENATION IS OFF INSIDE THE TABLE, AND THAT IS NOT AN EXCEPTION TO THE LONG-LANGUAGE RULE —
   it is what the rule is for. Hyphenation lets the browser shrink a column to almost nothing,
   because a word that can break no longer forces the column wide: «Собственный» came out as
   «Соб-ствен-ный» down three lines in a 40px column. A table sits in ITS OWN SIDEWAYS SCROLLER, so
   a word too long for a column costs a scroll and never pushes the page wide — which is precisely
   why the overflow measurement excludes anything inside such a scroller. Off here, on everywhere
   else. */
.p-legal__table{width:100%;min-width:520px;border-collapse:collapse;
    -webkit-hyphens:none;hyphens:none;overflow-wrap:normal}
.p-legal__table th,.p-legal__table td{text-align:left;vertical-align:top;
    padding:10px 12px;border-bottom:1px solid var(--divider);font:500 14px/22px var(--font-body)}
.p-legal__table th{font-weight:600;color:var(--text-primary);white-space:nowrap}
.p-legal__table td{color:var(--text-secondary)}
@media (max-width:767px){
    .p-legal__title{font-size:28px;line-height:34px}
    .p-legal__table th,.p-legal__table td{padding:8px 10px}
}


/* ──────────────────────────────────────────────────────────────────────────────────────────────────
 * HYPHENATION: OFF ON THE PHONE, KEPT IN THE DESKTOP BAND. His ruling of 2026-09-21, and measured.
 *
 * ⚠⚠⚠ ON THE PHONE IT EARNED NOTHING. Measured with it on and off over the same page: at 320, one spill
 * either way; at 360, one either way — and both times it is the FIGURE «380+ лет», which no hyphenation
 * can break. It was changing the look of the Russian a reader sees and buying nothing. The design does
 * not hyphenate Russian and neither do we.
 * ⚠⚠ IN THE DESKTOP BAND IT STOPS A SIDEWAYS SCROLL, which is a different thing from a word staying in
 * its box. At 1024 with it the document is 1024px in a 1024px window; without it, 1052px — 28px of
 * sideways scroll on every page — while THE SPILL LIST IS IDENTICAL EITHER WAY. A count of spills alone
 * would have reported «no difference» and been right about the wrong question.
 * ⚠ `overflow-wrap: break-word` is a separate rule and stays at both widths: with it off as well, 320
 * gains «Профессиональный беттинг.» 10.7px out, «Политика конфиденциальности» 20.1px out, and scrolls.
 */
/* ⚠ THE BAND STARTS WHERE THE DESKTOP DOCUMENT STARTS, 992, NOT AT THE 1011 THIS RULE WAS WRITTEN WITH.
   Measured: at 992 with hyphenation off the document is 1052px in a 992px window — 60px of sideways
   scroll — and with it on it fits. The old 1011 was chosen against the markup we had before the rewrite;
   leaving it there put a 19px strip at the bottom of the desktop band where the page scrolled. */
@media (min-width: 1008px) and (max-width: 1299px) {
    .o-root { -webkit-hyphens: auto; hyphens: auto; }
}

/* ──────────────────────────────────────────────────────────────────────────────────────────────────
 * WHICH OF THE DESIGNER'S TWO DOCUMENTS IS DRAWN, AND THE STICKY HEADER'S SHADOW.
 *
 * ⚠⚠⚠ The designer drew Home twice — a desktop document and a phone document — and the phone one is NOT
 * the desktop one resized. Three attempts to carry his phone sizes across by PAIRING the two documents
 * element by element are recorded in tests/tools/front/README.md; every one put a size on the wrong
 * element somewhere, which looks deliberate and is worse than no phone layer at all. So the page carries
 * BOTH of his documents and shows one. It costs the bytes of the hidden copy and it is the only
 * arrangement in which the phone matches his drawing BY CONSTRUCTION rather than by comparison.
 * ⚠ `display: none`, not `visibility`: the hidden copy is not read out and takes no space. Its ids are
 * distinct from the shown copy's (`page` / `page-phone`, `hd-amt` / `hm-amt`).
 */
/* ⚠ Both are declared OUTRIGHT first, and the queries only switch them. That is better CSS — a reader
   sees what these wrappers are before seeing when each is hidden — and it is also what
   EveryClassTheNewSiteWritesIsDefinedTest can see: that guard takes the text before a rule's FIRST `{`
   as the selector, so inside a media query it reads `@media (min-width: 768px) ` and finds no class at
   all. ⚠⚠ NAMED, NOT FIXED: a class defined ONLY inside a media query is invisible to it. It fails in
   the safe direction — it calls a defined class undefined — but it is a hole in a guard this project
   has paid for three times, and mending it is its own small piece. */
.o-desk, .o-phone { display: block; }
/* ⚠⚠⚠ THE SWITCH IS AT 992, NOT 768, AND THE NUMBER IS MEASURED. The designer's desktop document needs
   991px — it carries 120px of side padding and a 1200px shell — so showing it from 768 made every public
   page 991px wide in a 768px window. It had been doing that since Home went out, and the OVERFLOW RECORDS
   HID IT: they were taken on 2026-09-20, before the page carried two documents, and the guard only
   speaks when the record is current. Re-measuring is what made it visible; the guard was right twice. */
/* ⚠ 1008, not 992: at exactly 992 his desktop document still needed 993px in Russian and 997px
   in Turkish, so the page scrolled by a few pixels in a band five pixels wide. The number is
   measured in the longest language we publish, not chosen for being round. */
@media (min-width: 1008px) { .o-phone { display: none; } }
@media (max-width: 1007px) { .o-desk { display: none; } }

/* ⚠⚠ THE STICKY HEADER'S SHADOW RULE IS GONE WITH ITS SCRIPT, 2026-09-21. It used to hang off
   `.p-header`, which was ours; the designer's header carries no such class and is not sticky in either
   of his documents, so the script that added the class has been removed. See front.js for the whole
   reason and for what putting it back would cost. */


/* ──────────────────────────────────────────────────────────────────────────────────────────────────
 * THE LOGO AND THE LANGUAGE MENU IN THE DESIGNER'S HEADER AND FOOTER, 2026-09-22.
 *
 * ⚠⚠ The design leaves both as placeholders — a dashed `o-logo-slot` box reading «Logo», and a plain
 * `<button class="o-lang">` that opens nothing. Taking his markup as it stands therefore shipped a site
 * with no logo and a language control that did not switch the language. These are the two places where
 * his drawing is a drawing rather than a page, and they are filled with OUR OWN pieces: the artwork cut
 * out of the old header on 18 September, and the language list the site has always had.
 * ⚠ `.p-lang*` are the same rules this file carried before the rewrite; they were removed on 2026-09-21
 * as dead because nothing wrote them any more, which was true for about a day.
 */
.p-logo { flex: none; display: inline-flex; align-items: center; text-decoration: none; }

/* ⚠⚠ THE FOOTER'S LOGO SITS ON A WHITE PLATE, AND IT IS A DECISION RATHER THAN A STYLE. The artwork is
   77 shapes of #12203A with white detail inside the crest; the footer is #09152A, so on the live page
   the mark all but vanished and only the blue «TECHNOLOGY» could be read. Flattening it to a white
   silhouette (`brightness(0) invert(1)`) would have lost the crest's interior detail, and inverting the
   lightness would have turned that detail dark for no gain. The design draws a BOX in that corner — a
   dashed slot with a muted border — so the logo goes in a box, unaltered. ⚠ His to overrule: the other
   answer is a light variant of the artwork, which is a file we do not have. */
.o-root footer .p-logo { background: #FFFFFF; border-radius: 8px; padding: 8px 12px; }

.p-lang { position: relative; }
.p-lang__chip { cursor: pointer; list-style: none; user-select: none; }
.p-lang__chip::-webkit-details-marker { display: none; }
.p-lang__list {
    position: absolute;
    inset-inline-end: 0;
    z-index: 20;
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    min-width: 168px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(9, 21, 42, 0.12);
}
.p-lang__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    text-decoration: none;
    font: 500 15px/22px var(--font-body);
}
.p-lang__item:hover { background: var(--accent-tint); color: var(--link); }
.p-lang__item.is-current { color: var(--link); font-weight: 600; }

/* ⚠ The footer sits on navy, so its menu must not inherit the header's light surface by accident — it
   is the same component in a dark band and says so. */
.o-root footer .p-lang__list { background: #17253F; border-color: #2A3A58; }
.o-root footer .p-lang__item { color: #C3CCDA; }
.o-root footer .p-lang__item:hover { background: #09152A; color: #FFFFFF; }


/* ── THE PHONE MENU ────────────────────────────────────────────────────────────────────────────────
 * ⚠⚠ NO SCRIPT: the browser's own opener, like the language chip. `.o-mobile-sheet` and
 * `.o-mobile-sheet__link` are the DESIGN's, already in its stylesheet; these rules place the sheet and
 * make the summary behave as a button. They are the same rules this file carried before the rewrite,
 * minus the two that used to show and hide the whole menu by width — the two documents do that now.
 */
.p-menu { position: relative; flex: none; }
.p-menu__burger { cursor: pointer; list-style: none; }
.p-menu__burger::-webkit-details-marker { display: none; }
.p-menu__sheet {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-2));
    width: min(320px, calc(100vw - 32px));
    z-index: 30;
}
.p-menu__langs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--divider);
}
/* ⚠ Full width and wrapping — the design's own long-language rule, which German needs everywhere. */
.p-menu__btn {
    display: flex;
    width: 100%;
    margin-block-start: var(--space-3);
    white-space: normal;
    height: auto;
    min-height: 44px;
}


/* ── THE QUESTIONS OPEN AND CLOSE ─────────────────────────────────────────────────────────────────
 * ⚠⚠⚠ THE DESIGN DRAWS THE FAQ AS A PICTURE, NOT AS A CONTROL. Its markup is a <button> carrying
 * `aria-expanded` and an item carrying `is-open`, and `.o-faq__a` has NO `display: none` anywhere in his
 * stylesheet — so every answer was permanently visible and nothing opened or closed. The page before the
 * rewrite used the browser's own <details>; taking his markup as it stands quietly replaced a working
 * control with a drawing of one. Same shape as his language button and his burger: where his file is a
 * drawing rather than a page, the working part is ours to supply.
 * ⚠ Still no script. These rules only make a <summary> behave like his button and turn the plus into a
 * cross when the question is open, which is the transform HIS OWN stylesheet already describes for
 * `.o-faq__item.is-open`.
 */
.o-faq__item > summary.o-faq__q { list-style: none; }
.o-faq__item > summary.o-faq__q::-webkit-details-marker { display: none; }
.o-faq__item[open] .o-faq__icon {
    transform: rotate(45deg);
    border-color: var(--accent);
    color: var(--link);
}


/* ── A UNIT IS A WORD, AND A WORD MAY GO TO THE NEXT LINE ─────────────────────────────────────────
 * ⚠⚠⚠ The design sets `white-space: nowrap` on the statistics figure, which is right for the FIGURE and
 * wrong for the unit beside it. «$558 млн» is 7.8px too wide for its cell in HIS OWN phone document; in
 * Turkish the unit is «milyon» and the same cell is 46.9px over, so the whole page scrolled sideways on a
 * phone — and we have Turkish clients. It is the same at 992-1015 on the desktop document in Russian.
 * ⚠ THE FIGURE IS STILL UNBREAKABLE, and not by this rule: `LtrFigure` joins it with no-break spaces and
 * wraps it in isolate marks, so «$558» and «54 678» stay whole and stay the right way round in Persian.
 * All this permits is a break at the ORDINARY space between the figure and the word after it — which is
 * the platform's own rule that a unit is a word, not part of the figure.
 * ⚠ It is the smallest deviation from his drawing that stops the page scrolling; the alternative is
 * shrinking the type per language, which the design system forbids in as many words.
 */
.o-root .o-stat__n { white-space: normal; }


/* ── PROSE WEARING A FIGURE'S FONT MAY WRAP ───────────────────────────────────────────────────────
 * ⚠⚠⚠ `.o-num` is the figure FACE, not a statement that the text is a figure, and the band labels wear
 * it: «Obergrenze» and «Одинаково» sit in `o-num p-band__n`. Our rule excluding `.o-num` from
 * `overflow-wrap` is right for a figure — «24,3%» must never be cut in half — and wrong for a German
 * word, which hung 152px out of a 134px box on the partners page at 320 with nothing able to break it.
 * ⚠ Narrowed to the band label, which is prose by construction: the figure beside it is a separate
 * element. The exclusion stands everywhere else.
 */
.o-root .o-num.p-band__n { overflow-wrap: break-word; }

/* ⚠⚠ AND HYPHENATION COMES BACK AT PHONE WIDTHS, BY HIS OWN RULE RATHER THAN AGAINST IT. He said to keep
 * it at those widths only if a word actually hangs outside its box there — and one does: «Obergrenze» at
 * 320. ⚠ My measurement that it earned nothing was taken on HOME and I ruled for all five pages from it.
 * A page is not the site. */
@media (max-width: 389px) { .o-root { -webkit-hyphens: auto; hyphens: auto; } }


/* ── THE PHONE TIER ROW PUTS ITS THIRD CELL ON ITS OWN LINE ───────────────────────────────────────
 * ⚠⚠⚠ MEASURED, AND FOUR CHEAPER ANSWERS WERE TRIED AND REJECTED BY MEASUREMENT FIRST. He draws the
 * phone tier card as `64px minmax(0, 1fr) auto`: the third track is `auto`, so it takes its
 * MAX-CONTENT first, and the middle one is `minmax(0, 1fr)`, which is explicit permission to shrink to
 * nothing. The middle cell holds the level name and the band «$3 000 – $9 999», whose every space is a
 * NO-BREAK space, so it is one unbreakable 122px run. Measured on the live page with his template:
 * 121.7px of ink outside its box in German at 320 and 119.4 at 375, and 114.4 in English at 320 —
 * it is not a German fault, only a wider one in German.
 *
 * ⚠⚠ WIDENING THE MIDDLE COLUMN REMOVES THE SPILL AND BUYS A SIDEWAYS-SCROLLING PAGE, WHICH IS WORSE.
 * `max-content`, `minmax(0, max-content)`, `auto` and `minmax(min-content, max-content)` were each put
 * into a real browser at five widths in both languages: every one gives 0px outside the box and a
 * document 29 to 139px wider than the window. The row is over-subscribed — 64px of picture, a 122px
 * unbreakable band and a column of translated prose do not fit across 252px at 320 — so no
 * distribution of the same three tracks can hold it.
 * ⚠ Letting the band break at its EN DASH was measured too and does not help: `max-content` ignores
 * the break opportunity, so the middle track is asked for the same width either way.
 *
 * ✅ SO THE THIRD CELL GOES ONTO ITS OWN LINE, and that is the whole change. Measured after, in German
 * and English at 320, 375, 390, 430 and 1024: 0px of ink outside any box and 0px of sideways scroll at
 * every one — including German at 320, which scrolled 19px sideways under his own template before this.
 * ⚠ His `text-align: right` on that cell is NOT touched, so the two share lines keep the alignment he
 * drew; only where the cell sits changes.
 *
 * ⚠⚠ `!important` IS LOAD-BEARING: the template is an INLINE `style=` attribute, which outranks every
 * selector, and his bundle is byte-frozen. ⚠ The selector names the exact declaration it corrects and
 * matches FIVE elements — the phone document's five tier rows on `/new/clients` — and nothing else in
 * any of the nine views. If he redraws that card the rule stops matching and the overflow guard goes
 * red again, which is the right way round: it fails loudly rather than quietly.
 * ⚠ No media query is needed and none is written: the phone document is `display: none` from 1008 up,
 * so these five cards are only ever laid out at the widths this is about.
 */
.o-root .o-card[style*="grid-template-columns: 64px minmax(0, 1fr) auto"] {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    row-gap: 10px;
}
.o-root .o-card[style*="grid-template-columns: 64px minmax(0, 1fr) auto"] > *:nth-child(3) {
    grid-column: 1 / -1 !important;
}


/* ── A TRANSLATED SENTENCE MAY WRAP, EVEN WEARING HIS `nowrap` ────────────────────────────────────
 * ⚠⚠ THE SAME SHAPE AS «$558 млн» AND «Obergrenze», A THIRD TIME: an inline `style=` outranks every
 * selector, and here it is `white-space: nowrap` on the tier ladder's share line. In Russian, which he
 * drew with, «доля компании 50%» fits; in German «Anteil des Unternehmens 50%» is 104.9px of ink in a
 * 94.8px box at 1024, and the nowrap stops BOTH hyphenation and `overflow-wrap` from acting — so no
 * rule about breaking could ever have reached it.
 * ⚠ It is `.o-small`, which is PROSE by construction — a sentence from the caption store, translated
 * into seven languages. Keeping a sentence on one line is not a promise anybody made; keeping a FIGURE
 * whole is, and this is not one. The figures in that card wear `.o-num` and keep his nowrap untouched.
 * ⚠ Ten elements: the five tier rows of each of his two documents, and nothing else in the nine views.
 */
.o-root .o-small[style*="white-space: nowrap"] { white-space: normal !important; }

/* ── THE FIGURE STRIPS: THE FIGURES SHARE A LINE (2026-09-23) ──────────────────────────────────────
 * ⚠⚠⚠ HIS STRIPS ARE BOTTOM-ALIGNED (`align-items: end`), so the figures line up only when everything
 * BELOW them is the same height. Measured on the live phone pages: on `/new` the clients caption is one
 * line and the analysts caption two, which put «54 678» 22px lower than «42»; on `/new/clients` the four
 * figures were at four different heights, 92px apart.
 * ⚠⚠ `align-items: start` is the obvious answer and it is WRONG: the last cell of every strip carries a
 * small label ABOVE its figure («не более»), so top-aligning would leave that one figure lower and trade
 * one misalignment for another. Measured: with bottom alignment those two are already level.
 * ⚠ So the fix is to equalise what sits BELOW the figure. A caption is given two lines whether it needs
 * them or not; the owner's ruling is that a caption wrapping to two lines is fine, a figure moving is not.
 * ⚠⚠ THE CEILING, SAID RATHER THAN DISCOVERED: a caption needing THREE lines — which German may — puts
 * its figure up again. Nothing here can see that; it needs the measurement re-run per language.
 * ⚠ The second selector reads his inline `style=` because these cells carry no class at all. That is the
 * same handle `.o-small[style*="white-space: nowrap"]` above uses, and for the same reason. */
@media (max-width: 1007px) {
    .o-root .o-stats .o-stat__l { min-height: 40px; }
    .o-root [style*="align-items: end"] > div[style*="flex-direction: column"] > span:last-child {
        min-height: 40px;
    }
    /* ⚠ «380+ years» was drawn on TWO lines at 375, which moves its own top. A figure is never broken. */
    .o-root [style*="align-items: end"] > div[style*="flex-direction: column"] > .o-num {
        white-space: nowrap;
    }
}

/* ── THE FOOTER'S LANGUAGE MENU OPENS UPWARDS (2026-09-23) ─────────────────────────────────────────
 * ⚠⚠ IT IS THE SAME COMPONENT IN TWO PLACES AND ONLY ONE OF THEM HAS ROOM. In the header the list drops
 * below the chip onto the page; in the FOOTER there is nothing below — the chip is inside the last band,
 * so the list fell past the end of the document and read as broken. It opens upward there, and only
 * there: the header is untouched, because a header menu opening upwards would be the same fault mirrored.
 * ⚠ `bottom: 100%` rather than a typed offset, so the list sits on the chip whatever the chip's height
 * becomes in another language. */
.o-root footer .p-lang__list {
    top: auto;
    bottom: 100%;
    margin: 0 0 var(--space-2);
}

/* ── THE FOUR-BLOCK DIVIDER MEETS IN THE MIDDLE (2026-09-23) ───────────────────────────────────────
 * ⚠⚠ HIS DIVIDER IS ONE RULE MEANT FOR A ROW OF FOUR: `.o-stat { border-left }` with the first cell
 * exempt. In a 1×4 band that draws three vertical hairlines and is right. Folded to 2×2 on a phone it
 * draws something else entirely — a line down the middle of each row, a SPURIOUS line at the left edge of
 * the third cell (which starts a row and should have none), and **no horizontal line at all**, so the
 * arms never cross and the join reads as a gap.
 * ⚠ The arms are restored rather than the rule replaced: the odd cells begin a row and lose their left
 * border; the last two gain a top border. The colour is his own `--divider`, never a typed grey.
 * ⚠⚠ IT IS ONE COMPONENT, SO THIS REACHES EVERY PHONE BAND, not only `/new/about` — the same broken
 * cross was being drawn on `/new` and `/new/partners`, and mending it in one place and not the others
 * would leave two pages drawing a join that the third does not. Said rather than left to be noticed. */
@media (max-width: 1007px) {
    /* ⚠⚠⚠ ONLY A BAND OF EXACTLY FOUR, AND THAT GUARD IS NOT DECORATION. The first version said simply
       «odd cells lose their left border, cells 3 and 4 gain a top one» — and `/new/partners` carries a
       band of THREE, where that put a horizontal arm under a cell with nothing beside it. Measured, on
       the live page, after deploying. `:first-child:nth-last-child(4)` matches the first cell only when
       there are four, and `~` carries the rule to its siblings; a band of three or five is untouched.
       ⚠ STATED, NOT INHERITED: something earlier in this file already strips the left border on a phone,
       so leaning on his own `.o-stat { border-left }` left the cross with no vertical arm at all. */
    .o-root .o-stats .o-stat:first-child:nth-last-child(4),
    .o-root .o-stats .o-stat:first-child:nth-last-child(4) ~ .o-stat:nth-child(odd) { border-left: 0; }
    .o-root .o-stats .o-stat:first-child:nth-last-child(4) ~ .o-stat:nth-child(even) {
        border-left: 1px solid var(--divider);
    }
    .o-root .o-stats .o-stat:first-child:nth-last-child(4) ~ .o-stat:nth-child(n + 3) {
        border-top: 1px solid var(--divider);
    }
}


/* =====================================================================================================
 * THE INSURANCE FUND BLOCK (`views/default/_fund.php`) — the designer's «osgt-fund-v2», 2026-10-11.
 * The rules below are the designer's own, AS WRITTEN (the mockup's frame — the .cap label, body, a, :root and
 * @font-face — is the page's already and is not repeated). The class names were checked against every /new
 * stylesheet before adding: none was in use.
 * ⚠ PERSIAN MIRRORS (owner, 2026-10-11): the page is dir="rtl", so the glow, the grid's mask, the block's
 * soft light and the card's gradient move to the other side, and the bar fades the other way. The rings and
 * the emblem are placed by the view (80 % → 20 %).
 * ===================================================================================================== */
.fund { position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 0%, #E8F0FE 0%, rgba(232,240,254,0) 70%), #F7F9FB; }
.fund b { color: #17253F; font-weight: 700; }
.vault { position: relative; overflow: hidden; border-radius: 28px; color: #FFF;
  background:
    radial-gradient(circle at 78% 50%, rgba(38,109,240,.38) 0%, rgba(38,109,240,0) 42%),
    linear-gradient(135deg, #0E1F3D 0%, #09152A 55%, #0C1B36 100%);
  box-shadow: 0 30px 60px -24px rgba(9,21,42,.45); }
.vault .grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 78% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 78% 50%, #000 0%, transparent 75%); }
.vault .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.09);
  transform: translate(-50%, -50%); pointer-events: none; }
/* ⚠ The designer's markup names the outermost ring «r1» and gives it no rule of its own: it is the base .ring. Declared
   here so every class the page writes exists in its stylesheet (EveryClassTheNewSiteWritesIsDefinedTest). */
.vault .ring.r1 { border-color: rgba(255,255,255,.09); }
.vault .ring.r2 { border-color: rgba(255,255,255,.12); }
.vault .ring.r3 { border: 1px dashed rgba(143,178,245,.28); }
.vault .ring.r4 { border-color: rgba(143,178,245,.35);
  background: radial-gradient(circle, rgba(38,109,240,.22) 0%, rgba(9,21,42,.0) 70%); }
.vault .emb { position: absolute; transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 24px rgba(38,109,240,.45)); }
.vault .lbl { display: flex; align-items: center; gap: 10px;
  font: 600 13px/20px Raleway, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9DB3DA; }
.vault .dot { width: 8px; height: 8px; border-radius: 50%; background: #266DF0;
  box-shadow: 0 0 0 4px rgba(38,109,240,.25); }
.vault .num { font-family: Onest, sans-serif; font-weight: 700; letter-spacing: -0.03em; color: #FFF;
  white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.vault .bar { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #266DF0, rgba(38,109,240,0)); }
.fcard { background: #FFF; border: 1px solid #E3E8EE; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(9,21,42,.04), 0 12px 32px -18px rgba(9,21,42,.18); }
.fcard .tile { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #0048CD; background: linear-gradient(145deg, #EEF4FE 0%, #DCE8FD 100%); border: 1px solid #D3E2FC; }
.fcard h3 { margin: 0; font: 600 19px/27px Raleway, sans-serif; color: #17253F; }
.fcard p { margin: 0; font: 500 15px/24px Onest, sans-serif; color: #4A5872; }
[dir="rtl"] .fund { background: radial-gradient(ellipse 70% 60% at 15% 0%, #E8F0FE 0%, rgba(232,240,254,0) 70%), #F7F9FB; }
[dir="rtl"] .vault {
  background:
    radial-gradient(circle at 22% 50%, rgba(38,109,240,.38) 0%, rgba(38,109,240,0) 42%),
    linear-gradient(225deg, #0E1F3D 0%, #09152A 55%, #0C1B36 100%); }
[dir="rtl"] .vault .grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 22% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 22% 50%, #000 0%, transparent 75%); }
[dir="rtl"] .vault .bar { background: linear-gradient(270deg, #266DF0, rgba(38,109,240,0)); }