/* ---------------------------------------------------------------------------
   File:    public/site.css
   Created: 2026-11-14
   Updated: 2026-11-14
   Purpose: All styling for the Resilient AI Systems one-page site. Every rule
            here was lifted out of the inline style attributes in the Claude
            Design canvas (website/src/Main.dc.html) and given a class name.
   Inputs:  linked from public/index.html and public/404.html
   Outputs: none (a stylesheet)
   Uses:    IBM Plex Sans and IBM Plex Mono, loaded from Google Fonts by the
            page head. If those never load, the system-ui / monospace fallbacks
            in --sans and --mono keep the layout intact.
   Used by: public/index.html, public/404.html
   Notes:   Colours are declared once in :root and referenced by name, so a
            palette change is a one-line edit. Headings and display type use
            clamp() so the design's fixed 58px/40px sizes survive at desktop
            width but cannot overflow a 375px phone. Card grids use
            minmax(min(<size>, 100%), 1fr) so a grid track can never be wider
            than the viewport, which is the usual cause of a sideways scroll.
   --------------------------------------------------------------------------- */

/* --- Design tokens ------------------------------------------------------- */

:root {
  --navy-900: #091321;   /* footer */
  --navy-800: #0d1828;   /* header, hero, security band, headings on light */
  --navy-700: #12223a;   /* status panel, security list items */
  --navy-650: #16273f;   /* grid lines on the dark security band */
  --navy-600: #172a45;   /* "built for" band, grid lines on the hero */
  --navy-500: #1f3352;   /* row rules inside the status panel */
  --navy-400: #2c4467;   /* borders on dark surfaces */
  --blue-600: #2f5fa6;   /* section numbers, eyebrow labels, CTA band */
  --blue-500: #3568b5;   /* primary button fill */
  --blue-300: #8fb4ea;   /* accent type on dark, shield-tag colour */
  --ink: #1a2230;        /* body copy on light surfaces */
  --ink-muted: #4e5868;  /* secondary copy on light surfaces */
  --line: #cfd8e5;       /* borders on light surfaces */
  --paper: #edf1f7;      /* alternating light section background */
  --mist: #d3ddeb;       /* hero lede, FAQ rules */
  --steel: #c9cfd8;      /* nav links, ghost button border */
  --cloud: #e6e9ee;      /* header text, CTA heading, status values */
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-800);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

a { color: var(--steel); }
a:hover { color: #ffffff; }

h1, h2, h3 { overflow-wrap: break-word; }

/* The content column. Sections own their vertical padding; the 24px gutters
   live here so the header and every section share one left edge. */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* --- Shared type --------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.eyebrow-light { color: var(--blue-300); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary {
  background: var(--blue-500);
  color: #ffffff;
}

.btn-primary:hover {
  background: #3f74c2;
  color: #ffffff;
}

.btn-ghost {
  border-color: var(--steel);
  color: #ffffff;
  font-weight: 500;
}

.btn-ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.btn-on-blue {
  background: var(--cloud);
  color: var(--navy-800);
}

.btn-on-blue:hover { background: #ffffff; }

/* The ghost button is white type for dark surfaces; this is its light-surface
   twin, used by the 404 page. */
.btn-ghost-dark {
  border-color: var(--navy-400);
  color: var(--navy-800);
  font-weight: 500;
}

.btn-ghost-dark:hover {
  border-color: var(--navy-800);
  color: var(--navy-800);
}

.btn-compact {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  background: var(--navy-800);
  border-bottom: 1px solid var(--navy-400);
  color: var(--cloud);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
}

.brand:hover { color: #ffffff; }

.brand-mark {
  width: 36px;
  height: 42px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.nav a {
  color: var(--steel);
  font-size: 15px;
  text-decoration: none;
}

.nav a:hover { color: #ffffff; }

/* The nav link colour rule above is more specific than .btn-primary, so the
   phone button would otherwise render steel-on-blue at 3.5:1. This puts the
   button's own white back. */
.nav a.btn { color: #ffffff; }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: 88px 0 104px;
  background-color: var(--navy-800);
  background-image:
    linear-gradient(var(--navy-600) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-600) 1px, transparent 1px);
  background-size: 48px 48px;
  color: #ffffff;
}

.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hero-copy {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 7.5vw, 3.625rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.hero h1 span { color: var(--blue-300); }

.hero-lede {
  margin: 0;
  max-width: 580px;
  font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
  color: var(--mist);
}

/* The "System status" panel beside the hero copy. */
.status {
  flex: 1 1 400px;
  min-width: 0;
  background: var(--navy-700);
  border: 1px solid var(--navy-400);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 14px;
}

.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--navy-400);
  color: var(--blue-300);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-list {
  margin: 0;
  padding: 8px 18px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}

.status-list dt {
  padding: 12px 0;
  border-bottom: 1px solid var(--navy-500);
  color: var(--blue-300);
}

.status-list dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--navy-500);
  color: var(--cloud);
  text-align: right;
}

.status-list dt:last-of-type,
.status-list dd:last-of-type { border-bottom: 0; }

/* --- "Built for" band ---------------------------------------------------- */

.band {
  padding: 22px 0;
  background: var(--navy-600);
}

.band p {
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

/* --- Sections ------------------------------------------------------------ */

.section { padding: 96px 0; }

.section-paper { background: var(--paper); }
.section-white { background: #ffffff; }

.section-lined {
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.section-dark {
  background-color: var(--navy-800);
  background-image:
    linear-gradient(var(--navy-650) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-650) 1px, transparent 1px);
  background-size: 48px 48px;
  color: #ffffff;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-head-narrow { max-width: 760px; }

.section-title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

.section-title-light { color: #ffffff; }

.lede {
  margin: 0;
  font-size: 17px;
  color: var(--ink-muted);
}

.lede-light { color: var(--mist); }

/* --- Grids --------------------------------------------------------------- */

.grid { display: grid; }

.grid-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
}

.grid-reasons {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
}

.grid-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.grid-sectors {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

.grid-checks {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

/* --- Service cards ------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-800);
}

.card p {
  margin: 0;
  color: var(--ink-muted);
}

/* --- Reason columns (Why local) ------------------------------------------ */

.reason {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--blue-600);
}

.reason h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--navy-800);
}

.reason p {
  margin: 0;
  color: var(--ink-muted);
}

/* --- Security band ------------------------------------------------------- */

.security-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.security-intro {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-list {
  flex: 1 1 520px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.security-list li {
  display: flex;
  gap: 10px;
  padding: 16px 18px;
  background: var(--navy-700);
  border: 1px solid var(--navy-400);
  border-radius: 4px;
  font-size: 15px;
}

.check {
  font-family: var(--mono);
  color: var(--blue-300);
}

/* --- Kansas policy list -------------------------------------------------- */

/* The light twin of .security-list. Same shape, rhythm and check marks, on a
   paper background instead of the dark security band. Kept as its own class so
   the dark list can never be lightened by accident. */
.policy-list {
  flex: 1 1 520px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.policy-list li {
  display: flex;
  gap: 10px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  color: var(--ink);
}

/* --blue-300 is the dark-surface accent and only reaches 2.2:1 on white, so
   the check marks take the darker blue here. */
.policy-list .check { color: var(--blue-600); }

/* --- Split sections and panels ------------------------------------------- */

/* Used by the Founding customers section. The Healthcare section that these
   were written for came off the page on 2026-11-14, so .callout and .panel-dark
   have no caller right now. They stay: they are part of the design system, and
   the next section that needs a light panel or a dark twin should not have to
   reinvent them. */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.split-narrow {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.split-wide {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.callout {
  margin: 0;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 17px;
  color: var(--ink);
}

.panel {
  align-self: start; /* size to content, not the text column (2026-11-14) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue-600);
  border-radius: 6px;
}

.panel h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-800);
}

.panel ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}

.panel-dark {
  background: var(--navy-800);
  border-color: var(--navy-400);
  border-top-color: var(--blue-300);
}

.panel-dark h3 { color: #ffffff; }

.panel-dark ul { color: var(--mist); }

/* --- Process steps ------------------------------------------------------- */

.step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.step-number {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--blue-600);
}

.step h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-800);
}

.step p {
  margin: 0;
  color: var(--ink-muted);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Sector cards -------------------------------------------------------- */

.sector {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sector h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 1.875rem);
  font-weight: 600;
  color: var(--navy-800);
}

.sector p {
  margin: 0;
  color: var(--ink-muted);
}

.sector ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
}

/* --- FAQ ----------------------------------------------------------------- */

.faq {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq h2 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

.faq-item {
  padding-top: 20px;
  border-top: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-800);
}

.faq-item p {
  margin: 0;
  color: var(--ink-muted);
}

/* --- Closing call to action --------------------------------------------- */

.cta {
  padding: 72px 0;
  background: var(--blue-600);
}

.cta-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.cta h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4.6vw, 2.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.cta p {
  margin: 0;
  font-size: 18px;
  color: var(--cloud);
}

.cta .btn-row {
  justify-content: center;
  margin-top: 0;
}

/* The quiet availability line under the closing buttons. Scoped as
   .cta .cta-note so it outranks the 18px .cta p rule above it. */
.cta .cta-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cloud);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: 40px 0;
  background: var(--navy-900);
  color: var(--blue-300);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand img {
  width: 30px;
  height: 35px;
  object-fit: contain;
}

.footer-brand span {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}

.footer-meta {
  font-family: var(--mono);
  font-size: 13px;
}

/* The RWS credit, kept as its own centred row under the copyright. */
.footer-credit {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--navy-400);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  text-align: center;
}

.footer-credit img {
  width: 24px;
  height: 24px;
}

.footer-credit a {
  color: var(--blue-300);
  text-decoration: none;
}

.footer-credit a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
  padding: 96px 0;
  background: var(--paper);
}

.notfound-inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.notfound h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}

.notfound p {
  margin: 0;
  font-size: 17px;
  color: var(--ink-muted);
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  .hero { padding: 56px 0 64px; }
  .section { padding: 64px 0; }
  .cta { padding: 56px 0; }
  .status { font-size: 13px; }
  .sector { padding: 24px; }
  .footer-inner { justify-content: flex-start; }
}