/* site.css — first-party layer for uruchom.ai baked pages.
   Rules: Carbon tokens ONLY for color/space/type (no ad-hoc px where a token
   exists); both themes drive this same sheet via [data-theme] token sets.
   Spacing tokens: --cds-spacing-01..13; type via Plex + Carbon scale. */

/* ---- fonts: vendored IBM Plex (no external fonts, CSP-safe) ---- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../vendor/fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../vendor/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../vendor/fonts/IBMPlexSans-Italic.woff2') format('woff2');
}


/* ---- Carbon spacing scale (official @carbon/layout values) ----
   The vendored carbon-styles.css defines NO global --cds-spacing-* custom
   properties (carbon-charts.css scopes a copy to .cds--chart-holder only),
   so every var(--cds-spacing-*) below would resolve empty without this.
   Found during the layout-B build; declared once here for all layouts. */
:root {
  --cds-spacing-01: 0.125rem;
  --cds-spacing-02: 0.25rem;
  --cds-spacing-03: 0.5rem;
  --cds-spacing-04: 0.75rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-08: 2.5rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-11: 5rem;
  --cds-spacing-12: 6rem;
  --cds-spacing-13: 10rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:not(.uru-force-motion) { scroll-behavior: auto; }
}


/* Anchor targets must clear the 3rem sticky header, or in-page jumps land
   with the section heading hidden under the bar. */
[id] { scroll-margin-block-start: calc(3rem + var(--cds-spacing-05)); }

body {
  margin: 0;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cds-link-primary); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

[hidden] { display: none !important; }

/* The vendored Carbon sheet ships no --cds-duration-* custom properties, so every
   transition on the site was running on its own hardcoded fallback and the six token
   names resolved to nothing. That is invisible until two fallbacks disagree, which they
   did: home.css used moderate-01 = 150ms (Carbon's value) while the local-nav drawer used
   moderate-01 = 240ms, so the drawer really animated at moderate-02's duration under
   moderate-01's name. Defining the tokens makes the names mean what they say and the
   fallbacks stop mattering. Values from the Carbon motion duration tokens; they are
   theme-invariant, so they belong on :root and not in the theme blocks below. */
:root {
  --cds-duration-fast-01: 70ms;
  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-duration-moderate-02: 240ms;
  --cds-duration-slow-01: 400ms;
  --cds-duration-slow-02: 700ms;
}

/* Chart palettes are the only active authored hex colors in the UI layer.
   They mirror Carbon Charts' categorical intent: discrete categories, no
   alert/status semantics. The runtime resolves these per active theme. */
:root,
[data-theme="carbon"],
[data-theme="white"],
[data-theme="g10"] {
  --uru-chart-categorical-1: #0f62fe;
  --uru-chart-categorical-2: #1192e8;
  --uru-chart-categorical-3: #009d9a;
  --uru-chart-categorical-4: #8a3ffc;
  --uru-chart-categorical-5: #525252;
  --uru-chart-categorical-6: #4589ff;
  --uru-chart-categorical-7: #0072c3;
  --uru-chart-categorical-8: #005d5d;
}
/* .uru-contrast-zone is listed with the dark themes for the same reason carbon-nested.css
   restates the v10 alias map on it: a zone is a g100 surface nested inside whatever the
   page theme is, and custom properties substitute where they are DECLARED, so a palette
   scoped to the page selectors alone carries LIGHT-theme values onto a dark surface.
   Measured before this line existed: `.ev-bars .bar-after` inside the evidence zone under
   a g10 page painted #0f62fe on #262626 -- 3.03:1, three hundredths above the 1.4.11
   floor, where the g90 value gives 6.43:1. */
[data-theme="navy-orange"],
[data-theme="g90"],
[data-theme="g100"],
.uru-contrast-zone {
  --uru-chart-categorical-1: #78a9ff;
  --uru-chart-categorical-2: #33b1ff;
  --uru-chart-categorical-3: #08bdba;
  --uru-chart-categorical-4: #be95ff;
  --uru-chart-categorical-5: #c6c6c6;
  --uru-chart-categorical-6: #a6c8ff;
  --uru-chart-categorical-7: #82cfff;
  --uru-chart-categorical-8: #3ddbd9;
}

.uru-skip-link {
  position: absolute;
  z-index: 1000;
  inset-block-start: var(--cds-spacing-03);
  inset-inline-start: var(--cds-spacing-03);
  transform: translateY(calc(-100% - var(--cds-spacing-05)));
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background: var(--cds-background);
  color: var(--cds-text-primary);
  border: 2px solid var(--cds-focus);
  text-decoration: none;
  font-size: var(--cds-body-compact-01-font-size, .875rem);
}
.uru-skip-link:focus { transform: translateY(0); }

/* ---- scroll reveal (Carbon-style slide-up entrance) ----
   JS adds .has-reveal-js before styles apply; without JS, content remains visible.
   The motion is transform+opacity only. The default page policy forces motion;
   remove .uru-force-motion to honor browser reduced-motion preferences. */
html.has-reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--uru-reveal-distance, var(--cds-spacing-06)));
  transition:
    opacity var(--cds-duration-moderate-02, 240ms) cubic-bezier(0, 0, 0.38, 0.9),
    transform var(--cds-duration-moderate-02, 240ms) cubic-bezier(0, 0, 0.38, 0.9);
  transition-delay: var(--uru-reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.has-reveal-js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
html.has-reveal-js.reveal-failed [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.uru-force-motion).has-reveal-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}


/* ---- shared primitives (token-driven, theme-agnostic) ---- */
.uru-btn {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-03);
  min-height: 3rem; padding: 0 var(--cds-spacing-06) 0 var(--cds-spacing-05);
  font: inherit; font-size: var(--cds-body-compact-01-font-size, .875rem); font-weight: 600;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
  cursor: pointer;
}
.uru-btn--sm { min-height: 2rem; padding: 0 var(--cds-spacing-05); }
.uru-btn--primary { background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.uru-btn--primary:hover { background: var(--cds-button-primary-hover, var(--cds-button-primary)); }
.uru-btn--ghost { border-color: var(--cds-border-inverse, var(--cds-border-strong)); color: var(--cds-text-primary); background: transparent; }
.uru-btn--ghost:hover { border-color: var(--cds-text-primary); }

/* $text-secondary, not $text-helper. A section kicker is a label, and Carbon documents
   $text-helper for help text specifically. This used to be $text-helper here and
   $text-secondary under a home-page override, which put two different greys on the same
   eyebrow component on the same page -- on a blog post "Dla kupujących" measured #6f6f6f
   and "Z praktyki" #525252. One rule, one value.

   The eyebrow also stays NEUTRAL everywhere, contrast zones included: orange is reserved
   for the approval accent (hard rule 2) and support-warning yellow would mis-use a status
   token as décor. */
/* font-size and line-height come from the SAME Carbon type set, always. This rule took
   label-01's size and left the line-height to inherit, so the eyebrow rendered 12/18 while
   label-01 is 12/16 -- a size from the scale wearing a leading from whatever the ancestor
   happened to set.

   The weight and tracking below are deliberately NOT label-01 (which is 400 / 0.32px): 600
   and .16em with uppercase are the eyebrow treatment itself, applied consistently wherever
   the class appears. Size and leading are a metric pair and have to travel together; weight
   and tracking are the design decision layered on top. Saying so explicitly because the
   earlier version of this comment implied the whole rule was token-derived, and it is not. */
.uru-eyebrow {
  margin: 0 0 var(--cds-spacing-05);
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: var(--cds-label-01-line-height, 1.33333);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cds-text-secondary, var(--cds-text-helper));
}

.uru-section { padding-block: var(--cds-spacing-11); }
/* Leading off the token, not a hand-rounded ratio. 1.19 x 32px is 38px; heading-05 is
   32/40. The literal was within a couple of pixels of Carbon and therefore invisible, which
   is exactly why it survived -- hard rule 1 is "to the letter", and a ratio typed by hand
   drifts from the scale the moment the scale moves. */
.uru-section__heading {
  margin: 0 0 var(--cds-spacing-06);
  font-size: var(--cds-heading-05-font-size, 2rem);
  font-weight: 400; letter-spacing: 0;
  line-height: var(--cds-heading-05-line-height, 1.25);
}
.uru-section__lede {
  margin: 0 0 var(--cds-spacing-08); max-width: 42rem;
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: var(--cds-body-02-line-height, 1.5);
  color: var(--cds-text-secondary);
}


/* ---- header (UI Shell anatomy: 3rem bar, name + nav + global actions) ---- */
/* The header's bottom edge is the same problem as the drawer's outer edge, and it was left
   with the same wrong answer. The header always paints #161616 (it is a contrast zone, so
   its token set is g100 regardless of page theme). In g10 the page below is #f4f4f4, so the
   fill difference alone is 16.45:1 and the line is decorative. In g90 the page below is
   #262626: the two surfaces differ by 1.20:1 -- WORSE than the 1.28:1 that justified moving
   the drawer to a strong border -- so the line is the only thing marking where the sticky
   header ends. As subtle-00 it was #393939: 1.57:1 against the header, and on a g90 blog
   post, where the surface that scrolls under it is also #393939, exactly 1.00:1. Invisible.

   strong-01 is #6f6f6f here and theme-invariant. Measured against the header 3.60:1, against
   the g90 page surface 3.01:1, against the g10 page 4.58:1. It cannot clear 3:1 against every
   possible surface that scrolls beneath a sticky header -- a g90 blog callout is #393939, at
   2.30:1 -- but it does clear it against the header itself, which is the pairing that defines
   the edge. Live serves #525252 here (2.32:1), so this is also the one shell detail where we
   had regressed against live while becoming more token-correct. */
.uru-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-strong-01, var(--cds-border-strong));
}
.uru-header__inner {
  display: flex; align-items: center; gap: var(--cds-spacing-05);
  block-size: 3rem; padding-inline: var(--cds-spacing-05) 0;
}
.uru-header__name {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-03);
  font-size: var(--cds-body-compact-01-font-size, .875rem); font-weight: 600;
  color: var(--cds-text-primary); text-decoration: none; letter-spacing: .01em;
}
.uru-header__mark {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: 0 0 auto;
}
.uru-header__mark-img {
  display: block;
  grid-area: 1 / 1;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
}
.uru-header__mark-img--dark { display: none; }
[data-theme="g90"] .uru-header__mark-img--light,
[data-theme="g100"] .uru-header__mark-img--light,
[data-theme="navy-orange"] .uru-header__mark-img--light {
  display: none;
}
[data-theme="g90"] .uru-header__mark-img--dark,
[data-theme="g100"] .uru-header__mark-img--dark,
[data-theme="navy-orange"] .uru-header__mark-img--dark {
  display: block;
}
.uru-header__name-dot { color: var(--cds-text-helper); font-weight: 400; }
.uru-header__menu.uru-icon-button {
  display: none;
  flex: 0 0 auto;
  background: transparent;
}
.uru-header__menu:hover { background: var(--cds-background-hover, transparent); }
.uru-header__menu[data-tooltip]::after {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
/* The tooltip drops to y 54-86 and the drawer's own heading sits at y 80, so with
   the drawer open the tip covered the "Na tej stronie" label it had just revealed --
   and that is the default state after opening with a keyboard, since focus stays on
   the toggle. The button keeps its aria-label, so nothing is lost for assistive tech;
   only the redundant visual tip is suppressed while the panel it describes is open. */
html.uru-local-nav-open .uru-header__menu[data-tooltip]::after {
  content: none;
}
.uru-header__menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uru-header__menu-icon--close { display: none; }
.uru-header__menu[aria-expanded="true"] .uru-header__menu-icon--open { display: none; }
.uru-header__menu[aria-expanded="true"] .uru-header__menu-icon--close { display: inline-flex; }
.uru-header__nav { display: none; flex: 1; gap: var(--cds-spacing-01); }
.uru-header__nav-link {
  display: inline-flex; align-items: center; block-size: 3rem;
  padding-inline: var(--cds-spacing-04);
  font-size: var(--cds-body-compact-01-font-size, .875rem);
  color: var(--cds-text-secondary); text-decoration: none;
}
.uru-header__nav-link:hover { color: var(--cds-text-primary); background: var(--cds-background-hover, transparent); }
.uru-header__global { display: flex; align-items: stretch; gap: 0; margin-inline-start: auto; }
.uru-header__lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  min-inline-size: 3rem;
  block-size: 3rem;
  font-size: var(--cds-label-01-font-size, .75rem); letter-spacing: .06em;
  color: var(--cds-text-secondary); text-decoration: none;
}
.uru-header__lang:hover,
.uru-header__lang:focus-visible {
  color: var(--cds-text-primary);
  background: var(--cds-background-hover, transparent);
}
.uru-header__lang:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-header__lang.is-current { color: var(--cds-text-primary); font-weight: 600; }
.uru-header__lang.is-current::after {
  position: absolute;
  inset: auto 0 0;
  block-size: 2px;
  background: var(--cds-border-interactive, var(--cds-interactive));
  content: "";
}
.uru-header__portal {
  display: none;
  align-items: center;
  block-size: 3rem;
  padding-inline: var(--cds-spacing-04);
  font-size: var(--cds-body-compact-01-font-size, .875rem);
  color: var(--cds-text-secondary);
  text-decoration: none;
}
.uru-header__portal:hover,
.uru-header__portal:focus-visible {
  color: var(--cds-text-primary);
  background: var(--cds-background-hover, transparent);
}
.uru-header__portal:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-header__portal-cta {
  position: relative;
  flex: 0 0 auto;
  block-size: 3rem;
  min-block-size: 3rem;
  white-space: nowrap;
}
.uru-header__portal-cta-icon { display: none; }
.uru-icon-button {
  position: relative;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* border-strong-01, not subtle. The border is the ONLY boundary these controls have --
     .uru-motion-toggle's own plate is #ffffff on the #f4f4f4 g10 page, 1.06:1, so with a
     subtle border at #e0e0e0 (1.20:1, the value this project documents as a defect twice
     over) the control had no edge at all in day mode while looking correctly bounded at
     night. .uru-header__menu had the second manifestation: #525252 on the g100 header
     zone, 2.32:1, which is also a layer-set violation by this project's own rule since
     the zone is a $background ground.
     border-strong carries the 3:1 guarantee by definition, and measures 3.02:1 on the g10
     page, 4.56:1 on g90, and 3.60:1 on the header zone. An earlier pass cleared the subtle
     value by comparing it only against border-subtle-00; it never weighed strong. */
  border: 1px solid var(--cds-border-strong-01, var(--cds-border-strong));
  color: var(--cds-text-primary);
  cursor: pointer;
}
.uru-icon-button[data-tooltip]::after {
  position: absolute;
  z-index: 300;
  inset-block-start: calc(100% + var(--cds-spacing-03));
  inset-inline-end: 0;
  max-inline-size: min(13rem, calc(100vw - var(--cds-spacing-07)));
  /* spacing-03 block, not spacing-01: 2px put the 12px label almost on the box
     padding (grid-overview: type sits against padding, never on it) and made a
     20px-tall tooltip. 8px/16px is Carbon's own tooltip inset. */
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background: var(--cds-background-inverse);
  color: var(--cds-text-inverse);
  box-shadow: 0 var(--cds-spacing-01) var(--cds-spacing-03) var(--cds-shadow, rgba(0, 0, 0, .3));
  content: attr(data-tooltip);
  font-size: var(--cds-label-01-font-size, .75rem);
  font-weight: 400;
  line-height: 1.34;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--cds-spacing-02)));
}
@media (prefers-reduced-motion: no-preference) {
  .uru-icon-button[data-tooltip]::after {
    transition:
      opacity var(--cds-duration-fast-02, 110ms) cubic-bezier(0.2, 0, 0.38, 0.9),
      transform var(--cds-duration-fast-02, 110ms) cubic-bezier(0.2, 0, 0.38, 0.9);
  }
}
.uru-icon-button[data-tooltip]:hover::after,
.uru-icon-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.uru-icon-button[data-tooltip]:hover::after {
  transition-delay: var(--cds-duration-moderate-02, 240ms);
}
.uru-icon-button[data-tooltip]:focus-visible::after {
  transition-delay: 0ms;
}
.uru-theme-toggle {
  background: transparent;
}
.uru-theme-toggle:hover { background: var(--cds-background-hover, transparent); }
.uru-header__global .uru-icon-button {
  border-block: 0;
  border-inline-end: 0;
}
.uru-icon {
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}
.uru-theme-toggle__icon,
.uru-motion-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uru-theme-toggle__icon--night { display: none; }
.uru-theme-toggle[data-theme-mode="g90"] .uru-theme-toggle__icon--day { display: none; }
.uru-theme-toggle[data-theme-mode="g90"] .uru-theme-toggle__icon--night { display: inline-flex; }
@media (min-width: 66rem) { .uru-header__nav { display: flex; } }
@media (min-width: 42rem) { .uru-header__portal { display: inline-flex; } }
/* 41.98rem, not 41.9rem: the complement of the Carbon md boundary (42rem/672px).
   670.4px was off-boundary and inconsistent with the 41.98rem / 65.98rem used by
   the portal-shell queries below. */
@media (max-width: 41.98rem) { .uru-header__cta { display: none; } }
@media (max-width: 65.98rem) {
  .uru-header--local-nav .uru-header__inner { gap: var(--cds-spacing-03); }
  .uru-header--local-nav .uru-header__global { gap: 0; }
  .uru-header--local-nav .uru-header__menu.uru-icon-button { display: inline-flex; }
}
@media (max-width: 47.98rem) {
  .uru-header--local-nav .uru-header__portal-cta {
    inline-size: 3rem;
    block-size: 3rem;
    min-block-size: 3rem;
    justify-content: center;
    padding: 0;
  }
  .uru-header--local-nav .uru-header__portal-cta-label {
    position: absolute;
    overflow: hidden;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .uru-header--local-nav .uru-header__portal-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 23.98rem) {
  .uru-header--local-nav .uru-header__wordmark { display: none; }
}


/* ---- hero (Leadspace-tall; dual composition, one DOM) ----
   One Carbon css-grid with two columns: copy (`uru-hero__content`) and scene
   (`uru-hero__scene`, holding the kernel canvas, the motion toggle and the veil).
   From lg (66rem) up they sit side by side and the veil is off. Below lg
   (65.98rem, this repo's max-width complement of the Carbon lg boundary) the
   scene column leaves the grid flow and pins to the section (absolute, inset: 0),
   so the canvas runs behind the copy; the veil scrim and a text-stroke halo keep
   the copy readable. Both compositions are pure CSS over the same markup: no JS,
   nothing duplicated, SSR-safe.

   The section is the containing block for the absolute scene column, so it is
   position: relative and the grid wrapper stays UNPOSITIONED. The scene column
   must never gain z-index/transform/filter -- any of those would make it a
   stacking context and trap the veil/labels/canvas ladder inside it, under the
   copy's own context instead of interleaved with it. */
.uru-hero {
  position: relative;
  min-height: var(--uru-hero-min-h, 100svh);
  --uru-hero-veil-solid: color-mix(in srgb, var(--cds-background) 44%, transparent);
  --uru-hero-veil-mobile: color-mix(in srgb, var(--cds-background) 70%, transparent);
  background: var(--cds-background);
  color: var(--cds-text-primary);
  overflow: hidden;
}
[data-theme="white"] .uru-hero {
  --uru-hero-veil-solid: color-mix(in srgb, var(--cds-background) 50%, transparent);
  --uru-hero-veil-mobile: color-mix(in srgb, var(--cds-background) 76%, transparent);
}
[data-theme="g10"] .uru-hero {
  --uru-hero-veil-solid: color-mix(in srgb, var(--cds-background) 50%, transparent);
  --uru-hero-veil-mobile: color-mix(in srgb, var(--cds-background) 76%, transparent);
}
[data-theme="g90"] .uru-hero {
  --uru-hero-veil-solid: color-mix(in srgb, var(--cds-background) 36%, transparent);
  --uru-hero-veil-mobile: color-mix(in srgb, var(--cds-background) 64%, transparent);
}
/* Height chain: hero min-height -> grid -> scene column -> kernel host -> kernel.
   `min-block-size: inherit` hands the hero's min-height to the grid; with a single
   auto row and stretched items, the scene column then fills the hero at lg. */
.uru-hero > .cds--css-grid {
  min-block-size: inherit;
  align-items: stretch;
}
/* Flex column so the kernel host's flex: 1 is the height link in the chain; the
   toggle and the veil are absolutely positioned and take no flex space.
   position: relative makes the scene column the containing block for the toggle
   at lg (below lg the column itself turns absolute and stays the toggle's
   containing block, by then spanning the whole hero). */
.uru-hero__scene {
  position: relative;
  display: flex;
  flex-direction: column;
}
.uru-hero-kernel-host { min-inline-size: 0; min-block-size: 0; }
.uru-hero__scene > .uru-hero-kernel-host { flex: 1; }
.uru-hero .uru-hero-kernel {
  min-height: 0;
  block-size: 100%;
  /* The partial's own <style> paints an opaque --uru-kernel-bg that would hide
     the section's background band; the section already paints --cds-background. */
  background: transparent;
}
.uru-hero .uru-hero-kernel {
  --uru-kernel-bg: var(--cds-background);
  --uru-kernel-layer: var(--cds-layer-01);
  --uru-kernel-ink: color-mix(in srgb, var(--cds-icon-primary) 90%, var(--cds-text-secondary));
  --uru-kernel-muted: color-mix(in srgb, var(--cds-icon-primary) 34%, var(--cds-border-strong-01, var(--cds-icon-secondary)));
  /* NOT --cds-link-primary. That is the link token, and the hero accent is not a link:
     g10 had already been overridden to orange in home-overrides.css, but g90 had no such
     override, so the animation's accent resolved to #78a9ff -- literally the link colour --
     in night mode. Same regression class as the kernel ink one property over. The orange
     is the kernel-hero exception in hard rule 2, and --uru-orange-ui carries the
     contrast-corrected value per theme (4.57:1 g10, 6.15:1 g90). The fallback covers
     shells that load site.css without home.css, and is neutral rather than a status or
     link token. */
  --uru-kernel-accent: var(--uru-orange-ui, var(--cds-icon-primary));
}
[data-theme="g90"] .uru-hero .uru-hero-kernel,
[data-theme="g100"] .uru-hero .uru-hero-kernel {
  --uru-kernel-ink: var(--cds-icon-primary);
  --uru-kernel-muted: var(--cds-border-strong-01, var(--cds-icon-secondary));
}
/* The veil is a below-lg readability device: a --cds-background scrim between the
   canvas and the copy. At lg the copy has its own column and needs no wash. */
.uru-hero__veil { display: none; }
/* No kernel label lift in ANY theme: the owner wants the scene's text to dim exactly as
   the scene does, so the labels stay at z-index 1 where the veil (same z, later in DOM)
   washes them together with the canvas at every width and veil strength. The layer is
   decorative (aria-hidden), so the washed rendering is a deliberate treatment, not a
   text-contrast violation. */
.uru-hero__content { align-self: center; padding-block: var(--cds-spacing-11); }
@media (max-width: 65.98rem) {
  /* The scene column leaves the grid flow and pins to the SECTION (the grid
     wrapper stays unpositioned, so the section is the containing block).
     margin: 0 matters: Carbon columns carry gutter margins that would offset an
     inset: 0 box. */
  .uru-hero__scene {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
  }
  .uru-hero__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--uru-hero-veil-solid);
  }
  /* Grid items accept z-index without position; 3 because the scene column
     follows the copy in DOM order and would otherwise paint over it. */
  .uru-hero__content {
    z-index: 3;
    /* 24px top: below lg the copy sits at or near the hero top, so the desktop spacing-11 pad renders
       as dead space under the header. The bottom stays spacing-11 because that band hosts
       the bottom-anchored motion toggle. */
    padding-block: var(--cds-spacing-06) var(--cds-spacing-11);
  }
  /* Text halo: the copy sits directly over the scene here, so it carries a
     background-coloured stroke under the glyph fill (paint-order) instead of a
     shadow. The headline's larger glyphs take the wider 8px stroke. */
  .uru-hero__content .uru-eyebrow,
  .uru-hero__content .uru-hero__headline,
  .uru-hero__content .uru-hero__lede,
  .uru-hero__content .uru-hero-risk,
  .uru-hero__content .uru-home-cta__note {
    --uru-hero-text-stroke-width: 4px;
    -webkit-text-stroke-color: var(--cds-background);
    -webkit-text-stroke-width: var(--uru-hero-text-stroke-width);
    paint-order: stroke fill;
    text-shadow: none;
  }
  .uru-hero__content .uru-hero__headline { --uru-hero-text-stroke-width: 8px; }
  /* The motion toggle anchors BOTTOM-right below lg: on phones the copy fills
     the hero, and a top-anchored control reads as pushing the text down;
     bottom-of-media is the ambient-motion-control convention. */
  .uru-hero__scene .uru-motion-toggle {
    inset-block-start: auto;
    inset-block-end: var(--cds-spacing-05);
  }
}
/* Copy column at md: 6 of the 8 md columns, so the measure does not run wall to
   wall over the scene. Scoped to the md-to-lg range only. */
@media (min-width: 42rem) and (max-width: 65.98rem) {
  .uru-hero .uru-hero__content { grid-column: 1 / span 6; }
}
@media (max-width: 41.98rem) {
  .uru-hero__veil { background: var(--uru-hero-veil-mobile); }
  /* One CTA row on phones: equal-width pair (flex-basis 0), the Carbon fluid button-pair
     shape. Wrapping still happens gracefully if a label's min-content cannot fit. */
  .uru-hero__ctas .uru-btn { flex: 1 1 0; }
}
.uru-hero__headline {
  margin: 0 0 var(--cds-spacing-06);
  font-size: var(--cds-heading-05-font-size, 2rem);
  font-weight: var(--cds-heading-05-font-weight, 400);
  line-height: var(--cds-heading-05-line-height, 1.25);
  letter-spacing: 0;
  text-wrap: balance;
}
@media (min-width: 42rem) {
  .uru-hero__headline {
    font-size: var(--cds-heading-06-font-size, 2.625rem);
    font-weight: var(--cds-heading-06-font-weight, 300);
    line-height: var(--cds-heading-06-line-height, 1.19);
  }
}
@media (min-width: 82rem) {
  .uru-hero__headline {
    font-size: var(--cds-heading-07-font-size, 3.375rem);
    font-weight: var(--cds-heading-07-font-weight, 300);
    line-height: var(--cds-heading-07-line-height, 1.19);
  }
}
/* Fold rhythm at lg, top to bottom: eyebrow 16 -> headline 24 -> lede 16 ->
   chip 12 -> risk 24 -> CTAs 12 -> note. The lede carries NO bottom margin: the
   chip's own spacing-05 top margin (home-overrides.css) sets the 16px gap, and
   the two used to stack into a 48px hole. The CTA row owns its 24px top gap. */
.uru-hero__lede {
  margin: 0; max-width: 33rem;
  font-size: var(--cds-body-02-font-size, 1rem); line-height: 1.55;
  color: var(--cds-text-secondary);
}
.uru-hero__ctas { display: flex; gap: var(--cds-spacing-04); flex-wrap: wrap; margin-top: var(--cds-spacing-06); }
.uru-hero__chips { display: flex; gap: var(--cds-spacing-03); flex-wrap: wrap; margin-top: var(--cds-spacing-07); }
/* This deliberately contradicts the hero source, whose own comment says the API acronyms
   are "ALWAYS created (no mobile/zoom/touch gate) so the named systems never silently
   vanish". True of the source; not true here. Below 42rem those three nodes crowd into a
   band about 90px tall and the labels overlap each other and the CTAs. The claim is not
   lost with them -- KSeF/JPK/ZUS are named in the page copy -- so this trades a decorative
   duplicate for legibility, rather than dropping information. */
/* 41.98rem, not 41.9rem: the complement of the Carbon md boundary (42rem). */
@media (max-width: 41.98rem) {
  .uru-hero-kernel .lbl--api { opacity: 0 !important; }
}
.uru-motion-toggle {
  position: absolute;
  z-index: 4;
  inset-block-start: var(--cds-spacing-05);
  inset-inline-end: var(--cds-spacing-05);
  background: var(--cds-layer-01);
  font: inherit;
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: 1;
}
.uru-motion-toggle:hover { background: var(--cds-layer-hover, var(--cds-layer-02)); }
.uru-motion-toggle__icon--play { display: none; }
html.is-motion-paused .uru-motion-toggle__icon--pause { display: none; }
html.is-motion-paused .uru-motion-toggle__icon--play { display: inline-flex; }
.uru-chip {
  padding: var(--cds-spacing-01) var(--cds-spacing-03);
  border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
  font-size: var(--cds-label-01-font-size, .75rem); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cds-text-secondary);
}


/* ---- proof strip (condensed-gutter stat tiles) ---- */
.uru-proof { padding-block: var(--cds-spacing-09); border-block: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); }
.uru-stat { background: var(--cds-layer-01); padding: var(--cds-spacing-06); block-size: 100%; }
.uru-stat__value { margin: 0; font-size: var(--cds-heading-06-font-size, 2.625rem); font-weight: 300; line-height: 1.15; }
.uru-stat__label { margin: var(--cds-spacing-03) 0 0; font-size: var(--cds-body-compact-01-font-size, .875rem); color: var(--cds-text-secondary); }
.uru-stat__note { margin: var(--cds-spacing-02) 0 0; font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); }
.uru-stat__source { margin: var(--cds-spacing-03) 0 0; font-size: var(--cds-label-01-font-size, .75rem); line-height: 1.33; color: var(--cds-text-helper); }


/* ---- generic tile/card ---- */
.uru-tile { background: var(--cds-layer-01); padding: var(--cds-spacing-06); block-size: 100%; display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.uru-tile__title { margin: 0; font-size: var(--cds-heading-03-font-size, 1.25rem); font-weight: 400; line-height: 1.4; }
.uru-tile__body { margin: 0; font-size: var(--cds-body-01-font-size, .875rem); line-height: 1.43; color: var(--cds-text-secondary); }
.uru-tile__tag {
  align-self: flex-start; padding: 0 var(--cds-spacing-03);
  background: var(--cds-layer-02); font-size: var(--cds-label-01-font-size, .75rem);
  line-height: 1.5rem; letter-spacing: .02em; color: var(--cds-text-secondary);
}
.uru-tile__footer { margin-top: auto; padding-top: var(--cds-spacing-04); font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); border-top: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); }


/* ---- vignette / email exhibit ---- */
.uru-exhibit { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); }
.uru-exhibit__head { padding: var(--cds-spacing-05) var(--cds-spacing-06); border-bottom: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); font-size: var(--cds-body-compact-01-font-size, .875rem); }
.uru-exhibit__meta { color: var(--cds-text-helper); }
.uru-exhibit__body { padding: var(--cds-spacing-06); font-size: var(--cds-body-01-font-size, .875rem); line-height: 1.43; color: var(--cds-text-secondary); white-space: pre-line; }
.uru-exhibit__reply {
  margin: 0 var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--cds-spacing-05);
  border-left: 3px solid var(--cds-border-interactive);
  background: var(--cds-layer-02, var(--cds-layer-01));
  font-size: var(--cds-body-01-font-size, .875rem); line-height: 1.43; white-space: pre-line;
}
.uru-exhibit__pending {
  margin: 0 var(--cds-spacing-06) var(--cds-spacing-05);
  font-size: var(--cds-label-01-font-size, .75rem); letter-spacing: .32px;
  color: var(--cds-text-helper); text-transform: uppercase;
}
.uru-exhibit__actions { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-04); padding: var(--cds-spacing-05) var(--cds-spacing-06); border-top: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); }

/* The approve/reject labels are full sentences (locked content) — let the
   demo buttons grow to multi-line with start-aligned text instead of the
   squeezed centered wrap a fixed-height button produces. */
.uru-exhibit__actions .uru-btn { block-size: auto; padding-block: var(--cds-spacing-03); text-align: start; }


/* ---- why-now cards ---- */
.uru-whynow__date { font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); }


/* ---- method / progress indicator ---- */
.uru-phase { border-top: 2px solid var(--cds-border-interactive, var(--cds-interactive)); padding-top: var(--cds-spacing-04); }
.uru-phase__n { font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); letter-spacing: .08em; }
.uru-phase__gate {
  margin: var(--cds-spacing-02) 0 var(--cds-spacing-04);
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: 1.33;
  color: var(--cds-text-helper);
}
.uru-progress-slot {
  display: block;
  color: var(--cds-text-primary);
  font-size: var(--cds-body-compact-01-font-size, .875rem);
  font-weight: 400;
  line-height: var(--cds-body-compact-01-line-height, 1.29);
}
.uru-progress-slot--secondary {
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
}


/* ---- chart host (progressive enhancement; table is the no-JS truth) ---- */
.chart-wrap {
  margin-block-start: var(--cds-spacing-07);
  inline-size: 100%;
  max-inline-size: var(--uru-chart-max-inline-size, 54rem);
}
.chart-host { position: relative; margin: 0; inline-size: 100%; overflow-x: clip; }
.uru-chart-live--parked {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -100000px;
  visibility: hidden;
  pointer-events: none;
}
.chart-caption { display: block; margin-bottom: var(--cds-spacing-04); }

/* The chart runtime hides the figcaption via the `hidden` ATTRIBUTE on a live
   upgrade (Carbon draws the title inside the chart). The fallback table stays
   in the accessibility tree after successful upgrade, and remains visible for
   no-JS, failed upgrades, and mobile treemap fallbacks. */
.chart-caption[hidden] { display: none; }
.chart-title { display: block; font-size: var(--cds-heading-02-font-size, 1rem); font-weight: 600; }
.chart-subtitle { display: block; font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); }
.chart-source-line { margin: var(--cds-spacing-03) 0 0; font-size: var(--cds-label-01-font-size, .75rem); line-height: 1.33; color: var(--cds-text-secondary); }
.chart-fallback { border-collapse: collapse; inline-size: 100%; font-size: var(--cds-body-01-font-size, .875rem); }
.chart-fallback--sr {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  block-size: 1px;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  white-space: nowrap;
}
.chart-fallback th, .chart-fallback td { text-align: start; padding: var(--cds-spacing-03) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); }

@media (max-width: 41.9rem) {
  .chart-host[data-chart="alluvial"] .chart-fallback { table-layout: fixed; }
  .chart-host[data-chart="alluvial"] .chart-fallback th,
  .chart-host[data-chart="alluvial"] .chart-fallback td {
    padding-inline: var(--cds-spacing-03);
    overflow-wrap: anywhere;
  }
  .chart-host[data-chart="alluvial"] .chart-fallback th:first-child { inline-size: 38%; }
  .chart-host[data-chart="alluvial"] .chart-fallback th:nth-child(2) { inline-size: 42%; }
  .chart-host[data-chart="alluvial"] .chart-fallback th:last-child,
  .chart-host[data-chart="alluvial"] .chart-fallback td:last-child {
    inline-size: 20%;
    text-align: end;
    white-space: nowrap;
  }
}

/* ---- evidence structured list ---- */
.uru-table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}
.uru-evidence__table { inline-size: 100%; border-collapse: collapse; font-size: var(--cds-body-01-font-size, .875rem); }
.uru-evidence__table caption {
  padding: 0 0 var(--cds-spacing-04);
  color: var(--cds-text-helper);
  font-size: var(--cds-label-01-font-size, .75rem);
  text-align: start;
}
.uru-evidence__table th { text-align: start; font-weight: 600; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-strong-01, var(--cds-border-strong)); }
.uru-evidence__table td { vertical-align: top; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle)); color: var(--cds-text-secondary); }
.uru-evidence__table td:last-child { white-space: nowrap; }
.uru-src {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  font-size: var(--cds-label-01-font-size, .75rem);
  color: var(--cds-text-helper);
}
.uru-src a { color: var(--cds-link-primary); text-underline-offset: .125rem; }
.uru-src__date { white-space: nowrap; }
@media (max-width: 41.9rem) {
  .uru-table-scroll { overflow: visible; }
  .uru-evidence__table caption {
    display: block;
    inline-size: 100%;
    line-height: var(--cds-label-01-line-height, 1.33);
  }
  .uru-evidence__table,
  .uru-evidence__table tbody,
  .uru-evidence__table tr,
  .uru-evidence__table th,
  .uru-evidence__table td {
    display: block;
    inline-size: 100%;
  }
  .uru-evidence__table thead {
    position: absolute;
    overflow: hidden;
    inline-size: 1px;
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .uru-evidence__table tbody tr {
    margin-block-end: var(--cds-spacing-05);
    border-block-start: 1px solid var(--cds-border-strong-01, var(--cds-border-strong));
  }
  .uru-evidence__table th[scope="row"] {
    padding-block: var(--cds-spacing-05);
    background: var(--cds-layer-02, var(--cds-layer));
  }
  .uru-evidence__table td {
    padding-block: var(--cds-spacing-05);
    line-height: var(--cds-body-01-line-height, 1.43);
    white-space: normal;
  }
  .uru-evidence__table td::before {
    display: block;
    margin-block-end: var(--cds-spacing-03);
    content: attr(data-label);
    color: var(--cds-text-helper);
    font-size: var(--cds-label-01-font-size, .75rem);
    font-weight: 600;
  }
  cds-progress-indicator {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
  }
}


/* ---- section contrast bands ---- */
[data-theme="g10"] .uru-contrast-zone .uru-header__mark-img--light,
[data-theme="g10"] .uru-contrast-zone .uru-footer__brand-img--light { display: none; }
[data-theme="g10"] .uru-contrast-zone .uru-header__mark-img--dark,
[data-theme="g10"] .uru-contrast-zone .uru-footer__brand-img--dark { display: block; }
.uru-band {
  background: var(--cds-layer-01, var(--cds-layer));
  color: var(--cds-text-primary);
}
.uru-band .uru-stat,
.uru-band .uru-tile,
.uru-band .uru-exhibit {
  background: var(--cds-layer-02, var(--cds-layer));
}
.uru-band .uru-tile__tag,
.uru-band .uru-exhibit__reply {
  background: var(--cds-layer-03, var(--cds-layer-02, var(--cds-layer)));
}


/* ---- CTA section ---- */
.uru-cta-heading { margin: 0 0 var(--cds-spacing-05); font-size: var(--cds-heading-05-font-size, 2rem); font-weight: 300; }
.uru-cta-email { font-size: var(--cds-heading-03-font-size, 1.25rem); }


/* ---- footer ---- */
.uru-footer {
  padding-block: var(--cds-spacing-09);
  /* base-set surface -> base-set border (see the note over .uru-home-section in home.css) */
  border-top: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
  background: var(--cds-background);
  color: var(--cds-text-primary);
}
/* The footer grid is a bare .cds--css-grid, which sets no row-gap. Below the lg
   boundary the identity column and the nav column stack, and they met at 0px:
   measured colSeam 0 at 390 on the homepage and on every blog page. spacing-07
   is the Carbon gutter, so the stacked row seam now matches the horizontal one
   and stays two steps above the largest seam inside either column (spacing-05). */
.uru-footer .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}
.uru-footer__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-06);
  min-block-size: 100%;
}
.uru-footer__text { min-inline-size: 0; }
.uru-footer__name { margin: 0 0 var(--cds-spacing-04); font-weight: 600; }
.uru-footer__meta { margin: 0 0 var(--cds-spacing-03); font-size: var(--cds-body-01-font-size, .875rem); color: var(--cds-text-secondary); }
.uru-footer__brand {
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: clip;
  flex: 0 0 auto;
  inline-size: var(--cds-spacing-11, 5rem);
  block-size: var(--cds-spacing-11, 5rem);
  margin-block-start: 0;
}
.uru-footer__brand-img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.uru-footer__brand-img--dark { display: none; }
[data-theme="g90"] .uru-footer__brand-img--light,
[data-theme="g100"] .uru-footer__brand-img--light,
[data-theme="navy-orange"] .uru-footer__brand-img--light {
  display: none;
}
[data-theme="g90"] .uru-footer__brand-img--dark,
[data-theme="g100"] .uru-footer__brand-img--dark,
[data-theme="navy-orange"] .uru-footer__brand-img--dark {
  display: block;
}
/* Link rows are 44px tall on a 48px pitch (4px gap): a WCAG 2.5.5 AAA touch
   target, an owner decision carried here from v26-overrides.css block 4 so the
   blog and privacy footers get the same targets the homepage already had (they
   measured 24px on a 32px pitch, because they do not load v26-overrides.css).
   The 44px is a deliberate off-scale exception, allowlisted; see MERGE-MAP-3.
   Because the 44px box is ~24px taller than its 14px text, consecutive link
   texts read 28px apart, so the group's closing seam moved from spacing-05 to
   spacing-06: still a step below the spacing-07 column seam, but now visibly
   larger than the rhythm inside the group. */
.uru-footer__links { display: flex; flex-direction: column; gap: var(--cds-spacing-02); margin-bottom: var(--cds-spacing-06); }
.uru-footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-size: var(--cds-body-01-font-size, .875rem);
  color: var(--cds-text-secondary);
  text-decoration: none;
}
.uru-footer__link:hover { color: var(--cds-text-primary); text-decoration: underline; }
.uru-footer__legal { margin: 0; font-size: var(--cds-label-01-font-size, .75rem); color: var(--cds-text-helper); }
@media (min-width: 66rem) {
  .uru-footer__brand {
    inline-size: var(--cds-spacing-12, 6rem);
    block-size: var(--cds-spacing-12, 6rem);
  }
}


/* ---- gallery (dist/index.html) ---- */
.uru-gallery { padding-block: var(--cds-spacing-09); }
.uru-gallery__group { margin-bottom: var(--cds-spacing-09); }
/* spacing-07, not spacing-05: gallery cards wrap, and a 16px row seam against a
   32px column gutter made the group read as stacked rows rather than a matrix.
   Matching the gutter is the derived rule for any wrapping .cds--css-grid. No
   .uru-gallery markup exists in v44, so this is directive-driven, not measured. */
.uru-gallery__group .cds--css-grid { row-gap: var(--cds-spacing-07); }
.uru-gallery-card { display: block; block-size: 100%; text-decoration: none; }
.uru-gallery-card:hover,
.uru-gallery-card:focus-within { outline: 1px solid var(--cds-border-strong-01, var(--cds-border-strong)); }

/* equal-height rows: cards stretch to the grid cell; the action row anchors to
   the tile bottom so wrapped titles cannot misalign the language controls. */
.uru-gallery-card .uru-chips { margin-block-start: 0; }
.uru-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-block-start: auto;
  padding-block-start: var(--cds-spacing-04);
}
.uru-gallery-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding-inline: var(--cds-spacing-04);
  border: 1px solid var(--cds-border-strong-01, var(--cds-border-strong));
  color: var(--cds-link-primary);
  text-decoration: none;
  outline-offset: -2px;
}
.uru-gallery-link:hover { background: var(--cds-background-hover); }
.uru-gallery-link:focus-visible { outline: 2px solid var(--cds-focus); }
.uru-chips { display: flex; gap: var(--cds-spacing-02); flex-wrap: wrap; }

/* ---- privacy notice ---- */
.uru-privacy-header {
  padding: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}
.uru-privacy-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  color: var(--cds-text-primary);
  font-weight: 600;
  text-decoration: none;
}
.uru-privacy-main { padding-block: var(--cds-spacing-10); }
/* border-subtle-00: the section sits directly on $background, measured rgb(244,244,244) in
   g10, not on a layer. As -01 the rule was #e0e0e0 on #f4f4f4 -- 1.20:1. */
.uru-privacy-section {
  padding-block: var(--cds-spacing-07);
  border-top: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
}
.uru-privacy-section h2,
.uru-privacy-section h3 {
  margin: var(--cds-spacing-07) 0 var(--cds-spacing-04);
  font-size: var(--cds-heading-03-font-size, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
}
.uru-privacy-section h2:first-child,
.uru-privacy-section h3:first-child { margin-block-start: 0; }
.uru-privacy-section p {
  margin: 0 0 var(--cds-spacing-05);
  max-width: 44rem;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: 1.5;
}

/* ---- client portal login ---- */
.uru-portal-shell {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--cds-background);
  /* base-set surface -> base-set border (see the note over .uru-home-section in home.css) */
  border-bottom: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
}
.uru-portal-shell__inner {
  display: flex;
  align-items: center;
  block-size: 3rem;
  padding-inline-start: var(--cds-spacing-05, 1rem);
}
.uru-portal-shell__name {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03, 0.5rem);
  block-size: 3rem;
  padding-inline-end: var(--cds-spacing-05, 1rem);
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, .875rem);
  font-weight: 600;
  line-height: 1.29;
  text-decoration: none;
}
.uru-portal-shell__name:hover {
  color: var(--cds-text-primary);
}
.uru-portal-shell__product {
  display: inline-flex;
  align-items: center;
  block-size: 1.5rem;
  padding-inline: var(--cds-spacing-05);
  /* rides the shell, which is a base-set surface; see the note in home.css */
  border-inline-start: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, .875rem);
  font-weight: 600;
  line-height: 1.29;
}
.uru-portal-shell__nav {
  display: inline-flex;
  align-items: stretch;
  margin-inline-start: auto;
}
.uru-portal-shell__link {
  display: inline-flex;
  align-items: center;
  block-size: 3rem;
  padding-inline: var(--cds-spacing-05, 1rem);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size, .875rem);
  line-height: 1.29;
  text-decoration: none;
}
.uru-portal-shell__link:hover,
.uru-portal-shell__link:focus-visible {
  color: var(--cds-text-primary);
  background: var(--cds-background-hover, transparent);
}
.uru-portal-shell__link:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-portal-shell__languages {
  display: inline-flex;
  align-items: stretch;
}
.uru-portal-shell__lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: 1.34;
  text-decoration: none;
}
.uru-portal-shell__lang:hover,
.uru-portal-shell__lang:focus-visible {
  color: var(--cds-text-primary);
  background: var(--cds-background-hover, transparent);
}
.uru-portal-shell__lang:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-portal-shell__lang.is-current {
  color: var(--cds-text-primary);
  font-weight: 600;
}
.uru-portal-shell__lang.is-current::after {
  position: absolute;
  inset: auto 0 0;
  block-size: 2px;
  background: var(--cds-border-interactive, var(--cds-interactive));
  content: "";
}
.uru-portal-shell .uru-icon-button {
  border-block: 0;
  border-inline-end: 0;
}
.uru-portal-main {
  min-block-size: calc(100svh - 3rem);
}
.uru-portal-login {
  display: grid;
  grid-template-areas:
    "task"
    "context";
  grid-template-columns: minmax(0, 1fr);
  min-block-size: calc(100svh - 3rem);
}
.uru-portal-login__task,
.uru-portal-login__context {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-08) var(--cds-spacing-05) var(--cds-spacing-09);
}
.uru-portal-login__task {
  grid-area: task;
  background: var(--cds-layer-01, var(--cds-layer));
}
.uru-portal-login__context {
  grid-area: context;
  background: var(--cds-background);
}
.uru-portal-login__task-inner,
.uru-portal-login__context-inner {
  inline-size: min(100%, 32rem);
}
.uru-portal-login__task .uru-eyebrow,
.uru-portal-login__context .uru-eyebrow {
  margin-block-end: var(--cds-spacing-05);
}
.uru-portal-login__title {
  margin: 0 0 var(--cds-spacing-04);
  font-size: var(--cds-heading-05-font-size, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}
.uru-portal-login__lede {
  margin: 0 0 var(--cds-spacing-07);
  max-width: 30rem;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-02-font-size, 1rem);
  line-height: 1.5;
}
.uru-portal-context__mark {
  display: inline-grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  margin-block-end: var(--cds-spacing-07);
}
.uru-portal-context__mark-img {
  display: block;
  grid-area: 1 / 1;
  inline-size: 4rem;
  block-size: 4rem;
  object-fit: contain;
}
.uru-portal-context__mark-img--dark { display: none; }
[data-theme="g90"] .uru-portal-context__mark-img--light,
[data-theme="g100"] .uru-portal-context__mark-img--light,
[data-theme="navy-orange"] .uru-portal-context__mark-img--light {
  display: none;
}
[data-theme="g90"] .uru-portal-context__mark-img--dark,
[data-theme="g100"] .uru-portal-context__mark-img--dark,
[data-theme="navy-orange"] .uru-portal-context__mark-img--dark {
  display: block;
}
.uru-portal-context__title {
  margin: 0 0 var(--cds-spacing-05);
  max-inline-size: 30rem;
  font-size: var(--cds-heading-05-font-size, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}
.uru-portal-context__body {
  margin: 0;
  max-inline-size: 30rem;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, .875rem);
  line-height: 1.5;
}
/* The context list sits directly on the login page ground, not in a container, so both
   rules are base-set; see the note over .uru-home-section in home.css. */
.uru-portal-context__list {
  margin-block-start: var(--cds-spacing-08);
  border-block-end: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
}
.uru-portal-context__item {
  padding-block: var(--cds-spacing-05);
  border-block-start: 1px solid var(--cds-border-subtle-00, var(--cds-border-subtle));
}
.uru-portal-context__item-title {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, .875rem);
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: 0;
}
.uru-portal-context__item-body {
  margin: 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size, .875rem);
  line-height: 1.43;
}
.uru-portal-status {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-05);
  inline-size: 100%;
  max-inline-size: none;
  box-sizing: border-box;
  min-block-size: 3rem;
  margin: 0 0 var(--cds-spacing-07);
  padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-04) var(--cds-spacing-04);
  border-inline-start: 3px solid var(--cds-support-warning);
  background: var(--cds-notification-background-warning, var(--cds-layer-01, var(--cds-layer)));
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, .875rem);
  line-height: 1.43;
}
.uru-portal-status__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--cds-support-warning);
}
.uru-portal-status__content {
  min-inline-size: 0;
}
.uru-portal-status__title {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-primary);
  font-weight: 600;
}
.uru-portal-status__body {
  margin: 0;
  color: var(--cds-text-secondary);
}
.uru-portal-status__link,
.uru-field__help-link {
  color: var(--cds-link-primary);
  text-decoration: none;
}
.uru-portal-status__link:hover,
.uru-field__help-link:hover {
  color: var(--cds-link-primary-hover, var(--cds-link-primary));
  text-decoration: underline;
}
.uru-login-form {
  inline-size: 100%;
  max-inline-size: 32rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.uru-field {
  margin-block-end: var(--cds-spacing-05);
}
.uru-field__label {
  display: block;
  margin-block-end: var(--cds-spacing-03);
  font-size: var(--cds-label-01-font-size, .75rem);
  line-height: 1.33;
  color: var(--cds-text-secondary);
}
.uru-text-input {
  inline-size: 100%;
  block-size: 2.5rem;
  padding-inline: var(--cds-spacing-05);
  border: none;
  /* border-strong-02 pairs with field-02, the same way the subtle and tile families pair
     with their layer. This was -01 against an -02 field: 2.35:1 in g90 where the
     documented pairing gives 3.29:1. */
  border-block-end: 1px solid var(--cds-border-strong-02, var(--cds-border-strong));
  background: var(--cds-field-02, var(--cds-field));
  color: var(--cds-text-primary);
  font: inherit;
}
.uru-text-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-text-input[aria-invalid="true"] {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
}
.uru-field__help,
.uru-field__error {
  margin: var(--cds-spacing-03) 0 0;
  font-size: var(--cds-helper-text-01-font-size, .75rem);
  line-height: 1.33;
}
.uru-field__help { color: var(--cds-text-helper); }
.uru-field__error { color: var(--cds-text-error); }
.uru-inline-error {
  margin-block-end: var(--cds-spacing-06);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-inline-start: 3px solid var(--cds-support-error);
  background: var(--cds-notification-background-error, var(--cds-layer-02));
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, .875rem);
  line-height: 1.43;
}
.uru-login-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-block: var(--cds-spacing-06) var(--cds-spacing-04);
}
@media (min-width: 66rem) {
  .uru-portal-login {
    grid-template-areas: "context task";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uru-portal-login__task,
  .uru-portal-login__context {
    padding: var(--cds-spacing-10) var(--cds-spacing-09);
  }
}
@media (max-width: 65.98rem) {
  .uru-portal-shell__product { display: none; }
}
@media (max-width: 41.98rem) {
  .uru-portal-login__task,
  .uru-portal-login__context {
    padding: var(--cds-spacing-07) var(--cds-spacing-05) var(--cds-spacing-09);
  }
  .uru-portal-context__mark {
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: var(--cds-spacing-06);
  }
  .uru-portal-context__mark-img {
    inline-size: 3rem;
    block-size: 3rem;
  }
}
@media (max-width: 31.98rem) {
  .uru-portal-shell__link { display: none; }
}

/* ---- FAQ accordion: Carbon disclosure rows, token driven ---- */
.uru-accordion {
  display: block;
  margin-block-start: var(--cds-spacing-06);
  border-block-start: 1px solid var(--cds-border-subtle);
}
.uru-accordion__item {
  border-block-end: 1px solid var(--cds-border-subtle);
}
.uru-accordion__summary {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  min-block-size: 3rem;
  padding-block: 0;
  padding-inline: var(--cds-spacing-05);
  color: var(--cds-text-primary);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--cds-duration-fast-02, 110ms) cubic-bezier(.2,0,.38,.9);
}
.uru-accordion__summary::-webkit-details-marker { display: none; }
.uru-accordion__summary:hover { background: var(--cds-layer-hover); }
.uru-accordion__summary:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.uru-accordion__title {
  font-size: var(--cds-body-01-font-size, .875rem);
  font-weight: var(--cds-body-01-font-weight, 400);
  line-height: var(--cds-body-01-line-height, 1.43);
  color: var(--cds-text-primary);
}
.uru-accordion__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0;
  color: var(--cds-icon-primary);
  transition: transform var(--cds-duration-fast-02, 110ms) cubic-bezier(.2,0,.38,.9);
}
.uru-accordion__item[open] .uru-accordion__icon { transform: rotate(180deg); }
.uru-accordion__content {
  max-inline-size: 52rem;
  padding: 0 var(--cds-spacing-05) var(--cds-spacing-06);
  color: var(--cds-text-secondary);
}
.uru-accordion__content p {
  margin: 0;
  font-size: var(--cds-body-01-font-size, .875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ---- marquee strip (static, no motion) ---- */
.uru-marquee { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-07); }
.uru-marquee span { font-size: var(--cds-label-01-font-size, .75rem); letter-spacing: .1em; text-transform: uppercase; color: var(--cds-text-helper); }