/* ==========================================================================
   P2SV site components.
   The design system ships React reference implementations in
   p2sv-design-system/components/. This is the same markup and the same token
   values recreated as plain CSS classes, because the site is static HTML.
   Nothing here introduces a colour, font, radius or shadow outside the tokens.
   ========================================================================== */

/* ── Canvas · paper around the sheet. A narrow gutter on a phone, so the
   frame reads as a sheet on the page rather than the edge of the screen. ── */
.p2-canvas { padding: var(--space-4) var(--space-3); }

@media (min-width: 600px) {
  .p2-canvas { padding: var(--space-7) var(--space-5); }
}

/* Photo canvas (home only) · the sheet floats centred over a full-bleed
   black-and-white image: Lambert's Pictorial Anatomy, Pl. 2 (public domain).
   The greyscale + contrast treatment from the design system's imagery rule
   is baked into the file, so no filter here. Unlike the plain canvas it
   keeps a gutter on a phone, so the image shows. */
.p2-canvas--photo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
  /* The figure stands ~60% across its plate. Pinning the plate's left edge
     to the viewport's and sizing it to 125vw + 230px puts the figure at
     75vw + 138px: the middle of the right-hand gutter beside the 552px sheet,
     at any width, with the plate still covering the left edge. */
  background: var(--ink) url("/assets/img/home-anatomy-2.jpg") left top / calc(125vw + 230px) auto no-repeat;
}
.p2-canvas--photo .p2-sheet { width: 100%; }

/* On a phone the plate is scaled to 150% of the page height and centred:
   that crops off the plate's lettering along the top edge and enlarges the
   figure, which softens it into a backdrop. No CSS blur (the system has none);
   the softness is just the 1088px file at that size. */
@media (max-width: 600px) {
  .p2-canvas--photo { background-position: center; background-size: auto 150%; }
}

@media (min-width: 600px) {
  .p2-canvas--photo { padding: var(--space-8) var(--space-5); }
}

/* On large screens (1400px+) the home sheet is set at 1.5x, which reads best
   at that size: the same layout a reader would get at 150% browser zoom.
   Only the sheet is zoomed, not the body: Chrome scales vw under zoom and
   Safari doesn't, so a zoomed background drifted behind the sheet in Safari.
   Unzoomed, the plate needs 125vw + 1.5 × 230px to keep the figure in the
   middle of the gutter beside the 828px sheet, and the padding is scaled by
   hand. */
@media screen and (min-width: 1400px) {
  .p2-canvas--photo {
    padding: calc(var(--space-8) * 1.5) calc(var(--space-5) * 1.5);
    background-size: calc(125vw + 345px) auto;
  }
  .p2-canvas--photo .p2-sheet { zoom: 1.5; }
}

/* ── Sheet · the centred framed surface (Masthead.jsx) ───────────────────── */
.p2-sheet {
  max-width: var(--sheet-width);
  margin: 0 auto;
  border: var(--border-frame) solid var(--border-frame-color);
  background: var(--surface-sheet);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p2-sheet-body {
  padding: var(--space-6) var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Masthead band · the frame thickened (Masthead.jsx) ──────────────────── */
.p2-masthead {
  --p2-mark: 64px;
  height: var(--band-height);
  flex: none;
  background: var(--surface-inverse);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 calc(var(--p2-mark) * 0.5) calc(var(--p2-mark) * 0.3);
}

.p2-masthead-meta {
  font-style: italic;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-inverse-muted);
  text-align: right;
  white-space: nowrap;
  flex: none;
}

/* ── Wordmark (Wordmark.jsx) ─────────────────────────────────────────────── */
.p2-wordmark {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: var(--weight-regular);
  font-size: var(--p2-mark, var(--text-wordmark));
  line-height: 0.8;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
}

.p2-wordmark--inverse { color: var(--paper); }
a.p2-wordmark:hover { text-decoration: none; }

/* ── Label (Label.jsx) ───────────────────────────────────────────────────── */
.p2-label {
  font-family: var(--font-serif);
  line-height: 1.5;
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-label);
}

.p2-label--caps {
  font-variant: normal;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  font-size: var(--text-caps);
  letter-spacing: var(--tracking-caps);
  color: var(--text-primary);
}

.p2-label--rule {
  border-bottom: var(--border-hair) solid var(--border-hair-color);
  padding-bottom: var(--space-2);
}

.p2-label--inverse { color: var(--text-inverse-muted); }
.p2-label--inverse.p2-label--caps { color: var(--inverse-muted); font-size: var(--text-caption); }
.p2-label--inverse.p2-label--rule { border-bottom-color: var(--inverse-rule); }

/* ── Headline (Headline.jsx) ─────────────────────────────────────────────── */
.p2-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p2-headline h1,
.p2-headline h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  text-wrap: balance;
}

.p2-headline em,
.p2-headline i { font-style: italic; }

.p2-dek {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.p2-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

.p2-h2 em { font-style: italic; }

.p2-h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

/* ── List (List.jsx) · markers are — · or display numerals ───────────────── */
.p2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The marker hangs in the gutter rather than being a flex sibling, so a link
   and the text after it stay in one inline run. */
.p2-list > li {
  position: relative;
  padding-left: 30px;
  color: var(--text-primary);
}

.p2-list > li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-decorative);
}

.p2-list--dot > li { padding-left: 22px; }
.p2-list--dot > li::before { content: '·'; }

.p2-list--number {
  counter-reset: p2-item;
}

.p2-list--number > li { counter-increment: p2-item; padding-left: 38px; }

.p2-list--number > li::before {
  content: counter(p2-item, decimal-leading-zero);
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-primary);
}

.p2-list--inverse > li { color: var(--paper); }
.p2-list--inverse > li::before { color: var(--inverse-muted); }

.p2-list--secondary > li { color: var(--text-secondary); }

/* ── Callout (Callout.jsx) ───────────────────────────────────────────────── */
.p2-callout {
  background: var(--surface-inverse);
  color: var(--paper);
  padding: var(--space-5) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p2-callout .p2-list > li { font-size: var(--text-body-lg); line-height: 1.4; }
.p2-callout a:not(.p2-btn) { color: var(--paper); }

.p2-callout--cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.p2-callout-statement {
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: 1.35;
  max-width: 32ch;
}

/* ── Button (Button.jsx) ─────────────────────────────────────────────────── */
.p2-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-caps);
  line-height: 1;
  padding: 13px 22px;
  border: var(--border-rule) solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              text-decoration-thickness var(--dur-fast) var(--ease);
}

.p2-btn:hover { background: var(--ink-2); color: var(--paper); text-decoration: none; }

.p2-btn--outline { background: transparent; color: var(--ink); }
.p2-btn--outline:hover { background: var(--ink); color: var(--paper); }

.p2-btn--inverse { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.p2-btn--inverse:hover { background: transparent; color: var(--paper); }

.p2-btn--link {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.p2-btn--link:hover { background: transparent; color: inherit; text-decoration-thickness: 2px; }
.p2-btn .p2-arrow { font-variant: normal; }

/* An acronym inside a button keeps its capitals, so the letters match the
   height of any digits rather than being lowercased into small caps. */
.p2-btn .p2-literal { text-transform: none; }

/* ── StatRow (StatRow.jsx) ───────────────────────────────────────────────── */
.p2-statrow {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--p2-stats, 4), minmax(0, 1fr));
  border-top: var(--border-hair) solid var(--border-hair-color);
  border-bottom: var(--border-hair) solid var(--border-hair-color);
  padding: 20px 0;
}

.p2-stat {
  min-width: 0;
  padding: 0 var(--space-3) 0 var(--space-4);
  border-left: var(--border-hair) solid var(--border-hair-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p2-stat:first-child { padding-left: 0; border-left: none; }

.p2-stat-value {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: var(--weight-regular);
  font-size: min(var(--text-stat), calc(100cqw / var(--p2-stats, 4) * 0.17));
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}

.p2-stat-label {
  font-style: italic;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

/* ── CardGrid (CardGrid.jsx) · 1px gaps over grey-200, no card borders ───── */
.p2-cardgrid {
  display: grid;
  grid-template-columns: repeat(var(--p2-cols, 2), minmax(0, 1fr));
  gap: var(--border-hair);
  background: var(--border-hair-color);
  border: var(--border-hair) solid var(--border-hair-color);
}

.p2-card {
  background: var(--surface-sheet);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p2-card-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--text-primary);
}

.p2-card-body {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--text-secondary);
}

/* ── SheetFooter (SheetFooter.jsx) ───────────────────────────────────────── */
.p2-sheetfooter {
  border-top: var(--border-rule) solid var(--border-rule-color);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
}

.p2-sheetfooter-left {
  font-variant: small-caps;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
}

.p2-sheetfooter-right {
  font-style: italic;
  font-size: var(--text-label);
  color: var(--text-caption);
  text-align: right;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.p2-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.p2-input,
.p2-select,
.p2-textarea {
  font: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--white);
  border: var(--border-hair) solid var(--border-input-color);
  border-radius: var(--radius);
  padding: 11px 14px;
  width: 100%;
  appearance: none;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.p2-input:focus,
.p2-select:focus,
.p2-textarea:focus { border-color: var(--ink); }

.p2-textarea { resize: vertical; min-height: 84px; }

/* appearance:none strips the native dropdown affordance, so the select gets
   the one glyph the system allows — the same arrow as "Start a conversation ↓". */
.p2-select-wrap { position: relative; display: block; }

.p2-select-wrap::after {
  content: '↓';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-label);
  pointer-events: none;
}

.p2-select { padding-right: 36px; }

/* ── Report column (ReportPage.jsx) ──────────────────────────────────────── */
.p2-report {
  max-width: var(--report-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.p2-report-masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  border-bottom: var(--border-rule) solid var(--border-rule-color);
  padding-bottom: 14px;
}

.p2-report-masthead .p2-wordmark { --p2-mark: 28px; }

.p2-report-meta {
  font-style: italic;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-caption);
  text-align: right;
}

.p2-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p2-report p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* The dek keeps body-lg against the bare-paragraph rule above. */
.p2-report .p2-dek { font-size: var(--text-body-lg); }

.p2-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p2-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* A hair-ruled block, and its ink counterpart */
.p2-block {
  border: var(--border-hair) solid var(--border-hair-color);
  padding: var(--space-5) 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p2-block--inverse {
  background: var(--surface-inverse);
  border-color: var(--ink);
}

.p2-block--inverse .p2-h2,
.p2-block--inverse .p2-card-title { color: var(--paper); }
.p2-block--inverse p { color: var(--paper); }
.p2-block--inverse a:not(.p2-btn) { color: var(--paper); }
.p2-block--inverse .p2-divider { border-top-color: var(--inverse-rule); }

.p2-divider {
  border: none;
  border-top: var(--border-hair) solid var(--border-hair-color);
  margin: 0;
}

.p2-source {
  font-style: italic;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-caption);
}

.p2-source a { color: inherit; }

/* ── Report on a framed sheet · same frame and band as the home sheet, at the
   report column width (590px) plus the sheet's side padding. ───────────── */
.p2-sheet--report { max-width: calc(var(--report-width) + 2 * var(--space-7)); }
.p2-sheet--report .p2-report { max-width: none; padding: var(--space-6) var(--space-7) var(--space-7); }

/* Unframed report (med spa brief) · no ink frame down the sides; the band
   alone heads the page as a solid black header, so the cards, blocks and
   feature borders below aren't boxed in by a second set of verticals. */
.p2-sheet--unframed { border: none; }

/* ── Numbered section labels · two-digit display numerals (List.jsx) ─────── */
.p2-label--num {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.p2-num {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-variant: normal;
  text-transform: none;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-primary);
}
.p2-label--inverse .p2-num { color: var(--paper); }

/* Heading-size variant (legal pages): the section name is set at h2 in
   roman title case, so it holds its own beside the 20px display numeral. */
.p2-label--heading {
  font-variant: normal;
  text-transform: none;
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: 0;
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  margin: 0;
}
.p2-label--inverse.p2-label--heading { color: var(--paper); }

/* Section headers are set in the display face, in caps, at the 20px floor
   and the same size as the numeral beside them. The home page's caps labels
   (The Studio, Contact, Key Reports) get the same treatment. */
.p2-label--heading,
.p2-label--caps,
.p2-label--inverse.p2-label--caps {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: var(--weight-regular);
  font-size: 20px;
  line-height: var(--leading-heading);
  letter-spacing: 0;
  text-transform: uppercase;
}
.p2-label--inverse.p2-label--caps { color: var(--paper); }

/* Extra air under the rule, so the section name and the headline below it
   read as two levels rather than two stacked headings. */
.p2-section > .p2-label--heading,
.p2-block > .p2-label--heading { margin-bottom: var(--space-2); }

/* ── BarChart (BarChart.jsx) · no colour; projections hatched, ink outline ── */
.p2-barchart { margin: var(--space-5) 0 0; display: flex; flex-direction: column; }
.p2-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 72px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hair) solid var(--border-hair-color);
}
.p2-bar-label { font-size: 15px; }
.p2-bar-value { text-align: right; font-size: var(--text-h3); }
.p2-bar { height: 22px; width: var(--p2-v); background: var(--data-1); }
.p2-bar--comparison { background: var(--data-2); }
.p2-bar--projected { background: var(--hatch); border: var(--border-hair) solid var(--ink); }
.p2-barchart .p2-source { margin-top: var(--space-3); }
.p2-chart-title {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

/* ── Ink card · one emphasised cell inside a CardGrid ─────────────────────── */
.p2-card--inverse { background: var(--surface-inverse); }
.p2-card--wide { grid-column: 1 / -1; }

/* Feature callout · an ink panel led by a short display-face statement */
.p2-callout--feature { padding: var(--space-6) var(--space-7); gap: var(--space-4); }
.p2-callout-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: 44px;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--paper);
}
.p2-report .p2-callout-body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--paper);
  max-width: 52ch;
}
.p2-card--inverse .p2-card-title { color: var(--paper); }
.p2-card--inverse .p2-card-body { color: var(--text-inverse-muted); }

/* Numbered cards: display numerals 01, 02 … above each title */
.p2-cardgrid--numbered { counter-reset: p2-card; }
.p2-cardgrid--numbered .p2-card { counter-increment: p2-card; }
.p2-cardgrid--numbered .p2-card::before {
  content: counter(p2-card, decimal-leading-zero);
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: 20px;
  line-height: 1;
  color: var(--text-decorative);
  margin-bottom: var(--space-1);
}
.p2-cardgrid--numbered .p2-card--inverse::before { color: var(--inverse-muted); }

/* ── Feature section · an ink band heading a rule-bordered body. The band is
   the frame-thickened masthead idea applied to one section, so the feature
   reads as its own surface without adding a second frame. ──────────────── */
.p2-feature { border: var(--border-rule) solid var(--border-rule-color); }
.p2-feature-head {
  background: var(--surface-inverse);
  color: var(--paper);
  padding: var(--space-5) 28px var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.p2-feature-title {
  margin: 0;
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  color: var(--paper);
  text-wrap: balance;
}
.p2-feature-title em { font-style: italic; color: var(--text-inverse-muted); }
.p2-feature-body {
  padding: var(--space-5) 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Sub-heads and the callout inside the feature get room to breathe; the
   card grid stays tight to its heading. */
.p2-feature-body > .p2-h2 { margin-top: var(--space-4); }
.p2-feature-body > .p2-callout--feature { margin: var(--space-3) 0; }

/* ── Contact modal · home page ───────────────────────────────────────────────
   The brief's "Start a Conversation" block in a native <dialog>, framed like
   the sheet. The system allows no transparency or blur, so the backdrop is
   the hatch over solid paper rather than a dimmed scrim. */
.p2-modal {
  width: min(var(--sheet-width), calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: var(--border-frame) solid var(--border-frame-color);
  border-radius: var(--radius);
  background: var(--surface-sheet);
  color: var(--text-primary);
  overflow: auto;
}

.p2-modal::backdrop { background: var(--hatch-light), var(--paper); }

/* A modal <dialog> doesn't stop the page behind it scrolling, and on phones
   a swipe that reaches the end of the form carries on into the page. Lock
   the page while it's open and keep the form's scroll to itself. */
html:has(.p2-modal[open]) { overflow: hidden; }
.p2-modal { overscroll-behavior: contain; }

.p2-modal > .p2-block { border: none; }

/* The label's rule runs under the whole row, Close included. */
.p2-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: var(--border-hair) solid var(--border-hair-color);
  padding-bottom: var(--space-2);
}
.p2-modal-head .p2-btn--link { font-size: var(--text-label); }

/* Matches the sheet's 1.5x on large screens. */
@media screen and (min-width: 1400px) {
  .p2-modal { zoom: 1.5; max-height: calc((100dvh - 2 * var(--space-4)) / 1.5); }
}

/* ── Narrow widths ──────────────────────────────────────────────────────────
   The web sheet is a centred 552px column; below that it goes edge to edge
   and the band scales with the wordmark, keeping the frame intact. */
@media (max-width: 600px) {
  .p2-masthead { --p2-mark: 44px; height: 92px; }
  .p2-sheet-body { padding: var(--space-5) var(--space-5) var(--space-6); }
  .p2-callout { padding: var(--space-5) var(--space-5); }
  .p2-two-col { grid-template-columns: 1fr; gap: var(--space-5); }
  .p2-cardgrid { grid-template-columns: 1fr; } /* beats the inline --p2-cols */
  .p2-statrow { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .p2-stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .p2-stat-value { font-size: min(var(--text-stat), calc(100cqw / 2 * 0.17)); }
  .p2-block { padding: var(--space-5) var(--space-4); }
  .p2-feature-head,
  .p2-feature-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .p2-callout--feature { padding: var(--space-5) var(--space-4); }
  .p2-card { padding: var(--space-4); }
  .p2-callout-title { font-size: 34px; }
  .p2-sheet--report .p2-report { padding: var(--space-5) var(--space-4) var(--space-6); }
  .p2-bar-row { grid-template-columns: 64px 1fr 60px; gap: var(--space-3); }
  .p2-report { padding: var(--space-6) var(--space-4) var(--space-7); }
  .p2-sheetfooter,
  .p2-report-masthead { gap: var(--space-4); }
  .p2-masthead-meta { white-space: normal; }
}

@media (max-width: 480px) {
  .p2-sheetfooter {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .p2-sheetfooter-right { text-align: left; }
}

@media (max-width: 400px) {
  .p2-masthead { --p2-mark: 36px; height: 80px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .p2-report { padding: 28px; max-width: 100%; }
  .p2-block, .p2-statrow, .p2-card, .p2-barchart, .p2-feature-head, .p2-callout--feature { break-inside: avoid; }
  .p2-sheet--report { border: none; max-width: 100%; }
  /* Hairlines as borders, not a grey grid background, so a grid that breaks
     across pages doesn't leave a grey slab where the moved cards were. */
  .p2-cardgrid { background: none; gap: 0; border-width: var(--border-hair) 0 0 var(--border-hair); }
  .p2-card { border-right: var(--border-hair) solid var(--border-hair-color); border-bottom: var(--border-hair) solid var(--border-hair-color); }
  .p2-sheet--report .p2-report { padding: 28px 0 0; }
  .p2-callout--cta, .p2-no-print { display: none; }
  .p2-canvas--photo { background: none; min-height: 0; padding: 0; display: block; }

  /* The ink surfaces are the brand, not decoration: they have to print even
     when the browser's "background graphics" option is off, or paper text
     lands on white paper. */
  .p2-masthead,
  .p2-callout,
  .p2-block--inverse,
  .p2-card--inverse,
  .p2-feature-head,
  .p2-bar,
  .p2-btn {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── Home sheet definition block (ui_kits/website/HomeSheet.jsx) ─────────── */
.p2-defn-term {
  font-size: 26px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  display: block;
}

.p2-defn-meta {
  font-style: italic;
  color: var(--text-secondary);
  display: block;
}

.p2-lede {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.p2-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The Studio sits further from the Contact P2SV button than the sheet's
   usual 24px gap: 48px in all. */
.p2-group--after-cta { margin-top: var(--space-5); }

@media (max-width: 400px) {
  .p2-defn-term { font-size: 22px; }
}

/* ── FAQ · visible Q&A, mirrored by FAQPage schema on the homepage ──────── */
.p2-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.p2-faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p2-faq-item p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}