/* Auto glass insurance page (2026-10-21) — builds on homepage.css + service.css ("Showroom Black").
   Signature: an itemized receipt slip that prints its doc-named lines one by one when it scrolls in. */
.page-insurance .hero--sub .h1--long{max-width:15ch}
.ins-step{color:var(--mute);margin:0}
.ins-step b,.page-insurance .tick-list b,.page-insurance .spec-grid b{color:var(--white);font-weight:600}
.ins-note{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:15.5px;max-width:70ch}

/* ---------- the receipt ---------- */
.rcpt{padding:clamp(90px,11vw,150px) 0;background:linear-gradient(180deg,var(--void),var(--carbon))}
.rcpt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.rcpt-lead{color:#dfe5ea;font-size:18px;line-height:1.7;margin:22px 0 10px}
.slip{position:relative;display:grid;place-items:center;padding:30px 0}
.slip::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(77,159,255,.22),rgba(77,159,255,0));filter:blur(10px)}
.slip-paper{position:relative;width:min(100%,400px);padding:34px 32px 44px;background:#f4f6f8;color:#0b0f14;border-radius:6px 6px 0 0;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);transform:rotate(-2deg);
  /* torn bottom edge */
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 10px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 10px repeat-x}
.slip-brand{margin:0;font:700 21px/1.2 var(--f-d);letter-spacing:-.01em;text-align:center}
.slip-sub{margin:6px 0 22px;padding-bottom:18px;border-bottom:1.5px dashed #b9c2cc;font:600 11.5px/1 var(--f-m);letter-spacing:.24em;text-transform:uppercase;text-align:center;color:#4a5560}
.slip-rows{list-style:none;margin:0;padding:0}
.slip-rows li{display:flex;align-items:center;gap:10px;padding:13px 0;font:500 16px/1.3 var(--f-b);color:#1c242c}
.slip-rows i{flex:1;height:0;border-bottom:2px dotted #b9c2cc;transform:translateY(4px)}
.slip-rows b{width:64px;height:10px;border-radius:6px;background:linear-gradient(90deg,#c9d3dd,#e2e8ee)}
.slip-rows li.is-total{margin-top:10px;padding-top:18px;border-top:1.5px dashed #b9c2cc;font:700 17px/1.3 var(--f-d)}
.slip-rows li.is-total b{width:84px;height:12px;background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.slip-stamp{position:absolute;right:22px;bottom:34px;padding:6px 12px;border:2px solid var(--blue-deep);border-radius:6px;color:var(--blue-deep);
  font:700 12px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;transform:rotate(-12deg);opacity:.85}
/* prints in: the rows appear one after another, then the stamp lands */
.js .slip .slip-rows li{opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--k) * .22s)}
.js .slip.in .slip-rows li{opacity:1;transform:none}
.js .slip .slip-stamp{opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity .35s ease 1.5s,transform .45s cubic-bezier(.3,1.6,.5,1) 1.5s}
.js .slip.in .slip-stamp{opacity:.85;transform:rotate(-12deg) scale(1)}
@media(prefers-reduced-motion:reduce){.js .slip .slip-rows li,.js .slip .slip-stamp{transition:none}}
@media(max-width:980px){.rcpt-grid{grid-template-columns:1fr}.slip{padding:10px 0 0}}
@media(max-width:640px){.slip-paper{padding:28px 22px 40px}.slip-rows li{font-size:15px}.slip-rows b{width:48px}.slip-rows li.is-total b{width:64px}}