/* ==========================================================================
   Sanctuary Insurance v2, quote.html page skin (catalog revamp, 2026-07-11).
   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 catalog component's
   extracted motion values. Catalog placements on this page:
   012 Conic Animation (active picker pill), 026-style step progress rail,
   013 Icon Slide In Button (the three handoff CTAs + closing CTA),
   020 Interactive Gradient CSS variant (closing coral band).
   Inner pages are CALM: one static world (world-light); the closing band
   paints world-bright coral on the SECTION itself, never a html flip.
   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; 64 hands off to step 1 */
  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;
}

/* ---- Steps + the 026-style progress rail ---- */
.quote-flow { position: relative; }        /* the rail positions against this box */
.flow-rail {
  /* catalog 026 progress role, re-tokened: empty rail = kit line, fill =
     accent-cta; geometry (top/left/height) measured and set by quote.js,
     so a no-JS visit simply never sees it */
  position: absolute;
  display: none;                           /* JS reveals it once measured */
  width: 2px;                              /* component: 2px progress strip */
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.flow-rail i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent-cta);
  transform: scaleY(var(--flow-p, 0));     /* scroll-driven fill, set by quote.js */
  transform-origin: top;
}
.quote-step { padding: 0 48px; margin-top: 76px; position: relative; } /* kit: page gutter 48; section pad member 76 between steps */
.step-head { display: flex; align-items: center; gap: 16px; } /* kit spacing base 16 */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;               /* ref chip height 48 as a numbered circle */
  border-radius: 50%;                       /* kit radius scale member 50 percent */
  background: var(--line);                  /* kit: secondary fill FADEDE */
  color: var(--ink);
  font-size: 16px;
  transition: background-color .3s var(--ease-house), color .3s var(--ease-house);
}
.quote-step.on .step-num {
  background: var(--accent-cta);            /* the circle lights as its step takes the viewport */
  color: #FFFFFF;                           /* kit: white on accent-cta, 5.86:1 AA */
}
.step-title {
  font-size: 32px;                          /* ref type scale member 32 as the inner step title; hierarchy by SIZE at 400 */
  font-weight: 400;
  letter-spacing: -0.8px;                   /* ref display tracking at 32px */
}
.step-body { margin-left: 64px; }           /* body aligns with the step title (48 circle + 16 gap), clearing the rail column */

/* ---- Product picker (kit: in-page quote-tool inputs = filled cream pill, radius 96, the ref menu-search pattern) ---- */
.picker { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ref card pad 32 as the head-to-controls step */
.picker-pill {
  position: relative;                       /* anchors the conic spinner */
  overflow: hidden;                         /* clips the spinner to the pill */
  display: inline-flex;
  align-items: center;
  height: 60px;                             /* ref navPill height 60, the cream pill input scale */
  padding: 0 28px;
  border-radius: 96px;                      /* kit: pill radius 96 */
  background: var(--surface);               /* kit: cream pill input fill */
  color: var(--ink);
  font-size: 16px;                          /* ref body 16 */
  transition: background-color .2s ease, color .2s ease;
}
.picker-pill:hover { background: var(--line); } /* kit: secondary fill on hover */
.pp-label { position: relative; z-index: 2; } /* the label rides above the conic layers */
.picker-pill[aria-pressed="true"] {
  background: var(--accent-cta);            /* kit: primary = accent-cta with white text, 5.86:1 AA */
  color: #FFFFFF;
}
/* catalog 012 Conic Animation on the ACTIVE pill only: an oversized conic
   spinner rotates behind an inset overlay so a thin lit rim orbits the pill.
   Geometry from the component (tall spinner centered on the box, linear
   infinite spin); colors re-tokened to the kit red family, kept subtle. */
.picker-pill[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: -25%;
  top: -450%;
  width: 150%;
  height: 1000%;                            /* component spinner geometry: top -450%, height 1000% */
  background: conic-gradient(transparent 200deg, rgba(249, 215, 213, 0) 250deg, rgba(249, 215, 213, .85) 320deg, #FFFDF8 360deg);
  animation: sq-conic-spin 4s linear infinite;
  z-index: 0;
}
.picker-pill[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 2px;                               /* the rim thickness: component overlayMargin scaled to the pill */
  border-radius: 96px;
  background: var(--accent-cta);
  z-index: 1;
}
@keyframes sq-conic-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.picker-note { margin-top: 20px; font-size: 16px; color: var(--muted-ink); }
.picker-note a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ---- Motor easy-buy panel (facts section 7; hidden when another line is picked) ---- */
.easy-panel { margin-top: 48px; }
.easy-panel[hidden] { display: none; }
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);    /* derived: 2x2 fact field inside the step column */
  gap: 32px;                                /* ref card gap 32 */
  margin-top: 24px;
}
.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-top: 10px; font-size: 16px; line-height: 1.5; } /* ref body 16/400 */

/* ---- Handoff channel cards (facts section 6: portal, phone, email) ---- */
.picked-note { margin-top: 20px; font-size: 16px; color: var(--muted-ink); }
.picked-note strong { font-weight: 500; color: var(--ink); } /* kit: 500 is the loaded medium weight */
.handoff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);    /* derived: 3-up grid, the card row density at 1280+ */
  gap: 32px;                                /* ref card gap 32 */
  margin-top: 24px;
}
.handoff-card {
  border-radius: 32px;                      /* ref card radius 32, flat filled, border none, shadow none */
  padding: 32px;                            /* ref card pad 32 */
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hand-head { font-size: 16px; color: var(--muted-ink); } /* ref col-head pattern: muted 16 */
.hand-lead {
  margin-top: 12px;
  font-size: 26px;                          /* ref card caption scale 26/400 */
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;                  /* long email never overflows the card at 375 */
}
.hand-note { margin-top: 8px; font-size: 14px; color: var(--muted-ink); margin-bottom: 24px; } /* ref legal-row scale 14 */
.handoff-card .pill13 { margin-top: auto; }

/* ---- 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, bloom = kit hover red), soft (line fill, bloom =
        accent-cta with the ink flipping white), cream (surface on coral). ---- */
.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;
  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-soft.on-cream { background: var(--card-blush); }           /* kit: blush keeps the pill visible on the cream card */
.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) */
@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; }
}

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

/* ---- Closing band: STATIC world-bright coral painted on the section (kit:
        world-bright F3A0A3; ink on coral 4.6:1, large type) + catalog 020
        Interactive Gradient, CSS variant: blurred kit-family blobs drifting
        on keyframes, a pointer-follow glow layered in by quote.js ---- */
.quote-cta {
  position: relative;
  overflow: hidden;                         /* blobs never escape the band */
  margin-top: 128px;                        /* kit section pad member 128 */
  min-height: 80vh;
  background: var(--world-bright);          /* kit: coral world as a static section fill, no html flip */
  color: var(--ink);
  padding: 96px 48px;                       /* kit section pad member 96 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.qc-blobs { position: absolute; inset: 0; z-index: 0; }
.qb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);                       /* component default blur 60 */
  will-change: transform;
}
.qb1 {
  width: 44vw; height: 44vw;
  max-width: 640px; max-height: 640px;
  left: -8%; top: -20%;
  background: radial-gradient(circle, rgba(249, 215, 213, .9) 0%, rgba(249, 215, 213, 0) 70%); /* kit blush */
  animation: sq-orbit-a 22s ease-in-out infinite;
}
.qb2 {
  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-orbit-b 28s ease-in-out infinite;
}
.qb3 {
  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-orbit-c 18s ease-in-out infinite;
}
.qb-follow {
  /* the pointer-follow glow (component: blob 1 springs toward the pointer);
     quote.js lerps its transform on fine pointers only, opacity gates it */
  width: 26vw; height: 26vw;
  max-width: 380px; max-height: 380px;
  left: 0; top: 0;
  background: radial-gradient(circle, rgba(255, 253, 248, .55) 0%, rgba(255, 253, 248, 0) 70%); /* kit cream glow */
  opacity: 0;
  transition: opacity .4s ease;
}
.qc-blobs.follow-on .qb-follow { opacity: 1; }
@keyframes sq-orbit-a {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(9vw, 6vh); }
  66%  { transform: translate(3vw, 12vh); }
  100% { transform: translate(0, 0); }
}
@keyframes sq-orbit-b {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(-8vw, -8vh); }
  70%  { transform: translate(-2vw, -14vh); }
  100% { transform: translate(0, 0); }
}
@keyframes sq-orbit-c {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10vw, -6vh); }
  100% { transform: translate(0, 0); }
}
.qc-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quote-cta .trust-line { color: var(--ink); opacity: .8; } /* derived: full ink carries contrast on coral */
.quote-cta .display { margin: 48px 0; }     /* ref cta-band stack rhythm (styles.css) */

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

  .quote-step { padding: 0 20px; margin-top: 56px; } /* ref mobile page gutter 20 */
  .step-num { width: 44px; height: 44px; }  /* ref mobile chip 44 */
  .step-title { font-size: 24px; letter-spacing: -0.5px; }
  .step-body { margin-left: 0; }            /* the narrow column keeps its full width */
  .flow-rail { display: none !important; }  /* the rail is a desktop treatment; circles alone carry the steps */

  .picker { gap: 8px; margin-top: 24px; }
  .picker-pill { height: 48px; padding: 0 20px; } /* ref chip height 48 as the mobile pill input */

  .easy-panel { margin-top: 32px; }
  .facts-grid { grid-template-columns: 1fr; gap: 16px; } /* 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; }

  .handoff-grid { grid-template-columns: 1fr; gap: 16px; }
  .handoff-card { padding: 24px; min-height: 0; }
  .hand-note { margin-bottom: 20px; }
  .hand-lead { font-size: 20px; }

  .quote-cta { margin-top: 76px; min-height: 0; padding: 76px 20px; } /* kit section pad member 76 */
  .quote-cta .trust-line { font-size: 16px; }
  .quote-cta .display { margin: 32px 0; }
  .qb { filter: blur(40px); }               /* lighter paint cost on mobile */
  .qb3 { 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) {
  .picker-pill[aria-pressed="true"]::before { animation: none; display: none; }
  .picker-pill[aria-pressed="true"]::after { display: none; }
  .qb { animation: none; }
  .qb-follow { display: none; }
  .step-num { transition: none; }
  .flow-rail 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-sm { padding: 0 44px 0 26px; }
  .pill13-icon { right: 20px; }             /* arrow rests visible, nothing slides */
  .pill13-sm .pill13-icon { right: 18px; }
}