/* public/design/hm-site.css
 * ─────────────────────────────────────────────────────────────────────────
 * Tools & discovery pages (site redesign, step 4): price trackers, price
 * indices, cheapest/cheap hotels, deals, chains, hotel/holiday finders,
 * flight+hotel, compare, all-inclusive, best time to book, price check and
 * price-drop-after-booking. Requires hm-tokens.css.
 *
 * These 21 pages share almost no class vocabulary (only .hero, .container,
 * .card, .eyebrow recur) but they share one design system: DM Sans with a
 * serif display face, on the custom properties --navy, --teal, --sand,
 * --cream, --border and friends. So this sheet re-points those properties to
 * the token values for opted-in pages and adds the shared interaction states,
 * instead of 21 bespoke restyles. The serif face itself is changed at the
 * source (the pages' font link and their literal 'DM Serif Display'
 * declarations now name Instrument Serif), because a property cannot reach a
 * literal font-family.
 *
 * --stone, --text-light, --slate and --muted are re-pointed in the Readability
 * block near the end, which also restores a light value on the navy grounds
 * that use them. --gold is not re-pointed (accent on navy); its light-ground
 * uses are overridden per component there.
 *
 * CONTRACT: every selector is scoped to `body.hm-site`; zero !important.
 */

body.hm-site {
  --navy: var(--hm-ink, #0d2135);
  --navy-deep: var(--hm-navy-deep, #09233d);
  --teal: var(--hm-green, #1a6b4a);
  --teal-dark: var(--hm-green-dark, #125038);
  --sand: var(--hm-cream, #faf9f6);
  --cream: var(--hm-cream, #faf9f6);
  --warm-white: var(--hm-cream, #faf9f6);
  --sand-mid: var(--hm-line, #e3e6e2);
  --border: var(--hm-line, #e3e6e2);
  --text: var(--hm-ink, #0d2135);
  --font-serif: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  --font-body: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  background: var(--hm-cream, #faf9f6);
  color: var(--hm-ink, #0d2135);
  font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}

/* Display headings: Instrument Serif is set at weight 400 only. */
body.hm-site h1,
body.hm-site h2 {
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* Shared interaction states. */
body.hm-site a:focus-visible,
body.hm-site button:focus-visible,
body.hm-site input:focus-visible,
body.hm-site select:focus-visible,
body.hm-site textarea:focus-visible,
body.hm-site summary:focus-visible {
  outline: 2px solid var(--hm-green, #1a6b4a);
  outline-offset: 2px;
}
/* The rule above outranks the shell's own focus colours; give the transparent
   overlay header back its white ring (green is 2.6:1 on the navy hero beneath). */
body.hm-site .hm-shell-header--overlay:not(.is-scrolled):not(.is-open) a:focus-visible,
body.hm-site .hm-shell-header--overlay:not(.is-scrolled):not(.is-open) button:focus-visible { outline-color: var(--hm-white, #fff); }
body.hm-site .hm-shell-header .hm-shell-nav a.hm-shell-cta:focus-visible { outline-color: var(--hm-ink, #0d2135); }
body.hm-site .hm-shell-header--overlay:not(.is-scrolled):not(.is-open) .hm-shell-nav a.hm-shell-cta:focus-visible { outline-color: var(--hm-white, #fff); }
body.hm-site .hm-shell-header .hm-shell-nav .hm-shell-group .hm-shell-pop a:focus-visible { outline-color: var(--hm-green, #1a6b4a); }
body.hm-site input:focus,
body.hm-site select:focus,
body.hm-site textarea:focus {
  border-color: var(--hm-green, #1a6b4a);
  box-shadow: 0 0 0 3px var(--hm-focus-glow, rgba(26, 107, 74, .16));
}
body.hm-site button,
body.hm-site input,
body.hm-site select,
body.hm-site textarea { font-family: inherit; }

body.hm-site .card {
  border-color: var(--hm-line, #e3e6e2);
}

/* /compare: the notify row was a non-wrapping flex row whose email input kept
   its intrinsic width, so the button ran 45px off a 320px screen (pre-existing).
   Let the input shrink and the row wrap. */
body.hm-site .notify-form { flex-wrap: wrap; }
body.hm-site .notify-form input { flex: 1 1 160px; min-width: 0; }

/* ── Page heading (prototype .page-heading) ──────────────────────────────
   Every hero variant these pages use becomes the prototype's light heading:
   cream ground, serif h1, muted lede, left-aligned. Contrast of every text
   element inside is audited in a browser (a3-contrast.js), because each page's
   own stylesheet colours its hero children differently. */
body.hm-site .hero,
body.hm-site .article-hero,
body.hm-site .page-hero,
body.hm-site .finder-hero,
body.hm-site .pc-hero,
body.hm-site .pa-hero {
  background: var(--hm-cream, #faf9f6);
  background-image: none;
  color: var(--hm-ink, #0d2135);
  text-align: left;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-site .hero::before,
body.hm-site .hero::after,
body.hm-site .article-hero::before,
body.hm-site .article-hero::after,
body.hm-site .page-hero::before,
body.hm-site .page-hero::after,
body.hm-site .finder-hero::before,
body.hm-site .finder-hero::after,
body.hm-site .pc-hero::before,
body.hm-site .pc-hero::after,
body.hm-site .pa-hero::before,
body.hm-site .pa-hero::after { background-image: none; opacity: 0; }
body.hm-site .hero h1,
body.hm-site .article-hero h1,
body.hm-site .page-hero h1,
body.hm-site .finder-hero h1,
body.hm-site .pc-hero h1,
body.hm-site .pa-hero h1 {
  font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 55px);
  line-height: 1.05;
  color: var(--hm-ink, #0d2135);
}
body.hm-site .hero p,
body.hm-site .hero .sub,
body.hm-site .hero .lede,
body.hm-site .hero .hero-sub,
body.hm-site .hero .subtitle,
body.hm-site .hero .article-meta,
body.hm-site .article-hero p,
body.hm-site .article-hero .sub,
body.hm-site .article-hero .lede,
body.hm-site .article-hero .hero-sub,
body.hm-site .article-hero .subtitle,
body.hm-site .article-hero .article-meta,
body.hm-site .page-hero p,
body.hm-site .page-hero .sub,
body.hm-site .page-hero .lede,
body.hm-site .page-hero .hero-sub,
body.hm-site .page-hero .subtitle,
body.hm-site .page-hero .article-meta,
body.hm-site .finder-hero p,
body.hm-site .finder-hero .sub,
body.hm-site .finder-hero .lede,
body.hm-site .finder-hero .hero-sub,
body.hm-site .finder-hero .subtitle,
body.hm-site .finder-hero .article-meta,
body.hm-site .pc-hero p,
body.hm-site .pc-hero .sub,
body.hm-site .pc-hero .lede,
body.hm-site .pc-hero .hero-sub,
body.hm-site .pc-hero .subtitle,
body.hm-site .pc-hero .article-meta,
body.hm-site .pa-hero p,
body.hm-site .pa-hero .sub,
body.hm-site .pa-hero .lede,
body.hm-site .pa-hero .hero-sub,
body.hm-site .pa-hero .subtitle,
body.hm-site .pa-hero .article-meta { color: var(--hm-muted, #586976); }
body.hm-site .hero .eyebrow,
body.hm-site .hero .tag,
body.hm-site .hero .article-tag,
body.hm-site .hero .kicker,
body.hm-site .hero .badge,
body.hm-site .article-hero .eyebrow,
body.hm-site .article-hero .tag,
body.hm-site .article-hero .article-tag,
body.hm-site .article-hero .kicker,
body.hm-site .article-hero .badge,
body.hm-site .page-hero .eyebrow,
body.hm-site .page-hero .tag,
body.hm-site .page-hero .article-tag,
body.hm-site .page-hero .kicker,
body.hm-site .page-hero .badge,
body.hm-site .finder-hero .eyebrow,
body.hm-site .finder-hero .tag,
body.hm-site .finder-hero .article-tag,
body.hm-site .finder-hero .kicker,
body.hm-site .finder-hero .badge,
body.hm-site .pc-hero .eyebrow,
body.hm-site .pc-hero .tag,
body.hm-site .pc-hero .article-tag,
body.hm-site .pc-hero .kicker,
body.hm-site .pc-hero .badge,
body.hm-site .pa-hero .eyebrow,
body.hm-site .pa-hero .tag,
body.hm-site .pa-hero .article-tag,
body.hm-site .pa-hero .kicker,
body.hm-site .pa-hero .badge { color: var(--hm-green, #1a6b4a); }

/* Hero descendants were coloured for a dark ground (white labels, translucent
   pills, ghost buttons). On the light heading they inherit ink; small labels
   take the muted token; plain links take green; translucent-white chips and
   pills become white cards. Elements with their own solid fill (primary
   buttons) are untouched because their colour rules name their own class. */
body.hm-site .hero *,
body.hm-site .article-hero *,
body.hm-site .page-hero *,
body.hm-site .finder-hero *,
body.hm-site .pc-hero *,
body.hm-site .pa-hero * { color: inherit; }
body.hm-site .hero .crumb,
body.hm-site .hero .k,
body.hm-site .hero .l,
body.hm-site .hero .lbl,
body.hm-site .hero .label,
body.hm-site .hero .meta,
body.hm-site .hero .hero-meta,
body.hm-site .hero .pre,
body.hm-site .hero .criterion,
body.hm-site .hero label,
body.hm-site .article-hero .crumb,
body.hm-site .article-hero .k,
body.hm-site .article-hero .l,
body.hm-site .article-hero .lbl,
body.hm-site .article-hero .label,
body.hm-site .article-hero .meta,
body.hm-site .article-hero .hero-meta,
body.hm-site .article-hero .pre,
body.hm-site .article-hero .criterion,
body.hm-site .article-hero label,
body.hm-site .page-hero .crumb,
body.hm-site .page-hero .k,
body.hm-site .page-hero .l,
body.hm-site .page-hero .lbl,
body.hm-site .page-hero .label,
body.hm-site .page-hero .meta,
body.hm-site .page-hero .hero-meta,
body.hm-site .page-hero .pre,
body.hm-site .page-hero .criterion,
body.hm-site .page-hero label,
body.hm-site .finder-hero .crumb,
body.hm-site .finder-hero .k,
body.hm-site .finder-hero .l,
body.hm-site .finder-hero .lbl,
body.hm-site .finder-hero .label,
body.hm-site .finder-hero .meta,
body.hm-site .finder-hero .hero-meta,
body.hm-site .finder-hero .pre,
body.hm-site .finder-hero .criterion,
body.hm-site .finder-hero label,
body.hm-site .pc-hero .crumb,
body.hm-site .pc-hero .k,
body.hm-site .pc-hero .l,
body.hm-site .pc-hero .lbl,
body.hm-site .pc-hero .label,
body.hm-site .pc-hero .meta,
body.hm-site .pc-hero .hero-meta,
body.hm-site .pc-hero .pre,
body.hm-site .pc-hero .criterion,
body.hm-site .pc-hero label,
body.hm-site .pa-hero .crumb,
body.hm-site .pa-hero .k,
body.hm-site .pa-hero .l,
body.hm-site .pa-hero .lbl,
body.hm-site .pa-hero .label,
body.hm-site .pa-hero .meta,
body.hm-site .pa-hero .hero-meta,
body.hm-site .pa-hero .pre,
body.hm-site .pa-hero .criterion,
body.hm-site .pa-hero label { color: var(--hm-muted, #586976); }
body.hm-site .hero .crumb a,
body.hm-site .hero .hero-eyebrow,
body.hm-site .hero .accent,
body.hm-site .hero em,
body.hm-site .article-hero .crumb a,
body.hm-site .article-hero .hero-eyebrow,
body.hm-site .article-hero .accent,
body.hm-site .article-hero em,
body.hm-site .page-hero .crumb a,
body.hm-site .page-hero .hero-eyebrow,
body.hm-site .page-hero .accent,
body.hm-site .page-hero em,
body.hm-site .finder-hero .crumb a,
body.hm-site .finder-hero .hero-eyebrow,
body.hm-site .finder-hero .accent,
body.hm-site .finder-hero em,
body.hm-site .pc-hero .crumb a,
body.hm-site .pc-hero .hero-eyebrow,
body.hm-site .pc-hero .accent,
body.hm-site .pc-hero em,
body.hm-site .pa-hero .crumb a,
body.hm-site .pa-hero .hero-eyebrow,
body.hm-site .pa-hero .accent,
body.hm-site .pa-hero em { color: var(--hm-green, #1a6b4a); }
body.hm-site .hero .hero-pill,
body.hm-site .hero .savings-badge,
body.hm-site .hero .hero-badge,
body.hm-site .hero .pa-badge,
body.hm-site .hero .origin-btn,
body.hm-site .hero .criterion,
body.hm-site .article-hero .hero-pill,
body.hm-site .article-hero .savings-badge,
body.hm-site .article-hero .hero-badge,
body.hm-site .article-hero .pa-badge,
body.hm-site .article-hero .origin-btn,
body.hm-site .article-hero .criterion,
body.hm-site .page-hero .hero-pill,
body.hm-site .page-hero .savings-badge,
body.hm-site .page-hero .hero-badge,
body.hm-site .page-hero .pa-badge,
body.hm-site .page-hero .origin-btn,
body.hm-site .page-hero .criterion,
body.hm-site .finder-hero .hero-pill,
body.hm-site .finder-hero .savings-badge,
body.hm-site .finder-hero .hero-badge,
body.hm-site .finder-hero .pa-badge,
body.hm-site .finder-hero .origin-btn,
body.hm-site .finder-hero .criterion,
body.hm-site .pc-hero .hero-pill,
body.hm-site .pc-hero .savings-badge,
body.hm-site .pc-hero .hero-badge,
body.hm-site .pc-hero .pa-badge,
body.hm-site .pc-hero .origin-btn,
body.hm-site .pc-hero .criterion,
body.hm-site .pa-hero .hero-pill,
body.hm-site .pa-hero .savings-badge,
body.hm-site .pa-hero .hero-badge,
body.hm-site .pa-hero .pa-badge,
body.hm-site .pa-hero .origin-btn,
body.hm-site .pa-hero .criterion {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  color: var(--hm-ink, #0d2135);
}
body.hm-site .hero .num,
body.hm-site .hero .n,
body.hm-site .hero .v,
body.hm-site .article-hero .num,
body.hm-site .article-hero .n,
body.hm-site .article-hero .v,
body.hm-site .page-hero .num,
body.hm-site .page-hero .n,
body.hm-site .page-hero .v,
body.hm-site .finder-hero .num,
body.hm-site .finder-hero .n,
body.hm-site .finder-hero .v,
body.hm-site .pc-hero .num,
body.hm-site .pc-hero .n,
body.hm-site .pc-hero .v,
body.hm-site .pa-hero .num,
body.hm-site .pa-hero .n,
body.hm-site .pa-hero .v { color: var(--hm-ink, #0d2135); }

/* Filled actions keep white text on their green fill; the lede id and the
   blog logo mark are coloured by selectors that outrank the class rules. */
body.hm-site .hero .btn-primary,
body.hm-site .hero button,
body.hm-site .hero .cta-btn,
body.hm-site .hero .hero-cta,
body.hm-site .article-hero .btn-primary,
body.hm-site .article-hero button,
body.hm-site .article-hero .cta-btn,
body.hm-site .article-hero .hero-cta,
body.hm-site .page-hero .btn-primary,
body.hm-site .page-hero button,
body.hm-site .page-hero .cta-btn,
body.hm-site .page-hero .hero-cta,
body.hm-site .finder-hero .btn-primary,
body.hm-site .finder-hero button,
body.hm-site .finder-hero .cta-btn,
body.hm-site .finder-hero .hero-cta,
body.hm-site .pc-hero .btn-primary,
body.hm-site .pc-hero button,
body.hm-site .pc-hero .cta-btn,
body.hm-site .pc-hero .hero-cta,
body.hm-site .pa-hero .btn-primary,
body.hm-site .pa-hero button,
body.hm-site .pa-hero .cta-btn,
body.hm-site .pa-hero .hero-cta { color: var(--hm-white, #fff); }
body.hm-site #hero-desc { color: var(--hm-muted, #586976); }
/* The blog logo tile keeps its dark --navy-light fill, so its letters stay white. */
body.hm-site .hero-logo-letters { color: var(--hm-white, #fff); }
/* Ghost buttons were white outlines for a dark hero. */
body.hm-site .hero .btn-ghost,
body.hm-site .hero a.btn-ghost:link,
body.hm-site .hero a.btn-ghost:visited { color: var(--hm-ink, #0d2135); border-color: var(--hm-line, #e3e6e2); }

/* Hover: several pages lighten filled buttons to --teal-light (#5fae86) or
   #0fa593, which leaves their white label at 2.7-3.1:1. Darken instead. */
body.hm-site .hero .btn-primary:hover,
body.hm-site .hero button:hover,
body.hm-site .hero .cta-btn:hover,
body.hm-site .hero .hero-cta:hover,
body.hm-site .article-hero .btn-primary:hover,
body.hm-site .article-hero button:hover,
body.hm-site .article-hero .cta-btn:hover,
body.hm-site .article-hero .hero-cta:hover,
body.hm-site .page-hero .btn-primary:hover,
body.hm-site .page-hero button:hover,
body.hm-site .page-hero .cta-btn:hover,
body.hm-site .page-hero .hero-cta:hover,
body.hm-site .finder-hero .btn-primary:hover,
body.hm-site .finder-hero button:hover,
body.hm-site .finder-hero .cta-btn:hover,
body.hm-site .finder-hero .hero-cta:hover,
body.hm-site .pc-hero .btn-primary:hover,
body.hm-site .pc-hero button:hover,
body.hm-site .pc-hero .cta-btn:hover,
body.hm-site .pc-hero .hero-cta:hover,
body.hm-site .pa-hero .btn-primary:hover,
body.hm-site .pa-hero button:hover,
body.hm-site .pa-hero .cta-btn:hover,
body.hm-site .pa-hero .hero-cta:hover { background: var(--hm-green-dark, #125038); color: var(--hm-white, #fff); }

/* Ghost buttons hover to a light surface, never a dark fill under ink text. */
body.hm-site .hero .btn-ghost:hover,
body.hm-site .hero a.btn-ghost:hover { background: var(--hm-mint, #edf3ee); color: var(--hm-ink, #0d2135); border-color: var(--hm-green, #1a6b4a); }

/* ── Blog index (prototype guides grid) ─────────────────────────────────
   The blog index was built as a dark page (navy body, dark cards, white titles);
   on the base sheet's cream ground its titles vanished (regression from step 5,
   found by the whole-page contrast audit). It now follows the prototype's guides
   page: light left-aligned heading, white card grid, green eyebrow, serif title.
   The decorative logo tile is hidden; copy is unchanged. Only /blog uses these
   classes. */
body.hm-site .hero-logo { display: none; }
body.hm-site .hero .hero-eyebrow { font-size: 11px; letter-spacing: .14em; margin-bottom: 12px; }
body.hm-site .hero h1 em { color: var(--hm-green, #1a6b4a); }
body.hm-site .blog-grid {
  max-width: var(--hm-max-content, 1200px);
  margin: 36px auto 72px;
  padding: 0 var(--hm-gutter, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  box-sizing: border-box;
}
body.hm-site .blog-card,
body.hm-site .blog-card.featured {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 13px;
  padding: 22px;
  box-shadow: none;
  color: var(--hm-ink, #0d2135);
}
body.hm-site .blog-card:hover,
body.hm-site .blog-card.featured:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(23, 59, 33, .06); border-color: var(--hm-line, #e3e6e2); }
/* Image tiles bleed to the card edge: their negative margins must match the card padding. */
body.hm-site .blog-card .blog-card-img { margin: -22px -22px 18px; width: calc(100% + 44px); border-radius: 12px 12px 0 0; }
/* Prototype blog cards carry no media. The undocumented stock photographs were removed
   under A2, so the decorative emoji tiles left on a few cards are hidden too, keeping
   every card in the grid the same shape. */
body.hm-site .blog-card .blog-card-imgph { display: none; }
body.hm-site .blog-card h2 {
  font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
  color: var(--hm-ink, #0d2135);
}
body.hm-site .blog-card p { font-size: 13px; line-height: 1.7; color: var(--hm-muted, #586976); }
body.hm-site .blog-card-tag { font-family: inherit; font-size: 11px; letter-spacing: .08em; color: var(--hm-green, #1a6b4a); }
body.hm-site .blog-card-cta { color: var(--hm-green, #1a6b4a); font-size: 13px; }
body.hm-site .blog-card-meta { color: var(--hm-muted, #586976); border-top-color: var(--hm-line, #e3e6e2); }
body.hm-site .featured-badge,
body.hm-site .saving-pill { background: var(--hm-mint, #edf3ee); border-color: #cfe0d4; color: var(--hm-green-dark, #125038); }
@media (max-width: 750px) {
  body.hm-site .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--hm-gutter-mobile, 20px); }
}
@media (max-width: 500px) {
  body.hm-site .blog-grid { grid-template-columns: 1fr; }
}

/* The blog hero has no inner column: align its children with the card grid. */
body.hm-site .hero:has(> .hero-logo) { padding: 56px max(var(--hm-gutter, 40px), calc((100% - var(--hm-max-content, 1200px)) / 2 + var(--hm-gutter, 40px))) 40px; }
body.hm-site .hero:has(> .hero-logo) > p { margin-left: 0; max-width: 60ch; }
@media (max-width: 750px) { body.hm-site .hero:has(> .hero-logo) { padding: 36px var(--hm-gutter-mobile, 20px) 28px; } }

/* ── Sign-in card (prototype .form-page) ─────────────────────────────────
   Scoped to the card that holds #loginForm, so other .card uses are untouched. */
body.hm-site .card:has(#loginForm) {
  max-width: 590px;
  padding: 40px 38px;
  text-align: left;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-panel, 17px);
  box-shadow: none;
}
body.hm-site .card:has(#loginForm) h1 {
  font: 400 45px/1.05 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.8px;
  color: var(--hm-ink, #0d2135);
  margin-bottom: 12px;
  text-wrap: balance;
}
body.hm-site .card:has(#loginForm) .subtitle { color: var(--hm-muted, #586976); font-size: 15px; line-height: 1.6; }
body.hm-site .card:has(#loginForm) label { color: var(--hm-ink, #0d2135); font-weight: 600; }
body.hm-site .card:has(#loginForm) input[type="email"] {
  min-height: var(--hm-control-min, 44px);
  border: 1px solid var(--hm-field-edge, #7f8c84);
  border-radius: var(--hm-radius-control, 8px);
  color: var(--hm-ink, #0d2135);
}
body.hm-site .card:has(#loginForm) .btn {
  min-height: var(--hm-control-min, 44px);
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-green, #1a6b4a);
  font-weight: 700;
}
body.hm-site .card:has(#loginForm) .btn:hover { background: var(--hm-green-dark, #125038); }
body.hm-site .card:has(#loginForm) .btn:disabled { background: var(--hm-surface-muted, #eef2ef); color: var(--hm-muted, #586976); cursor: not-allowed; }
@media (max-width: 500px) {
  body.hm-site .card:has(#loginForm) { padding: 28px 22px; }
  body.hm-site .card:has(#loginForm) h1 { font-size: 39px; }
}

/* One content column inside every light heading. Many heroes centred each child
   with auto margins (a narrow lede, a centred search box) while the heading was
   now left-aligned, so the children started at different x positions. Every
   direct child now starts at the same column edge (content max 1120px). */
body.hm-site .hero > *,
body.hm-site .article-hero > *,
body.hm-site .page-hero > *,
body.hm-site .finder-hero > *,
body.hm-site .pc-hero > *,
body.hm-site .pa-hero > * {
  margin-left: max(0px, calc((100% - 1120px) / 2));
  margin-right: auto;
  text-align: left;
}
body.hm-site .hero > * > *,
body.hm-site .article-hero > * > *,
body.hm-site .page-hero > * > *,
body.hm-site .finder-hero > * > *,
body.hm-site .pc-hero > * > *,
body.hm-site .pa-hero > * > * { text-align: left; }
/* Inputs inside a light heading: ink text, visible placeholder, white field. */
body.hm-site .hero input,
body.hm-site .hero select,
body.hm-site .hero textarea,
body.hm-site .article-hero input,
body.hm-site .article-hero select,
body.hm-site .article-hero textarea,
body.hm-site .page-hero input,
body.hm-site .page-hero select,
body.hm-site .page-hero textarea,
body.hm-site .finder-hero input,
body.hm-site .finder-hero select,
body.hm-site .finder-hero textarea,
body.hm-site .pc-hero input,
body.hm-site .pc-hero select,
body.hm-site .pc-hero textarea,
body.hm-site .pa-hero input,
body.hm-site .pa-hero select,
body.hm-site .pa-hero textarea { color: var(--hm-ink, #0d2135); background-color: var(--hm-white, #fff); }
body.hm-site .hero input::placeholder,
body.hm-site .hero textarea::placeholder,
body.hm-site .article-hero input::placeholder,
body.hm-site .article-hero textarea::placeholder,
body.hm-site .page-hero input::placeholder,
body.hm-site .page-hero textarea::placeholder,
body.hm-site .finder-hero input::placeholder,
body.hm-site .finder-hero textarea::placeholder,
body.hm-site .pc-hero input::placeholder,
body.hm-site .pc-hero textarea::placeholder,
body.hm-site .pa-hero input::placeholder,
body.hm-site .pa-hero textarea::placeholder { color: #6b7a74; opacity: 1; }

/* ── Readability (step 8a) ────────────────────────────────────────────────
   Component-level contrast defects found by a8-components.js on the adopted
   pages, fixed at their source colour. Mostly pre-existing; listed per
   component in docs/redesign/coverage-inventory.md.

   Legacy muted properties. The pages set --stone/--text-light/--slate/--muted
   to #7a90a4-family greys (2.9-3.3:1 on cream and white). Re-pointed to the
   muted token (5.6:1); the dark grounds that also use them are restored below. */
body.hm-site {
  --stone: var(--hm-muted, #586976);
  --text-light: var(--hm-muted, #586976);
  --slate: var(--hm-muted, #586976);
  --muted: var(--hm-muted, #586976);
  --flat: var(--hm-muted, #586976);
  --down: var(--hm-green, #1a6b4a);
}
/* Muted literals and status colours on light grounds. */
body.hm-site .deal-stat-label,
body.hm-site .deal-stat-note,
body.hm-site .ic-sub,
body.hm-site .blog-img-credit,
body.hm-site .blog-img-credit a,
body.hm-site .disclosure,
body.hm-site .methodology-box h4,
body.hm-site .prediction-badge,
body.hm-site .price-null,
body.hm-site .dv-sub,
body.hm-site .pir-sub,
body.hm-site .pir-t th,
body.hm-site .pir-stat .l,
body.hm-site .live-sub,
body.hm-site .price-table .mid,
body.hm-site .img-caption,
body.hm-site .privacy-note,
body.hm-site .back-link,
body.hm-site .card-no-data,
body.hm-site .no-data-section .section-head,
body.hm-site .live-foot,
body.hm-site .comparison-table td.no { color: var(--hm-muted, #586976); }
body.hm-site .comparison-table td.yes,
body.hm-site .comparison-table .down,
body.hm-site .comparison-table td.us-col { color: var(--hm-green, #1a6b4a); }
body.hm-site .comparison-table td.partial,
body.hm-site .price-table .gold,
body.hm-site .callout strong,
body.hm-site .post-tag,
body.hm-site .pill.gold,
body.hm-site .meta .stars { color: var(--hm-amber, #875519); }
body.hm-site .pill.gold.on { background: var(--hm-amber, #875519); border-color: var(--hm-amber, #875519); color: var(--hm-white, #fff); }
body.hm-site .price-table .high,
body.hm-site .price-table .high span,
body.hm-site .deal-stat-value { color: #9a4a26; }
/* Labels on green buttons: navy on the re-pointed green was 1.7-2.5:1. */
body.hm-site .btn-search,
body.hm-site .btn-cta { color: var(--hm-white, #fff); }
/* Dark bands: faded white text raised to a readable alpha. */
body.hm-site .subscribe-section p,
body.hm-site .subscribe-consent,
body.hm-site .subscribe-consent a,
body.hm-site .ab-kicker,
body.hm-site .pir-kicker,
body.hm-site .wg-kicker,
body.hm-site .dv-note,
body.hm-site .dv-note a,
body.hm-site .dv-code .c-comment { color: rgba(255, 255, 255, .72); }
/* Blog CTA boxes are white-on-navy, but `article h3` gave their heading ink. */
body.hm-site .cta-box h3 { color: inherit; }
/* The developers form box is navy; its intro shares .dv-sub with the light page intro. */
body.hm-site #dv-form-box .dv-sub { color: rgba(255, 255, 255, .72); }
/* The price-check CTA card is navy; --text-light was re-pointed above. */
body.hm-site .cta-card p { color: rgba(255, 255, 255, .78); }
body.hm-site .cta-box p { color: rgba(255, 255, 255, .72); }
body.hm-site .deal-card-header .deal-rating { color: #b5d9bf; }
/* Form fields: the #d4ded4-family borders are 1.2-1.4:1 against their white or
   cream surface, so a field's edge is not perceivable (WCAG 1.4.11 wants 3:1).
   Deviation from the prototype's field border, recorded in the inventory; the
   approved homepage does not load this sheet and is unchanged. */
body.hm-site input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
body.hm-site select,
body.hm-site textarea { border-color: var(--hm-field-edge, #7f8c84); }
/* Tracker capture row: borderless white field, now on a mint panel. */
body.hm-site .cap-row input[type=email] { border: 1px solid var(--hm-field-edge, #7f8c84); }

/* Image reuse policy (src/imagePolicy.js): a removed provider photograph leaves a neutral
   panel where the layout reserves a frame, and nothing where it was inline in an article. */
body.hm-site .noimg { display: none; }
body.hm-site .shot .noimg { display: block; height: 180px; border-radius: 10px; background: var(--hm-surface-muted, #eef2ef); }
body.hm-site .fh-deal .noimg { display: block; }

@media (prefers-reduced-motion: reduce) {
  body.hm-site *,
  body.hm-site *::before,
  body.hm-site *::after { transition-duration: 1ms; animation-duration: 1ms; animation-iteration-count: 1; }
}