/* ============================================================
   SPARK JOBS - Home "Deal Me In" (tactile card-craft)
   Scoped under .deal so other pages are untouched.
   ============================================================ */

.deal{
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:var(--cream-page);
  background:var(--cream-page);
  color:var(--navy);
}
.deal main{background:var(--cream-page)}
.deal h1,.deal h2,.deal h3,.deal h4{font-family:var(--font-display);color:var(--navy);letter-spacing:-.02em}
.deal p{color:#4a5563}
.deal ::selection{background:var(--spark);color:#fff}

/* Mono data labels */
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.tag-mono{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--forest);font-weight:700}
.tag-mono::before{content:"";width:7px;height:7px;background:var(--spark);border-radius:2px;transform:rotate(45deg)}

/* Tactile card primitive */
.hardcard{background:#fff;border:2.5px solid var(--navy);border-radius:22px;box-shadow:var(--shadow-hard)}

/* Nav on cream (solid tactile skin, no glassmorphism) */
.deal .nav.is-scrolled{background:rgba(251,249,243,.96);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 2.5px 0 var(--navy)}
.deal .nav__menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream-page)}
.deal .nav__link{color:#4a5563}
.deal .nav__link:hover{color:var(--navy);background:rgba(30,42,56,.06)}
.deal .btn--primary{background:var(--forest);border:2.5px solid var(--navy);box-shadow:var(--shadow-hard-sm);color:#fff}
.deal .btn--primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy)}
.deal .btn--primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}

/* Section rhythm */
.deal-sec{position:relative;padding-block:clamp(64px,9vw,120px)}
.deal-sec--tight{padding-block:clamp(44px,6vw,76px)}
.deal .lede{font-family:var(--font-body);font-size:clamp(1rem,1.4vw,1.18rem);color:#4a5563;line-height:1.55;max-width:52ch}

/* ============ HERO ============ */
.deal-hero{position:relative;overflow:hidden;padding-top:calc(var(--nav-h) + clamp(20px,4vw,44px));padding-bottom:clamp(30px,5vw,60px)}
.deal-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(20px,4vw,50px);align-items:center}
.hh{font-family:var(--font-display);font-weight:800;line-height:.92;letter-spacing:-.035em;
  font-size:clamp(3rem,8.2vw,6.4rem);color:var(--navy);margin:14px 0 0}
.hh__line{display:block;overflow:hidden;padding:.02em 0}
.hh__word{display:inline-block;transform:translateY(110%);
  animation:word-in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
/* keep large kinetic type crisp after it settles */
.hh__word,.hero-copy,.beat,.sticker,.flip-face,.jobcard__title{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hh__word--spark{color:var(--spark)}
.hh__word--rot{--r:-3deg}
@keyframes word-in{
  0%{transform:translateY(110%) rotate(var(--r,0deg));font-variation-settings:'wght' 300,'wdth' 80;opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0) rotate(var(--r,0deg));font-variation-settings:'wght' 800,'wdth' 100;opacity:1}
}
.hero-sub{margin-top:22px;font-family:var(--font-body);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.28rem);color:#3b4552;max-width:30ch}
.hero-sub b{color:var(--navy);font-weight:800}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;font-family:var(--font-mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;color:#5a6570;font-weight:700}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta .d{width:6px;height:6px;border-radius:50%;background:var(--forest)}
.hero-fade{opacity:0;transform:translateY(18px);animation:fadeUp .7s var(--ease-out) both;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Phone in hero, cards spill past bezel */
.hero-stage{position:relative;display:flex;justify-content:center;align-items:flex-start}
.hero-stage .device{opacity:0;transform:translateY(40px) scale(.94);animation:deal-in 1s var(--ease-spring) .3s both}
@keyframes deal-in{to{opacity:1;transform:none}}
.hero-stage .app-body{overflow:visible}
.hero-stage .deck{overflow:visible}
.spark-canvas{position:absolute;inset:-16% -14%;width:128%;height:132%;z-index:6;pointer-events:none}

.drag-sticker{position:absolute;left:-6%;bottom:16%;z-index:8;transform:rotate(-8deg);
  font-family:var(--font-mono);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  background:var(--amber);color:#3a2400;border:2.5px solid var(--navy);border-radius:12px;padding:8px 12px;
  box-shadow:var(--shadow-hard-sm);display:flex;align-items:center;gap:8px;pointer-events:none}
.drag-sticker svg{width:20px;height:20px;animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (max-width:960px){.drag-sticker{display:none}}

@media (max-width:940px){
  .deal-hero__grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:640px}
  .hh{font-size:clamp(2.8rem,13vw,4.6rem)}
}

/* ============ RECEIPT ============ */
.receipt-wrap{display:flex;justify-content:center}
.receipt{position:relative;width:min(560px,100%);background:#fff;color:var(--navy);padding:30px 34px 26px;
  font-family:var(--font-mono);box-shadow:var(--shadow-lift);
  --tear:9px}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:var(--tear);
  background:
    linear-gradient(45deg,transparent 33.4%,#fff 33.4%,#fff 66.6%,transparent 66.6%),
    linear-gradient(-45deg,transparent 33.4%,#fff 33.4%,#fff 66.6%,transparent 66.6%);
  background-size:calc(var(--tear)*2) var(--tear);background-repeat:repeat-x}
.receipt::before{top:calc(var(--tear)*-1 + 1px)}
.receipt::after{bottom:calc(var(--tear)*-1 + 1px);transform:scaleY(-1)}
.receipt__h{text-align:center;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate-500);
  padding-bottom:12px;border-bottom:2px dashed #d6dad2}
.receipt__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;
  border-bottom:1.5px dashed #e2e5dd;opacity:0}
.receipt.is-in .receipt__row{animation:print .01s steps(1) forwards;animation-delay:var(--d,0s)}
@keyframes print{to{opacity:1}}
.receipt__row .lbl{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#5a6570}
.receipt__row .val{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem);color:var(--navy);letter-spacing:-.02em}
.receipt__row .val.g{color:var(--forest)}
.receipt__row .val.s{color:var(--spark)}
.receipt__foot{text-align:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa49c;padding-top:14px}
.receipt__barcode{height:34px;margin:10px auto 0;width:70%;
  background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 4px,var(--navy) 4px 5px,transparent 5px 9px)}

/* ============ HOW / BEATS ============ */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,30px)}
.beat{position:relative;background:#fff;border:2.5px solid var(--navy);border-radius:22px;padding:26px 24px 24px;
  box-shadow:var(--shadow-hard);transition:transform .3s var(--ease-spring),box-shadow .3s}
.beat:nth-child(1){transform:rotate(-1.4deg)}
.beat:nth-child(2){transform:rotate(1deg)}
.beat:nth-child(3){transform:rotate(-.6deg)}
.beat:hover{transform:rotate(0) translateY(-4px);box-shadow:10px 10px 0 var(--navy)}
.beat__n{font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--spark)}
.beat__ic{width:56px;height:56px;border-radius:16px;border:2.5px solid var(--navy);display:grid;place-items:center;margin:14px 0 16px;
  background:var(--cream);color:var(--forest)}
.beat__ic svg{width:28px;height:28px}
.beat h3{font-size:1.35rem;font-weight:800;margin-bottom:8px}
.beat p{font-family:var(--font-body);font-size:.96rem;color:#4a5563}
@media (max-width:820px){.beats{grid-template-columns:1fr}.beat{transform:none!important}}

/* ============ MATCH DIAL (playable) ============ */
.dial-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.dial-stage{display:flex;flex-direction:column;align-items:center;gap:16px;user-select:none}
.dial{position:relative;width:min(300px,72vw);aspect-ratio:1;touch-action:none;cursor:grab}
.dial.is-drag{cursor:grabbing}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .track{fill:none;stroke:#e7ebe3;stroke-width:16}
.dial .fill{fill:none;stroke:var(--amber);stroke-width:16;stroke-linecap:round;transition:stroke .1s}
.dial__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dial__num{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,9vw,4.6rem);line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.dial__lbl{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:var(--slate-500);margin-top:4px}
.dial__hint{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--forest)}
.dial-card{background:#fff;border:2.5px solid var(--navy);border-radius:22px;box-shadow:var(--shadow-hard);overflow:hidden;max-width:380px}
.dial-card__top{height:90px;background-size:cover;background-position:center;position:relative}
.dial-card__verdict{position:absolute;left:14px;bottom:-14px;font-family:var(--font-mono);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:10px;border:2.5px solid var(--navy);background:#fff;color:var(--navy)}
.dial-card__body{padding:22px 20px 20px}
.dial-card__body h4{font-size:1.2rem;font-weight:800}
.dial-card__body .co{font-family:var(--font-body);font-size:.9rem;color:#6b7280;font-weight:600;margin-top:2px}
.dial-card__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dial-card__chips span{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  padding:5px 10px;border-radius:8px;border:2px solid var(--navy);background:var(--cream);color:var(--navy);font-weight:700}
@media (max-width:820px){.dial-grid{grid-template-columns:1fr;gap:32px}.dial-stage{order:-1}}

/* ============ STICKER FEATURES ============ */
.sticker-sheet{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px)}
.sticker{position:relative;background:#fff;border:2.5px solid var(--navy);border-radius:20px;padding:24px 22px;
  box-shadow:var(--shadow-hard);grid-column:span 4;opacity:0;transform:rotate(var(--rot,0deg)) translateY(30px)}
.sticker.is-in{animation:peel .7s var(--ease-spring) forwards}
@keyframes peel{to{opacity:1;transform:rotate(var(--rot,0deg)) translateY(0)}}
.sticker:hover{transform:rotate(0) translateY(-5px)!important;box-shadow:10px 10px 0 var(--navy);transition:transform .3s var(--ease-spring),box-shadow .3s}
.sticker::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a5a,var(--spark));border:2px solid var(--navy);box-shadow:1px 2px 0 rgba(30,42,56,.4)}
.sticker--wide{grid-column:span 6}
.sticker--tall{grid-column:span 6}
.sticker__ic{width:52px;height:52px;border-radius:14px;border:2.5px solid var(--navy);display:grid;place-items:center;background:var(--cream);color:var(--forest);margin-bottom:14px}
.sticker__ic svg{width:26px;height:26px}
.sticker h3{font-size:1.28rem;font-weight:800;margin-bottom:7px}
.sticker p{font-family:var(--font-body);font-size:.94rem;color:#4a5563}
/* Résumé "types" */
.sticker__type{font-family:var(--font-mono);font-size:.82rem;color:var(--forest);margin-top:14px;min-height:1.4em;
  border-left:3px solid var(--app-green);padding-left:10px}
.sticker__type .caret{display:inline-block;width:2px;background:var(--forest);margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* Network node lines */
.netmap{position:relative;height:88px;margin-top:14px}
.netmap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.netmap line{stroke:var(--app-green);stroke-width:2;stroke-dasharray:120;stroke-dashoffset:120}
.sticker.is-in .netmap line{animation:draw 1.1s var(--ease-out) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.netmap .node{position:absolute;width:30px;height:30px;border-radius:50%;border:2.5px solid var(--navy);background:#fff;
  display:grid;place-items:center;font-family:var(--font-body);font-weight:800;font-size:.72rem;color:var(--navy);transform:translate(-50%,-50%)}
@media (max-width:820px){.sticker,.sticker--wide,.sticker--tall{grid-column:1/-1;transform:none}.sticker.is-in{animation:peel-flat .6s var(--ease-out) forwards}}
@keyframes peel-flat{to{opacity:1;transform:translateY(0)}}

/* ============ FLIP SWITCH ============ */
.flip-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.flip-toggle{display:inline-flex;background:var(--cream);border:2.5px solid var(--navy);border-radius:var(--r-pill);padding:5px;box-shadow:var(--shadow-hard-sm);position:relative}
.flip-toggle button{position:relative;z-index:1;font-family:var(--font-body);font-weight:700;font-size:.95rem;color:#5a6570;padding:.6em 1.3em;border-radius:var(--r-pill);cursor:pointer;transition:color .25s}
.flip-toggle button.is-on{color:#fff}
.flip-toggle .knob{position:absolute;top:5px;bottom:5px;left:5px;border-radius:var(--r-pill);background:var(--forest);
  transition:transform .4s var(--ease-spring),width .4s var(--ease-spring);z-index:0}
.flip-scene{perspective:1400px}
.flip-inner{position:relative;transform-style:preserve-3d;transition:transform .7s var(--ease-spring);min-height:240px}
@media (max-width:820px){.flip-inner{min-height:300px}}
@media (max-width:520px){.flip-inner{min-height:360px}}
.flip-inner.is-back{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;background:#fff;border:2.5px solid var(--navy);border-radius:22px;
  box-shadow:var(--shadow-hard);padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.flip-face--back{transform:rotateY(180deg)}
.flip-face .mono{font-size:.72rem;color:var(--spark)}
.flip-face h3{font-size:1.5rem;font-weight:800}
.flip-face p{font-family:var(--font-body);color:#4a5563}
@media (max-width:820px){.flip-grid{grid-template-columns:1fr;gap:26px}}

/* ============ NIGHT BAND ============ */
.night{background:var(--night);color:#dfeee4;border-radius:0}
.night h2{color:#fff}
.night .lede{color:rgba(223,238,228,.72)}
.night-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.resume-term{background:#0a130d;border:2.5px solid #23402c;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);overflow:hidden}
.resume-term__bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid #1c3324}
.resume-term__bar i{width:11px;height:11px;border-radius:50%;background:#33513a}
.resume-term__bar i:nth-child(1){background:#e5533a}.resume-term__bar i:nth-child(2){background:var(--amber)}.resume-term__bar i:nth-child(3){background:var(--app-green)}
.resume-term__bar span{margin-left:8px;font-family:var(--font-mono);font-size:.72rem;color:#6f8c78;letter-spacing:.06em}
.resume-term__body{padding:20px;font-family:var(--font-mono);font-size:.86rem;line-height:1.7;min-height:200px;color:#bfe6cd}
.resume-term__body .k{color:#6f8c78}
.resume-term__body .g{color:var(--app-green)}
.type-caret{display:inline-block;width:8px;height:1.05em;background:var(--app-green);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@media (max-width:820px){.night-grid{grid-template-columns:1fr;gap:30px}}

/* ============ SPLIT-FLAP MARQUEE ============ */
.flap{position:relative;overflow:hidden;background:var(--navy);border-block:2.5px solid var(--navy);padding:16px 0;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.flap.is-drag{cursor:grabbing}
.flap__track{display:flex;gap:0;width:max-content;will-change:transform}
.flap__cell{display:inline-flex;align-items:center;gap:12px;padding:0 26px;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.06em;color:#f2efe6;white-space:nowrap}
.flap__cell b{color:var(--amber)}
.flap__cell .sep{width:9px;height:9px;background:var(--app-green);border-radius:2px;transform:rotate(45deg)}

/* ============ CTA FLICK ============ */
.cta-deal{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:center}
.cta-cardstage{position:relative;display:flex;justify-content:center;min-height:360px}
.flick-card{position:relative;width:min(320px,84vw);background:#fff;border:2.5px solid var(--navy);border-radius:26px;
  box-shadow:var(--shadow-lift);overflow:hidden;touch-action:none;cursor:grab;user-select:none;z-index:2}
.flick-card:focus-visible{outline:3px solid var(--spark);outline-offset:4px}
.flick-card.is-drag{cursor:grabbing}
.flick-card__img{height:150px;background:linear-gradient(135deg,var(--forest),#0c5a2c);position:relative;display:grid;place-items:center;color:#fff}
.flick-card__img .ring{width:78px;height:78px;border-radius:50%;border:6px solid var(--app-green);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;background:rgba(0,0,0,.15)}
.flick-card__body{padding:22px 22px 24px;text-align:center}
.flick-card__body h3{font-size:1.5rem;font-weight:800}
.flick-card__body p{font-family:var(--font-body);color:#4a5563;margin-top:4px}
.flick-card__hint{margin-top:14px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--forest)}
.stamp-applied{position:absolute;top:24px;left:50%;transform:translate(-50%,-50%) scale(2.4) rotate(-14deg);opacity:0;z-index:5;
  font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--spark);border:5px solid var(--spark);border-radius:14px;padding:.1em .4em;text-transform:uppercase;letter-spacing:.04em;pointer-events:none}
.stamp-applied.is-hit{animation:stamp .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-10deg)}}
.cta-stores{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none}
.cta-stores.is-show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .5s var(--ease-spring) .1s,transform .5s var(--ease-spring) .1s}
/* Reduced motion / no-JS: show the store buttons and hide the flick card so downloads are always reachable */
@media (prefers-reduced-motion:reduce){
  .cta-stores{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .flick-card__hint{display:none}
}
.cta-stores .store-btn{border:2.5px solid var(--navy);box-shadow:var(--shadow-hard-sm)}
.cta-reset{margin-top:16px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--forest);text-decoration:underline;cursor:pointer;background:none}
.deal .cta-form .input{border:2.5px solid var(--navy);border-radius:14px;background:#fff}
.deal .cta-form .input:focus{box-shadow:4px 4px 0 var(--forest)}
@media (max-width:820px){.cta-deal{grid-template-columns:1fr;gap:34px}}

/* ============ FOOTER on cream ============ */
.deal .footer{background:var(--navy)}

/* Scroll progress rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:4px;background:transparent;z-index:200;pointer-events:none}
.rail i{display:block;width:100%;height:100%;background:var(--spark);transform:scaleY(0);transform-origin:top}

/* ===== Hero social proof (real people) ===== */
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-proof .people-row img,.hero-proof .people-row .more{width:44px;height:44px}
.hero-proof__cap{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:#5a6570;font-weight:700;max-width:20ch;line-height:1.45}
@media (max-width:940px){.hero-proof{justify-content:center}}

/* ===== Founder + social ===== */
.footer .founder-link{color:var(--spark-400);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.footer .founder-link:hover{color:#fff}
.footer__social a:hover{background:var(--spark);color:#3a2400}

/* ===== More SPARK energy ===== */
.spark-twinkle{display:inline-block;color:var(--spark);animation:twinkle 2.4s ease-in-out infinite}
.hh__word--spark{position:relative}
.hh__spark-mark{position:absolute;top:-.28em;right:-.62em;font-size:.42em;color:var(--spark);animation:twinkle 2.2s ease-in-out infinite;pointer-events:none}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.3) rotate(22deg);opacity:1}}
/* spark pops off the primary button on hover */
.deal .btn--primary::before{content:"✦";position:absolute;top:-9px;right:-7px;font-size:.9rem;color:var(--spark);opacity:0;transform:scale(.4) rotate(-20deg);transition:.35s var(--ease-spring);z-index:2}
.deal .btn--primary:hover::before{opacity:1;transform:scale(1) rotate(12deg)}
/* section eyebrow tick pulses */
.tag-mono::before{animation:tick-pulse 2.6s ease-in-out infinite}
@keyframes tick-pulse{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.35)}}
/* spark seam under section headings */
.deal .h2{position:relative}

/* ===== Pencil-circle HUD annotation (hover the phone) ===== */
.hud-zone{position:absolute;left:0;right:0;top:11%;height:14%;z-index:5;cursor:help;pointer-events:auto}
.hud-annotate{position:absolute;left:2%;right:2%;top:-12%;bottom:-12%;width:96%;height:124%;overflow:visible;pointer-events:none}
.hud-annotate .pencil{fill:none;stroke:var(--spark);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;opacity:.92}
.device:hover .hud-annotate .pencil{animation:pencil-draw .85s ease-out forwards}
@keyframes pencil-draw{to{stroke-dashoffset:0}}
.hud-note{position:absolute;right:-1%;top:-52%;font-family:'Caveat',cursive;font-weight:700;font-size:1.2rem;
  color:var(--spark);transform:rotate(-7deg);opacity:0;transition:opacity .3s .5s;pointer-events:none;white-space:nowrap}
.device:hover .hud-note{opacity:1}
@media (max-width:520px){.hud-note{font-size:1rem}}
@media (prefers-reduced-motion:reduce){
  .hud-annotate .pencil{stroke-dashoffset:0}
  .spark-twinkle,.hh__spark-mark,.tag-mono::before{animation:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .deal *{animation:none!important;transition:none!important}
  .hh__word{transform:none!important;opacity:1!important;font-variation-settings:'wght' 800!important}
  .hero-fade,.hero-stage .device,.receipt__row,.sticker{opacity:1!important;transform:none!important}
  .sticker{transform:rotate(var(--rot,0deg))!important}
  .netmap line{stroke-dashoffset:0!important}
}