are shared by every template, and the last time something was declared on for one page's benefit (`place-items: center`) it took the footer band off the window edges above ~2279px and cost two wrong diagnoses to find. The exact same scoped sticky-footer pattern already exists for the custom product pages at css-page-custom.css:23 -- for a different reason (their content is all position:fixed, so

collapses to 0) but with the same shape, so this is a second instance of an established idiom rather than a new one. Three things were checked before touching , since all three would have been silent regressions: - **The header does not move.**

carries `block-flow--sm`, i.e. `margin-block-start: min(2rem, 4vh)` (css-utilities.css:618), and turning a parent into a flex container stops its children's margins collapsing out of it. That margin is already inside though: `overflow-x: hidden` (style.css) makes overflow-y compute to `auto`, which establishes a block formatting context, which already prevents the collapse. So the ~32px above the header is there today and is unchanged. - **No sibling margins un-collapse.**

and .footer-wrapper are the three in-flow children; main and the footer wrapper declare no block margins at all (the footer's old `margin-block-end` was deleted on 2026-10-19), so there is no adjacent pair to collapse in the first place. - **Nothing shrink-wraps.** `align-items` is left at its default `stretch` rather than being set to `center` the way css-page-custom.css:34 does. All three children declare `width: 100%` so the two resolve identically today, but `stretch` is the one that stays correct if a future child doesn't -- which is precisely how the `place-items` bug worked. */ html.error-page body { display: flex; flex-direction: column; /* css-reset.css:125 puts `padding-bottom: 3rem` on every page. With `min-height: 100svh` and border-box that is 48px of page background below the footer, i.e. the gap this task is about -- the footer would stop short of the window bottom even once it is pushed down. Zeroed here only. Note it was never protecting against the Forethought launcher either: that is position:fixed and floats over the footer regardless. */ padding-bottom: 0; } /* `1 0 auto`, matching css-page-custom.css:38: grow to absorb the leftover window height, but never shrink -- if the content is ever taller than the window (a long translation, a narrow phone) main keeps its natural height and the page scrolls, rather than being squashed to fit. */ html.error-page main { display: flex; flex-direction: column; flex: 1 0 auto; } /* The chain that carries main's new height down to the band, so the wash can fill it and the message can centre in it. main is a flex column, so this grows; #page-container is .grid-content, i.e. a grid whose single implicit row is `auto`, and `align-content` on a grid defaults to `normal` which behaves as `stretch` -- so that row absorbs the extra height and .error stretches with it. Nothing in .grid-content sets align-content; if anything ever does, this is the link that breaks. margin-block-end is style.css:69's sitewide 5rem. Harmless when the content sits at the top of the page, but with the band centred it is 80px of asymmetry -- it would push the message up off centre by half of it and leave a gap the wash fades out before reaching. (1,1,0) here against (1,0,0) there, so this wins on specificity and does not depend on style.css being injected after every , which it is.) */ html.error-page #page-container { flex: 1 0 auto; margin-block-end: 0; } /* !SECTION - Page layout */ /* THIS PAGE IS THE ONE EXCLUSION FROM THE SITEWIDE CORNER GLOWS. css-reset.css paints Codex's two --page-bg-corner radials on `html:not(.error-page) main`, and the `:not()` is there for the wash below: this page has its own deliberate, differently-shaped treatment, built to its own Figma frame and signed off on 2026-10-21. Corner glows under it would show through at the bottom of the band, where this wash has already faded out. If that exclusion is ever lifted, it is this rule that has to be reconciled with it. */ .error-page { /* The frame fills this band with a wash that runs edge to edge, which is why the

is a `full-width` grid item rather than sitting in the content column. 33.42%/99.28% and the colour are the frame's own; the 179.77deg it draws is 180deg, i.e. the CSS default, so the angle is omitted. The frame's second stop is #faffff at zero alpha -- the page background, not this wash -- but gradient interpolation is premultiplied, so fading --neutral-bg-soft to `transparent` is the same ramp without needing a paired -transparent token that Codex doesn't define. (--page-bg-corner- transparent, which the sitewide corner glows use, is a real Codex token; there is no neutral/bg-soft-transparent to match it.) The band is as tall as whatever the sticky-footer chain above leaves it, not the frame's 390px, so the wash now starts under the header's bottom edge and fades out around four-fifths of the way down the gap to the footer. At 1440x900 that is close to the frame; on a tall window it is a longer fade, which is the right way for a one-stop vertical wash to stretch. align-items centres the column in that height -- this is the "404 message centre aligned" half of the task, and it only has anything to centre because of the chain above. justify-content was already doing the horizontal half. padding-block is --space-3xl, which resolves to 96px at 1440 against the frame's 103. It is no longer what positions the content, since centring does that; it is now a floor, so that on a window too short to centre in (or once the content is taller than the band) the message still keeps its breathing room instead of butting against the header and footer. Chasing the last 7px would mean hardcoding a value off the scale on the one axis where this page should stay fluid -- same call as the header's 75-vs-72. padding-inline is --gap-sm because that is grid-content's own gutter, so the column lands where every other band's content does. */ .error { display: flex; justify-content: center; align-items: center; padding-block: var(--space-3xl); padding-inline: var(--gap-sm); background-image: linear-gradient( var(--neutral-bg-soft) 33.42%, transparent 99.28% ); } /* Frame 6638:6540 -- the content block and the button, 24px apart. */ .kb-error-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: 30rem; text-align: center; } /* Frame 6633:5605 -- the graphic chip above the two lines of text, 18px. */ .kb-error-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } /* Frame 6633:6499 -- heading over body copy, 6px. No `text-box: trim-both` here, unlike the home page's brand headings: the 6px is measured between full line boxes in the frame, so trimming the half-leading away would close the gap tighter than drawn. */ .kb-error-text { display: flex; flex-direction: column; gap: var(--space-3xs); } /* Codex `heading/sm`: Sora SemiBold at font/size/xl (20px, which --step-3 resolves to) with no tracking -- the old h1 carried a -0.075rem letter-spacing that the frame does not draw. --leading-body-0 is 1.4, which is the leading heading/sm itself specifies. The name says body because that is where 1.4 lives on this theme's scale; the heading scale's nearest step is --leading-heading-3 at 1.3. Taking the frame's value rather than the better-named token because the 6px gap above is measured against this line box. */ .kb-error-title { font-family: var(--ff-logo); font-size: var(--step-3); font-weight: var(--font-bold); line-height: var(--leading-body-0); color: var(--neutral-text); } /* Codex `body/regular/base`, same three declarations as .kb-topic-card-desc on the home page, in --neutral-text-soft rather than --neutral-text. `balance` so that once the line is too long for the 30rem column it breaks into two even lines instead of one long and one short. */ .kb-error-desc { font-family: var(--brand-font-family-sans); font-size: var(--step-0); line-height: var(--leading-body-0); color: var(--neutral-text-soft); text-wrap: balance; } /* Codex `graphic`, size sm / severity neutral / emphasis regular -- the 48px neutral counterpart to the home page's 60px branded chip. Fixed rem rather than the fluid scales for the same reason that one gives: the size is the mockup's and a circle has to stay a circle, so it does not scale with type. aspect-ratio is belt-and-braces, for if the explicit height ever comes off. Note the border is --neutral-border-alpha where the home chip takes -alpha-strong; that is the frame's own distinction between the two emphases, not drift. */ .kb-icon-graphic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; aspect-ratio: 1 / 1; border: var(--border-width-regular) solid var(--neutral-border-alpha); border-radius: var(--radius-round); background-color: var(--neutral-bg-component); color: var(--neutral-icon); } /* svg, not i -- the Font Awesome kit JS replaces the with an