/* REBARIO shared visual system.
 * Reference: home H1, Governance section labels/titles and plain cards,
 * Consulting checklist cards, and Requirements / Documents / Data controls.
 * Layers: legacy-base < legacy-priority < rebario-tokens < rebario-components.
 * Components are normal declarations; change tokens or the component, not overrides.
 */
@layer rebario-tokens {
:root {
  color-scheme: light;
  --ui-body-size: 15px;
  --ui-body-leading: 1.7;
  --ui-font: Arial, Helvetica, sans-serif;
  --ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ui-ink: #101a34;
  --ui-heading: #0f172a;
  --ui-text: #475569;
  --ui-muted: #667087;
  --ui-blue: #2455f5;
  --ui-icon-blue: #2563eb;
  --ui-blue-soft: #eff6ff;
  --ui-border: #e2e8f0;
  --ui-white: #fff;
  --ui-gray: #f6f8ff;
  --ui-gray-gradient: linear-gradient(105deg, #f6f8ff 0%, #f7f9fd 58%, #eff3ff 100%);
  --ui-card-bg: #f8fafc;
  --ui-card-radius: 18px;
  --ui-card-padding: 24px;
  --ui-card-shadow: 0 4px 20px -4px rgb(15 23 42 / 5%);
  --ui-container: 1344px; /* 1280px content + two 32px gutters */
  --ui-gutter: 32px;
  --ui-section-space: 96px;
  --ui-heading-gap: 64px;
  --ui-page-size: 57px;
  --ui-page-leading: 1.065;
  --ui-page-tracking: -2.5px;
  --ui-hero-top: 48px;
  --ui-hero-bottom: 44px;
  --ui-hero-gap: 36px;
  --ui-hero-body: 17px;
  --ui-hero-body-leading: 1.7;
  --ui-hero-copy-gap: 27px;
  --ui-section-size: clamp(32px, 4.2vw, 54px);
}
}


@layer rebario-components {
  /* 01 / Page geometry. Only real content sections participate in alternation. */
  .ui-main {
    font-family: var(--ui-font);
    color: var(--ui-ink);
    background: var(--ui-white);
    padding-top: 0;
  }
  .ui-main .ui-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ui-container);
    padding-inline: var(--ui-gutter);
    margin-inline: auto;
    min-width: 0;
  }
  .ui-section {
    position: relative;
    padding: var(--ui-section-space) 0;
    margin: 0;
    border: 0;
    color: var(--ui-ink);
    scroll-margin-top: 88px;
    box-shadow: none;
  }
  .ui-section[data-surface="muted"] {
    background: var(--ui-gray-gradient);
    background-color: var(--ui-gray);
  }
  .ui-section[data-surface="white"] {
    background: var(--ui-white);
  }
  /* Alternating module sections matching hero surface rhythm and balanced section rhythm */
  .ui-section.module-section {
    padding-block: clamp(56px, 5.2vw, 70px);
  }
  .ui-section.module-section[data-surface="muted"] {
    background: var(--ui-gray-gradient);
    background-color: var(--ui-gray);
  }
  .ui-section.module-section[data-surface="muted"] .ui-card {
    background: #ffffff;
    border-color: var(--ui-border);
    box-shadow: var(--ui-card-shadow);
  }
  .ui-section.module-section[data-surface="muted"] .ui-card:hover {
    border-color: #b8c9f5;
    box-shadow: 0 8px 24px -8px rgb(15 23 42 / 12%);
  }
  .ui-section.module-section[data-surface="white"] {
    background: var(--ui-white);
    background-color: var(--ui-white);
  }
  .ui-section.module-section[data-surface="white"] .ui-card {
    background: var(--ui-card-bg);
    border-color: var(--ui-border);
  }
  .ui-section::before, .ui-section::after {
    content: none;
  }
  /* Avoid legacy 700px offscreen placeholders: every module keeps its actual
     content height, including anchor navigation and full-page/print previews. */
  .ui-main .product-module-section {
    content-visibility: visible;
    contain-intrinsic-size: none;
    min-height: 0;
  }
  .ui-main :is(.product-module-container, .delivery-grid, .faq-grid, .sub-faq-grid) {
    padding-block: 0;
    border-block: 0;
    min-width: 0;
  }
  .ui-main :is(.product-module-left, .product-module-right, .delivery-copy, .delivery-visual) {
    min-width: 0;
  }

  /* 02 / All page titles inherit the exact home-hero typography and rhythm. */
  .ui-hero {
    display: block;
    padding-block: var(--ui-hero-top) var(--ui-hero-bottom);
    height: auto;
    min-height: 0;
    overflow: clip;
  }
  .ui-hero > .ui-container {
    padding-block: 0;
  }
  .ui-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ui-hero-gap);
    align-items: start;
    padding-block: 0;
    margin-block: 0;
    min-height: 0;
  }
  .ui-hero-copy, .ui-hero-visual {
    grid-column: auto;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    align-self: start;
  }
  .ui-page-title {
    font-family: var(--ui-font);
    font-size: var(--ui-page-size);
    font-weight: 600;
    line-height: var(--ui-page-leading);
    letter-spacing: var(--ui-page-tracking);
    color: var(--ui-ink);
    margin: 0;
    padding: 0;
    max-width: none;
    text-align: left;
    text-wrap: initial;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }
  .ui-page-title :is(em, .text-blue-600) {
    position: relative;
    display: inline-block;
    font: inherit;
    font-style: normal;
    letter-spacing: inherit;
    color: var(--ui-blue);
  }
  .ui-page-title :is(em, .text-blue-600)::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -7px;
    width: 98%;
    height: 10px;
    border: 0;
    border-top: 2px solid #7b9bf4;
    border-radius: 50%;
    transform: rotate(-1.5deg);
    background: none;
  }
  .ui-hero-description {
    font-family: var(--ui-font);
    font-size: var(--ui-hero-body);
    font-weight: 400;
    line-height: var(--ui-hero-body-leading);
    color: var(--ui-muted);
    letter-spacing: normal;
    margin: var(--ui-hero-copy-gap) 0 0;
    padding: 0;
    max-width: 575px;
  }
  .ui-hero-actions {
    margin: var(--ui-hero-copy-gap) 0 0;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  /* Wrap the row, not the label inside a pill button. */
  .ui-hero-actions > .button { white-space: nowrap; }
  .ui-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--ui-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--ui-muted);
    margin: 20px 0 0;
    padding: 0;
  }
  .ui-hero-meta + .ui-hero-meta { margin-top: 8px; }
  .ui-hero-meta::before { content: none; }
  .ui-hero-meta > a, .ui-hero-meta > span { color: inherit; }
  .ui-hero .hero-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
  }
  .ui-hero .metric-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-card-bg);
    box-shadow: var(--ui-card-shadow);
    min-width: 0;
  }
  .ui-hero .metric-item strong {
    font-family: var(--ui-mono);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ui-blue);
    margin: 0;
  }
  .ui-hero .metric-item > span { font: 700 12px/1.4 var(--ui-font); }
  .ui-hero .metric-item small { font: 400 11px/1.6 var(--ui-font); color: var(--ui-muted); }
  .ui-hero .visual-caption {
    position: static;
    display: flex;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    gap: 8px;
    font: 600 10px/1.6 var(--ui-mono);
    color: var(--ui-muted);
  }

  /* 03 / Section labels and headings: #approach is the canonical component. */
  .ui-section-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ui-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ui-blue);
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
    box-shadow: none;
  }
  .ui-section-label::before {
    content: "";
    display: inline-block;
    position: relative;
    inset: auto;
    width: 6px;
    height: 6px;
    min-width: 6px;
    flex: 0 0 6px;
    border: 0;
    border-radius: 50%;
    background: var(--ui-blue);
    box-shadow: 0 0 10px rgb(36 85 245 / 70%);
    align-self: baseline;
  }
  .ui-section-label > .kicker-marker { display: none; }
  .ui-section-label > :is(span, .approach-kicker-text) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .ui-section-title {
    font-family: var(--ui-font);
    font-size: var(--ui-section-size);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: var(--ui-heading);
    margin: 0;
    padding: 0;
    max-width: none;
    text-align: left;
    /* Balanced lines avoid a lone short word at the end of a wrapped line. */
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }
  .ui-page-title > span, .ui-section-title > span {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .ui-section-title :is(em, .text-blue-600, .approach-h2-line-2) {
    font: inherit;
    letter-spacing: inherit;
    color: var(--ui-blue);
  }
  .ui-section-title :is(em, .text-blue-600)::after { content: none; }
  .ui-section-title .approach-h2-line-1 { color: var(--ui-heading); }
  .ui-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 64px;
    margin: 0 0 var(--ui-heading-gap);
    padding: 0;
    background: none;
    border: 0;
  }
  .ui-section-heading > * { min-width: 0; }
  .ui-section-lead {
    font: 400 var(--ui-body-size)/var(--ui-body-leading) var(--ui-font);
    color: var(--ui-text);
    max-width: none;
    letter-spacing: normal;
  }
  .ui-section-heading .ui-section-lead { margin: 0; }
  .ui-section-heading > .ui-section-lead,
  .ui-section-heading .approach-lead-box {
    border: 0;
    border-left: 2px solid #cbd5e1;
    padding: 0 0 0 32px;
    margin: 0;
  }
  .ui-section-heading .product-intro, .ui-section-heading .platform-intro {
    max-width: none;
    margin: 0;
  }
  /* Legacy scales this caption down to 7–8px on phones. */
  .ui-section-heading .platform-count span { font-size: 13px; line-height: 1.5; }
  .ui-main .product-module-container {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
  }
  .ui-main .product-module-lead { margin: 24px 0; }
  .ui-main .capabilities-heading {
    font: 600 12px/1.5 var(--ui-mono);
    letter-spacing: .1em;
    color: var(--ui-muted);
    margin-bottom: 16px;
  }
  .ui-main .faq-intro { margin-top: 24px; }
  .ui-main :is(.faq-list summary, .service-accordion summary) {
    font: 700 16px/1.5 var(--ui-font);
    color: var(--ui-heading);
    padding-block: 24px;
  }
  .ui-main :is(.faq-list details > p, .service-body p) {
    font: 400 var(--ui-body-size)/var(--ui-body-leading) var(--ui-font);
    color: var(--ui-text);
  }

  /* 04 / Cards. Plain and checklist variants share their shell and title scale. */
  .ui-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: var(--ui-card-padding);
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-card-bg);
    color: var(--ui-ink);
    box-shadow: var(--ui-card-shadow);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .ui-card:hover {
    border-color: #b8c9f5;
    box-shadow: 0 8px 24px -8px rgb(15 23 42 / 12%);
    transform: none;
  }
  .ui-card::before, .ui-card::after { content: none; }
  .ui-card h3, .ui-card-title {
    font: 700 16px/1.375 var(--ui-font);
    letter-spacing: normal;
    color: var(--ui-heading);
    margin: 0 0 16px;
    padding: 0;
    max-width: none;
    min-height: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .ui-card p {
    font: 400 var(--ui-body-size)/var(--ui-body-leading) var(--ui-font);
    color: var(--ui-text);
    letter-spacing: normal;
    margin: 0 0 16px;
    max-width: none;
  }
  .ui-card p:last-child { margin-bottom: 0; }
  .ui-card :is(.ui-card-icon, .pillar-icon-box, .approach-card-icon-box) {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: var(--ui-blue-soft);
    color: var(--ui-icon-blue);
    margin: 0 0 20px;
  }
  .ui-card :is(.ui-card-icon, .pillar-icon-box, .approach-card-icon-box) .icon {
    width: 20px;
    height: 20px;
  }
  .ui-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
  }
  .ui-card .ui-card-top .ui-card-icon { margin-bottom: 0; }
  .ui-card-tag {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--ui-blue-soft);
    color: var(--ui-icon-blue);
    font: 600 11px/1.4 var(--ui-mono);
    letter-spacing: .04em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .approach-card .approach-card-title {
    min-height: 48px;
    display: flex;
    align-items: flex-start;
  }
  .approach-card-tagline {
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ui-ink-soft, #475569);
    min-height: 42px;
    display: flex;
    align-items: flex-start;
  }
  .approach-card .enterprise-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    flex-grow: 1;
  }
  .approach-card .enterprise-body p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ui-ink-soft, #475569);
  }
  .approach-card .enterprise-body p b {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-icon-blue, #2563eb);
    line-height: 1.4;
    margin-bottom: 3px;
  }
  .approach-card .approach-card-metric {
    margin-top: auto;
  }
  @media (max-width: 900px) {
    .approach-card .approach-card-title,
    .approach-card-tagline {
      min-height: auto;
    }
  }
  .ui-card .pillar-icon-box { margin-bottom: 0; }
  .ui-card .pillar-card-top { margin-bottom: 20px; }
  #approach .pillar-card {
    cursor: default;
    transition: none;
  }
  #approach .pillar-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
    transform: none;
  }
  .dark #approach .pillar-card:hover,
  [data-theme="dark"] #approach .pillar-card:hover {
    border-color: #1e293b;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
  }
  #approach .pillar-tag {
    max-width: calc(100% - 56px);
    text-align: right;
    line-height: 1.35;
    white-space: normal;
  }
  .ui-card-grid, .ui-main :is(.lifecycle-panel, .project-stage-panel) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    min-width: 0;
    padding: 0;
  }
  .ui-main :is(.lifecycle-panel, .project-stage-panel, .turnkey-model-grid),
  .ui-card-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-main :is(.module-grid, .ui-card-grid[data-columns="3"]),
  #platform .module-grid,
  #module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
  }
  .ui-main :is(.lifecycle-panel, .project-stage-panel) {
    margin-top: 32px;
    min-height: 0;
    border: 0;
  }
  .ui-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
  }
  .ui-feature-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    font: 400 var(--ui-body-size)/var(--ui-body-leading) var(--ui-font);
    color: var(--ui-text);
  }
  .ui-feature-list > li::before { content: none; }
  .ui-feature-list > li > :is(span, p, div) {
    min-width: 0;
    font: inherit;
    color: inherit;
    margin: 0;
  }
  .ui-feature-list > li > :is(svg, .icon) {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: var(--ui-icon-blue);
  }
  .ui-feature-list strong {
    display: inline;
    font: 700 15px/1.7 var(--ui-font);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ui-heading);
  }
  .ui-card-footer, .ui-card .enterprise-card-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: auto 0 0;
    padding: 24px 0 0;
    border: 0;
  }
  .ui-card .approach-card-desc { flex-grow: 1; }
  .ui-card .approach-card-metric { padding-top: 0; }
  .ui-card :is(.metric-chip, .ui-status, .turnkey-model-status),
  .ui-card-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    font: 600 12px/1.4 var(--ui-mono);
    letter-spacing: .1px;
    color: var(--ui-icon-blue);
    background: var(--ui-blue-soft);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ui-card :is(.metric-chip, .ui-status, .turnkey-model-status) .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .ui-card :is(.is-verified, [class*="bg-emerald"]),
  .ui-card-footer > span[class*="bg-emerald"] {
    background: #f0fbf4;
    color: #157347;
  }
  .ui-card .turnkey-model-status { margin-top: 24px; }
  .ui-card.roi-card > strong {
    color: var(--ui-blue);
    font: 600 48px/1.1 var(--ui-font);
    letter-spacing: -.035em;
    margin-bottom: 20px;
  }
  .ui-main .company-card {
    padding: 24px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-card-bg);
    box-shadow: var(--ui-card-shadow);
    color: var(--ui-ink);
  }
  .ui-main .company-card :is(.company-word, .company-data strong) { color: var(--ui-heading); }

  /* 05 / Section switches: a single pill rail, with no progress-line variants. */
  .ui-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 32px;
    padding: 4px;
    border: 1px solid #dee5f2;
    border-radius: 28px;
    background: var(--ui-white);
    box-shadow: 0 2px 10px rgb(11 23 52 / 6%);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scroll-padding-inline: 8px;
  }
  .ui-tabs > button {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 0;
    min-height: 35.4px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    color: var(--ui-muted);
    font: 600 13px/1.4 var(--ui-font);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    box-shadow: none;
    transform: none;
    transition: color .2s ease, background-color .2s ease;
    animation: none;
    cursor: pointer;
  }
  .ui-tabs > button :is(span, small, b, strong) {
    display: inline;
    position: static;
    padding: 0;
    margin: 0;
    min-width: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: transparent;
    white-space: inherit;
    box-shadow: none;
  }
  .ui-tabs > button .icon {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    color: inherit;
  }
  .ui-tabs > button::before, .ui-tabs > button::after,
  .ui-tabs::before, .ui-tabs::after { content: none; }
  .ui-tabs > button:hover { background: var(--ui-blue-soft); color: var(--ui-blue); }
  .ui-tabs > button:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
    color: var(--ui-white);
    background: var(--ui-blue);
  }
  .ui-main .segmented { margin-bottom: 0; }
  .ui-tabs--vertical {
    flex-direction: column;
    width: 100%;
    border-radius: 22px;
  }
  .ui-tabs--vertical > button { justify-content: flex-start; white-space: normal; text-align: left; }
  .ui-main .stage-swipe-hint { color: var(--ui-muted); margin-bottom: 12px; }
  .ui-main .lifecycle-tabs { border-bottom: 1px solid #dee5f2; }

  /* 06 / Action components and focus states. Navigation/footer are not restyled. */
  .ui-actions, .ui-main .cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .ui-main .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    gap: 14px;
    min-height: 56px;
    max-width: 100%;
    padding: 16px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 14px/1.4 var(--ui-font);
    text-decoration: none;
    letter-spacing: normal;
    text-align: center;
    white-space: normal;
    cursor: pointer;
  }
  .ui-main .button-primary {
    background: var(--ui-blue);
    color: var(--ui-white);
    box-shadow: 0 5px 14px rgb(36 85 245 / 16%);
  }
  .ui-main .button-primary:hover { background: #1d46d5; }
  .ui-main :is(.button-outline, .button-white) {
    background: transparent;
    color: var(--ui-blue);
    border-color: var(--ui-blue);
    box-shadow: none;
  }
  .ui-main :is(.button-outline, .button-white):hover { background: var(--ui-blue-soft); }
  .ui-main .button .icon { flex: 0 0 18px; width: 18px; height: 18px; }
  .ui-main :is(.text-link, .module-link) {
    color: var(--ui-blue);
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
  }
  .ui-main :is(button, a, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-blue);
    outline-offset: 3px;
  }
  .ui-tabs > button:focus-visible { outline-offset: -3px; }
  .ui-tabs > button:is(.is-active, [aria-selected="true"], [aria-pressed="true"]):focus-visible { outline-color: white; }

  /* 07 / Closing sections use the same surface and heading system as the rest. */
  .ui-main :is(.audit-cta-card, .cta-box, .solutions-consult-inner) {
    background: transparent;
    color: var(--ui-ink);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .ui-main :is(.audit-cta-card, .cta-box)::before,
  .ui-main :is(.audit-cta-card, .cta-box)::after { content: none; }
  .ui-main :is(.cta-lines, .cta-stamp) { display: none; }
  .ui-main .cta-content { max-width: 960px; }
  .ui-main .audit-cta-card > .audit-cta-content { max-width: 960px; margin: 0; text-align: left; }
  .ui-main :is(.cta-content p, .solutions-consult-inner p, .audit-cta-card p) {
    color: var(--ui-text);
    font: 400 var(--ui-body-size)/var(--ui-body-leading) var(--ui-font);
    margin: 24px 0 0;
    max-width: 680px;
  }
  .ui-main :is(.cta-actions, .audit-cta-card p + div) {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
  }
  .ui-main .audit-cta-card .button { width: auto; }
  .ui-main :is(.sub-cta .cta-box, .solutions-consult-inner) {
    display: flex;
    justify-content: space-between;
    /* The action follows the text, not the eyebrow above the heading. */
    align-items: flex-end;
    gap: 48px;
    min-height: 0;
  }
  .ui-main :is(.sub-cta .cta-content, .solutions-consult-inner > div) {
    flex: 1 1 auto;
    max-width: 780px;
  }
  .ui-main :is(.sub-cta .cta-actions, .solutions-consult-inner > .button) {
    margin-top: 0;
    flex-shrink: 0;
  }
  .ui-main .ui-source-note {
    margin-top: 48px;
    margin-bottom: 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-muted);
  }

  /* 08 / Responsive rules live here, not in individual page overrides. */
  @media (min-width: 901px) {
    .ui-hero.hero .ui-hero-visual {
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }
    .ui-hero.hero .model-stage { flex: 1; }
  }
  @media (min-width: 1441px) {
    :root { --ui-page-size: clamp(57px, calc(30px + 1.875vw), 60px); }
  }
  @media (min-width: 1024px) and (max-width: 1279px) {
    :root {
      --ui-page-size: clamp(48px, calc(12px + 3.5156vw), 57px);
      --ui-page-tracking: clamp(-2.5px, calc(0px - .1953vw), -2px);
      --ui-hero-gap: clamp(26px, calc(-14px + 3.9062vw), 36px);
      --ui-hero-body: 16px;
    }
  }
  @media (max-width: 1023px) {
    :root {
      --ui-section-space: 64px;
      --ui-heading-gap: 48px;
      --ui-page-size: 48px;
      --ui-page-tracking: -2px;
      --ui-hero-gap: 26px;
      --ui-hero-body: 16px;
    }
    .ui-section-heading { grid-template-columns: 1fr; gap: 32px; }
    .ui-section-heading > .ui-section-lead, .ui-section-heading .approach-lead-box { padding-left: 24px; }
    .ui-main .product-module-container { grid-template-columns: 1fr; gap: 40px; }
    .ui-card-grid, .ui-main :is(.module-grid, .ui-card-grid[data-columns="3"]),
    #platform .module-grid,
    #module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ui-main :is(.delivery-grid, .solutions-consult-inner) { grid-template-columns: 1fr; gap: 40px; }
  }
  @media (max-width: 900px) {
    :root { --ui-page-size: 40px; --ui-page-tracking: -1.7px; --ui-hero-gap: 32px; }
    .ui-hero-grid { grid-template-columns: 1fr; }
    .ui-hero-visual { max-width: 640px; }
  }
  @media (max-width: 768px) { :root { --ui-card-padding: 20px; } }
  @media (max-width: 767px) {
    :root { --ui-gutter: 24px; }
    /* The id selectors repeat the ≤1023px rule: without them its higher specificity keeps two columns. */
    .ui-main :is(.ui-card-grid, .ui-card-grid[data-columns="2"], .ui-card-grid[data-columns="3"], .lifecycle-panel, .project-stage-panel, .module-grid, .turnkey-model-grid),
    #platform .module-grid,
    #module-grid { grid-template-columns: 1fr !important; }
    .ui-section-heading .platform-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
    .ui-section-heading .platform-intro > p { max-width: none; font-size: var(--ui-body-size); }
    .ui-main :is(.faq-grid, .sub-faq-grid) { grid-template-columns: 1fr; gap: 32px; }
    .ui-main :is(.sub-cta .cta-box, .solutions-consult-inner) { flex-direction: column; align-items: flex-start; gap: 24px; }
    .ui-main .button { min-height: 48px; padding: 12px 20px; font-size: 14px; }
    .ui-actions, .ui-main .cta-actions { gap: 12px; }
    .ui-section-label { line-height: 1.5; }
    .ui-tabs { margin-bottom: 24px; }
    .ui-tabs > button { min-height: 40px; padding: 10px 12px; }
    .ui-main .scene-controls { margin-bottom: 16px; padding: 0; }
    .ui-main .segmented { width: 100%; }
    .ui-main .segmented > button { flex: 1 0 auto; font-size: 10px; padding: 10px 8px; gap: 4px; }
    .ui-tabs--vertical { flex-direction: row; width: fit-content; }
    .ui-tabs--vertical > button { white-space: nowrap; }
    .ui-main .audit-cta-card .button { width: 100%; }
  }
  @media (max-width: 680px) {
    :root {
      --ui-page-size: clamp(28px, 8.2vw, 40px);
      --ui-page-leading: 1.1;
      --ui-page-tracking: -1.2px;
      --ui-hero-top: 32px;
      --ui-hero-bottom: 28px;
      --ui-hero-gap: 24px;
      --ui-hero-body-leading: 1.75;
      --ui-hero-copy-gap: 20px;
    }
    .ui-hero .metric-item { padding: 12px; }
    .ui-hero .hero-metrics-strip { gap: 8px; }
  }
  @media (max-width: 479px) { :root { --ui-card-padding: 16px; } }
  @media (max-width: 390px) {
    :root { --ui-page-size: clamp(26px, 7.8vw, 34px); --ui-page-tracking: -1px; }
  }
  @media (max-width: 374px) {
    :root { --ui-gutter: 16px; }
    .ui-main .segmented > button { gap: 3px; padding-inline: 7px; }
    .ui-hero .hero-metrics-strip { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-tabs { scroll-behavior: auto; }
    .ui-tabs > button, .ui-card { transition: none; }
  }
  @media print {
    .ui-main .ui-section { background: white; padding-block: 24px; }
    .ui-tabs, .ui-actions { display: none; }
    .ui-page-title { font-size: 32pt; }
    .ui-section-title { font-size: 24pt; }
    .ui-card { break-inside: avoid; box-shadow: none; }
  }
}


/* 09 / Conversion components. Kept in the same shared component boundary. */
@layer rebario-components {
  [hidden] { display: none; }
  .desktop-nav a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .language-switch { gap: 0; }
  .language-switch button:focus-visible, .site-header :focus-visible, .footer :focus-visible, .dialog :focus-visible, .scope-tray :focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
  /* Language dropdown */
  .lang-dropdown { position: relative; display: inline-flex; align-items: center; }
  .lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 52px;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--ui-border, #e2e8f0);
    background: #ffffff;
    color: var(--ui-heading, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lang-trigger:hover,
  .lang-dropdown.is-open .lang-trigger {
    color: var(--ui-blue, #2455f5);
    border-color: var(--ui-blue, #2455f5);
    background: rgba(36, 85, 245, 0.04);
  }
  .lang-trigger .lang-current {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1;
  }
  .lang-trigger .icon-down {
    width: 12px;
    height: 12px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lang-dropdown.is-open .lang-trigger .icon-down {
    transform: rotate(180deg);
  }
  .lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    padding: 6px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--ui-border, #e2e8f0);
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .lang-dropdown.is-open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  @media (hover: hover) and (pointer: fine) {
    .lang-dropdown:hover .lang-menu,
    .lang-dropdown:focus-within .lang-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .lang-dropdown:hover .lang-trigger .icon-down {
      transform: rotate(180deg);
    }
  }
  .lang-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px !important;
    padding: 7px 12px !important;
    border-radius: 8px;
    border: none !important;
    background: transparent !important;
    color: var(--ui-heading, #0f172a) !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    /* A link since 3.9: crawlers follow it to the other language. */
    text-decoration: none;
    transition: all 0.15s ease;
  }
  .lang-option:hover {
    background: rgba(36, 85, 245, 0.06) !important;
    color: var(--ui-blue, #2455f5) !important;
  }
  .lang-option.is-active {
    background: rgba(36, 85, 245, 0.09) !important;
    color: var(--ui-blue, #2455f5) !important;
    font-weight: 600;
  }
  .lang-option-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ui-muted, #64748b);
  }
  .lang-option.is-active .lang-option-code {
    color: var(--ui-blue, #2455f5);
  }
  .lang-option-label {
    font-size: 13px;
    color: inherit;
  }
  .header-demo { font-size: 13px; }
  .footer-tagline, .footer-address > p, .footer-bottom, .footer-grid > div > a:not(.brand), .footer-grid > div > button { color: #526079; font-size: 13px; }
  .footer-bottom a, .footer-bottom button { color: #526079; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .footer-grid > div > a:not(.brand), .footer-grid > div > button { min-height: 36px; margin-bottom: 6px; }
  .catalogue-toolbar { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
  .catalogue-search { position: relative; display: flex; align-items: center; gap: 12px; width: min(100%, 600px); color: var(--ui-muted); }
  .catalogue-search > .icon { position: absolute; left: 18px; width: 20px; height: 20px; pointer-events: none; }
  .catalogue-search input { width: 100%; min-width: 0; padding: 16px 18px 16px 48px; border: 1px solid #cbd5e1; border-radius: 14px; font: 400 16px/1.5 var(--ui-font); background: var(--ui-card-bg); color: var(--ui-heading); }
  .catalogue-search input::placeholder { color: #64748b; }
  .catalogue-count { font: 500 13px/1.5 var(--ui-mono); color: var(--ui-muted); margin-left: auto; white-space: nowrap; }
  .catalogue-filters { width: fit-content; max-width: 100%; margin-bottom: 32px; }
  .catalogue-filters > button { min-height: 44px; }
  .catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .catalogue-card.is-selected { border-color: var(--ui-blue); }
  .catalogue-card-description { flex: 1; margin-bottom: 24px; }
  #platform .catalogue-card-description,
  #onsite-playbook .catalogue-card-description,
  #data-to-model .catalogue-card-description,
  #embedded-teams .catalogue-card-description { margin-bottom: 0; }
  #platform .catalogue-card-actions { display: none !important; }
  #platform .home-page-link {
    display: flex;
    justify-content: flex-end;
    border: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 40px !important;
  }
  #platform .home-page-link .button {
    text-decoration: none;
  }
  .catalogue-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 20px; margin-top: auto; border-top: 1px solid var(--ui-border); }
  .catalogue-card-actions .text-link { min-height: 44px; }
  .module-pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid #ccd7ec; border-radius: 999px; color: #244aa3; background: transparent; font: 600 13px/1.4 var(--ui-font); cursor: pointer; }
  .module-pick[aria-pressed="true"] { color: var(--ui-blue); border-color: var(--ui-blue); background: #eef3ff; }
  .module-pick .icon { width: 16px; height: 16px; }
  .catalogue-empty { padding: 56px 24px; text-align: center; background: var(--ui-card-bg); border-radius: 18px; }
  .catalogue-empty h3 { margin-bottom: 12px; }
  .catalogue-empty p { margin-bottom: 24px; font-size: 16px; }
  .journey-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px; padding: 0; list-style: none; }
  .journey-steps li { padding-top: 24px; border-top: 2px solid #cdd8ef; }
  .journey-number { display: block; margin-bottom: 20px; font: 600 13px var(--ui-mono); color: var(--ui-blue); }
  .journey-steps h3 { font: 600 18px/1.4 var(--ui-font); margin: 0 0 12px; color: var(--ui-heading); }
  .journey-steps p { font: 400 15px/1.7 var(--ui-font); color: var(--ui-text); }
  .journey-link { margin-top: 32px; min-height: 44px; }
  .evaluation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .evaluation-note { color: var(--ui-text); font: 400 14px/1.7 var(--ui-font); max-width: 850px; margin-top: 28px; }
  .company-next-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: flex-end; margin-top: 40px; }
  .service-fit { margin: 0 0 24px; color: var(--ui-text); font: 400 15px/1.7 var(--ui-font); }
  /* The selection bar sits above page content, with matching reserved bottom space. */
  body.has-scope { padding-bottom: 116px; }
  .scope-tray { position: fixed; pointer-events: auto; z-index: 60; inset: auto 24px 20px; width: min(760px, calc(100% - 48px)); max-width: none; transform: none; margin: 0 auto; display: flex; gap: 20px; align-items: center; padding: 16px 20px; border: 1px solid #d2ddf4; border-radius: 20px; background: #fff; box-shadow: 0 12px 50px #132d5d26; }
  .scope-tray > div { flex: 1; min-width: 0; }
  .scope-tray-caption { display: block; font: 600 10px/1.5 var(--ui-mono); letter-spacing: .1em; color: var(--ui-muted); margin-bottom: 3px; }
  #scope-tray-count { display: block; font: 600 17px/1.4 var(--ui-font); color: var(--ui-heading); }
  .scope-tray .button, .dialog .button { min-height: 48px; padding: 12px 20px; border-radius: 999px; font: 600 14px/1.5 var(--ui-font); display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
  .dialog .button-primary, .scope-tray .button-primary { color: white; background: var(--ui-blue); border: 1px solid var(--ui-blue); }
  .dialog .button-outline { color: var(--ui-blue); background: white; border: 1px solid var(--ui-blue); }
  .dialog button:disabled { opacity: .5; cursor: not-allowed; }
  .dialog { border: 1px solid var(--ui-border); border-radius: 22px; max-height: calc(100dvh - 32px); color: var(--ui-heading); background: white; }
  .dialog[open] { display: block; }
  .dialog:not([open]) { display: none; }
  .dialog-inner { padding: 44px; }
  .dialog h2 { font: 600 32px/1.15 var(--ui-font); letter-spacing: -1px; margin: 16px 0 20px; }
  .dialog p, .dialog li, .dialog dd { font: 400 15px/1.7 var(--ui-font); color: var(--ui-text); }
  .dialog p + p { margin-top: 18px; }
  .dialog .eyebrow { color: var(--ui-blue); }
  .dialog .dialog-close { position: sticky; float: right; margin: 12px 12px -56px 0; right: auto; top: 12px; width: 44px; height: 44px; z-index: 2; background: #f2f5fc; color: var(--ui-heading); border-radius: 50%; }
  .dialog .dialog-lead { margin-bottom: 24px; }
  .scope-dialog { width: min(700px, calc(100% - 32px)); }
  #detail-dialog, #solution-detail-dialog { width: min(940px, calc(100% - 32px)); }
  .form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .form-helper { font-size: 12px; margin-top: 8px; margin-bottom: 16px; }
  .form-actions, .scope-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .form-submit { width: auto; margin: 0; }
  .form-notice { display: block; border: 1px solid var(--ui-border); border-radius: 12px; background: #f6f8ff; padding: 14px 16px; margin: 0 0 24px; }
  .form-notice p { font-size: 13px; margin: 0; }
  .form-notice[data-state="offline"] { background: #fffbf1; border-color: #eee0bb; }
  .inline-link { display: inline; font: inherit; color: #224fc0; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
  .enquiry-context { padding: 16px; background: #f1f5ff; border-radius: 12px; margin-bottom: 20px; }
  #enquiry-modules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .enquiry-module-chip { border: 1px solid #cddbf7; background: white; padding: 8px 10px; border-radius: 8px; font: 500 13px/1.5 var(--ui-font); }
  .enquiry-module-chip small { color: var(--ui-blue); margin-left: 8px; }
  #scope-download-status:not(:empty) { margin-top: 20px; padding: 14px; border-radius: 10px; background: #edf3ff; font: 400 14px/1.6 var(--ui-font); color: #234482; overflow-wrap: anywhere; }
  /* Hero full viewport height on desktop and mobile - Two-column bottom-aligned layout.
     Capped so tall monitors do not add empty bands around a ~450px composition. */
  .hero.ui-hero {
    min-height: min(calc(100vh - 72px), 780px);
    min-height: min(calc(100dvh - 72px), 780px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 48px 0;
  }
  .hero.ui-hero .hero-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: end !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero.ui-hero .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    align-self: end !important;
    text-align: left !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero.ui-hero .ui-page-title {
    text-align: left !important;
    margin: 0 !important;
  }
  .hero.ui-hero .hero-description {
    text-align: left !important;
    max-width: 580px !important;
    margin: 22px 0 0 !important;
    padding-bottom: 0 !important;
  }
  .hero.ui-hero .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    align-self: end !important;
    margin: 0 !important;
  }
  .hero.ui-hero.solutions-hero .hero-grid {
    align-items: center !important;
  }
  .hero.ui-hero.solutions-hero .hero-copy {
    align-self: center !important;
  }
  .hero.ui-hero.solutions-hero .hero-visual {
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero.ui-hero.company-hero .hero-grid {
    align-items: center !important;
  }
  .hero.ui-hero.company-hero .hero-copy {
    align-self: center !important;
  }
  .hero.ui-hero.company-hero .hero-visual {
    align-self: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
  .hero.ui-hero.company-hero .ui-page-title {
    font-family: var(--ui-font) !important;
    font-size: var(--ui-page-size) !important;
    font-weight: 600 !important;
    line-height: var(--ui-page-leading) !important;
    letter-spacing: var(--ui-page-tracking) !important;
    color: var(--ui-ink) !important;
    margin: 0 !important;
  }
  .hero.ui-hero.company-hero .hero-description {
    font-family: var(--ui-font) !important;
    font-size: var(--ui-hero-body) !important;
    font-weight: 400 !important;
    line-height: var(--ui-hero-body-leading) !important;
    color: var(--ui-muted) !important;
    letter-spacing: normal !important;
    margin: 22px 0 0 !important;
    max-width: 580px !important;
    text-align: left !important;
  }
  .hero.ui-hero.company-hero .company-card {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
  }
  .company-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 24px;
  }
  .company-title-row .company-word {
    margin: 0 !important;
  }
  .company-card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--ui-blue-soft);
    color: var(--ui-blue);
    flex-shrink: 0;
    border: 1px solid rgba(37, 99, 235, 0.15);
  }
  .company-card-logo svg {
    width: 30px;
    height: 34px;
  }
  .solutions-hero .architecture-desktop {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .solutions-hero .rebario-logo-map {
    width: 100%;
    max-width: 480px;
    height: auto;
    max-height: 480px;
    display: block;
  }
  .hero.ui-hero .scene-controls {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .hero.ui-hero .segmented {
    margin: 0 !important;
  }
  .hero.ui-hero .model-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 480px !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  @media (max-width: 1199px) {
    .hero.ui-hero .hero-grid {
      gap: 32px !important;
    }
    .hero.ui-hero .model-stage {
      height: 420px !important;
    }
  }
  @media (max-width: 900px) {
    .hero.ui-hero .hero-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      align-items: stretch !important;
    }
    .hero.ui-hero .model-stage {
      height: 380px !important;
    }
  }
  @media (max-width: 680px) {
    .hero.ui-hero {
      padding: 24px 0;
    }
    .hero.ui-hero .model-stage {
      height: 320px !important;
    }
  }

  /* Eliminate bottom white gap and overscroll stripe */
  html, body {
    background-color: #f7f9fd;
  }
  .footer {
    background-color: #f7f9fd !important;
    box-shadow: 0 100px 0 100px #f7f9fd !important;
  }

  /* Get Started modal: the only enquiry form, opened by every call to action. */
  .get-started-dialog {
    width: min(700px, calc(100% - 32px)) !important;
    border-radius: 22px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--ui-border);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.22);
  }
  .get-started-dialog .dialog-inner {
    padding: 44px;
  }
  .get-started-heading {
    font: 600 28px/1.2 var(--ui-font);
    letter-spacing: -0.8px;
    color: var(--ui-heading);
    margin: 16px 0 24px;
    text-align: left;
  }
  .get-started-dialog .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .gs-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    width: 100%;
    margin-bottom: 0;
  }
  .gs-field.gs-field-full {
    margin-bottom: 16px;
  }
  .get-started-dialog form label,
  .get-started-dialog .gs-field label {
    font: 600 13px/1.5 var(--ui-font) !important;
    color: var(--ui-heading) !important;
    margin-bottom: 7px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline-block !important;
    flex-direction: row !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .get-started-dialog .req-star,
  .req-star {
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    vertical-align: super !important;
    line-height: 0 !important;
    margin-left: 2px !important;
    display: inline !important;
  }
  .gs-input, .gs-select, .gs-textarea {
    min-width: 0;
    width: 100%;
    border: 1px solid #b9c7de !important;
    border-radius: 10px !important;
    /* 16px: below it iOS Safari zooms the page when a field takes focus. */
    font: 400 16px/1.5 var(--ui-font) !important;
    color: var(--ui-heading) !important;
    background: #fafbfe !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    text-align: left;
  }
  .gs-input:focus, .gs-select:focus, .gs-textarea:focus {
    border-color: var(--ui-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(36, 85, 245, 0.15) !important;
  }
  .gs-textarea {
    resize: vertical;
    min-height: 110px;
  }
  .gs-field-error {
    font-size: 12px;
    color: #ef4444;
    margin-top: 5px;
    display: none;
    font-weight: 500;
    text-align: left;
    width: 100%;
  }
  .gs-field.has-error .gs-field-error {
    display: block;
  }
  .gs-field.has-error .gs-input,
  .gs-field.has-error .gs-select,
  .gs-field.has-error .gs-textarea {
    border-color: #ef4444 !important;
    background: #fff8f8 !important;
  }
  .get-started-dialog .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  .get-started-dialog .gs-submit-btn {
    width: auto;
    min-height: 48px;
    padding: 12px 28px;
    border-radius: 999px;
    font: 600 14px/1.5 var(--ui-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .gs-status {
    margin-top: 20px;
    padding: 14px;
    border-radius: 10px;
    font: 400 14px/1.6 var(--ui-font);
    display: none;
    text-align: center;
    line-height: 1.5;
  }
  .gs-status.is-visible { display: block; overflow-wrap: anywhere; }
  .gs-status[data-state="sending"] { background: #edf3ff; color: #234482; border: 1px solid #cddbf7; }
  .gs-status[data-state="success"] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .gs-status[data-state="error"] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  .get-started-dialog .modal-demo-link { margin-top: 20px; font-size: 13px; }
  @media(max-width: 640px) {
    .get-started-dialog { width: calc(100% - 24px); }
    /* The gap stays: stacked fields of one row otherwise touch the next label. */
    .get-started-dialog .form-grid { grid-template-columns: 1fr; gap: 16px; }
    .get-started-dialog .dialog-inner { padding: 32px 20px; }
    .get-started-heading { font-size: 22px; margin-bottom: 20px; }
    .get-started-dialog .gs-submit-btn { width: 100%; }
  }
  /* Header Get Started Button */
  .site-header .header-demo.button-primary {
    background: var(--ui-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--ui-blue) !important;
    box-shadow: 0 4px 14px rgba(36, 85, 245, 0.22) !important;
    font: 600 13px/1.4 var(--ui-font) !important;
    border-radius: 999px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  }
  .site-header .header-demo.button-primary:hover {
    background: #1d46d5 !important;
    border-color: #1d46d5 !important;
    box-shadow: 0 6px 20px rgba(36, 85, 245, 0.35) !important;
    transform: translateY(-1px) !important;
  }
  .site-header .header-demo.button-primary .icon {
    width: 15px !important;
    height: 15px !important;
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
  }
  .site-header .header-demo.button-primary:hover .icon {
    transform: translateX(3px) !important;
  }
  .scope-row { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--ui-border); }
  .scope-row > .icon { flex: 0 0 22px; color: var(--ui-blue); margin-top: 5px; }
  .scope-row > div { flex: 1; min-width: 0; }
  .scope-row strong { font: 600 16px/1.5 var(--ui-font); }
  .scope-row small { display: block; color: var(--ui-text); font: 400 13px/1.6 var(--ui-font); margin-top: 6px; }
  .scope-row button, .scope-tray .icon-button { flex: 0 0 44px; width: 44px; height: 44px; }
  .module-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; padding: 24px; border-radius: 16px; background: var(--ui-card-bg); }
  .module-detail-facts dt { color: var(--ui-heading); font: 600 14px/1.5 var(--ui-font); margin-bottom: 10px; }
  .module-detail-facts dd { margin: 0; }
  .detail-subheading { font: 600 18px/1.4 var(--ui-font); margin-bottom: 20px; }
  .dialog .ui-feature-list { padding: 0; }
  .dialog .ui-feature-list li { display: flex; gap: 12px; margin-bottom: 14px; }
  .dialog .ui-feature-list li > .icon { flex: 0 0 18px; margin-top: 3px; color: var(--ui-blue); }
  .detail-ai { margin-top: 24px; padding: 20px; background: #f3f6ff; border: 1px solid #dce5f9; border-radius: 12px; }
  .detail-ai strong { font: 600 12px/1.5 var(--ui-mono); color: var(--ui-blue); }
  .detail-ai p { margin-top: 10px; }
  .detail-source { font-size: 13px; margin: 24px 0; }
  .detail-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .module-visual-disclosure { border: 1px solid var(--ui-border); border-radius: 14px; margin-top: 24px; overflow: hidden; }
  .module-visual-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; font: 600 15px/1.5 var(--ui-font); cursor: pointer; }
  .module-visual-disclosure summary > span { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-blue); font-size: 13px; }
  .module-visual-disclosure .form-helper { padding: 0 16px 12px; }
  .module-visual-scroll { overflow: auto; max-width: 100%; background: #f6f8ff; }
  .module-illustration { min-width: 560px; padding: 24px; }
  .module-illustration .product-visual { width: 100%; max-width: none; }
  @media(max-width: 1100px) {
    .catalogue-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .journey-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .desktop-nav { gap: 18px; }
  }
  @media(max-width: 767px) {
    .catalogue-grid, .evaluation-grid { grid-template-columns: 1fr; }
    .catalogue-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
    .catalogue-count { margin: 0; }
    .catalogue-filters { width: 100%; }
    .journey-steps { grid-template-columns: 1fr; gap: 22px; }
    .journey-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; }
    .journey-number { grid-row: span 2; margin-top: 4px; }
    .journey-steps p { grid-column: 2; }
    .module-detail-facts { grid-template-columns: 1fr; padding: 18px; }
    .dialog-inner { padding: 48px 22px 24px; }
    .dialog h2 { font-size: 28px; }
    .form-grid { grid-template-columns: 1fr; }
    .scope-tray { inset: auto 12px 12px; width: calc(100% - 24px); gap: 8px; padding: 12px; border-radius: 16px; }
    .scope-tray .button { font-size: 12px; padding: 10px 12px; gap: 8px; }
    .scope-tray-caption { display: none; }
    #scope-tray-count { font-size: 14px; }
    .scope-tray .icon-button { width: 36px; flex-basis: 36px; }
    .scope-tray .button .icon { display: none; }
    body.has-scope { padding-bottom: 100px; }
    .language-switch .lang-trigger { min-width: 44px; padding: 0 8px; }
    .header-actions { gap: 10px; }
    .footer-bottom { align-items: flex-start; }
    .footer-bottom > div { flex-wrap: wrap; gap: 8px 18px; }
  }
  @media(prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
  }
  @media print {
    .scope-tray, .catalogue-toolbar, .catalogue-filters, .module-pick { display: none; }
    body.has-scope { padding-bottom: 0; }
  }
}

@layer rebario-components { body [hidden]:not([hidden="until-found"]) { display: none; } }

/* 10 / Mobile layout. Reflow content rather than hiding overflow at page level.
 * Horizontal scrolling is reserved for tab rails and labelled technical diagrams.
 * Desktop component tokens, alternating section surfaces and type hierarchy stay intact.
 */
@layer rebario-components {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .mobile-nav-actions, .architecture-mobile, .mobile-scroll-hint, .scene-mobile-caption { display: none; }
  /* Floating scene labels keep the full record from 768px up and wrap instead of
     shrinking below a readable size. Which side each opens is set per frame by
     js/scene.js as the model turns (section 15). */
  @media (min-width: 768px) {
    .scene-hotspot { max-width: 200px; white-space: normal; padding: 6px 10px; gap: 2px; }
    .scene-hotspot .hotspot-id { font-size: 12px; }
    .scene-hotspot .hotspot-desc { font-size: 11px; line-height: 1.35; }
  }
  .menu-backdrop { position: fixed; inset: 0; z-index: 49; background: rgb(15 23 42 / 28%); border: 0; padding: 0; }
  .menu-backdrop[hidden] { display: none; }
  .ui-tabs > button { flex-direction: row; max-width: none; }
  .ui-tabs > button > span { max-width: none; }
  .architecture-dialog { width: min(960px, calc(100% - 32px)); }
  .architecture-zoom { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: 14px; border: 1px solid var(--ui-border); background: var(--ui-gray); }
  .architecture-zoom > svg { display: block; width: max(720px, 100%); max-width: none; height: auto; }
  .dialog .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .dialog h2 { overflow-wrap: anywhere; }
  .dialog .modal-demo-link { max-width: 100%; }
  .dialog .modal-demo-link > span { min-width: 0; }
  .module-visual-scroll { overscroll-behavior-x: contain; }

  @media (max-width: 1023px) {
    .site-header { padding-top: env(safe-area-inset-top, 0px); }
    .header-inner { width: 100%; max-width: var(--ui-container); height: 64px; gap: 12px; padding-inline: max(var(--ui-gutter), env(safe-area-inset-left, 0px)) max(var(--ui-gutter), env(safe-area-inset-right, 0px)); }
    .header-actions { gap: 12px; margin-left: auto; }
    .header-demo,
    .site-header .header-demo.button-primary { display: none !important; }
    .language-switch { gap: 0; }
    .language-switch .lang-trigger { min-width: 48px; min-height: 44px; padding: 0 10px; }
    .language-switch > span { display: none; }
    .menu-toggle { display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px; }
    .menu-toggle[aria-expanded="true"] { background: var(--ui-blue-soft); color: var(--ui-blue); }
    .menu-toggle[aria-expanded="true"] .icon { display: none; }
    .menu-toggle[aria-expanded="true"]::before, .menu-toggle[aria-expanded="true"]::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
    .desktop-nav { position: absolute; inset: 100% 0 auto; display: none; margin: 0; padding: 12px var(--ui-gutter) max(20px, env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(var(--mobile-vh, 100dvh) - 64px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; background: white; border-bottom: 1px solid var(--ui-border); box-shadow: 0 20px 30px rgb(15 23 42 / 10%); }
    .desktop-nav.is-open { display: flex; }
    .desktop-nav a { padding: 14px 8px; min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--ui-border); }
    .desktop-nav a::after { display: none; }
    .mobile-nav-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 20px; }
    .mobile-nav-actions .button { min-height: 48px; white-space: normal; font-size: 14px; gap: 12px; }
    .mobile-nav-actions a { justify-content: center; gap: 10px; font-size: 14px; border: 0; }
    .mobile-nav-actions a .icon { width: 18px; height: 18px; }
    body.mobile-scroll-locked { position: fixed; top: var(--mobile-scroll-top); left: 0; right: 0; width: 100%; overflow: hidden; padding-top: var(--mobile-header-height, 65px); }
    body.mobile-scroll-locked .site-header { position: fixed; inset: 0 0 auto; }
    html { scroll-padding-top: 80px; }
    .ui-main .ui-container { padding-inline: max(var(--ui-gutter), env(safe-area-inset-left, 0px)) max(var(--ui-gutter), env(safe-area-inset-right, 0px)); }
    .ui-section { scroll-margin-top: 80px; }
    .ui-tabs { scroll-padding-inline: 6px; overscroll-behavior-x: contain; }
    .ui-tabs > button { min-height: 44px; }
    .mobile-scroll-hint:not([hidden]) { display: flex; align-items: center; gap: 6px; margin: -12px 0 24px; color: var(--ui-text); font: 400 12px/1.5 var(--ui-font); }
    .mobile-scroll-hint .icon { width: 16px; height: 16px; }
    .ui-main .project-stage-tab { flex: 0 0 auto; max-width: none; }
    .ui-main .project-stage-tab > span { max-width: none; overflow-wrap: normal; }
    .ui-main .project-stage-tab > span:first-child { font-variant-numeric: tabular-nums; opacity: .75; }
    .ui-main .text-link, .ui-main .module-link { min-height: 44px; }
    .footer .container { width: 100%; padding-inline: max(var(--ui-gutter), env(safe-area-inset-left, 0px)) max(var(--ui-gutter), env(safe-area-inset-right, 0px)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .footer-grid > div { min-width: 0; }
    .footer-grid > div > a:not(.brand), .footer-grid > div > button { min-height: 44px; }
    .footer-address { display: block; }
    .footer-address > p { max-width: 100%; }
    .footer-address > a { margin-top: 12px; }
    /* A native dialog remains the focus boundary. The visual viewport also
       responds to a software keyboard; there is no fixed-height form body. */
    .dialog { position: fixed; inset: var(--mobile-vtop, 0px) 0 auto; margin: max(12px, env(safe-area-inset-top, 0px)) auto 0; width: calc(100% - 24px); max-height: calc(var(--mobile-vh, 100dvh) - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); overscroll-behavior: contain; overflow-y: auto; overflow-x: hidden; scroll-padding-block: 64px 24px; }
    .dialog { max-width: calc(100% - 2 * max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); }
    .dialog .dialog-inner { min-width: 0; }
    .dialog :is(input, textarea, select) { scroll-margin-block: 72px 24px; }
    .dialog .dialog-close { top: 12px; }
    body.has-scope { padding-bottom: calc(var(--mobile-tray-height, 100px) + 24px + env(safe-area-inset-bottom, 0px)); }
    .scope-tray { bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
    .menu-lock .scope-tray { visibility: hidden; }
  }
  @media (max-width: 767px) {
    :root { --ui-body-size: 16px; --ui-section-size: clamp(28px, 7.5vw, 34px); --ui-heading-gap: 32px; --ui-section-space: 56px; }
    .ui-section-heading { gap: 24px; }
    .ui-section-heading > .ui-section-lead, .ui-section-heading .approach-lead-box { padding-left: 18px; }
    .ui-card h3 { font-size: 17px; line-height: 1.4; }
    .ui-card .ui-card-top { gap: 12px; }
    .ui-feature-list > li { gap: 10px; }
    .ui-feature-list strong { font-size: inherit; }
    .catalogue-grid { gap: 16px; }
    .catalogue-card-actions { gap: 8px; }
    .ui-card .ui-card-tag { font-size: 11px; }
    .ui-main .segmented > button { flex: 1 1 0; min-height: 44px; font-size: 12px; padding: 10px 6px; gap: 4px; }
    .ui-main .segmented > button .icon { width: 14px; height: 14px; }
    .ui-main .scene-controls { margin-bottom: 16px; }
    .ui-main .model-stage { height: clamp(300px, 88vw, 400px); min-height: 0; }
    .ui-main .model-stage canvas { max-width: 100%; }
    .scene-hotspot { min-width: 56px; min-height: 44px; max-width: 96px; justify-content: center; align-items: center; padding: 8px; }
    .scene-hotspot .hotspot-id { font-size: 12px; }
    .scene-hotspot .hotspot-desc { display: none; }
    .scene-mobile-caption { display: block; padding: 16px; margin-top: 12px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-card-bg); overflow-wrap: anywhere; }
    .scene-mobile-caption strong { display: block; font: 600 13px/1.5 var(--ui-font); }
    .scene-mobile-caption p { margin-top: 8px; font: 400 14px/1.6 var(--ui-font); color: var(--ui-text); }
    .scene-mobile-caption small { display: block; margin-top: 10px; font: 400 12px/1.5 var(--ui-font); color: var(--ui-muted); }
    .ui-hero-meta { overflow-wrap: anywhere; }
    /* Reflow the consulting diagram into labelled, full-width touch targets. */
    .consult-map.consult-map-balanced { display: flex; flex-direction: column; gap: 12px; height: auto; padding: 20px; }
    .consult-map-balanced :is(.map-lines, .map-orbit) { display: none; }
    .consult-map-balanced .map-head { position: static; order: 0; font-size: 10px; line-height: 1.5; height: auto; white-space: normal; gap: 8px; padding: 0; }
    .consult-map-balanced .map-index { display: none; }
    .consult-map-balanced .map-centre-balanced { position: relative; inset: auto; order: 1; transform: none; width: 100%; margin: 24px 0 8px; padding: 24px 16px 20px; }
    .consult-map-balanced .map-centre-balanced strong { font-size: 20px; }
    .consult-map-balanced .map-centre-balanced small { font-size: 10px; }
    .consult-map-balanced :is(.map-pmo-node, .map-teams-node, .map-datamodel-node) { position: relative; inset: auto; transform: none; width: 100%; max-width: none; padding: 14px 12px; gap: 10px; min-height: 72px; }
    .consult-map-balanced .map-pmo-node { order: 2; }
    .consult-map-balanced .map-teams-node { order: 3; }
    .consult-map-balanced .map-datamodel-node { order: 4; }
    .consult-map-balanced .map-pmo-node:hover, .consult-map-balanced .map-teams-node:hover, .consult-map-balanced .map-datamodel-node:hover { transform: none; }
    .consult-map-balanced .map-node-text b { font-size: 13px; line-height: 1.45; white-space: normal; overflow: visible; }
    .consult-map-balanced .map-node-text small { font-size: 12px; line-height: 1.5; white-space: normal; overflow: visible; }
    .consult-map-balanced .map-footer { position: static; order: 5; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; font-size: 9px; line-height: 1.6; }
    .ui-main .project-stage-tab { flex-direction: row; width: auto; min-height: 44px; max-width: calc(100vw - 2 * var(--ui-gutter) - 14px); }
    .ui-main .project-stage-tab > span { white-space: normal; }
    .ui-main .project-stage-tab > span:nth-child(2) { text-wrap: balance; }
    /* Product architecture has a readable mobile overview, not 5px SVG text.
       Repeats the hero scope: `.solutions-hero .architecture-desktop` sets display with higher specificity. */
    .architecture-desktop, .solutions-hero .architecture-desktop { display: none; }
    .architecture-mobile { display: block; width: 100%; }
    .architecture-mobile-core { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 16px; background: var(--ui-blue); color: white; }
    .architecture-mobile-core > .icon { width: 30px; height: 30px; }
    .architecture-mobile-core small { display: block; font: 600 10px/1.6 var(--ui-mono); letter-spacing: .12em; color: #e1eaff; }
    .architecture-mobile-core strong { display: block; font: 600 17px/1.4 var(--ui-font); margin-top: 3px; }
    .architecture-mobile-groups { display: grid; gap: 10px; margin-top: 12px; }
    .architecture-mobile-group { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-card-bg); }
    .architecture-mobile-group > .icon { width: 20px; height: 20px; color: var(--ui-blue); }
    .architecture-mobile-group > span { flex: 1; min-width: 0; }
    .architecture-mobile-group strong { display: block; font: 600 15px/1.45 var(--ui-font); }
    .architecture-mobile-group small { display: block; font: 400 12px/1.5 var(--ui-mono); color: var(--ui-text); margin-top: 4px; }
    .architecture-mobile > .text-link { margin-top: 12px; }
    .ui-main .solutions-consult-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
    .ui-main .solutions-consult-inner > div { flex: auto; }
    .ui-main .solutions-consult-inner > .button { margin: 0; }
    .ui-main .solutions-consult-icon { margin: 0; }
    .ui-main .solutions-consult-inner p { font-size: 16px; line-height: 1.7; }
    .dialog .dialog-inner { padding: 68px 20px 24px; }
    .dialog h2 { font-size: 28px; max-width: 100%; }
    .dialog .eyebrow { overflow-wrap: anywhere; }
    .form-grid { gap: 0; }
    .form-grid > label { min-width: 0; }
    .form-actions, .scope-dialog-actions, .detail-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .form-actions > *, .scope-dialog-actions > *, .detail-actions > * { width: 100%; margin: 0; }
    .scope-row { gap: 10px; }
    .scope-row > .icon { display: none; }
    .scope-row strong { overflow-wrap: anywhere; }
    .scope-row button { flex: 0 0 44px; }
    .module-visual-disclosure summary { flex-wrap: wrap; padding: 16px; }
    .module-illustration { padding: 16px; }
    .scope-tray { width: auto; margin: 0; gap: 8px; }
    .scope-tray .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
    .scope-tray .button { min-width: 0; max-width: 100%; white-space: normal; line-height: 1.4; }
    .footer-grid > div:first-child, .footer-address { grid-column: 1 / -1; }
    .footer-bottom { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  }
  @media (max-width: 400px) {
    .ui-main .segmented > button .icon { display: none; }
  }
  @media (max-width: 600px) {
    .ui-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .ui-main .ui-hero-actions > .button { width: 100%; margin: 0; }
    .ui-main .cta-actions { flex-direction: column; align-items: stretch; }
    .ui-main .cta-actions > .button { width: 100%; }
    .ui-main .cta-actions > .text-link { justify-content: center; }
  }
  @media (max-width: 479px) {
    .ui-hero .hero-metrics-strip { grid-template-columns: minmax(0, 1fr); }
    .ui-hero .metric-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
    .ui-hero .metric-item strong { grid-row: 1 / span 2; align-self: center; font-size: 22px; }
    .ui-hero .metric-item > span { font-size: 13px; }
    .ui-hero .metric-item small { font-size: 12px; line-height: 1.5; }
    .company-card .company-data { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .company-card :is(.company-card-head > span, .company-word > span) { font-size: 10px; line-height: 1.6; }
    .company-card .company-address { font-size: 13px; }
  }
  @media (max-width: 374px) {
    .site-header .brand-symbol { width: 28px; height: 32px; }
    .site-header .brand-word { font-size: 28px; }
    .site-header .brand { gap: 6px; }
    .header-inner, .header-actions { gap: 8px; }
    .ui-main .segmented > button .icon { display: none; }
    .scope-tray { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
    .scope-tray > div { grid-column: 1; grid-row: 1; }
    .scope-tray .icon-button { grid-column: 2; grid-row: 1; }
    .scope-tray .button { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .dialog .dialog-inner { padding-inline: 16px; }
  }
  @media (hover: none) and (pointer: coarse) {
    .button:hover, .ui-card:hover { transform: none; }
  }
  @media print {
    .menu-backdrop, .mobile-nav-actions, .mobile-scroll-hint { display: none; }
  }
}

/* 10 / Home section 04 graph. Legacy places 114px nodes absolutely for a 440px
 * stage; below ~390px they cover the core. The ring tightens first, then turns
 * into a 2×2 grid so labels stay at a readable size instead of shrinking. */
@layer rebario-components {
  .ui-main .delivery-visual { container: delivery-visual / inline-size; }
  .ui-main .delivery-graph-node span { font-size: 10px; letter-spacing: 1px; }
  .ui-main .delivery-graph-core strong { font-size: 11px; letter-spacing: 1.2px; }
  @container delivery-visual (max-width: 419px) {
    .delivery-graph-node { width: 100px; height: 68px; }
    .delivery-graph-core { width: 108px; height: 108px; }
    .delivery-graph-node.node-governance { left: 4px; }
    .delivery-graph-node.node-software { right: 4px; }
  }
  @container delivery-visual (max-width: 349px) {
    .delivery-graph-stage {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      height: auto;
      max-width: none;
    }
    .delivery-graph-lines { display: none; }
    .delivery-graph-core {
      position: static;
      transform: none;
      grid-column: 1 / -1;
      width: auto;
      height: auto;
      flex-direction: row;
      padding: 18px;
    }
    .delivery-graph-node,
    .delivery-graph-node:hover,
    .delivery-graph-node.is-active {
      position: static;
      transform: none;
      width: auto;
      height: 76px;
    }
  }
  @media (max-width: 767px) {
    .ui-main .delivery-visual { min-height: 0; }
  }
}

/* 11 / Readable micro text. Legacy scales card captions down to 5–9px at some
 * breakpoints. Uppercase micro labels stay at 10px or larger, everything else
 * at 11px or larger. */
@layer rebario-components {
  .ui-main .company-card :is(.company-card-head > span, .company-word > span) { font-size: 11px; line-height: 1.6; }
  .ui-main .company-card .company-data span { font-size: 12px; }
  /* Consulting hero map: legacy truncates node titles with an ellipsis at 1024px and below 960px. */
  .ui-main .consult-map-balanced .map-node-text :is(b, small) { white-space: normal; overflow: visible; text-overflow: clip; }
  .ui-main .consult-map-balanced .map-node-text small { font-size: 11px; }
  /* Home section 01: these tags are short sentences, not codes; set them as text. */
  .ui-main #approach .pillar-tag {
    flex: 1 1 auto;
    text-align: left;
    font: 500 13px/1.45 var(--ui-font);
    letter-spacing: 0;
    padding: 8px 12px;
    border-radius: 10px;
  }
}

/* 12 / Products: swipeable module cards on phones. Module links live in the
 * architecture diagram above the modules; there is no separate module rail. */
@layer rebario-components {
  @media (max-width: 767px) {
    /* Three cards per module become one swipeable row instead of three full screens. */
    .ui-main .module-section .ui-card-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--ui-gutter));
      padding-inline: var(--ui-gutter);
      scroll-padding-inline: var(--ui-gutter);
    }
    .ui-main .module-section .ui-card-grid::-webkit-scrollbar { display: none; }
    .ui-main .module-section .ui-card-grid > .ui-card { flex: 0 0 86%; scroll-snap-align: start; }
    .ui-main .module-section .ui-card-grid + .mobile-scroll-hint:not([hidden]) { margin: 12px 0 0; }
  }
}

/* 13 / Home section 02: capability videos in the home hero geometry. Copy on the
 * left; on the right a switch and, under it, a 16:9 stage where the hero has the
 * scene. The stage keeps the ratio of the files, so nothing is cropped or boxed. */
@layer rebario-components {
  .ui-main .showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }
  .showcase-copy, .showcase-visual { min-width: 0; }
  .showcase-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .ui-main .showcase-lead { margin: 24px 0 0; max-width: 580px; }
  .ui-main .showcase-tabs { margin: 0 0 14px; }
  /* Three long names do not fit one line in half a container. They wrap inside
     the pill, so a desktop rail never has to scroll. */
  .showcase-tabs > button {
    flex: 1 1 auto;
    justify-content: flex-start;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
  }
  /* 4.0: German, French, Spanish and Italian compounds are longer than English words
     ("Lieferkettenmanagement"). Where one word is wider than its tab, button or heading,
     it breaks by syllable instead of overflowing; short words never do. The language
     comes from <html lang>, so English and Russian keep their current look. */
  :is(h1, h2, h3, .showcase-tabs > button, [role="tab"], .button, .ui-card-tag):is(:lang(de), :lang(fr), :lang(es), :lang(it)) {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    overflow-wrap: break-word;
  }
  .showcase-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #dce5fb;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--ui-card-bg);
    background-image: linear-gradient(#466aec08 1px, transparent 1px), linear-gradient(90deg, #466aec08 1px, transparent 1px);
    background-size: 35px 35px;
  }
  .showcase-panel { position: absolute; inset: 0; }
  .showcase-panel > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* The whole poster starts the video; the disc only marks it as one. */
  .showcase-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--ui-white);
    cursor: pointer;
  }
  .showcase-play::before {
    content: "";
    grid-area: 1 / 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ui-blue);
    box-shadow: 0 10px 30px rgb(36 85 245 / 35%);
    transition: background-color .2s ease, transform .2s ease;
  }
  .showcase-play .icon {
    grid-area: 1 / 1;
    position: relative;
    left: 2px; /* Optical centre of a triangle. */
    width: 28px;
    height: 28px;
    fill: currentColor;
  }
  .showcase-play:hover::before { background: #1d46d5; transform: scale(1.06); }
  /* The stage clips an outline drawn outside the button. */
  .ui-main .showcase-play:focus-visible { outline-offset: -6px; }
  @media (max-width: 1199px) {
    .ui-main .showcase-grid { gap: 32px; }
  }
  /* Half of a narrow desktop container: the names give up the icons first and
     then a pixel of size, so that they take two lines and not three. */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .showcase-tabs > button .icon { display: none; }
  }
  @media (min-width: 1024px) and (max-width: 1199px) {
    .showcase-tabs > button { padding-inline: 12px; font-size: 12px; }
  }
  /* One column from the width where section headings stack, not from the hero's 900px:
     below it half a container is too narrow for the three names. */
  @media (max-width: 1023px) {
    .ui-main .showcase-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  }
  @media (max-width: 767px) {
    /* On a phone the rail scrolls, like every other switch on the site. */
    .showcase-tabs > button { flex: 0 0 auto; white-space: nowrap; }
    .showcase-visual .mobile-scroll-hint:not([hidden]) { margin: -6px 0 14px; }
    .showcase-play::before { width: 60px; height: 60px; }
    .showcase-play .icon { width: 24px; height: 24px; }
  }
  @media (hover: none) and (pointer: coarse) {
    .showcase-play:hover::before { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .showcase-play::before { transition: none; }
  }
  @media print {
    .showcase-play { display: none; }
  }
}

/* Unlayered overrides - highest priority */
#platform .home-page-link,
.home-page-link {
  display: flex !important;
  justify-content: flex-end !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 36px !important;
}
#platform .home-page-link::before,
#platform .home-page-link::after {
  display: none !important;
  content: none !important;
}


/* Rebario Logo Map Architecture & Node Interactions */
.rebario-logo-map {
  overflow: visible;
}
.rebario-node {
  cursor: pointer;
  outline: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  text-decoration: none;
}
.rebario-node:hover,
.rebario-node:focus-visible {
  transform: scale(1.12);
}
.rebario-node circle.node-bg {
  fill: #ffffff;
  stroke: #2563eb;
  stroke-width: 3.5px;
  transition: fill 0.22s ease, stroke 0.22s ease, stroke-width 0.22s ease;
}
.rebario-node:hover circle.node-bg,
.rebario-node:focus-visible circle.node-bg {
  fill: #2563eb;
  stroke: #60a5fa;
  stroke-width: 4px;
}
.rebario-node text.node-label {
  fill: #0f172a;
  font-family: inherit;
  font-weight: 800;
  transition: fill 0.22s ease;
  user-select: none;
  pointer-events: none;
}
.rebario-node:hover text.node-label,
.rebario-node:focus-visible text.node-label {
  fill: #ffffff;
}
.rebario-core-node {
  cursor: pointer;
  outline: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  text-decoration: none;
}
.rebario-core-node:hover,
.rebario-core-node:focus-visible {
  transform: scale(1.08);
}
@keyframes cardTargetPulse {
  0% {
    outline: 4px solid rgba(37, 99, 235, 0.95);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.4), 0 20px 40px -4px rgba(37, 99, 235, 0.28);
    transform: translateY(-4px);
  }
  40% {
    outline: 4px solid rgba(37, 99, 235, 0.6);
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.15), 0 14px 30px -4px rgba(37, 99, 235, 0.2);
    transform: translateY(-2px);
  }
  100% {
    outline: 4px solid transparent;
    box-shadow: none;
    transform: translateY(0);
  }
}
.is-card-highlighted {
  animation: cardTargetPulse 2.4s ease-out forwards !important;
  z-index: 10;
  position: relative;
}
section.is-card-highlighted {
  animation: none !important;
}
section.is-card-highlighted .pillar-card {
  animation: cardTargetPulse 2.4s ease-out forwards !important;
}

.delivery-graph-core .delivery-core-logo {
  width: 34px;
  height: 38px;
}
.delivery-graph-core .delivery-core-logo circle {
  fill: currentColor;
  stroke: none;
}

/* Section 04: Delivery Visual Column & Action Button */
.delivery-visual-col {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  width: 100%;
}

.delivery-visual-col .delivery-visual {
  width: 100%;
  align-self: stretch;
  order: 1;
}

.delivery-action-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  width: 100%;
  order: 2;
}

.delivery-action-wrap .button {
  min-height: 48px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.delivery-action-wrap .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

@media (max-width: 768px) {
  .delivery-visual-col {
    order: 2;
    max-width: 520px;
    margin: 0 auto;
  }
  .delivery-action-wrap {
    justify-content: center;
    margin-top: 20px;
  }
}



/* 14 / Back to top. A floating arrow on every long page, shown by js/app.js once
 * the first screen has scrolled away. It rises above the selection tray while
 * one is open and, like the tray, hides behind the open mobile menu. */
@layer rebario-components {
  .back-to-top {
    position: fixed;
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #d2ddf4;
    border-radius: 50%;
    background: var(--ui-white);
    color: var(--ui-blue);
    box-shadow: 0 12px 32px #132d5d26;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .back-to-top .icon { width: 20px; height: 20px; transition: transform .2s ease; }
  .back-to-top:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
  @media (hover: hover) {
    .back-to-top:hover { background: var(--ui-blue); border-color: var(--ui-blue); color: white; }
    /* The icon is the right arrow turned up, so its own X axis points up. */
    .back-to-top:hover .icon { transform: rotate(-90deg) translateX(2px); }
  }
  body.has-scope .back-to-top { bottom: calc(20px + var(--mobile-tray-height, 80px) + 12px); }
  .menu-lock .back-to-top { visibility: hidden; }
  @media (max-width: 767px) {
    .back-to-top { right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
    body.has-scope .back-to-top { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--mobile-tray-height, 100px) + 12px); }
  }
  @media print {
    .back-to-top { display: none; }
  }
}

/* 15 / Home hero model: labels and the rotation control. The model turns a full
 * circle, so js/scene.js places every label each frame (left or right of its
 * anchor, above or below it) and glides it there. It writes the offset as an
 * inline transform and the leader geometry as --leader-*, both from the same
 * numbers, so the leader always ends on the anchor. */
@layer rebario-components {
  /* Width must not depend on where the label is: near the right edge an auto
     width would shrink and re-wrap the text on every frame. */
  .scene-hotspot { width: max-content; }
  .scene-hotspot[data-side]::after { left: var(--leader-x); right: auto; top: var(--leader-top); bottom: auto; height: var(--leader-height); }

  .scene-pause {
    position: absolute;
    right: 16px;
    bottom: 16px;
    /* Above the labels (the active one sits at 10), so a passing label never covers it. */
    z-index: 11;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d2ddf4;
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    color: var(--ui-blue);
    box-shadow: 0 4px 14px #18306015;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .scene-pause .icon { width: 16px; height: 16px; }
  .scene-pause:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
  @media (hover: hover) {
    .scene-pause:hover { background: var(--ui-blue); border-color: var(--ui-blue); color: white; }
  }
  @media (max-width: 767px) {
    .scene-pause { right: 12px; bottom: 12px; width: 44px; height: 44px; }
  }
}

/* 16 / Social links: footer of every page and the company card on Company.
 * Brand marks are filled shapes (Simple Icons 9.21, CC0; LinkedIn was removed
 * from later releases), so .icon-brand swaps the line-icon stroke for a fill. */
@layer rebario-components {
  .icon-brand { fill: currentColor; stroke: none; }
  .social-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d2ddf4;
    border-radius: 50%;
    background: var(--ui-white);
    color: var(--ui-text);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .social-links .icon { width: 18px; height: 18px; }
  .social-links a:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
  @media (hover: hover) {
    .social-links a:hover { background: var(--ui-blue); border-color: var(--ui-blue); color: white; }
  }
  .footer-social { margin-top: 20px; }
  .company-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ui-border);
  }
  .company-social > span { font: 400 12px/1.5 var(--ui-font); color: var(--ui-muted); }
  @media (max-width: 767px) {
    .social-links a { width: 44px; height: 44px; }
  }
}

/* 17 / Privacy: the banner and the consent box of the form.
 * The banner informs, it does not collect consent: the site sets no cookies and has
 * no trackers. It shows until closed (js/app.js); while it is visible the selection
 * tray and the back-to-top arrow move up by --privacy-banner-height. */
@layer rebario-components {
  .privacy-banner {
    position: fixed;
    z-index: 65;
    left: max(24px, env(safe-area-inset-left, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px 24px;
    padding: 16px 20px;
    border: 1px solid #d2ddf4;
    border-radius: 20px;
    background: var(--ui-white);
    box-shadow: 0 12px 50px #132d5d26;
  }
  .privacy-banner p { flex: 1; min-width: 0; margin: 0; font: 400 14px/1.6 var(--ui-font); color: var(--ui-text); }
  .privacy-banner strong { font-weight: 600; color: var(--ui-heading); }
  .privacy-banner-actions { display: flex; flex: none; gap: 10px; }
  .privacy-banner .button { min-height: 44px; padding: 10px 20px; border-radius: 999px; font: 600 14px/1.5 var(--ui-font); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; }
  .privacy-banner .button-primary { color: white; background: var(--ui-blue); border: 1px solid var(--ui-blue); }
  .privacy-banner .button-outline { color: var(--ui-blue); background: white; border: 1px solid var(--ui-blue); }
  .privacy-banner :focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
  /* translate, not transform: the arrow animates transform when it appears. */
  .scope-tray, .back-to-top { translate: 0 calc(-1 * var(--privacy-banner-height, 0px)); }
  /* The end of the page can scroll out from under the banner. */
  body::after { content: ""; display: block; height: var(--privacy-banner-height, 0px); }
  .menu-lock .privacy-banner { visibility: hidden; }
  @media (max-width: 767px) {
    .privacy-banner {
      left: max(12px, env(safe-area-inset-left, 0px));
      right: max(12px, env(safe-area-inset-right, 0px));
      bottom: max(12px, env(safe-area-inset-bottom, 0px));
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 16px;
    }
    .privacy-banner p { font-size: 13px; }
    .privacy-banner-actions > * { flex: 1 1 0; }
  }
  @media print { .privacy-banner { display: none; } }

  /* Consent is a box the visitor ticks: unticked by default, required to send. */
  .gs-check { display: flex; align-items: flex-start; gap: 10px; }
  .gs-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ui-blue); cursor: pointer; }
  .get-started-dialog .gs-field .gs-check label { font: 400 13px/1.6 var(--ui-font) !important; color: var(--ui-text) !important; margin-bottom: 0 !important; cursor: pointer; }
  .gs-consent-link { margin: 6px 0 0 30px; font-size: 12px; }
  .gs-consent-field .gs-field-error { padding-left: 30px; }
  .gs-field.has-error .gs-check input { outline: 2px solid #ef4444; outline-offset: 2px; }
}

/* 18 / Enquiry sent: the message replaces the form, holds 8 s, fades out over 2 s
 * and the dialog closes (js/enquiry.js). The empty message box stays in the page
 * with no size: it is the live region that announces the reference. */
@layer rebario-components {
  .get-started-dialog.is-sent :is(.eyebrow, .get-started-heading, #get-started-form, .modal-demo-link) { display: none; }
  .gs-success { opacity: 1; transition: opacity 2s ease; }
  .gs-success:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 48px 8px 32px; text-align: center; }
  .gs-success:focus { outline: none; }
  .gs-success .icon { width: 56px; height: 56px; color: #059669; }
  .gs-success p { max-width: 460px; margin: 0; font: 400 17px/1.65 var(--ui-font); color: var(--ui-heading); overflow-wrap: anywhere; }
  .gs-success strong { font: 600 15px/1.65 var(--ui-mono); color: var(--ui-heading); white-space: nowrap; }
  /* Opacity only, not motion: kept with prefers-reduced-motion, or the message would vanish at once. */
  .gs-success.is-fading { opacity: 0; }
  @media (max-width: 640px) {
    .gs-success:not(:empty) { padding: 32px 0 16px; }
    .gs-success p { font-size: 16px; }
    .gs-success strong { white-space: normal; }
  }
}