/* public/design/hm-guide.css
 * ─────────────────────────────────────────────────────────────────────────
 * "Guides" family (site redesign, step 3d): the 15 cancellation-policy guides
 * and the 103 legacy-template month pages. All 118 share one inline stylesheet
 * (.bc .hero .ho .hc2 .badge .hsub .sec .sl .statbox .stat .tip .related
 * .cta-box) on /brand.css tokens. Requires hm-tokens.css.
 *
 * Hero photographs removed (acceptance item A2: displayed stock images with no
 * documented permission take the no-image fallback).
 *
 * CONTRACT: every selector is scoped to `body.hm-guide`. Copy, figures,
 * structured data, the AI-answer block and the capture widget are untouched;
 * only the two inline font-family declarations that no stylesheet could
 * override were removed from the markup. Not an overlay page.
 */

body.hm-guide {
  /* Readability (step 8a): the legacy template's --text-light (#7a90a4, 3.0:1 on the
     cream answer panel) is used only on light grounds here. */
  --text-light: var(--hm-muted, #586976);
  background: var(--hm-cream, #faf9f6);
  color: var(--hm-ink, #0d2135);
  font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}

body.hm-guide .bc,
body.hm-guide .sec {
  max-width: 880px;
  padding-left: var(--hm-gutter, 40px);
  padding-right: var(--hm-gutter, 40px);
  box-sizing: border-box;
}
body.hm-guide .bc {
  font-family: inherit;
  font-size: 13px;
  color: var(--hm-muted, #586976);
  margin: 22px auto 18px;
}
body.hm-guide .bc a { color: var(--hm-green, #1a6b4a); }

/* Hero: a solid panel (no photograph); type and frame follow the tokens. */
body.hm-guide .hero {
  max-width: var(--hm-max-hero, 1280px);
  margin: 0 auto;
  /* Flow to content. The page CSS fixes the hero at 380px and bottom-anchors
     its copy absolutely, so the email-capture widget (inserted into the hero)
     pushed the headline above the top edge and clipped it -- pre-existing,
     visible before this family was restyled. */
  height: auto;
  min-height: 320px;
  position: relative;
  border-radius: var(--hm-radius-hero, 24px);
  overflow: hidden;
  /* No-image fallback (A2): the unlicensed stock photo is removed, so the hero
     is a solid ink panel under the existing overlay. */
  background: var(--hm-navy-deep, #09233d);
}
body.hm-guide .ho { background: linear-gradient(180deg, rgba(9, 35, 61, .25) 0%, rgba(9, 35, 61, .88) 100%); }
body.hm-guide .hc2 {
  position: relative;
  inset: auto;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px var(--hm-gutter, 40px) 44px;
  box-sizing: border-box;
  z-index: 1;
}
body.hm-guide .badge {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--hm-radius-pill, 999px);
  padding: 5px 12px;
}
body.hm-guide .hero h1 {
  font: 400 52px/1.06 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.8px;
  text-wrap: balance;
}
body.hm-guide .hsub { font-size: 17px; line-height: 1.55; opacity: 1; color: rgba(255, 255, 255, .86); }

/* Sections. */
body.hm-guide .sec { margin: 44px auto; }
body.hm-guide .sl {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--hm-green, #1a6b4a);
}
body.hm-guide .sec h2 {
  font: 400 34px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.5px;
  color: var(--hm-ink, #0d2135);
  text-wrap: balance;
}
body.hm-guide .sec h3 {
  font: 400 24px/1.25 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-guide .sec p,
body.hm-guide .sec li { font-size: 16px; line-height: 1.7; color: var(--hm-ink, #0d2135); }

/* The priced answer (inline-framed; only its type is ours). */
body.hm-guide .sec strong { color: var(--hm-ink, #0d2135); }

body.hm-guide .statbox { gap: 14px; }
body.hm-guide .stat {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  padding: 18px 20px;
}
body.hm-guide .stat .v {
  font: 400 34px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
}
body.hm-guide .stat .l {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--hm-muted, #586976);
}

body.hm-guide .tip {
  background: var(--hm-amber-bg, #fbf5e9);
  border-left: 4px solid var(--hm-amber, #875519);
  border-radius: 0 var(--hm-radius-control, 8px) var(--hm-radius-control, 8px) 0;
  color: var(--hm-ink, #0d2135);
}
body.hm-guide .tip strong { color: var(--hm-amber, #875519); }

body.hm-guide .cta-box {
  max-width: 880px;
  margin: 44px auto;
  background: var(--hm-navy-deep, #09233d);
  border-radius: var(--hm-radius-panel, 17px);
  padding: 40px 36px;
  box-sizing: border-box;
}
body.hm-guide .cta-box h3 { font: 400 32px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); }
body.hm-guide .cta-box p { color: rgba(255, 255, 255, .78); }
body.hm-guide .cta-btn {
  background: var(--hm-green, #1a6b4a);
  border-radius: var(--hm-radius-control, 8px);
  min-height: var(--hm-control-min, 44px);
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
body.hm-guide .cta-btn:hover { background: var(--hm-green-dark, #125038); opacity: 1; }

body.hm-guide .related {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  padding: 24px 26px;
}
body.hm-guide .related h3 { font: 400 24px/1.2 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); color: var(--hm-ink, #0d2135); }
body.hm-guide .related a { color: var(--hm-green, #1a6b4a); font-size: 15px; }

@media (max-width: 1050px) {
  body.hm-guide .hero { border-radius: 0; }
}
@media (max-width: 750px) {
  body.hm-guide .bc,
  body.hm-guide .sec,
  body.hm-guide .hc2 { padding-left: var(--hm-gutter-mobile, 20px); padding-right: var(--hm-gutter-mobile, 20px); }
  body.hm-guide .hero { min-height: 0; }
  body.hm-guide .hc2 { padding-top: 40px; padding-bottom: 32px; }
  body.hm-guide .hero h1 { font-size: 36px; }
  body.hm-guide .sec h2 { font-size: 28px; }
  body.hm-guide .cta-box { margin-left: var(--hm-gutter-mobile, 20px); margin-right: var(--hm-gutter-mobile, 20px); padding: 28px 22px; }
}
@media (max-width: 500px) {
  body.hm-guide .hero h1 { font-size: 30px; }
  body.hm-guide .stat .v { font-size: 30px; }
}