/* ============================================================================
   CLARION — built to the US Web Design System craft (see ~/design-knowledge/
   FEDERAL-DESIGN-CRAFT.md). Every value below is a token decision, not a taste
   decision. Audience: 60+, hearing loss, frequently reduced vision.
   ========================================================================== */

/* LAW 2 — respect the user's font size. root at 100%, everything in rem,
   media queries in em. A reader at 150% text then hits the EARLIER breakpoint
   and gets a wide single column instead of enlarged text in a narrow one. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; font-feature-settings: "kern" 1; font-kerning: normal; }

@font-face{font-family:Manrope;src:url(fonts/manrope.woff2) format('woff2');font-weight:200 800;font-display:fallback;
  ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff2) format('woff2');font-weight:300 700;font-display:fallback}

:root{
  /* LAW 4 — never #000 body text. USWDS names maximum contrast as a hazard. */
  --ink:        #1b1b1b;   /* 15.92:1 on white */
  --ink-soft:   #4a4a4a;   /*  8.98:1 on white — secondary, still above AAA */
  --ink-faint:  #565c65;   /*  6.74:1 — base-dark. never lighter than this for text */
  --brand:      #6c5018;   /*  7.50:1 — the only gold allowed to carry text */
  --brand-dark: #4a3610;   /* 11.79:1 — hover RAISES contrast (law 10) */
  --gold:       #B89F51;   /*  2.59:1 — FILL ONLY. rules, engraving, badges. never text */
  --gold-pale:  #efe8d6;   /*  tint band */
  --white:      #ffffff;
  --paper:      #f7f5f0;   /* tinted band — doubles perceived section break */
  --hair:       #dcd7cc;
  --error-dark: #b50909;   /*  6.98:1 — error base #d54309 passes AA by 0.03; never use it */
  --focus:      #1b1b1b;

  /* 8px base unit. one scale, never leave it. */
  --u1:.5rem; --u105:.75rem; --u2:1rem; --u3:1.5rem; --u4:2rem;
  --u5:2.5rem; --u6:3rem; --u7:3.5rem; --u8:4rem; --u10:5rem; --u15:7.5rem;

  /* 60+ delta §8.1 — body one step above federal default (token md, not sm) */
  --body: 1.13rem;
  --lead: 1.6;
  --measure: 65ex;          /* CMS, the oldest federal audience, runs NARROWER than USWDS */
  --measure-narrow: 45ex;
  --container: 69rem;       /* 1104px — §8.4 says 1024–1104, never 1320+ */
  --container-narrow: 44rem;/* single-column sections: narrow the CONTAINER, not just
                               the text, or copy hugs the left with dead space beside it */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--body); line-height:var(--lead);
  -webkit-font-smoothing:antialiased;
}

/* LAW 8 — cap the measure in a font-relative unit and apply it to EVERYTHING
   text-bearing, headings and list items included, so the eye never re-learns
   its horizontal range mid-page. */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, label { max-width: var(--measure); }
/* narrow sections keep the SAME left edge as every other section — capping the
   container instead would centre them and break the shared left alignment. */
.wrap.narrow > * { max-width: var(--container-narrow); }
.narrow p, .narrow li, .narrow h2, .narrow h3 { max-width: none; }

/* LAW 9 — one owned direction. zeroing margin-bottom kills collapsing, so the
   gap you compute is the gap you see. text rhythm in em, layout rhythm in rem. */
.prose > * { margin-top: 1em; margin-bottom: 0; }
.prose > *:first-child { margin-top: 0; }
.prose > h2, .prose > h3 { margin-top: 1.6em; }

h1,h2,h3,h4{ line-height:1.25; font-weight:700; letter-spacing:-.012em; }
h1{ font-size:2.66rem; }
h2{ font-size:2.13rem; }
h3{ font-size:1.46rem; }
h4{ font-size:1.13rem; }
/* §8.1 — h6 uppercase removed. differentiate by WEIGHT, not by caps.
   "Uppercase text has a serious negative effect on readability." */
h5,h6{ font-size:1.13rem; text-transform:none; }
h5{ font-weight:700 } h6{ font-weight:400 }
@media all and (max-width:39.99em){ h1{font-size:2.13rem} h2{font-size:1.7rem} }

a{ color:var(--brand); text-underline-offset:.18em; text-decoration-thickness:.08em; }
a:hover{ color:var(--brand-dark); }          /* law 10 — contrast RISES on hover */

/* LAW — focus must be visible and tested against the actual fill it lands on.
   A double ring works on every background this site uses. */
:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--white);
  border-radius:2px;
}

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--u2); }
@media all and (min-width:64em){ .wrap{ padding-inline:var(--u4); } }

/* §8.4 — section rhythm 48px, doubled optically by a tinted band rather than
   by inventing a second spacing value. */
section{ padding-block:var(--u6); }
@media all and (min-width:40em){ section{ padding-block:var(--u8); } }
.band{ background:var(--paper); border-block:1px solid var(--hair); }
.band-gold{ background:var(--gold-pale); border-block:1px solid #e0d5b4; }

.rule{ height:3px; width:4rem; background:var(--gold); border:0; margin:0 0 var(--u3); }
.eyebrow{ font-size:1rem; font-weight:700; letter-spacing:.08em; color:var(--ink-faint);
  text-transform:none; margin:0 0 var(--u1); }

/* ---- BUTTONS -------------------------------------------------------------
   §8.3 — Medicare ships 60px CTAs at 20px text for a 65+ audience, and buys the
   height with FONT-SIZE, not padding. 44px is the WCAG 2.5.5 floor for anything
   on the conversion path. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3.75rem;              /* 60px */
  padding:.75rem 1.75rem;
  font-family:inherit; font-size:1.25rem; font-weight:700; line-height:1.1;
  color:var(--white); background:var(--brand); border:0; border-radius:.25rem;
  text-decoration:none; cursor:pointer;
}
.btn:hover{ background:var(--brand-dark); color:var(--white); }
.btn--ghost{ background:transparent; color:var(--brand); box-shadow:inset 0 0 0 3px var(--brand); }
.btn--ghost:hover{ background:var(--brand); color:var(--white); }
.btn--big{ min-height:4rem; font-size:1.35rem; }

/* ---- TABLES --------------------------------------------------------------- */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:var(--u3); }
table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:1.06rem; }
caption{ text-align:left; color:var(--ink-faint); font-size:1rem; padding-bottom:var(--u1); }
th,td{ text-align:left; padding:var(--u105) var(--u2); border-bottom:1px solid var(--hair);
  vertical-align:top; }
thead th{ border-bottom:3px solid var(--gold); font-size:1rem; }
tbody th{ font-weight:700; white-space:nowrap; }
.spec td{ font-variant-numeric:tabular-nums; }        /* §8.1 — tabular numerals for specs */
.col-clarion{ background:var(--paper); }

/* ---- CARDS ---------------------------------------------------------------- */
.grid{ display:grid; gap:var(--u3); margin-top:var(--u4); }
@media all and (min-width:40em){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media all and (min-width:64em){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--white); border:1px solid var(--hair); border-radius:.5rem;
  padding:var(--u3); }
.band .card{ background:var(--white); }
.card h3{ margin:0 0 var(--u1); }
.card p{ margin:0; color:var(--ink-soft); }
.card .num{ font-size:1rem; font-weight:700; color:var(--ink-faint); display:block;
  margin-bottom:var(--u1); font-variant-numeric:tabular-nums; }

/* ---- MEDIA ---------------------------------------------------------------- */
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
figcaption{ font-size:1rem; color:var(--ink-faint); margin-top:var(--u1); }
.shot{ border:1px solid var(--hair); border-radius:.5rem; overflow:hidden; background:var(--paper); }

/* ---- OFFER LIST ----------------------------------------------------------- */
.offer{ list-style:none; margin:var(--u4) 0 0; padding:0; }
.offer > li{ display:grid; gap:var(--u1); padding:var(--u3) 0; border-top:1px solid var(--hair);
  max-width:none; }
@media all and (min-width:40em){ .offer > li{ grid-template-columns:12rem 1fr; gap:var(--u3); } }
.offer .term{ font-weight:700; color:var(--ink-faint); font-size:1.06rem; }
.offer .lead{ font-size:1.35rem; font-weight:700; margin:0 0 var(--u1); line-height:1.3; }
.offer .fine{ margin:0; color:var(--ink-soft); }

/* ---- PRICE ---------------------------------------------------------------- */
.price{ font-family:Cormorant,Georgia,serif; font-size:4rem; line-height:1; margin:0;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
@media all and (max-width:39.99em){ .price{ font-size:3rem; } }

/* ---- WORDMARK — Cormorant, wide tracking. brand asset, not body text ------- */
.wordmark{ font-family:Cormorant,Georgia,serif; font-weight:400; letter-spacing:.178em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; font-size:1.6rem;
  white-space:nowrap; }

header.site{ border-bottom:1px solid var(--hair); background:var(--white);
  position:sticky; top:0; z-index:20; }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--u2); min-height:4.5rem; flex-wrap:wrap; }
.callnum{ font-weight:700; white-space:nowrap; min-height:2.75rem; display:inline-flex;
  align-items:center; }

/* ---- ALERTS — LAW 5: colour + icon + the WORD, first in the sentence ------- */
.alert{ border-left:.5rem solid var(--ink-faint); background:var(--paper);
  padding:var(--u3); border-radius:.25rem; margin-top:var(--u3); }
.alert h3{ margin:0 0 var(--u1); font-size:1.13rem; }
.alert p{ margin:0; }
.alert--info{ border-left-color:var(--brand); background:var(--gold-pale); }

/* ---- MANDATED WARNING ----------------------------------------------------
   §8.5 — USWDS bans uppercase "unless mandated by law". This block is the one
   legal exception on the whole site; letter-spacing buys back the readability
   that caps costs. Everything else stays sentence case. */
.mandated{ border:3px solid var(--ink); border-radius:.25rem; padding:var(--u3);
  background:var(--white); margin-top:var(--u3); }
.mandated .caps{ text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  font-size:1.06rem; line-height:1.55; margin:0 0 var(--u1); }
.mandated p{ margin:.5em 0 0; }

/* ---- FAQ ------------------------------------------------------------------ */
details{ border-bottom:1px solid var(--hair); }
details summary{ cursor:pointer; font-size:1.2rem; font-weight:700; padding:var(--u3) 2.5rem var(--u3) 0;
  min-height:3.5rem; display:flex; align-items:center; position:relative; list-style:none; }
details summary::-webkit-details-marker{ display:none }
details summary::after{ content:"+"; position:absolute; right:.5rem; font-size:1.8rem;
  font-weight:400; color:var(--brand); line-height:1 }
details[open] summary::after{ content:"\2212" }
details .body{ padding:0 0 var(--u3); }
details .body p{ margin:0 0 1em; color:var(--ink-soft) }
details .body p:last-child{ margin-bottom:0 }

footer.site{ background:var(--ink); color:#e8e6e2; padding-block:var(--u6); margin-top:0; }
footer.site a{ color:#dfe1e2; }                 /* law 10 — reverse links start below white */
footer.site a:hover{ color:var(--white); }
footer.site .wordmark{ color:#fff }
footer.site p{ color:#cfccc6 }

.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:var(--u2); z-index:99; }
.skip:focus{ left:0 }
.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 }

/* LAW — never rely on hover, and honour reduced motion. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important }
}

/* ---- HERO: the kit photograph carries it ---------------------------------- */
/* The photo was flat-fielded so its paper is true #fff — it must sit on white,
   or the join shows as a grey plate. No tint band here, ever. */
.hero{ background:var(--white); padding-block:var(--u6) var(--u8); }
.hero h1{ margin-top:var(--u1); }
.kitshot{ margin:var(--u5) auto var(--u5); padding-inline:var(--u2); max-width:72rem; }
.kitshot img{ display:block; width:100%; height:auto; }
.kitshot figcaption{ max-width:var(--measure); margin:var(--u3) auto 0;
  color:var(--ink-faint); font-size:.95rem; line-height:1.55; text-align:center; }
@media all and (min-width:64em){ .kitshot{ padding-inline:var(--u4); } }