/* ==========================================================================
   Sanctuary Insurance v2, product-page FAMILY skin (Round-24, 2026-08-22).
   ONE sheet shared by agriculture.html, motor.html, scholar-care.html and
   bonds.html. Extends the FROZEN foundation (styles.css); nothing here
   overrides the shared components, it only styles page-scoped classes.
   Every value traces to design/brands/sanctuary.md (the kit), to the ref
   scale already encoded in styles.css, or to a catalog component's
   extracted motion values (the same placements proven on the sibling
   pages: services.css, quote.css, home.css).

   THE FAMILY SYSTEM (classes every product page reuses):
     .page-hero / .page-eyebrow / .page-lede  calm centered hero (ref h1 scale)
     .ptr / .ptr-line / .ptr-ink              137 Path Text Reveal headline
     .scroll-cue / .sc-chev                   069 ScrollIndicator anchor
     .art-band / .art-card / .ill-img         line-art band, 085 zoom art card
     .art-copy + .tags                        band copy + sub-product chip row
     .sec-intro / .sec-lede                   centered section head (h2 48)
     .incl / .incl-grid / .incl-pill          inclusion pill grid (pastel rotation)
     .detail-grid / .detail-card              dt/dd sub-product cards (pastel
                                              rotation, 011 tilt on fine pointers)
     .page-band / .cross-card                 page-specific band + routing card
     .close-band / .cb-* / .cb-privacy        static red close (020 CSS blobs)
     .pill13 family (+ -sm -primary -soft -cream -ghost)   013 buttons
     .signup-privacy                          quiet footer privacy line (Round-24)
   Inner pages stay CALM: one static world (world-light), no html flips (kit
   doctrine). House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (calm, centered; type from the ref h1 fingerprint) ---- */
.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;              /* ref: eyebrow sits quieter than the h1 */
}
.page-hero h1 {
  font-size: 80px;           /* ref h1 80px, weight 400, hierarchy by size */
  line-height: 88px;         /* ref 88px */
  letter-spacing: -2px;      /* ref -2px */
  font-weight: 400;
  max-width: 980px;
  margin-top: 20px;
}
.page-lede {
  margin-top: 24px;
  font-size: 24px;           /* ref trust-line scale 24 (styles.css .trust-line) */
  line-height: 1.4;
  color: var(--muted-ink);   /* kit: muted ink role from the foundation */
  max-width: 720px;
}

/* ---- catalog 137 Path Text Reveal (TextClipPath), re-tokened: per-line
        clip-path inset rise. Gated behind html.js-reveal (added by product.js
        only when IO + motion are present), so a no-JS or reduced-motion visit
        reads the headline static and fully visible. Component ease + rise exact:
        cubic-bezier(0.2,0.65,0.3,0.9), 0.8s, translateY 40 -> 0, per-line delay. ---- */
.ptr { display: block; }
.ptr-line { display: block; overflow: hidden; }        /* the clip window the ink rises into */
.ptr-ink { display: inline-block; will-change: clip-path, transform; }
.ptr .mascot-slot { display: inline-block; vertical-align: baseline; }
.js-reveal .ptr-ink {
  animation: sq-ptr-rise .8s cubic-bezier(.2, .65, .3, .9) both;
  animation-delay: var(--pd, 0s);
}
@keyframes sq-ptr-rise {
  from { clip-path: inset(0 0 100% 0); transform: translateY(40px); }
  to   { clip-path: inset(0 0 0 0); transform: translateY(0); }
}

/* ---- catalog 069 ScrollIndicator (elegant chevrons preset), re-tokened: two
        stacked chevrons drift down and fade on the component's ~1.8s ease-in-out
        loop with the trailing chevron lagging; a real anchor to the policy band
        (native smooth scroll, JS-off safe). The loop dies under reduced motion. ---- */
.scroll-cue {
  margin-top: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                                  /* component chevronGap */
  color: var(--muted-ink);
  transition: color .2s ease;
}
.scroll-cue:hover,
.scroll-cue:focus-visible { color: var(--ink); }
.sc-chev { display: block; line-height: 0; animation: sq-sc-drift 1.8s ease-in-out infinite; }
.sc-chev:nth-child(2) { animation-delay: .14s; } /* the trailing chevron lags, the component's staggered feel */
@keyframes sq-sc-drift {
  0%   { transform: translateY(0);   opacity: 0; }
  17%  { transform: translateY(0);   opacity: 1; }
  50%  { transform: translateY(8px); opacity: 1; }
  83%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 0; }
}

/* ---- Staggered scroll reveals (JS-gated via html.js-reveal; no-JS never hides) ---- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-house), transform .6s var(--ease-house);
  transition-delay: var(--rd, 0s);
}

/* ---- Line-art band: the line's wayfinding illustration large in a rounded
        card beside the curated sub-product chips. Card ground #F9F1E2 = the
        baked cream ground of the generated ill-*.webp set (home.css precedent),
        so the rounded card and the art read as one seamless surface. ---- */
.art-band {
  padding: 76px 48px 0;                      /* kit: section pad member 76; page gutter 48 */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;                                 /* derived: head-to-grid step 48 */
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  scroll-margin-top: 96px;                   /* the #policy anchor lands clear of the fixed nav */
}
.art-card {
  border-radius: 32px;                       /* ref card radius 32, flat filled, border NONE, shadow NONE */
  overflow: hidden;                          /* clips the 085 zoom scale to the radius */
  background: #F9F1E2;                       /* matches the generated illustration cream ground so the card reads seamless */
}
/* catalog 085 Hover Image Zoom: gentle cursor-origin scale; product.js refines
   the origin on fine pointers, the scale itself is CSS (:hover) */
.ill-img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center;
  transition: transform .5s var(--ease-house);  /* 085 zoom easing (calmed from native 2.5x, home.css precedent) */
  will-change: transform;
}
[data-zoom]:hover .ill-img { transform: scale(1.09); }
.art-copy { display: flex; flex-direction: column; align-items: flex-start; }
.art-copy h2 {
  margin-top: 20px;
  font-size: 48px;                           /* the family section-head step (services.css precedent) */
  font-weight: 400;                          /* kit: hierarchy by SIZE at weight 400 */
  letter-spacing: -1.2px;                    /* ref display tracking ratio at 48px */
  line-height: 1.1;
}
.art-copy p {
  margin-top: 16px;
  font-size: 16px;                           /* ref body 16/400 */
  line-height: 1.5;
  max-width: 480px;
}

/* sub-product chip row: compact kit pills (kit: pill radius 96; 14px = ref
   legal-row scale); line fill keeps the chips visible on the white page bg */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                                  /* kit spacing base 16 halved for chip clusters */
  margin-top: 24px;
}
.tags li {
  display: inline-flex;
  align-items: center;
  height: 32px;                              /* ref radius scale member 32 as compact pill height */
  padding: 0 14px;
  border-radius: 96px;                       /* kit: pill radius 96 */
  background: var(--line);
  color: var(--ink);
  font-size: 14px;                           /* ref legal-row scale 14 */
}

/* ---- Centered section head, the family pattern for every band intro ---- */
.sec-intro { max-width: 900px; margin: 0 auto; text-align: center; }
.sec-intro h2 {
  font-size: 48px;                           /* matches the services.css section-head step */
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.sec-lede { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted-ink); }

/* ---- Inclusion pill grid (agriculture: the 13 real inclusions). Generous
        stadium pills on the kit pastel rotation, wrapping as a centered cloud. ---- */
.incl { padding: 128px 48px 0; }             /* kit: section pad member 128; page gutter 48 */
.incl-grid {
  max-width: 1080px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.incl-pill {
  display: inline-flex;
  align-items: center;
  padding: 18px 28px;
  border-radius: 96px;                       /* kit: pill radius 96 (multi-line labels keep the stadium) */
  background: var(--card-blush);
  color: var(--ink);
  font-size: 20px;                           /* a display step over body: the list IS the content here */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
/* pastel rotation, the kit card fills cycled (ref: flat pastel fills, no border, no shadow) */
.incl-pill:nth-child(4n+2) { background: var(--card-coral); }
.incl-pill:nth-child(4n+3) { background: var(--card-sand); }
.incl-pill:nth-child(4n+4) { background: var(--card-cream); }

/* ---- Detail card grid, the family's dt/dd system (motor, scholar-care and
        bonds render every sub-product here; copy verbatim-derived from the
        services.html panels). catalog 011 Tilt Card rides [data-tilt] cards
        on fine pointers (product.js injects the glare span). ---- */
.detail { padding: 128px 48px 0; }
.detail-grid {
  max-width: 1080px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;                                 /* ref card gap 32 */
}
.detail-card {
  border-radius: 32px;                       /* ref card radius 32, flat filled, border NONE, shadow NONE */
  padding: 32px;                             /* ref card pad 32 */
  background: var(--card-blush);
  color: var(--ink);
  position: relative;                        /* tilt glare + transform anchor */
  overflow: hidden;                          /* clips the injected glare to the radius */
}
.detail-card:nth-child(4n+2) { background: var(--card-coral); }
.detail-card:nth-child(4n+3) { background: var(--card-sand); }
.detail-card:nth-child(4n+4) { background: var(--card-cream); }
.detail-card dt {
  font-size: 26px;                           /* ref card caption scale 26/400 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.4px;
}
.detail-card dd {
  margin: 10px 0 0;
  font-size: 16px;                           /* ref body 16/400 */
  line-height: 1.55;
  color: var(--muted-ink);
}
.detail-card[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; } /* catalog 011 settle */
.tilt-glare {
  /* catalog 011 glare: radial white highlight following the pointer (component
     math: center 50 + mouse/2, fade to 0 at 80 percent); injected by JS only
     on fine pointers, so no-JS markup stays clean */
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 80%);
  transition: opacity .2s ease-out;          /* component's extracted transition */
}
.detail-card:hover .tilt-glare { opacity: 1; }

/* ---- Page-specific band + the routing cross-card (agriculture: tobacco) ---- */
.page-band { padding: 128px 48px 0; }
.cross-card {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 32px;                       /* ref card radius 32 */
  padding: 48px;                             /* derived: band cards breathe a step over the 32 card pad */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cross-card h2 {
  font-size: 40px;                           /* derived: one step under the 48 section head */
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
}
.cross-card p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 560px;
}
.cross-card .pill13 { margin-top: 28px; }

/* ---- Close band: the quote.html quote-cta pattern, family edition. STATIC
        world-bright red painted on the section (kit: flips are home-only;
        white on #CC1518 = 5.6:1, passes WCAG AA) + catalog 020 Interactive
        Gradient, CSS variant: blurred kit-family blobs on pure keyframes.
        No pointer-follow layer on the family pages (product.js stays tiny). ---- */
.close-band {
  position: relative;
  overflow: hidden;                          /* blobs never escape the band */
  margin-top: 128px;                         /* kit section pad member 128 */
  min-height: 72vh;
  background: var(--world-bright);           /* kit: red world as a static section fill, no html flip */
  color: var(--ink-inverse);
  padding: 96px 48px;                        /* kit section pad member 96 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-blobs { position: absolute; inset: 0; z-index: 0; }
.cb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);                        /* component default blur 60 */
  will-change: transform;
}
.cb1 {
  width: 44vw; height: 44vw;
  max-width: 640px; max-height: 640px;
  left: -8%; top: -20%;
  background: radial-gradient(circle, rgba(240, 240, 240, .9) 0%, rgba(240, 240, 240, 0) 70%);  /* kit gray */
  animation: sq-cb-orbit-a 22s ease-in-out infinite;
}
.cb2 {
  width: 38vw; height: 38vw;
  max-width: 560px; max-height: 560px;
  right: -6%; bottom: -18%;
  background: radial-gradient(circle, rgba(200, 22, 27, .28) 0%, rgba(200, 22, 27, 0) 70%);     /* kit accent-cta, low alpha */
  animation: sq-cb-orbit-b 28s ease-in-out infinite;
}
.cb3 {
  width: 30vw; height: 30vw;
  max-width: 440px; max-height: 440px;
  left: 34%; bottom: -22%;
  background: radial-gradient(circle, rgba(239, 217, 196, .8) 0%, rgba(239, 217, 196, 0) 70%);  /* kit sand */
  animation: sq-cb-orbit-c 18s ease-in-out infinite;
}
@keyframes sq-cb-orbit-a {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(9vw, 6vh); }
  66%  { transform: translate(3vw, 12vh); }
  100% { transform: translate(0, 0); }
}
@keyframes sq-cb-orbit-b {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(-8vw, -8vh); }
  70%  { transform: translate(-2vw, -14vh); }
  100% { transform: translate(0, 0); }
}
@keyframes sq-cb-orbit-c {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10vw, -6vh); }
  100% { transform: translate(0, 0); }
}
.cb-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.close-band .display {
  font-size: 64px;                           /* ref type scale member 64: the band display step (guide-band precedent) */
  letter-spacing: -1.6px;
  line-height: 1.1;
}
.cb-row {
  margin-top: 48px;                          /* ref cta-band stack rhythm */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;                                 /* kit spacing base 16 */
}
.cb-privacy { margin-top: 32px; font-size: 15px; opacity: .92; }
.cb-privacy a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- catalog 013 Icon Slide In Button, re-tokened to the kit pill:
        fill bubble blooms from under the bottom edge, arrow slides in from
        the clipped right edge, label shifts left. Motion exact from the
        export: 0.5s cubic-bezier(.34, 1.08, .64, 1). Variants: primary
        (accent-cta), soft (line fill, ink flips white), cream (surface,
        blooms blush), ghost (white wash on the red band, blooms charcoal). ---- */
.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;                       /* kit pill radius 96 */
  overflow: hidden;                          /* clips the fill bubble */
  font-size: 16px;
  font-weight: 500;
}
.pill13-sm { height: 52px; padding: 0 30px; } /* ref nav CTA pill height 52 for in-card CTAs */
.pill13::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 8px;                                /* component bubble seed: 8px circle under the bottom edge */
  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;                              /* rest: parked off the clipped edge (component rest right -23) */
  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-primary { background: var(--accent-cta); color: #FFFFFF; } /* kit: primary pill, 5.86:1 AA */
.pill13-primary::before { background: #AE1217; }                   /* kit: accent-cta hover red */
.pill13-soft { background: var(--line); color: var(--ink); }       /* kit: secondary pill = line fill, ink text */
.pill13-soft::before { background: var(--accent-cta); }
.pill13-soft:hover, .pill13-soft:focus-visible { color: #FFFFFF; } /* ink flips white as the accent bloom floods */
.pill13-cream { background: var(--surface); color: var(--ink); }   /* reference-faithful: CTA-band cream pill */
.pill13-cream::before { background: var(--card-blush); }           /* cream blooms blush, ink stays ink (contrast holds) */
.pill13-ghost {
  background: rgba(255, 255, 255, .16);      /* white wash on the red band; white text ~4.6:1, AA at 16px */
  color: #FFFFFF;
}
.pill13-ghost::before { background: var(--world-deep); }           /* blooms charcoal, the bright-world nav-cta pairing */
@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:
        mirrors index.html's .hl-links footer treatment so the accent underline
        wipe (scaleX from the leading edge, house ease) is live on this page too. ---- */
.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 (matches the frozen 820 breakpoint) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 32px 20px 48px; }    /* ref mobile page gutter 20 */
  .page-eyebrow { font-size: 16px; }         /* ref mobile eyebrow 16 */
  .page-hero h1 {
    font-size: 28.125px;                     /* kit: mobile h1 28px (ref mobile h1 fingerprint 28.125) */
    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; }

  .art-band { grid-template-columns: 1fr; gap: 24px; padding: 48px 20px 0; }
  .art-copy h2 { font-size: 32px; letter-spacing: -0.8px; } /* ref mobile display 32/-0.8 */
  .art-copy p { font-size: 15px; }

  .sec-intro h2 { font-size: 32px; letter-spacing: -0.8px; }
  .sec-lede { font-size: 15px; }

  .incl { padding: 64px 20px 0; }
  .incl-grid { margin-top: 24px; gap: 8px; }
  .incl-pill { padding: 13px 20px; font-size: 16px; }

  .detail { padding: 64px 20px 0; }
  .detail-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .detail-card { padding: 24px; }            /* ref mobile card pad 24 */
  .detail-card dt { font-size: 20px; }
  .detail-card dd { font-size: 15px; }

  .page-band { padding: 64px 20px 0; }
  .cross-card { padding: 24px; }
  .cross-card h2 { font-size: 28px; letter-spacing: -0.6px; }
  .cross-card p { font-size: 15px; }
  .cross-card .pill13 { margin-top: 20px; }

  .close-band { margin-top: 76px; min-height: 0; padding: 76px 20px; } /* kit section pad member 76 */
  .close-band .display { font-size: 32px; letter-spacing: -0.8px; }
  .cb-row { margin-top: 32px; flex-direction: column; align-items: stretch; gap: 12px; }
  .cb-row .pill13 { width: 100%; }
  .cb-privacy { margin-top: 24px; font-size: 14px; }
  .cb { filter: blur(40px); }                /* lighter paint cost on mobile */
  .cb3 { display: none; }                    /* two blobs carry the band on small screens */
}

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .ptr-ink { animation: none !important; clip-path: none !important; transform: none !important; }
  .sc-chev { animation: none; opacity: 1; }  /* scroll cue rests visible, no drift */
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ill-img { transition: none; }
  [data-zoom]:hover .ill-img { transform: none; }
  .detail-card[data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
  .cb { animation: 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; }              /* arrow rests visible, nothing slides */
  .pill13-sm .pill13-icon { right: 18px; }
  .hl-links a::after { transition: none; }
  .scroll-cue { transition: none; }
}

/* ==========================================================================
   Round-24 addition (2026-08-22, build contract): three small, additive
   blocks the family sheet did not yet carry, needed by motor.html and by
   scholar-care.html/bonds.html. Nothing above this line is touched. No em or
   en dashes, per house rule.

     .facts-grid / .fact-card / .fact-lead / .fact-body   motor.html's
       easy-buy band, the same card shape quote.html's picker uses, ported
       here (values unchanged) so a page that never loads quote.css can
       still show it.
     .detail-grid-3   three-across variant of .detail-grid for a calm 3-step
       band (scholar-care's Cover, Claims process, Benefit to the student;
       bonds' "Where these bonds work" context strip). No mobile override
       needed: the frozen .detail-grid mobile rule already collapses any
       detail-grid to one column.
     .photo-band / .photo-grid / .photo-card / .photo-cap / .photo-link
       motor.html's two real photographs (motor-1, motor-2, the only page in
       this family that carries photography). A plain caption sits under the
       image, no hover or tilt, so a real photo never needs a contrast check
       against overlaid text.
   ========================================================================== */

/* ---- facts-grid, ported from quote.css's picker facts-grid (values unchanged) ---- */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;                                 /* ref card gap 32 */
  max-width: 1080px;
  margin: 40px auto 0;
}
.fact-card {
  border-radius: 32px;                       /* ref card radius 32, flat filled, border none, shadow none */
  padding: 32px;                             /* ref card pad 32 */
  min-height: 176px;
  display: flex;
  flex-direction: column;
}
.fact-lead {
  font-size: 26px;                           /* ref card caption scale 26/400 */
  font-weight: 400;
  line-height: 1.3;
}
.fact-body { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted-ink); }

/* ---- three-across .detail-grid variant, desktop only ---- */
@media (min-width: 821px) {
  .detail-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- photo-band: two real photographs, motor.html only ---- */
.photo-band { padding: 128px 48px 0; }
.photo-grid {
  max-width: 1080px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;                                 /* ref card gap 32 */
}
.photo-card {
  border-radius: 32px;                       /* ref card radius 32, flat filled, border none, shadow none */
  overflow: hidden;
  background: var(--card-cream);
}
.photo-card img { width: 100%; height: auto; display: block; }
.photo-cap { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--muted-ink); }
.photo-link { margin-top: 40px; text-align: center; }

/* ---- Mobile (matches the frozen 820 breakpoint) ---- */
@media (max-width: 820px) {
  .facts-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } /* kit spacing base 16 on the single column */
  .fact-card { padding: 24px; min-height: 0; }  /* ref mobile card pad 24 */
  .fact-lead { font-size: 20px; }

  .photo-band { padding: 64px 20px 0; }
  .photo-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .photo-link { margin-top: 24px; }
}