/*
  S2MB Data Management landing page (Project Demo 5). The only stylesheet; the pages have no
  style attributes and no <style> blocks (CSP style-src 'self').
  Spec: docs/design/demo5-design-spec.md. Light only (no dark-mode block, Demo 4 rule).
  Breakpoints: phone < 768, tablet 768-1023, desktop >= 1024. No fixed heights anywhere.
*/

/* ----- Poppins (SIL OFL 1.1, fonts/OFL.txt), Latin subset, self-hosted ----- */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

/* ----- Tokens (spec 3.1) ----- */
:root {
  --white: #ffffff;
  --slate: #2b353b;
  --orange: #D35910;      /* icons, discs, bars only: never body-size text */
  --sky: #80d6fb;         /* h2 and focus ring on slate */
  --link: #1d4ed8;
  --muted: #55606a;
  --border: #d0d6da;
  --tag-bg: #eef1f3;
  --shadow: 0 4px 16px rgba(43, 53, 59, 0.12);
  --shadow-dark: 0 6px 18px rgba(0, 0, 0, 0.35);

  /* Hero diagram (Demo 4 hero-diagram spec section 11) */
  --flow-arrow-in: #dc2626;
  --flow-arrow-out: #15803d;
  --flow-convert-text: #c2410c;
  --flow-disc: #ffffff;
  --flow-disc-border: #1d4ed8;
  --flow-rotate-top: #15803d;
  --flow-rotate-bottom: #dc2626;

  --band-pad: 64px;
  --gap: 24px;
  --inline-pad: 16px;
  --card-pad: 24px;
}

@media (min-width: 768px) {
  :root { --band-pad: 80px; --gap: 32px; --inline-pad: 24px; }
}

@media (min-width: 1024px) {
  :root { --band-pad: 96px; --gap: 48px; --inline-pad: 32px; --card-pad: 32px; }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}

img { max-width: 100%; }

p {
  max-width: 72ch;
  margin: 0 0 16px;
}

h1, h2, h3 { margin: 0; }

h1 {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h3 { font-size: 1.375rem; }
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* Slate areas use the sky ring; white cards on slate bands go back to the link-blue ring. */
.band--slate :focus-visible { outline-color: var(--sky); }
.band--slate .card :focus-visible { outline-color: var(--link); }

main:focus { outline: none; }

/* Read out by screen readers, not shown (e.g. "opens in a new tab"). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

section { scroll-margin-top: 16px; }

.skip-link {
  position: absolute;
  top: -200px;
  left: 8px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--white);
  color: var(--link);
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus { top: 8px; }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--inline-pad);
}

/* ----- Header (like s2mb.com): white-to-slate gradient, logo and line on the left, menu centred -----
   The brand sits on solid white (to --brand-white), then the gradient fades to slate, so the slate
   logo line and the white menu text always keep full contrast.
   Phone/tablet: brand row (gradient) above the slate menu bar. From 1024px: one row, grid
   "brand | menu | spacer"; the two side columns share the free space equally, so the menu is centred
   on the page whenever the brand fits in its half (it moves right rather than overlap it). */
:root { --brand-white: 300px; }

@media (min-width: 1024px) {
  :root { --brand-white: 330px; }
}

.site-header {
  background: var(--white);
  border-bottom: 3px solid var(--slate);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px var(--inline-pad);
  background: #ffffff linear-gradient(to right, #ffffff 0, #ffffff var(--brand-white), #2b353b 100%);
  text-align: left;
}

.brand-link {
  display: inline-block;
  line-height: 0;
}

.brand-link img {
  display: block;
  width: auto;
  height: 38px;   /* round 9: TIMS-style logo at the old logo's width (about 102px) */
}

.brand .brand-line {
  max-width: none;
  margin: 4px 0 0;
  color: var(--slate);
  font-size: 0.6875rem;   /* 11px: 2px smaller than before (13px); 12px from 1024px (was 14px) */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* One line (Mario, round 3). Below 360px it may wrap, but only if it no longer fits
   (for example with enlarged text spacing). */
@media (min-width: 360px) {
  .brand .brand-line { white-space: nowrap; }
}

.menu-bar { background: var(--slate); }

.menu-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 0 8px;
}

.menu-bar a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 10px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Hover: a 3px orange bar under the text; the text stays white (orange text would be 3.1:1). */
.menu-bar a:hover {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.menu-bar a:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: -3px;
}

@media (min-width: 768px) {
  .menu-bar a { padding: 12px 16px; }
}

@media (min-width: 1024px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    background: var(--slate);
  }

  .brand { padding-right: 48px; justify-content: center; }
  .brand .brand-line { font-size: 0.75rem; }
  .menu-bar { display: flex; align-items: center; }
  .menu-bar ul { flex-wrap: nowrap; padding: 0; }
  .menu-bar a { font-size: 1rem; letter-spacing: 2px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .menu-bar a { padding: 12px 12px; letter-spacing: 1px; }
}

/* ----- Bands (spec 2, 3.4) ----- */
.band { padding-block: var(--band-pad); }

.band--white { background: var(--white); color: var(--slate); }
.band--slate { background: var(--slate); color: var(--white); }

/* Band heading: centred, with the s2mb.com gradient rule (decorative). */
.band-title {
  margin-bottom: 40px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.band-title::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 16px;
  background: linear-gradient(to right, #ffffff, #2b353b);
}

.band--slate .band-title { color: var(--white); }

.band--slate .band-title::after { background: linear-gradient(to right, #2b353b, #ffffff); }

@media (min-width: 1024px) {
  .band-title { margin-bottom: 48px; font-size: 2.25rem; }
}

/* Intro paragraph under a band heading */
.intro {
  margin: 0 auto 32px;
  text-align: center;
}

/* ----- Cards (spec 5.2) ----- */
.card {
  background: var(--white);
  color: var(--slate);
  border-radius: 12px;
  padding: var(--card-pad);
  box-shadow: var(--shadow);
}

.band--white .card { border: 1px solid var(--border); }
.band--slate .card { box-shadow: var(--shadow-dark); }

.card p:last-child { margin-bottom: 0; }

/* Font Awesome Free 6.7.2 icons (inline SVG). Decorative: the text beside each carries the meaning. */
.fa {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: var(--orange);
  fill: currentColor;
}

.fa--20 { width: 20px; height: 20px; margin: 0; }

.fa--inline {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  fill: currentColor;
}

/* Equal-height cards with the link pinned to the bottom (item 10, spec 5.3) */
.card-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* 1024-1279: Poppins needs up to 245px for the longest card link ("Databases and data pipelines");
   with the spec's 32px gap and padding only 230px is left, so the links would wrap (item 10).
   24px gap and padding give 256px. From 1280 the spec values leave 266px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .card-grid-3 { gap: 24px; }
  .card-grid-3 > .card { padding: 24px; }
}

.card--stack {
  display: flex;
  flex-direction: column;
}

.card--stack > .card-link:last-child { margin-top: auto; }

.card-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 48px;
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
}

/* A product whose demo isn't available yet: same place and size as a card link, plain muted text. */
.card-link--off {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

/* ----- Hero (white) ----- */
/* Title on its own top row in the s2mb.com hero banner gradient (black to navy, white text);
   the text and the diagram card share the row below. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.hero .hero-title {
  margin: 0;
  padding: 12px 20px;
  color: var(--white);
  background: #2e4d7b linear-gradient(to right, #000000, #2e4d7b);
  border-radius: 5px 8px;
}

@media (min-width: 1024px) {
  .hero .hero-title { grid-column: 1 / -1; padding: 16px 28px; }
}

.hero-text > :last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(min-content, 5fr);
    align-items: stretch;
    row-gap: 40px;
  }

  .hero-text p { font-size: 1.125rem; }
}

/* Hero diagram: Demo 4 (demo4-hero-diagram-spec.md, sections 2, 3, 8 to 11), unchanged except the
   1px border (the band is now white) and, from 1024px, the stretched panel with centred content.
   Demo 4 --text = --slate, --surface = --white, --accent (item icons) = --link. */
.hero-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: 20px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.hero-flow .flow-group { width: 100%; }

.hero-flow .flow-label {
  max-width: none;
  margin: 0 0 8px;
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.hero-flow ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-flow li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--slate);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.flow-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--link);
  fill: currentColor;
}

.flow-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-connector-in { color: var(--flow-arrow-in); }
.flow-connector-out { color: var(--flow-arrow-out); }

.flow-arrow {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transform: rotate(90deg);
}

.hero-flow .flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin: 0;
  color: var(--slate);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.flow-step-label { color: var(--flow-convert-text); }

.flow-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--flow-disc-border);
  border-radius: 50%;
  background: var(--flow-disc);
}

.flow-step-svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.flow-rotate-top { fill: var(--flow-rotate-top); }
.flow-rotate-bottom { fill: var(--flow-rotate-bottom); }

@media (min-width: 768px) {
  .hero-flow {
    grid-template-columns: minmax(min-content, 1fr) 20px auto 20px minmax(min-content, 1fr);
    column-gap: 8px;
    align-items: center;
    justify-items: stretch;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .hero-flow .flow-group { align-self: start; }
  .hero-flow ul { grid-template-columns: minmax(min-content, 1fr); }
  .hero-flow .flow-label { text-align: left; }
  .flow-arrow { transform: none; }
}

@media (min-width: 1024px) {
  /* Item 8: the panel stretches to the text block; the diagram row is centred inside it. */
  .hero-flow { max-width: none; align-content: center; }
}

/* ----- What We Do (slate) ----- */
.what {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.what-text > :last-child { margin-bottom: 0; }

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.steps h3 { color: var(--white); }
.steps p { margin-bottom: 0; }

.step-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white);
  background: var(--orange);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

/* White image panel: the illustration has dark lines drawn for a white page. */
.media-panel {
  padding: 16px;
  background: var(--white);
  border-radius: 12px;
}

.media-panel img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .steps li { flex-direction: column; }
  .what-figure { width: 100%; max-width: 560px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .what {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .what-text > p { font-size: 1.125rem; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .steps li { flex-direction: row; }

  /* Item 8: the panel takes the text block's height (the image adds no height of its own);
     the image is scaled to fit inside, keeping its aspect ratio, never above its native size. */
  .what-figure {
    position: relative;
    max-width: none;
    min-height: 160px;
    margin: 0;
    padding: 0;
  }

  .what-figure .media-fit {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .what-figure img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
  }
}

/* ----- Our Services (white) ----- */
.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

@media (min-width: 768px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .service-grid { gap: 32px; }
}

.service > p:not(.list-label) { margin-bottom: 0; }

.card .list-label {
  margin: 16px 0 6px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  padding: 2px 12px;
  color: var(--slate);
  background: var(--tag-bg);
  border-radius: 999px;
  font-size: 0.875rem;
}

.proof {
  margin: 0;
  padding-left: 20px;
}

.proof li + li { margin-top: 6px; }

/* ----- Who We Are (white): one left-aligned column, as in Mario's Word layout (2026-10-18) -----
   Icon (128px, no panel), intro, Our Goal, the founder, then the bold "Disclaimer:" label over the
   small print. Everything starts at the container's left edge, and the text runs the full container
   width before it wraps (Mario, round 5 item 14: no early line breaks). */
.about p { max-width: none; }

.founder-body { max-width: none; }

.who-icon {
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: 16px;
}

.about > p + h3 { margin-top: 32px; }

.founder { margin-top: 40px; }

.founder-name { margin-bottom: 16px; }

.disclaimer { margin-top: 32px; }

.disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.disclaimer .disclaimer-label strong {
  color: var(--slate);
  font-weight: 700;
}

@media (min-width: 768px) {
  .who-icon { width: 128px; }
}

@media (min-width: 1024px) {
  .about > p, .founder-body p { font-size: 1.125rem; }
}

/* ----- Our Audience (slate) ----- */
.signs { margin-top: 32px; }

.signs ul {
  margin: 0;
  padding-left: 20px;
}

.signs li + li { margin-top: 6px; }

@media (min-width: 1024px) {
  .signs ul { columns: 2; column-gap: 48px; }
  .signs li { break-inside: avoid; }
}

/* ----- Get In Touch (white) ----- */
.contact-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .contact-rows { flex-direction: row; justify-content: center; gap: 48px; }
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.contact-row > div { min-width: 0; }

.contact-row .fa { color: var(--orange); }

.contact-row .contact-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.contact-link {
  display: inline-block;
  padding: 12px 0;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ----- Footer (every page) ----- */
.site-footer {
  padding: 32px var(--inline-pad);
  border-top: 3px solid var(--slate);
  background: var(--white);
  color: var(--slate);
  font-size: 0.875rem;
  text-align: center;
}

.site-footer p {
  max-width: none;
  margin: 0 0 8px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  display: flex;
  align-items: center;
}

/* Separator: generated content with empty alternative text, so it is not read out. */
.footer-links li + li::before {
  content: "|";
  content: "|" / "";
  padding: 0 4px;
  color: var(--slate);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--link);
}

.footer-links a[aria-current="page"] { font-weight: 700; }

/* ----- Terms of Use and Privacy Notice (spec 6) ----- */
.legal {
  max-width: 72ch;
  margin: 0 auto;
}

.legal h1 { margin-bottom: 8px; }

.legal .effective {
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 0.875rem;
}

.legal h2 {
  margin: 32px 0 12px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

.legal li + li { margin-top: 8px; }

.legal p { max-width: none; }

.legal .back { margin: 40px 0 0; }

.legal .back a {
  display: inline-block;
  padding: 12px 0;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .legal h1 { font-size: 2.5rem; }
}

/* ----- Product demo pages (demos/*.html): the legal-page column with a status tag ----- */
.demo .status {
  display: inline-block;
  margin-bottom: 24px;
  padding: 2px 12px;
  color: var(--slate);
  background: var(--tag-bg);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.demo .live-link {
  display: inline-block;
  padding: 12px 0;
  font-weight: 600;
}

/* ----- Forced colours (Windows High Contrast), spec 8 and Demo 4 QA O-3 ----- */
@media (forced-colors: active) {
  .hero .hero-title { border: 1px solid CanvasText; }

  .card, .media-panel, .hero-flow { border: 1px solid CanvasText; }

  .flow-connector-in,
  .flow-connector-out,
  .flow-step-label,
  .flow-step-icon { color: CanvasText; }

  .flow-step-icon { border-color: CanvasText; background: Canvas; }

  .flow-rotate-top,
  .flow-rotate-bottom { fill: CanvasText; }

  .flow-icon { fill: CanvasText; }

  .step-number { border: 1px solid CanvasText; }
}