/* ProQuote brand layer shared by the app pages (Bill maker, dashboard, work
 * area) so they look like the home page: its fonts, its animated day/night
 * switch and its motion. The home page itself uses css/landing.css.
 *
 * Fonts come from /css/fonts.css (self-hosted): Cormorant Garamond for
 * headings, DM Sans for everything else.
 */
:root{
  --pq-serif:'Cormorant Garamond',Georgia,serif;
  --pq-sans:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --pq-ease:cubic-bezier(.4,0,.2,1);
  --pq-spring:cubic-bezier(.34,1.56,.64,1);
  --pq-out:cubic-bezier(0,0,.2,1);
}
/* Headings the home page way: serif, bold, a touch tight. */
.pq-serif{font-family:var(--pq-serif);font-weight:700;letter-spacing:-.01em}
.pq-wm{font-family:var(--pq-serif);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;line-height:1;color:var(--text)}
.pq-wm span{color:#f59e0b}

/* ── The home page's animated day/night switch ── */
.theme-switch{--ts:1;position:relative;display:inline-block;width:calc(var(--ts)*60px);height:calc(var(--ts)*34px);flex-shrink:0;vertical-align:middle}
.theme-switch input{opacity:0;width:0;height:0;position:absolute}
.ts-slider{position:absolute;cursor:pointer;inset:0;background:var(--accent);transition:.4s;overflow:hidden}
.ts-slider.round{border-radius:calc(var(--ts)*34px)}
.ts-knob{position:absolute;height:calc(var(--ts)*26px);width:calc(var(--ts)*26px);left:calc(var(--ts)*4px);bottom:calc(var(--ts)*4px);background-color:#fbbf24;transition:.4s}
.ts-slider.round .ts-knob{border-radius:50%}
.theme-switch input:checked+.ts-slider{background:#0b1220}
.theme-switch input:checked+.ts-slider .ts-knob{transform:translateX(calc(var(--ts)*26px));background:#e0e0e0}
.ts-dot{opacity:0;transition:.4s;fill:#999;position:absolute;z-index:4}
.theme-switch input:checked+.ts-slider .ts-dot{opacity:1}
#tmd1{left:calc(var(--ts)*10px);top:calc(var(--ts)*3px);width:calc(var(--ts)*6px);height:calc(var(--ts)*6px)}
#tmd2{left:calc(var(--ts)*2px);top:calc(var(--ts)*10px);width:calc(var(--ts)*10px);height:calc(var(--ts)*10px)}
#tmd3{left:calc(var(--ts)*16px);top:calc(var(--ts)*18px);width:calc(var(--ts)*3px);height:calc(var(--ts)*3px)}
.ts-ray{position:absolute;z-index:-1;fill:white;opacity:.1}
#tr1{left:calc(var(--ts)*-8px);top:calc(var(--ts)*-8px);width:calc(var(--ts)*43px);height:calc(var(--ts)*43px)}
#tr2{left:-50%;top:-50%;width:calc(var(--ts)*55px);height:calc(var(--ts)*55px)}
#tr3{left:calc(var(--ts)*-18px);top:calc(var(--ts)*-18px);width:calc(var(--ts)*60px);height:calc(var(--ts)*60px)}
.ts-cld{position:absolute;animation:ts-cloud 6s infinite}
.ts-cl{fill:#eee}
.ts-cd{fill:#ccc;animation-delay:1s}
#tc1{left:calc(var(--ts)*30px);top:calc(var(--ts)*15px);width:calc(var(--ts)*40px)}
#tc2{left:calc(var(--ts)*44px);top:calc(var(--ts)*10px);width:calc(var(--ts)*20px)}
#tc3{left:calc(var(--ts)*18px);top:calc(var(--ts)*24px);width:calc(var(--ts)*30px)}
#tc4{left:calc(var(--ts)*36px);top:calc(var(--ts)*18px);width:calc(var(--ts)*40px)}
#tc5{left:calc(var(--ts)*48px);top:calc(var(--ts)*14px);width:calc(var(--ts)*20px)}
#tc6{left:calc(var(--ts)*22px);top:calc(var(--ts)*26px);width:calc(var(--ts)*30px)}
@keyframes ts-cloud{0%{transform:translateX(0)}40%{transform:translateX(4px)}80%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.ts-stars{transform:translateY(calc(var(--ts)*-32px));opacity:0;transition:.4s}
.theme-switch input:checked+.ts-slider .ts-stars{transform:translateY(0);opacity:1}
.ts-star{fill:white;position:absolute;animation:ts-twinkle 2s infinite}
#ts1{width:calc(var(--ts)*20px);top:calc(var(--ts)*2px);left:calc(var(--ts)*3px);animation-delay:.3s}
#ts2{width:calc(var(--ts)*6px);top:calc(var(--ts)*16px);left:calc(var(--ts)*3px)}
.theme-switch input:focus-visible+.ts-slider{box-shadow:0 0 0 3px rgba(99,102,241,.35)}

/* ── Motion ──
   .pq-reveal      fades up when scrolled into view (js/pq-motion.js)
   .pq-stagger     its children rise in one after another
   .pq-pop         a quick spring pop (added and removed by script)
   .pq-bump        a number that just changed
   .pq-press       buttons that give a little on tap */
@keyframes pqRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pqFade{from{opacity:0}to{opacity:1}}
@keyframes pqPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes pqBump{0%{transform:translateY(0)}35%{transform:translateY(-3px) scale(1.04)}100%{transform:none}}
@keyframes pqSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes pqShine{0%{left:-60%}40%,100%{left:130%}}
@keyframes pqGlow{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.0)}50%{box-shadow:0 0 0 6px rgba(99,102,241,.12)}}
.pq-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--pq-out),transform .6s var(--pq-out)}
.pq-reveal.pq-in{opacity:1;transform:none}
.pq-stagger>*{animation:pqRise .5s var(--pq-out) both;animation-delay:calc(var(--i,0)*65ms)}
.pq-pop{animation:pqPop .38s var(--pq-spring)}
.pq-bump{animation:pqBump .42s var(--pq-spring)}
.pq-slide{animation:pqSlideIn .32s var(--pq-out) both}
.pq-press{transition:transform .15s var(--pq-ease)}
.pq-press:active{transform:scale(.97)}
.pq-lift{transition:transform .2s var(--pq-ease),box-shadow .2s var(--pq-ease),border-color .2s}
.pq-lift:hover{transform:translateY(-2px)}
/* A soft light that sweeps across the main button now and then. */
.pq-shine{position:relative;overflow:hidden}
.pq-shine::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:pqShine 4s 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .pq-reveal{opacity:1;transform:none;transition:none}
  .pq-stagger>*,.pq-pop,.pq-bump,.pq-slide{animation:none}
  .pq-shine::after{animation:none;display:none}
  .pq-lift:hover,.pq-press:active{transform:none}
}