/* CERES product sheets — shared stylesheet (screen + print)
   Vlahi Systems LLC · www.vlahi.com
   One design system for the five sheets under /products/. Colours come from
   the CERES mark (red → orange → yellow plume on black) and the app's blue. */

:root {
  --paper: #ffffff;
  --panel: #f3f5f8;
  --ink: #141a22;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --rule: #d9dee6;
  --blue: #0f5cb0;
  --blue-ink: #0b4587;
  --blue-soft: #e8f0fb;
  --red: #e5473a;
  --orange: #f08a38;
  --yellow: #f9b915;
  --pro: #5e35b1;
  --pro-soft: #ede7f6;
  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Semi Condensed", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --sheet-w: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
p { margin: 0 0 .8em; max-width: 68ch; }
ul { margin: 0; padding-left: 1.1em; }
li { margin: 0 0 .35em; }
li::marker { color: var(--ink-3); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
h2 { font-family: var(--display); font-size: 27px; letter-spacing: -.005em; }
h3 { font-size: 17px; }
strong { font-weight: 600; }
small, .small { font-size: 13px; color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── The sheet ─────────────────────────────────────────────── */
.sheet {
  max-width: var(--sheet-w);
  margin: 24px auto 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(20, 26, 34, .05), 0 12px 32px rgba(20, 26, 34, .06);
}
.sheet > * { padding-left: 48px; padding-right: 48px; }

/* Masthead */
.masthead {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .01em; line-height: 1; }
.brand-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.2; margin-top: 3px; }
.mast-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.mast-nav a {
  padding: 6px 10px; border-radius: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.mast-nav a:hover { background: var(--blue-soft); color: var(--blue-ink); text-decoration: none; }
.mast-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
/* Page bar: sits directly under the masthead line, inside the page. The audience line is on the
   left and the print action at the top right, so it is clear that printing covers this sheet only. */
.page-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 16px; }
.page-bar .kicker { margin: 0; }
.page-print {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 500; padding: 6px 12px 6px 10px;
}
.page-print:hover { border-color: var(--ink-2); background: var(--panel); }
.page-print svg { flex: none; }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 40px; align-items: center;
  padding-top: 22px; padding-bottom: 36px;
}
.kicker { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 12px; }
.hero h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.02; letter-spacing: -.012em; margin-bottom: 18px; max-width: 16ch;
}
.lead { font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 46ch; margin-bottom: 20px; }
.proofs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.proofs li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.proofs li::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--orange) 55%, var(--yellow));
}
.hero-figure { margin: 0; }
.hero-figure img { border: 1px solid var(--rule); border-radius: 6px; }
.hero-figure figcaption, .figures figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* Plume diagram */
.plume { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.plume text { font-family: var(--font); }

/* Section headings */
.section { padding-top: 34px; padding-bottom: 8px; }
.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 70ch; }

/* Flow: the lifecycle columns */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--rule); }
.step { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.step h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.step-n {
  font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--blue);
  width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  position: relative; top: -1px;
}
.step p { font-size: 14.5px; color: var(--ink-2); max-width: none; margin: 0; }
.step p b { color: var(--ink); font-weight: 600; }
/* Moments (hazmat and facilities sheets): the responder's situation first, CERES second */
.moments .step p.you { color: var(--ink); font-weight: 500; }
.moments .step p.us { margin-top: 8px; }
.moments .step p.us::before { content: "CERES"; display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 3px; background: var(--blue-soft); color: var(--blue-ink); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .06em; vertical-align: 1px; }

/* Dedication (overview, hazmat and facilities sheets) */
.dedication { padding-top: 30px; }
.dedication h2 { margin-bottom: 12px; }
.dedication p { font-size: 17px; line-height: 1.5; max-width: 64ch; }
.dedication .sign { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); margin-top: 14px; }

/* Spec sheet */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 2px solid var(--ink); margin: 0; }
.spec > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--blue-ink); line-height: 1.3; padding-top: 1px; }
.spec dd { margin: 0; font-size: 14.2px; line-height: 1.45; color: var(--ink); }
.spec dd b { font-weight: 600; }
.spec dd .muted { color: var(--ink-3); }

/* Badges and tags */
.pro, .free, .pkg {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  padding: 3px 6px; border-radius: 3px; vertical-align: 2px; white-space: nowrap;
}
.pro { background: var(--pro-soft); color: var(--pro); }
.free { background: #e6f4ea; color: #1e6b2e; }
.pkg { background: var(--blue-soft); color: var(--blue-ink); }
.tag { display: inline; font-size: 12.5px; color: var(--ink-3); }

/* Figures strip */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 8px; padding-bottom: 8px; }
.figures figure { margin: 0; }
.figures img { border: 1px solid var(--rule); border-radius: 6px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.figures.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures.two img { aspect-ratio: 16 / 10; }

/* Wide figure */
.figure-wide { margin: 0; }
.figure-wide img { width: 100%; border: 1px solid var(--rule); border-radius: 6px; }
.figure-wide figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; max-width: 90ch; }

/* Model tables (hazard-models sheet) */
.mtable { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.mtable th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-2); padding: 6px 10px 6px 0; border-bottom: 2px solid var(--ink); }
.mtable td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.4; }
.mtable td:first-child { font-weight: 600; width: 22%; }
.mtable td:nth-child(3) { color: var(--ink-2); width: 24%; }
.mtable td:last-child { width: 11%; white-space: nowrap; }
.mtable tr:last-child td { border-bottom: 0; }

/* Tools catalog */
.group { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 32px; }
.group-head h2 { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: 0; }
.group-head p { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 0; }
.group-head .count { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.group-head .group-shot { margin-top: 12px; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--rule); border-radius: 6px; }
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.tools li { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.4; break-inside: avoid; }
.tools b { display: block; font-weight: 600; }
.tools span { color: var(--ink-2); }
.tools .tag { display: block; margin-top: 2px; }
.tools .pro, .tools .pkg { margin-left: 6px; }

/* Sheet picker (index) */
.picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 2px solid var(--ink); }
.pick { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.pick h3 { font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.pick h3 a { color: var(--ink); }
.pick h3 a:hover { color: var(--blue); text-decoration: none; }
.pick .who { font-size: 13.5px; color: var(--blue-ink); font-weight: 600; margin-bottom: 8px; }
.pick p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 8px; max-width: none; }
.pick a.more { font-size: 14px; font-weight: 600; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.plan { padding: 16px 16px 18px 0; border-right: 1px solid var(--rule); }
.plan:last-child { border-right: 0; }
.plan + .plan { padding-left: 16px; }
.plan h3 { font-family: var(--display); font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.plan .for { font-size: 12.5px; color: var(--blue-ink); font-weight: 600; margin-bottom: 6px; }
.plan p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: none; }
.packages { font-size: 14px; color: var(--ink-2); padding-top: 12px; }
.packages b { color: var(--ink); }

/* Callout */
.note { background: var(--blue-soft); border-left: 4px solid var(--blue); padding: 12px 16px; font-size: 14px; color: var(--ink); border-radius: 0 4px 4px 0; max-width: none; }
.note p { max-width: none; margin: 0; }

/* Footer */
.foot {
  margin-top: 28px; padding-top: 18px; padding-bottom: 22px; border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; color: var(--ink-2);
}
.foot .cta { font-size: 16px; color: var(--ink); font-weight: 500; }
.foot .cta a { font-weight: 600; }
.foot p { max-width: none; margin: 0 0 6px; }
.foot .legal { font-size: 12px; line-height: 1.45; }
.foot .lockup { width: 120px; height: auto; margin: 4px 0 8px; }

/* Grid children must be allowed to shrink below their content (images) */
.hero > *, .spec > *, .figures > *, .group > *, .picker > *, .plans > *, .foot > *, .tools > *, .flow > * { min-width: 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media screen and (max-width: 960px) {
  .sheet > * { padding-left: 28px; padding-right: 28px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero h1 { max-width: none; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .figures, .figures.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; }
  .group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media screen and (max-width: 640px) {
  body { font-size: 15px; }
  .sheet { margin: 0; border: 0; box-shadow: none; }
  .sheet > * { padding-left: 16px; padding-right: 16px; }
  .masthead { gap: 12px; }
  .mast-nav { margin-left: 0; width: 100%; }
  .hero { padding-top: 16px; }
  .lead { font-size: 16.5px; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .figures, .figures.two { grid-template-columns: minmax(0, 1fr); }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .picker { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .mtable td:nth-child(3) { display: none; }
  .mtable th:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Print: Letter / A4, the sheet is the page ─────────────── */
@media print {
  @page { size: Letter; margin: 11mm 12mm 12mm; }
  html, body { background: #fff; }
  body { font-size: 10.2pt; line-height: 1.38; color: #000; }
  .sheet { max-width: none; margin: 0; border: 0; box-shadow: none; }
  .sheet > * { padding-left: 0; padding-right: 0; }
  .mast-nav, .page-print, .no-print { display: none !important; }
  .page-bar { padding-top: 8pt; }
  .masthead { padding-top: 0; padding-bottom: 8pt; }
  .brand img { width: 28pt; height: 28pt; }
  .brand-name { font-size: 18pt; }
  .hero { padding-top: 14pt; padding-bottom: 10pt; gap: 18pt; grid-template-columns: 11fr 9fr; }
  .hero h1 { font-size: 26pt; margin-bottom: 8pt; }
  .lead { font-size: 11.5pt; margin-bottom: 8pt; }
  .proofs { gap: 3pt; }
  .kicker { margin-bottom: 4pt; font-size: 9.5pt; }
  .section { padding-top: 12pt; padding-bottom: 0; }
  .section-head { margin-bottom: 8pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 11pt; }
  .step { padding: 8pt 0 9pt; }
  .step p { font-size: 9.2pt; }
  .flow { gap: 0 16pt; }
  .spec > div { padding: 5pt 0; grid-template-columns: 96pt 1fr; }
  .spec dt { font-size: 9.6pt; }
  .spec dd { font-size: 9.1pt; line-height: 1.32; }
  .spec { gap: 0 20pt; }
  .figures { gap: 12pt; }
  .figures figcaption, .hero-figure figcaption { font-size: 8.4pt; margin-top: 4pt; }
  .mtable { font-size: 9pt; }
  .mtable td { padding: 4pt 6pt 4pt 0; }
  .group { padding: 8pt 0; grid-template-columns: 120pt 1fr; gap: 8pt 16pt; }
  .tools { gap: 2pt 16pt; }
  .tools li { font-size: 9pt; padding: 3pt 0; }
  .group-head h2 { font-size: 13pt; }
  .plans { grid-template-columns: repeat(4, 1fr); }
  .plan { padding: 8pt 8pt 8pt 0; }
  .plan h3 { font-size: 12pt; }
  .plan p, .plan .for { font-size: 8.8pt; }
  .foot { margin-top: 12pt; padding-top: 8pt; padding-bottom: 0; font-size: 8.6pt; }
  .foot .cta { font-size: 10.5pt; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14pt; }
  .spec { grid-template-columns: 1fr 1fr; gap: 0 16pt; }
  .spec > div { grid-template-columns: 76pt 1fr; padding: 3.5pt 0; gap: 0 8pt; }
  .spec dt { font-size: 8.8pt; }
  .spec dd { font-size: 8.4pt; line-height: 1.3; }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10pt; }
  .figures img { aspect-ratio: 16 / 10; }
  .figures.two { grid-template-columns: 1fr 1fr; }
  .picker { grid-template-columns: 1fr 1fr; gap: 0 20pt; }
  .pick { padding: 7pt 0; }
  .pick h3 { font-size: 13pt; }
  .pick p, .pick .who, .pick a.more { font-size: 9pt; }
  .group { grid-template-columns: 105pt 1fr; }
  .group-head .group-shot { display: none !important; }
  .group { padding: 5pt 0; }
  .tools li { padding: 2pt 0; }
  .tools { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .screen-only { display: none !important; }
  .hero { padding-top: 4pt; padding-bottom: 6pt; gap: 16pt; grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 22pt; margin-bottom: 6pt; line-height: 1.04; }
  .lead { font-size: 10.2pt; line-height: 1.35; margin-bottom: 6pt; }
  .proofs li { font-size: 9.4pt; line-height: 1.3; }
  .proofs li::before { width: 7pt; height: 7pt; margin-top: 4pt; }
  .section { padding-top: 9pt; }
  .section-head { margin-bottom: 5pt; }
  .section-head p { font-size: 9pt; }
  .step { padding: 6pt 0 7pt; }
  .step h3 { margin-bottom: 4pt; font-size: 10.5pt; }
  .step-n { width: 13pt; height: 13pt; font-size: 9pt; border-radius: 2pt; }
  .step p { font-size: 8.5pt; line-height: 1.32; }
  .moments .step p { font-size: 8.1pt; line-height: 1.28; }
  .moments .step { padding: 5pt 0 6pt; }
  .moments .step h3 { margin-bottom: 3pt; }
  .moments .step p.us { margin-top: 3pt; }
  .moments .step p.us::before { font-size: 7pt; padding: 0 3pt; margin-right: 4pt; }
  .dedication { padding-top: 6pt; break-inside: avoid; }
  .dedication p { font-size: 9.6pt; line-height: 1.35; }
  .dedication .sign { font-size: 10.5pt; margin-top: 4pt; }
  .moments .step p.us::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .spec > div { padding: 3pt 0; }
  .spec dt { font-size: 8.6pt; }
  .spec dd { font-size: 8.2pt; line-height: 1.28; }
  .plans { margin-top: 2pt; }
  .plan { padding: 6pt 6pt 6pt 0; }
  .plan h3 { font-size: 11pt; }
  .plan p, .plan .for { font-size: 8.4pt; line-height: 1.3; }
  .packages { font-size: 8.6pt; padding-top: 6pt; }
  .foot { margin-top: 10pt; padding-top: 6pt; }
  section:has(.plans), section:has(.note) { break-inside: avoid; }
  .spec > div { padding: 2.5pt 0; }
  .spec dt { font-size: 8.4pt; }
  .spec dd { font-size: 8pt; line-height: 1.27; }
  .plan { padding: 5pt 6pt 5pt 0; }
  .plan h3 { font-size: 10.5pt; }
  .plan p, .plan .for { font-size: 8pt; line-height: 1.28; }
  .foot { margin-top: 8pt; padding-top: 5pt; gap: 12pt; }
  .foot .cta { font-size: 9.5pt; }
  .foot .legal { font-size: 7.6pt; line-height: 1.3; }
  .foot p { margin-bottom: 3pt; }
  .spec > div { padding: 2pt 0; }
  .spec dt { font-size: 8.2pt; }
  .spec dd { font-size: 7.8pt; line-height: 1.25; }
  .plan p, .plan .for { font-size: 7.8pt; }
  .foot .legal { font-size: 7.2pt; }
  .foot .lockup { width: 60pt; margin: 2pt 0 4pt; }
  section:has(.mtable):not(.long) { break-inside: avoid; }
  .mtable { font-size: 8.6pt; }
  .mtable td { padding: 3pt 6pt 3pt 0; }
  .figure-wide figcaption { font-size: 8pt; margin-top: 3pt; }
  .figure-wide { break-inside: avoid; }
  .foot { break-inside: avoid; }
  .foot .co { display: none; }
  .foot .lockup { width: 36pt; margin: 2pt 0 0; }
  .page-break { break-before: page; }
  .step, .spec > div, figure, .tools li, .plan, .pick, tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { color: inherit; }
  .mast-nav a, .hero h1, .brand-name { color: #000; }
  .step-n, .pro, .free, .pkg, .note, .plume, .proofs li::before, .spec dt, .kicker, .pick .who, .plan .for {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}