/* CardCue Pro — shared art kit (2026-06-11 site-wide overhaul).
   The hero language in reusable form: blue→violet brand thread,
   device frames with labeled screenshot slots, whimsy garnish
   helpers. Additive only — defines new classes, overrides nothing,
   so it is safe to <link> into any page after its inline styles.
   Canonical source of the patterns first built on index.html. */

:root{
  --violet:#7c3aed;
  --bv-blue:#0a5cd6;
  --bv-grad:linear-gradient(135deg,#0a5cd6,#7c3aed);
}

/* ---- Typography: no orphaned words ----
   Headings balance their lines; prose avoids single-word last lines
   where the browser supports it. dewidow.js is the cross-browser
   guarantee (joins the last two words with a non-breaking space). */
h1,h2,h3,h4{text-wrap:balance}
p,li,figcaption,blockquote,dt,dd{text-wrap:pretty}

/* ---- Blue→violet text + chrome helpers ---- */
.bv-text{background:var(--bv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bv-num{background:var(--bv-grad);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.bv-rule{height:3px;border:0;border-radius:999px;background:var(--bv-grad);opacity:.5;margin:34px auto;max-width:120px}
.bv-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--bv-grad)}

/* ---- Honest little range bars (data viz under numbers) ---- */
.mathbar{height:6px;border-radius:999px;background:rgba(10,92,214,.10);margin:10px 0 12px;position:relative;overflow:hidden}
.mathbar i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--bv-grad);opacity:.85}

/* ---- Ghost backdrop (drifting cards, coins, sparkles) ----
   Usage: make the section position:relative; overflow:hidden, then
   drop in an <svg class="art-ghosts" aria-hidden="true"> with card
   rects at opacity .05, coins .09, sparkles .12. Content sits in a
   position:relative sibling so it paints above. */
.art-ghosts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---- Device frames + labeled screenshot slots ----
   The dashed slot names the real screenshot to drop in. */
.devframe{position:relative;width:178px;background:#101216;border-radius:30px;padding:7px;box-shadow:0 16px 38px rgba(28,18,84,.30),inset 0 1px 1px rgba(255,255,255,.14)}
.devframe::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:52px;height:15px;background:#101216;border-radius:9px;z-index:3}
.devframe .screen{position:relative;border-radius:23px;overflow:hidden;aspect-ratio:9/19.5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 10px;background:linear-gradient(155deg,rgba(10,92,214,.07),rgba(124,58,237,.10)),#f5f6fc}
.devframe.dark .screen{background:linear-gradient(155deg,rgba(10,92,214,.18),rgba(124,58,237,.22)),#0c0e14}
.watchframe{position:relative;width:132px;background:#101216;border-radius:34px;padding:7px;box-shadow:0 14px 32px rgba(28,18,84,.30),inset 0 1px 1px rgba(255,255,255,.14)}
.watchframe::after{content:"";position:absolute;right:-5px;top:34%;width:5px;height:26px;background:#23262d;border-radius:0 3px 3px 0}
.watchframe .screen{position:relative;border-radius:27px;overflow:hidden;aspect-ratio:1/1.22;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px;background:linear-gradient(155deg,rgba(10,92,214,.20),rgba(124,58,237,.24)),#0c0e14}
/* Real framed App Store screenshot (iPhone 17 Pro Max). The PNG/WebP
   carries its own device frame + transparent surround; a CSS drop-shadow
   gives the floating-phone look. Drop-in replacement for a .devframe. */
.shot{width:178px;height:auto;display:block;filter:drop-shadow(0 18px 38px rgba(28,18,84,.32))}
.shotslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;height:100%;border:2px dashed rgba(124,58,237,.45);border-radius:16px;padding:10px 8px}
.devframe.dark .shotslot,.watchframe .shotslot{border-color:rgba(167,139,250,.5)}
.shotslot .cam{width:26px;height:26px;border-radius:8px;background:var(--bv-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(124,58,237,.35)}
.shotslot .cam svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shot-eyebrow{font-size:8px;font-weight:900;letter-spacing:1.6px;color:var(--violet);text-transform:uppercase}
.devframe.dark .shot-eyebrow,.watchframe .shot-eyebrow{color:#a78bfa}
.shot-text{font-size:10px;line-height:1.45;font-weight:600;color:var(--ink2,#636363);max-width:130px}
.devframe.dark .shot-text,.watchframe .shot-text{color:rgba(255,255,255,.72)}

/* ---- Cue's watch rings (mascot whimsy) ---- */
.cue-watch{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.cue-watch img{width:84px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 8px 16px rgba(28,18,84,.25))}
.cue-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(124,58,237,.30);animation:cuering 3.2s ease-out infinite}
.cue-ring:nth-child(1){width:100px;height:100px}
.cue-ring:nth-child(2){width:140px;height:140px;animation-delay:1.05s}
.cue-ring:nth-child(3){width:176px;height:176px;animation-delay:2.1s}
@keyframes cuering{0%{transform:scale(.72);opacity:0}30%{opacity:.85}100%{transform:scale(1.06);opacity:0}}
@media (prefers-reduced-motion: reduce){.cue-ring{animation:none;opacity:.35}}