otherwise sits at the same size as the three plan titles under it, which is
the same defect one block lower.
The band itself is components.css's since r12-5 and this size step is NOT:
it is the landing's heading scale, and this sheet is the landing's alone.
So `/_styleguide`, which renders the band without loading this rule, shows
its a step smaller — and `/app/plans` shows no difference at all,
because the SPA's band carries no heading (Plans/index.tsx renders a
and says so). Named as a consequence rather than discovered. */
.section h2,
.pricing h2 {
font-size: var(--text-xl);
}
/* The containing block for the numeral (r12-1b), on `.section h2` ALONE.
It was on the shared rule above, which also names `.pricing h2` — where
nothing is ever absolutely positioned, since the band is not a step in the
argument and carries no numeral. Here it is one rule with one reason, and
the deviation entry's revert list can name it. */
.section h2 {
position: relative;
}
/* The mark that opens a block (r12-1b). --text-sm and --color-accent: it is the
smallest type on the page and one of the five things on it that spend the hue
(the block at the end of this sheet names them). `content: … / ""` gives it
EMPTY alternative text — a screen reader reads the heading, and «01» before
it is noise. A browser too old for that syntax drops the whole declaration
and renders no numeral, which is the correct way for decoration to fail.
On `.section h2` alone, so the price band's heading carries none: the band
is not a step in the argument, it is where the argument lands. */
.section h2::before {
content: counter(section, decimal-leading-zero) / "";
display: block;
margin-block-end: var(--space-2);
color: var(--color-accent);
font-family: var(--font-body);
font-size: var(--text-sm);
}
/* Wide enough to hang it (r12-1b). `.container`'s middle track is
min(calc(--measure − 2 × --space-4), 100%) = 648px, its inline padding is
--space-4 a side, so the free side track is (viewport − 32px − 648px) / 2:
44px at 48rem and 20px at 45rem. The mark is two digits of Inter at 13px
(≈15px) plus a --space-4 gap ≈ 31px, so 48rem is the first step that fits
it — the same arithmetic the 55rem query states for the band, which
since r12-5's promotion lives in components.css rather than in this
sheet at all.
Additive `min-width`, so the block form one rule up is what a narrow
viewport keeps. */
@media (min-width: 48rem) {
.section h2::before {
position: absolute;
inset-block-start: 0;
inset-inline-end: 100%;
margin-inline-end: var(--space-4);
}
}
/* The run-in subhead (r12-1b): a paragraph whose only child is a .
Two documents write one — `problem.html`'s «Головна проблема:» and
`how.html`'s «Принцип 1–2 кроки на день» — and both are a topic opening
inside a block, which is a level this page had no type for. The serif is
base.css's own "a heading is here" channel, so it says it without a fourth
size and without claiming a role this does not have. `--space-2` above,
because a label stands further from what precedes it than from what it
introduces; the flex column's gap supplies the rest.
The keeps the user agent's bold. `--weight-medium` on it needs
`.section p:has(…) strong`, which is three compound selectors and stylelint
allows two.
`:has(strong:only-child)` and not `:has(> strong:only-child)` for the
reason the lead rule below gives, and it is written ABOVE that rule
rather than beside it: both are keyed on `p`, this one is the less
specific of the two, and `no-descending-specificity` orders them. */
.section p:has(strong:only-child) {
margin-block-start: var(--space-2);
font-family: var(--font-serif);
}
/* The lead (r12-2). A block now runs 28px heading -> 20px lead -> 16px body,
so the largest thing in it is at the top and the eye is told where to start.
`p:nth-child(2)` and NOT `:first-of-type`: the heading is always child 1, so
this is "the paragraph directly after the heading" — which is what a lead
IS. `:first-of-type` would also fire on the first paragraph of a section
that OPENS with a list, and both `problem` and `method` do: it would set
«Головна проблема:» a size up in the middle of the block, which is the
defect this slice came to remove. A `>` and a pseudo-class rather than
`.section h2 + p`, because that is three compound selectors and stylelint
allows two.
Muted, not full ink: the lead is a bridge from the heading into the body,
and a 20px line at body colour reads as a heading that lost its serif.
#6f6a60 on #faf9f5 is 5.10:1 — 20px is "normal text" to §12, so 4.5 is the
floor it has to clear and it does.
The `:not(:has(…))` is r12-1b's: the selector's job is "the paragraph
directly after the heading", and a paragraph whose only child is a
is a LABEL, not a lead — `how.html`'s «Принцип 1–2 кроки на день»
is child 2 and was rendering 20px muted, which is a label wearing the
lead's clothes. The same test appears as a rule of its own one block up.
`:has(strong:only-child)` and not `:has(> strong:only-child)`: stylelint
counts a combinator INSIDE `:has()` as a further compound, and the child
form is three where it allows two. The descendant form is broader by a
shape no document here has — a lone nested inside another inline
element — so do not put the `>` back. */
.section > p:nth-child(2):not(:has(strong:only-child)) {
color: var(--color-muted);
font-size: var(--text-lg);
}
.section ul,
.section ol {
margin: 0;
max-width: var(--measure);
padding-left: var(--space-6);
}
.section li {
margin-bottom: var(--space-2);
}
/* The one way out of the middle of the page (r12-1b). A link, not a second
button: the page has one primary control and it is in the band this points
at. base.css's underline is what carries it for a reader who sees no
colour, so §12's rule holds here as it does at the three marks in the
accent block below.
It sits HERE and not in that block, though it spends the hue: the block's
contract is "delete these and the landing returns to ink exactly", and this
rule also carries `margin-block-start`, which is layout. Deleting it would
move the link rather than only un-colour it.
`--space-8` above and `--space-12` below (the next `.section`'s own margin,
and grid margins do not collapse), so it is NOT equidistant: it trails
`how` at 40px and stands 72px clear of `programme`. That is the shipped and
approved spacing; it reads as a way out of the block it just closed rather
than as a divider between two. */
.mid-cta {
margin-block-start: var(--space-8);
color: var(--color-accent);
}
/* The one part of a plan card that is still the landing's alone (r12-5). The
SPA renders from `PlanSummary`, which carries no `description` — the landing
renders that HTML column with the tree's one `| safe` — so this class has one
consumer and §4 leaves it here. The card, the band and the grid moved to
components.css. */
.plan-card__body ul {
margin: 0;
padding-left: var(--space-6);
}
/* r10-4's door at `/`: one card per language and nothing else. `auto-fit` with
a floor rather than a breakpoint — how many fit is the grid's arithmetic and
not a number this sheet has to keep in step with app/web/marketing.py's
LANDINGS.
Its FLOOR cites .pricing__cards no longer (r12-3; that rule is
components.css's since r12-5): TWO cards cannot orphan
the way three can, so the fixed column count that rule took is owed by the
slice that adds a third language, not by this one.
`--space-8`, the gap the price band's outlines use, since r12-3 took the
fill: two drawn edges 16px apart read as one framed block, where a tint kept
them apart on its own. It is also what sets where the row collapses:
2 x 18rem + 40px of gap = 616px of track, and `.container` pads `--space-4`
a side, so the second column drops below a 648px viewport — measured.
There is a SECOND ceiling and it does not bind: `.languages` is a
`.container > *` and sits in the middle track, `min(calc(68ch - 2rem),
100%)`, which against the shipped Inter (`0` advances 0.6309em) caps at
~654px. 616 clears it by 38px, down from 62 before the gap changed. Whoever
next moves `--measure`, this gap or that 18rem floor has to check both. */
.languages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: var(--space-8);
padding: var(--space-8) 0;
}
/* An OUTLINE, as components.css's .plan-card is (r12-3; that rule moved out
of this sheet in r12-5). The hairline and the 3px radius are
`components.css`'s `.card`, worn beside this class; what is here is the
door's own packing. The fill was --color-surface, which §3 reserved for
"the empty-state ground and the open nav panel", and a card is not a recess.
(r12-5 took the empty state's fill too, so the token has one consumer left.)
The whole card is still the anchor (marketing/home.html), which is what the
border draws: the target is the rectangle, not the words in it — so the
border and the focus ring are this element's rather than a link's inside it.
No `color: inherit` since r12-3: the anchor's only text is the inside it,
which takes --color-fg from base.css's heading rule. A declaration that
governs nothing is a second place to change one thing. No underline, because
base.css styles an `a` as body text with one and that does not read as a
card. */
.language-card {
align-items: center;
gap: var(--space-4);
padding: var(--space-6);
text-decoration: none;
/* §5's motion budget is "colour only, 120ms", and every other border-colour
state in the product spends it — `.btn` and a focused input both. Without
it the hover below is the one interactive colour change that snaps. */
transition: border-color var(--duration);
}
/* The page's only control, and with the fill gone it had no answer to the
pointer at all: `text-decoration: none` means base.css's `a:not(.btn):hover`
— the product's one link hover — never fires on it. The emphasised hairline
is what a border already says louder, and it is the same token the buttons
and a focused input carry, so no new vocabulary. */
.language-card:hover {
border-color: var(--color-line-strong);
}
/* An element rule scoped to the card, as components.css's bottom-align
is: the logo is the
card's only image and its intrinsic size is the attributes' job, so all this
owes is the ceiling and the ratio. `height: auto` is what keeps that ratio
once `max-width` shrinks it — without it the `height` attribute wins and the
logo squashes. Since r12-1 this is the only rule that draws one: the hero
dropped its ![]()
and `/` is where the artwork lives. */
.language-card img {
width: 16rem;
max-width: 100%;
height: auto;
}
/* The two wordmarks are different aspect ratios (LANDINGS' `logo_width` and
`logo_height`, which marketing/home.html repeats), so at a shared 16rem width
one is taller than the other and the names under them sat at two heights.
The numbers are deliberately not restated here: the row and the template are
two copies already and only those two are gated. The fill absorbed the
difference; an outline advertises it. The grid stretches both cards to the
row's height, so pushing the heading to the bottom of the column lands the
two names on one line. Exactly the device `.plan-card > :last-child` uses — in
components.css since r12-5 — for exactly the same reason. */
.language-card h2 {
margin-top: auto;
}
/* r3-3's four documents, rendered by marketing/legal.html around whichever
copy/legal/ file its wrapper includes.
base.css zeroes every h1, h2 and p margin, so vertical rhythm here is the
container's `gap` — the arrangement .section above already makes, one block
lower. The list margins go with them for the same reason: a user agent's
`1em 0` would add to the gap instead of replacing it. Width is not set:
`.container`'s middle track already holds the page to --measure. */
.legal-page {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* A section of a document opens with space and NOT with the mark `.section`
uses one block up (r12-4, plans/deviations.md). A landing is a sequence of
pitches a reader scans, where an accented rule says "new pitch"; /terms is
nineteen numbered clauses read in order, and nineteen marks are nineteen
things to
look past on the way to the words. The serif heading is already the signal —
that is the second channel r12-1 bought.
Margins do NOT collapse in a flex container, so this ADDS to the column's
--space-4 gap: 2.5rem before a section against 1rem between its own
paragraphs. --space-8 was tried at 3.5rem and read as too much on a page of
nineteen clauses — the reader was asked to cross a gap on every screenful —
so the amount is the one that shipped before this slice and the change is
the mark, not the measure (plans/deviations.md). */
.legal-page h2 {
margin-block-start: var(--space-6);
}
/* /faq and /privacy open straight into , where 2.5rem would separate
a title from the section it titles — nothing needs separating there.
`h2:nth-child(2)` and NOT `.legal-page h1 + h2`, which is three compound
selectors where stylelint allows two — the same substitution `.section > p:
nth-child(2)` makes further up this sheet, and it is exact rather than
approximate: the is child 1 of every document in copy/ua/legal/, so
"the second child, if it is an h2" and "the h2 after the h1" pick out the
same element. /terms and /contacts have a
there and match neither. */
/* THE DEPENDENCY, stated because nothing gates it: this picks the
that
is the SECOND child of `.legal-page`, which is the first section heading
only while the is child 1 — true of all four `copy/ua/legal/`
documents today. That tree is prose, edited by whoever writes the
Ukrainian, carries no classes and has no test over its shape. A document
that gains a lead paragraph above its heading silently moves this rule onto
the paragraph. The landing's equivalent dependency IS gated
(`test_every_section_document_opens_with_its_one_heading`); this one is not,
because the four documents differ from each other by design — /terms and
/contacts open with a
at child 2 and match neither rule. */
.legal-page h2:nth-child(2) {
margin-block-start: 0;
}
/* A subsection is --text-base — the same size as the body — so space is the
only channel left to say it opens something. One step under the section's,
which is the smallest difference the scale can express. /privacy carries
three
s and /terms one. */
.legal-page h3 {
margin-block-start: var(--space-4);
}
/* The indent `.section ul` carries, so a bulleted clause in /terms sits where a
bulleted point on a landing does. The `margin: 0` is what the flex column
needs — a user agent's `1em 0` would ADD to the gap rather than replace it.
NOT that rule's `max-width`, which is inert inside .container's narrower
track on both pages, and no `ol`: copy/ua/legal/ has none. NOT merged with it
either (§15.13) — a section of a pitch and a clause of a contract are
unrelated subjects that happen to look alike today. */
.legal-page ul {
margin: 0;
padding-left: var(--space-6);
}
/* `:not(:last-child)`, unlike `.section li`: that rule's margin also fires on
the last row and stacks with the container's gap, and copying it here would
propagate the wart to four more pages. */
.legal-page li:not(:last-child) {
margin-bottom: var(--space-2);
}
/* §5's footer, on the marketing shell alone. A document index rather than a
second navigation, so it is a wrapping row of links and not a bar: the
count is fixed at six and the labels are as long as the language makes
them, which `flex-wrap` handles at every width without a breakpoint. */
.footer {
border-top: var(--border-width) solid var(--color-line);
}
.footer__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
max-width: var(--measure);
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
/* r5-6's switcher, a sibling of .footer__links rather than one more of its
rows: a `` is a control, not a destination, and the wrapping row
above is sized for anchors of one line's height. */
.footer__locale {
max-width: var(--measure);
margin: 0 auto;
padding: 0 var(--space-4) var(--space-6);
}
.footer__locale summary {
width: fit-content;
color: var(--color-muted);
cursor: pointer;
}
.footer__locale-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-2);
}
/* ── the accent (r12-2 pass B, retuned r12-5) ───────────────────────────────
Every place on this surface that spends --color-accent, in ONE block at the
end of the sheet rather than beside the rules each overrides. That is
deliberate: the hue is one design decision taken on top of a finished
page, and deleting these three rules returns each of them to ink exactly.
It also means a reader can see how sparingly it is spent by looking at one
screenful.
It is not quite the whole of it. Two further rules spend `--color-accent`
and stay with the rules they belong to, because colour is not all either one
does: `.section h2::before` (the hanging numeral, r12-1b) and `.mid-cta`
(which also carries a margin). Five consumers on this surface — `tokens.css`
names them beside /app's two and `.checkbox`.
r12-2 pass B wrote these against `--color-mark`, a second warm hue beside a
cool `--color-accent`. r12-5 collapsed the two: the token is the same value
under the name §3 registers, so nothing here changed colour.
§12's rule holds at all five — none is the only channel: the section
hairline is a hairline either way, the price is the largest type in its
card, the badge carries its own «−45%», the numeral is decoration a reader
can lose entirely, and the link keeps base.css's underline. */
/* The rule that opens a block. A hairline is what §2 makes the structural
system, so colouring the one already there costs no new geometry — and it
is the mark a reader meets first on the way down the page.
`.container > .section` and not a bare `.section`: stylelint's
`no-duplicate-selectors` refuses a second rule under the same selector, and
folding this declaration into the one above would put the accent inside
pass A. The child combinator is true of every one of them — `base.html`
renders `` and the sections are its children. */
.container > .section {
border-block-start-color: var(--color-accent);
}
/* The number the page exists to state. Scoped to `.plan-card`, so /app/plans
— which renders the same `.price__now` — stays ink: this is the landing's
decision and not the product's. */
.plan-card .price__now {
color: var(--color-accent);
}
/* The discount, in the accent on both channels the badge has (§9 makes it a
bordered label and never a filled pill). Scoped for the reason above:
`.badge` is also the panel's and the SPA's. */
.plan-card .badge {
border-color: var(--color-accent);
color: var(--color-accent);
}
does not have. `--space-2` above,
because a label stands further from what precedes it than from what it
introduces; the flex column's gap supplies the rest.
The keeps the user agent's bold. `--weight-medium` on it needs
`.section p:has(…) strong`, which is three compound selectors and stylelint
allows two.
`:has(strong:only-child)` and not `:has(> strong:only-child)` for the
reason the lead rule below gives, and it is written ABOVE that rule
rather than beside it: both are keyed on `p`, this one is the less
specific of the two, and `no-descending-specificity` orders them. */
.section p:has(strong:only-child) {
margin-block-start: var(--space-2);
font-family: var(--font-serif);
}
/* The lead (r12-2). A block now runs 28px heading -> 20px lead -> 16px body,
so the largest thing in it is at the top and the eye is told where to start.
`p:nth-child(2)` and NOT `:first-of-type`: the heading is always child 1, so
this is "the paragraph directly after the heading" — which is what a lead
IS. `:first-of-type` would also fire on the first paragraph of a section
that OPENS with a list, and both `problem` and `method` do: it would set
«Головна проблема:» a size up in the middle of the block, which is the
defect this slice came to remove. A `>` and a pseudo-class rather than
`.section h2 + p`, because that is three compound selectors and stylelint
allows two.
Muted, not full ink: the lead is a bridge from the heading into the body,
and a 20px line at body colour reads as a heading that lost its serif.
#6f6a60 on #faf9f5 is 5.10:1 — 20px is "normal text" to §12, so 4.5 is the
floor it has to clear and it does.
The `:not(:has(…))` is r12-1b's: the selector's job is "the paragraph
directly after the heading", and a paragraph whose only child is a
is a LABEL, not a lead — `how.html`'s «Принцип 1–2 кроки на день»
is child 2 and was rendering 20px muted, which is a label wearing the
lead's clothes. The same test appears as a rule of its own one block up.
`:has(strong:only-child)` and not `:has(> strong:only-child)`: stylelint
counts a combinator INSIDE `:has()` as a further compound, and the child
form is three where it allows two. The descendant form is broader by a
shape no document here has — a lone nested inside another inline
element — so do not put the `>` back. */
.section > p:nth-child(2):not(:has(strong:only-child)) {
color: var(--color-muted);
font-size: var(--text-lg);
}
.section ul,
.section ol {
margin: 0;
max-width: var(--measure);
padding-left: var(--space-6);
}
.section li {
margin-bottom: var(--space-2);
}
/* The one way out of the middle of the page (r12-1b). A link, not a second
button: the page has one primary control and it is in the band this points
at. base.css's underline is what carries it for a reader who sees no
colour, so §12's rule holds here as it does at the three marks in the
accent block below.
It sits HERE and not in that block, though it spends the hue: the block's
contract is "delete these and the landing returns to ink exactly", and this
rule also carries `margin-block-start`, which is layout. Deleting it would
move the link rather than only un-colour it.
`--space-8` above and `--space-12` below (the next `.section`'s own margin,
and grid margins do not collapse), so it is NOT equidistant: it trails
`how` at 40px and stands 72px clear of `programme`. That is the shipped and
approved spacing; it reads as a way out of the block it just closed rather
than as a divider between two. */
.mid-cta {
margin-block-start: var(--space-8);
color: var(--color-accent);
}
/* The one part of a plan card that is still the landing's alone (r12-5). The
SPA renders from `PlanSummary`, which carries no `description` — the landing
renders that HTML column with the tree's one `| safe` — so this class has one
consumer and §4 leaves it here. The card, the band and the grid moved to
components.css. */
.plan-card__body ul {
margin: 0;
padding-left: var(--space-6);
}
/* r10-4's door at `/`: one card per language and nothing else. `auto-fit` with
a floor rather than a breakpoint — how many fit is the grid's arithmetic and
not a number this sheet has to keep in step with app/web/marketing.py's
LANDINGS.
Its FLOOR cites .pricing__cards no longer (r12-3; that rule is
components.css's since r12-5): TWO cards cannot orphan
the way three can, so the fixed column count that rule took is owed by the
slice that adds a third language, not by this one.
`--space-8`, the gap the price band's outlines use, since r12-3 took the
fill: two drawn edges 16px apart read as one framed block, where a tint kept
them apart on its own. It is also what sets where the row collapses:
2 x 18rem + 40px of gap = 616px of track, and `.container` pads `--space-4`
a side, so the second column drops below a 648px viewport — measured.
There is a SECOND ceiling and it does not bind: `.languages` is a
`.container > *` and sits in the middle track, `min(calc(68ch - 2rem),
100%)`, which against the shipped Inter (`0` advances 0.6309em) caps at
~654px. 616 clears it by 38px, down from 62 before the gap changed. Whoever
next moves `--measure`, this gap or that 18rem floor has to check both. */
.languages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: var(--space-8);
padding: var(--space-8) 0;
}
/* An OUTLINE, as components.css's .plan-card is (r12-3; that rule moved out
of this sheet in r12-5). The hairline and the 3px radius are
`components.css`'s `.card`, worn beside this class; what is here is the
door's own packing. The fill was --color-surface, which §3 reserved for
"the empty-state ground and the open nav panel", and a card is not a recess.
(r12-5 took the empty state's fill too, so the token has one consumer left.)
The whole card is still the anchor (marketing/home.html), which is what the
border draws: the target is the rectangle, not the words in it — so the
border and the focus ring are this element's rather than a link's inside it.
No `color: inherit` since r12-3: the anchor's only text is the there and match neither. */
/* THE DEPENDENCY, stated because nothing gates it: this picks the at child 2 and match neither rule. */
.legal-page h2:nth-child(2) {
margin-block-start: 0;
}
/* A subsection is --text-base — the same size as the body — so space is the
only channel left to say it opens something. One step under the section's,
which is the smallest difference the scale can express. /privacy carries
three inside it,
which takes --color-fg from base.css's heading rule. A declaration that
governs nothing is a second place to change one thing. No underline, because
base.css styles an `a` as body text with one and that does not read as a
card. */
.language-card {
align-items: center;
gap: var(--space-4);
padding: var(--space-6);
text-decoration: none;
/* §5's motion budget is "colour only, 120ms", and every other border-colour
state in the product spends it — `.btn` and a focused input both. Without
it the hover below is the one interactive colour change that snaps. */
transition: border-color var(--duration);
}
/* The page's only control, and with the fill gone it had no answer to the
pointer at all: `text-decoration: none` means base.css's `a:not(.btn):hover`
— the product's one link hover — never fires on it. The emphasised hairline
is what a border already says louder, and it is the same token the buttons
and a focused input carry, so no new vocabulary. */
.language-card:hover {
border-color: var(--color-line-strong);
}
/* An element rule scoped to the card, as components.css's bottom-align
is: the logo is the
card's only image and its intrinsic size is the attributes' job, so all this
owes is the ceiling and the ratio. `height: auto` is what keeps that ratio
once `max-width` shrinks it — without it the `height` attribute wins and the
logo squashes. Since r12-1 this is the only rule that draws one: the hero
dropped its
and `/` is where the artwork lives. */
.language-card img {
width: 16rem;
max-width: 100%;
height: auto;
}
/* The two wordmarks are different aspect ratios (LANDINGS' `logo_width` and
`logo_height`, which marketing/home.html repeats), so at a shared 16rem width
one is taller than the other and the names under them sat at two heights.
The numbers are deliberately not restated here: the row and the template are
two copies already and only those two are gated. The fill absorbed the
difference; an outline advertises it. The grid stretches both cards to the
row's height, so pushing the heading to the bottom of the column lands the
two names on one line. Exactly the device `.plan-card > :last-child` uses — in
components.css since r12-5 — for exactly the same reason. */
.language-card h2 {
margin-top: auto;
}
/* r3-3's four documents, rendered by marketing/legal.html around whichever
copy/legal/ file its wrapper includes.
base.css zeroes every h1, h2 and p margin, so vertical rhythm here is the
container's `gap` — the arrangement .section above already makes, one block
lower. The list margins go with them for the same reason: a user agent's
`1em 0` would add to the gap instead of replacing it. Width is not set:
`.container`'s middle track already holds the page to --measure. */
.legal-page {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* A section of a document opens with space and NOT with the mark `.section`
uses one block up (r12-4, plans/deviations.md). A landing is a sequence of
pitches a reader scans, where an accented rule says "new pitch"; /terms is
nineteen numbered clauses read in order, and nineteen marks are nineteen
things to
look past on the way to the words. The serif heading is already the signal —
that is the second channel r12-1 bought.
Margins do NOT collapse in a flex container, so this ADDS to the column's
--space-4 gap: 2.5rem before a section against 1rem between its own
paragraphs. --space-8 was tried at 3.5rem and read as too much on a page of
nineteen clauses — the reader was asked to cross a gap on every screenful —
so the amount is the one that shipped before this slice and the change is
the mark, not the measure (plans/deviations.md). */
.legal-page h2 {
margin-block-start: var(--space-6);
}
/* /faq and /privacy open
straight into
, where 2.5rem would separate
a title from the section it titles — nothing needs separating there.
`h2:nth-child(2)` and NOT `.legal-page h1 + h2`, which is three compound
selectors where stylelint allows two — the same substitution `.section > p:
nth-child(2)` makes further up this sheet, and it is exact rather than
approximate: the
is child 1 of every document in copy/ua/legal/, so
"the second child, if it is an h2" and "the h2 after the h1" pick out the
same element. /terms and /contacts have a
that
is the SECOND child of `.legal-page`, which is the first section heading
only while the
is child 1 — true of all four `copy/ua/legal/`
documents today. That tree is prose, edited by whoever writes the
Ukrainian, carries no classes and has no test over its shape. A document
that gains a lead paragraph above its heading silently moves this rule onto
the paragraph. The landing's equivalent dependency IS gated
(`test_every_section_document_opens_with_its_one_heading`); this one is not,
because the four documents differ from each other by design — /terms and
/contacts open with a
s and /terms one. */
.legal-page h3 {
margin-block-start: var(--space-4);
}
/* The indent `.section ul` carries, so a bulleted clause in /terms sits where a
bulleted point on a landing does. The `margin: 0` is what the flex column
needs — a user agent's `1em 0` would ADD to the gap rather than replace it.
NOT that rule's `max-width`, which is inert inside .container's narrower
track on both pages, and no `ol`: copy/ua/legal/ has none. NOT merged with it
either (§15.13) — a section of a pitch and a clause of a contract are
unrelated subjects that happen to look alike today. */
.legal-page ul {
margin: 0;
padding-left: var(--space-6);
}
/* `:not(:last-child)`, unlike `.section li`: that rule's margin also fires on
the last row and stacks with the container's gap, and copying it here would
propagate the wart to four more pages. */
.legal-page li:not(:last-child) {
margin-bottom: var(--space-2);
}
/* §5's footer, on the marketing shell alone. A document index rather than a
second navigation, so it is a wrapping row of links and not a bar: the
count is fixed at six and the labels are as long as the language makes
them, which `flex-wrap` handles at every width without a breakpoint. */
.footer {
border-top: var(--border-width) solid var(--color-line);
}
.footer__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
max-width: var(--measure);
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
/* r5-6's switcher, a sibling of .footer__links rather than one more of its
rows: a `