/* Nudge (1.7): an indicative illustration (SIMULATIONS.md tier 1), never the
   prompter. A brightly lit stage: velvet curtains, spotlights, the audience in
   front. A 9s loop in three beats: you talk (the waveform moves), you pause (it
   goes quiet, the ear pulses, your next words arrive), you're back. The ear is
   the app's own (Apple's "ear" symbol, the Nudge button's glyph) as a mask.
   Used by the /features #nudge section and the /pro Nudge card. */
.nud{position:absolute;inset:0;overflow:hidden;background:radial-gradient(62% 72% at 50% 46%,#fff6df 0%,#ffd896 30%,#ef9a4c 60%,#9a4518 100%)}
/* two spotlights from the wings, crossing on the voice */
.nud .spot{position:absolute;top:-10%;width:62%;height:120%;pointer-events:none;mix-blend-mode:screen;opacity:.55;filter:blur(6px)}
.nud .spot.l{left:2%;background:linear-gradient(115deg,rgba(255,250,225,.95),rgba(255,236,190,0) 72%);clip-path:polygon(0 0,18% 0,100% 100%,48% 100%)}
.nud .spot.r{right:2%;background:linear-gradient(245deg,rgba(255,250,225,.95),rgba(255,236,190,0) 72%);clip-path:polygon(82% 0,100% 0,52% 100%,0 100%)}
/* the stage floor, with the spotlights' pool on it */
.nud .floor{position:absolute;left:0;right:0;bottom:0;height:23%;background:radial-gradient(48% 90% at 50% 0%,rgba(255,244,214,.85),rgba(255,244,214,0) 70%),linear-gradient(#c9874a,#8f5428);box-shadow:inset 0 2px 0 rgba(255,236,200,.6)}
/* velvet curtains, gathered at the sides, and the scalloped valance */
.nud .curtain{position:absolute;top:0;bottom:0;width:15%;min-width:40px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 40%,rgba(255,255,255,.08) 70%,rgba(0,0,0,.3)),repeating-linear-gradient(90deg,#7a0a19 0 4px,#b3162b 4px 9px,#d42a3f 9px 11px,#94101f 11px 15px)}
.nud .curtain.l{left:0;border-radius:0 0 70% 0/0 0 26% 0}
.nud .curtain.r{right:0;border-radius:0 0 0 70%/0 0 0 26%;transform:scaleX(-1)}
.nud .valance{position:absolute;left:0;right:0;top:0;height:22px;background:radial-gradient(circle at 50% 0,#b3162b 0 9px,rgba(0,0,0,0) 9.5px),linear-gradient(#7a0a19,#b3162b);background-repeat:repeat-x,no-repeat;background-size:20px 10px,100% 13px;background-position:0 12px,0 0;filter:drop-shadow(0 2px 2px rgba(60,0,10,.35))}
.nud .valance::after{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:linear-gradient(90deg,#c9932f,#ffd56b,#c9932f)}
/* the audience, in silhouette against the light */
.nud .crowd{position:absolute;left:-4%;right:-4%;bottom:-18px;display:flex;justify-content:space-between}
.nud .crowd i{width:30px;height:40px;border-radius:15px 15px 4px 4px;background:#2b170c}
/* the voice */
.nud .wave{position:absolute;left:50%;top:52%;height:46px;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%);animation:nudGate 9s ease-in-out infinite}
.nud .wave i{width:5px;height:var(--h,24px);border-radius:3px;background:linear-gradient(#ff9f0a,#e05a00);box-shadow:0 0 6px rgba(255,140,0,.35);animation:nudTalk .9s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
/* the ear: Apple's symbol as a mask, orange, in a white badge that pulses */
.nud .ear{position:absolute;left:calc(15% + 12px);top:32px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(120,50,10,.28);animation:nudEar 9s ease-out infinite}
.nud .ear::before{content:"";position:absolute;inset:6px 8px;background:#ff7a00;-webkit-mask:url(/home-img/nudge-ear.png) center/contain no-repeat;mask:url(/home-img/nudge-ear.png) center/contain no-repeat}
.nud .say{position:absolute;left:calc(15% + 52px);top:32px;max-width:calc(70% - 52px);background:#fff;color:#1d1d1f;font-size:12.5px;font-weight:600;line-height:1.25;border-radius:4px 12px 12px 12px;padding:7px 11px;text-wrap:balance;box-shadow:0 8px 20px rgba(120,50,10,.25);opacity:0;transform:translateY(-3px) scale(.98);transform-origin:left top;animation:nudSay 9s ease-in-out infinite}
@keyframes nudTalk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes nudGate{0%,30%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}36%,64%{opacity:.4;transform:translate(-50%,-50%) scaleY(.12)}70%,100%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}}
@keyframes nudEar{0%,35%{box-shadow:0 4px 12px rgba(120,50,10,.28),0 0 0 0 rgba(255,122,0,0)}37%{box-shadow:0 4px 12px rgba(120,50,10,.28),0 0 0 0 rgba(255,122,0,.6)}48%{box-shadow:0 4px 12px rgba(120,50,10,.28),0 0 0 13px rgba(255,122,0,0)}50%{box-shadow:0 4px 12px rgba(120,50,10,.28),0 0 0 0 rgba(255,122,0,.5)}61%,100%{box-shadow:0 4px 12px rgba(120,50,10,.28),0 0 0 13px rgba(255,122,0,0)}}
@keyframes nudSay{0%,36%{opacity:0;transform:translateY(-3px) scale(.98)}40%,62%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-2px)}}
/* /pro shows it as the one full-width card: the players a size up, desktop only. */
@media (min-width:861px){
  .card.wide .nud .curtain{width:11%}
  .card.wide .nud .ear{left:calc(11% + 22px);top:44px;width:46px;height:46px}
  .card.wide .nud .ear::before{inset:9px 11px}
  .card.wide .nud .say{left:calc(11% + 82px);top:46px;font-size:19px;padding:10px 16px;border-radius:5px 16px 16px 16px;max-width:none}
  .card.wide .nud .wave{zoom:1.8}
  .card.wide .nud .crowd{left:6%;right:6%;bottom:-22px}
  .card.wide .nud .crowd i{width:44px;height:58px;border-radius:22px 22px 6px 6px}
}
@media (prefers-reduced-motion:reduce){.nud .wave,.nud .wave i,.nud .ear,.nud .say{animation:none}.nud .say{opacity:1;transform:none}}

/* Beta chip beside PRO, blue like the app's BETA pill. */
.eyebrow .beta,.card .beta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:#1e7ae6;background:#e9f2fe;border-radius:5px;padding:3px 6px;margin-left:6px;vertical-align:1px}
.card h3 .beta{vertical-align:3px}