/* ============================================================= ft-explainer.css — "The Fragmentation Tax, explained." /fragmentation-tax/explainer · August 2026 From the Claude Design explainer handoff. Load order is tokens.css -> site.css -> fragmentation-tax.css -> this file -> v12.css (last). The campaign shell (.ft-wrap / .ft-sec / .ft-eyebrow / .ft-h2 / .ft-sub / .ft-close* / .ft-form) comes from fragmentation-tax.css and is NOT restated here; everything below is the explainer's own blades, prefixed .fte-*. MERGE NOTES — what changed from the handoff, and why (design guide §09 v1.2, which this page opts into via ): · RADIUS. The handoff specifies 8 / 14 / 16px corners. Every one of them is written here as var(--radius-*), so the v1.2 purge squares the whole page in one declaration. NO LITERAL RADII — a literal is exactly how a page half-squares, which §09 adjudication 11 calls worse than either system. That includes the film: R9 exempts films because they are built on literals, but the campaign's own film (ft-film.css) carries zero radii, so this one squares with the page rather than fork the tier. · TYPE. The handoff's 700-weight headings are not restated — [data-v12] takes h1 to 600/-.03em and h2/h3 to 500. The two display-scale headlines that must hold 600 carry two classes so they outrank the element selector (same trick as .ft-close .ft-close-title). · MONO. var(--font-mono) resolves to Montserrat under v1.2 (R1b/M1c), so the chip and numeral roles here ask for tabular-nums instead — the one job mono was doing for them. · EYEBROWS. The handoff's 11px/.18em label is replaced by the campaign .ft-eyebrow (11.5px/.15em + E2 square tick) everywhere, chapter openers included — they were numbered at first, and the numbering was dropped 18 Aug 2026. Colour discipline, inherited from the landing page: red (--bud-red) marks the problem state only — the film's boundary beat and chapter 01. Everything downstream is violet. ============================================================= */ /* ═════════ shared ═════════ */ .fte-alt { background: var(--bud-midnight-purple); } /* The three chapters used to open with a mono number (01 / 02 / 03) on the §09 "the number IS the mark" carve-out, which is why they had a kicker of their own. Rob dropped the numbering 18 Aug 2026, so they are now ordinary .ft-eyebrow labels and take the E2 square tick like every other section — .is-problem turns chapter 01's tick and text red, which fragmentation-tax.css already defines. Nothing left to declare here. */ .fte-lede { font-size: 17px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 68ch; text-wrap: pretty; } .fte-lede b, .ft-lead .ft-sub b { color: var(--fg1); font-weight: 600; } /* a section head that stands alone above a full-width block (ledger, moves, FAQ) rather than leading straight into body copy */ .ft-lead.is-standalone { margin-bottom: 40px; } .fte-faq .ft-lead.is-standalone { margin-bottom: 32px; } /* ═════════ HERO ═════════ */ .fte-hero { position: relative; background: var(--bud-midnight-purple); border-bottom: 1px solid var(--border); } .fte-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(10, 7, 18, .92) 0%, rgba(10, 7, 18, .72) 50%, rgba(10, 7, 18, .95) 100%); } .fte-hero-in { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 56px 32px 72px; } .fte-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg3); transition: color var(--duration-sm) var(--ease-out-expo); } .fte-back:hover { color: var(--fg1); } /* two classes: 600/-.03em has to survive [data-v12] h1 (0,1,1) */ .fte-hero .fte-h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.07; color: var(--fg1); margin: 18px 0 20px; max-width: 20ch; text-wrap: pretty; } .fte-hero-sub { font-size: 18px; line-height: 1.55; color: var(--fg2); margin: 0; max-width: 46ch; text-wrap: pretty; } /* ═════════ THE FILM — 30 seconds ═════════ Staged exactly like the product-page overview films: a motif-backed 16/7.2 frame under a normal section head, with the shared chrome from site.js doing the rest — window.BudFilmProgress injects the timeline line on the top edge (.bud-film-prog) and window.BudFilmNav injects the back/forward controls (.bud-film-nav), the legibility veil (.bud-film-veil) and the [data-film-beat] motif dim. All four are styled globally in site.css, so nothing about them is restated here. Beat state is one attribute on the stage: data-beat="0".."5", and this file owns every visual it drives. The markup ships at beat 5, so no-JS and reduced motion both land on the finished plane — ft-explainer.js only ever rewrites the attribute. */ .fte-stage { position: relative; margin-top: 40px; overflow: hidden; isolation: isolate; background: var(--bud-midnight-purple); border: 1px solid var(--border); border-radius: var(--radius-2xl); aspect-ratio: 16 / 7.2; min-height: 440px; } /* the product films' violet lift over the grid */ .fte-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(85% 90% at 50% 24%, rgba(140, 51, 239, .15), transparent 68%); } .fte-scenes { position: absolute; inset: 0; z-index: 1; } /* bottom padding clears the nav chrome parked at the frame's corner */ .fte-film { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 32px; padding: 44px 56px 56px; align-items: center; } /* caption rail */ .fte-rail { display: flex; flex-direction: column; gap: 16px; justify-content: center; } .fte-cap { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fg2); opacity: .3; transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo); } .fte-cap b { color: var(--fg1); font-weight: 600; } .fte-cap.fte-cap-end { color: var(--bud-electric-2); font-weight: 600; } /* the live caption */ .fte-stage[data-beat="0"] [data-cap="0"], .fte-stage[data-beat="1"] [data-cap="1"], .fte-stage[data-beat="2"] [data-cap="2"], .fte-stage[data-beat="3"] [data-cap="3"], .fte-stage[data-beat="4"] [data-cap="4"], .fte-stage[data-beat="5"] [data-cap="5"] { opacity: 1; } /* the ones it has not reached yet */ .fte-stage[data-beat="0"] [data-cap="1"], .fte-stage[data-beat="0"] [data-cap="2"], .fte-stage[data-beat="0"] [data-cap="3"], .fte-stage[data-beat="0"] [data-cap="4"], .fte-stage[data-beat="0"] [data-cap="5"], .fte-stage[data-beat="1"] [data-cap="2"], .fte-stage[data-beat="1"] [data-cap="3"], .fte-stage[data-beat="1"] [data-cap="4"], .fte-stage[data-beat="1"] [data-cap="5"], .fte-stage[data-beat="2"] [data-cap="3"], .fte-stage[data-beat="2"] [data-cap="4"], .fte-stage[data-beat="2"] [data-cap="5"], .fte-stage[data-beat="3"] [data-cap="4"], .fte-stage[data-beat="3"] [data-cap="5"], .fte-stage[data-beat="4"] [data-cap="5"] { opacity: 0; transform: translateY(10px); } /* viz layers — everything carrying data-show fades on its own beats */ .fte-viz { position: relative; min-width: 0; height: 100%; } .fte-viz [data-show] { opacity: 0; transition: opacity 500ms var(--ease-out-expo); } .fte-stage[data-beat="0"] [data-show~="0"], .fte-stage[data-beat="1"] [data-show~="1"], .fte-stage[data-beat="2"] [data-show~="2"], .fte-stage[data-beat="3"] [data-show~="3"], .fte-stage[data-beat="4"] [data-show~="4"], .fte-stage[data-beat="5"] [data-show~="5"] { opacity: 1; } .fte-layer { position: absolute; inset: 0; pointer-events: none; } .fte-layer svg { width: 100%; height: 100%; display: block; } .fte-plane-layer { display: flex; align-items: center; justify-content: center; } /* beat 2 — the four line items, named */ .fte-tax-chips { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .fte-tax-chips span { background: var(--bud-midnight); border: 1px solid rgba(240, 71, 106, .4); border-radius: var(--radius-md); padding: 6px 12px; font-size: 12.5px; color: var(--bud-red); font-variant-numeric: tabular-nums; } /* beats 4–5 — the Novaria plane. The page's one glow. */ .fte-plane { width: 100%; max-width: 560px; background: var(--bud-midnight-purple); border: 1.5px solid var(--accent); border-radius: var(--radius-2xl); padding: 28px 30px; box-shadow: 0 0 0 1px rgba(140, 51, 239, .35), 0 8px 32px rgba(140, 51, 239, .25); } .fte-plane-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--bud-electric-2); } /* two classes so the plane title keeps its own size against [data-v12] h2 */ .fte-plane .fte-plane-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--fg1); margin: 0 0 18px; } .fte-plane-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fte-plane-grid span { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; font-size: 12px; color: var(--fg2); text-align: center; } .fte-plane-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--bud-electric-2); text-align: center; letter-spacing: .02em; } /* the marching request path. Motion is decorative here — it stops dead under reduced motion, and the diagram still reads. */ @keyframes fte-dash { to { stroke-dashoffset: -40; } } .fte-dash { animation: fte-dash 1.6s linear infinite; } .fte-dash-fast { animation: fte-dash 1.4s linear infinite; } /* ═════════ CHAPTER 01 — the problem ═════════ A port of the homepage hero carousel's frame 02 (.hc-f2 in home-hero-carousel.css): fragmented-stack panel left, copy right, the four taxes as a 2×2 of red-edged cards. Ported rather than shared, because the two live in different systems: the carousel scene sits over a motif and needs a copy scrim, sets its own display-scale type, and is built on literal radii (R9 — a film / carousel keeps its own surface). Here the block is page content on a squared v1.2 page, so every radius is a token, the heading is the page's own .ft-h2, and the scrim is unnecessary. Copy and geometry are otherwise identical — keep them in step if the homepage frame changes. */ .fte-prob { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 48px; align-items: center; } /* copy is FIRST in the DOM (it is what the section says) and second in the grid — the panel illustrates it, so it should not be read first */ .fte-prob-copy { grid-column: 2; grid-row: 1; min-width: 0; } .fte-prob-viz { grid-column: 1; grid-row: 1; min-width: 0; } /* An eyebrow that leads a whole SECTION rather than a copy column. Chapters ported from the homepage carousel put their copy in one half of a two-column grid, which would indent the kicker ~400px past every other section's eyebrow — so it comes out of the grid and sits on the wrap's left edge, carrying the gap the copy column's first element supplied. */ .fte-kicker-lead { margin-bottom: 22px; } /* two classes: the red half has to survive [data-v12] h2 (0,1,1) */ .fte-prob-h2 .red { color: var(--bud-red); } .fte-prob-copy .fte-lede { margin-top: 18px; font-size: 16px; } .fte-prob-lede { margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--fg2); max-width: 56ch; } .fte-prob-lede b { color: var(--fg1); font-weight: 600; } .fte-taxes { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; max-width: 600px; } .fte-tax { border: 1px solid rgba(240, 71, 106, .28); border-radius: var(--radius-md); background: linear-gradient(rgba(240, 71, 106, .05), rgba(240, 71, 106, .05)), var(--bud-midnight-purple); padding: 12px 14px; } .fte-tax .t { font-size: 13.5px; font-weight: 600; color: var(--fg1); line-height: 1.3; } .fte-tax .v { margin-top: 6px; font-size: 11.5px; color: var(--bud-red); font-variant-numeric: tabular-nums; } /* the fragmented-stack panel */ .fte-frag { display: flex; flex-direction: column; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .012); padding: 15px 17px 13px; } .fte-frag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .fte-frag-head .l { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg3); font-weight: 700; } .fte-frag-head .r { font-size: 10px; letter-spacing: .14em; color: var(--bud-red); font-weight: 700; } /* fixed-height box: do not let the SVG stretch (it reintroduces dead space) */ .fte-frag-box { flex: 0 0 auto; height: clamp(240px, 24vw, 300px); margin-top: 8px; display: flex; } .fte-frag-box svg { width: 100%; height: 100%; overflow: visible; } .fte-frag text { font-size: 8px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; fill: var(--bud-dusk); } .fte-frag-foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10.5px; letter-spacing: .06em; color: var(--fg3); font-variant-numeric: tabular-nums; } .fte-frag-foot .r { color: var(--bud-red); font-weight: 700; } /* the boundary rules breathe — the one piece of motion in the panel that is not the travelling SMIL dots */ @keyframes fte-bpulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } } .fte-bounds line { animation: fte-bpulse 2.2s var(--ease-out-expo) infinite; } /* ═════════ CHAPTER 02 — hybrid ═════════ */ .fte-hybrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 44px; align-items: stretch; } .fte-router { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px; } .fte-router svg { width: 100%; height: auto; display: block; } /* the three cards share the column's full height (the grid stretches it to the router card), so the two sides always bottom-align */ .fte-gains { display: flex; flex-direction: column; gap: 14px; } .fte-gain { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px 22px; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; } .fte-gain .v { margin: 0; font-size: 24px; font-weight: 700; color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .fte-gain .k { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg3); } /* one glow per section — this is chapter 02's */ .fte-gain.is-lead { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(140, 51, 239, .35), 0 8px 32px rgba(140, 51, 239, .25); } .fte-gain.is-lead .v { color: var(--bud-electric-2); } .fte-gain.is-lead .k { color: var(--fg2); } .fte-tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .fte-tenet { border-top: 2px solid var(--accent); padding-top: 14px; } .fte-tenet .t { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg1); } .fte-tenet .d { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg3); } /* ═════════ CHAPTER 03 — the platform ═════════ A port of the homepage hero carousel's frame 01 (.hc-f1): the eight-layer product stack left, copy right. Same porting rules as .fte-prob above — token radii, the page's own .ft-h2, no copy scrim — and the same warning: it is a COPY of the carousel scene, so the two have to be kept in step by hand. */ .fte-os { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 56px; align-items: center; } /* copy first in the DOM, second in the grid — the stack illustrates it */ .fte-os-copy { grid-column: 2; grid-row: 1; min-width: 0; } .fte-os-stack { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .fte-os-h2 .em { color: var(--bud-electric-2); } .fte-os-lede { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--fg2); max-width: 52ch; text-wrap: pretty; } .fte-points { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 56ch; } .fte-point { display: flex; align-items: flex-start; gap: 12px; } .fte-point .sq { width: 8px; height: 8px; border-radius: var(--radius-xs); background: var(--accent); flex: 0 0 auto; margin-top: 6px; } .fte-point span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--fg2); } /* The carousel's rows sit at rgba(18,14,28,.6) — a 60% tint of THIS page's own background, which would leave them invisible here. They take the surface step every other card on the page uses instead. */ .fte-ly { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--radius-md); } .fte-ly .n { font-size: 10px; color: var(--fg3); font-variant-numeric: tabular-nums; letter-spacing: .1em; } .fte-ly .nm { font-size: 12.5px; font-weight: 600; color: var(--fg2); } .fte-ly.is-top .nm { color: var(--fg1); } .fte-onward { margin: 36px 0 0; font-size: 14px; color: var(--fg3); } .fte-onward a { font-weight: 600; } /* ═════════ THE LEDGER ═════════ */ .fte-ledger { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } .fte-ledger-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); } .fte-ledger-row:first-child { border-top: 0; background: var(--surface); } .fte-ledger-row p { margin: 0; padding: 16px 24px; font-size: 14px; line-height: 1.55; color: var(--fg2); } .fte-ledger-row p:first-child { border-right: 1px solid var(--border); } .fte-ledger-row .h { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .fte-ledger-row .h.bad { color: var(--bud-red); } .fte-ledger-row .h.good { color: var(--bud-electric-2); } /* ═════════ THE FIVE MOVES ═════════ Cards, not a ruled table. The rule-separated version put this block immediately under the ledger — two hairline tables back to back — and gave the one-line bodies a column twice the width they needed while the titles wrapped in a narrow one. So: K2 edge-accent cards (§09 R5), a display numeral carrying the enumeration, and the title column widened to the width the titles actually want. The accent edge is the section's argument, not decoration: the guide's claim about the five moves is that they COMPOUND, so each card's top edge runs a fifth further than the one above it and the set draws a staircase down the section. It reports position in the sequence — it is not a data bar, and there is no per-move figure behind it. */ .fte-moves { display: flex; flex-direction: column; gap: 14px; } .fte-move { position: relative; display: grid; grid-template-columns: 62px minmax(200px, 320px) 1fr; gap: 28px; align-items: start; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border); transition: border-color var(--duration-md) var(--ease-out-expo), background var(--duration-md) var(--ease-out-expo); } /* the compounding edge — one fifth further on each card */ .fte-move::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; background: var(--accent); } .fte-move:nth-child(1)::before { width: 20%; } .fte-move:nth-child(2)::before { width: 40%; } .fte-move:nth-child(3)::before { width: 60%; } .fte-move:nth-child(4)::before { width: 80%; } .fte-move:nth-child(5)::before { width: 100%; } /* R5: the hover lift retires — a border and surface step carries it */ .fte-move:hover { border-color: var(--border-strong); background: var(--surface-elev); } .fte-move .n { font-size: 32px; font-weight: 700; line-height: .9; color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fte-move .t { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--fg1); text-wrap: pretty; } .fte-move .d { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); text-wrap: pretty; } /* ═════════ FAQ ═════════ */ .fte-faq { max-width: 840px; margin: 0 auto; } .fte-q { border-top: 1px solid var(--border); } .fte-q:last-of-type { border-bottom: 1px solid var(--border); } .fte-q > summary { cursor: pointer; padding: 20px 0; font-size: 16px; font-weight: 600; color: var(--fg1); list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .fte-q > summary::-webkit-details-marker { display: none; } .fte-q > summary::after { content: "+"; color: var(--accent); font-weight: 600; flex: none; } .fte-q[open] > summary::after { content: "−"; } .fte-q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fte-q p { margin: 0; padding: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--fg2); max-width: 72ch; } /* ═════════ RESPONSIVE ═════════ */ @media (max-width: 1040px) { .fte-hybrid { grid-template-columns: 1fr; } /* Both carousel ports drop their side column under the copy. The homepage HIDES these at its narrow breakpoint ([data-hc-narrow-hide]), because a carousel frame has a fixed height to fit; a static page has the room, and in both cases the visual IS the section's argument. */ .fte-prob, .fte-os { grid-template-columns: 1fr; gap: 36px; } .fte-prob-copy, .fte-prob-viz, .fte-os-copy, .fte-os-stack { grid-column: 1; } .fte-prob-copy, .fte-os-copy { grid-row: 1; } .fte-prob-viz { grid-row: 2; max-width: 420px; } .fte-os-stack { grid-row: 2; max-width: 420px; } } @media (max-width: 900px) { /* The caption rail stops being a rail and stacks over the diagram — and since the captions wrap to an unpredictable height at this width, the frame stops being a fixed ratio holding absolutely-positioned scenes and lets its content set the height instead. The product pages solve the same stack with a magic min-height; here the copy is long enough that a magic number would clip it on one phone and gap on the next. */ .fte-stage { aspect-ratio: auto; min-height: 0; } .fte-scenes { position: relative; } .fte-film { position: relative; inset: auto; grid-template-columns: 1fr; gap: 20px; padding: 36px 28px 62px; } .fte-viz { min-height: 320px; height: auto; } /* the numeral keeps its own column; title and body stack beside it */ .fte-move { grid-template-columns: 48px 1fr; gap: 18px; row-gap: 10px; padding: 22px 22px; } .fte-move .d { grid-column: 2; } .fte-move .n { font-size: 26px; } .fte-tenets { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 720px) { /* the taxes stop being a 2×2 and become a list */ .fte-taxes { grid-template-columns: 1fr; } .fte-ledger-row { grid-template-columns: 1fr; } .fte-ledger-row p:first-child { border-right: 0; border-bottom: 1px solid var(--border); } } @media (max-width: 560px) { .fte-hero-in { padding: 40px 20px 56px; } .fte-film { padding: 28px 20px 58px; } .fte-plane { padding: 22px 18px; } .fte-plane-grid { grid-template-columns: repeat(2, 1fr); } .fte-ledger-row p { padding: 14px 18px; } } /* ═════════ THE NEWSLETTER BAND ═════════ partials.js mounts the sign-up as a standalone .nl-band above the footer rule on any page without a closing .cta-panel — which is this page, since the guide gate IS its conversion. site.css gives that band `padding: 0 0 56px` on the stated assumption that "spacing above comes from the preceding section's own padding". True on /poc, /contact, /partner and /leadership, whose last section ends in 64px of its own padding. NOT true here: .ft-close is a full-bleed motif blade whose padding lives inside .ft-close-in, so the grid's hard bottom edge lands flush on the sign-up row and reads as an overlap. Matching the band's own bottom value centres the row in its space. Scoped to .ft-page rather than fixed in site.css so the four shipped pages above keep the spacing they were designed with. */ .ft-page .nl-band { padding-top: 56px; } /* Reduced motion: the film never arms (ft-explainer.js bails), so all that is left to stop is the decorative dash march. */ @media (prefers-reduced-motion: reduce) { .fte-dash, .fte-dash-fast, .fte-bounds line { animation: none; } .fte-bounds line { opacity: .55; } .fte-cap, .fte-viz [data-show] { transition: none; } }