/*
 * Halyard — public site.
 *
 * The palette is NOT a choice made here. It comes from `halyard_brandidentity.md`
 * §7.4 in halyard-core and is mirrored in `frontend/src/index.css`. Change it
 * there first. Kova shares most of it, so a value changed in one product alone
 * breaks the family resemblance (§7.7).
 *
 * The TYPE system is new, 2026-09-16, and is the thing this file exists to
 * prove before it reaches the product. Three roles, no exceptions:
 *
 *   IBM Plex Sans      prose and display — anything somebody reads as a sentence
 *   Inconsolata        metadata — eyebrows, labels, figures, identifiers
 *   Barlow Condensed   the wordmark, and nothing else (§7.2)
 *
 * The mono was doing every job, which is what made Halyard read as a terminal
 * rather than as a product. It keeps the job it is good at. Running prose in a
 * monospace costs roughly 10-20% reading speed, and the sentences that matter
 * here are read under stress.
 *
 * Aegis Vopak's site is the reference for the discipline: a tiny number of
 * values applied by role with no exceptions. Its ground is #f1f0eb — three
 * points off Halyard's parchment, arrived at independently.
 */

/* ── palette ─────────────────────────────────────────────────────────────── */

:root {
  --palette-parchment: #f4f0e8;
  --palette-navy: #1c3f63;
  --palette-stone: #d4c9a8;
  --palette-earth: #8b6040;

  --bg: var(--palette-parchment);
  --card: #faf8f2;
  --rule: #d4ccb4;
  --text: #202834;
  --dim: #556678;          /* 5.1:1 on parchment */
  --link-hover: #2f5d7c;
  --focus-ring: #1c3f63;

  /* ── space ──
     4px base, which is what five of the seven reference sites use. Marketing
     draws from the top of the ladder, the product from the bottom, so the two
     share one vocabulary without ever competing for the same value. */
  --s-1: 4px;   --s-5: 24px;  --s-9:  64px;   --s-13: 160px;
  --s-2: 8px;   --s-6: 32px;  --s-10: 80px;   --s-14: 200px;
  --s-3: 12px;  --s-7: 40px;  --s-11: 96px;
  --s-4: 16px;  --s-8: 48px;  --s-12: 128px;

  /* ── measure ──
     A ladder, not one value. No site in the reference set uses a single
     measure for everything, and the widest measure any of them uses is 65ch.
     The product currently ships 72ch for all prose, which is wider than
     anything measured. */
  --measure-display: 20ch;
  --measure-lead: 44ch;
  --measure-prose: 62ch;

  /* A hairline that scales with the design but never falls below a physical
     pixel. Lifted from Heron, which is the only site in the set that guards
     this. */
  --hairline: max(1px, 0.0625rem);
}

/* Committed to one look: parchment and navy is a printed nautical chart, and a
   dark inversion is a different brand. Declared so a dark-mode browser does not
   repaint the ground underneath. */
:root { color-scheme: light; }

/* ── faces ───────────────────────────────────────────────────────────────── */
/*
 * All three served from this origin, never Google Fonts. The product refuses a
 * CDN because an appliance may have no internet; a public site has the better
 * reason — not handing every visitor's address to a third party on the way to
 * reading a privacy policy. Each file sits beside its OFL-1.1 licence in
 * /fonts, unmodified, which is the condition those licences ship under.
 *
 * IBM Plex Sans carries the Reserved Font Name "Plex": the file must not be
 * altered and redistributed under that name. It is served byte-for-byte as
 * IBM published it.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSansVar-Roman.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/Inconsolata-VF.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
 * Root stays 16px. Three of the seven reference sites scale the whole design
 * off a vw root, which breaks browser zoom and ignores a reader who has set
 * their own font size. Not a trade this product makes.
 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;   /* never fake a weight the file does not carry */
}

/*
 * Focus, spelled out because five of the seven reference sites fail
 * keyboard-only use — including both that read as "professional". One of them
 * authored `outline: 3px #fefbf6` with no `solid`, so outline-style falls back
 * to none and the rule paints nothing at all. The word `solid` is the whole
 * difference.
 */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── layout ──────────────────────────────────────────────────────────────── */

/* One measure shared by the band and everything under it, so the two never
   disagree as the screen widens. Side padding lives here and nowhere else. */
.sheet {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--s-7);
}

@media (max-width: 47.9375rem) {
  .sheet { padding-inline: var(--s-5); }
}

main { flex: 1; }

/* Sections are separated by a hairline and space, never by a card. Six of the
   seven reference sites use no cards at all; the densest of them separates a
   comparison table with 1px rules and whitespace. */
.section {
  padding-block: var(--s-11);
  border-top: var(--hairline) solid var(--rule);
}

.section:first-of-type { border-top: 0; }

@media (max-width: 47.9375rem) {
  .section { padding-block: var(--s-7); }
}

/* ── the wordmark band ───────────────────────────────────────────────────── */

.band {
  background: var(--palette-navy);
  padding-block: var(--s-5);
}

/* Barlow Condensed appears ONLY here — §7.2 is explicit that it must never
   reach body text, labels or buttons. Warm stone on navy measures 6.5:1. */
.wordmark {
  font-family: "Barlow Condensed", "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--palette-stone);
  font-size: 2rem;
  line-height: 1;
  display: inline-block;
}

/* ── type scale ──────────────────────────────────────────────────────────── */
/*
 * 68 / 40 / 28 / 20 / 18 / 16 / 13, root 16px.
 *
 * Tracking is negative at and above 20px and exactly zero below it. That lower
 * clamp is deliberate: at 12-14px negative tracking closes the gaps that
 * separate rn from m, 1 from l and 0 from O — the confusions a room number or
 * an extension must never make. One reference site tracks -0.02em all the way
 * down to 8px; that is the one thing in the set worth refusing outright.
 *
 * Weight does no hierarchy work above 500. The most disciplined site measured
 * ships two font files and sets its 68px hero at weight 400. Thin display
 * weights are also refused: 300 on parchment drops *perceived* contrast while
 * the measured ratio is unchanged, and the product's contrast is WCAG-verified
 * at specific values.
 */

.hero-title {
  margin: 0;
  font-size: 4.25rem;      /* 68px */
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;       /* permitted here: one line, never wraps to a paragraph */
  max-width: var(--measure-display);
  color: var(--palette-navy);
  text-wrap: balance;
}

h2 {
  margin: 0 0 var(--s-5);
  font-size: 1.75rem;      /* 28px */
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--palette-navy);
}

h3 {
  margin: 0 0 var(--s-2);
  font-size: 1.25rem;      /* 20px */
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--palette-navy);
}

.lede {
  margin: var(--s-6) 0 0;
  font-size: 1.125rem;     /* 18px */
  line-height: 1.55;
  max-width: var(--measure-lead);
}

p { max-width: var(--measure-prose); }

/*
 * The mono's whole job on this page: eyebrows, labels, figures, identifiers.
 * Never a sentence. This is Aegis's discipline, which reserves its mono for
 * chips, timestamps, spec labels and the copyright line and puts it nowhere
 * else.
 *
 * +0.04em because uppercase at 13px needs opening, and tabular figures because
 * the declaration is free and holds the line if a number ever lands in a
 * column.
 */
.label {
  font-family: "Inconsolata", Consolas, "Courier New", monospace;
  font-size: 0.8125rem;    /* 13px */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--palette-earth);   /* 4.8:1 on parchment */
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-4);
}

.micro {
  font-family: "Inconsolata", Consolas, "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ── hero ────────────────────────────────────────────────────────────────── */

/*
 * The same top space as the other two pages' heads (s-11), not s-13. At s-13
 * the title began 290px down and the figure beside it ended below the fold on
 * a 1440 x 900 screen; the hero's height now comes from its content, which is
 * the copy and the figure side by side, not from air above it.
 */
.hero { padding-block: var(--s-11); }

/*
 * Two columns from 1200px: the copy on the left, the figure on the right, both
 * starting at the top so the page's eyebrow and the drawing's eyebrows share a
 * baseline. Equal columns rather than a wider figure column, because the copy
 * column has to be at least 528px for "Mass notification" to stay on one line
 * at 68px, and the drawing is legible at 0.9x. Below 1200px the copy and the
 * figure stack, with the figure a left-aligned block under the contact line.
 */
@media (min-width: 75rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-9);
    align-items: start;
  }
}

@media (max-width: 47.9375rem) {
  /* ~3x compression, which is what the reference sites do between desktop and
     phone. Not a clamp: four of the seven use clamp() for spacing zero times
     and swap the value at the breakpoint instead. */
  .hero { padding-block: var(--s-9) var(--s-7); }
  .hero-title { font-size: 2.5rem; letter-spacing: -0.02em; }
  h2 { font-size: 1.5rem; }
}

/* ── what it is ──────────────────────────────────────────────────────────── */

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 63.9375rem) {
  .points { grid-template-columns: 1fr; gap: var(--s-7); max-width: var(--measure-prose); }
}

.points p { margin: 0; color: var(--dim); }

/* ── links ───────────────────────────────────────────────────────────────── */
/*
 * Hover changes colour, never geometry. That is the single most portable rule
 * in the reference study: the industrial sites hover with colour and opacity
 * and the consumer ones hover with scale, lift and tilt. One of the credible
 * sites has exactly one transform in its entire sheet, on buttons.
 */
a {
  color: var(--palette-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms cubic-bezier(.33, 1, .68, 1);
}

a:hover { color: var(--link-hover); }

.contact-link {
  font-size: 1.125rem;
  display: inline-block;
  margin-top: var(--s-5);
}

/* ── footer ──────────────────────────────────────────────────────────────── */

footer {
  border-top: var(--hairline) solid var(--rule);
  padding-block: var(--s-6) var(--s-9);
}

footer p { margin: 0 0 var(--s-1); max-width: none; }

.legal { color: var(--text); }

.sep { padding-inline: var(--s-2); color: var(--rule); }

.gloss { font-style: italic; }

@media (max-width: 30rem) {
  .sep { display: none; }
  .legal { display: block; }
}

/* ── accessibility ───────────────────────────────────────────────────────── */
/*
 * Two blocks lifted from the one reference site that ships them. It was also
 * the lightest page of the seven and the most credible — the two facts are not
 * unrelated.
 *
 * The reduced-motion switch is global rather than per-rule, so it cannot be
 * outgrown by a transition somebody adds later. Two of the seven sites appear
 * to honour reduced motion in their markup and do not: their platform's check
 * is passed a `false` argument and short-circuits, so it never runs.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Nobody else in the reference set has this. For a product whose owner is
 * partly colour blind, and which is sold on being readable under stress, it is
 * a house requirement rather than a nicety.
 */
@media (prefers-contrast: more) {
  :root {
    --text: #000;
    --dim: #2b3340;
    --rule: #6b6450;
    --palette-earth: #6d4527;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Multi-page chrome — added 2026-09-16 when the site became a pitch rather
   than a placeholder.

   Everything below obeys the same three rules the type system does: hairlines
   and space instead of cards, hover changes colour and never geometry, and no
   weight below 400.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── navigation ──────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-7);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  font-size: 0.9375rem;
}

.nav-links a {
  color: var(--palette-stone);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: var(--hairline) solid transparent;
}

/* Colour and a rule, never a transform. The rule is what makes the current
   page legible without relying on the colour shift alone — R7's rule applies
   to navigation as much as to a speaker's status dot. */
.nav-links a:hover { color: #fff; border-bottom-color: var(--palette-stone); }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--palette-stone); }

.band .nav-links a:focus-visible { outline-color: var(--palette-stone); }

/* ── page headers ────────────────────────────────────────────────────────── */

.page-head { padding-block: var(--s-11) var(--s-9); }

.page-title {
  margin: 0;
  font-size: 2.5rem;         /* 40px */
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--palette-navy);
  max-width: var(--measure-display);
  text-wrap: balance;
}

@media (max-width: 47.9375rem) {
  .page-head { padding-block: var(--s-8) var(--s-7); }
  .page-title { font-size: 1.875rem; }
}

/* ── hairline rows: the card replacement ─────────────────────────────────── */
/*
 * Six of the seven reference sites use no cards at all; the densest of them
 * separates a full comparison table with 1px rules and whitespace. On
 * parchment a warm-stone hairline reads as ruled paper, and unlike a card it
 * costs no vertical space and no corner pixels.
 */
.rows { border-top: var(--hairline) solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--s-4) var(--s-8);
  padding-block: var(--s-6);
  border-bottom: var(--hairline) solid var(--rule);
  align-items: start;
}

.row > :last-child { max-width: var(--measure-prose); }
.row p { margin: 0; }
.row p + p { margin-top: var(--s-3); }

@media (max-width: 47.9375rem) {
  .row { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); }
}

.row h3 { margin: 0; }

/* ── the state marker ────────────────────────────────────────────────────── */
/*
 * Built and Not built are told apart by the WORD and by the glyph, never by
 * colour. The house rule, and the one the product's own On Air screen breaks
 * (item 50): a state distinguished only by hue is a state Brian cannot read.
 */
.state {
  font-family: "Inconsolata", Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
}

.state::before { content: "○ "; }
.state[data-built="yes"]::before { content: "● "; }
.state[data-built="yes"] { color: var(--palette-navy); }

/* ── figures ─────────────────────────────────────────────────────────────── */
/*
 * Oversized numerals do a lot of work for very little structure — five of the
 * seven reference sites use them. Tabular figures because a column of numbers
 * that does not align reads as carelessness.
 */
.figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

@media (max-width: 47.9375rem) {
  .figures { grid-template-columns: 1fr; gap: var(--s-6); }
}

.figure {
  display: block;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--palette-navy);
  font-variant-numeric: tabular-nums;
}

.figures p { margin: var(--s-2) 0 0; color: var(--dim); max-width: 34ch; }

/* ── a quiet aside ───────────────────────────────────────────────────────── */

.aside {
  border-left: 3px solid var(--palette-stone);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  margin: var(--s-6) 0 0;
}

.aside p { margin: 0; }

/* ── footer navigation ───────────────────────────────────────────────────── */

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: 0 0 var(--s-5);
  font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Diagrams — inline SVG, 2026-09-16.

   Inline rather than <img> for three reasons: the CSP permits no external
   anything, an inline SVG inherits the page's own palette tokens so it cannot
   drift from the design, and it stays crisp at any width without a second file.

   The house rule applies here too and is easy to lose in a drawing: **no
   meaning carried by colour alone.** The two paths differ by stroke pattern —
   solid against dashed — and by a written label, so the diagram survives being
   read by somebody who cannot tell navy from grey, or printed in black.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * TWO DRAWINGS, not one drawing scaled.
 *
 * The first attempt shrank a 920-unit landscape viewBox to fit a phone, which
 * rendered its 15px labels at 4.4px — unreadable while still costing the space.
 * The second attempt put that same drawing in a horizontal scroll box, which
 * was worse: the visible portion on a 390px screen was the Halyard block and
 * two connectors running off into blank parchment with arrowheads pointing at
 * nothing, and no affordance saying it scrolled. It read as broken.
 *
 * The third attempt kept the landscape drawing for desktops, at the full width
 * of the sheet under the copy. That put it at 1200 x 650 on a 1440 screen and
 * its top edge at the fold at every common screen height — the visitor saw a
 * title, an empty right half, and the tops of three boxes. So the desktop
 * drawing is now a COLUMN, 580 x 424, that sits beside the copy.
 *
 * A column diagram and a tall diagram are different drawings. So there are
 * two, and exactly one is in the accessibility tree at any width — the hidden
 * one is `display: none`, not merely off-screen, so a screen reader is never
 * handed the same figure twice.
 */
.hero-figure { margin: var(--s-9) 0 0; }

@media (min-width: 75rem) {
  .hero-figure { margin: 0; }
}

.diagram {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/*
 * The column drawing is 580 units wide and drawn for 13px notes, so it holds
 * up from about 0.9x. Stacked under the copy it is capped so a tablet does not
 * scale it up into a poster; beside the copy the column governs its width.
 * The portrait drawing takes over at 640px, where the capped column drawing
 * would fall to 0.9x with the phone gutters — at 390px it would be 0.6x.
 */
.diagram-wide { display: block; max-width: 640px; }
.diagram-tall { display: none; max-width: 440px; }   /* 1.1x; uncapped it hit 1.5x at 640px */

@media (max-width: 40rem) {
  .diagram-wide { display: none; }
  .diagram-tall { display: block; }
}

.dg-fill-navy { fill: var(--palette-navy); }
.dg-fill-card { fill: var(--card); }

.dg-box { fill: var(--card); stroke: var(--rule); stroke-width: 1; }

/* The speaker path: solid, navy, and thicker. It is the load-bearing one. */
.dg-path-local {
  fill: none;
  stroke: var(--palette-navy);
  stroke-width: 2;
}

/* The person path: dashed and dimmer. Dashed is the part that carries the
   meaning — a reader who sees no colour still sees a different kind of line. */
.dg-path-cloud {
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}

.dg-title { fill: var(--palette-stone); font-size: 19px; font-weight: 500; }
.dg-sub { fill: var(--palette-stone); font-size: 13px; opacity: 0.85; }
.dg-name { fill: var(--text); font-size: 15px; font-weight: 500; }
.dg-note { fill: var(--dim); font-size: 13px; }

.dg-label {
  fill: var(--palette-earth);
  font-family: "Inconsolata", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.dg-speaker { fill: var(--palette-navy); }
.dg-speaker-dim { fill: var(--dim); }

/* A caption carries the same information in prose, because a diagram is not an
   accessible substitute for the sentence it illustrates. */
.diagram-caption {
  margin: var(--s-4) 0 0;
  max-width: var(--measure-prose);
}

@media (prefers-contrast: more) {
  .dg-box { stroke: var(--text); }
  .dg-path-cloud { stroke: var(--text); }
}

/* ── the band on a phone ─────────────────────────────────────────────────── */
/*
 * At 390px the four links wrapped three-and-one: "Contact" alone on a second
 * row with a dead gap beside it, and a navy band nearly 200px tall before any
 * content. The fix is not to wrap more gracefully but to make all four fit on
 * one row, which at this width means smaller type and a tighter gap.
 *
 * Measured rather than guessed: 390px less two 24px gutters leaves 342px. The
 * four labels are 39 characters, which in Plex Sans at 13px is about 254px,
 * plus three 16px gaps is 302px. It fits at 320px too, with the wordmark
 * carrying the height instead.
 */
@media (max-width: 47.9375rem) {
  .band { padding-block: var(--s-4) var(--s-3); }

  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }

  .wordmark { font-size: 1.5rem; }

  .nav-links {
    gap: var(--s-4);
    font-size: 0.8125rem;
    width: 100%;
  }
}

/* Below ~360px even that is tight, so the gap closes further rather than
   letting a single link fall to a second row. */
@media (max-width: 22.5rem) {
  .nav-links { gap: var(--s-3); font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The texting consent form (texting-consent.html, 2026-10-23). A printable
   sheet inside the page: one bordered box, the disclosure the carriers
   require, and four lines to write on. Borders use the text colour so the
   form prints in black exactly as it reads on screen.
   ═══════════════════════════════════════════════════════════════════════════ */
.form { border: 1px solid currentColor; padding: 1.25rem 1.5rem; margin-top: 1rem; }
.form-title { font-weight: 600; margin: 0 0 1rem; }
.form-title span { font-weight: 400; display: block; margin-top: .25rem; }
.form .fill { display: inline-block; min-width: 14rem; border-bottom: 1px solid currentColor; }
.sign-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1.75rem; }
.sign-line { border-bottom: 1px solid currentColor; min-height: 2.6rem; display: flex; align-items: flex-end; padding-bottom: .3rem; font-size: .85rem; }
@media (max-width: 30rem) { .sign-lines { grid-template-columns: 1fr; } .form .fill { min-width: 10rem; } }
@media print { header.band, footer.band { display: none; } .form { break-inside: avoid; } }