/* 2026-10-04 UI audit fixes. Loaded after the other stylesheets on every page. */
.wrap-soft { display: inline-block; }
main :not(.flow-steps) > li > a:not([class]), main td a:not([class]) { text-decoration: underline; }
main h1, main h2, main h3, main h4, main summary, .liability-note, .feature-label { word-break: auto-phrase; }
main summary { text-wrap: pretty; }
.breadcrumb a, .agency a { padding-block: 1.2rem; }
.asterisk-note a { padding-block: .6rem; }
#notice-70plus { margin-inline: max(1.6rem, calc((100% - var(--content-max-width, 1100px)) / 2)); }
@media (min-width: 769px) { .family-cards { align-items: stretch; } }
@media (min-width: 768px) and (max-width: 1131px) { #notice-70plus > .container { padding-inline: 2.4rem; } }
@media (max-width: 767px) {
  #notice-70plus > .container { padding-inline: 0; }
  .btn-primary { background: #117713; }
}
/* 2026-10-04 UI audit (2nd pass). */
/* M3: the illustrations are lazy SVGs without a natural size; reserve the square box so #plans lands where the browser scrolled (same size as after load). */
.risk-item img { width: 100%; aspect-ratio: 1 / 1; }
@media (max-width: 767px) {
  /* M2: in-page links land 12px below the sticky header (scroll-padding-top = header, set by main.js). */
  main [id]:not(input, select, textarea, button) { scroll-margin-top: 12px; }
  /* Until main.js sets --fixed-header the offset fell back to 100px (hash links from another page landed ~60px low). Header = logo (100vw x 128.73/1100) + 1px border. */
  html { scroll-padding-top: max(var(--fixed-header, 0px), calc(100vw * .11703 + 1px)); }
  /* M1/M4: card titles keep a role above the 18px h3 of the mobile rhythm. */
  main .family-card h3 { font-size: 28px !important; line-height: 1.2 !important; }
  main .plan-card h3 { font-size: 22px !important; }
  /* L2/L3: hint and contact-box description stay secondary (14px). */
  #main p.plan-comparison-hint, #main .contact-actions p.support-url.small { font-size: 14px !important; }
}
.plan-comparison-hint, .contact-actions .support-url.small { word-break: auto-phrase; text-wrap: pretty; }
/* L5: at 960-1067px the three-column cards wrapped the toggle label with one character on line 2; a slightly smaller toggle keeps it on one line inside its box. */
@media (min-width: 960px) and (max-width: 1079px) {
  .liability-toggle { padding-inline: .4rem; gap: .5rem; }
  .toggle-text { font-size: 1.5rem; }
}
.toggle-text { word-break: auto-phrase; }
/* The "(free)" note after the accident phone number never splits (as tmn-golf). */
.contact-card span.small { white-space: nowrap; }
/* Landscape phones: one menu button. The header scrolls away there, so the always-reachable fixed one (#floating-menu,
   same drawer) is kept and the header one is hidden (on 844x390 it also sat on the insurer logo). Pages without the
   fixed bar (404) keep the header button. Same rule as tmn-golf 7bbde65. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body:has(#floating-menu) .site-header .menu-toggle { display: none; }
  html { scroll-padding-top: 0; }
}
/* From 768px the fixed buttons are a right-hand column (60px, 1rem from the edge): keep text clear of it. Below 768px they are the bottom bar. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-width: 768px) {
  body:has(#floating-menu) .container { padding-right: calc(60px + 1rem + 8px); }
}