/* ============================================================================
   email-decision-record-product.css — the Email Decision Record
   product/descriptor page on the apex host.
   Extends /css/village-apps.css: consumes its tokens and shared chrome
   (header.site, .wrap, footer.site, .hero, .band, .cta-band, .skip-link,
   .lang-switch, .theme-btn, .overlay) exactly as family-pricing.css/about.css
   already do. This sheet defines only what this page adds on top.
   ============================================================================ */

/* ---- Self-hosted Atkinson Hyperlegible (body) — same block every product page carries ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: local('Atkinson Hyperlegible'),
       url('/fonts/atkinson/atkinson-hyperlegible-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: local('Atkinson Hyperlegible Bold'),
       url('/fonts/atkinson/atkinson-hyperlegible-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400; font-display: swap;
  src: local('Atkinson Hyperlegible Italic'),
       url('/fonts/atkinson/atkinson-hyperlegible-italic.woff2') format('woff2');
}
body { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; }

html { scroll-padding-top: 4.5rem; }

.hero--edr .wrap { grid-template-columns: 1fr; padding-block: var(--s12); }
.hero--edr h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem); max-width: 26ch; }
.hero--edr .sub { max-width: 60ch; font-size: var(--t-lg); }

/* The one limit sentence this page states (stated once, where its
   absence would mislead) — set apart visually as a qualifier, never buried in body copy. */
.limit-note { font-style: italic; color: var(--ink-soft); max-width: 60ch; margin-top: var(--s4); }

.want-it-list { max-width: 60ch; margin: var(--s4) auto 0; padding-left: 1.2em; }
.want-it-list li { margin-bottom: var(--s2); }

section.band { padding-block: var(--s12); }
.band-head { margin-bottom: var(--s8); text-align: center; }
.band-head h2 { font-size: var(--t-xl); letter-spacing: -.01em; }
.band-head .lede { margin: var(--s2) auto 0; color: var(--ink-soft); max-width: 60ch; }

.cta-band { text-align: center; padding-block: var(--s16); border-top: 1px solid var(--line); }

/* ---- WCAG audit fixes ---- */

/* village-apps.css defines no .provisional-note rule, and this page's own sheet didn't either
   — so with te-reo-provisional-notice.js blocked (slow load, CSP hiccup, ad-blocker), the banner
   rendered visible by default, on the ENGLISH page, with no inline style to override. Every sibling
   product page's own sheet carries this exact rule as its fail-closed default; copied verbatim. */
.provisional-note { display: none; margin: var(--s4) auto 0; max-width: 72rem; padding: .75rem var(--s4);
  background: var(--c-connect-soft); border: 1px solid var(--c-connect); border-radius: var(--r-s);
  font-size: var(--t-xs); color: var(--ink); line-height: 1.6; }

/* village-apps.css has no page-wide :focus-visible rule for .btn/.theme-btn/plain links, so this
   page fell back to the bare browser default — measured 1.05:1 in dark theme (effectively invisible).
   var(--c-know) is already theme-aware and verified clean in both themes (6.35:1 light, 9.23:1 dark);
   copied verbatim from about.css/family-pricing.css, not a new colour invented here. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-know); outline-offset: 2px;
}

/* ---- Content added 12 Oct 2026 (full product description, worked example, how to get it) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
section.band--alt { background: var(--surface-alt, rgba(127,127,127,.06)); }
.edr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s6); }
.edr-card { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s6); background: var(--surface, transparent); }
.edr-card h3 { font-size: var(--t-lg); margin: 0 0 var(--s2); }
.edr-card p { margin: 0 0 var(--s3); }
.edr-card ul { margin: 0; padding-left: 1.2em; }
.edr-card li { margin-bottom: var(--s2); }
.edr-steps { list-style: none; max-width: 52rem; margin: 0 auto var(--s8); padding: 0; display: grid; gap: var(--s5); }
.edr-step { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s4); align-items: start; }
.edr-n { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--c-know); display: grid; place-items: center; font-weight: 700; }
.edr-step h3 { margin: 0 0 var(--s1); font-size: var(--t-md, 1.1rem); }
.edr-step p { margin: 0; }
.edr-receipt-wrap { max-width: 60rem; margin: 0 auto; }
.edr-receipt { width: 100%; border-collapse: collapse; font-size: var(--t-sm, .95rem); }
.edr-receipt th, .edr-receipt td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.edr-receipt thead th { border-bottom: 2px solid var(--line); }
.edr-try { margin: var(--s6) 0 var(--s2); }
.edr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); max-width: 52rem; margin: 0 auto var(--s6); }
.edr-plan { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s5); }
.edr-plan h3 { margin: 0 0 var(--s2); }
.edr-plan p { margin: 0; }
@media (max-width: 40rem) { .edr-receipt thead { display: none; } .edr-receipt tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s2) 0; } .edr-receipt th, .edr-receipt td { display: block; border: 0; padding: var(--s1) 0; } }