/* =====================================================================
   styles.css - the TENANT BRAND LAYER. lumos.css is brand-agnostic and
   consumes the seeds defined here. Load order: lumos.css THEN styles.css.

   This is the STARTER DEFAULT: the seed values are the Lumos 2.2.3 export
   defaults, so the framework renders identically to the published template
   out of the box. A tenant duplicates the starter and replaces these.

   To brand a tenant, edit only:
     1. the 5 swatch seeds + font family below (the derived ramp follows),
     2. (optional) the .u-theme-* role mappings, if the defaults need changing,
     3. add @font-face via fonts.css and point --_typography---font--primary-family at it,
     4. add the per-site components at the bottom.
   Do NOT edit lumos.css - it stays byte-identical across every tenant.
   ===================================================================== */

:root {
  /* --- Brand seeds — Kyoom, "The Digital Compass". Read from the Webflow
     project's real --swatch--* tokens (DESIGN.md §4). The brand-100..900 ramp +
     brand-text are color-mixed from brand-500 in lumos.css; brand-800 ≈ #572608
     (warm dark brown) = body text. --- */
  --swatch--brand-500: #d95f13;   /* Kyoom orange (identity) */
  --swatch--dark-900:  #1f1d1e;   /* darkest surface / dark-section bg */
  --swatch--dark-800:  #2f2b2d;   /* raised dark surface */
  --swatch--light-100: #ffffff;   /* pure white (raised cards on cream) */
  --swatch--light-200: #ebebeb;   /* cool grey surface band / hairline */
  --swatch--white-linen: #faf5ee; /* CANVAS — Kyoom cream (the real --_theme---background) */

  /* --- Fonts (self-hosted, see fonts.css — no Google Fonts API). Confirmed against
     the live site's COMPUTED styles: BASE/body = Aleo, SECONDARY/headings = Inter.
     Wired via the starter's CO-8 "secondary typography mode": base = the primary set,
     headings switch to the secondary set (applied in the heading block below). Each font
     carries its OWN line-box trim (cap/baseline sit differently; a mismatched trim clips).
     All values lifted verbatim from the Kyoom Webflow Typography collection (base +
     Secondary modes). --- */
  /* base mode = body (Aleo) */
  --_typography---font--primary-family: "Aleo", Georgia, "Times New Roman", serif;
  --_typography---font--primary-trim-top: .43em;     /* Aleo */
  --_typography---font--primary-trim-bottom: .3em;   /* Aleo */
  /* secondary mode = headings (Inter) — consumed via CO-8 by the heading block below */
  --_typography---font--secondary-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --_typography---font--secondary-trim-top: .37em;     /* Inter */
  --_typography---font--secondary-trim-bottom: .37em;  /* Inter */
  --_typography---font--emphasis-weight: 200;          /* CO-18: .u-heading-emphasis accent = Inter extra-light (200), upright */
}

/* ---------------------------------------------------------------------
   Theme role overrides — the FULL set of Kyoom's divergences from stock Lumos,
   lifted verbatim from the Kyoom Webflow export's compiled .u-theme-* blocks (the
   real Theme variable collection: Base / Dark / Brand modes). Only the roles that
   DIFFER from stock are listed; everything else inherits stock (which already reads
   the Kyoom swatches). Overlay (CO-1) + nav--logo (CO-6) live in lumos-native.css.
   Pages default to .u-theme-light (cream). Verified role-by-role against the export.
   --------------------------------------------------------------------- */
.u-theme-light {                                            /* Base mode */
  --_theme---background:    var(--swatch--white-linen);     /* cream canvas        (stock: light-200) */
  --_theme---background-2:  var(--swatch--light-200);       /* grey raised surface (stock: light-100/white) */
  --_theme---text:          var(--swatch--brand-800);       /* warm brown ink      (stock: dark-900) */
  --_theme---heading-accent: var(--swatch--brand-500);      /* vivid orange accent (stock: brand-600) */
  --_theme---nav--background: color-mix(in srgb, var(--swatch--white-linen) 20%, transparent); /* glassy nav (stock: background-2) */
}
.u-theme-dark {                                             /* Dark mode — WARM near-black, not neutral */
  --_theme---background:    var(--swatch--brand-900);       /* warm brown-black    (stock: dark-900) */
  --_theme---background-2:  var(--swatch--brand-800);       /* warm raised surface (stock: dark-800) */
}
.u-theme-brand {                                            /* Brand mode (orange section) */
  --_theme---background-2:  var(--swatch--brand-600);       /* (stock: brand-400) */
}
/* button-primary: white (light-100) label in Base + Dark modes (Kris's spec; matches the
   export — white-on-orange over Lumos' near-black default). Brand mode keeps stock
   (brand-500 label on brand-text fill). `.nav_component` is included because the starter's
   nav re-declares its own button-primary--text (to brand-text/dark) — the export's nav does
   NOT, so the nav CTA should inherit the white label too. */
.u-theme-light, .u-theme-dark, .nav_component { --_theme---button-primary--text: var(--swatch--light-100); }

/* ---------------------------------------------------------------------
   Headings = the SECONDARY typography MODE = Inter, via the starter's secondary
   font routing (styles.css "secondary font routing"). Re-points the primary-*
   tokens the text-styles read to the secondary set, so headings render in Inter
   WITH Inter's own trim while body stays Aleo. Keyed off the v-typography-* /
   u-text-style-* heading VARIANTS, NOT .u-heading (the typography normalisation
   merges .u-heading into .u-text, so a .u-heading hook would silently drop). Bold
   weight is Kyoom's choice. The <em> display accent inside a heading is Inter LIGHT
   (200) and UPRIGHT (override Lumos' italic).
   --------------------------------------------------------------------- */
.v-typography-display, .v-typography-h1, .v-typography-h2, .v-typography-h3,
.v-typography-h4, .v-typography-h5, .v-typography-h6,
.u-text-style-display, .u-text-style-h1, .u-text-style-h2,
.u-text-style-h3, .u-text-style-h4, .u-text-style-h5, .u-text-style-h6 {
  --_typography---font--primary-family:      var(--_typography---font--secondary-family);
  --_typography---font--primary-trim-top:    var(--_typography---font--secondary-trim-top);
  --_typography---font--primary-trim-bottom: var(--_typography---font--secondary-trim-bottom);
  --_text-style---font-weight: var(--_typography---font--primary-bold);
}
/* Mixed-weight headings use the .u-heading-emphasis span (CO-18 / H5), NOT <em> — so <em> stays
   free for genuine italics (D4). The old <em>-overload rule was retired in the fresh build. */

/* Kyoom hides the eyebrow's leading marker bar — the eyebrow is text-only on this brand. */
.u-eyebrow-marker { display: none; }

/* ---------------------------------------------------------------------
   Per-site components go below this line.
   --------------------------------------------------------------------- */

/* Testimonial author row + avatar (starter component; used by the Home testimonial
   slider and the components-page kit). The avatar is optional - a quote card without
   `.testimonial_author` is the no-avatar variant. */
.testimonial_author { display: flex; align-items: center; }  /* gap + top spacing = u-gap-2 + u-margin-top-3 utilities in the markup */
.testimonial_avatar { width: 3rem; height: 3rem; border-radius: 100vw; object-fit: cover; flex: 0 0 auto; background-color: var(--_theme---background-2); }
/* name->role spacing is a u-margin-top-* utility on the role in the markup (not custom
   CSS here); .testimonial_role only carries the muted styling. */
.testimonial_role { opacity: 0.65; }

/* Logo marquee slot - fixed-size placeholder logos a tenant swaps for real ones.
   Width is what makes the strip overflow the container, so the marquee actually scrolls. */
.marquee_logo { width: 7.5rem; height: 2.5rem; object-fit: contain; opacity: 0.5; flex: 0 0 auto; }

/* Card variants + surface controls (starter) - all attributes on .card_primary_wrap.
   The VARIANT says what the card holds; BACKGROUND + PADDING are independent controls
   shared across every variant, so they compose freely (e.g. a stat with no fill/pad =
   bare numbers that still get card_primary_header's spacing). A variant is an attribute
   swap on the same shell, mirroring Lumos's own card-type attribute.

   Content variants:
     data-card-variant="no-button" - hide the action button + click overlay
     data-card-variant="stat"      - big number + small caption (no image/button)
     data-card-variant="quote"     - quote-first card with an author row (.testimonial_*)
   Surface controls (default = filled + padded, the standard card):
     data-card-background="false"  - drop the fill; the card sits on the section
     data-card-padding="false"     - drop the inner padding */
[data-card-variant="no-button"] .button_main_wrap,
[data-card-variant="no-button"] .clickable_wrap { display: none; }
[data-card-variant="stat"] .card_primary_title { line-height: 1; }
[data-card-background="false"] .card_primary_element { background-color: transparent; }
[data-card-padding="false"] .card_primary_element { padding: 0; }
[data-card-border="true"] .card_primary_element { border-color: var(--_theme---border); }   /* H1: static theme hairline (outline cards) */

/* v-layout-card media (the CTA hero-card): stock Lumos fades the image column to opacity .5 (a faded
   background look). Kyoom shows it near-full (.85) so the photo reads as a real hero; the media-overlay
   (CO-1 radial) is the scrim, not the fade. Pairs with CO-23 (media fills the card, cover/centred).
   ONLY the media column (column-2) — column-1 holds the CTA content/buttons and must stay fully opaque
   (a stray column-1 in this selector was fading the buttons; see the CTA intro sequence). */
.u-layout-column-2:where(.v-layout-card) { opacity: .85; }

/* Inline newsletter form (starter) - email field + submit on one row, capped width,
   centred. Wraps to stacked on narrow screens (the field's flex-basis triggers it). */
.newsletter_form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: 34rem; text-align: left; }  /* gap + centring = u-gap-2 + u-margin-inline-auto utilities in the markup */
.newsletter_field { flex: 1 1 16rem; }
.newsletter_field .form_field { width: 100%; }

/* Article reading column (single-post template) - constrain the rich-text body to a
   comfortable reading measure. SIZING only; centring is u-margin-inline-auto in the
   markup, vertical rhythm is the w-richtext defaults + u-margin-* utilities. */
/* width:100% so every section shares ONE box inside the centring container
   (shrink-wrap made the header (24ch h1) and body (60ch) centre at different edges) */
.article_body { max-width: 50rem; width: 100%; }

/* ===== CUSTOM OVERRIDE [CO-7]: editorial timeline - dated rail (layout from Growth & Airway) =====
   A chronological rail: the year sits in the left gutter, a hollow node dot rides the line, and the
   content (title + bullets/prose + sources) runs to the right. Net-new starter component (ADDITION).
   This CSS is STRUCTURE ONLY (rail line, node dot, gutter positioning) - ALL text is authored with
   real Lumos typography components (u-text + v-typography-* / u-rich-text), never bespoke font CSS,
   so it themes + brands automatically. In a tenant the entries are CMS-driven; the starter ships a
   static demo (pages-src/timeline.html). --rail-x is the line's x. Markup:
     .tl_rail > .tl_entry ( .tl_year > (u-text v-typography-h5 | u-text v-typography-text-small)
       | .tl_node | .tl_body > (u-text v-typography-h5 | u-text u-rich-text) + .tl_srcs > a.tl_src )
   On narrow viewports the gutter collapses (year above content). Tracked in CO-7. ===== */
/* --timeline--fill is a DISTINCT, overridable token for the scroll-drawn thread + dot + active node.
   It defaults to the brand swatch - which is exactly the colour the button-main-link hover underline
   (--_theme---text-link--border-hover) resolves to on brand/dark themes - so the thread reads as the
   brand accent on EVERY theme (the stock link-hover token is ink on LIGHT themes, which made the
   thread render dark). A tenant can override --timeline--fill (on .tl_rail or a theme) to decouple. */
.tl_rail { --rail-x: 7.25rem; --timeline--fill: var(--swatch--brand-500); position: relative; }
.tl_rail::before { content: ""; position: absolute; left: var(--rail-x); top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--_theme---border); }
.tl_entry { position: relative; padding-left: calc(var(--rail-x) + 2.25rem); padding-bottom: var(--_spacing---space--6); min-height: 2.6rem; }
.tl_entry:last-child { padding-bottom: 0; }
.tl_year { position: absolute; left: 0; top: 0.05rem; width: calc(var(--rail-x) - 1.5rem); display: flex; flex-direction: column; align-items: flex-end; gap: var(--_spacing---space--1); text-align: right; }
.tl_node { position: absolute; left: var(--rail-x); top: 0.5rem; width: 0.72rem; height: 0.72rem; border-radius: 50%; background: var(--_theme---background); border: 1.5px solid var(--_theme---text); transform: translate(-50%, -50%); z-index: 2; transition: background .35s, border-color .35s, transform .35s; }
/* scroll-drawn thread: a fill line + a travelling dot that soft-snaps to each node (driven by scripts.js wireTimeline; both stay 0/hidden under prefers-reduced-motion or no-JS) */
.tl_fill { position: absolute; left: var(--rail-x); top: 0.6rem; width: 2px; height: 0; transform: translateX(-0.5px); background: var(--timeline--fill); opacity: .5; pointer-events: none; transition: height .22s cubic-bezier(.2,.7,.3,1); z-index: 1; }
.tl_dot { position: absolute; left: var(--rail-x); top: 0; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--timeline--fill); transform: translate(-50%, -50%); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--timeline--fill) 15%, transparent); opacity: 0; z-index: 3; pointer-events: none; transition: top .22s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.tl_dot.is-connected { animation: tl-pulse 1.4s ease-out infinite; }
@keyframes tl-pulse { 0% { box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--timeline--fill) 22%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.75rem color-mix(in srgb, var(--timeline--fill) 0%, transparent); } }
.tl_node.is-active { background: var(--timeline--fill); border-color: var(--timeline--fill); transform: translate(-50%, -50%) scale(1.08); }
.tl_body { display: flex; flex-direction: column; gap: var(--_spacing---space--3); }
.tl_srcs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.tl_src { font-size: 0.72rem; color: color-mix(in srgb, var(--_theme---text) 55%, transparent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.2s; }
.tl_src::before { content: "Source:"; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.62rem; }
.tl_src:hover { color: var(--_theme---heading-accent); }
@media (max-width: 47.9375rem) {
  .tl_rail { --rail-x: 0.5rem; }
  .tl_entry { padding-left: 1.85rem; }
  .tl_year { position: static; width: auto; align-items: flex-start; text-align: left; margin-bottom: var(--_spacing---space--2); }
  .tl_node { top: 0.55rem; }
}

/* =====================================================================
   NAV polish (Kyoom) - tenant overrides on the starter nav. The floating
   pill, sizing/radius + primary-small CTA are already in lumos.css (block 7);
   these are the brand finesses Kris specified.
   ===================================================================== */

/* Logo a touch smaller than the starter 6rem. */
.nav_desktop_logo, .nav_mobile_logo { width: 5.5rem; }

/* Dropdown link horizontal padding = half of space-5 (tighter than the
   starter's space-6/2). */
.nav_dropdown_link { padding-left: calc(var(--_spacing---space--5) / 2); padding-right: calc(var(--_spacing---space--5) / 2); }

/* Dropdown links: sibling-fade on hover/focus, same mechanism as the footer
   link groups. The <ul> carries data-trigger="group", each <li>
   data-trigger="hover-other focus-other"; lumos.css drives --_trigger---off on
   the non-hovered siblings, which we consume here as opacity. */
.nav_dropdown_link { opacity: calc(1 - .45 * var(--_trigger---off, 0)); transition: opacity .12s ease; }

/* Active / current-page indicator. Desktop pill: a small brand dot centred under the item.
   Mobile drawer (CO-25 = full-width, text-left rows) would float the dot mid-row, so there the
   current row's text takes the brand colour instead. JS (wireActiveNav, scripts.js) adds
   .is-current to the matching top-level link / dropdown parent (works for clean + preview URLs). */
/* Dot anchors on the LINK, not .nav_links_text — the text carries u-text-style-* whose cap-height
   trim owns ::after, so a dot there collides (squished box + shifts the label). The link is
   height:100% + align-items:center, so offset from its centre: text-bottom is ~0.6rem below centre,
   place the dot just under it. */
.nav_links_wrap.v-menu-desktop .nav_links_link.is-current::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, 0.85rem);
  width: 0.3rem; height: 0.3rem; border-radius: 100vw; background-color: var(--swatch--brand-500);
}
/* Dropdown toggles (summary) carry a chevron + flex gap right of the label, so the
   wrapper centre sits (chevron + gap) / 2 right of the WORD's centre — recentre the dot
   on the word. Word width cancels out, so this is exact for any label length. Chevron
   box = 0.65rem (the pill-nav .nav_links_svg override at lumos.css ~8690 — NOT the 1rem
   base rule); the gap uses the live space--2 token (a fluid clamp, 0.625–0.75rem) so the
   offset tracks the responsive gap at every viewport. Plain links (no chevron) keep 50%. */
.nav_links_wrap.v-menu-desktop summary.nav_links_link.is-current::after {
  transform: translate(calc(-50% - (0.65rem + var(--_spacing---space--2)) / 2), 0.85rem);
}
.nav_mobile_menu_wrap .nav_links_link.is-current .nav_links_text { color: var(--swatch--brand-500); }
/* Current page inside an open dropdown (a Services/Industries child): tint + keep it lit.
   The parent toggle also gets .is-current (the dot above), so the section reads as active
   even while the dropdown is closed. wireActiveNav sets both. */
.nav_dropdown_link.is-current .nav_dropdown_text { color: var(--swatch--brand-500); opacity: 1; }

/* =====================================================================
   FOOTER polish (Kyoom)
   ===================================================================== */

/* NAP/contact block — engine-rendered <address class="footer_contact"> from
   kyoom-chrome-render.js (napHtml). It ships u-margin-top-6 above but nothing
   below, so the next block in the footer content column (Follow-us / the link
   groups on the stacked layout) sits flush against the email line. Mirror the
   top gap. Single carrier, engine-minted; no other rule targets this class.
   Row gap: the address lines are bare .footer_link_text divs with no spacing
   mechanism of their own (the framework zeroes margins, and the tel/email
   .footer_link_wrap anchors are inline, so their padding-block has no layout
   effect) — without this the lines set solid (Grant, 17 Aug 2026). */
.footer_contact {
  display: flex;
  flex-direction: column;
  row-gap: var(--_spacing---space--1);
  margin-bottom: var(--_spacing---space--6);
}

/* ---------------------------------------------------------------------
   Pill-expand (starter component) — a title chip that reveals a description.
   Desktop (hover-capable): description collapsed, reveals on hover/focus (grid-rows 0fr->1fr).
   Base (no hover + no JS) = OPEN, so it's progressive-enhancement safe (content always readable).
   Touch: wirePillExpand (scripts.js) adds .pill_expand--tap (collapse) + toggles .is-open on tap,
   with aria-expanded. Mirrors the live Kyoom hover pill and adds the mobile tap. */
.pill_expand {
  flex: 0 0 auto; align-self: start; text-align: left; cursor: pointer; border-radius: var(--radius--main);
  background-color: color-mix(in hsl, currentColor 10%, transparent);
  padding: var(--_spacing---space--4);
}
/* mask width:0 + min-width:100% ties the chip's width to its HEADING (the description
   contributes 0 to the chip's intrinsic width, then fills the heading-width box + wraps). */
.pill_expand_mask { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms ease; width: 0; min-width: 100%; }
.pill_expand_clip { overflow: hidden; }
/* Even padding: zero the title's trailing .u-text margin, and let the description carry the
   title->body gap (space-4). Collapsed, the description + its margin are clipped away, so the
   chip's box stays symmetric — no per-instance u-margin utilities needed in the markup. */
.pill_expand > .u-text { margin-bottom: 0; }
.pill_expand_clip > .u-text { margin-top: var(--_spacing---space--4); margin-bottom: 0; }
@media (hover: hover) {
  .pill_expand .pill_expand_mask { grid-template-rows: 0fr; }
  .pill_expand:is(:hover, :focus-within) .pill_expand_mask { grid-template-rows: 1fr; }
}
.pill_expand--tap .pill_expand_mask { grid-template-rows: 0fr; }
.pill_expand--tap.is-open .pill_expand_mask { grid-template-rows: 1fr; }

/* Scroll behaviour: at the top the pill sits on a solid light background; once
   the page scrolls it becomes frosted glass (translucent + blur). JS
   (wireNavScroll) toggles .is-scrolled on .nav_component past a small threshold. */
.nav_desktop_contain, .nav_mobile_layout {
  background-color: var(--_theme---background);
  transition: background-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}
.nav_component.is-scrolled .nav_desktop_contain,
.nav_component.is-scrolled .nav_mobile_layout {
  background-color: color-mix(in srgb, var(--_theme---background) 55%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------------------
   Link-button underline. Stock Lumos translateY(100%)s the animated line so on
   hover it stacks just BELOW the static hairline border - reads as a thicker,
   offset double line. Drop the translateY and sit the line on the border instead,
   so the hover sweep is a single clean line at --border-width--main (in the brown
   text-link--border-hover colour). Scoped to the link variant (only it has a line).
   --------------------------------------------------------------------- */
.button_main_line:where(.v-button-main-link) {
  transform: scaleX(calc(100% * var(--_trigger---off)));
  inset: auto 0% calc(var(--border-width--main) * -1);
}

/* ---------------------------------------------------------------------
   Mistake list · diagnosis rail (industry pages, section 4) — a self-diagnosis
   checklist crossed with a taxonomy rail: each row = a huge Inter-200 domain
   word (the CO-18 emphasis mechanism) + a checkbox + title + body. Ticking
   ACTIVATES the rail word (emphasis-weight token 200 -> 640 + brand orange);
   wireMistakes() (scripts.js, PE) lights the closing note at >=2 ticks.
   STRUCTURE/MECHANISM only — text is Lumos typography components, margins are
   u-margin-* utilities in the markup. Markup contract:
     fieldset.mistake_fieldset > legend.u-sr-only + ul[role=list].mistake_list >
       li.mistake_row > (.u-text.v-typography-h1.mistake_word[aria-hidden] >
         p > span.u-heading-emphasis)
       + .mistake_body > .mistake_title_row (input.mistake_check#id +
         .u-text.v-typography-h5 > h3 > label[for=id]) + .u-text.u-rich-text
     ...then a sibling .mistake_note (> .mistake_aside with .mistake_tick span).
   No-JS: checkboxes still tick (native), the note reads as a static aside.
   --------------------------------------------------------------------- */
.mistake_fieldset { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.mistake_list { list-style: none; margin: 0; padding: 0; }
.mistake_row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 4.5rem); padding-block: var(--_spacing---space--5); align-items: start;
  border-top: var(--border-width--main) solid var(--_theme---border); }
.mistake_row:last-of-type { border-bottom: var(--border-width--main) solid var(--_theme---border); }
/* hover affordance: the box tints before you commit */
.mistake_row:hover .mistake_check:not(:checked) { border-color: var(--swatch--brand-500); }
/* rail word: the brand emphasis mechanism (CO-18) — light at rest; ticking
   overrides the emphasis-weight token + tints orange */
.mistake_word { transition: color .35s ease; }
.mistake_word .u-heading-emphasis { transition: font-weight .35s ease; }
.mistake_row:has(.mistake_check:checked) .mistake_word { color: var(--swatch--brand-500); }
.mistake_row:has(.mistake_check:checked) .mistake_word .u-heading-emphasis { --_typography---font--emphasis-weight: 640; }
/* right column — nudged so the title cap optically aligns with the rail word cap */
.mistake_body { padding-top: .4rem; }
/* checkbox centred against the heading line; the h3's label is the click target.
   Control spec mirrors the Lumos form checkbox (form_ui_visual_wrap): 1.6rem,
   1:1 aspect, --border-width--main, --radius--small, theme colours. */
.mistake_title_row { display: flex; gap: var(--_spacing---space--3); align-items: center; }
.mistake_title_row label { cursor: pointer; }
.mistake_check { appearance: none; -webkit-appearance: none; margin: 0; width: 1.6rem; aspect-ratio: 1;
  border: var(--border-width--main) solid var(--_theme---text); border-radius: var(--radius--small);
  background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s; flex: 0 0 auto; }
.mistake_check::after { content: ""; width: .9rem; height: .9rem;
  clip-path: polygon(14% 44%, 0% 60%, 38% 100%, 100% 16%, 84% 4%, 38% 71%);
  background: var(--swatch--white-linen); transform: scale(0); transition: transform .15s; }
.mistake_check:checked { background: var(--swatch--brand-500); border-color: var(--swatch--brand-500); }
.mistake_check:checked::after { transform: scale(1); }
.mistake_check:focus-visible { outline: 2px solid var(--swatch--brand-500); outline-offset: 3px; }
/* closing note: a muted aside; wireMistakes() adds .is-lit at >=2 ticks —
   full ink + the decorative orange tick (not colour-alone). The tick is a real
   span — a p::before here would collide with Lumos's cap-trim pseudo-elements. */
.mistake_aside { font-style: italic; opacity: .75; transition: opacity .35s ease; }
.mistake_note.is-lit .mistake_aside { opacity: 1; }
.mistake_tick { display: none; }
.mistake_note.is-lit .mistake_tick { display: inline; color: var(--swatch--brand-500); font-weight: 700; font-style: normal; }
@media (max-width: 47.9375rem) {
  .mistake_row { grid-template-columns: 1fr; padding-block: var(--_spacing---space--4); }
  .mistake_body { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mistake_word, .mistake_word .u-heading-emphasis, .mistake_check, .mistake_check::after, .mistake_aside { transition: none; }
}

/* ---------------------------------------------------------------------
   Offer list (industry pages, section 5) — icon cards in the CO-22 native
   slider. Slides are a real list (ul[role=list] > li), matching the section-4
   a11y convention; the ul reset below keeps the slider layout intact. Icons =
   Hugeicons stroke set (free licence), inline SVG with stroke=currentColor on
   the paths (no .u-path dependency), sized by the wrapper per the tenant icon
   convention. Text = Lumos typography components; spacing = u-margin utilities.
   --------------------------------------------------------------------- */
ul.slider_list, ul.pill_list, ul.process_list { list-style: none; margin: 0; padding: 0; }
/* pill_list li is the flex item and shrink-wraps its pill — no display:contents
   (it has a history of stripping list semantics from Safari's a11y tree).
   Top-align the items so an expanding pill keeps its siblings pinned to the top
   (mirrors .pill_expand's own align-self:start, which the li wrapper bypasses). */
ul.pill_list { align-items: flex-start; }
.offer_icon { width: 2.75rem; color: var(--swatch--brand-500); }

/* ===== Evidence page - sourced-record list (tag-teams the CO-7 timeline; source links reuse .tl_srcs/.tl_src).
   PROPAGATED to the starter as CO-26 (2026-07-02) - keep the two in sync. ===== */
.ev_list { list-style: none; margin: 0; padding: 0; }
.ev_item { border-top: var(--border-width--main) solid var(--_theme---border); padding-block: var(--_spacing---space--4); display: grid; gap: var(--_spacing---space--2); }
.ev_item:last-child { border-bottom: var(--border-width--main) solid var(--_theme---border); }
.ev_year { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--swatch--brand-500); margin-right: 0.6rem; vertical-align: 0.12em; }

/* ===== CMS article body - rich-text headings + media. The de-Webflowed u-rich-text only
   carries margins (type normally comes from the typography component), but CMS post bodies
   arrive with raw h2-h4 - give them the v-typography h4/h5/h6 recipes.
   PROPAGATED to the starter (2026-07-02, with the .article_body width:100% fix) - keep in sync. ===== */
.article_body .u-rich-text h2, .article_body .u-rich-text h3, .article_body .u-rich-text h4 {
  /* headings = the secondary mode (Inter, Kyoom heading weight) — same routing the
     v-typography-* variants get above; CMS bodies bring raw hN with no variant class */
  font-family: var(--_typography---font--secondary-family);
  line-height: var(--_typography---line-height--medium);
  font-weight: var(--_typography---font--primary-bold);
  letter-spacing: var(--_typography---letter-spacing--normal);
  text-wrap: balance;
  margin-top: var(--_spacing---space--7);
  margin-bottom: var(--_spacing---space--4);
}
.article_body .u-rich-text h2 { font-size: var(--_typography---font-size--h4); }
.article_body .u-rich-text h3 { font-size: var(--_typography---font-size--h5); }
.article_body .u-rich-text h4 { font-size: var(--_typography---font-size--h6); }
.article_body .u-rich-text img { height: auto; border-radius: var(--radius--main); }
.article_body .u-rich-text img:not([class*="rt-img--"]) { width: 100%; margin-block: var(--_spacing---space--5); }
/* RT v2 Phase 5 (PRD-richtext) - the image-layout vocabulary. FIXED classes the
   editor writes: rt-img--left/right float with text wrap, rt-img--center is an
   inline block centred at its width, rt-img--full spans the column. Width rides
   preset classes (rt-img--w25/w33/w50/w75) or, for a CUSTOM width, the img's
   width attribute in px with marker class rt-img--wc (no width rule on purpose -
   the attribute sizes it, max-width caps it). Floats collapse to full-width on
   small screens. PROPAGATED from the starter - keep in sync. */
.u-rich-text img.rt-img--left, .u-rich-text img.rt-img--right {
  height: auto; max-width: 50%; border-radius: var(--radius--main);
  margin-block: .35em var(--_spacing---space--3);
}
.u-rich-text img.rt-img--left { float: left; clear: left; margin-right: var(--_spacing---space--4); }
.u-rich-text img.rt-img--right { float: right; clear: right; margin-left: var(--_spacing---space--4); }
.u-rich-text img.rt-img--center {
  display: block; height: auto; max-width: 100%; border-radius: var(--radius--main);
  margin-block: var(--_spacing---space--5); margin-inline: auto;
}
.u-rich-text img.rt-img--full {
  display: block; width: 100%; height: auto; border-radius: var(--radius--main);
  margin-block: var(--_spacing---space--5);
}
.u-rich-text img.rt-img--w25 { width: 25%; max-width: none; }
.u-rich-text img.rt-img--w33 { width: 33.333%; max-width: none; }
.u-rich-text img.rt-img--w50 { width: 50%; max-width: none; }
.u-rich-text img.rt-img--w75 { width: 75%; max-width: none; }
.u-rich-text img.rt-img--wc { max-width: 100%; }
/* RT v2 Phase 5b (PRD-richtext) - captions. PROPAGATED from the starter - keep in sync. A captioned image is
   figure > img + figcaption; layout classes stay ON THE IMG (one vocabulary
   location) and the figure follows them via :has(), so the caption travels
   with the float/centre/width. Inside a vocab figure the FIGURE owns
   geometry: the img resets and fills it - except rt-img--wc, which keeps NO
   width rule on purpose (the width attribute sizes it; the figure
   shrink-wraps). Bare legacy figures (no vocab classes) are untouched. */
.u-rich-text figure:has(> img.rt-img--left),
.u-rich-text figure:has(> img.rt-img--right) { max-width: 50%; margin-block: .35em var(--_spacing---space--3); }
.u-rich-text figure:has(> img.rt-img--left) { float: left; clear: left; margin-right: var(--_spacing---space--4); }
.u-rich-text figure:has(> img.rt-img--right) { float: right; clear: right; margin-left: var(--_spacing---space--4); }
.u-rich-text figure:has(> img.rt-img--center) { margin-block: var(--_spacing---space--5); margin-inline: auto; width: fit-content; max-width: 100%; }
.u-rich-text figure:has(> img.rt-img--full) { margin-block: var(--_spacing---space--5); }
.u-rich-text figure:has(> img.rt-img--w25) { width: 25%; }
.u-rich-text figure:has(> img.rt-img--w33) { width: 33.333%; }
.u-rich-text figure:has(> img.rt-img--w50) { width: 50%; }
.u-rich-text figure:has(> img.rt-img--w75) { width: 75%; }
.u-rich-text figure:has(> img.rt-img--wc) { width: fit-content; max-width: 100%; }
.u-rich-text figure > img[class*="rt-img--"] { float: none; margin: 0; }
.u-rich-text figure > img[class*="rt-img--"]:not(.rt-img--wc) { width: 100%; max-width: 100%; }


/* Contain floats: a floated image at the end of a body must grow its container,
   not spill into whatever follows. Clearfix (no display change - Lumos owns the
   container's display; verified no competing ::after on u-rich-text).
   PROPAGATED from the starter - keep in sync. */
.u-rich-text::after { content: ""; display: block; clear: both; }
/* RT v2 Phase 4 (PRD-richtext) - tables. Bare semantic table markup from the
   editor; presentation is wholly tenant CSS. Authored column widths ride col
   style widths (the one sanctioned inline style). Small screens scroll the
   table instead of squashing it. PROPAGATED from the starter - keep in sync. */
.u-rich-text table { width: 100%; border-collapse: collapse; margin-block: var(--_spacing---space--5); table-layout: fixed; }
.u-rich-text th, .u-rich-text td {
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding: var(--_spacing---space--2) var(--_spacing---space--3);
  text-align: left; vertical-align: top; overflow-wrap: break-word;
}
.u-rich-text th { font-weight: var(--_typography---font--primary-bold, 600); background: color-mix(in srgb, currentColor 6%, transparent); }
@media (max-width: 640px) { .u-rich-text table { display: block; overflow-x: auto; } }

/* RT v2 Phase 4b (PRD-richtext) - toggle + callout blocks. The editor emits
   details.rt-toggle > summary + div.rt-toggle__body (native disclosure -
   zero-JS published output) and div.rt-callout.rt-callout--{info|warning|
   success|note} (closed variant enum). Accents ride a custom property so a
   tenant can rebrand the variants without touching structure. */
.u-rich-text details.rt-toggle {
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: var(--radius--main);
  padding: var(--_spacing---space--3) var(--_spacing---space--4);
  margin-block: var(--_spacing---space--4);
}
.u-rich-text details.rt-toggle summary {
  cursor: pointer; font-weight: var(--_typography---font--primary-bold, 600);
}
.u-rich-text details.rt-toggle .rt-toggle__body { padding-top: var(--_spacing---space--2); }
.u-rich-text details.rt-toggle .rt-toggle__body > :last-child { margin-bottom: 0; }
.u-rich-text .rt-callout {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-inline-start: 4px solid var(--rt-callout-accent, currentColor);
  border-radius: var(--radius--main);
  padding: var(--_spacing---space--3) var(--_spacing---space--4);
  margin-block: var(--_spacing---space--4);
  background: color-mix(in srgb, var(--rt-callout-accent, currentColor) 6%, transparent);
}
.u-rich-text .rt-callout > :last-child { margin-bottom: 0; }
.u-rich-text .rt-callout--info    { --rt-callout-accent: #4a7fb5; }
.u-rich-text .rt-callout--warning { --rt-callout-accent: #b5802a; }
.u-rich-text .rt-callout--success { --rt-callout-accent: #3a8a5f; }
.u-rich-text .rt-callout--note    { --rt-callout-accent: #7a63a8; }

/* RT v2 Phase 4b-2 - the TOC block. Filled at save from the document's h2-h4
   anchors (write-time stamp); plain list styling, tenant themes refine.
   scroll-margin keeps jumped-to headings clear of the fixed pill nav (same
   treatment as the footnote targets below). */
.u-rich-text nav.rt-toc {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--radius--main);
  padding: var(--_spacing---space--3) var(--_spacing---space--4);
  margin-block: var(--_spacing---space--4);
}
.u-rich-text nav.rt-toc ol { margin: 0; padding-left: 1.2em; }
.u-rich-text nav.rt-toc li.rt-toc__l3 { margin-left: 1em; }
.u-rich-text nav.rt-toc li.rt-toc__l4 { margin-left: 2em; }
.u-rich-text :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--nav--height-total, 5rem) + var(--_spacing---space--3, 1rem)); }

/* RT v2 CR-FN (PRD-link-health §5) - footnotes. The editor emits
   sup.rt-fn-ref > a#fnref-N (inline reference) and ol.rt-footnotes >
   li.rt-fn#fn-N (the end-of-document list, back-link a.rt-fn-back appended at
   serialise). Numbers ride the ol's native counter - item order always
   matches reference order (the editor enforces it).
   The li's paragraphs render inline so the back-link sits on the text line;
   Lumos cap-trim puts display:table ::before/::after on paragraphs, which
   inside an inline p become block boxes and force the break, so they're
   turned off here. scroll-margin keeps both jump targets (#fn-N and the
   #fnref-N back-jump) clear of the fixed pill nav. */
.u-rich-text sup.rt-fn-ref a { text-decoration: none; font-weight: var(--_typography---font--primary-bold, 600); padding: 0 0.12em; }
.u-rich-text ol.rt-footnotes {
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  margin-top: var(--_spacing---space--6);
  padding-top: var(--_spacing---space--3);
  font-size: 0.875em;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.u-rich-text ol.rt-footnotes li.rt-fn { margin-block: 0.25em; }
.u-rich-text ol.rt-footnotes li.rt-fn > p { display: inline; margin: 0; }
.u-rich-text ol.rt-footnotes li.rt-fn > p::before,
.u-rich-text ol.rt-footnotes li.rt-fn > p::after { content: none; }
.u-rich-text ol.rt-footnotes li.rt-fn > p + p::before { content: " "; display: inline; }
.u-rich-text .rt-fn-back { margin-inline-start: 0.35em; text-decoration: none; }
.u-rich-text li.rt-fn,
.u-rich-text sup.rt-fn-ref a { scroll-margin-top: calc(var(--nav--height-total, 5rem) + var(--_spacing---space--3, 1rem)); }


@media (max-width: 640px) {
  .u-rich-text img.rt-img--left, .u-rich-text img.rt-img--right, .u-rich-text img.rt-img--center {
    float: none; display: block; width: 100%; max-width: 100%; margin-inline: 0;
  }
  .u-rich-text figure:has(> img.rt-img--left), .u-rich-text figure:has(> img.rt-img--right), .u-rich-text figure:has(> img.rt-img--center) {
    float: none; width: 100%; max-width: 100%; margin-inline: 0;
  }
}

/* Form gap override mechanism: .form_element sets its own --space--8 row gap LATER in
   lumos.css than the u-gap-* utilities, so at equal specificity the component always
   wins and u-gap-N on a form is a no-op. This compound selector lets any u-gap-N
   utility take effect on forms (the utility still supplies --_gap---size).
   Starter candidate (framework gap-fill, block 7). */
.form_element[class*="u-gap-"] { grid-row-gap: var(--_gap---size); grid-column-gap: var(--_gap---size); }
/* The status line's `[hidden]` restoration was PROMOTED to the starter framework
   (lumos-native.css, CO-54) — the platform renders that element, so every tenant
   inherits the bug and now inherits the fix. Kept as a pointer, not a rule. */

/* RT v2 (PRD-richtext): the editor's canonical form for MULTI-BLOCK list items is
   <li><p>...</p></li> (single-paragraph items are unwrapped at serialise). Trim the
   outer paragraph margins so list rhythm matches plain <li>text</li>. */
.u-rich-text li > p:first-child { margin-top: 0; }
.u-rich-text li > p:last-child { margin-bottom: 0; }

/* =====================================================================
   LEGAL PAGES (Kyoom) — kit legal family CO-35, ported verbatim from
   templates/starter/v1/assets/styles.css (the starter is the canonical
   copy; G&A privacy is the first consumer). Seeds below the block.
   ===================================================================== */
/* Legal / ToC component (starter, CO-35, P2.B5) - the legal-page pattern: a sticky
   scrollspy contents rail + a measured prose body + a bordered data table + a
   dateline. Generic for every tenant's policy pages (G&A privacy is the first
   consumer; class-map §4 REC). Parts: .legal_wrap (grid shell), .legal_toc (the
   rail; links gain .is-active + aria-current from the scripts.js wireLegalToc PE),
   .legal_body (prose + section bars on h2), .legal_table (the starter's ONLY table
   styling - promoting it to a general table variant is a named post-cutover
   question), .legal_meta (dateline). Values ride --_legal---* inheriting slots
   with neutral fallbacks (theme roles / typography tokens); a tenant re-points
   them at/below the component. The h2 section bar mints its own slots (a legal
   bar, a card accent and a step bar diverge independently - the CO-31/CO-33
   coded-channel idea). The 60em stack boundary is structural, not tokenable. */
.legal_wrap {
  display: grid;
  grid-template-columns: var(--_legal---toc--width, 16rem) 1fr;
  gap: var(--_legal---grid--row-gap, var(--_spacing---space--6)) var(--_legal---grid--column-gap, var(--_spacing---space--7));
  align-items: start;
}
.legal_toc {
  position: sticky;
  top: var(--_legal---toc--top, var(--_spacing---space--5));
  font-family: var(--_legal---toc--family, var(--_typography---font--label-family, var(--_typography---font--primary-family)));
  font-size: var(--_legal---toc--size, 0.85rem);
  line-height: var(--_legal---toc--line-height, 1.5);
}
@container (width < 60em) {
  .legal_wrap { grid-template-columns: 1fr; gap: var(--_legal---grid--stack-gap, var(--_spacing---space--5)); }
  .legal_toc { position: static; }
}
.legal_toc p {
  text-transform: uppercase;
  letter-spacing: var(--_legal---toc-label--letter-spacing, 0.1em);
  font-size: var(--_legal---toc-label--size, 0.7rem);
  color: var(--_legal---toc-label--color, color-mix(in srgb, var(--_theme---text) 65%, transparent));
  margin: 0 0 var(--_legal---toc-label--space, var(--_spacing---space--3));
}
.legal_toc a {
  display: block;
  padding: var(--_legal---toc-link--padding, 0.35rem 0 0.35rem 0.7rem);
  color: var(--_legal---toc-link--color, var(--_theme---text));
  text-decoration: none;
  border-bottom: var(--border-width--main) solid var(--_legal---toc-link--border, var(--_theme---border));
  box-shadow: inset var(--_legal---toc--active-bar, 0.125rem) 0 0 transparent;
  transition: color .2s, box-shadow .2s;
}
.legal_toc a:hover { color: var(--_legal---toc--active-color, var(--_theme---heading-accent)); }
.legal_toc a.is-active {
  color: var(--_legal---toc--active-color, var(--_theme---heading-accent));
  font-weight: var(--_legal---toc--active-weight, 500);
  box-shadow: inset var(--_legal---toc--active-bar, 0.125rem) 0 0 var(--_legal---toc--active-color, var(--_theme---heading-accent));
}
.legal_body { max-width: var(--_legal---body--measure, 68ch); }
.legal_body h2 {
  font-family: var(--_legal---h2--family, var(--_typography---font--secondary-family, var(--_typography---font--primary-family)));
  font-weight: var(--_legal---h2--weight, var(--_typography---font--primary-light, 300));
  font-size: var(--_legal---h2--size, var(--_typography---font-size--h5));
  line-height: var(--_legal---h2--line-height, 1.2);
  letter-spacing: var(--_legal---h2--letter-spacing, -0.01em);
  color: var(--_legal---h2--color, var(--_theme---heading));
  margin: var(--_legal---h2--space-above, var(--_spacing---space--6)) 0 var(--_legal---h2--space-below, var(--_spacing---space--3));
  padding-top: var(--_legal---bar--space, var(--_spacing---space--3));
  border-top: var(--_legal---bar--width, 0.125rem) solid var(--_legal---bar--color, var(--_theme---heading-accent));
  scroll-margin-top: var(--_legal---h2--scroll-margin, var(--_spacing---space--5));
}
.legal_body h2:first-child { margin-top: 0; }
.legal_body h3 {
  font-size: var(--_legal---h3--size, 1.05rem);
  font-weight: var(--_legal---h3--weight, 600);
  color: var(--_legal---h3--color, var(--_theme---heading));
  margin: var(--_legal---h3--space-above, var(--_spacing---space--4)) 0 var(--_legal---h3--space-below, var(--_spacing---space--2));
}
.legal_body p, .legal_body li {
  font-size: var(--_legal---body--size, 1rem);
  line-height: var(--_legal---body--line-height, 1.75);
  color: var(--_legal---body--color, var(--_theme---text));
}
.legal_body p { margin: 0 0 var(--_legal---body--space, var(--_spacing---space--3)); }
/* the framework list reset (lumos:2491 — ul,ol{list-style:""} + li{display:block})
   strips markers in every authored context; the kit part restores them. Promoted
   from G&A's is-complaints scope at the privacy/accessibility rebuild (P4 utility
   tail) — legal prose renders disc + decimal. */
.legal_body ul, .legal_body ol { margin: 0 0 var(--_legal---body--space, var(--_spacing---space--3)); padding-left: var(--_legal---list--indent, 1.2rem); }
.legal_body ul { list-style: disc; }
.legal_body ol { list-style: decimal; }
.legal_body :is(ul, ol) > li { display: list-item; }
.legal_body li { margin: 0 0 var(--_legal---list--gap, 0.4rem); }
.legal_body a { color: var(--_legal---link--color, var(--_theme---heading-accent)); }
.legal_body strong { color: var(--_legal---strong--color, var(--_theme---heading)); font-weight: var(--_legal---strong--weight, 600); }
.legal_table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--_legal---body--space, var(--_spacing---space--3));
  font-size: var(--_legal---table--size, 0.92rem);
}
.legal_table th, .legal_table td {
  text-align: left;
  vertical-align: top;
  padding: var(--_legal---table--cell-padding, 0.6rem 0.8rem 0.6rem 0);
  border-bottom: var(--border-width--main) solid var(--_legal---table--border, var(--_theme---border));
  line-height: var(--_legal---table--line-height, 1.6);
}
.legal_table th {
  font-family: var(--_legal---table-th--family, var(--_typography---font--label-family, var(--_typography---font--primary-family)));
  font-weight: var(--_legal---table-th--weight, 600);
  color: var(--_legal---table-th--color, var(--_theme---heading));
}
.legal_meta {
  font-family: var(--_legal---meta--family, var(--_typography---font--label-family, var(--_typography---font--primary-family)));
  font-size: var(--_legal---meta--size, 0.82rem);
  letter-spacing: var(--_legal---meta--letter-spacing, 0.04em);
  color: var(--_legal---meta--color, color-mix(in srgb, var(--_theme---text) 65%, transparent));
  margin: var(--_legal---meta--space, var(--_spacing---space--3)) 0 0;
}

/* Kyoom seed (17 Aug 2026, legal-pages redesign): the sheet declares no
   --_theme---heading role (site headings ride the text ink via the voice
   classes), so the four colour slots whose fallback is that token are
   re-pointed at the ink; and the h2/h3 weight fallback chain ends at
   --_typography---font--primary-light (also undeclared -> 300), which Kyoom's
   Inter headings never use — re-point at the site's heading bold. Family
   chains need no seed: h2/h3 resolve to Inter (secondary), prose and the
   rail to Aleo (primary), matching the site's heading/prose split. */
.legal_wrap {
  --_legal---h2--color: var(--_theme---text);
  --_legal---h3--color: var(--_theme---text);
  --_legal---strong--color: var(--_theme---text);
  --_legal---table-th--color: var(--_theme---text);
  --_legal---h2--weight: var(--_typography---font--primary-bold, 700);
  --_legal---h3--weight: var(--_typography---font--primary-bold, 700);
  /* The nav is a FIXED floating pill (~88px to its bottom edge at desktop) —
     the component's default sticky-top/scroll-margin (space--5) parks content
     underneath it. Both slots inherit from here. */
  --_legal---toc--top: 9rem;
  --_legal---h2--scroll-margin: 10rem;
}