/* ==========================================================================
   Sanctuary Insurance v2, reports.html page skin (Round-24, client asks 2
   and 3). Extends the FROZEN foundation (styles.css); page-scoped classes only.
   Every value traces to design/brands/sanctuary.md (the kit), to the ref scale
   already encoded in styles.css, or to a sibling page skin (quote.css owns the
   page-hero and pill13 vocabularies, faq.css owns the download-card vocabulary;
   both are re-declared here because neither sheet loads on this page).
   This page carries NO JavaScript: every treatment below is CSS only, so the
   document list is complete and interactive with scripts blocked.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (calm, centered; same vocabulary as quote.css) ---- */
.page-hero {
  padding: 60px 48px 64px;   /* kit: page gutter 48; 60 top clears the 92px fixed nav rhythm */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* ref hero eyebrow 24 (same token as .hero-eyebrow in styles.css) */
  font-weight: 400;
  opacity: .82;
}
.page-hero h1 {
  font-size: 80px;           /* ref h1 80px, weight 400, hierarchy by size */
  line-height: 88px;
  letter-spacing: -2px;
  font-weight: 400;
  max-width: 980px;
  margin-top: 20px;
}
.page-lede {
  margin-top: 24px;
  font-size: 24px;           /* ref trust-line scale 24 */
  line-height: 1.4;
  color: var(--muted-ink);
  max-width: 800px;
}

/* ==========================================================================
   Document sections. Three of them, in descending civic weight: the audited
   results, the regulator's quarterly reports, then the forms and policy
   documents. Calm by design, this is the compliance page.
   ========================================================================== */
.doc-sec {
  padding: 96px 48px 0;      /* kit: section pad member 96; page gutter 48 */
  max-width: 1344px;         /* ref widest text box 1344 */
  margin: 0 auto;
}
.doc-sec:first-of-type { padding-top: 32px; } /* the hero already handed off; do not double the gap */
.doc-sec:last-of-type { padding-bottom: 128px; } /* kit section pad member 128 as the closing step */
.sec-head { display: flex; flex-direction: column; gap: 12px; }
.sec-head h2 {
  font-size: 48px;           /* derived: one step under the 96 display, the inner-page section head */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;    /* ref display tracking scaled to 48 */
}
.sec-lede {
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 700px;
}
.sec-foot {
  margin-top: 32px;          /* ref card gap 32 */
  font-size: 14px;           /* ref legal-row scale 14 for the quiet source line */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 780px;
}
.sec-foot a,
.doc-desc a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;   /* long URLs never overflow the column at 375 */
}

/* ---- The card grids: one wide feature card, then 2-up, then 3-up ---- */
.doc-grid { display: grid; gap: 32px; margin-top: 40px; } /* ref card gap 32 */
.doc-grid-1 { grid-template-columns: 1fr; }
.doc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.doc-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- The document card (faq.css .dl-card vocabulary, opened up to carry a
        description line and a real Download pill instead of a corner arrow) ---- */
.doc-card {
  border-radius: 32px;       /* ref card radius 32, flat filled, border none, shadow none */
  padding: 32px;             /* ref card pad 32 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
}
.doc-kind {
  font-size: 13px;           /* derived: one step under the 14 legal-row scale for the tiny format tag */
  color: var(--muted-ink);
  text-transform: uppercase;
  letter-spacing: .06em;     /* derived: the only tracked type on the page, it reads as a tag not a word */
}
.doc-title {
  margin-top: 14px;
  font-size: 26px;           /* ref card caption scale 26/400 */
  font-weight: 400;
  line-height: 1.3;
}
.doc-period {
  margin-top: 8px;
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.5;
}
.doc-desc {
  margin-top: 8px;
  font-size: 14px;           /* ref legal-row scale 14 for the provenance line */
  line-height: 1.6;
  color: var(--muted-ink);
  margin-bottom: 28px;
}
.doc-card .pill13 { margin-top: auto; }
/* the wide feature card (the audited results) sets its copy against the pill
   instead of stacking, so one card never reads as a half-empty row */
.doc-card-wide { padding: 40px; }
.doc-card-wide .doc-body {
  align-self: stretch;       /* the copy block fills the card width when stacked */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 821px) {
  .doc-card-wide {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  .doc-card-wide .doc-body { align-self: auto; max-width: 720px; }
  .doc-card-wide .doc-desc { margin-bottom: 0; }
  .doc-card-wide .pill13 { margin-top: 0; flex: 0 0 auto; }
}

/* ---- catalog 013 Icon Slide In Button, re-tokened to the kit pill (the
        variant set and the exact 0.5s cubic-bezier(.34,1.08,.64,1) motion are
        quote.css's; restated here because quote.css does not load).
        The doc variant is new: charcoal at rest so a page of twelve download
        buttons stays quiet, and the bloom is the brand red, so the hover is
        still the house move. White on --ink is 16.9:1, white on the bloom
        --accent-cta is 5.86:1; both clear AA. ---- */
.pill13 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;              /* ref hero CTA height 68 */
  padding: 0 40px;
  border-radius: 96px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
}
.pill13-sm { height: 52px; padding: 0 30px; } /* ref nav CTA pill height 52 */
.pill13::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  transform: translateX(-50%);
  pointer-events: none;
  transition: width .5s cubic-bezier(.34, 1.08, .64, 1), height .5s cubic-bezier(.34, 1.08, .64, 1), bottom .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover::before,
.pill13:focus-visible::before {
  width: 112%;
  height: 220px;
  bottom: -60px;
}
.pill13-label {
  position: relative;
  z-index: 1;
  transition: transform .5s cubic-bezier(.34, 1.08, .64, 1), color .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover .pill13-label,
.pill13:focus-visible .pill13-label { transform: translateX(-9px); }
.pill13-icon {
  position: absolute;
  right: -24px;
  display: inline-flex;
  z-index: 1;
  transition: right .5s cubic-bezier(.34, 1.08, .64, 1), color .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover .pill13-icon,
.pill13:focus-visible .pill13-icon { right: 16px; }
.pill13-doc { background: var(--ink); color: var(--ink-inverse); }
.pill13-doc::before { background: var(--accent-cta); }
@media (hover: none) {
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-sm { padding: 0 44px 0 26px; }
  .pill13-icon { right: 20px; }
  .pill13-sm .pill13-icon { right: 18px; }
}

/* ---- catalog 058 Hover Text Highlight on the shared footer link columns ---- */
.hl-links a { position: relative; }
.hl-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-house);
}
.hl-links a:hover::after,
.hl-links a:focus-visible::after { transform: scaleX(1); }

/* ---- Mobile (the frozen 820 breakpoint) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 32px 20px 32px; }   /* ref mobile page gutter 20 */
  .page-eyebrow { font-size: 16px; }
  .page-hero h1 {
    font-size: 28.125px;                    /* ref mobile h1 fingerprint */
    line-height: 30.9375px;
    letter-spacing: -0.703125px;
    max-width: 320px;
    margin-top: 12px;
  }
  .page-lede { font-size: 16px; margin-top: 16px; max-width: 335px; }

  .doc-sec { padding: 56px 20px 0; }
  .doc-sec:first-of-type { padding-top: 24px; }
  .doc-sec:last-of-type { padding-bottom: 76px; } /* kit section pad member 76 on mobile */
  .sec-head h2 { font-size: 24px; letter-spacing: -0.5px; } /* locked system: mobile inner head 24 */
  .doc-grid { gap: 16px; margin-top: 24px; }      /* kit spacing base 16 on the single column */
  .doc-grid-2, .doc-grid-3 { grid-template-columns: 1fr; }
  .doc-card, .doc-card-wide { padding: 24px; }    /* ref mobile card pad 24 */
  .doc-title { font-size: 20px; }                 /* locked system: sheet-row scale 20 */
  .doc-desc { margin-bottom: 24px; }
  .sec-foot { margin-top: 24px; }
}

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .hl-links a::after { transition: none; }
  .pill13::before, .pill13-label, .pill13-icon { transition: none; }
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-sm { padding: 0 44px 0 26px; }
  .pill13-icon { right: 20px; }              /* the arrow rests visible, nothing slides */
  .pill13-sm .pill13-icon { right: 18px; }
}