/* A4 documents. 794x1123 at 96dpi, which is what jsPDF expects. */
:root { --page-w: 794px; --page-h: 1123px; }
.page-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; width: 100%; max-width: 1500px; }
.page-wrap { width: 397px; height: 561px; position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: #fff; flex: 0 0 auto; }
.page-wrap.size-md { width: 496px; height: 702px; }
.page-wrap.size-lg { width: 595px; height: 842px; }
.page { width: var(--page-w); height: var(--page-h); transform-origin: 0 0; transform: scale(0.5); position: relative; overflow: hidden; }
.page-wrap.size-md .page { transform: scale(0.625); }
.page-wrap.size-lg .page { transform: scale(0.75); }

/* An A4 page is read at arm's length, not scrolled past in a feed, so the
   scale drops back to near the design system's own web sizes. */
.page .s { padding: 56px; }
.page .display { font-size: 52px; }
.page .h1 { font-size: 38px; }
.page .h2 { font-size: 28px; }
.page .h3 { font-size: 20px; }
.page .lede { font-size: 17px; max-width: 46ch; }
.page .body-c { font-size: 14px; line-height: 1.6; max-width: 62ch; }
.page .small-c { font-size: 12px; }
.page .kicker { font-size: 11px; gap: 8px; }
.page .wm { font-size: 26px; }
.page .lockup { font-size: 12px; gap: 7px; }
.page .lockup .sep { width: 5px; height: 5px; }
.page .ch { margin-bottom: 26px; }
.page .slide-tag { gap: 6px; }
.page .slide-tag .n { width: 22px; height: 22px; font-size: 11px; }
.page .slide-tag .lbl { height: 22px; padding: 0 11px; font-size: 11px; }
.page .card { padding: 20px; border-radius: var(--r-md); }
.page .card--lg { padding: 24px; border-radius: var(--r-lg); }
.page .card .ct { font-size: 17px; } .page .card .cb { font-size: 13px; margin-top: 7px; } .page .card .ck { font-size: 10px; }
.page .pill { font-size: 13px; padding: 10px 18px; }
.page .chip { font-size: 13px; padding: 8px 14px; gap: 7px; } .page .chip .cdot { width: 6px; height: 6px; }
.page .spec-row { padding: 12px 0; } .page .spec-row .k { font-size: 10px; } .page .spec-row .v { font-size: 15px; }
.page .metric-row { padding: 13px 0; } .page .metric-row .k { font-size: 13px; } .page .metric-row .v { font-size: 22px; }
.page .num-row { padding: 13px 0; gap: 15px; }
.page .num-row .n { width: 29px; height: 29px; font-size: 12px; }
.page .num-row .t { font-size: 17px; } .page .num-row .b { font-size: 13px; margin-top: 5px; max-width: 58ch; }
.page .tick-list, .page .bul-list { gap: 12px; }
.page .tick-row, .page .bul-row { font-size: 14px; gap: 11px; }
.page .tick-row::before { width: 19px; height: 19px; margin-top: 1px; -webkit-mask-size: 13px; mask-size: 13px; }
.page .bul-row::before { width: 6px; height: 6px; margin-top: 8px; }
.page .tl-row { padding: 13px 0; gap: 18px; }
.page .tl-row .day { font-size: 10px; min-width: 96px; padding-top: 3px; }
.page .tl-row .t { font-size: 16px; } .page .tl-row .b { font-size: 12.5px; margin-top: 4px; max-width: 54ch; }
.page .q-row { padding: 13px 0; gap: 6px; }
/* A question with nothing under it is a field. These sheets get printed and
   filled in by hand, so the row opens up to the height of a written answer. */
.page .q-row.blank { padding-bottom: 46px; }
.page .q-row .q { font-size: 17px; } .page .q-row .a { font-size: 12.5px; max-width: 62ch; }
.page .gap-table { gap: 12px; }
.page .gap-table .side { padding: 18px; gap: 9px; border-radius: var(--r-md); }
.page .gap-table .side .lbl { font-size: 10px; } .page .gap-table .side .li { font-size: 12.5px; padding: 7px 0; }
.page .steps { gap: 10px; }
.page .steps .step { padding: 16px 14px; gap: 8px; border-radius: var(--r-md); }
.page .steps .step .pip { width: 25px; height: 25px; font-size: 11px; }
.page .steps .step .t { font-size: 14px; } .page .steps .step .b { font-size: 11.5px; }
.page .quote-c { font-size: 30px; } .page .quote-c.lg { font-size: 36px; } .page .quote-by { font-size: 12px; }
.page .said { font-size: 22px; } .page .said-who { font-size: 10px; margin-top: 8px; }
.page .stat-hero { font-size: 96px; } .page .stat-hero--md { font-size: 68px; } .page .stat-hero--sm { font-size: 48px; }
.page .stat-sub { font-size: 15px; max-width: 42ch; } .page .stat-cap { font-size: 12px; max-width: 52ch; }
.page .author .av { width: 40px; height: 40px; font-size: 15px; }
.page .author .nm { font-size: 14px; } .page .author .rl { font-size: 11.5px; }
.page .foot { padding-top: 18px; } .page .foot .by { font-size: 11px; }
.page .notch-wrap > .notch { --nsize: 48px; }
.page .gap-table .side .li { padding: 6px 0; }
.page .notch-btn { width: 34px; height: 34px; }
.page .band-img { margin: -56px -56px 28px; }
.page .band-img.bottom { margin: 28px -56px -56px; }
.page .lay-split .half-txt { padding: 56px 44px; }

/* Sections stack down an A4 page rather than sharing the height of one frame,
   so each needs air beneath the one before it. Without this the next section's
   eyebrow started on the line the previous section's last row ended on. */
.page .s > .body + .body { margin-top: 34px; }

/* An A4 page stacks sections down its length rather than centring one group
   in a frame, so the doc overrides the carousel's optical centring. Copy runs
   from the running head downward and the leftover height stays at the foot,
   which is where a folio expects to find it. */
.page .body { flex: 0 0 auto; justify-content: flex-start; }
/* Containers stop filling here too. There is no single frame to fill on an A4
   page, so a grid that grabbed `flex: 1` would take the whole sheet. */
.page .grid-2.fill, .page .grid-3.fill, .page .grid-2-2.fill, .page .grid-2-3.fill,
.page .trio.fill, .page .steps.fill, .page .gap-table.fill { flex: 0 0 auto; }

/* ============================================================
   The cover.

   A cover is not the first page of the body, and it was being built as one:
   chrome, then a 52px headline, then the lede, all stacked against the top
   of the sheet with two thirds of the page empty beneath them. It reads as a
   page that failed to finish loading.

   It carries display type now, anchored low the way a carousel cover is, with
   the eyebrow above it and a hairline separating the lockup at the foot.
   ============================================================ */
.page .cover { padding: 64px; }
.page .cover .body { flex: 1; justify-content: flex-end; gap: 26px; }
.page .cover .kicker { font-size: 12px; letter-spacing: 0.12em; }
.page .cover .display { font-size: 82px; line-height: 1.02; letter-spacing: -0.035em; }
.page .cover .h1 { font-size: 62px; line-height: 1.06; }
.page .cover .lede { font-size: 19px; line-height: 1.55; max-width: 46ch; }
.page .cover .rule { margin-top: 44px; flex: 0 0 auto; }
.page .cover .foot { margin-top: 0; padding-top: 18px; }
.page .cover .foot .by { font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; }
.page .cover .lockup { font-size: 13px; }
/* The marker ring needs its room on a cover too. */
.page .cover .display:has(.mark) { line-height: 1.16; }

/* Continuation pages. The cover carries the masthead; every page after it
   gets a running head at the top and a folio at the foot. */
.run-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  flex: 0 0 auto;
}
.folio { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-semibold); flex: 0 0 auto; }