/* ==========================================================================
   Sanctuary Insurance v2, services.html page skin (catalog revamp, 2026-07-11).
   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.
   Catalog placements on this page: 137 Path Text Reveal (hero), 016
   AnimatedNumber (stat strip), 004 HorizontalScroller + 011 Tilt Card + 062
   Border Beam (flagship pin), 029 Tilt Card Grid + 008 FAQs-Accordion + 116
   Click to Mask Expand (all twelve lines), 040 FlowStack (how cover works),
   013 Icon Slide In Button (guide-band CTA), 058 Hover Text Highlight (footer).
   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 76px;   /* kit: page gutter 48; section pad member 76 hands off to the stat strip */
  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: 900px;
  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: 640px;
}

/* ---- Stat strip (catalog 016 AnimatedNumber, re-tokened): 4 real figures,
        hierarchy by SIZE at 400, numbers on the ref 64 display step ---- */
.stat-strip {
  margin: 0 48px;                          /* kit: page gutter 48 */
  padding: 48px 0;                         /* derived: head-to-grid step 48 above and below */
  border-top: 1px solid var(--line);       /* kit: line as the hairline role */
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;                               /* ref card gap 32 */
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.stat-num {
  font-size: 64px;                         /* ref type scale member 64 (footer input display size) */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.6px;                  /* ref display tracking ratio at 64px */
  font-variant-numeric: tabular-nums;      /* count-up digits do not jitter mid-spring */
}
.stat-label { font-size: 16px; color: var(--muted-ink); } /* ref body 16, muted label role */

/* ---- Flagship pin (catalog 004 HorizontalScroller, re-tokened): sticky
        viewport + scroll-sprung track; the 3 home-surfaced lines as large
        pastel panels. Desktop only; mobile, reduced motion and no-JS get a
        calm static stack. ---- */
.flagship { margin-top: 96px; }            /* kit: section pad member 96 */
.flagship-sticky { padding: 0 48px; }      /* kit: page gutter 48 (static base state) */
.flagship-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.flagship-head-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.flagship-head h2 {
  font-size: 48px;                         /* derived: display step between the 32 step-title and 64 band display */
  font-weight: 400;
  letter-spacing: -1.2px;                  /* ref display tracking ratio (-2.5 percent) at 48px */
  line-height: 1.1;
}
.flagship-progress {
  width: 160px;
  height: 4px;                             /* kit: radius scale member 4 as the rail thickness */
  border-radius: 4px;
  background: var(--line);                 /* kit: secondary fill as the empty rail */
  overflow: hidden;
  display: none;                           /* shown only when the pin engages (desktop media below) */
}
.flagship-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--accent-cta);           /* kit: accent-cta as the fill, the 026/027 progress role */
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.flagship-track {
  display: flex;
  flex-direction: column;                  /* static base: calm stack (mobile, no-JS, reduced motion) */
  gap: 32px;                               /* ref slide gap 32 */
  margin-top: 48px;                        /* derived: head-to-grid step 48 */
}
.flag-card {
  border-radius: 32px;                     /* ref card radius 32, flat filled, border NONE, shadow NONE */
  padding: 48px;                           /* derived: flagship panels breathe a step over the 32 card pad */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;                      /* tilt glare + transform anchor */
  overflow: hidden;                        /* clips the injected glare to the card radius */
}
.flag-eyebrow { font-size: 16px; color: var(--muted-ink); } /* muted label role */
.flag-card h3 {
  margin-top: 16px;
  font-size: 44px;                         /* derived: flagship title one step under the head 48; hierarchy by SIZE at 400 */
  font-weight: 400;
  letter-spacing: -1.1px;
  line-height: 1.15;
}
.flag-card p {
  margin-top: 16px;
  font-size: 16px;                         /* ref body 16/400 */
  line-height: 1.5;
  max-width: 520px;
}
.flag-link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.flag-link:hover { opacity: .7; }
/* catalog 011 Tilt Card: transform + glare set by services.js; the card only
   declares the settle transition (component's extracted 0.2s ease-out) */
.flag-card[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; }
.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 */
}
.flag-card:hover .tilt-glare { opacity: 1; }

/* desktop: the pin engages (sticky viewport, horizontal track) */
@media (min-width: 821px) {
  .flagship { height: 280vh; }             /* derived: pin travel; scroll distance 180vh maps to the track overflow */
  .flagship-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;                      /* the track slides past the viewport edge */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 112px 48px 40px;              /* 112 clears the 92px fixed nav */
  }
  .flagship-progress { display: block; }
  .flagship-track {
    flex-direction: row;
    will-change: transform;                /* catalog 004: scroll -> spring -> rAF -> translateX */
  }
  .flag-card {
    flex: 0 0 clamp(560px, 52vw, 720px);
    min-height: 480px;                     /* echoes the ref 427x571 feature-card presence at panel scale */
  }
  .flag-card .tags { margin-top: auto; }
}

/* sub-product tags: compact kit pills (kit: pill radius 96; 14px = ref legal-row scale) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                                /* kit spacing base 16 halved for chip clusters */
  margin-top: 24px;
  padding-top: 0;
}
.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(--surface);              /* kit: cream surface as the tag fill on pastel cards */
  color: var(--ink);                       /* kit: ink on light fills */
  font-size: 14px;                         /* ref legal-row scale 14 */
}

/* ---- All twelve lines, unified illustrated accordion ----
        Container is the catalog 008 soft frame (kit line fill). Each row is an
        illustration card (catalog 029 Tilt Card Grid: [data-tilt] media) that
        opens to its full real detail (measured height, one open). The detail
        wipes in on open (catalog 116 Click to Mask Expand). Media on the left,
        line name and the plus-circle icon on the right, the panel drops full
        width beneath. Every line reads its complete description and every sub
        product, verbatim from the client's own service pages. ---- */
.all-lines { padding: 128px 48px 0; }      /* kit: section pad member 128; page gutter 48 */
.lines-intro { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.lines-intro h2 {
  font-size: 48px;                         /* matches the flagship head step */
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.lines-lede { margin-top: 12px; font-size: 16px; color: var(--muted-ink); }
.lines-acc {
  max-width: 1080px;                       /* derived: media rows breathe wider than a text column */
  margin: 0 auto;
  background: var(--line);                 /* catalog 008 wrapper fill role -> kit secondary fill */
  border-radius: 32px;                     /* kit card radius 32 */
  padding: 12px;                           /* frame inset */
}
.lrow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lrow {                                    /* the illustrated line card (also .line for the JS accordion) */
  background: var(--surface);              /* catalog 008 item fill role -> kit cream */
  border-radius: 24px;                     /* kit radius scale member 24 inside the 32 frame */
  overflow: hidden;
}
.lrow-h { margin: 0; font-weight: 400; }   /* kit: hierarchy by SIZE at 400; the button carries the size */
.lrow-head {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 0;
  min-height: 128px;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lrow-head:hover { background: rgba(250, 222, 222, .34); } /* kit line wash */
.lrow-media {
  flex: 0 0 clamp(150px, 22%, 224px);
  align-self: stretch;
  position: relative;                      /* tilt glare + transform anchor */
  overflow: hidden;                        /* clips the media + injected glare to the radius */
  background: var(--line);                 /* line fill shows while the webp loads */
  transition: transform .2s ease-out;      /* catalog 029/011 settle */
  transform-style: preserve-3d;
}
.lrow-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrow-media:hover .tilt-glare { opacity: 1; } /* 011 glare shows on the media */
.lrow-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 20px 20px 28px;
}
.lrow-name { font-size: 24px; line-height: 1.2; letter-spacing: -0.5px; }
.lrow-teaser { font-size: 15px; line-height: 1.45; color: var(--muted-ink); }
.lrow-head .acc-ico { align-self: center; flex: 0 0 auto; margin: 0 24px 0 12px; }
/* plus-circle icon: component geometry (28px circle, two bars), kit fills;
   bar choreography exact from the export: H bar -90deg -> 90deg, V bar
   -180deg -> 90deg, 0.25s cubic-bezier(0.4, 0, 0.2, 1) */
.acc-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: var(--line);                 /* component icon fill role -> kit secondary fill */
  position: relative;
  overflow: hidden;
}
.acc-ico i {
  position: absolute;
  width: 1.5px;
  height: 12px;
  background: var(--ink);                  /* component bar color role -> kit ink */
  left: calc(50% - 0.75px);
  top: calc(50% - 6px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.acc-ico .b1 { transform: rotate(-90deg); }
.acc-ico .b2 { transform: rotate(-180deg); }
.line.open .acc-ico .b1 { transform: rotate(90deg); }
.line.open .acc-ico .b2 { transform: rotate(90deg); }
/* measured-height expand (component: height 0 -> measured scrollHeight);
   services.js drives the pixel value, CSS owns the curve */
.line-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .35s var(--ease-house), opacity .25s ease; /* kit house ease */
}
.line.open .line-panel { opacity: 1; }
.line-inner { padding: 6px 28px 30px; }
.line-inner p {
  font-size: 16px;                         /* ref body 16/400 (the lead) */
  line-height: 1.6;
  max-width: 760px;
}
.line-inner p + p { margin-top: 12px; }
.line-inner .tags { margin-top: 16px; }
.line-inner .tags li { background: var(--line); } /* kit: line fill keeps tags visible on the cream row */

/* catalog 116 Click to Mask Expand: the detail wipes up into view as the row
   opens (clip-path inset). Gated on html.js-reveal, so a no-JS or reduced-motion
   visit reads it static and fully visible. */
.js-reveal .line .lrow-inner { clip-path: inset(0 0 100% 0); }
.js-reveal .line.open .lrow-inner { clip-path: inset(0 0 0 0); transition: clip-path .55s var(--ease-house) .06s; }

/* sub-product detail: a definition list packed into masonry columns on desktop,
   one column on mobile. dt = product name (ink), dd = its verbatim description. */
.subs { margin-top: 20px; columns: 2 260px; column-gap: 40px; }
.sub { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; }
.sub dt { font-size: 16px; line-height: 1.35; }
.sub dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted-ink); max-width: 460px; }

/* ---- Staggered scroll reveals: applied only when JS confirms IO support
        (html.js-reveal), so no-JS never hides content ---- */
.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);
}

/* ---- Guidance CTA band: STATIC rounded coral card, no world flip (kit:
        card-coral is the bright member of the card set; flips are home-only) ---- */
.guide-band {
  margin: 128px 48px 128px;                /* kit section pad member 128; page gutter 48 */
  border-radius: 32px;                     /* ref card radius 32 */
  background: var(--card-coral);           /* kit: pastel card 2 = world-bright reused as a card fill */
  color: var(--ink);                       /* kit contrast fact: ink on coral 4.6:1, large type */
  padding: 112px 48px;                     /* derived: kit section pads 96..128 midpoint for a band interior */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.guide-band .display {
  font-size: 64px;                         /* ref type scale member 64 */
  letter-spacing: -1.6px;
  line-height: 1.1;
}
.guide-band .pill13 { margin-top: 48px; }  /* ref cta-band stack rhythm */

/* ---- catalog 013 Icon Slide In Button, re-tokened to the kit pill:
        radius 96, height 68 (ref hero CTA), fill bubble blooms in the kit
        hover red, arrow slides in from the right while the label shifts.
        Motion exact from the export: 0.5s cubic-bezier(.34, 1.08, .64, 1). ---- */
.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::before {
  /* the fill bubble: a circle parked under the bottom edge that blooms to
     flood the pill (component geometry: 8px seed, bottom -8, expands ~108%) */
  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(-10px); }
.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: 18px; }
.pill13-primary {
  background: var(--accent-cta);           /* kit: primary pill = accent-cta with white text, 5.86:1 AA */
  color: #FFFFFF;
}
.pill13-primary::before { background: #AE1217; } /* kit: accent-cta hover red as the bloom fill */
/* touch surfaces have no hover: the arrow rests visible inside the pill */
@media (hover: none) {
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-icon { right: 22px; }
}

/* ---- catalog 137 Path Text Reveal (TextClipPath), re-tokened: per-line
        clip-path inset rise. Gated behind html.js-reveal (added by services.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 062 Border Beam, re-tokened: a cursor-tracked radial glow that
        rides ONLY the card's border ring (CSS mask XOR cuts the center out).
        Component geometry: 300px glow circle at the pointer, transparent stop at
        79 percent, ring thickness = mask padding, opacity 0 -> 1 on hover (0.2s
        ease). services.js sets --bx/--by from the pointer on fine pointers; the
        ring rests invisible for touch, no-JS and reduced motion. Glow = kit red. ---- */
.beam {
  position: absolute;
  inset: 0;
  z-index: 0;                              /* sits under the card content (see rule below) */
  border-radius: 32px;                     /* matches the flag-card radius */
  padding: 2px;                            /* the ring thickness (component borderWidth role) */
  pointer-events: none;
  background: radial-gradient(300px circle at var(--bx, 50%) var(--by, 50%), var(--accent), transparent 79%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;         /* keep only the padding ring, cut the fill */
  opacity: 0;
  transition: opacity .2s ease;
}
.flag-card:hover .beam,
.flag-card:focus-within .beam { opacity: .9; }
.flag-card > :not(.beam) { position: relative; z-index: 1; } /* content rides above the ring */

/* ---- catalog 040 FlowStack, re-tokened: horizontal row of expanding steps.
        Rest: four equal columns. Hover or focus one: it grows (flex-grow 3.4)
        while the siblings shrink toward a spine (flex-grow 0.55) and the detail
        fades in. Motion approximates the component spring (stiffness 300 damping
        40) as 0.4s cubic-bezier(0.34,1.08,0.64,1). Card radius 24, gap 12. ---- */
.flow-sec { padding: 128px 48px 0; }
.flow-intro { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.flow-intro h2 { font-size: 48px; font-weight: 400; letter-spacing: -1.2px; line-height: 1.1; }
.flow-lede { margin-top: 12px; font-size: 16px; color: var(--muted-ink); }
.flowstack {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 12px;                                /* component gap 8 stepped to the kit rhythm */
  min-height: 236px;
}
.fcard {
  position: relative;
  flex: 1 1 0;                              /* rest: four equal columns */
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;                      /* kit radius scale member 24 (component 16 -> kit scale) */
  padding: 28px;
  background: var(--card-blush);            /* kit pastel card 1 as the rest fill */
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: default;
  transition: flex-grow .4s cubic-bezier(.34, 1.08, .64, 1), background-color .4s var(--ease-house);
}
.fcard:nth-child(2) { background: var(--card-coral); }
.fcard:nth-child(3) { background: var(--card-sand); }
.fcard:nth-child(4) { background: var(--card-cream); }
.flowstack:hover .fcard,
.flowstack:focus-within .fcard { flex-grow: .55; }        /* siblings shrink to the spine */
.flowstack .fcard:hover,
.flowstack .fcard:focus-visible { flex-grow: 3.4; }       /* the active step fills */
.fcard:focus-visible { outline: 2px solid var(--accent-cta); outline-offset: 3px; }
.fico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;                      /* component icon box radius 10 -> kit scale */
  background: var(--surface);               /* cream icon box on the pastel card */
  color: var(--ink);
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.34, 1.08, .64, 1); /* icon grows on open (component 35 -> 95) */
}
.flowstack .fcard:hover .fico,
.flowstack .fcard:focus-within .fico { transform: scale(1.18); }
.ftitle {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.4px;
  white-space: nowrap;                      /* the label stays on the spine when collapsed */
}
.fbody {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 340px;
  opacity: 1;                               /* rich at rest: every step is readable up front */
  transition: opacity .4s cubic-bezier(.34, 1.08, .64, 1);
}
/* the hover drama: as the row is engaged, the collapsing siblings fade their
   body to a spine while the active step keeps (and fills with) its detail */
.flowstack:hover .fbody,
.flowstack:focus-within .fbody { opacity: 0; }
.flowstack .fcard:hover .fbody,
.flowstack .fcard:focus-within .fbody { opacity: 1; }
/* no hover surface (touch): every step rests open so the detail is never trapped */
@media (hover: none) {
  .flowstack { flex-direction: column; min-height: 0; }
  .fcard { flex: 1 1 auto; }
  .fbody { opacity: 1; }
  .ftitle { white-space: normal; }
}

/* ---- 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; }

  .stat-strip { margin: 0 20px; padding: 32px 0; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat-num { font-size: 40px; letter-spacing: -1px; } /* derived: 64 steps down inside the mobile column */

  .flagship { margin-top: 64px; }
  .flagship-sticky { padding: 0 20px; }    /* ref mobile page gutter 20 */
  .flagship-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .flagship-head h2 { font-size: 32px; letter-spacing: -0.8px; } /* ref mobile display 32/-0.8 */
  .flagship-track { gap: 16px; margin-top: 32px; }
  .flag-card { padding: 24px; }            /* ref mobile card pad 24 */
  .flag-card h3 { font-size: 26px; letter-spacing: -0.5px; } /* ref card caption scale holds on mobile */
  .flag-card p { font-size: 16px; }

  .all-lines { padding: 64px 20px 0; }
  .lines-intro { margin-bottom: 24px; }
  .lines-intro h2 { font-size: 32px; letter-spacing: -0.8px; }
  .lines-acc { padding: 8px; border-radius: 24px; }
  .lrow-list { gap: 10px; }
  .lrow { border-radius: 18px; }
  .lrow-head { min-height: 96px; }
  .lrow-media { flex: 0 0 96px; }
  .lrow-copy { padding: 14px 8px 14px 16px; gap: 4px; }
  .lrow-name { font-size: 17px; letter-spacing: -0.3px; }
  .lrow-teaser { font-size: 13px; line-height: 1.4; }
  .lrow-head .acc-ico { margin: 0 14px 0 6px; }

  .flow-sec { padding: 64px 20px 0; }
  .flow-intro { margin-bottom: 24px; }
  .flow-intro h2 { font-size: 32px; letter-spacing: -0.8px; }
  .flowstack { flex-direction: column; min-height: 0; gap: 12px; }
  .fcard { flex: 1 1 auto; padding: 24px; }
  .fico { transform: none !important; }
  .ftitle { white-space: normal; font-size: 20px; }
  .fbody { opacity: 1; max-width: none; }

  .line-inner { padding: 4px 18px 22px; }
  .line-inner p { font-size: 15px; }
  .subs { columns: 1; }
  .sub dt { font-size: 15px; }
  .sub dd { font-size: 14px; }

  .guide-band {
    margin: 76px 20px 76px;                /* kit section pad member 76; mobile gutter 20 */
    padding: 64px 24px;
  }
  .guide-band .display { font-size: 32px; letter-spacing: -0.8px; }
  .guide-band .pill13 { margin-top: 32px; }
}

/* ---- 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); }

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .hl-links a::after { transition: none; }
  .flagship { height: auto !important; }
  .flagship-sticky { position: static !important; height: auto !important; overflow: visible !important; padding-top: 0 !important; }
  .flagship-track { flex-direction: column !important; transform: none !important; }
  .flag-card { flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; }
  .flagship-progress { display: none !important; }
  .flag-card[data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
  .line-panel, .acc-ico i { transition: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pill13::before, .pill13-label, .pill13-icon { transition: none; }
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-icon { right: 22px; }            /* arrow rests visible, nothing slides */
  /* new catalog placements die here too */
  .ptr-ink { animation: none !important; clip-path: none !important; transform: none !important; }
  .beam { display: none; }
  .lrow-media[data-tilt] { transition: none; transform: none !important; }
  .lrow-inner { clip-path: none !important; }
  .flowstack { flex-direction: column; min-height: 0; }  /* calm static open stack */
  .fcard, .fico, .fbody { transition: none; }
  .fcard { flex: 1 1 auto !important; }
  .fico { transform: none !important; }
  .ftitle { white-space: normal; }
  .fbody { opacity: 1; max-width: none; }
}