/* Record section (owner: record builder): the hero hand-off, the chapter rail and the lifecycle record (#lifecycle).
   Port: public/prototypes/homepage/opening-d/core.css (the parts opening E uses), opening-e/opening.css and
   cinematic/rail.css.
   Scope: prototype rules that were unscoped stay single-class (.cn-life…, .cn-rec…, .cn-rail…); rules scoped with
   .proto-cinematic / .proto-weave become .marketing-page--record. Tokens come from home-base.css.
   Markup: templates/index/home/_lifecycle_record.html.twig, _rail.html.twig. Behaviour: assets/landing/record.js.
   Audit fixes here: major 4 (the rail link is its 34px dash; the label never takes clicks), major 8 (record.js keeps
   the static sequence on short screens; nothing here assumes the pin), major 10 (record rows wrap under text spacing;
   the close note sits in normal flow), A11Y-11 (the step text stays on narrow screens), A11Y-12 (the rail is never
   visibility:hidden and shows while it holds focus), RESP-05 (a row's label never shares its value's space), the
   lifecycle "Commission" heading fitting its copy column, and the photo crops that were inline styles.
   Contract: home-port/CONTRACT.md. */

/* ================================================================================================
   Lifecycle · static sequence (default: no script, reduced motion, short screens)
   ================================================================================================ */

.cn-life { position: relative; z-index: 2; background: var(--paper); color: var(--ink); }
.cn-life code { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.01em; }
.cn-life ::selection { background: var(--forest); color: var(--paper); }
.cn-life__anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 0; }

.cn-life__stage { width: min(1180px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(72px, 12vh, 136px) 0 clamp(72px, 10vh, 120px); }
.cn-life__world, .cn-life__band, .cn-life__slot, .cn-life__panel, .cn-life__gen .cn-life__plinth { display: none; }

.cn-life__motto { position: relative; z-index: 1; margin: 0; font: 700 clamp(2.75rem, 1.1rem + 6.4vw, 7.25rem)/0.94 var(--font-display); letter-spacing: -0.035em; text-align: center; color: var(--forest); text-wrap: balance; }
.cn-life__line { display: block; }

/* The generator: its body, the hero's plinth (only for the hand-off) and a soft contact shadow. */
.cn-life__gen { --shadow: 1; position: relative; z-index: 2; width: min(460px, 76%); margin: clamp(-18px, -1.2vw, -6px) auto 0; isolation: isolate; }
.cn-life__gen img { display: block; width: 100%; height: auto; filter: saturate(0.88) contrast(1.04); }
.cn-life__gen::after { content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: -5%; height: 13%; border-radius: 50%; background: rgb(14 59 42 / 0.55); filter: blur(12px); opacity: calc(var(--shadow) * 0.9); }

.cn-life__intro { max-width: 40ch; margin: 36px auto 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; text-align: center; color: var(--slate); }

.cn-life__steps { display: grid; gap: clamp(56px, 8vh, 96px); margin: clamp(72px, 10vh, 120px) 0 0; padding: 0; list-style: none; }
.cn-life__step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
/* The copy column is a size container so a long stage name ("Commission") scales to fit it instead of running under
   the record beside it. */
.cn-life__copy { container-type: inline-size; }
.cn-life__copy h3 { margin: 0; font: 700 min(clamp(2.25rem, 1.5rem + 2vw, 3.5rem), 15.5cqi)/1 var(--font-display); letter-spacing: -0.025em; color: var(--forest); }
.cn-life__claim { margin: 14px 0 0; font: 600 clamp(1.125rem, 1rem + 0.45vw, 1.4375rem)/1.3 var(--font-display); color: var(--ink); }
.cn-life__copy > p:last-child { max-width: 44ch; margin: 10px 0 0; font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); line-height: 1.55; color: var(--slate); }
.cn-life__copy code { font-size: 0.95em; color: var(--forest); }

.cn-life__scene { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--tint-4); }
/* Descendant, not child: without scripts the photograph is the <noscript> twin inside the figure. */
.cn-life__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-life__placeholder { position: absolute; top: 12px; left: 12px; z-index: 1; max-width: calc(100% - 24px); padding: 4px 9px; border-radius: 4px; background: rgb(247 245 240 / 0.92); font-size: 0.75rem; line-height: 1.4; color: var(--ink); }

/* Each photograph keeps the generator and the people in frame (the prototype's inline object-position values). */
.cn-life__scene--register img { object-position: 75% 50%; }
.cn-life__scene--commission img { object-position: 84% 50%; }
.cn-life__scene--operate img { object-position: 70% 50%; }
.cn-life__scene--maintain img { object-position: 85% 50%; }
.cn-life__scene--transfer img { object-position: 72% 50%; }
.cn-life__scene--retire img { object-position: 80% 50%; }

.cn-life__close { margin-top: clamp(72px, 10vh, 120px); padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 72px); border-radius: 8px; background: var(--forest); color: var(--paper); }
.cn-life__statement { max-width: 14ch; margin: 0; font: 700 clamp(2.25rem, 1.2rem + 3.4vw, 5rem)/1 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.cn-life__body { max-width: 46ch; margin: 22px 0 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: rgb(247 245 240 / 0.86); }
.cn-life__note { margin: 28px 0 0; font-size: 0.75rem; color: rgb(247 245 240 / 0.74); }

@media (max-width: 760px) {
    .cn-life__step { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cn-life__scene { aspect-ratio: 4 / 3; }
}

/* Layers that swap in place (the record's state and site). record.js keeps aria-hidden on every layer but the one on. */
.cn-life__stack { display: grid; }
.cn-life__stack > * { grid-area: 1 / 1; opacity: 0; }
.cn-rec .cn-life__stack > * { transition: opacity 0.3s ease; }
.cn-life__stack > .is-on { opacity: 1; }

/* ================================================================================================
   The record (static: complete, after the stages)
   ================================================================================================ */

/* isolation keeps the row connectors (z-index: -1) above the record's own background in the static sequence too. */
.cn-rec { position: relative; isolation: isolate; width: min(420px, 100%); margin: clamp(56px, 8vh, 96px) auto 0; overflow: hidden; border-radius: 8px; background: var(--paper); color: var(--forest); box-shadow: 0 36px 72px -40px rgb(14 59 42 / 0.6), 0 0 0 1px rgb(14 59 42 / 0.08); }
.cn-rec header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px; background: var(--forest); }
.cn-rec header code { font-size: 1.125rem; white-space: nowrap; color: var(--paper); }
.cn-rec header .cn-life__stack { padding: 0; border: 0; border-radius: 0; }
.cn-rec header .cn-life__stack > b { padding: 2px 9px; border: 1px solid var(--signal); border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; color: var(--signal); justify-self: end; }
.cn-rec__id { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgb(14 59 42 / 0.12); }
.cn-rec__thumb { position: relative; flex: none; display: grid; place-items: center; width: 116px; aspect-ratio: 623 / 300; }
.cn-rec__thumb img { display: block; width: 100%; height: auto; filter: saturate(0.88) contrast(1.04); }
.cn-rec__id p { display: grid; gap: 2px; margin: 0; }
.cn-rec__id strong { font: 600 1.125rem/1.2 var(--font-display); }
.cn-rec__id p .cn-life__stack > b { font-size: 0.875rem; font-weight: 400; color: var(--slate); }
.cn-rec__rows { margin: 0; padding: 6px 0; list-style: none; }
/* Major 10, RESP-05: the label keeps its own width and the value takes what is left, wrapping (right-aligned) rather
   than running into the label; a wrapped row simply grows. */
.cn-rec__rows li { --row: 40px; position: relative; display: grid; grid-template-columns: 12px max-content minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: var(--row); padding: 0 16px; font-size: 0.8125rem; transition: background-color 0.3s ease; }
.cn-rec__rows li::before { content: ""; width: 10px; height: 10px; border: 2px solid rgb(14 59 42 / 0.6); border-radius: 50%; transition: border-color 0.3s ease, background-color 0.3s ease; }
/* The connector runs between the two rows' nodes, whatever the rows' heights. */
.cn-rec__rows li + li::after { content: ""; position: absolute; left: 21px; top: calc(-50% + 7px); width: 2px; height: calc(100% - 14px); background: rgb(14 59 42 / 0.16); z-index: -1; }
.cn-rec__rows span { font-weight: 500; white-space: nowrap; color: var(--slate); transition: color 0.3s ease; }
.cn-rec__rows b { min-width: 0; padding-block: 4px; font-weight: 500; line-height: 1.35; text-align: right; overflow-wrap: anywhere; color: var(--forest); transition: opacity 0.35s ease, transform 0.35s ease; }
.cn-rec__rows code { font-size: 0.8125rem; white-space: nowrap; }
.cn-rec__rows li.is-done::before { border-color: var(--gold-text); }
.cn-rec__rows li.is-done span { color: var(--forest); }
.cn-rec__rows li.is-active { background: var(--tint-4); }
.cn-rec__rows li.is-active::before { border-color: var(--gold); background: var(--gold); }
.cn-rec__rows li.is-active span { font-weight: 600; color: var(--forest); }
.cn-rec footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 16px 12px; border-top: 1px solid rgb(14 59 42 / 0.12); font-size: 0.75rem; color: rgb(14 59 42 / 0.74); }
.cn-rec footer code { font-size: 0.75rem; }

@media (max-width: 400px) {
    .cn-rec__rows li { padding: 0 14px; }
    .cn-rec__rows li + li::after { left: 19px; }
}

/* ================================================================================================
   Lifecycle · the pinned stage (record.js adds .is-motion; .is-overlap on wide screens)
   ================================================================================================ */

.cn-life.is-motion { height: var(--life-h, 820vh); }
.cn-life.is-motion .cn-life__stage {
    --inset: 24px; --top: calc(var(--header) + 16px); --right: 72px;
    --m-fs: min(7.4vw, 11.8svh);
    --gm-w: min(33vw, 100svh, 540px); --gm-h: calc(var(--gm-w) * 300 / 623); --gm-cy: 57%;
    /* Pinned stages clip rather than hide, so a focused element inside can never scroll the stage itself. */
    position: sticky; top: 0; width: auto; height: 100vh; height: 100svh; margin: 0; padding: 0; overflow: clip; background: var(--paper);
}
@media (max-width: 1100px) { .cn-life.is-motion .cn-life__stage { --right: var(--inset); } }

/* The hand-off: the stage lies over the hero's last frame (its height is measured into --hero-box by record.js). */
.cn-life.is-overlap { margin-top: calc(-1 * var(--hero-box, max(100svh, 720px))); background: transparent; }
.cn-life.is-overlap .cn-life__world { display: block; position: absolute; top: 0; right: 0; left: 0; z-index: 5; height: var(--hero-box, max(100%, 720px)); transform: scale(1.085); transform-origin: 50% 62%; pointer-events: none; }
.cn-life.is-overlap .cn-life__world img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; filter: saturate(0.88) contrast(1.04); }
/* A copy of the hero's own hand-off shade (landing-precision.css .marketing-hero-handoff), present only for the first
   instant so the two frames match exactly. It is the page's one gradient and exists only as that copy. */
.cn-life.is-overlap .cn-life__band { display: block; position: absolute; right: 0; left: 0; z-index: 7; top: calc(var(--hero-box, max(100%, 720px)) - 28vh); height: 28vh; background: linear-gradient(180deg, rgb(8 46 34 / 0), #082e22); pointer-events: none; }
.cn-life.is-overlap .cn-life__gen .cn-life__plinth { display: block; position: absolute; left: -23.76%; top: 92.67%; width: 146.7%; max-width: none; height: auto; }

.cn-life.is-motion .cn-life__slot { display: block; position: absolute; visibility: hidden; pointer-events: none; aspect-ratio: 623 / 300; }
.cn-life.is-motion .cn-life__slot--motto { left: calc(50% - var(--gm-w) / 2); top: calc(var(--gm-cy) - var(--gm-h) / 2); width: var(--gm-w); }
.cn-life.is-motion .cn-life__gen { position: absolute; top: 0; left: 0; z-index: 6; width: var(--gen-w, 400px); margin: 0; transform-origin: 0 0; will-change: transform; }

.cn-life.is-motion .cn-life__motto { position: absolute; inset: 0; z-index: 2; font-size: var(--m-fs); pointer-events: none; }
.cn-life.is-motion .cn-life__line { position: absolute; right: 0; left: 0; white-space: nowrap; }
.cn-life.is-motion .cn-life__line:first-child { bottom: calc(100% - var(--gm-cy) + var(--gm-h) / 2 - var(--gm-h) * var(--l1-overlap, 0.14)); }
.cn-life.is-motion .cn-life__line:last-child { top: calc(var(--gm-cy) + var(--gm-h) / 2 + var(--gm-h) * 0.02); }
.cn-life.is-motion .cn-life__intro { position: absolute; right: 0; left: 0; z-index: 3; top: calc(var(--gm-cy) + var(--gm-h) / 2 + var(--gm-h) * 0.02 + var(--m-fs) * 0.94 + 30px); margin: 0 auto; }

.cn-life.is-motion .cn-life__steps { position: absolute; inset: 0; display: block; margin: 0; }
.cn-life.is-motion .cn-life__step { display: block; }
.cn-life.is-motion .cn-life__copy { position: absolute; z-index: 8; opacity: 0; }
.cn-life.is-motion .cn-life__copy h3 { font-size: min(clamp(2.5rem, 1.4rem + 2.6vw, 4.25rem), 15.5cqi); }
.cn-life.is-motion .cn-life__scene { position: absolute; aspect-ratio: auto; }

/* Major 10: the close is a column in normal flow. The statement and body sit centred in the space above the note, and
   the note follows them, so larger text or spacing pushes the note down instead of under the body. */
.cn-life.is-motion .cn-life__close { --note-gap: 48px; position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; margin: 0; padding: var(--top) clamp(32px, 8vw, 128px) calc(var(--inset) + var(--note-gap)); border-radius: 0; }
/* A spacer as tall as the note's block keeps the statement where the prototype centred it; it gives way first. */
.cn-life.is-motion .cn-life__close::before { content: ""; flex: 0 1 calc(1.125rem + 28px + var(--note-gap)); margin-bottom: auto; }
.cn-life.is-motion .cn-life__statement { max-width: 10ch; font-size: clamp(3rem, 1.6rem + 4vw, 5.75rem); }
@media (min-width: 1024px) { .cn-life.is-motion .cn-life__body { max-width: min(46ch, calc(100vw - 2 * clamp(32px, 8vw, 128px) - 480px)); } }
.cn-life.is-motion .cn-life__note { margin-top: auto; padding-top: 28px; }

/* ---------- Opening E: the record on the seam ---------- */

.cn-life--record.is-motion .cn-life__stage {
    --seam: 46%; --rec-w: clamp(350px, 27vw, 410px); --rec-h: 432px;
}
.cn-life--record.is-motion .cn-life__panel { display: block; position: absolute; z-index: 1; left: var(--inset); top: var(--top); bottom: var(--inset); width: calc(var(--seam) - var(--inset) - 6px); border-radius: 10px; background: var(--tint-4); }
.cn-life--record.is-motion .cn-life__scene { left: calc(var(--seam) + 6px); right: var(--right); top: var(--top); bottom: var(--inset); z-index: 1; border-radius: 10px; opacity: 0; }
.cn-life--record.is-motion .cn-life__scene img { transform-origin: 50% 60%; }
.cn-life--record.is-motion .cn-life__placeholder { top: auto; left: auto; right: 14px; bottom: 14px; }
.cn-life--record.is-motion .cn-life__copy { left: calc(var(--inset) + clamp(32px, 3.4vw, 56px)); top: calc(var(--top) + clamp(32px, 3.4vw, 56px)); width: min(400px, calc(var(--seam) - var(--rec-w) / 2 - var(--inset) - clamp(32px, 3.4vw, 56px) - 32px)); }

.cn-life--record.is-motion .cn-rec { position: absolute; z-index: 21; left: calc(var(--seam) - var(--rec-w) / 2); top: calc(var(--top) + (100% - var(--top) - var(--inset) - var(--rec-h)) / 2); width: var(--rec-w); margin: 0; }
.cn-life--record.is-motion .cn-rec__thumb img { visibility: hidden; }
.cn-life--record.is-motion .cn-life__slot--thumb { position: absolute; inset: 0; width: 100%; }
.cn-life--record.is-motion .cn-life__slot--close { left: auto; right: clamp(32px, 8vw, 128px); top: calc(50% - var(--rec-h) / 2); width: var(--rec-w); aspect-ratio: auto; height: var(--rec-h); }
.cn-life--record.is-motion .cn-rec__rows li:not(.is-done):not(.is-active) b { opacity: 0; transform: translateX(8px); }

@media (min-width: 1024px) and (max-height: 820px) {
    .cn-life--record.is-motion .cn-life__stage { --rec-h: 372px; }
    .cn-life--record.is-motion .cn-rec__id { padding: 10px 16px; }
    .cn-life--record.is-motion .cn-rec__rows li { --row: 34px; }
    .cn-life--record.is-motion .cn-life__copy h3 { font-size: min(clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem), 15.5cqi); }
}

@media (max-width: 1023px) {
    .cn-life.is-motion .cn-life__stage {
        --inset: 12px; --top: calc(var(--header) + 8px);
        --m-fs: min(10.6vw, 7.6svh);
        --gm-w: min(70vw, 460px); --gm-cy: 52%; --l1-overlap: 0.08;
    }
    .cn-life.is-motion .cn-life__line { white-space: normal; padding: 0 16px; text-wrap: balance; }
    .cn-life.is-motion .cn-life__intro { padding: 0 24px; font-size: 1rem; }
    .cn-life.is-motion .cn-life__close { --note-gap: 64px; padding: calc(var(--top) + 24px) 24px calc(var(--inset) + var(--note-gap)); }

    .cn-life--record.is-motion .cn-life__stage { --rec-w: auto; --photo-b: 64%; }
    .cn-life--record.is-motion .cn-life__panel { display: none; }
    .cn-life--record.is-motion .cn-life__scene { left: var(--inset); right: var(--inset); top: var(--top); bottom: var(--photo-b); }
    .cn-life--record.is-motion .cn-life__placeholder { right: auto; left: 10px; top: 10px; bottom: auto; }
    .cn-life--record.is-motion .cn-rec { left: calc(var(--inset) + 10px); right: calc(var(--inset) + 10px); width: auto; top: calc(100% - var(--photo-b) - 36px); }
    .cn-life--record.is-motion .cn-rec header { height: 40px; }
    .cn-life--record.is-motion .cn-rec__id { padding: 8px 14px; }
    .cn-life--record.is-motion .cn-rec__thumb { width: 84px; }
    .cn-life--record.is-motion .cn-rec__rows { padding: 2px 0; }
    .cn-life--record.is-motion .cn-rec__rows li { --row: 28px; padding: 0 14px; font-size: 0.75rem; }
    .cn-life--record.is-motion .cn-rec__rows li + li::after { left: 19px; }
    .cn-life--record.is-motion .cn-rec__rows b { padding-block: 2px; }
    .cn-life--record.is-motion .cn-rec footer { display: none; }
    .cn-life--record.is-motion .cn-life__copy { left: 24px; right: 24px; width: auto; top: auto; bottom: calc(var(--inset) + 68px); }
    .cn-life--record.is-motion .cn-life__copy h3 { font-size: min(clamp(1.875rem, 1.3rem + 2.6vw, 2.5rem), 15.5cqi); }
    .cn-life--record.is-motion .cn-life__claim { margin-top: 4px; font-size: 1rem; }
    /* A11Y-11: the stage's sentence stays; record.js falls back to the static sequence where it cannot fit. */
    .cn-life--record.is-motion .cn-life__copy > p:last-child { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; }
    .cn-life--record.is-motion .cn-life__slot--close { display: none; }
}
@media (max-width: 699px) {
    /* The note may run to the screen edge, as the prototype's positioned note did. */
    .cn-life.is-motion .cn-life__note { margin-right: -24px; }
}
@media (max-width: 1023px) and (max-height: 800px) {
    /* Shorter phones keep the stage's sentence by giving the photograph a little less height. */
    .cn-life--record.is-motion .cn-life__stage { --photo-b: 67%; }
    .cn-life--record.is-motion .cn-life__copy { bottom: calc(var(--inset) + 40px); }
}
@media (min-width: 700px) and (max-width: 1023px) {
    .cn-life--record.is-motion .cn-life__stage { --photo-b: 60%; }
    .cn-life--record.is-motion .cn-rec { left: 50%; right: auto; width: 460px; margin-left: -230px; }
    .cn-life--record.is-motion .cn-rec__rows li { --row: 34px; font-size: 0.8125rem; }
    .cn-life--record.is-motion .cn-life__copy { left: 48px; right: 48px; bottom: calc(var(--inset) + 68px); }
    .cn-life--record.is-motion .cn-life__copy > p:last-child { font-size: 1.0625rem; }
}

/* ================================================================================================
   Chapter rail
   Major 4: each link is exactly its 34px dash, and the label is positioned beside it without taking clicks, so the rail
   never catches clicks meant for the trial CTA or the "Maintained" tab. A11Y-12: the rail follows the hero in the DOM
   and is never visibility:hidden; while hidden it is transparent and click-through, and it shows whenever it holds
   keyboard focus.
   ================================================================================================ */

.cn-rail { --rail-ink: var(--forest); --rail-accent: var(--gold); position: fixed; z-index: 70; top: 50%; right: 18px; display: grid; gap: 2px; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out); }
.cn-rail.is-visible, .cn-rail:focus-within { opacity: 1; pointer-events: auto; }
.cn-rail.on-dark { --rail-ink: var(--paper); --rail-accent: var(--signal); }
.cn-rail__link { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 34px; height: 24px; color: var(--rail-ink); text-decoration: none; }
.cn-rail__link::after { content: ""; width: 34px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.4; transform-origin: right; transform: scaleX(0.41); transition: transform 0.45s var(--ease-out), opacity 0.3s ease, background-color 0.3s ease; }
.cn-rail__label { position: absolute; top: 50%; right: calc(100% + 12px); padding: 4px 8px; border-radius: 4px; background: var(--rail-ink); color: var(--paper); font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; translate: 8px -50%; pointer-events: none; transition: opacity 0.3s ease, translate 0.45s var(--ease-out); }
.cn-rail.on-dark .cn-rail__label { color: var(--forest); }
.cn-rail__link:hover::after, .cn-rail__link:focus-visible::after { transform: scaleX(0.7); opacity: 1; }
.cn-rail__link:hover .cn-rail__label, .cn-rail__link:focus-visible .cn-rail__label { opacity: 1; translate: 0 -50%; }
.cn-rail__link[aria-current]::after { transform: scaleX(1); opacity: 1; background: var(--rail-accent); }
.cn-rail__link:focus-visible { outline: none; }
.cn-rail__link:focus-visible .cn-rail__label { outline: 2px solid var(--rail-accent); outline-offset: 2px; }
@media (max-width: 1100px) { .cn-rail { display: none; } }

/* Preserve the original centered lifecycle composition with a lighter contact shadow. */
.cn-life__gen::after { background: rgb(14 59 42 / 0.25); height: 9%; bottom: -4%; filter: blur(14px); }
.cn-life.is-motion .cn-life__line:first-child { bottom: calc(100% - var(--gm-cy) + var(--gm-h) / 2 + clamp(18px, 2.5svh, 32px)); }