/* Primary Online Solution UI snapshot. Remote font import omitted; local font faces are supplied by web-validation.css. */
/* ===== tokens.css ===== */

/* =============================================================================
   Online Solution - Corporate Identity & Design System
   Canonical design tokens (v2.0.0)

   Single blue identity as a full tonal ramp on a cool-neutral gray family.
   These are the canonical brand values - never hand-pick colours/fonts; inherit
   these custom properties. Brand values (#1580BD, #0E699A, #606060, #1C93D8,
   #0C1826) match brand-system/ exactly.
   ========================================================================== */

:root {
  /* --- Brand blue ramp ---------------------------------------------------- */
  --os-blue-50:  #F3F8FC;
  --os-blue-100: #E7F1F8;
  --os-blue-200: #C2E0F5;
  --os-blue-300: #8FC8EC;
  --os-blue-400: #58AEE2;
  --os-blue-500: #1C93D8;   /* bright accent - AIx edition */
  --os-blue-600: #1580BD;   /* BRAND BLUE - the identity */
  --os-blue-700: #0E699A;   /* interactive - text/links (AA) */
  --os-blue-800: #0B4E74;   /* hover / pressed / deep accent */
  --os-blue-900: #08324C;

  /* Semantic brand aliases (use these, not the raw ramp, in product work) */
  --os-brand:              var(--os-blue-600);
  --os-brand-interactive:  var(--os-blue-700);
  --os-brand-deep:         var(--os-blue-800);
  --os-brand-bright:       var(--os-blue-500);

  /* Back-compat aliases (v1.0.0 token names, still valid) */
  --os-brand-blue:             var(--os-blue-600);
  --os-brand-blue-interactive: var(--os-blue-700);
  --os-brand-blue-deep:        var(--os-blue-800);
  --os-aix-blue:               var(--os-blue-500);

  /* --- Neutral / gray ramp (cool, tuned to the blue) ---------------------- */
  --os-gray-50:  #F6F8FA;
  --os-gray-100: #EEF1F4;
  --os-gray-200: #DDE2E7;
  --os-gray-300: #C2C9D0;
  --os-gray-400: #8A929B;
  --os-gray-500: #606060;   /* BRAND GRAY - SOLUTION wordmark, footer bar */
  --os-gray-600: #4A5560;
  --os-gray-700: #333B45;
  --os-brand-gray: var(--os-gray-500);

  /* --- Ink (brand dark) --------------------------------------------------- */
  --os-ink:      #0C1826;
  --os-ink-soft: #16212E;
  --os-dark:     var(--os-ink);
  --os-black:    #000000;

  /* --- Surfaces ----------------------------------------------------------- */
  --os-canvas:        #FCFCFD;
  --os-surface:       #FFFFFF;
  --os-surface-muted: #F2F5F8;

  /* --- Text --------------------------------------------------------------- */
  --os-text-primary: #16212E;
  --os-text-body:    #4A5560;
  --os-text-muted:   #8A929B;
  --os-text-inverse: #FFFFFF;
  --os-link:         var(--os-brand-interactive);

  /* --- Borders ------------------------------------------------------------ */
  --os-border:          #E4E8EC;
  --os-border-strong:   #C2C9D0;
  --os-border-document: #000000;

  /* --- Document accents (print / stationery) ------------------------------ */
  --os-doc-table-header: #2889C4;
  --os-pdf-logo-blue:    #1D81BF;

  /* --- Functional (status - not brand colours) ---------------------------- */
  --os-info:    var(--os-brand);
  --os-success: #1E7A34;
  --os-warning: #B26A00;
  --os-error:   #C0392B;

  /* --- Typography --------------------------------------------------------- */
  --os-font-primary:   "Roboto", Arial, Tahoma, "Helvetica Neue", sans-serif;
  --os-font-secondary: "Lora", Georgia, "Times New Roman", serif;
  --os-font-mono:      "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  --os-weight-light:   300;
  --os-weight-regular: 400;
  --os-weight-medium:  500;
  --os-weight-bold:    700;

  --os-fs-display: 44px;   --os-lh-display: 1.1;
  --os-fs-h1:      34px;   --os-lh-h1:      1.15;
  --os-fs-h2:      26px;   --os-lh-h2:      1.25;
  --os-fs-h3:      21px;   --os-lh-h3:      1.3;
  --os-fs-h4:      18px;   --os-lh-h4:      1.35;
  --os-fs-body-lg: 16px;   --os-lh-body-lg: 1.6;
  --os-fs-body:    15px;   --os-lh-body:    1.7;
  --os-fs-small:   13px;   --os-lh-small:   1.5;
  --os-fs-caption: 12px;   --os-lh-caption: 1.4;
  --os-tracking-eyebrow: 0.08em;

  /* --- Space -------------------------------------------------------------- */
  --os-space-1: 4px;   --os-space-2: 8px;   --os-space-3: 12px;  --os-space-4: 16px;
  --os-space-5: 20px;  --os-space-6: 24px;  --os-space-8: 32px;  --os-space-10: 40px;
  --os-space-12: 48px; --os-space-14: 56px; --os-space-16: 64px; --os-space-20: 80px;
  --os-space-30: 120px; --os-space-38: 150px;

  /* --- Layout ------------------------------------------------------------- */
  --os-container-max:     1220px;
  --os-container-wrapper: 1240px;
  --os-section-y:         64px;
  --os-grid-cols:         12;
  --os-gutter:            24px;

  /* --- Radius ------------------------------------------------------------- */
  --os-radius-none: 0;
  --os-radius-sm:   3px;
  --os-radius-md:   5px;
  --os-radius-lg:   8px;
  --os-radius-pill: 9999px;

  /* --- Shadow ------------------------------------------------------------- */
  --os-shadow-sm:   0 1px 3px rgba(12,24,38,0.08);
  --os-shadow-md:   0 4px 12px rgba(12,24,38,0.10);
  --os-shadow-lg:   0 12px 28px rgba(12,24,38,0.12);
  --os-shadow-ring: inset 0 0 0 1px rgba(12,24,38,0.05);

  /* --- Motion ------------------------------------------------------------- */
  --os-duration-fast: 120ms;
  --os-duration-base: 200ms;
  --os-duration-slow: 320ms;
  --os-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}


/* ===== base.css ===== */
/* =============================================================================
   Base - shared primitives used across components. Deliberately light: no
   global reset that would fight a host app. Every component root sets its own
   box-sizing in components.css.
   ========================================================================== */

.os-body-base {
  font-family: var(--os-font-primary);
  font-size: var(--os-fs-body);
  line-height: var(--os-lh-body);
  color: var(--os-text-body);
  background: var(--os-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wrapper that supplies brand typography + antialiasing to any subtree.
   The design agent can wrap a screen in this to inherit the brand voice. */
.os-root {
  font-family: var(--os-font-primary);
  color: var(--os-text-body);
  -webkit-font-smoothing: antialiased;
}
.os-root *,
.os-root *::before,
.os-root *::after { box-sizing: border-box; }

/* Mono uppercase eyebrow - recurring label device. */
.os-eyebrow {
  font-family: var(--os-font-mono);
  font-size: var(--os-fs-caption);
  font-weight: var(--os-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-brand-interactive);
}

.os-container {
  width: 100%;
  max-width: var(--os-container-max);
  margin-inline: auto;
  padding-inline: var(--os-space-6);
}

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

.os-focusable:focus-visible {
  outline: 2px solid var(--os-brand);
  outline-offset: 2px;
}


/* ===== components.css ===== */
/* =============================================================================
   Component styles - the Online Solution UI kit + brand blocks.
   Every class consumes the canonical tokens (tokens.css). Derived from the
   evidenced reference pages; never hand-picks colours/fonts.
   ========================================================================== */

/* --- Button ---------------------------------------------------------------- */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--os-space-2);
  font-family: var(--os-font-primary); font-weight: var(--os-weight-medium);
  font-size: var(--os-fs-body); line-height: 1;
  padding: 12px 22px; border-radius: var(--os-radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  box-sizing: border-box;
  transition: background var(--os-duration-base) var(--os-ease-standard),
              color var(--os-duration-base) var(--os-ease-standard),
              border-color var(--os-duration-base) var(--os-ease-standard);
}
.os-btn--primary { background: var(--os-brand-interactive); color: var(--os-text-inverse); }
.os-btn--primary:hover { background: var(--os-brand-deep); }
.os-btn--secondary { background: transparent; color: var(--os-brand-interactive); border-color: var(--os-brand-interactive); }
.os-btn--secondary:hover { background: var(--os-blue-50); }
.os-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.os-btn--ghost:hover { background: rgba(255,255,255,.08); }
.os-btn--line { background: #fff; color: var(--os-brand-interactive); border-color: var(--os-border-strong); }
.os-btn--line:hover { border-color: var(--os-brand-interactive); }
.os-btn--sm { padding: 9px 18px; font-size: 14px; }
.os-btn:disabled, .os-btn.is-disabled { opacity: .45; pointer-events: none; }

/* --- Link ------------------------------------------------------------------ */
.os-link { color: var(--os-link); text-decoration: underline; text-underline-offset: 2px; }
.os-link:hover { color: var(--os-brand-deep); }

/* --- Field / Input --------------------------------------------------------- */
.os-field { display: flex; flex-direction: column; gap: var(--os-space-2); font-family: var(--os-font-primary); }
.os-field__label { font-size: var(--os-fs-caption); color: var(--os-text-muted); }
.os-input {
  font-family: var(--os-font-primary); font-size: var(--os-fs-body);
  color: var(--os-text-primary); background: var(--os-surface);
  border: 1px solid var(--os-border-strong); border-radius: var(--os-radius-md);
  padding: 10px 12px; box-sizing: border-box; width: 100%;
}
.os-input::placeholder { color: var(--os-text-muted); }
.os-input:focus, .os-input.is-focused {
  outline: none; border-color: var(--os-brand);
  box-shadow: 0 0 0 3px rgba(21,128,189,.20);
}
.os-input:disabled { opacity: .55; background: var(--os-surface-muted); cursor: not-allowed; }

/* --- Alert ----------------------------------------------------------------- */
.os-alert {
  display: flex; gap: var(--os-space-3); align-items: flex-start;
  border: 1px solid var(--os-border); border-left-width: 4px;
  border-radius: var(--os-radius-md); padding: 14px 16px;
  background: var(--os-surface); font-family: var(--os-font-primary);
  font-size: 14px; color: var(--os-text-body); box-sizing: border-box;
}
.os-alert__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.os-alert__body { line-height: 1.5; }
.os-alert__body strong { color: var(--os-text-primary); }
.os-alert--info    { border-left-color: var(--os-info); }    .os-alert--info    .os-alert__icon { color: var(--os-info); }
.os-alert--success { border-left-color: var(--os-success); } .os-alert--success .os-alert__icon { color: var(--os-success); }
.os-alert--warning { border-left-color: var(--os-warning); } .os-alert--warning .os-alert__icon { color: var(--os-warning); }
.os-alert--error   { border-left-color: var(--os-error); }   .os-alert--error   .os-alert__icon { color: var(--os-error); }

/* --- Badge ----------------------------------------------------------------- */
.os-badge {
  display: inline-block; font-family: var(--os-font-primary);
  font-size: var(--os-fs-caption); font-weight: var(--os-weight-bold);
  line-height: 1.4; padding: 3px 10px; border-radius: var(--os-radius-pill);
  box-sizing: border-box;
}
.os-badge--solid   { background: var(--os-brand); color: #fff; }
.os-badge--blue    { background: var(--os-blue-100); color: var(--os-brand-deep); }
.os-badge--neutral { background: var(--os-surface-muted); color: var(--os-text-body); border: 1px solid var(--os-border); }
.os-badge--success { background: #E7F3EA; color: var(--os-success); }

/* --- Card ------------------------------------------------------------------ */
.os-card {
  background: var(--os-surface); border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-sm);
  padding: var(--os-space-6); box-sizing: border-box; font-family: var(--os-font-primary);
}
.os-card__title { font-size: var(--os-fs-h4); font-weight: 600; color: var(--os-text-primary); margin: 0 0 var(--os-space-2); }
.os-card__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--os-text-body); }
.os-card--feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--os-space-3); }

/* --- Table ----------------------------------------------------------------- */
.os-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--os-surface); border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md); overflow: hidden;
  font-family: var(--os-font-primary); font-size: 14px;
}
.os-table th {
  text-align: left; background: var(--os-surface-muted);
  color: var(--os-text-primary); font-weight: 600;
  padding: 12px 16px; border-bottom: 1px solid var(--os-border);
}
.os-table td { padding: 12px 16px; border-bottom: 1px solid var(--os-border); color: var(--os-text-body); }
.os-table tr:last-child td { border-bottom: none; }

/* --- Medallion (brand node device: flat disc + connected-node accents) ------ */
.os-medallion {
  position: relative; display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: var(--os-radius-pill);
  background: var(--os-blue-50); border: 1.5px solid var(--os-blue-200);
  color: var(--os-brand); box-sizing: border-box;
}
.os-medallion--sm { width: 72px; height: 72px; }
.os-medallion--lg { width: 112px; height: 112px; }
.os-medallion__node {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--os-brand); transform: translate(-50%, -50%);
}
.os-medallion--sm .os-medallion__node { width: 6px; height: 6px; }
.os-medallion__icon { display: grid; place-items: center; width: 44%; height: 44%; }
.os-medallion__icon > svg { width: 100%; height: 100%; }
.os-medallion__icon > img { max-width: 100%; max-height: 100%; height: auto; }
.os-medallion > svg { width: 42%; height: 42%; }
.os-medallion > img { max-width: 52%; max-height: 52%; height: auto; }

/* --- Nav / Header ---------------------------------------------------------- */
.os-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--os-surface); border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md); padding: 14px 20px;
  font-family: var(--os-font-primary); box-sizing: border-box; gap: 16px; flex-wrap: wrap;
}
.os-nav__brand { display: flex; align-items: center; gap: var(--os-space-3); font-weight: 600; color: var(--os-text-primary); }
.os-nav__brand img { height: 30px; width: auto; display: block; }
.os-nav__links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.os-nav__link { color: var(--os-brand-interactive); text-decoration: none; font-size: 15px; }
.os-nav__link:hover { color: var(--os-brand-deep); }
.os-nav__link--active { color: var(--os-text-primary); font-weight: 600; }

/* --- Logo ------------------------------------------------------------------ */
.os-logo { display: inline-flex; align-items: center; }
.os-logo__img { display: block; width: auto; height: 40px; }

/* --- NodeField (signature backdrop) ---------------------------------------- */
.os-nodefield {
  position: relative; overflow: hidden; border-radius: var(--os-radius-md);
  background: radial-gradient(600px 300px at 70% 20%, #143a5c, var(--os-ink) 60%, #070f18);
  min-height: 150px; box-sizing: border-box;
  font-family: var(--os-font-primary); color: var(--os-text-inverse);
}
.os-nodefield__dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--os-blue-400); box-shadow: 0 0 18px rgba(88,174,226,.7); }
.os-nodefield__line { position: absolute; height: 2px; background: linear-gradient(90deg, rgba(88,174,226,.1), rgba(88,174,226,.6)); transform-origin: left center; }

/* --- DocumentBand (stationery signature) ----------------------------------- */
.os-docband {
  position: relative; height: 60px; border-radius: var(--os-radius-sm);
  overflow: hidden; border: 1px solid var(--os-border);
  display: flex; align-items: stretch; box-sizing: border-box; background: var(--os-surface);
  font-family: var(--os-font-primary);
}
.os-docband__wedge { width: 190px; background: var(--os-doc-table-header); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
.os-docband__bar { flex: 1; background: var(--os-brand-gray); align-self: flex-end; height: 14px; margin-top: auto; }
.os-docband__symbol { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); height: 30px; width: auto; }

/* --- Hero ------------------------------------------------------------------ */
.os-hero {
  position: relative; overflow: hidden; color: #fff; font-family: var(--os-font-primary);
  background: radial-gradient(1100px 560px at 82% 6%, #164067 0%, #0c1826 52%, #070f18 100%);
}
.os-hero__field { position: absolute; inset: 0; z-index: 1; opacity: .55; }
.os-hero__inner {
  position: relative; z-index: 2; max-width: var(--os-container-max); margin: 0 auto;
  padding: 92px 32px 96px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.os-hero__eyebrow { font-family: var(--os-font-mono); color: var(--os-blue-400); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.os-hero__title { margin: 0; color: #fff; font-size: 52px; line-height: 1.06; font-weight: 700; letter-spacing: -.02em; }
.os-hero__text { color: #c6d3df; font-size: 18px; line-height: 1.6; max-width: 520px; margin: 22px 0 30px; }
.os-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .os-hero__inner { grid-template-columns: 1fr; } }

/* --- ServiceCard ----------------------------------------------------------- */
.os-service {
  background: var(--os-surface); border: 1px solid var(--os-border);
  border-radius: var(--os-radius-lg); padding: 26px; box-sizing: border-box;
  font-family: var(--os-font-primary);
  transition: box-shadow var(--os-duration-base) var(--os-ease-standard),
              transform var(--os-duration-base) var(--os-ease-standard),
              border-color var(--os-duration-base) var(--os-ease-standard);
}
.os-service:hover { box-shadow: var(--os-shadow-lg); transform: translateY(-3px); border-color: var(--os-blue-200); }
.os-service__med { width: 56px; height: 56px; border-radius: var(--os-radius-md); background: var(--os-blue-50); border: 1px solid var(--os-blue-100); display: grid; place-items: center; color: var(--os-brand); margin-bottom: 20px; }
.os-service__med svg { width: 28px; height: 28px; }
.os-service__title { font-size: 17px; font-weight: 600; color: var(--os-text-primary); margin: 0 0 8px; }
.os-service__text { font-size: 13.5px; color: var(--os-text-muted); line-height: 1.6; margin: 0 0 16px; }
.os-service__link { font-size: 13px; font-weight: 500; color: var(--os-brand-interactive); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.os-service__link:hover { color: var(--os-brand-deep); }

/* --- ProofBand ------------------------------------------------------------- */
.os-proof { background: var(--os-surface); border-top: 1px solid var(--os-border); border-bottom: 1px solid var(--os-border); font-family: var(--os-font-primary); }
.os-proof__inner { max-width: var(--os-container-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.os-proof__cell { padding: 40px 32px; border-left: 1px solid var(--os-border); }
.os-proof__cell:first-child { border-left: none; }
.os-proof__n { font-size: 38px; font-weight: 700; color: var(--os-text-primary); letter-spacing: -.02em; }
.os-proof__n b { color: var(--os-brand); }
.os-proof__t { font-size: 13.5px; color: var(--os-text-muted); margin-top: 6px; }
@media (max-width: 820px) { .os-proof__inner { grid-template-columns: repeat(2, 1fr); } .os-proof__cell:nth-child(2) { border-left: none; } }

/* --- FeaturePanel (dark metrics panel) ------------------------------------- */
.os-feature-panel {
  background: var(--os-ink); border-radius: 12px; padding: 30px; position: relative;
  overflow: hidden; box-shadow: var(--os-shadow-lg); font-family: var(--os-font-primary); box-sizing: border-box;
}
.os-feature-panel__field { position: absolute; inset: 0; opacity: .4; }
.os-feature-panel__inner { position: relative; z-index: 2; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 22px; }
.os-feature-panel__row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.os-feature-panel__row:last-child { border-bottom: none; }
.os-feature-panel__k { color: #a9bccd; font-family: var(--os-font-mono); font-size: 12px; }
.os-feature-panel__v { color: #fff; font-weight: 600; }
.os-feature-panel__v em { color: var(--os-blue-400); font-style: normal; }

/* --- Footer ---------------------------------------------------------------- */
.os-footer { background: var(--os-ink); color: #aebccb; padding: 56px 0 40px; font-family: var(--os-font-primary); }
.os-footer__inner { max-width: var(--os-container-max); margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.os-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.os-footer__chip { display: inline-flex; align-self: flex-start; background: #fff; border-radius: 8px; padding: 9px 12px; }
.os-footer__chip img { height: 26px; display: block; }
.os-footer__tagline { font-size: 13px; line-height: 1.6; margin: 0; }
.os-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.os-footer__col h4 { color: #fff; font-size: 13px; letter-spacing: .04em; margin: 0 0 14px; font-weight: 600; }
.os-footer__col a { display: block; color: #aebccb; font-size: 14px; padding: 5px 0; text-decoration: none; }
.os-footer__col a:hover { color: #fff; }
.os-footer__legal { max-width: var(--os-container-max); margin: 44px auto 0; padding: 22px 32px 0; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--os-font-mono); font-size: 11.5px; color: #6f8496; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --- Slides (presentation) ------------------------------------------------- */
.os-slide {
  width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border-radius: 8px;
  overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.18); position: relative;
  font-family: var(--os-font-primary); box-sizing: border-box;
  container-type: inline-size;
}
.os-slide--title { background: radial-gradient(900px 420px at 74% 22%, #164067 0%, #0c1826 58%, #070f18 100%); color: #fff; padding: 6% 7.4%; display: flex; flex-direction: column; justify-content: center; }
.os-slide__nodes { position: absolute; inset: 0; z-index: 1; }
.os-slide__chip { display: inline-flex; align-self: flex-start; background: #fff; border-radius: 9px; padding: 9px 12px; margin-bottom: 28px; position: relative; z-index: 2; }
.os-slide__chip img { height: 46px; width: auto; display: block; }
.os-slide__eyebrow { color: #7cc1ef; font-size: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; position: relative; z-index: 2; }
.os-slide__title { position: relative; z-index: 2; color: #fff; font-size: clamp(26px, 6.2cqw, 58px); line-height: 1.05; font-weight: 700; margin: 0; }
.os-slide__rule { width: 96px; height: 5px; background: var(--os-brand); border-radius: 3px; margin: 26px 0; position: relative; z-index: 2; }
.os-slide__lead { position: relative; z-index: 2; color: #c6d3df; font-size: 22px; margin: 0; max-width: 640px; }
.os-slide--content { background: #fff; padding: 5% 7.4%; display: flex; flex-direction: column; }
.os-slide__kicker { color: var(--os-brand-interactive); font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.os-slide__h2 { color: var(--os-text-primary); font-size: clamp(22px, 4.4cqw, 42px); font-weight: 700; margin: 8px 0 6px; }
.os-slide__sub { color: var(--os-text-muted); font-size: clamp(15px, 2.3cqw, 22px); margin: 0 0 34px; }
.os-slide__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.os-slide__col h3 { color: var(--os-text-primary); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.os-slide__col p { font-size: 17px; line-height: 1.5; color: var(--os-text-body); margin: 0; }
.os-slide__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--os-border); padding-top: 16px; }
.os-slide__foot img { height: 26px; }
.os-slide__foot span { font-size: 16px; color: var(--os-text-muted); }