/* PreArrangements.com — mobile-first, senior-friendly styles */
:root {
  --ink: #1f2a37;
  --ink-soft: #4b5a6b;
  --bg: #fbfaf7;
  --card: #ffffff;
  --accent: #1a6b5a;
  --accent-dark: #12503f;
  --accent-soft: #e4f2ee;
  --gold: #b98a2f;
  --line: #e3e0d8;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
@media (min-width: 700px) { html { font-size: 18px; } }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
h1, h2, h3, .btn, nav, .sans { font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 0.4rem 0 0.6rem; }
h2 { font-size: 1.3rem; margin: 1.6rem 0 0.7rem; }
h3 { font-size: 1.08rem; }
a { color: var(--accent); }
img, video, iframe { max-width: 100%; }

/* Keyboard access and optional senior-friendly display settings. */
.skip-link { position: fixed; z-index: 1000; top: 0.5rem; left: 0.5rem; padding: 0.7rem 1rem; background: #fff; color: #000; border: 3px solid #000; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 4px solid #d49b22; outline-offset: 3px; }
html[data-text-size="large"] { font-size: 20px; }
html[data-text-size="xlarge"] { font-size: 23px; }
html[data-text-size="large"] article.faq-answer, html[data-text-size="xlarge"] article.faq-answer { max-width: 65ch; }
html[data-text-size="large"] .report-page, html[data-text-size="xlarge"] .report-page { max-width: 70ch; }
html[data-text-size="large"] .report-choice-grid, html[data-text-size="xlarge"] .report-choice-grid { column-count: 1; column-rule: none; }
html[data-text-size="large"] .report-row, html[data-text-size="xlarge"] .report-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); line-height: 1.5; }
html[data-text-size="large"] .row-price, html[data-text-size="xlarge"] .row-price { grid-column: 2; }
html[data-text-size="large"] :is(.report-kicker, .report-header .sub, .report-codestrip, .codestrip-label, .codestrip-note, .glance-title, .glance-label, .glance-foot, .report-summary-head span, .section-title, .row-q, .row-choice, .row-price, .report-nextsteps ol, .report-rights p),
html[data-text-size="xlarge"] :is(.report-kicker, .report-header .sub, .report-codestrip, .codestrip-label, .codestrip-note, .glance-title, .glance-label, .glance-foot, .report-summary-head span, .section-title, .row-q, .row-choice, .row-price, .report-nextsteps ol, .report-rights p) { font-size: 0.9rem; }
html[data-text-size="large"] :is(.contact-field small, .contact-privacy, .footer-disclaimer, .footer-links),
html[data-text-size="xlarge"] :is(.contact-field small, .contact-privacy, .footer-disclaimer, .footer-links) { font-size: 0.88rem; }
.enhanced-contrast { --ink: #fff; --ink-soft: #fff; --bg: #000; --card: #000; --accent: #ffeb3b; --accent-dark: #ffeb3b; --accent-soft: #1a1a1a; --gold: #ffeb3b; --line: #fff; color-scheme: dark; }
.enhanced-contrast body, .enhanced-contrast header.site, .enhanced-contrast footer.site { background: #000; color: #fff; }
.enhanced-contrast a:not(.btn):not(.nav-cta) { color: #ffeb3b; text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.18em; }
.enhanced-contrast :is(.card, .report-sheet, .contact-card, .faq-video-poster, .faq-video-poster-card, .modal, .accessibility-panel, input, select, textarea) { background: #000; color: #fff; box-shadow: none; }
.enhanced-contrast :is(.card, .report-sheet, .contact-card, .faq-video-poster-card, .report-glance, .report-rights, input, select, textarea) { border-color: #fff; }
.enhanced-contrast :is(.progress, .report-row) { border-color: #fff; }
.enhanced-contrast :is(.btn, .nav-cta) { background: #ffeb3b !important; color: #000 !important; border: 2px solid #fff; }
.enhanced-contrast .btn.secondary { background: #000 !important; color: #ffeb3b !important; border-color: #ffeb3b; }
.enhanced-contrast :is(.accent-soft, .faq-audio, .share-box, .report-codestrip, .report-nextsteps, .donate-band, .price-range-box) { background: #1a1a1a; color: #fff; }
.enhanced-contrast .cta-band { background: #000; color: #fff; border: 2px solid #ffeb3b; }
.enhanced-contrast .cta-band :is(h2, p) { color: #fff; }
.enhanced-contrast .cta-band .btn { background: #ffeb3b !important; color: #000 !important; border-color: #fff; }
.enhanced-contrast :where(a, button, input, select, textarea, summary):focus-visible { outline-color: #00e5ff; }
.read-aloud-active { outline: 4px solid #b17600; outline-offset: 4px; background: #fff2b8 !important; color: #000 !important; border-radius: 3px; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 720px; }

/* ============ Header: one bar, never wraps on desktop ============ */
header.site {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
header.site .bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 64px;
}
.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;               /* centers the logo text vertically in the bar */
  margin-right: 1.8rem;         /* breathing room before the first menu item */
}
.logo span { color: var(--accent); }
.logo.partner-brand { display: flex; align-items: center; gap: 0.55rem; line-height: 1.1; margin-right: 0.5rem; }
.logo.partner-brand img { max-width: 110px; max-height: 45px; object-fit: contain; }
.partner-logo-preview { display: block; width: auto; max-width: 260px; max-height: 100px; object-fit: contain; border: 1px solid var(--line); padding: 0.5rem; background: #fff; }

nav.main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;              /* mobile: scrolls, never wraps */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
nav.main::-webkit-scrollbar { display: none; }
nav.main a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  white-space: nowrap;
  line-height: 1;
  padding: 0.3rem 0;
  border-top: 2px solid transparent;    /* symmetric with bottom border so text stays vertically centered */
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.faq-menu { display: none; position: relative; flex: 0 0 auto; }
.faq-menu summary {
  display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft);
  cursor: pointer; list-style: none; background: var(--card);
}
.faq-menu summary::-webkit-details-marker { display: none; }
.faq-menu summary svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.faq-menu summary:hover, .faq-menu[open] summary { color: var(--accent); border-color: var(--accent); }
.faq-menu nav {
  position: absolute; z-index: 20; top: calc(100% + 0.45rem); left: 0; width: min(20rem, calc(100vw - 2rem));
  max-height: min(70vh, 30rem); overflow-y: auto; padding: 0.4rem;
  border: 1px solid var(--line); border-radius: 0.65rem; background: var(--card); box-shadow: 0 0.45rem 1.2rem rgba(0,0,0,0.12);
}
.faq-menu nav a { display: block; padding: 0.65rem 0.75rem; border-radius: 0.4rem; color: var(--ink); text-decoration: none; line-height: 1.3; }
.faq-menu nav a:hover { color: var(--accent-dark); background: var(--accent-soft); }
.nav-cta {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  border-bottom: none !important;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent-dark); color: #fff; }
/* Localized category names need substantially more room than English. Hide
   the secondary category strip before it can become a clipped scroll area;
   all categories remain available from the page cards and footer. */
@media (max-width: 1200px) {
  header.site .bar { gap: 0.75rem; }
  .logo { margin-right: auto; }
  nav.main { display: none; }
  .faq-menu { display: block; }
}
@media (max-width: 560px) {
  /* Keep mobile navigation to one balanced row. The same primary action is
     prominently available in the page content, where it has room for every
     translated label without crowding the brand and utility controls. */
  header.site .bar {
    height: 64px;
    gap: 0.45rem;
  }
  .logo { flex: 1 1 auto; min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
  .nav-cta { display: none; }
  .faq-menu nav { position: fixed; top: 4rem; right: 1rem; left: 1rem; width: auto; }
}
@media (max-width: 400px) {
  header.site .bar { gap: 0.35rem; }
  .logo { font-size: 0.9rem; }
  .btn { max-width: 100%; padding-inline: 1rem; white-space: normal; text-align: center; }
}

/* ============ Two-column layout on desktop ============ */
.layout { display: block; padding: 1.4rem 0 0; }
.layout .content { min-width: 0; }
.layout .side { margin-top: 2rem; }
.faq-video-heading { padding-top: 1.4rem; }
.faq-video-layout { padding-top: 0; }
.faq-video-layout .video-wrap:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
  }
  .layout .side { margin-top: 0; position: sticky; top: 1.2rem; }
}

/* Sidebar CTA card */
.side-cta {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.side-cta h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--accent-dark); }
.side-cta p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.95rem; }
.side-cta .fineprint { font-size: 0.82rem; color: var(--ink-soft); margin: 0.6rem 0 0; text-align: center; }
.side-links { margin-top: 1.2rem; }
.side-links h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 0.5rem; }
.side-links a { display: block; padding: 0.35rem 0; font-size: 0.95rem; text-decoration: none; }
.side-links a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  min-height: 48px;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn.small { font-size: 0.95rem; padding: 0.5rem 1rem; min-height: 40px; }
.btn.block { display: block; width: 100%; text-align: center; }

/* ============ Hero (homepage) ============ */
.hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 1.8rem 0 1.2rem;
}
.hero h1 { font-size: 1.8rem; margin: 0 0 0.5rem; }
.hero p.lead { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.hero .fineprint { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.6rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.hero-photo {
  width: 100%;
  align-self: stretch;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(31, 42, 55, 0.08);
}
@media (max-width: 899px) {
  .hero-photo { max-height: 340px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 3fr 2fr; gap: 3rem; padding: 2.6rem 0 1.8rem; }
  .hero h1 { font-size: 2.2rem; }
}

/* ============ Cards ============ */
.card-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.card-grid .card { margin-bottom: 0; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(26, 107, 90, 0.12); }
.card h3 { margin: 0 0 0.3rem; color: var(--accent-dark); }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ============ FAQ list ============ */
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-list li { border-bottom: 1px solid var(--line); }
.faq-list li:last-child { border-bottom: none; }
.faq-list a {
  display: block;
  padding: 0.75rem 0.4rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.03rem;
}
.faq-list a:hover { color: var(--accent); background: var(--accent-soft); }
.faq-list a::before { content: '❯ '; color: var(--gold); }
.faq-summary-item { font-size: 0.92rem; color: var(--ink-soft); display: block; margin-top: 0.2rem; }

/* Inline audio player on FAQ pages — calm card matching the site's senior-friendly tone */
.faq-audio {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin: 0.4rem 0 1.1rem;
}
.faq-audio-label {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-dark);
  white-space: nowrap;
}
.faq-audio audio { flex: 1 1 240px; min-width: 0; height: 44px; }

/* ============ Article ============ */
article.faq-answer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
article.faq-answer > *:first-child { margin-top: 0; }
article.faq-answer table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
article.faq-answer th, article.faq-answer td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; }
article.faq-answer th { background: var(--accent-soft); font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
article.faq-answer li { margin-bottom: 0.4rem; }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; margin: 1rem 0; border-radius: var(--radius); overflow: hidden; }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.faq-video-poster {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent-soft) 65%, transparent) 0 14%, transparent 36%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--gold) 12%, transparent) 0 12%, transparent 33%),
    linear-gradient(145deg, var(--bg), var(--card));
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.faq-video-poster[hidden] { display: none; }
.faq-video-poster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1rem);
  width: min(82%, 31rem);
  min-height: min(64%, 15rem);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 14px 38px rgba(31, 42, 55, 0.1);
}
.faq-video-prompt { color: var(--ink); font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
.faq-video-play {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(62px, 9vw, 84px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-dark) 28%, transparent);
  transition: transform 160ms ease, background 160ms ease;
}
.faq-video-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-top: clamp(10px, 1.8vw, 15px) solid transparent;
  border-bottom: clamp(10px, 1.8vw, 15px) solid transparent;
  border-left: clamp(16px, 2.8vw, 24px) solid #fff;
  transform: translate(-42%, -50%);
}
.faq-video-poster:hover .faq-video-play { background: var(--accent-dark); transform: scale(1.06); }
.faq-video-poster:hover .faq-video-poster-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 16px 42px rgba(31, 42, 55, 0.14); }
.faq-video-poster:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .faq-video-play { transition: none; }
  .faq-video-poster:hover .faq-video-play { transform: none; }
}

.breadcrumb { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.4rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.breadcrumb a { color: var(--ink-soft); }

/* ============ Compact CTA band (bottom of content) ============ */
.cta-band {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
}
.cta-band .cta-copy { flex: 1 1 260px; }
.cta-band h2 { margin: 0 0 0.2rem; color: #fff; font-size: 1.15rem; }
.cta-band p { margin: 0; color: #dcefe9; font-size: 0.95rem; }
.cta-band .btn { background: #fff; color: var(--accent-dark); flex: 0 0 auto; }
.cta-band .btn:hover { background: var(--accent-soft); }
@media (min-width: 900px) {
  .content > .cta-band { display: none; }  /* desktop: sidebar CTA covers it */
}

/* ============ Wizard ============ */
.wizard { max-width: 560px; margin: 0 auto; padding: 1.2rem 0 3rem; }
.progress { background: var(--line); border-radius: 99px; height: 10px; margin: 0.8rem 0 1rem; overflow: hidden; }
.progress > div { background: var(--gold); height: 100%; border-radius: 99px; transition: width 0.3s; }
.wizard h1 { text-align: center; margin: 0.8rem 0 0.4rem; }
.wizard .help { text-align: center; color: var(--ink-soft); margin: 0 0 1.2rem; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--ink);
  min-height: 92px;
}
.option-btn:hover, .option-btn:focus { border-color: var(--accent); background: var(--accent-soft); outline: none; }
/* Icons sit quieter than the words beside them: 1.25rem next to a 1.05rem
   label, never louder. Emoji fallbacks inherit the same size. */
.option-btn .icon { font-size: 1.25rem; flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent); }

/* Inline SVG icons from partials/icons.ejs. Stroked outlines that inherit
   colour, so they match --accent everywhere and print cleanly. */
.icon-svg {
  width: 1.55em;
  height: 1.55em;
  flex: 0 0 auto;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-svg .fill { fill: currentColor; stroke: currentColor; }
.option-btn:hover .icon, .option-btn:focus .icon { color: var(--accent-dark); }
/* Small inline icon for buttons and labels (print/save/share/lock). */
.icon-inline { width: 1.15em; height: 1.15em; vertical-align: -0.18em; margin-right: 0.4em; }
.option-btn .label { font-weight: 700; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.option-btn .desc { font-size: 0.92rem; color: var(--ink-soft); display: block; }
.wizard .back { display: inline-block; margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.95rem; }
.step-image { display: block; width: 100%; border-radius: var(--radius); margin: 0 0 1.2rem; border: 1px solid var(--line); }

/* Final wizard step: a compact, clearly bounded response area that remains
   fully visible on a typical laptop screen. */
.contact-step { max-width: 720px; padding-top: 0.65rem; }
.contact-step .progress { margin: 0.45rem 0 0.65rem; }
.contact-step h1 { margin-top: 0.35rem; }
.contact-step .help { max-width: 38rem; margin: 0 auto 0.75rem; font-size: 0.94rem; line-height: 1.45; }
.contact-card { padding: 1rem 1.15rem 1.15rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(31, 42, 55, 0.07); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 0.9rem; }
.contact-card .contact-field label { margin: 0 0 0.2rem; font-size: 0.88rem; line-height: 1.3; }
.contact-field label span, .contact-field small { color: var(--ink-soft); font-weight: 400; }
.contact-field small { display: block; margin-top: 0.12rem; font-size: 0.72rem; line-height: 1.25; }
.contact-card input[type=text], .contact-card input[type=email], .contact-card input[type=tel] { padding: 0.55rem 0.65rem; }
.contact-privacy { margin: 0.65rem 0; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.35; }
.contact-card .btn { margin-top: 0; padding-block: 0.65rem; }
.contact-step .back { margin-top: 0.55rem; }
@media (max-width: 560px) {
  .contact-fields { grid-template-columns: 1fr; gap: 0.5rem; }
  .contact-card { padding: 0.85rem 0.9rem 1rem; }
}

/* Share box on report */
.share-box { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.share-box label { font-weight: 700; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; display: block; margin-bottom: 0.4rem; }
.share-box .share-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.share-box input { flex: 1 1 220px; font-size: 0.95rem; padding: 0.6rem 0.7rem; border: 2px solid var(--line); border-radius: 8px; }

/* ============ Forms ============ */
form.stack label { display: block; font-weight: 700; margin: 1rem 0 0.3rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=tel],
form.stack input[type=password], form.stack input[type=number], form.stack select, form.stack textarea {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
}
form.stack input:focus, form.stack select:focus, form.stack textarea:focus { border-color: var(--accent); outline: none; }
.feedback-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-card { max-width: 38rem; padding: 1.2rem 1.4rem 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(31, 42, 55, 0.06); }
.feedback-card label:first-of-type { margin-top: 0; }
.feedback-prompt { margin: 0 0 0.55rem; color: var(--ink-soft); font-size: 0.92rem; }
.error { background: #fdecea; color: #a4271c; border: 1px solid #f3bcb6; border-radius: 8px; padding: 0.7rem 1rem; margin: 1rem 0; }
.notice { background: var(--accent-soft); color: var(--accent-dark); border-radius: 8px; padding: 0.7rem 1rem; margin: 1rem 0; }

/* ============ Personal plan / PDF ============ */
.report-page { max-width: 860px; margin: 0 auto; }
.report { display: grid; gap: 1.2rem; }
.report-sheet { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.45rem 1.6rem 2.8rem; box-shadow: 0 8px 28px rgba(31, 42, 55, 0.06); }
.report-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; border-top: 5px solid var(--accent); border-bottom: 1px solid var(--line); padding: 0.45rem 0 0.5rem; margin-bottom: 0.5rem; }
.report-brand { grid-column: 2; font-weight: 750; color: var(--ink); font-size: 0.85rem; text-align: right; }
.report-identity { grid-column: 1; grid-row: 1; min-width: 0; }
.report-brand span { color: var(--accent); }
.report-brand img { max-width: 90px; max-height: 32px; object-fit: contain; vertical-align: middle; margin-right: 0.4rem; }
.report-brand small { display: block; text-align: right; font-size: 0.52rem; color: var(--ink-soft); font-weight: 500; }
.report-kicker { margin: 0 0 0.15rem; color: var(--accent-dark); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.report-header h1 { margin: 0.05rem 0; font-size: 1.45rem; line-height: 1.1; }
.report-header .sub { margin: 0.08rem 0 0; color: var(--ink-soft); font-size: 0.68rem; line-height: 1.3; overflow-wrap: anywhere; }
.report-header .contact-line { font-size: 0.78rem; overflow-wrap: anywhere; }

.report-codestrip { display: grid; grid-template-columns: auto auto 1fr; gap: 0.35rem 1.2rem; align-items: center;
  background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 0.38rem 0.65rem; margin: 0 0 0.5rem; font-size: 0.72rem; }
.report-codestrip > div:not(.codestrip-note) { display: flex; flex-direction: column; }
.codestrip-label { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.62rem; color: var(--ink-soft); }
.codestrip-code { font-size: 0.88rem; letter-spacing: 0.06em; }
.codestrip-note { justify-self: end; max-width: 20rem; font-size: 0.65rem; line-height: 1.25; color: var(--ink-soft); }
.report-intro { font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); margin: 0 0 0.75rem; }

.report-glance { border: 1px solid #cfd8d3; border-radius: 7px; padding: 0.52rem 0.7rem; margin-bottom: 0.65rem; }
.glance-title { margin: 0 0 0.3rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dark); }
.glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem 0.8rem; }
.glance-cell { display: flex; flex-direction: column; gap: 0.05rem; border-left: 2px solid var(--gold); padding-left: 0.45rem; min-width: 0; }
.glance-label { font-size: 0.59rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.glance-value { font-weight: 700; font-size: 0.82rem; line-height: 1.25; }
.glance-total .glance-value { color: var(--accent-dark); }
.glance-foot { margin: 0.25rem 0 0; font-size: 0.6rem; line-height: 1.25; }

.report-summary-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--accent); margin-bottom: 0.45rem; }
.report-summary-head h2 { margin: 0; padding-bottom: 0.25rem; font-size: 0.95rem; }
.report-summary-head span { font-size: 0.62rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.report-choice-grid { column-count: 2; column-gap: 1.1rem; column-rule: 1px solid var(--line); }
.report-section { display: inline-block; width: 100%; margin-bottom: 0.48rem; break-inside: avoid; min-width: 0; }
.section-title { margin: 0 0 0.1rem; padding: 0 0 0.15rem; border-bottom: 1px solid var(--gold);
  font-size: 0.66rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); }
.report-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) 6.55rem; gap: 0.28rem; align-items: baseline; padding: 0.28rem 0; border-bottom: 1px solid #ece9e3; break-inside: avoid; line-height: 1.25; }
.report-row:last-child { border-bottom: none; }
.row-q { min-width: 0; font-size: 0.61rem; color: var(--ink-soft); }
.row-choice { min-width: 0; padding-left: 0.4rem; border-left: 1px solid #dedbd4; font-weight: 700; font-size: 0.67rem; }
.row-price { min-width: 0; padding-left: 0.25rem; padding-right: 0.08rem; border-left: 1px solid #dedbd4; text-align: right; font-weight: 700; color: var(--accent-dark); font-size: 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-estimate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f6f4ef; border-top: 2px solid var(--gold); padding: 0.5rem 0.65rem; margin-top: 0.45rem; font-size: 0.74rem; }
.report-estimate span { display: flex; flex-direction: column; }
.report-estimate small { color: var(--ink-soft); font-weight: 400; font-size: 0.62rem; }
.report-estimate > strong { color: var(--accent-dark); font-size: 1rem; }

.report-back-header { display: flex; justify-content: space-between; gap: 1rem; border-top: 6px solid var(--accent); border-bottom: 2px solid var(--gold); padding: 0.75rem 0 0.55rem; margin-bottom: 0.65rem; }
.report-back-header h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.back-identity { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.72rem; color: var(--ink-soft); }
.back-identity strong { color: var(--ink); font-size: 0.82rem; }
.back-intro { margin-bottom: 0.65rem; }
.report-detail-columns { column-count: 2; column-gap: 1.4rem; column-rule: 1px solid var(--line); }
.report-detail-section { display: inline-block; width: 100%; margin-bottom: 0.55rem; break-inside: avoid; }
.report-detail-item { padding: 0.25rem 0 0.3rem; break-inside: avoid; }
.report-detail-item h4 { margin: 0; font-size: 0.73rem; line-height: 1.25; color: var(--ink); }
.report-detail-item p { margin: 0.08rem 0 0; font-size: 0.65rem; line-height: 1.38; color: var(--ink-soft); }
.report-nextsteps { margin-top: 0.45rem; padding: 0.5rem 0.65rem; background: var(--accent-soft); border-left: 4px solid var(--accent); color: var(--ink); }
.report-nextsteps h3, .report-rights h3 { margin: 0 0 0.25rem; font-size: 0.75rem; }
.report-nextsteps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 0; padding-left: 1rem; font-size: 0.64rem; line-height: 1.35; }
.report-bottom { display: block; }
.report-rights { margin-top: 0.3rem; border: 1px solid var(--line); padding: 0.3rem 0.55rem; }
.report-rights p { margin: 0; color: var(--ink-soft); font-size: 0.63rem; line-height: 1.35; }
.report-sheet-footer { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0.8rem; display: flex; justify-content: space-between; padding-top: 0.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; }
.print-actions { text-align: center; margin: 1.4rem 0; }

@media (max-width: 620px) {
  .report-sheet { padding: 1rem 1rem 2.6rem; }
  .report-brand { float: none; margin-bottom: 0.5rem; }
  .report-codestrip { grid-template-columns: 1fr 1fr; }
  .codestrip-note { grid-column: 1 / -1; justify-self: start; }
  .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-choice-grid { column-count: 1; column-rule: none; }
  .report-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) 6.55rem; }
  .report-detail-columns { column-count: 1; }
  .report-nextsteps ol { grid-template-columns: 1fr; gap: 0.25rem; }
  .report-sheet-footer { left: 1rem; right: 1rem; }
}

@page { size: letter portrait; margin: 0.35in; }
@media print {
  header.site, footer.site, .print-actions, .cta-band, .share-box, .side,
  .donate-band, .secure-band, .modal-backdrop { display: none !important; }
  html, body { font-size: 15px; background: #fff; }
  main.container { max-width: none; padding: 0; }
  .report-page, .report { max-width: none; margin: 0; display: block; }
  .report-sheet { width: 100%; height: auto; min-height: 0; overflow: visible; border: none; border-radius: 0; box-shadow: none; padding: 0; break-inside: avoid-page; page-break-inside: avoid; }
  .report-choice-grid { column-fill: balance; }
  .report-section, .report-row, .report-glance, .report-codestrip, .report-detail-item { break-inside: avoid; }
  .report-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; align-items: stretch; margin-top: 0.45rem; break-inside: avoid; page-break-inside: avoid; }
  .report-bottom .report-rights { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0.5rem 0.65rem; border-color: #d8d5ce; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* FAQ summary, pros/cons, price range */
.faq-summary { font-size: 1.1rem; color: var(--ink-soft); margin: 0.3rem 0 1rem; }
.pros-cons { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.2rem 0; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros, .cons { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.pros h3 { color: var(--ok); margin: 0 0 0.5rem; }
.cons h3 { color: #a4271c; margin: 0 0 0.5rem; }
.pros ul, .cons ul { margin: 0; padding-left: 1.2rem; }
.pros li, .cons li { margin: 0.3rem 0; font-size: 0.95rem; }
.price-range-box { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.8rem 1.2rem; margin: 1.2rem 0; font-size: 0.95rem; }
.reviewed-date { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.5rem; }

/* ============ Footer ============ */
footer.site {
  border-top: none;
  margin-top: 2.5rem;
  padding: 1.8rem 0 1.1rem;
  background: linear-gradient(180deg, var(--accent-soft) 0, #f7f8f6 100%);
  color: var(--ink-soft);
  font-size: 0.88rem;
}
footer.site .cols { display: grid; gap: 1.5rem; padding-top: 0.2rem; }
footer.site p { margin: 0; }
footer.site a { color: var(--ink-soft); }
.footer-about { min-width: 0; }
.footer-brand { color: var(--accent-dark); font-size: 1.05rem; line-height: 1.25; }
.footer-tagline { margin-top: 0.2rem !important; line-height: 1.4; }
.footer-disclaimer { margin-top: 0.75rem !important; font-size: 0.76rem; line-height: 1.45; font-style: italic; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; }
.footer-links a { text-underline-offset: 0.18em; }
.powered-by { margin-top: 1.25rem; padding-top: 0; text-align: center; font-size: 0.7rem; letter-spacing: 0.02em; color: var(--ink-soft); opacity: 0.82; }

/* Low-key footer buttons: outlined and muted so they read as tappable
   without competing with the main CTA. 44px tall to stay a comfortable
   tap target for the seniors this site is built for. */
.footer-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-soft);
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-quiet:hover, .btn-quiet:focus {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
  outline: none;
}
@media (min-width: 900px) {
  footer.site .cols { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); align-items: center; gap: 2.5rem; }
  .footer-nav { align-items: flex-end; }
  .footer-actions, .footer-links { justify-content: flex-end; }
}


/* ============ Admin ============ */
.admin body, body.admin { background: #f4f6f8; }
.admin-nav { background: var(--ink); padding: 0.6rem 0; }
.admin-nav .container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.admin-nav a { color: #cfd8e3; text-decoration: none; font-size: 0.95rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.admin-nav a:hover, .admin-nav a.on { color: #fff; }
.admin-nav .brand { color: #fff; font-weight: 700; }
table.admin { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.92rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
table.admin th, table.admin td { border: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
table.admin th { background: #eef1f4; }
.admin-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 1rem; }
.admin-page-head h1, .admin-page-head p { margin: 0; }
.admin-page-head p { margin-top: 0.2rem; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.admin-table-wrap table.admin { border: 0; }
.admin-table-wrap table.admin th, .admin-table-wrap table.admin td { border-width: 0 0 1px; }
.admin-table-wrap table.admin th { padding: 0.65rem 0.75rem; color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-table-wrap table.admin td { padding: 0.75rem; vertical-align: middle; }
.admin-table-wrap table.admin tbody tr:last-child td { border-bottom: 0; }
.admin-table-wrap table.admin tbody tr:hover { background: #fafbf9; }
.leads-table { min-width: 920px; }
.leads-table small { display: block; margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.76rem; line-height: 1.3; }
.lead-date { width: 7.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lead-person { min-width: 9rem; }
.lead-contact { min-width: 13rem; overflow-wrap: anywhere; }
.lead-contact a { text-underline-offset: 0.16em; }
.lead-brand { min-width: 10rem; }
.lead-plan { min-width: 8.5rem; }
.lead-plan > strong { font-size: 0.82rem; letter-spacing: 0.04em; }
.lead-action { width: 7.5rem; text-align: right !important; white-space: nowrap; }
.admin-action-link { display: inline-block; padding: 0.4rem 0.65rem; border: 1px solid var(--accent); border-radius: 7px; color: var(--accent-dark); font-weight: 650; text-decoration: none; }
.admin-action-link:hover, .admin-action-link:focus { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 1px; }
.inline-form { display: inline; }
.pill { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 99px; font-size: 0.8rem; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.pill.on { background: #d9f2e5; color: #14532d; }
.pill.off { background: #fde8e8; color: #7f1d1d; }
.step-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.step-card h3 { margin-top: 0; }
.muted { color: var(--ink-soft); font-size: 0.88rem; }
details.editor { margin: 0.4rem 0; }
details.editor summary { cursor: pointer; color: var(--accent); font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.92rem; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ============ Simple pages (retrieve, donate, premium) ============ */
.narrow-page { max-width: 620px; margin: 0 auto; padding: 1.6rem 0 3rem; }
.narrow-page h1 { margin-bottom: 0.4rem; }
.narrow-page .lead { color: var(--ink-soft); font-size: 1.05rem; margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.stack label { font-weight: 700; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.95rem; }
.stack input[type=text], .stack input[type=email], .stack input[type=tel] {
  padding: 0.65rem 0.8rem; border: 2px solid var(--line); border-radius: 8px; font-size: 1rem;
}

/* ============ Donation ============ */
.donate-band { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1.4rem 0; text-align: center; }
.donate-band h2 { margin: 0 0 0.4rem; color: var(--accent-dark); font-size: 1.25rem; }
.donate-band p { color: var(--ink-soft); margin: 0 0 1rem; }
.donate-big { font-size: 1.15rem; padding: 0.8rem 1.8rem; background: var(--ok, #14532d); }
.donate-card { max-width: 26rem; margin-top: 1.25rem; padding: 1.15rem 1.3rem 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(31, 42, 55, 0.07); }
.donate-card > label:first-child { margin-top: 0; }
.donate-card > label { margin-top: 0.75rem; }
.donate-card .btn { margin-top: 0.85rem; }
.donate-note { margin: 0.45rem 0 0; font-size: 0.85rem; line-height: 1.4; }
.amount-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.amount-btn { flex: 1 1 auto; min-width: 70px; padding: 0.6rem 0.8rem; border: 2px solid var(--line); border-radius: 8px; background: #fff; font-size: 1rem; cursor: pointer; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.amount-btn:hover, .amount-btn:focus { border-color: var(--accent); background: var(--accent-soft); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-backdrop[hidden] { display: none; }
.modal { background: #fff; border-radius: var(--radius); padding: 1.4rem 1.6rem; max-width: 420px; width: 100%; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.modal h3 { margin-top: 0; }
.modal-close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }

/* Report: on-screen QR hidden; print-only donate block */
.report-donate { display: none; }
@media print {
  .donate-band, .secure-band, .modal-backdrop { display: none !important; }
  .report-donate.print-only { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.5rem 0.65rem; border: 1px solid #d8d5ce; }
  .report-donate h3 { margin: 0 0 0.2rem; font-size: 0.75rem; color: var(--ink); }
  .report-donate p { max-width: none; margin: 0; font-size: 0.6rem; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
  .report-donate .qr { width: 88px; height: 88px; flex: 0 0 auto; }
}

/* Premium / secure storage band */
.secure-band { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.4rem 0; }
.secure-band h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.secure-band p { color: var(--ink-soft); margin: 0 0 0.8rem; }
.secure-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tier-chip { background: var(--accent-soft); border-radius: 99px; padding: 0.25rem 0.8rem; font-size: 0.9rem; }
.tier-picker { border: none; margin: 0; padding: 0; }
.tier-picker legend { font-weight: 700; margin-bottom: 0.6rem; }
.tier-option { display: flex; align-items: center; gap: 0.8rem; border: 2px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.6rem; cursor: pointer; }
.tier-option:hover { border-color: var(--accent); }
.tier-option input { accent-color: var(--accent); }
.tier-years { font-weight: 700; }
.tier-price { margin-left: auto; font-weight: 700; color: var(--accent-dark); }
.tier-note { font-size: 0.85rem; color: var(--ink-soft); }

/* ============ State boards (public page) ============ */

/* Screen-reader-only text: lets each link carry its state name and an
   "opens in a new tab" warning without repeating it visually. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filter box (revealed by JS only) */
.board-toolbar { margin: 1.5rem 0 1rem; }
.board-toolbar label {
  display: block;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.board-toolbar input[type=search] {
  width: 100%;
  max-width: 22rem;
  font-size: 1.05rem;
  font-family: inherit;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  min-height: 48px;
}
.board-toolbar input[type=search]:focus { border-color: var(--accent); outline: none; }
.board-count { font-size: 0.85rem; margin: 0.4rem 0 0; }

/* One card per state */
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.board-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.board-card[hidden] { display: none; }
.board-card:hover { border-color: var(--accent); }

/* Stylized two-letter state badge — the scanning anchor for the list */
.state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.board-state {
  font-size: 1.12rem;
  margin: 0 0 0.15rem;
  line-height: 1.25;
}
.board-name { margin: 0 0 0.1rem; font-size: 0.98rem; }
.board-parent, .board-phone { margin: 0 0 0.1rem; font-size: 0.9rem; }
.board-notes { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.45; }
.board-hint { display: block; font-size: 0.82rem; margin: 0.5rem 0 0; }

/* Links as real buttons: 44px targets, obvious affordance, wrap on narrow
   screens instead of forcing a horizontal scroll. */
.board-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 0; }
.board-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--accent-dark);
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.board-btn:hover, .board-btn:focus { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 1px; }
.board-btn .icon-svg { color: var(--accent); }
/* Complaint is the escalation action — warmer accent so it reads as distinct */
.board-btn-alert { border-color: var(--gold); color: #7a5714; }
.board-btn-alert .icon-svg { color: var(--gold); }
.board-btn-alert:hover, .board-btn-alert:focus { background: #fdf5e5; outline-color: var(--gold); }

.board-empty { margin: 1rem 0 0; }
.board-disclaimer { margin-top: 1.2rem; font-size: 0.85rem; }

@media (min-width: 700px) {
  .board-card { padding: 1rem 1.2rem; gap: 1.1rem; }
}

/* State boards admin */
.board-admin-list { display: flex; flex-direction: column; gap: 1rem; }
.board-row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
.board-state { font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.board-state .muted { display: block; }
.board-fields { display: flex; flex-direction: column; gap: 0.4rem; }
.board-fields label { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.board-fields input { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.92rem; }
@media (max-width: 700px) { .board-row { grid-template-columns: 1fr; } }

/* Screen-only / print-only helpers */
.screen-only { }
@media print { .screen-only { display: none !important; } }
.print-only { display: none; }
@media print { .print-only { display: block; } }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.stat-cards .card { text-align: center; margin: 0; }
.stat-cards .num { font-size: 2rem; font-weight: 700; color: var(--accent-dark); font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
/* Compact language menu keeps the primary CTA at the far right. */
.language-menu { position: relative; flex: 0 0 auto; }
.language-menu summary {
  display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft);
  cursor: pointer; font: 700 .72rem/1 -apple-system, 'Segoe UI', sans-serif;
  list-style: none; background: var(--card);
}
.language-menu summary svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary:hover, .language-menu[open] summary { color: var(--accent); border-color: var(--accent); }
.language-menu nav {
  position: absolute; z-index: 20; top: calc(100% + .45rem); right: 0; min-width: 8.5rem;
  padding: .35rem; border: 1px solid var(--line); border-radius: .55rem;
  background: var(--card); box-shadow: 0 .45rem 1.2rem rgba(0,0,0,.12);
}
.language-menu nav a { display: block; padding: .55rem .7rem; border-radius: .35rem; white-space: nowrap; text-decoration: none; }
.language-menu nav a:hover { background: var(--accent-soft); }
.language-menu nav a[aria-current="page"] { color: var(--accent-dark); font-weight: 700; }

/* Accessibility menu and page reader */
.accessibility-menu { position: relative; flex: 0 0 auto; }
.accessibility-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); cursor: pointer; font: 800 0.82rem/1 -apple-system, 'Segoe UI', sans-serif; list-style: none; background: var(--card); }
.accessibility-menu summary::-webkit-details-marker { display: none; }
.accessibility-menu summary:hover, .accessibility-menu[open] summary { color: var(--accent-dark); border-color: var(--accent); }
.accessibility-panel { position: absolute; z-index: 30; top: calc(100% + 0.45rem); right: 0; width: min(22rem, calc(100vw - 2rem)); padding: 1rem; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 0.6rem 1.5rem rgba(0,0,0,0.2); font: 0.9rem/1.4 -apple-system, 'Segoe UI', sans-serif; }
.accessibility-panel fieldset { padding: 0; margin: 0 0 0.8rem; border: 0; }
.accessibility-panel legend, .reader-controls > strong { display: block; margin-bottom: 0.4rem; font-weight: 700; }
.accessibility-choice-group, .reader-controls > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.accessibility-panel button, .accessibility-panel select { min-height: 44px; padding: 0.45rem 0.65rem; border: 2px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.accessibility-panel button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.accessibility-toggle { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; margin-bottom: 0.8rem; font-weight: 700; }
.accessibility-toggle input { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); }
.reader-controls { padding-top: 0.8rem; border-top: 1px solid var(--line); }
.reader-controls > label { display: inline-block; margin: 0.65rem 0.35rem 0 0; }
.accessibility-reset { width: 100%; margin-top: 0.8rem; }
.transcript-link { margin: -0.35rem 0 1rem; }
@media (max-width: 760px) {
  .logo { font-size: 1rem; }
  .language-menu summary { min-height: 44px; }
}
@media print {
  .accessibility-menu, .skip-link, .transcript-link { display: none !important; }
  html[data-text-size="large"], html[data-text-size="xlarge"] { font-size: 15px; }
  html[data-text-size="large"] .report-page, html[data-text-size="xlarge"] .report-page { max-width: none; }
  html[data-text-size="large"] .report-choice-grid, html[data-text-size="xlarge"] .report-choice-grid { column-count: 2; column-rule: 1px solid var(--line); }
  html[data-text-size="large"] :is(.report-kicker, .report-header .sub, .report-codestrip, .codestrip-label, .codestrip-note, .glance-title, .glance-label, .glance-foot, .report-summary-head span, .section-title, .row-q, .row-choice, .row-price, .report-nextsteps ol, .report-rights p),
  html[data-text-size="xlarge"] :is(.report-kicker, .report-header .sub, .report-codestrip, .codestrip-label, .codestrip-note, .glance-title, .glance-label, .glance-foot, .report-summary-head span, .section-title, .row-q, .row-choice, .row-price, .report-nextsteps ol, .report-rights p) { font-size: revert; }
}
html[lang="zh-Hans"] body { font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }