/* Hallmark · shape: Long Document (the whole programme on the page) · genre: editorial · theme: custom, by request: the Kalinka brand guide (owner 02.11.2026, overrides the Grid theme of 30.10.2026) · job: sign up · hero: banner, the brand canvas full width (guide p. 33-34) with the claim on its navy part and the course on a navy plate · nav: logo with its clear space, sections, language, sign in, start · footer: the colour logo on navy, links, company · imagery: the brand canvas (guide p. 9) in two fragments, the author's portrait in natural colour · signature: the full programme of 12 modules, grouped by theme · axes: light/grotesk-sans/cool · posture: committed · surface: absolute (white is a brand colour, guide p. 6) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the programme list is long by the owner's own request (he wants to see the volume); type scale kept to one step per role so the length reads as order, not noise */
/* Hallmark · answered word budget · the owner asked on 02.11.2026 to show every module with one or two lines; the 450-word budget yields to him */
/* Brand: colours only from the guide (p. 6): navy #172E4D, red #9C021E, red additional #FF2400, additional #FFBC6B, black, white; neutrals are navy mixed with white or black. Font Inter by the owner's decision of 03.11.2026 (Geometria has no web licence), fallback Arial (p. 8). Logo clear space half its height (p. 11). The canvas is cropped and mirrored only (p. 9, p. 15). */
/* Kept as the owner's material (decision 30.10.2026): "10+ лет", "500+ сделок", the press names РБК, Forbes, Т-Банк, Компания. */
/* Hallmark · dropped banner, ставки модуля 6 сверены · a tax-only banner over the bar framed the course as one topic; the course is now framed by its whole programme */
/* Hallmark · dropped price table, бесплатно · the price now sits in the facts band, the programme head and the module 12 row */
/* Hallmark · waive 78 · shape: Long Document, h2 36px against the owner's cap of 40px at 1440 · the owner rejected oversized type on 02.11.2026 and set the scale himself: H1 at most 56px, H2 between 28 and 40px */
/* Hallmark · waive 7b · surface: absolute in the stamp, white #FFFFFF taken from the brand guide p. 6 · white is one of the six Kalinka brand colours and the paper of the guide's own site mock-ups, so the landing keeps it untinted */
/* Open Reflex 1 (Inter as the display face) by the owner's decision of 03.11.2026: Inter for heads and text; Hallmark accepts a waiver only with a second family, which the owner did not ask for. */
/* Hallmark · dismissed 59 · ten sections because the owner asked to see the whole course on the page (02.11.2026); the facts band is a strip of four facts under the hero, not a section of its own */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Shared ---------- */
.skip { position: absolute; left: var(--space-md); top: -200px; z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-body)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-nav); }
.btn--quiet { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--on-field:focus-visible { outline-color: var(--color-field-focus); }

.link { color: inherit; font-weight: 500; text-decoration: underline var(--rule-hair); text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-accent); }

.nb { white-space: nowrap; }
.tag { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius); background: var(--color-warm); color: var(--color-ink); font-size: var(--text-caption); font-weight: 500; line-height: 1.5; letter-spacing: 0; vertical-align: 0.15em; white-space: nowrap; }

html[lang="en"] .ru-only { display: none; }
html:not([lang="en"]) .en-only { display: none; }

/* ---------- Bar: twice the logo high, so the clear space above and below is half the logo (guide p. 11): 96/48 desktop, 80/40 tablet, 72/36 phone ---------- */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 var(--rule-hair) 0 var(--color-rule); }
.bar__in { display: flex; align-items: center; gap: var(--space-xl); height: var(--bar-h); }
.bar__logo { display: inline-flex; flex-shrink: 0; padding-inline-end: calc(var(--logo-h) / 2); }
.bar__logo img { height: var(--logo-h); width: auto; }
.bar__links { display: flex; gap: var(--space-lg); }
.bar__links a, .bar__login { color: var(--color-ink); font-size: var(--text-nav); font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.bar__links a:hover, .bar__login:hover { color: var(--color-accent); }
.bar__end { display: flex; align-items: center; gap: var(--space-md); margin-inline-start: auto; }

.lang-switcher { display: flex; }
.lang-switcher button { min-width: 44px; min-height: 44px; padding: 0 var(--space-xs); border: 0; background: none; color: var(--color-muted); font-size: var(--text-nav); font-weight: 500; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.lang-switcher button.active { color: var(--color-ink); text-decoration: underline var(--rule-hair); text-underline-offset: 0.3em; }
.lang-switcher button:hover { color: var(--color-accent); }

.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); color: var(--color-ink); font-size: var(--text-nav); font-weight: 500; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { color: var(--color-accent); }
.menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); display: grid; min-width: 15rem; padding-block: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
.menu__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); color: var(--color-ink); font-size: var(--text-nav); text-decoration: none; }
.menu__panel a:hover { color: var(--color-accent); }

/* ---------- Hero: the brand canvas full width, the claim on its navy part, the course on a navy plate over the red ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(35rem, calc(23.75rem + 12.5vw), 38.75rem); padding-block: var(--space-xl); background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.hero__canvas { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__canvas img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.hero__text { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); padding-inline-end: var(--space-lg); }
.hero h1 { max-width: 24ch; color: var(--color-field-ink); }
.hero__text .lead { color: var(--color-hero-lead); }
.hero .link:hover { color: var(--color-warm); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xs); }
.hero__plate { grid-column: 8 / -1; display: grid; margin: 0; padding: var(--space-md) var(--space-lg); list-style: none; border-radius: var(--radius); background: var(--color-plate); color: var(--color-field-ink); font-size: var(--text-plate); line-height: 1.4; }
.hero__plate li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-md); padding-block: var(--space-sm); }
.hero__plate li + li { border-top: var(--rule-hair) solid var(--color-field-rule); }
.hero__nums { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.close__art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Facts band ---------- */
.facts-band { background: var(--color-paper-2); }
.facts-band__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin: 0; padding-block: var(--space-2xl) var(--space-xl); }
.facts-band__list > div { padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-accent); }
.facts-band__list dt { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.facts-band__list dd { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--text-caption); line-height: 1.5; }

/* ---------- Programme: 12 modules in six themes, each theme a full-width head with its count ---------- */
.program { padding-block: var(--section-gap) var(--section-gap-s); }
.program__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.program__head h2, .program__head .lead { max-width: 52rem; }
.program__head .lead { color: var(--color-muted); }
/* Lists split by hairlines: every item carries its rule on the left; the list is pulled left by one step and clipped there,
 * so the first item of every wrapped line starts without a rule */
.scale, .author__facts { --sep: var(--space-md); display: flex; flex-wrap: wrap; row-gap: var(--space-xs); margin-inline-start: calc(-1 * (var(--sep) + var(--rule-hair))); padding: 0; list-style: none; clip-path: inset(0 0 0 calc(var(--sep) + var(--rule-hair))); }
.scale li, .author__facts li { padding-inline-start: var(--sep); margin-inline-end: var(--sep); border-inline-start: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.scale { margin-block: var(--space-xs) 0; font-size: var(--text-body); }
.scale b { color: var(--color-accent); font-weight: 700; }
.program__group { border-top: 2px solid var(--color-ink); }
.program__group + .program__group { margin-top: var(--space-xl); }
.program__theme { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-md) var(--space-xs); }
.program__theme h3 { max-width: none; color: var(--color-accent); font-size: var(--text-h3); }
.program__count { color: var(--color-muted); font-size: var(--text-caption); font-weight: 500; }
.modules { margin: 0; padding: 0; list-style: none; }
.module { display: grid; grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.module__num { color: var(--color-accent); font-size: var(--text-index); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.module__title { margin: 0; font-size: var(--text-h3); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.module__body { display: grid; gap: var(--space-2xs); }
.module__desc { color: var(--color-muted); max-width: 75ch; }
.module__meta { color: var(--color-ink); font-size: var(--text-caption); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.program__group--paid .module { padding-inline: var(--space-md); border-radius: var(--radius); background: var(--color-paper-2); }

/* ---------- How the course works ---------- */
.lesson { padding-block: var(--section-gap-s) var(--section-gap); }
.lesson__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.lesson__head { grid-column: 1 / span 5; display: grid; gap: var(--space-md); }
.lesson__head .lead { color: var(--color-muted); }
.steps { display: grid; gap: var(--space-md); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.steps__num { color: var(--color-accent); font-size: var(--text-index); font-weight: 700; line-height: 1.3; }
.steps h3 { margin-bottom: var(--space-2xs); }
.steps p { color: var(--color-muted); }
.switch { grid-column: 6 / -1; }
.tabs { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.tabs button { min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-muted); font: 500 var(--text-body)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--color-accent); color: var(--color-ink); }
.tabs button:hover { color: var(--color-ink); }
.sheet { padding: var(--space-xl); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); }
.sheet + .sheet { margin-top: var(--space-md); }
.sheet__src { margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-caption); }
.sheet h3 { margin-bottom: var(--space-sm); }
.sheet p + p, .sheet ul { margin-top: var(--space-sm); }
.sheet ul { margin-bottom: 0; padding-inline-start: var(--space-lg); }
.sheet li + li { margin-top: var(--space-2xs); }
.sheet__more { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-caption); }
.quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz legend { margin-bottom: var(--space-sm); padding: 0; font-size: var(--text-h3); font-weight: 700; line-height: 1.35; }
.quiz__situation { display: block; margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-body); font-weight: 400; }
.quiz__opt { display: flex; align-items: flex-start; gap: var(--space-sm); margin: 0; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.quiz__opt input { flex-shrink: 0; width: 20px; height: 20px; margin: var(--space-2xs) 0 0; accent-color: var(--color-ink); }
.quiz__opt label { cursor: pointer; }
.quiz .btn { margin-top: var(--space-sm); }
.quiz__result { min-height: 1lh; margin-top: var(--space-sm); }

/* ---------- Course tools: the compact calculator and three tools ---------- */
.tools { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.tools__head { display: grid; gap: var(--space-md); max-width: 52rem; margin-bottom: var(--space-xl); }
.tools__head .lead { color: var(--color-muted); }
.tools__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }

.calc { grid-column: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); padding: var(--space-xl); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); }
.calc__title { grid-column: 1 / -1; max-width: none; }
.calc__inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-content: start; }
.calc__field { display: grid; gap: var(--space-2xs); margin: 0; }
.calc label, .calc legend { color: var(--color-ink); font-size: var(--text-caption); font-weight: 500; }
.calc input[type="text"], .calc input[type="date"] { width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: transparent; color: var(--color-ink); font: 500 var(--text-input)/1.3 var(--font-body); font-variant-numeric: tabular-nums lining-nums; outline: 2px solid transparent; outline-offset: 2px; }
.calc input:focus-visible { outline-color: var(--color-focus); }
.calc input:disabled { opacity: 0.55; cursor: not-allowed; }
.calc__seg { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__seg legend { float: left; width: 100%; margin-bottom: var(--space-2xs); padding: 0; }
.calc__seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.calc__seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius); font-size: var(--text-caption); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.calc__seg label:hover { border-color: var(--color-ink); }
.calc__seg input:checked + label { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.calc__seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc__check { display: flex; align-items: flex-start; gap: var(--space-xs); margin: 0; }
.calc__check input { flex-shrink: 0; width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); }
.calc__check input:disabled { opacity: 0.55; cursor: not-allowed; }
.calc__check label { font-weight: 400; cursor: pointer; }
.calc__out { display: grid; gap: var(--space-sm); align-content: start; padding-inline-start: var(--space-xl); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.calc__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.calc__total { font-size: var(--text-figure); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.calc__unit { font-size: var(--text-body); font-weight: 500; }
.calc__share { color: var(--color-muted); font-size: var(--text-caption); }
.calc__table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.calc__table th { padding: var(--space-xs) var(--space-md) var(--space-xs) 0; font-weight: 400; text-align: start; }
.calc__table td { padding: var(--space-xs) 0; font-weight: 500; text-align: end; white-space: nowrap; }
.calc__table tr > * { border-top: var(--rule-hair) solid var(--color-rule); }
.calc__status { color: var(--color-accent); font-size: var(--text-caption); font-weight: 500; }
.calc__status:empty { display: none; }
.calc[data-invalid] .calc__result, .calc[data-invalid] .calc__share, .calc[data-invalid] .calc__table { opacity: 0.4; }
.calc__note { color: var(--color-muted); font-size: var(--text-caption); }

.tool-list { grid-column: 8 / -1; display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.tool-list li { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.tool-list p { color: var(--color-muted); }

/* ---------- Certificate: the brand navy ---------- */
.cert { padding-block: var(--section-gap-s); background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.cert__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.cert__head { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); }
.cert h2 { max-width: 24ch; color: var(--color-field-ink); }
.verify { display: grid; gap: var(--space-xs); }
.verify label { font-size: var(--text-caption); font-weight: 500; }
.verify__row { display: flex; align-items: end; gap: var(--space-md); }
.verify input { flex: 1; min-width: 0; min-height: 52px; padding: 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-field-muted); border-radius: 0; background: transparent; color: var(--color-field-ink); font: 500 var(--text-input)/1.3 var(--font-body); outline: 2px solid transparent; outline-offset: 2px; }
.verify input::placeholder { color: var(--color-field-muted); opacity: 1; }
.verify input:focus-visible { outline-color: var(--color-focus); }
.verify input:disabled { opacity: 0.55; cursor: not-allowed; }
.facts { grid-column: 7 / -1; margin: 0; }
.facts > div { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-field-rule); }
.facts > div:last-child { border-bottom: var(--rule-hair) solid var(--color-field-rule); }
.facts dt { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; }
.facts dd { max-width: 60ch; margin: var(--space-2xs) 0 0; color: var(--color-field-muted); }

/* ---------- Author ---------- */
.author { padding-block: var(--section-gap); }
.author__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.author__photo { grid-column: 1 / span 4; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--color-paper-2); }
.author__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.author__text { grid-column: 6 / -1; display: grid; gap: var(--space-md); }
.author__name { font-size: var(--text-lead); }
.author__facts { margin-block: 0; font-size: var(--text-h3); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.author__media { color: var(--color-muted); font-size: var(--text-caption); }
.media { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-xs) 0 0; padding: 0; list-style: none; color: var(--color-ink); font-size: var(--text-body); font-weight: 700; }
.media__name { color: var(--color-ink); }
.author__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }

/* ---------- Questions ---------- */
.faq { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.faq__grid > h2 { grid-column: 1 / span 4; max-width: 12ch; }
.faq__list { grid-column: 5 / -1; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-height: 44px; padding-block: var(--space-md); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; color: var(--color-accent); font-size: var(--text-h3); font-weight: 700; line-height: 1; }
.faq details[open] > summary::after { content: "\2212"; }
.faq summary h3 { max-width: none; transition: color var(--dur-short) var(--ease-out); }
.faq summary:hover h3 { color: var(--color-accent); }
.answer { max-width: 65ch; padding-bottom: var(--space-lg); color: var(--color-ink); }
.answer a { text-decoration: underline var(--rule-hair); text-underline-offset: 0.24em; }
.answer a:hover { color: var(--color-accent); }

/* ---------- Close: navy beside the canvas, the canvas running to the right edge of the window ---------- */
.close { background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.close__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.close__text { justify-self: end; width: min(100%, calc(var(--container) / 2)); display: grid; gap: var(--space-xl); align-content: center; justify-items: start; padding: var(--section-gap-s) var(--gutter); }
.close h2 { max-width: 18ch; color: var(--color-field-ink); }
.close__art { margin: 0; min-height: 22rem; }

/* ---------- Footer ---------- */
.footer { padding-block: var(--space-2xl); background: var(--color-ink-2); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--logo-h) / 2); font-size: var(--text-lead); }
.footer__brand img { flex-shrink: 0; height: var(--logo-h); width: auto; } /* never larger than the header logo; the gap is the guide's clear space */
.footer__links { grid-column: 1 / span 7; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer__links a { color: var(--color-field-ink); font-size: var(--text-nav); text-decoration: underline var(--rule-hair); text-underline-offset: 0.24em; transition: color var(--dur-short) var(--ease-out); }
.footer__links a:hover { color: var(--color-warm); }
.footer__company { grid-column: 8 / -1; color: var(--color-field-muted); font-size: var(--text-caption); }
.footer__copy { grid-column: 1 / -1; color: var(--color-field-muted); font-size: var(--text-caption); }

/* ---------- Under 75rem: the menu replaces the section links ---------- */
@media (max-width: 75rem) {
    .bar__links { display: none; }
    .menu { display: block; }
}

/* ---------- Under 60rem: one column ---------- */
@media (max-width: 60rem) {
    .bar__login { display: none; }
    .hero { min-height: 0; padding-block: var(--space-xl); }
    .hero__canvas img { object-position: 50% 100%; }
    .hero__plate { margin-top: var(--space-xl); }
    .hero__grid, .lesson__grid, .tools__grid, .cert__grid, .author__grid, .faq__grid, .footer__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__text, .hero__plate, .lesson__head, .switch, .calc, .tool-list, .cert__head, .facts, .author__photo, .author__text, .faq__grid > h2, .faq__list, .footer__brand, .footer__links, .footer__company, .footer__copy { grid-column: 1 / -1; }
    .hero__text { padding-inline-end: 0; }
    .facts-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .author__photo { max-width: 22rem; }
    .close__grid { grid-template-columns: minmax(0, 1fr); }
    .close__text { justify-self: stretch; width: auto; }
    .close__art { display: none; }
}

@media (max-width: 40rem) {
    .bar__in { gap: var(--space-sm); }
    .bar__end { gap: var(--space-xs); }
    .bar__end > .lang-switcher { display: none; }
    .menu__panel .lang-switcher { display: flex; padding-inline: var(--space-xs); }
    .facts-band__list { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg); }
    .hero__plate { padding: var(--space-xs) var(--space-md); }
    .hero__plate li { grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-2xs); }
    .hero__plate .tag { grid-column: 2; justify-self: start; }
    .module { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-2xs); }
    .module__body { grid-column: 2; }
    .program__group--paid .module { padding-inline: var(--space-sm); }
    .calc { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--space-md); }
    .calc__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
    .calc__seg, .calc__check { grid-column: 1 / -1; }
    .calc__out { padding-inline-start: 0; padding-top: var(--space-md); border-inline-start: 0; border-top: var(--rule-hair) solid var(--color-rule); }
    .sheet { padding: var(--space-lg) var(--space-md); }
    .tabs { gap: var(--space-md); }
    .verify__row { flex-wrap: wrap; }
    .author__facts { --sep: 6px; font-size: var(--text-caption); font-weight: 600; }
    .scale { --sep: var(--space-sm); }
    .footer__brand { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}

@media (min-width: 40.01rem) {
    .menu__panel .lang-switcher { display: none; }
}