/* RailGrid Technologies: site-wide theme (Nov 2026)
   Brings every inner page in line with the homepage redesign: night stage for the
   header, page heroes, dark sections and footer; paper and white content bands;
   IBM Plex type; official logo colours (cyan #00C0E0, navy #002858).
   Load AFTER site.css and railgrid-justify.css. Justified running text is kept:
   this file sets no text-align on paragraphs, leads or lists. */

:root {
  --night: #00142E;
  --navy: #002858;
  --navy-700: #0a3a78;
  --navy-900: #00142E;
  --cyan: #00C0E0;
  --cyan-600: #00788F;
  --cyan-100: #E0F7FB;
  --ink: #0B1C2E;
  --ink-2: #33445A;
  --ink-3: #4A5A6E;
  --line: #D7DFE8;
  --line-2: #E8EEF4;
  --paper: #F3F6F9;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -20px rgba(0, 20, 46, .28);
  --shadow-lg: 0 30px 80px -30px rgba(0, 20, 46, .45);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --fg-night: 234 242 248;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --grid-lines:
    linear-gradient(rgba(234,242,248,.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(234,242,248,.05) 1px, transparent 1px) 0 0 / 72px 72px;
}

html { background: var(--night); }
body { font-family: var(--font); background: var(--paper); color: var(--ink); -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(0, 192, 224, .3); }

/* Type: lighter, tighter display; mono labels */
h1, h2, h3, h4 { font-weight: 400; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-weight: 500; letter-spacing: -0.01em; }
.card h3, .card h2.h3 { font-weight: 500; font-size: 18px; }
.lead { color: var(--ink-2); }
.eyebrow, .card__label, .form__legend {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; color: var(--cyan-600);
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.mono, .stat__label, .phone__hdr { font-family: var(--mono); }

/* Header: night bar with the official logo */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 51; background: var(--night); }
.header { top: env(safe-area-inset-top, 0px); background: rgba(0, 20, 46, .94); border-bottom: 1px solid rgba(var(--fg-night) / .08); }
.header__inner { height: 80px; }
.brand img { height: 58px; width: auto; }
.nav a { font-weight: 400; color: rgba(var(--fg-night) / .74); border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { color: rgb(var(--fg-night)); background: rgba(var(--fg-night) / .08); }
.nav-toggle { background: transparent; border-color: rgba(var(--fg-night) / .18); border-radius: 12px; }
.nav-toggle svg { stroke: rgb(var(--fg-night)); }
.lang-switch { background: transparent; border-color: rgba(var(--fg-night) / .16); }
.lang-switch button { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; font-size: 11px; color: rgba(var(--fg-night) / .62); }
.lang-switch button:hover { color: rgb(var(--fg-night)); }
.lang-switch button[aria-pressed="true"] { background: rgba(var(--fg-night) / .14); color: rgb(var(--fg-night)); }

/* Buttons: pills */
.btn { border-radius: 999px; font-weight: 500; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--cyan); color: var(--night); }
.btn--primary:hover { background: #3AD3EE; color: var(--night); }
.btn--navy { background: var(--ink); }
.btn--navy:hover { background: var(--navy); }
.btn--ghost { border-color: #B9C5D3; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.header .btn--ghost, .section--dark .btn--ghost, .page-hero--dark .btn--ghost, .cta-panel .btn--ghost { border-color: rgba(var(--fg-night) / .3); color: rgb(var(--fg-night)); }

/* Page heroes: night stage with the rail grid */
.page-hero, .page-hero--dark, .article__hero {
  background: var(--grid-lines), radial-gradient(ellipse 70% 90% at 75% 20%, rgba(0, 40, 88, .9), transparent 70%), var(--night);
  color: rgb(var(--fg-night)); border-bottom: 1px solid rgba(var(--fg-night) / .08); padding: 104px 0 80px;
}
.page-hero h1, .page-hero--dark h1, .article__hero h1 { color: rgb(var(--fg-night)); }
.page-hero h1 span[style*="color"] { display: block; margin-top: .3em; font-size: .5em; line-height: 1.15; letter-spacing: -.02em; color: rgba(var(--fg-night) / .62) !important; font-weight: 300 !important; }
.page-hero .lead, .page-hero--dark .lead, .article__hero .lead, .article__hero p { color: rgba(var(--fg-night) / .72); }
.page-hero .eyebrow, .article__hero .eyebrow { color: var(--cyan); }
.page-hero .muted, .article__hero .muted, .article__hero .byline { color: rgba(var(--fg-night) / .6); }
.page-hero .chip, .article__hero .chip { background: rgba(var(--fg-night) / .06); border-color: rgba(var(--fg-night) / .14); color: rgba(var(--fg-night) / .85); }
.page-hero a:not(.btn), .article__hero a:not(.btn) { color: var(--cyan); }
.article__hero .byline__avatar { background: var(--cyan); color: var(--night); }

/* Sections */
.section--white { background: #fff; border-color: var(--line); }
.section--dark { background: var(--grid-lines), var(--night); color: rgb(var(--fg-night)); }
.section--dark h2, .section--dark h3 { color: rgb(var(--fg-night)); }
.section--dark .lead, .section--dark .muted, .section--dark .section-head p { color: rgba(var(--fg-night) / .66); }
.section--dark .eyebrow, .section--dark .card__label { color: var(--cyan); }

/* Cards: hairline, calm */
.card, .post-card { border-color: var(--line); border-radius: var(--radius); }
.card--top { border-top: 2px solid var(--cyan); border-radius: 0 0 var(--radius) var(--radius); }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(0, 120, 143, .45); }
.card__more { font-weight: 500; color: var(--ink); }
.card .icon { background: var(--cyan-100); border-radius: 10px; }
.card .icon svg { stroke: var(--cyan-600); }
.card--dark { background: linear-gradient(180deg, rgba(0, 40, 88, .6), rgba(0, 40, 88, .18)); border-color: rgba(var(--fg-night) / .12); }
.card--dark h3 { color: rgb(var(--fg-night)); }
.card--dark p { color: rgba(var(--fg-night) / .68); }
.section--dark .card__more { color: var(--cyan); }
.num { font-family: var(--mono); color: var(--cyan-600); }

/* Pills, chips, lists */
.pill { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; padding: 5px 10px; }
.pill--cyan { background: var(--cyan-100); color: var(--cyan-600); }
.pill--green { background: #E3F5EA; color: #11713A; }
.chip { font-family: var(--mono); font-weight: 500; font-size: 12px; border-radius: 8px; }
.list li::before {
  background: var(--cyan-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300788F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.section--dark .list li { color: rgba(var(--fg-night) / .78); }

/* Doctrine and layers */
.doctrine div { border-left-color: var(--cyan); background: rgba(var(--fg-night) / .04); font-weight: 400; font-size: 20px; letter-spacing: -.01em; }
.layer { background: rgba(0, 40, 88, .45); border-color: rgba(var(--fg-night) / .12); }
.layer b { font-family: var(--mono); font-weight: 500; }

/* Product mocks */
.window, .phone { border-color: var(--line); }
.window { border-radius: 18px; }
.stat__value { font-weight: 400; letter-spacing: -.03em; color: var(--ink); }
.phone__hello { font-weight: 500; color: var(--ink); }
.phone__actions div { color: var(--ink); }
.phone__actions div:first-child { background: var(--cyan); color: var(--night); }

/* Panels */
.panel { border-radius: 20px; box-shadow: none; }
.cta-panel { background: var(--grid-lines), radial-gradient(ellipse 60% 120% at 85% 0%, rgba(0, 40, 88, .9), transparent 70%), var(--night); border-radius: 22px; }
.cta-panel h2 { color: rgb(var(--fg-night)); font-weight: 400; }
.cta-panel p { color: rgba(var(--fg-night) / .7); }

/* Forms */
.field label, fieldset.field legend { font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea { border-radius: 10px; }
.check input { accent-color: var(--cyan-600); }

/* Tables and legal pages */
.table { border-radius: var(--radius); }
.table th, .legal th { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; color: var(--ink-3); background: var(--paper); }
.legal h2 { font-weight: 400; }
.legal h3 { font-weight: 500; }

/* Footer: same night as the homepage */
.footer { background: var(--night); color: rgba(var(--fg-night) / .66); }
.footer img { height: 96px; }
.footer h4 { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; color: rgba(var(--fg-night) / .44); }
.footer a { color: rgba(var(--fg-night) / .7); }
.footer a:hover { color: rgb(var(--fg-night)); }
.footer__legal { color: rgba(var(--fg-night) / .5); border-top-color: rgba(var(--fg-night) / .1); }

/* Focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: var(--cyan); box-shadow: 0 0 0 5px rgba(0, 192, 224, .25); }
.skip-link { background: var(--cyan); color: var(--night); }

/* Mobile menu: dark drop-down to match the header */
@media (max-width: 860px) {
  .header__inner { height: 72px; }
  .brand img { height: 46px; }
  .nav { top: 72px; background: var(--night); border-bottom-color: rgba(var(--fg-night) / .1); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
  .nav a { color: rgba(var(--fg-night) / .85); border-radius: 10px; }
  .page-hero, .page-hero--dark, .article__hero { padding: 72px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card--link { transition: none; }
}

/* Long words inside the narrow stack tiles (e.g. "Intelligence" at 390 px) wrap instead of overflowing */
.layer { min-width: 0; }
.layer span { display: block; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

/* Legal tables (cookie list) scroll inside themselves on phones instead of widening the page */
@media (max-width: 640px) {
  .legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* The ICDOS value-architecture strip sets six columns inline; let it reflow on smaller screens */
@media (max-width: 1024px) { .layers[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 560px)  { .layers[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }