/* ---------------------------------------------------------------------
   The 18 September homepage — KB §24 item 124.

   The mockups' look, not their copy: cream, terracotta, serif headlines.
   It sits AFTER the page's own <style> block and styles only the sections
   this remodel added, plus the few overrides the new hero needs. The older
   rules are left alone deliberately — the FAQ, the waitlist and the footer
   still use them, and pruning a 700-line stylesheet in the same pass as a
   rebuild is how something quietly loses its styling.

   Type floor is 16px for running text (§6 rule 15). Nothing here goes
   below 15px except eyebrows, which that rule exempts.
   --------------------------------------------------------------------- */

:root {
  --cream:      #F7F2EA;
  --cream-deep: #F0E8DC;
  --ink:        #1C1B18;
  --ink-soft:   #5A5A55;
  --terracotta: #A9552E;
  --terracotta-dark: #8C4525;
  --rule:       #E2D7C6;
  --dark:       #221F1C;
}

/* ---------- nav ---------- */
.hp-topbar { position: sticky; top: 0; z-index: 40; background: var(--cream);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.hp-topbar.scrolled { border-bottom-color: var(--rule); box-shadow: 0 1px 12px rgba(0,0,0,.05); }
.hp-nav { display: flex; align-items: center; gap: 28px; max-width: 1200px;
  margin: 0 auto; padding: 14px 20px; }
.hp-nav .hp-brand { margin-right: auto; display: inline-flex; align-items: center; }
.hp-nav .hp-brand img { display: block; height: 30px; width: auto; }
.hp-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; }
.hp-nav a:hover { color: var(--terracotta); }
.hp-nav .hp-tel { font-variant-numeric: tabular-nums; }
.hp-nav-links { display: flex; gap: 26px; }
@media (max-width: 46em) {
  .hp-nav { gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
  .hp-nav-links { gap: 16px; font-size: .95rem; order: 3; width: 100%; }
  .hp-nav .hp-tel { font-size: .95rem; }
}

/* ---------- shared ---------- */
.hp { background: var(--cream); color: var(--ink); }
.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hp section { padding: 72px 0; }
.hp h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15; margin: 0 0 18px; font-weight: 600; }
.hp h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; margin: 0 0 8px; font-weight: 600; }
.hp p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 14px; }
.hp-eyebrow { font-family: "DM Sans", system-ui, sans-serif; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta);
  margin: 0 0 10px; font-weight: 600; }
.hp-btn { display: inline-block; background: var(--terracotta); color: #fff;
  font-family: "DM Sans", system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600;
  padding: 16px 26px; border-radius: 6px; text-decoration: none; border: 0; cursor: pointer; }
.hp-btn:hover { background: var(--terracotta-dark); color: #fff; }
.hp-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hp-small { font-size: .9375rem; color: var(--ink-soft); }
.hp-center { text-align: center; }
.hp-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- hero ---------- */
.hp-hero { padding: 56px 0 64px; }
.hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hp-hero h1 { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.04; margin: 0 0 18px; font-weight: 600; }
.hp-hero .hp-sub { font-size: 1.1875rem; max-width: 30em; }
.hp-hero-cta { margin: 26px 0 10px; }
.hp-hero-note { margin: 0 0 18px; }
.hp-hear { display: inline-block; color: var(--terracotta); font-weight: 600;
  text-decoration: none; font-size: 1.0625rem; }
.hp-hear:hover { text-decoration: underline; }
.hp-hero-fine { margin: 14px 0 0; }
.hp-hero-img img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* The toggle is on the WRAPPER, not the <picture>: each hero image carries
   its own words over it, and hiding only the picture would have left the
   mobile note printed under the desktop photograph. */
.hp-hero-img .hp-shot-hero-m { display: none; }
@media (max-width: 52em) {
  .hp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-hero-img .hp-shot-hero-d { display: none; }
  .hp-hero-img .hp-shot-hero-m { display: block; }
}

/* ---------- three columns ---------- */
.hp-cols { border-top: 1px solid var(--rule); padding: 52px 0; }
.hp-cols-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.hp-col h3 { color: var(--terracotta); font-size: 1.25rem; margin-bottom: 10px; }
.hp-col h3::after { content: ""; display: block; width: 34px; height: 2px;
  background: var(--terracotta); margin-top: 10px; }
.hp-col p { margin: 12px 0 0; }
@media (max-width: 52em) { .hp-cols-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- the demo player's own styles (KB §24 item 125) ----------
   The same rules demo-call-player.md carries, so the section works on this
   page without a second <style> block. Keep the two in step: the .md is what
   a future page pastes, this is what the homepage uses. */
.vv-demo-player { margin: 0; max-width: 40em; }
.vv-demo-controls { display: flex; align-items: center; gap: 16px; }
.vv-demo-play { flex: 0 0 auto; min-width: 5.5em; padding: 12px 18px; font: inherit;
  font-size: 1rem; color: #fff; background: var(--terracotta); border: 0;
  border-radius: 6px; cursor: pointer; }
.vv-demo-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.vv-demo-wave-wrap { position: relative; flex: 1 1 auto; height: 64px; }
.vv-demo-wave { display: block; width: 100%; height: 64px; }
/* The slider sits over the waveform: it is the control, the canvas is the
   picture. Transparent until focused, so a keyboard user can see what they
   are moving. */
.vv-demo-seek { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; }
.vv-demo-seek:focus-visible { opacity: 1; }
.vv-demo-time { flex: 0 0 auto; font-size: .9375rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.vv-demo-caption { font-size: .9375rem; color: var(--ink-soft); margin: 16px 0 0; }
.vv-demo-ready .vv-demo-audio { display: none; }
@media (max-width: 30em) {
  .vv-demo-controls { flex-wrap: wrap; }
  .vv-demo-wave-wrap { flex-basis: 100%; order: 3; }
  .vv-demo-time { order: 2; }
}

/* ---------- the player, as the mockup's dark bar ---------- */
.hp-player-band { background: var(--dark); padding: 22px 0; }
.hp-player-band .vv-demo { background: transparent; padding: 0; }
.hp-player-band .vv-demo-player { max-width: none; margin: 0; }
.hp-player-band .vv-demo-controls { gap: 20px; }
.hp-player-band .vv-demo-play { background: transparent; border: 1px solid #6B6560;
  color: #F7F2EA; min-width: 0; padding: 10px 18px; border-radius: 999px; }
.hp-player-band .vv-demo-play:hover { background: #2E2A26; }
.hp-player-band .vv-demo-play:focus-visible { outline: 3px solid #F7F2EA; }
.hp-player-band .vv-demo-time { color: #C9BFB0; }
.hp-player-band .vv-demo-caption { color: #C9BFB0; margin: 10px 0 0; }
.hp-player-label { color: #F7F2EA; font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem; margin: 0 0 6px; }

/* ---------- how it works ---------- */
.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.hp-step-n { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; background: var(--terracotta);
  color: #fff; font-family: "DM Sans", system-ui, sans-serif; font-weight: 700;
  font-size: 1rem; margin-bottom: 14px; }
@media (max-width: 52em) { .hp-steps { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- the card ---------- */
.hp-card-sec { background: var(--cream-deep); }
.hp-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hp-card-grid img { display: block; width: 100%; height: auto; border-radius: 10px; }
.hp-ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.hp-ticks li { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1.0625rem; }
.hp-ticks svg { flex: 0 0 auto; color: var(--terracotta); }
@media (max-width: 52em) { .hp-card-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- pricing ---------- */
.hp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.hp-tier { background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  padding: 28px 24px; display: flex; flex-direction: column; }
.hp-tier h3 { font-size: 1.35rem; margin-bottom: 4px; }
.hp-price { font-family: "Playfair Display", Georgia, serif; font-size: 2.1rem;
  margin: 8px 0 4px; font-weight: 600; }
.hp-price .hp-per { font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem;
  color: var(--ink-soft); font-weight: 400; }
.hp-tier .hp-founding { color: var(--terracotta); font-size: .9375rem; margin: 0 0 10px; font-weight: 600; }
.hp-tier .hp-tier-body { flex: 1 1 auto; }
.hp-tier .hp-btn { width: 100%; text-align: center; margin-top: 18px; }
.hp-renew { margin: 26px 0 0; text-align: center; }
.hp-addon { margin: 44px auto 0; max-width: 46em; background: #fff;
  border: 1px solid var(--rule); border-radius: 10px; padding: 26px 28px; text-align: center; }
.hp-addon h3 { margin-bottom: 10px; }
.hp-foot-note { margin: 26px auto 0; max-width: 46em; text-align: center; }
@media (max-width: 62em) { .hp-tiers { grid-template-columns: 1fr; } }

/* ---------- the book, compact ---------- */
.hp-book { background: var(--cream-deep); }
.hp-book-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hp-book-offers p { margin: 0; }
.hp-book-offers b { display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem; margin-bottom: 6px; font-weight: 600; }
@media (max-width: 52em) { .hp-book-offers { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- what you hear ---------- */
.hp-hear-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 48px; align-items: center; }
.hp-hear-grid img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hp-hear-list { list-style: none; margin: 0; padding: 0; }
.hp-hear-list li { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.6; }
.hp-hear-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--terracotta); }
.hp-or { display: flex; align-items: center; gap: 14px; color: var(--ink-soft);
  font-size: .9375rem; margin: 18px 0; }
.hp-or::before, .hp-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--rule); }
@media (max-width: 52em) { .hp-hear-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- loved by families ---------- */
.hp-loved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-loved-card { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 24px; }
.hp-loved-card h3 { font-size: 1.15rem; color: var(--terracotta); }
.hp-loved-card p { margin: 0; }
@media (max-width: 62em) { .hp-loved-grid { grid-template-columns: 1fr; } }

/* ---------- the words on the images (J, 19 September) ----------
   J chose blank photographs, so the words are REAL TEXT placed over them:
   sharp at any size, correctable without re-exporting a photograph, and read
   as text by a screen reader. Each block is positioned in percentages of its
   own image, so it stays put at every width, and sized in cqw — a share of
   the image's own width — so it scales with the picture rather than with the
   page. The px font-size before each cqw line is the fallback where
   container queries are not supported; it is close enough to read.

   Every alt text describes the OBJECT and never these words, so nothing is
   announced twice. */
.hp-shot { position: relative; container-type: inline-size; }
.hp-shot picture, .hp-shot img { display: block; width: 100%; height: auto; }
.hp-note { position: absolute; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  pointer-events: none; }

/* The two handwritten notes. */
.hp-note-hand { font-family: "Caveat", "Segoe Script", cursive; color: #33302B;
  line-height: 1.25; }

/* Desktop hero: the card standing to the right of the telephone.
   THREE LINES, EACH ON ITS OWN (J's live review, 20 September: the first
   version was too small, sat off-centre, and the number wrapped).

   THE WRITING IS THE FOCAL POINT (J, 20 September). The photograph itself was
   edited for this. The pressed bouquet that filled the card's middle is
   PAINTED OUT AND GONE — putting it back small was tried and J judged it
   worse, because it still collided with the writing. In its place the card
   carries the two drawn marks from the card-envelope photograph: the leaf
   sprig above the writing and the heart below it, both small, both
   decorations. The master is
   `Documents\vividly-remodel-images\hero-phone-desktop.png` and the untouched
   original is beside it as `-original.jfif`.

   The box is the card's own face — its left and right edges are the card's, so
   "centred" means centred on the card rather than on the image.

   VERTICALLY THE BOX IS SET SO THE WRITING SITS CENTRED ON THE CARD, which is
   what leaves a matching band above and below for the two marks. The marks are
   burnt into the image at fixed places, so these two percentages and the image
   are a pair: move one without the other and something will touch. The sprig
   ends at 42.4% of the image's height and the heart starts at 71.4%; the
   measured clearances are in summary.md.

   NOTHING MAY WRAP WITHIN A LINE. Each line is nowrap, and the sizes are a
   share of the image's width (cqw), so the block grows and shrinks with the
   card at every desktop width and the longest line — the phone number —
   always fits inside the card's face. */
.hp-shot-hero-d .hp-note { left: 78.9%; right: 4.1%; top: 40.9%; bottom: 27.9%;
  gap: .16em; justify-content: center;
  /* THE BOX IS ITS OWN CONTAINER, so the sizes below are a share of THE
     CARD'S FACE rather than of the whole photograph. That is what "fill the
     card comfortably" means, and it is why the longest line can be set to a
     width that is known to fit: the card is the measure. */
  container-type: inline-size; }
.hp-shot-hero-d .hp-note span,
.hp-shot-hero-m .hp-note span { display: block; white-space: nowrap; }
.hp-shot-hero-d .hp-note-l1,
.hp-shot-hero-m .hp-note-l1 { font-size: 18px; font-size: 19.8cqw; font-weight: 600;
  margin-bottom: .1em; }
.hp-shot-hero-d .hp-note-l2,
.hp-shot-hero-m .hp-note-l2 { font-size: 15px; font-size: 16.1cqw; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.hp-shot-hero-d .hp-note-l3,
.hp-shot-hero-m .hp-note-l3 { font-size: 13px; font-size: 14.4cqw;
  font-variant-numeric: tabular-nums; }

/* Mobile hero: the SAME card, in a photograph cropped toward it.
   ~~the note under the magnet~~ — the fridge image is gone from the page
   (J, 20 September).

   These percentages are the desktop box's own pixels re-expressed against
   the crop (560,96..1376,768 of the 1376x768 master), so the box lands on
   exactly the same card face. The sizes above are shared with the desktop
   hero and need no change: they are a share of the NOTE BOX, which is the
   card's face in both, so the writing keeps its proportions to the card.
   The card is 28.8% of the cropped photograph against 17.1% of the whole
   one, which is the entire point of cropping rather than shrinking.

   The sprig ends at 34.2% and the heart begins at 67.3%; the box sits
   between them. */
.hp-shot-hero-m .hp-note { left: 64.4%; right: 6.9%; top: 32.5%; bottom: 31.9%;
  gap: .16em; justify-content: center;
  container-type: inline-size; }

/* The card section: printed, not handwritten — small caps and a serif, as
   the mockup has it. It sits between the sprig and the heart. */
.hp-note-card { font-family: "EB Garamond", "Playfair Display", Georgia, serif;
  color: #3A342C; gap: .5em; }
.hp-shot-card .hp-note { left: 34%; right: 34%; top: 35%; bottom: 28%; }
.hp-card-title { font-size: 13px; font-size: 2.5cqw; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; line-height: 1.35; }
.hp-card-sub { font-size: 10px; font-size: 1.85cqw; font-style: italic; }
.hp-card-tel { font-size: 15px; font-size: 3cqw; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.hp-card-ext { font-size: 11px; font-size: 2cqw; font-variant-numeric: tabular-nums; }
.hp-card-url { font-size: 9px; font-size: 1.6cqw; letter-spacing: .16em;
  text-transform: uppercase; color: #6B6153; }

/* The phone screen: light text on a dark screen. */
.hp-note-screen { font-family: "DM Sans", system-ui, sans-serif; color: #F2EDE5;
  gap: .7em; }
.hp-shot-phone .hp-note { left: 37%; right: 32%; top: 34%; bottom: 30%; }
.hp-scr-title { font-size: 13px; font-size: 3.1cqw; font-weight: 600; }
.hp-scr-rec { display: inline-flex; align-items: center; gap: .5em;
  font-size: 11px; font-size: 2.5cqw; color: #E8A793; }
.hp-dot { width: .6em; height: .6em; border-radius: 50%; background: #C4553A; }
.hp-scr-note { font-size: 10px; font-size: 2.2cqw; color: #C9BFB0; line-height: 1.4; }

/* ---------- the pinned bar ---------- */
.hp-pinned { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--dark); color: #F7F2EA; padding: 12px 20px;
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.hp-pinned p { margin: 0; font-size: 1.0625rem; }
.hp-pinned .hp-btn { padding: 12px 22px; font-size: 1rem; }
body { padding-bottom: 84px; }
@media (max-width: 46em) {
  .hp-pinned { gap: 12px; padding: 10px 16px; }
  .hp-pinned p { font-size: .95rem; text-align: center; width: 100%; }
  body { padding-bottom: 116px; }
}
@media print { .hp-pinned { display: none; } body { padding-bottom: 0; } }

/* ---------------------------------------------------------------------
   THE REAL BOOK (KB §24 item 88).

   Two pages out of J's own downloaded book, side by side on desktop and
   stacked on a phone. They are given a page edge rather than a heavy
   drop shadow: a book page is paper, and the thin warm border plus a
   soft shadow reads as paper where a big blur reads as a UI card.

   The code in the page image is live. Nothing here may scale the page
   image down so far that the code stops scanning — the shipped widths
   were chosen by decoding the encoded files, and 560 is the smallest.
   --------------------------------------------------------------------- */
.hp-realbook { border-top: 1px solid var(--rule); }

/* THE HEAD OF THIS SECTION IS CENTRED (J, 20 September) — this section's
   only; nothing else changes alignment.

   WHY IT LOOKED LEFT-ALIGNED BEFORE. The lede carried `margin: 0 auto` to
   centre its own block, but `.hp p { margin: 0 0 14px; }` is a class AND an
   element, so its specificity (0,1,1) beats a bare class (0,1,0) and `auto`
   never applied. The block sat flush left inside a centred container while
   only its text was centred. `.hp-realbook-head p` matches that specificity,
   so the centring holds wherever the rule sits in the file.

   The max-width is on the head rather than on the paragraph, so the eyebrow,
   the heading and the body share one measure and one centre line. */
.hp-realbook-head {
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
}
.hp-realbook-head p { margin-left: auto; margin-right: auto; }
.hp-realbook-lede { max-width: 42em; margin-bottom: 8px; }

.hp-realbook-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1000px;
  margin: 40px auto 0;
}
.hp-page {
  margin: 0;
  /* A grid item's 1fr track is minmax(auto, 1fr), so an image with a large
     intrinsic width pushes the track past the container and the page scrolls
     sideways. On a phone that cropped the code clean off the right edge. */
  min-width: 0;
}
.hp-page img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.09);
  background: #fff;
}
.hp-page figcaption {
  font-size: .9375rem;
  color: var(--ink-soft);
  margin-top: 14px;
  text-align: center;
}

@media (max-width: 52em) {
  .hp-realbook-pair { grid-template-columns: 1fr; gap: 32px; max-width: 30em; }
}

/* ---------- WHAT THE LINES ALSO DO (the giving-back programs, §20) ----------
   Typographic only, by instruction. The figure carries the weight, so there
   is nothing to illustrate: no photograph of a patient or a veteran, which is
   the whole reason this section is set the way it is.

   Its own band of --cream-deep, because pricing above and "what you hear"
   below are both --cream and the section has to read as a change of subject
   rather than a footnote to the prices. Same device as .hp-card-sec. */
.hp-giving { background: var(--cream-deep); }
.hp-giving-head { max-width: 34em; }

.hp-giving-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 72px);
  margin-top: clamp(36px, 5vw, 56px);
}

/* The figure and its unit are ONE paragraph, so a screen reader says
   "5 Lines" rather than reading a stray numeral and a stray noun. */
.hp-give-fig { margin: 0 0 18px; }
.hp-give-n {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.4rem, 7vw, 5.25rem);
  line-height: 1;
  font-weight: 600;
  color: var(--terracotta);
}
.hp-give-unit {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 10px;
}
/* The same 34px terracotta rule .hp-col h3::after uses, so the two sections
   are recognisably the same hand. */
.hp-give-unit::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--terracotta);
  margin-top: 14px;
}
.hp-give p { margin: 0; }

/* The two referral links (J, 22 September). Set in the section's own type,
   deliberately NOT buttons: the section is about what the Lines do, and a
   button here would compete with the pricing buttons directly above it for
   somebody who has not bought anything yet. */
.hp-give-link { margin: 18px 0 0; }
.hp-give-link a {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: none;
}
.hp-give-link a:hover { text-decoration: underline; }
.hp-give-link a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.hp-giving-close {
  border-top: 1px solid var(--rule);
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  text-align: center;
}
.hp-giving-close p { margin: 0 auto; max-width: 34em; }

@media (max-width: 52em) {
  .hp-giving-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- "Share it" (Keepers; J, 1 October) ----------
   Two columns on desktop, J's copy on the left and the photograph on the
   right; stacked on mobile with the photograph below the copy. The page's own
   cream, so it reads as its own section after the giving section's deeper one.

   THE PHOTOGRAPH: Documents\vividly-remodel-images\keepers-section.jfif, a
   phone and a blank 5x7 card with a terracotta sprig on a table by a window,
   1376x768. The card stays blank: no text goes on it.

   J REPLACED THE PHOTOGRAPH (1 October, later) with a tighter frame: the
   phone's screen is now ~233px across in the master, against ~205 before.

   TWO CROPS, as the hero has:
     desktop  450,100 to 1300,680 (850x580): the phone, the card and the sprig
     mobile   450,110 to  900,650 (450x540): the phone alone, so the words
              stay legible on a phone. 450 master pixels across: served at
              its own size up to a 450px-wide device pixel box, and enlarged
              only on 2x screens.

   THE MESSAGE IS REAL TEXT, NEVER IN THE IMAGE (J), set over the phone's empty
   thread like the hero's card: a sent bubble with the link under it. The
   screen in the master is the quadrilateral 643,141 / 860,182 / 733,607 /
   493,555: its top edge runs at ~11.5deg and its sides lean ~18.3deg, which is
   perspective, not a turn. So the box takes a matrix() that maps its width
   along the top edge and its height along the sides, and the words lie flat on
   the screen. The box is the thread between the header (11% down the screen)
   and the reply bar (89% down): 210x295 master px, 572,223.5 to 782,518.5. It is
   its own container, so the sizes are a share of the thread and the words
   scale with the photograph. The percentages below are that box against each
   crop: change the crop or the box and both
   must change together. The measured clearances are in summary.md. */
.hp-share { background: var(--cream); }
.hp-share-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.hp-share-copy { max-width: 34em; }
.hp-share-copy p { margin: 1rem 0 0; }
.hp-share-cta { margin-top: 1.6rem; }
.hp-share-img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.hp-share-img .hp-shot-share-m { display: none; }
@media (max-width: 52em) {
  .hp-share-grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-share-img .hp-shot-share-d { display: none; }
  .hp-share-img .hp-shot-share-m { display: block; }
}
.hp-note-msg { font-family: "DM Sans", system-ui, sans-serif; align-items: flex-end;
  justify-content: flex-end; text-align: left; gap: .45em;
  transform: matrix(.980, .199, -.3135, .9496, 0, 0); container-type: inline-size; }
.hp-shot-share-d .hp-note-msg { left: 14.35%; right: 60.94%; top: 21.29%; bottom: 27.84%; }
.hp-shot-share-m .hp-note-msg { left: 27.11%; right: 26.22%; top: 21.02%; bottom: 24.35%; }
.hp-msg { display: block; max-width: 94%; background: var(--terracotta); color: #FBF6EF;
  font-size: 14px; font-size: 11.9cqw; line-height: 1.3; padding: .5em .6em;
  border-radius: 1.05em 1.05em .3em 1.05em; }
.hp-msg-link { display: block; font-size: 11px; font-size: 9cqw; color: #6E655A;
  padding-right: .35em; letter-spacing: .01em; }