/* Homepage styles (v23). Token-only Carbon, matching the assets/blog.css convention:
   every colour resolves a --cds-* custom property or one of the custom theme tokens
   declared in section 1, every font-size comes off the Carbon type scale through a type
   token, every space off the Carbon spacing scale through --cds-spacing-NN, and the only
   media-query thresholds are Carbon's 20rem / 42rem / 66rem / 82rem / 99rem.
   Replaces variants/v17/css/hero.css + css/site.css. Loaded last, after assets/site.css.

   Hero-internal ids and classes (#scene, #stackSvg, #sceneRoot, .layer-hit, .focus-edge,
   .sel-edge, .mesh-sel, .cap-fact, .caret, .hero-scene, .kernel-fallback, .labels,
   canvas.live) are kept verbatim from v17: assets/hero/home-hero.js and home-kernel.js
   build and drive that subtree, so only the outer shell changed. */

/* ==========================================================================
   1. CUSTOM THEME TOKENS  --  the only raw colour values in this file
   --------------------------------------------------------------------------
   These are ADDED token names. Carbon's $theme override map sanctions adding names;
   it does not sanction redefining one. v17 published eight --cds-* names of its own,
   five of them carrying a value that was not that theme's Carbon value, and page-level
   specificity made the counterfeits beat the vendored .cds--g10 / .cds--g90 blocks.
   Nothing below starts with --cds-.

   Every value below is a Carbon palette value (@carbon/colors); the conformance
   checker fails the build on any that is not.

   The brand orange splits in two, and the split is deliberate. --uru-mesh is
   theme-invariant and fills large graphics only: orange-50 #eb6200 measures 3.34:1
   on white, 3.04:1 on g10 and 4.53:1 on g90, so it clears the 3:1 non-text minimum
   in every theme (the previous non-Carbon #f58200 did not — 2.60:1 / 2.36:1). It
   still may never carry type. --uru-orange-ui is the contrast-corrected UI value and
   the only orange allowed on type or on a stroke that carries meaning: orange-60
   #ba4e00 is 4.57:1 on g10, orange-40 #ff832b is 6.15:1 on g90 — both AA for text.

   The scene tokens that repeat their value across both themes do so on purpose, but
   the earlier version of this note reasoned about token values in isolation and got
   the result wrong. The slab used to be gray-10/20 in both themes, which meant its
   top face was IDENTICAL to the g10 page (1.00:1 -- the object had no ground and read
   as a hollow outline) and glared at 11.46:1 against the g90 page. It is now anchored
   on gray-50: the one Carbon grey that clears ~3:1 against both pages (3.02:1 on
   #f4f4f4, 4.56:1 on #262626) while still holding gray-100 engraving at 5.45:1. Only
   two scene values differ by theme now -- the silhouette edge, which flips dark-on-
   light to light-on-dark because that is what an edge does, and the membrane casing.

   The anchor is gray-50 and both LABEL-BEARING faces sit on it. The shading faces
   either side of it do not all clear 3:1 against the page and cannot: a solid that
   reads as a solid needs a lit face and a shaded face, and one of the two is always
   nearer the page than the other in a given theme. Measured against the page, the
   gray-40 top highlight is 2.16:1 in g10 and the gray-70 right face is 1.94:1 in g90.
   What carries SC 1.4.11 for the object is the silhouette stroke drawn around the
   whole thing -- gray-100 at 16.45:1 in g10, gray-30 at 8.86:1 in g90 -- so the shape
   is bounded by a compliant edge in both themes regardless of how the faces fall.

   Contrast here is measured on the COMPOSITED pixel, not the token. Three separate
   alphas were quietly cancelling these values: a 0.9 opacity on inactive slabs, a
   per-frame fill-opacity on the membrane, and 0.55 stroke-opacity on the selection
   indicator. Tokens chosen for 3:1 do not deliver 3:1 through a 0.9 multiply.

   The tab focus ring has to survive crossing the dark ground and the membrane in the
   same stroke, so it is theme-independent by construction rather than by omission.
   ========================================================================== */

.cds--g10,
[data-theme="g10"] {
  --uru-mesh: #eb6200; /* orange-50 */
  --uru-orange-ui: #ba4e00; /* orange-60 -- 4.57:1 on g10 */
  --uru-scene-focus: #ffffff; /* white */
  --uru-scan-glow: #ffd9be; /* orange-20 -- the reading sweep, theme-invariant */
  --uru-scene-focus-case: #161616; /* gray-100 */
  --uru-scene-ink: #161616; /* gray-100 */
  --uru-slab-top-hi: #a8a8a8; /* gray-40 -- 2.16:1 on the g10 page */
  --uru-slab-top-lo: #8d8d8d; /* gray-50 -- 3.02:1 on the g10 page, carries the motif */
  --uru-slab-left: #8d8d8d; /* gray-50 -- 3.02:1 on the g10 page, 5.45:1 under the label */
  --uru-slab-right: #525252; /* gray-70 -- 7.10:1 on the g10 page */
  --uru-slab-edge: #161616; /* gray-100 -- opaque silhouette, light source above */
  --uru-slab-rim: rgba(255, 255, 255, 0.96); /* white @ 96% */
  --uru-slab-label: #161616; /* gray-100 -- 5.45:1 on the gray-50 left face */
  --uru-slab-label-hi: rgba(255, 255, 255, 0.3);
  --uru-membrane-case: #161616; /* gray-100 -- opaque casing under the membrane edge */
  --uru-scene-shadow-g: rgba(22, 22, 22, 0.2);
  --uru-scene-shadow-c: rgba(22, 22, 22, 0.16);
  --uru-kernel-halo: rgba(255, 255, 255, 0.92);
  --uru-kernel-halo-soft: rgba(255, 255, 255, 0.7);
}

.cds--g90,
[data-theme="g90"] {
  --uru-mesh: #eb6200; /* orange-50 -- 4.53:1 on g90 */
  --uru-orange-ui: #ff832b; /* orange-40 -- 6.15:1 on g90 */
  --uru-scene-focus: #ffffff; /* white */
  --uru-scan-glow: #ffd9be; /* orange-20 -- the reading sweep, theme-invariant */
  --uru-scene-focus-case: #161616; /* gray-100 */
  --uru-scene-ink: #161616; /* gray-100 */
  --uru-slab-top-hi: #a8a8a8; /* gray-40 -- 6.36:1 on the g90 page */
  --uru-slab-top-lo: #8d8d8d; /* gray-50 -- 4.56:1 on the g90 page, carries the motif */
  --uru-slab-left: #8d8d8d; /* gray-50 -- 4.56:1 on the g90 page, 5.45:1 under the label */
  --uru-slab-right: #525252; /* gray-70 -- silhouette carried by the edge below */
  --uru-slab-edge: #c6c6c6; /* gray-30 -- edge-lit against a dark ground, 8.86:1 on page */
  --uru-slab-rim: rgba(255, 255, 255, 0.78); /* white @ 78% */
  --uru-slab-label: #161616; /* gray-100 -- 5.45:1 on the gray-50 left face */
  --uru-slab-label-hi: rgba(255, 255, 255, 0.3);
  --uru-membrane-case: #f4f4f4; /* gray-10 -- casing flips light on a dark ground */
  --uru-scene-shadow-g: rgba(0, 0, 0, 0.52);
  --uru-scene-shadow-c: rgba(0, 0, 0, 0.42);
  --uru-kernel-halo: rgba(22, 22, 22, 0.92);
  --uru-kernel-halo-soft: rgba(22, 22, 22, 0.8);
}

/* A contrast zone is a g100 surface dropped into either page theme, so it needs the
   dark-side accent regardless of which theme is active outside it. */
.uru-contrast-zone {
  --uru-orange-ui: #ff832b; /* orange-40 -- contrast zone is g100 */
  --uru-kernel-halo: rgba(22, 22, 22, 0.92);
  --uru-kernel-halo-soft: rgba(22, 22, 22, 0.8);
}

/* ==========================================================================
   END OF RAW COLOUR VALUES. Everything past this line resolves a token.
   ========================================================================== */

/* Carbon productive and expressive easing curves, verbatim from the published motion
   spec. Durations use the vendored --cds-duration-* names with the Carbon value as the
   fallback, the form assets/site.css already uses. */
:root {
  --uru-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --uru-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --uru-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

/* ==========================================================================
   2. Page shell
   ========================================================================== */

.uru-home-main {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  line-height: var(--cds-body-02-line-height, 1.5);
}

/* The skip target is a programmatic focus stop, not an interactive control. */
#main-content:focus {
  outline: none;
}

/* Legacy anchor aliases. 22 blog pages hard-link five homepage fragments that v17
   renamed; these keep all 110 links resolving without rewriting a single blog file. */
.uru-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 0;
}

/* The `.uru-home-main .uru-eyebrow` override that used to sit here is gone. Its stated
   reason -- "--cds-text-helper measures 3.47:1 on layer-01 in g90" -- was not true of the
   shipped bundle: #8d8d8d is the value in the stale v10 sheet, which loads at :where()
   specificity and loses. The runtime value is #c6c6c6, 6.76:1 on layer-01. What the
   override actually did was give the home page a different eyebrow colour from every other
   route, so `.uru-eyebrow` in site.css now carries $text-secondary for all of them and this
   rule has nothing left to do.

   border-subtle-00, not -01. Carbon defines the two by the layer they pair with:
   "$border-subtle-00 -- Subtle borders paired with $background", "$border-subtle-01 --
   Subtle borders paired with $layer-01". Every band below sets `background:
   var(--cds-background)`, so it is a base-set surface and takes the base-set border.
   This is not cosmetic bookkeeping: in g10 the two values swap relative to the white
   theme (-00 is gray-30 #c6c6c6, -01 is gray-20 #e0e0e0), so the wrong token painted
   #e0e0e0 on a #f4f4f4 page -- 1.19:1, a section divider that was very nearly
   invisible. The layer-pairing check now measures this in the browser. */
.uru-home-section {
  padding-block: var(--cds-spacing-09);
  border-top: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
  background: var(--cds-background);
}

/* A tint band moves the section from the base set onto the 01 set, so its rule has to
   move with it -- the border is not inherited scenery, it is paired with the surface. */
.uru-home-section--tint {
  background: var(--cds-layer-01);
  border-top-color: var(--cds-border-subtle-01, var(--cds-border-subtle));
}

@media (min-width: 42rem) {
  .uru-home-section {
    padding-block: var(--cds-spacing-10);
  }
}

@media (min-width: 66rem) {
  .uru-home-section {
    padding-block: var(--cds-spacing-11);
  }
}

.uru-home-h2 {
  max-width: 20em;
  margin: 0;
  font-size: var(--cds-heading-04-font-size, 1.75rem);
  line-height: var(--cds-heading-04-line-height, 1.29);
  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
  font-weight: 400;
}

.uru-home-h3 {
  margin: 0;
  font-size: var(--cds-heading-03-font-size, 1.25rem);
  line-height: var(--cds-heading-03-line-height, 1.4);
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
  font-weight: 600;
}

.uru-home-lede {
  max-width: 42rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: var(--cds-body-02-line-height, 1.5);
  letter-spacing: var(--cds-body-02-letter-spacing, 0);
}

@media (min-width: 42rem) {
  .uru-home-h2 {
    font-size: var(--cds-heading-05-font-size, 2rem);
    line-height: var(--cds-heading-05-line-height, 1.25);
  }
}

@media (min-width: 66rem) {
  .uru-home-h2 {
    font-size: var(--cds-heading-06-font-size, 2.625rem);
    line-height: var(--cds-heading-06-line-height, 1.199);
  }
}

.uru-home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-06);
}

.uru-home-cta .uru-btn {
  min-height: 3rem;
}

.uru-home-cta__note {
  max-width: 42rem;
  margin: var(--cds-spacing-04) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
}

/* Mobile-first: on a small screen a 48px target that fills the column beats two buttons
   sharing a cramped row. Every media query in this file is min-width, so no threshold is
   ever claimed by two rules at once. */
.uru-home-cta .uru-btn {
  width: 100%;
  justify-content: center;
  padding-inline: var(--cds-spacing-05);
}

@media (min-width: 42rem) {
  .uru-home-cta .uru-btn {
    width: auto;
    justify-content: flex-start;
    padding: 0 var(--cds-spacing-06) 0 var(--cds-spacing-05);
  }
}

/* ==========================================================================
   3. Hero
   Two grid columns from lg up: the lead column carries the whole ask (eyebrow, h1,
   lede, payline, both CTAs), the scene column carries the illustration with its
   caption stacked underneath it rather than beside it. Two consequences, both of
   them the point: the scene no longer needs a 760px floor, so the text column stops
   collapsing to 373px at 1280 and stops stranding the orphan "AI" in the h1; and
   below lg the DOM order alone puts the primary CTA above the fold, which is what
   the 1024-1279px band was failing.
   ========================================================================== */

.uru-home-hero {
  padding-block: var(--cds-spacing-06) var(--cds-spacing-07);
  background: var(--cds-background);
}

.uru-home-hero .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}

@media (min-width: 42rem) {
  .uru-home-hero {
    padding-block: var(--cds-spacing-07) var(--cds-spacing-09);
  }
}

@media (min-width: 66rem) {
  .uru-home-hero {
    padding-block: var(--cds-spacing-08) var(--cds-spacing-10);
  }

  .uru-home-hero .cds--css-grid {
    align-items: center;
    row-gap: 0;
  }
}

.uru-home-hero__eyebrow {
  margin: 0 0 var(--cds-spacing-04);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
  font-weight: 600;
}

.uru-home-hero__title {
  max-width: 18em;
  margin: 0;
  font-size: var(--cds-fluid-heading-05-font-size, 2rem);
  line-height: var(--cds-fluid-heading-05-line-height, 1.25);
  letter-spacing: var(--cds-fluid-heading-05-letter-spacing, 0);
  font-weight: 400;
}

.uru-home-hero__lede {
  max-width: 34em;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: var(--cds-body-02-line-height, 1.5);
  letter-spacing: var(--cds-body-02-letter-spacing, 0);
}

.uru-home-hero__payline {
  max-width: 34em;
  margin: var(--cds-spacing-06) 0 0;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-inline-start: 3px solid var(--uru-orange-ui);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
}

@media (min-width: 42rem) {
  .uru-home-hero__title {
    font-size: var(--cds-heading-06-font-size, 2.625rem);
    line-height: var(--cds-heading-06-line-height, 1.199);
  }

  .uru-home-hero__lede,
  .uru-home-hero__payline {
    font-size: var(--cds-body-02-font-size, 1rem);
    line-height: var(--cds-body-02-line-height, 1.5);
    letter-spacing: var(--cds-body-02-letter-spacing, 0);
  }
}

@media (min-width: 82rem) {
  .uru-home-hero__title {
    font-size: var(--cds-heading-07-font-size, 3.375rem);
    line-height: var(--cds-heading-07-line-height, 1.199);
  }
}

/* ==========================================================================
   4. Hero scene (interactive isometric stack)
   Class and id names below are the contract with assets/hero/home-hero.js.
   ========================================================================== */

/* Row two reserves the autoplay control that home-hero.js appends into #scene a few
   frames after first paint, so the scene column does not grow by the height of a button
   the visitor never saw arrive. */
.hero-scene {
  display: grid;
  grid-template-rows: auto 3rem;
  align-content: start;
  min-width: 0;
}

/* Figure above caption in every band. v17 put the caption in a fixed 250px side column
   and floored the scene column at 760px, which is what starved the text column at 1280. */
.scene-stage {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
  /* .caption caps itself at 34rem, so the stage caps to the same 34rem and centres as one
     block. Without this the figure centred itself inside a stage up to 960px wide while the
     caption stayed left-aligned at 544px, which left the leader elbow terminating 121px clear
     of the caption in the 1023-1055 band, and a wide empty gutter beside the figure. */
  max-width: 34rem;
  margin-inline: auto;
}

/* The interactive svg and the static poster share one grid cell, so swapping them costs
   no layout shift and the cell keeps the svg's aspect box either way. */
.scene-fig {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 26rem;
  min-width: 0;
  align-self: center;
}

.scene-fig > * {
  grid-area: 1 / 1;
  align-self: center;
}

.stack {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 66rem) {
  .scene-fig {
    max-width: 30rem;
  }
}

.stop-hi { stop-color: var(--uru-slab-top-hi); }
.stop-lo { stop-color: var(--uru-slab-top-lo); }

.s-top {
  fill: url(#slabTopG);
  stroke: var(--uru-slab-rim);
  stroke-width: 1;
  stroke-linejoin: round;
}

.s-left {
  fill: var(--uru-slab-left);
  stroke: var(--uru-slab-edge);
  stroke-width: 1;
  stroke-linejoin: round;
}

.s-right {
  fill: var(--uru-slab-right);
  stroke: var(--uru-slab-edge);
  stroke-width: 1;
  stroke-linejoin: round;
}

.s-rim {
  fill: none;
  stroke: var(--uru-slab-rim);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.s-ground { fill: var(--uru-scene-shadow-g); }
.s-contact { fill: var(--uru-scene-shadow-c); }

/* The motif is engraved into the slab top face, which is the same gray-50 in g10 and
   in g90 alike, so its ink is theme-invariant by design rather than by oversight.
   The opacity is declared here because layer-stack.js writes 0.19 as an attribute,
   which put the pictograms at 1.53:1 -- present in the DOM, absent to the eye. 0.65
   is where gray-100 ink reaches 3.12:1 on the gray-50 face. */
.s-motif {
  fill: none;
  stroke: var(--uru-scene-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}

/* Inside the stack viewBox a rem resolves to user units 1:1 against the root font size,
   so the type tokens carry the scale into the SVG the same way they do in the page.

   The engraving group's transform is a vertical shear (layer-stack.js), not the two-axis
   isometric matrix the motif uses, so the label lies on the LEFT face, not the top one.
   That was worth measuring rather than assuming: on the old gray-60 left face gray-100 ink
   came out 3.60:1, and at 19.2px/600 it is not WCAG large text, so 4.5:1 applied and it
   failed. Nothing clears 4.5:1 on gray-60 -- white only reaches 4.95:1 and black 4.24:1 --
   so the ground had to move, not the ink: the left face is now gray-50, where gray-100
   reads 5.45:1. Top and left then share gray-50 at the gradient's low end; the seam is
   drawn by .s-rim at 1.6px, which is why it survives the two fills matching. */
.face-label {
  fill: var(--uru-slab-label);
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  font-size: var(--cds-fluid-heading-03-font-size, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.6px;
}

.face-label-hi { fill: var(--uru-slab-label-hi); }

.s-ground,
.s-contact,
.s-rim,
.s-motif,
.face-engrave,
.sel-edge,
.sel-case,
.focus-edge,
.mesh-sel,
.mesh-sel-case,
.mline,
.mline-case,
.scan-glow,
.scan-core,
#g-leader {
  pointer-events: none;
}

.slab {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--cds-duration-slow-01, 400ms) var(--uru-ease-expressive),
    opacity var(--cds-duration-moderate-02, 240ms) var(--uru-ease-productive);
}

#g-ludzie.is-active { transform: translateY(-11px); }
#g-systemy.is-active { transform: translateY(11px); }
/* Opacity on the whole slab composites every face with the page and cancels the
   contrast the face tokens are chosen for: at 0.9 the gray-50 top face drops from
   3.02:1 to 2.65:1 against the g10 page. The selection outline (now opaque) is what
   marks the active layer, so the inactive state does not need to dim the object. */
.slab:not(.is-active) { opacity: 1; }

@media (hover: hover) {
  .slab:not(.is-active):hover { opacity: 1; }
  #g-ludzie:not(.is-active):hover { transform: translateY(-4px); }
  #g-systemy:not(.is-active):hover { transform: translateY(4px); }
}

.layer-hit:focus { outline: none; }

.layer-hit {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#g-mesh { cursor: pointer; }

.touch-zone {
  fill: none;
  stroke: transparent;
  stroke-width: 44;
  pointer-events: stroke;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  touch-action: manipulation;
}

/* The membrane needs an opaque casing, and not for taste. It overlaps three grounds
   -- the page and both slab top faces -- and no single colour can clear 3:1 against
   all of them: CR(gray-50, page) is 3.02 in g10 and 4.56 in g90, well under the 9:1
   a mid-tone fill would need to sit between them. So the boundary is carried by the
   stroke, which is what SC 1.4.11 asks for anyway. The fill was also being composited
   at a per-frame fill-opacity (measured 0.739 in g10, 0.769 in g90), which is why the
   membrane read as washed out; a CSS declaration beats the presentation attribute. */
.mband {
  fill: var(--uru-mesh);
  fill-opacity: 1;
  stroke: var(--uru-membrane-case);
  stroke-width: 1.5;
  stroke-opacity: 1;
  vector-effect: non-scaling-stroke;
}

.mline,
.mline-case,
.scan-glow,
.scan-core {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mesh lines carry the meaning of the band -- they are the data flowing through
   the layer -- so they are held at full strength rather than left on the per-frame
   presentation attribute, which measured stroke-opacity 0.075 in g10 and 0.09 in g90
   (1.5-2.3:1 against the membrane). The colour comes off a token now; layer-stack.js
   used to hardcode `stroke="#ffffff"`, which is theme-blind -- one literal cannot be
   right on both a g10 and a g90 membrane. (An earlier version of this comment said the
   conformance checker "never sees" that literal because it "only scans CSS". It does see
   it: carbon-conformance.mjs walks src/ with SRC_EXT = .svelte|css|ts|js|mjs.) */
.mline { stroke: var(--uru-scene-focus); stroke-opacity: 1; }
.mline-case { stroke: var(--uru-scene-ink); stroke-opacity: 0.55; }

/* The scan sweep's three-layer casing, moved off literals in layer-stack.js. The
   widths stay in the JS (geometry); the colours live here (palette). */
.scan-glow--wide { stroke: var(--uru-scene-ink); }
.scan-glow--mid { stroke: var(--uru-scan-glow); }
.scan-core { stroke: var(--uru-scene-focus); }

.sel-edge,
.sel-case,
.focus-edge,
.mesh-sel,
.mesh-sel-case {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--cds-duration-moderate-01, 150ms) var(--uru-ease-productive);
}

/* Selection outline. This is the indicator that tells a sighted keyboard user which
   of the three tabs is selected, so it is squarely in scope for SC 1.4.11 -- and at
   the old half-strength opacities it was the worst-measuring thing in the scene:
   1.03:1 for the edge over the membrane in g90, 1.58-2.29:1 elsewhere. A state
   indicator cannot be a hint. Both strokes are now opaque and carry their own
   contrast: the casing inverts with the theme, the edge stays interactive blue. */
.sel-case,
.mesh-sel-case {
  stroke: var(--cds-border-inverse, var(--cds-border-strong));
  stroke-width: 3.5;
  stroke-opacity: 1;
}

.sel-edge,
.mesh-sel {
  stroke: var(--cds-interactive);
  stroke-width: 2;
  stroke-opacity: 1;
}

/* Tab focus ring. The three hero tabs are the page's primary widget and the ring
   crosses two very different surfaces in one stroke: the page ground and the orange
   membrane. A theme override would only ever fix one of them, so the ring is
   theme-independent and two-tone: a light dashed core inside a dark 1px casing built
   from four offset drop shadows. Total weight 5px, the same as v17's single dashed
   stroke, which measured 1.20:1 in g90 and failed SC 1.4.11 and 2.4.7. */
.focus-edge {
  stroke: var(--uru-scene-focus);
  stroke-width: 3;
  stroke-dasharray: 4 4;
  filter:
    drop-shadow(1px 0 0 var(--uru-scene-focus-case))
    drop-shadow(-1px 0 0 var(--uru-scene-focus-case))
    drop-shadow(0 1px 0 var(--uru-scene-focus-case))
    drop-shadow(0 -1px 0 var(--uru-scene-focus-case));
}

.slab.is-active .sel-case,
.slab.is-active .sel-edge { opacity: 1; }

#stackSvg[data-active="warstwa"] .mesh-sel-case,
#stackSvg[data-active="warstwa"] .mesh-sel { opacity: 1; }

.layer-hit:focus-visible .focus-edge { opacity: 1; }

.lead-line-case,
.lead-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The connector casing is the page ground itself, so the thin leader never carries a
   white halo on the dark theme. */
.lead-line-case {
  stroke: var(--cds-background);
  stroke-width: 3.5;
  stroke-opacity: 0.85;
}

/* The leader is the only thing tying the scene to its caption, so it is held opaque:
   at 0.7 it measured 2.88:1 in g10 and 2.91:1 in g90, under the 3:1 non-text minimum
   for a graphic that carries a relationship. */
.lead-line {
  stroke: var(--cds-interactive);
  stroke-width: 1.6;
  stroke-opacity: 1;
}

.lead-dot { fill: var(--cds-interactive); }

/* The leader elbow is drawn entirely by home-hero.js and runs down to the viewBox floor,
   because the caption is stacked under the figure at every width. No media override needed. */

/* Keeps a postcode or any other hyphenated identifier from breaking across lines.
   The footer address split as "80-" / "890 Gdansk" at 768px before this. */
.uru-nowrap { white-space: nowrap; }

.lead-ring {
  fill: var(--cds-background);
  stroke: var(--cds-interactive);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

/* The three tabpanels have different natural heights and the 6-second autoplay cycles
   through them, which made the caption block a layout-shift source on every switch.
   Stacking all three in one grid cell holds the box open at the tallest of the three, so
   the height is constant by construction rather than by a guessed floor. */
.caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  max-width: 34em;
  align-self: start;
  padding: var(--cds-spacing-02) 0 var(--cds-spacing-02) var(--cds-spacing-04);
  border-inline-start: 2px solid var(--cds-interactive);
  text-align: left;
}

@media (min-width: 42rem) {
  .caption {
    padding-inline-start: var(--cds-spacing-05);
  }
}

.caption > .cap-panel { grid-area: 1 / 1; }

/* assets/site.css declares [hidden]{display:none!important}. Swapping the inactive panels
   to visibility keeps them out of the accessibility tree and out of the tab order exactly
   as display:none does, while they still hold the box open. */
.caption > .cap-panel[hidden] {
  display: block !important;
  visibility: hidden;
}

.cap-name {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-03-font-size, 1.25rem);
  line-height: var(--cds-heading-03-line-height, 1.4);
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
  font-weight: 600;
}

/* Two lines reserved for the typewriter. The floor is tied to the line box, so it is a
   text reservation rather than a spacing value, and it keeps a fact that wraps at one
   width from changing the panel height at another. */
.cap-fact {
  min-block-size: 3em;
  margin: 0 0 var(--cds-spacing-03);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: var(--cds-body-02-line-height, 1.5);
  letter-spacing: var(--cds-body-02-letter-spacing, 0);
}

@media (min-width: 42rem) {
  .cap-fact {
    min-block-size: 2.8em;
    font-size: var(--cds-fluid-heading-03-font-size, 1.25rem);
    line-height: var(--cds-fluid-heading-03-line-height, 1.4);
    letter-spacing: var(--cds-fluid-heading-03-letter-spacing, 0);
  }
}

@media (min-width: 66rem) {
  .cap-fact {
    font-size: var(--cds-fluid-paragraph-01-font-size, 1.5rem);
    line-height: var(--cds-fluid-paragraph-01-line-height, 1.334);
    font-weight: 400;
  }
}

.caret {
  display: inline-block;
  width: 0.45em;
  height: 1em;
  margin-left: 0.06em;
  background: var(--uru-mesh);
  box-shadow: 0 0 0 1px var(--cds-border-inverse, var(--cds-border-strong));
  transform: translateY(0.14em);
  opacity: 0;
}

.caret.typing {
  opacity: 1;
  animation: uru-caret-blink calc(var(--cds-duration-slow-02, 700ms) * 2) steps(1) infinite;
}

.caret.done {
  opacity: 1;
  animation: uru-caret-fade var(--cds-duration-slow-01, 400ms) var(--uru-ease-productive) 1s forwards;
}

/* A caret cadence, not a UI transition: Carbon publishes no duration for a blink. */
@keyframes uru-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@keyframes uru-caret-fade {
  to { opacity: 0; }
}

.cap-more {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
}

.cap-more li {
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
}

/* The read-only chip is one bordered badge. In Polish the label wraps, and a wrapped
   inline box redraws its 1px border around each fragment, so the badge rendered as two
   boxes at 768, 1024, 1280 and 1440. nowrap is the fix; box-decoration-break is the
   belt-and-braces guard if a future string is long enough to break anyway. */
.chip {
  padding: var(--cds-spacing-01) var(--cds-spacing-02);
  border: 1px solid var(--uru-orange-ui);
  color: var(--cds-text-primary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Failure gating. home-hero.js builds #stackSvg from nothing, so the fallback poster has
   to be the default state and stay up until the hero has actually DRAWN a frame, not
   merely until a script tag has loaded. v17 stamped html.has-js from the head, so a
   hero.js that loaded and then threw produced a blank rectangle, strictly worse than
   having no JS at all. The flag is accepted on #scene or on <html>. */
#stackSvg { visibility: hidden; }

.hero-scene[data-hero-ready] #stackSvg,
html[data-hero-ready] #stackSvg { visibility: visible; }

.hero-scene[data-hero-ready] .scene-fallback,
html[data-hero-ready] .scene-fallback { display: none; }

.scene-fallback { width: 100%; text-align: center; }

/* Autoplay stop control (SC 2.2.2). home-hero.js appends the button into #scene and only
   applies its own inline fallback styling when --uru-autoplay-styled is not 1, so the
   declaration below is what hands the control over to the design system. */
.scene-autoplay {
  --uru-autoplay-styled: 1;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  align-self: center;
  justify-self: center;
  min-block-size: 2rem;
  padding: var(--cds-spacing-02) var(--cds-spacing-04);
  border: 1px solid var(--cds-border-strong-01, var(--cds-border-strong));
  background: transparent;
  color: var(--cds-text-secondary);
  font: inherit;
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  cursor: pointer;
}

.scene-autoplay:hover {
  border-color: var(--cds-text-primary);
  color: var(--cds-text-primary);
}

.scene-autoplay[hidden] { display: none; }

.scene-fallback .poster {
  width: 100%;
  max-width: 28rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

.poster-fill {
  fill: var(--uru-mesh);
  opacity: 0.82;
}

.poster-edge {
  fill: none;
  stroke: var(--uru-slab-edge);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.poster-line {
  fill: none;
  stroke: var(--cds-text-on-color);
  stroke-width: 0.8;
  stroke-opacity: 0.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.scene-fallback p {
  max-width: 34em;
  margin: var(--cds-spacing-04) auto 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ==========================================================================
   5. Evidence band (public market examples)
   A contrast zone rather than a private --ev-* palette: .uru-contrast-zone remaps the
   whole Carbon token set to g100, so every child resolves dark in both page themes and
   the band needs no colour of its own.
   ========================================================================== */

.uru-home-evidence {
  padding-block: var(--cds-spacing-09);
  border-block: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
  background: var(--cds-background);
  color: var(--cds-text-primary);
}

@media (min-width: 42rem) {
  .uru-home-evidence { padding-block: var(--cds-spacing-10); }
}

@media (min-width: 66rem) {
  .uru-home-evidence { padding-block: var(--cds-spacing-11); }
}

.uru-home-evidence__rule {
  display: block;
  margin-top: var(--cds-spacing-05);
}

/* A measurement-scale glyph, not a link. border-strong carries Carbon's 3:1
   non-text contrast guarantee, which is what a graphic element needs. */
.uru-home-evidence__rule .tick-line {
  stroke: var(--cds-border-strong-01, var(--cds-border-strong));
  stroke-width: 2;
  fill: none;
}

.uru-home-evidence__disclaimer {
  max-width: 46em;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* A nested six-track grid inside one full-width Carbon column: two wide cards over
   three narrow ones is a 2/3 rhythm that 16 columns cannot express in whole numbers.
   Gaps and breakpoints are still Carbon's. */
.ev-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-08);
}

/* These break on the CONTENT COLUMN, not the viewport, and that distinction is the
   whole bug. Every breakpoint in this band was written for the v44 page, which was
   single-column -- there the content box WAS the viewport. Inside layout B's shell
   the rail takes 16rem, so a `min-width: 66rem` query fires when the column is only
   50rem wide. Measured before this change, at the moment the rail appears:

     viewport 1055 -> 1056 : .ev-card__src 454px -> 53px, and the document gained a
     horizontal scrollbar (scrollWidth 1066 > 1055). The 15rem chart floor beat a
     5fr share of ~156px, leaving 70px for the entire source track -- one word per
     line, with the date printing through the card border.

   The thresholds below are the old ones minus the page gutter, so they fire where
   they always meant to: 38rem where 42rem used to (672 - 64), 72rem for the six-track
   grid (62rem is where 66rem used to fire, but the dense layout needs more than the
   old threshold gave it -- at exactly 62rem the source track came out 181px), 78rem
   where 82rem did (1312 - 64). Being container-relative they are
   now correct with a rail, without one, and at any future rail width. */
.uru-home-evidence .cds--css-grid-column {
  container: evidence / inline-size;
}

@container evidence (min-width: 38rem) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container evidence (min-width: 72rem) {
  .ev-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ev-card { grid-column: span 2; }
  .ev-card--wide { grid-column: span 3; }
}

/* spacing-05 on all four sides is the tile content padding [tile-style]; the old
   spacing-06 block padding was the one off-pattern value in the card. */
.ev-card {
  display: flex;
  flex-direction: column;
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

.ev-card__viz { padding-bottom: var(--cds-spacing-05); }

/* The source block stays pinned to the foot of the card, which is what makes the rule read
   as a footer divider rather than a stray line; the slack above it is what the lg rules
   below redistribute. */
.ev-card__row {
  margin-top: auto;
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

/* --------------------------------------------------------------------------
   Wide cards from lg: viz beside the source block, not above it.

   The chart was capped at 18.75rem inside a 646px content box, so 346px of the wide card
   was dead, and the sibling wide card (a stat block, no chart) carried a 103px vertical
   void because .ev-card__row is bottom-pinned in an equal-height row. Splitting the wide
   card into two tracks spends both at once: the chart fills its own track (cap removed
   below) and the text column takes the height the stat block does not need. The narrow
   cards keep the stacked layout, which is the horizontal-masonry rule (rows may differ,
   tiles within a row stay equal) [tile-usage].
   -------------------------------------------------------------------------- */
@container evidence (min-width: 72rem) {
  /* 15rem is a floor, not a size: the chart's labels are drawn in the 240-unit viewBox and
     therefore scale with the track, and a 5fr share of the card at 1056 measured 199px, which
     draws the axis labels at 9.9px. 240px holds them at or above 12px, and the floor releases
     as soon as 5fr exceeds it. */
  .ev-card--wide {
    display: grid;
    grid-template-columns: minmax(15rem, 5fr) minmax(0, 6fr);
    column-gap: var(--cds-spacing-05);
  }

  .ev-card--wide .ev-card__viz {
    padding-bottom: 0;
  }

  /* The divider turns with the layout: a top border under a side-by-side split would
     rule off nothing. */
  .ev-card--wide .ev-card__row {
    margin-top: 0;
    padding-top: 0;
    padding-inline-start: var(--cds-spacing-05);
    border-top: none;
    border-inline-start: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
  }
}

.ev-card__org {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
  line-height: var(--cds-heading-compact-01-line-height, 1.29);
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
  font-weight: 600;
}

.ev-card__claim {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
}

.ev-card__src {
  margin: var(--cds-spacing-03) 0 0;
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.ev-card__src a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.ev-card__src a:hover { color: var(--cds-link-primary-hover, var(--cds-link-primary)); }

.ev-card__date {
  margin-left: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  white-space: nowrap;
}

/* The headline statistic is the loudest thing in the card and it is not clickable.
   In link-primary it sat at exactly the colour of the real source links directly
   below it ("Vodafone", "Bank Pekao", "Santander"), so the card offered two
   identical blues meaning different things -- measured 8 such elements on the
   page against live's 0. text-primary keeps the emphasis (13.76:1 on the card)
   and gives the blue back to links alone. Carbon: "$link-primary -- Primary links". */
.ev-num {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-05-font-size, 2rem);
  line-height: var(--cds-heading-05-line-height, 1.25);
  letter-spacing: var(--cds-heading-05-letter-spacing, 0);
  font-weight: 400;
}

/* The published figure is what the card is for, so from md it takes the expressive step of
   the scale (heading-06, 42/50 at 300). heading-06 rather than any fluid-* token on purpose:
   a fluid style inside a container is a defect [type-sets], and a card is a container. The
   extra height is also what closes most of the 103-136px void the bottom-pinned source block
   left in the text-only cards of an equal-height row. */
@media (min-width: 42rem) {
  .ev-num {
    font-size: var(--cds-heading-06-font-size, 2.625rem);
    line-height: var(--cds-heading-06-line-height, 1.199);
    letter-spacing: var(--cds-heading-06-letter-spacing, 0);
    font-weight: 300;
  }
}

/* Where the slack goes. A row of equal-height tiles whose copy runs from 2 to 6 lines has
   slack by construction. Centring each of the two zones was tried and measured worse:
   .ev-num tops came out at 86 / 101 / 33px and the wide row's two source blocks started
   38-94px apart, so the slack bought a staircase where [grid-overview] wants key lines, and
   horizontal and vertical alignment count equally there. Closing panel 2026-07-28, b3: every
   zone tops out instead. That gives the row two shared key lines, the figure line at the card
   pad and the card foot the bottom-pinned source block already holds, and the slack collects
   mid-card above the footer rule as rest. The footer rule itself still floats, because the
   source blocks run 131 to 267px and the rule sits one rule-to-pad distance above a bottom
   pin; equalising it would need equal source copy, which is frozen. */
@media (min-width: 66rem) {
  .ev-card__viz,
  .ev-card__row {
    display: flex;
    flex-direction: column;
  }

  /* The chip is inline-block in normal flow; as a flex item it would stretch to the whole
     column and its border would rule off the card. */
  .ev-card__viz .ev-chip {
    align-self: flex-start;
  }

  /* The viz takes the slack so the source block stays pinned to the foot (the base rule's
     margin-block-start: auto does the same job; this keeps it explicit under grid and flex
     both). No extra block padding: the card's own spacing-05 puts every figure on one line
     with the charts in the wide row above. */
  .ev-card:not(.ev-card--wide) .ev-card__viz {
    flex: 1 1 auto;
  }

  .ev-card:not(.ev-card--wide) .ev-card__row {
    margin-block-start: auto;
  }
}

/* The 15rem chart floor releases once a 5fr share exceeds it on its own, so the two wide
   cards resolve the same minmax(0, 5fr) / minmax(0, 6fr) split and their right-hand text
   starts on the same x by construction.

   This used to release at viewport 82rem on the reasoning that "from 1312 a 5fr share
   already measures 258px". That arithmetic assumed a 1312px content column; with the rail
   the column is 1056, and the share is 199px -- so the release was firing exactly where the
   floor was still needed, and the chart got SMALLER as the viewport grew: 384px at 1055,
   240px at 1056, 199px at 1312, with axis labels down to 9.95px. Container-relative 78rem
   is the same intent, measured against the box that actually decides. */
@container evidence (min-width: 78rem) {
  .ev-card--wide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.ev-num__sub {
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* This is a Tag: a short secondary metric attached to the card. It was drawn as
   blue text in a blue box, which is the shape and the colour of a link, so it read
   as clickable. Carbon's own tag tokens say it plainly instead -- gray tag on the
   dark layer, 6.94:1, no border needed once the fill carries the shape. */
.ev-chip {
  display: inline-block;
  margin-top: var(--cds-spacing-05);
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  color: var(--cds-tag-color-gray, var(--cds-text-primary));
  background: var(--cds-tag-background-gray, var(--cds-layer-02));
  border: 0;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
}

/* The 18.75rem (300px) cap was the whole of the wide card's 346px of dead space: it capped
   the chart at less than half its 646px content box. The chart now fills its box, which from
   lg is the 5fr track of the split wide card (about 300-460px across 1056-1920) and below lg
   is the card's own content width. Bars, labels and axis scale with the 240x150 viewBox, so
   the drawn geometry needs no edit; the caption and the chip below it keep their own tokens.
   24rem (384px, 48 mini units) replaces the cap only as a ceiling on the drawn type: the SVG
   labels scale with the box, and past 384px they pass 22px. The 5fr track measures 287px at
   1440, so the ceiling is inert at every width up to about 1750 and no dead space returns. */
.ev-bars {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
}

.ev-bars .bar-before { fill: var(--cds-border-strong-01, var(--cds-border-strong)); }
/* A chart data series takes the categorical palette, not $support-info -- these bars carry
   no status, and site.css already ships eight categorical values for exactly this. */
.ev-bars .bar-after { fill: var(--uru-chart-categorical-1); }

/* border-strong, not border-subtle. This is the baseline both bars are read against in a
   two-bar comparison, so it carries meaning and takes 1.4.11 with it -- as a subtle border
   it measured 1.94:1 on the zone surface, and strong gives 3.01:1. */
.ev-bars .bar-axis {
  stroke: var(--cds-border-strong-01, var(--cds-border-strong));
  stroke-width: 1.5;
}

.ev-bars .bar-value {
  fill: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
}

.ev-bars .bar-name {
  fill: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ev-bars__caption {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ==========================================================================
   6. Kernel band (live neural kernel)
   v17 carried this block as a <style> element inside <body>, which is non-conforming
   HTML. The --uru-kernel-* inputs the runtime reads now resolve real Carbon tokens
   instead of the eight counterfeit --cds-* names v17 published.
   ========================================================================== */

.uru-home-kernel {
  padding-block: var(--cds-spacing-09);
  border-top: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
  background: var(--cds-background);
}

@media (min-width: 42rem) {
  .uru-home-kernel { padding-block: var(--cds-spacing-10); }
}

@media (min-width: 66rem) {
  .uru-home-kernel { padding-block: var(--cds-spacing-11); }
  .uru-home-kernel .cds--css-grid { align-items: center; }
}

.uru-home-kernel .cds--css-grid { row-gap: var(--cds-spacing-07); }

/* The 3px rail this label used to carry (padding-inline-start spacing-04 + a --uru-mesh
   border-inline-start) pushed its first glyph 15px right of the h2 directly beneath it and
   15px right of the eyebrow in every other band, so the band opened on a sheared key line
   (ground truth directive 4). The rail device itself is unchanged and still marks a claim
   block on .uru-home-hero__payline, .uru-home-commercial__line, .ub-gap and
   .uru-legal-note__objection; it is only off the 12px label.

   The orange rule that used to sit here has been removed rather than repaired. It was
   dead: `.uru-home-kernel__eyebrow` is (0,1,0) and `.uru-home-main .uru-eyebrow` at
   home.css:137 is (0,2,0), so this label has been rendering text-secondary all along
   -- measured rgb(82,82,82) in g10 and rgb(198,198,198) in g90, never orange. The old
   comment's "The orange stays" was simply false. Deleting it is also the right call on
   the merits: hard rule 2 reserves orange for the consensus/approval accent, and a
   section eyebrow is not that. */

.uru-home-kernel__facts {
  margin: var(--cds-spacing-06) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
}

.uru-home-kernel__facts li {
  position: relative;
  padding-inline-start: var(--cds-spacing-06);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* Neutral marker, not $interactive. These squares used to take --cds-interactive (#0f62fe),
   which is the token that means "this element is interactive" -- so three static facts got
   the site's only accent hue and read as checkboxes or links. They are neither, and it was
   the one place on the page where colour was spent on nothing. $border-strong-01 is the
   structural-line token and keeps the marker visible without claiming affordance. Measured on
   composited pixels, not computed from the token table: $border-strong-01 resolves to #8d8d8d
   in BOTH themes (it is theme-invariant -- g100 is where it drops to #6f6f6f), so the ratio
   moves only with the ground: 3.02:1 on g10 (#8d8d8d on #f4f4f4) and 4.56:1 on g90 (#8d8d8d
   on the section's #262626). Both clear the 3:1 for non-text. Not -02, which layer-pairing.py
   flags on a $background ground. */
.uru-home-kernel__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--cds-border-strong-01, var(--cds-border-strong));
}

.uru-home-kernel__note {
  max-width: 34em;
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* Theme-integrated, frameless kernel. The canvas is transparent, so driving the host
   background from --cds-background lets the animation bleed into the band as ambient
   motion instead of a pasted dark panel. */
.uru-hero-kernel {
  --uru-kernel-bg: var(--cds-background);
  --uru-kernel-layer: var(--cds-layer-01);
  --uru-kernel-ink: var(--cds-text-primary);
  --uru-kernel-muted: var(--cds-text-secondary);
  --uru-kernel-accent: var(--uru-mesh);
  --navy: var(--uru-kernel-bg);
  --navy-2: var(--uru-kernel-layer);
  --cream: var(--uru-kernel-ink);
  --orange: var(--uru-kernel-accent);
  --ink: var(--uru-kernel-ink);
  --uru-hero-reveal-duration: var(--cds-duration-moderate-02, 240ms);
  --uru-hero-reveal-easing: var(--uru-ease-entrance);
  position: relative;
  overflow: hidden;
  min-height: var(--uru-kernel-min-h, 100svh);
  background: var(--uru-kernel-bg);
}

.kernel-viz.uru-hero-kernel {
  --uru-kernel-min-h: 0px;
  height: 20rem;
  border: 0;
  background: transparent;
}

@media (min-width: 42rem) {
  .kernel-viz.uru-hero-kernel { height: 26rem; }
}

@media (min-width: 66rem) {
  .kernel-viz.uru-hero-kernel { height: 32rem; }
}

.uru-hero-kernel canvas.live,
.uru-hero-kernel .labels { opacity: 0; }

.uru-hero-kernel:not([data-hero-warming]) canvas.live,
.uru-hero-kernel:not([data-hero-warming]) .labels { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .uru-hero-kernel canvas.live,
  .uru-hero-kernel .labels {
    transition: opacity var(--uru-hero-reveal-duration) var(--uru-hero-reveal-easing);
  }
}

.uru-hero-kernel .motif {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.uru-hero-kernel .iconlib {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.uru-hero-kernel canvas.live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.uru-hero-kernel .labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.uru-hero-kernel .lbl {
  position: absolute;
  left: 0;
  top: 0;
  will-change: left, top, opacity;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  text-shadow:
    0 1px 3px var(--uru-kernel-halo),
    0 0 10px var(--uru-kernel-halo-soft);
}

.uru-hero-kernel .lbl--root { letter-spacing: 0.14em; }

/* Output-leaf labels (panel pick 2026-07-26): right-side nodes anchor at the icon's
   inner edge and grow toward the hub, so no label can reach the canvas clip edge at
   any width; same halo shadow as the input labels carries them over the curves. */
.uru-hero-kernel .lbl--out {
  transform: translateX(-100%);
  letter-spacing: 0.14em;
}

/* Static fallback. It stays visible until home-kernel.js reports a drawn frame with
   data-live, so a runtime that loads and then fails leaves a readable diagram rather
   than an empty box. The icons come from the externalised sprite. */
.kernel-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-05);
}

.uru-hero-kernel[data-live] .kernel-fallback { display: none; }

.kernel-fallback svg {
  width: 100%;
  max-width: 21.25rem;
  height: auto;
}

.kernel-fallback .kf-node use { fill: var(--cds-text-secondary); }
.kernel-fallback .kf-hub use { fill: var(--uru-orange-ui); }

.kernel-fallback .kf-link path {
  stroke: var(--cds-border-strong-01, var(--cds-border-strong));
  stroke-width: 1.4;
  fill: none;
}

/* ==========================================================================
   7. Worked example
   ========================================================================== */

.case-card {
  display: flex;
  flex-direction: column;
  max-width: 44rem;
  margin-top: var(--cds-spacing-07);
  padding: var(--cds-spacing-06);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

.uru-home-section--tint .case-card { background: var(--cds-layer-02, var(--cds-layer)); }

.case-card__tag {
  margin: 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-card .uru-home-h3 { margin-top: var(--cds-spacing-04); }

.case-card__body {
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.case-card__reply {
  margin: var(--cds-spacing-05) 0 0;
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-02, var(--cds-layer));
  border-inline-start: 3px solid var(--cds-interactive);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.uru-home-section--tint .case-card__reply { background: var(--cds-layer-03, var(--cds-layer-02, var(--cds-layer))); }

.case-card__pending {
  display: flex;
  align-items: baseline;
  gap: var(--cds-spacing-03);
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.case-card__pending::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--uru-mesh);
  transform: translateY(-1px);
}

.case-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-spacing-04);
  margin: auto 0 0;
  padding-top: var(--cds-spacing-05);
}

.demo-btn {
  display: inline-block;
  padding: var(--cds-spacing-03) var(--cds-spacing-06);
  background: var(--cds-layer-02, var(--cds-layer));
  color: var(--cds-text-secondary);
  border: 1px dashed var(--cds-border-strong-01, var(--cds-border-strong));
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.demo-caption {
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  letter-spacing: 0.04em;
}

.worked__note {
  max-width: 44rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ==========================================================================
   8. Commercial strip
   ========================================================================== */

/* #zasady is a rail destination, so it has to read as one. It was the only section
   of the nine drawn at subsection rank -- heading-03 at 20px with spacing-07 padding,
   against heading-04 and spacing-09/10 on the other eight -- which made a top-level
   landmark look like a tail of #przyklady above it. Its own content is unchanged; it
   only takes the same structural rank as its siblings.

   It still has no eyebrow, because upstream gives it none (`commercial.eyebrow` is
   null in both languages). That is a content fact, not a style bug, and inventing
   copy for a captured page is not this file's job. */
/* Padding, ground and rule now come from .uru-home-section, and the heading scale
   from .uru-home-h2, both carried in the markup -- see the note over the section in
   HomePageB.svelte. Only the spacing below the heading is this band's own. */
.uru-home-commercial__heading {
  margin-block-end: var(--cds-spacing-06);
}

/* Alignment-only box: the same 3px + spacing-05 inline start as the paragraphs, with the
   border transparent so the rail stays the claim device and does not run behind a heading.
   A transparent border rather than a calc() keeps every spacing value a token. */
.uru-home-commercial .uru-home-h3 {
  margin: var(--cds-spacing-07) 0 var(--cds-spacing-04);
  padding-inline-start: var(--cds-spacing-05);
  border-inline-start: 3px solid transparent;
}

/* Owner note 2026-08-03 (review console, note 7). Seven label/body pairs replace three
   headings and five dense paragraphs. The orange rail moves from the paragraph to the term,
   so the rail marks the thing being named rather than the whole block. Below 42rem the pairs
   stack; above it they become a two-column grid whose first column is bounded so a long term
   cannot push the bodies into a ribbon. dd gets an explicit margin because the browser
   default is 40px, which sits ON the Carbon spacing scale and would therefore pass the token
   audit unnoticed (BLACK-3). */
.uru-rules-list {
  margin: var(--cds-spacing-06) 0 0;
  max-width: 60rem;
}

.uru-rules-list dt {
  padding-inline-start: var(--cds-spacing-05);
  border-inline-start: 3px solid var(--uru-orange-ui);
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
  font-weight: 600;
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}

.uru-rules-list dd {
  margin: var(--cds-spacing-03) 0 0;
  padding-inline-start: var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.42857);
}

.uru-rules-list dd + dt {
  margin-block-start: var(--cds-spacing-06);
}

@media (min-width: 42rem) {
  .uru-rules-list {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    column-gap: var(--cds-spacing-06);
    row-gap: var(--cds-spacing-06);
  }

  .uru-rules-list dt {
    grid-column: 1;
  }

  .uru-rules-list dd {
    grid-column: 2;
    margin: 0;
    padding-inline-start: 0;
  }

  .uru-rules-list dd + dt {
    margin-block-start: 0;
  }
}

/* ==========================================================================
   9. Team
   ========================================================================== */

/* Bare .cds--css-grid sets row-gap: normal, so the lede's descenders were landing on the
   first person card's top border (measured seam 0.0px at 1440 and 390). spacing-07 is the
   grid gutter, which is what .cds--css-grid--with-row-gap resolves to, and it clears the
   spacing-06 card padding by a step so the seam between cards reads as bigger than the
   spacing inside one. */
#zespol .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}

.uru-home-person {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05);
  align-items: flex-start;
  height: 100%;
  padding: var(--cds-spacing-06);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

/* Row layout is a property of the CARD's width, not the viewport's. Keyed to the
   viewport it fired at 672 on a 288px card, which left 106px of measure beside the
   9rem portrait -- one word per line for about fifteen lines, the name clipped at
   the card edge, and 12px of content outside the card (scrollWidth 298 vs clientWidth
   286). It then got worse rather than better as the window grew: at 1055 the text
   column was 262px, and at 1056 the rail appeared and cut it back to 134px.

   28rem is the width at which the portrait (9rem), the gap and the card padding still
   leave ~240px of measure. */
.cds--css-grid-column:has(> .uru-home-person) {
  container: person / inline-size;
}

@container person (min-width: 28rem) {
  .uru-home-person {
    flex-direction: row;
    gap: var(--cds-spacing-06);
  }
}

.uru-home-person img {
  width: 9rem;
  height: 9rem;
  flex: none;
  object-fit: cover;
  object-position: center;
}

.uru-home-person p {
  margin: var(--cds-spacing-04) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.uru-home-person__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  min-block-size: 1.5rem;
  margin-top: var(--cds-spacing-05);
  color: var(--cds-link-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  font-weight: 600;
  text-decoration: none;
}

.uru-home-person__link:hover { text-decoration: underline; }

/* ==========================================================================
   10. Blog cards
   ========================================================================== */

/* Same 0.0px seam defect as #zespol, and here it also broke the proximity rule: the cards
   set 8px between their own date, title and excerpt and 16px of body padding, so an inter-card
   seam of 0 read them as one block. spacing-07 puts the seam a clear step above the largest
   intra-card value. The "Wszystkie wpisy" link drops its own margin-top to the grid so the
   parent owns the layout and the gap is not applied twice. */
#blog .cds--css-grid {
  row-gap: var(--cds-spacing-07);
  container: blogstrip / inline-size;
}

/* Same defect as the evidence grid, same cause: cds--lg:col-span-4 breaks on the VIEWPORT
   at 1056, but 1056 is also where the 16rem rail appears, so the content column is only
   ~688px and four cards resolve to 160px each -- a 126px measure at 14px, about nine
   characters a line. Measured on / at 1056: the title scrollWidth was 151 against a 126
   clientWidth, so "udokumentowanych" printed 25px past the card's right border into the
   gutter. Clean again by 1200.

   The override has to be nested inside the lg media query: the span classes only apply
   from 66rem up, and below that the grid is 8 or 4 tracks wide where span-4 is already
   two-up or one-up and correct.

   72rem is the same threshold the evidence grid uses, and for the same reason -- four
   tracks plus three gutters need about that much before each one clears the ~260px where
   a 14px line stops reading as a word list. A first attempt at 50rem was measured and
   rejected: it only bit at exactly 1056, and by 1100 the cards were back to 171px with
   break-word quietly hyphenating "udokumentowanych" instead of the layout giving it room.
   break-word stays, but as a floor for a word longer than its column, not as the fix. */
@media (min-width: 66rem) {
  @container blogstrip (max-width: 72rem) {
    #blog .cds--css-grid > .uru-home-blog-col { grid-column: span 8 / span 8; }
  }
}

.uru-home-blog-card__title { overflow-wrap: break-word; }

.uru-home-blog-card {
  display: block;
  height: 100%;
  color: var(--cds-text-primary);
  text-decoration: none;
  border: 1px solid var(--cds-border-tile-01, var(--cds-border-subtle));
  background: var(--cds-layer-01);
}

/* The tile indicator follows the tile onto the 02 set with its background
   ("$border-tile-02 -- Operable tile indicator paired with $layer-02"). */
.uru-home-section--tint .uru-home-blog-card {
  background: var(--cds-layer-02, var(--cds-layer));
  border-color: var(--cds-border-tile-02, var(--cds-border-subtle));
}

.uru-home-blog-card:hover { color: var(--cds-text-primary); }
.uru-home-blog-card:hover .uru-home-blog-card__title { text-decoration: underline; }

.uru-home-blog-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.uru-home-blog-card__body { padding: var(--cds-spacing-05); }

.uru-home-blog-card__date {
  display: block;
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  color: var(--cds-text-secondary);
}

.uru-home-blog-card__title {
  margin: var(--cds-spacing-03) 0 0;
  font-size: var(--cds-heading-02-font-size, 1rem);
  line-height: var(--cds-heading-02-line-height, 1.5);
  letter-spacing: var(--cds-heading-02-letter-spacing, 0);
  font-weight: 600;
  color: var(--cds-text-primary);
}

.uru-home-blog-card__body p {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.uru-home-blog-more { margin: 0; }

.uru-home-blog-more a {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  min-block-size: 1.5rem;
  color: var(--cds-link-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  font-weight: 600;
  text-decoration: none;
}

.uru-home-blog-more a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .uru-home-blog-card {
    transition: background-color var(--cds-duration-fast-02, 110ms) var(--uru-ease-productive);
  }
  .uru-home-blog-card:hover { background: var(--cds-layer-hover-01, var(--cds-layer-01)); }
}

/* ==========================================================================
   11. Contact band
   ========================================================================== */

.uru-home-contact {
  padding-block: var(--cds-spacing-09);
  border-top: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
  background: var(--cds-layer-01);
}

@media (min-width: 42rem) {
  .uru-home-contact { padding-block: var(--cds-spacing-10); }
}

@media (min-width: 66rem) {
  .uru-home-contact { padding-block: var(--cds-spacing-11); }
}

/* Below lg the form column and the contact rail stack, and the seam between them was 0.0px
   of grid row-gap with the 32px carried as .uru-contact-rail's own margin-top. The parent
   owns the layout instead (home-form.css drops that margin), so the seam is one token and
   the same value the rest of the page uses. From lg the band is a single row and the gap is
   inert. */
#kontakt .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}

/* "Kontakt" is a section label, not the approval accent, and it was the only orange
   eyebrow of nine -- an odd one out with no structural reason for it. Hard rule 2
   reserves orange for the consensus/approval moment; a heading kicker is not that. */

.uru-home-contact__promise {
  max-width: 42rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.uru-home-contact__linkedin {
  margin: var(--cds-spacing-07) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.uru-home-contact__linkedin a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.uru-home-contact__sep {
  margin: 0 var(--cds-spacing-02);
  color: var(--cds-text-secondary);
}

/* ==========================================================================
   12. Footer
   The shell comes from assets/site.css; only the legal block is homepage-specific.
   ========================================================================== */

.uru-footer__legal-block {
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
}

.uru-home-footer__address {
  margin: 0 0 var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
  font-style: normal;
}

/* ==========================================================================
   13. Reduced motion
   assets/site.css already guards the reveal machinery; this covers everything
   home.css adds. v17 left the blog-card transition and the kernel opacity
   transition unguarded.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html:not(.uru-force-motion) .slab,
  html:not(.uru-force-motion) .sel-edge,
  html:not(.uru-force-motion) .sel-case,
  html:not(.uru-force-motion) .focus-edge,
  html:not(.uru-force-motion) .mesh-sel,
  html:not(.uru-force-motion) .mesh-sel-case,
  html:not(.uru-force-motion) .uru-hero-kernel canvas.live,
  html:not(.uru-force-motion) .uru-hero-kernel .labels,
  html:not(.uru-force-motion) .uru-home-blog-card {
    transition: none;
  }

  html:not(.uru-force-motion) .caret {
    animation: none;
    opacity: 0;
  }
}