/* ============================================================
   GOOGLE REVIEWS — page styles (scenes rebuild, 2026-07)
   Reuses hero2/kinetic/counter from style.css.
   Scene artifacts appended below the base block:
   gh- stranger's thumb hero · bk- break room · da- dead-air take
   tpr- trophy printout · ft- four part ticket · bo- back office tab
   ============================================================ */

/* ---------- cursor-reactive glow (shared pattern) ---------- */
.atmo-cursor{
  position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle, rgba(27,141,246,.10), rgba(255,211,110,.05) 45%, transparent 70%);
}
.atmo-cursor.live{opacity:1;}
@media(max-width:900px), (pointer:coarse){.atmo-cursor{display:none;}}

/* ---------- hero: two-column, text + gh phone ---------- */
.gr-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:3rem;align-items:center;
}
.gr-hero-grid>*{min-width:0;}
@media(max-width:900px){
  .gr-hero-grid{grid-template-columns:1fr;gap:2.4rem;}
}

/* ---------- section rhythm ---------- */
.gr-sec{padding:5.5rem 0;}
.gr-sec.gr-alt{background:var(--ink-2);}
.gr-head{max-width:720px;margin:0 auto 1rem;text-align:center;}
.gr-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.4rem 0 1rem;}
.gr-head p{color:#9db8d6;font-size:1.02rem;line-height:1.65;}
.gr-eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#7fc1ff;
}
.scene-after{
  max-width:640px;margin:2rem auto 0;text-align:center;
  font-size:.95rem;color:#9db8d6;line-height:1.6;
}
.scene-after b{color:#ffd98c;}
.scene-after a{color:#7fc1ff;font-weight:700;text-decoration:none;}
.scene-after a:hover{text-decoration:underline;}

/* ---------- POS steps: slim gold-numbered rail beside the film take ---------- */
.play-wrap{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:2.6rem;align-items:center;margin-top:2.6rem;}
.play-wrap>*{min-width:0;}
.pos-steps{display:flex;flex-direction:column;gap:1.1rem;}
.pos-step{display:flex;gap:.85rem;align-items:flex-start;}
.pos-no{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;margin-top:.1rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(232,181,63,.14);border:1px solid rgba(232,181,63,.45);
  color:#ffd98c;font-weight:900;font-size:.78rem;
}
.pos-tx b{display:block;font-size:.92rem;color:#eef4fb;}
.pos-tx span{display:block;font-size:.8rem;color:#8aa3c0;line-height:1.5;margin-top:.15rem;}
@media(max-width:960px){
  .play-wrap{grid-template-columns:1fr;gap:2rem;}
  .pos-steps{order:2;}
}

/* ---------- stigma closer ---------- */
.stigma-band{
  display:flex;gap:2rem;align-items:center;max-width:820px;margin:2.6rem auto 0;
  border:1px solid rgba(127,166,204,.2);border-radius:20px;padding:2rem 2.2rem;
  background:linear-gradient(135deg, rgba(27,141,246,.10), rgba(13,27,48,.6));
}
.stigma-band .big{
  font-size:clamp(2.6rem,6vw,4rem);font-weight:900;color:#7fc1ff;line-height:1;flex:0 0 auto;
}
.stigma-band p{margin:0;color:#cfe0f3;font-size:1rem;line-height:1.6;}
@media(max-width:640px){
  .stigma-band{flex-direction:column;text-align:center;gap:1rem;padding:1.8rem 1.4rem;}
}

/* ---------- two tools crosslink ---------- */
.twotools{
  max-width:680px;margin:0 auto;text-align:center;
  border:1px dashed rgba(127,166,204,.35);border-radius:16px;padding:1.6rem 1.8rem;
}
.twotools i{font-size:1.5rem;color:#ffd98c;margin-bottom:.5rem;display:inline-block;}
.twotools p{margin:0;font-size:.95rem;color:#9db8d6;line-height:1.6;}
.twotools a{color:#7fc1ff;font-weight:700;}

/* ============================================================
   SCENE: hero (gh-)
   ============================================================ */
/* THE STRANGER'S THUMB (hero phone artifact) */
.gh-stage{
  position:relative;
  width:100%;
  max-width:400px;
  margin:0 auto;
  container-type:inline-size;
}
.gh-stage *,.gh-stage *::before,.gh-stage *::after{box-sizing:border-box;}

/* light pools */
.gh-halo{
  position:absolute;
  left:-10%;top:-5%;
  width:52%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,231,168,.12), rgba(232,181,63,.05) 55%, transparent 75%);
  pointer-events:none;
  z-index:0;
}
.gh-glow{
  position:absolute;
  inset:1% 0 10%;
  background:radial-gradient(ellipse closest-side at 50% 44%, rgba(27,141,246,.42), rgba(27,141,246,.16) 48%, transparent 78%);
  opacity:0;
  pointer-events:none;
  z-index:1;
}

/* phone (a real button) */
.gh-phone{
  display:block;
  position:relative;
  z-index:2;
  width:74%;
  aspect-ratio:9/17.6;
  margin:4cqw auto 5cqw;
  padding:2.1cqw;
  background:linear-gradient(160deg,#141b2b,#090d16 60%);
  border:1px solid rgba(127,193,255,.2);
  border-radius:9cqw;
  box-shadow:
    0 2.5cqw 9cqw rgba(2,6,14,.75),
    0 0 16cqw rgba(27,141,246,.3),
    inset 0 0 0 1px rgba(6,10,18,.9);
  cursor:pointer;
  transform:rotate(-3deg);
  transform-origin:50% 82%;
  transition:transform .7s cubic-bezier(.22,.7,.3,1);
  font-family:Roboto,Arial,sans-serif;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.gh-phone:focus-visible{
  outline:2px solid #7fc1ff;
  outline-offset:5px;
}
@media (hover:hover){
  .gh-stage:hover .gh-phone{transform:rotate(-.7deg);}
}
/* side buttons */
.gh-phone::before{
  content:"";
  position:absolute;
  right:-1.1cqw;top:24%;
  width:1.1cqw;height:8cqw;
  border-radius:0 1cqw 1cqw 0;
  background:#1d2739;
}
.gh-phone::after{
  content:"";
  position:absolute;
  right:-1.1cqw;top:36%;
  width:1.1cqw;height:13cqw;
  border-radius:0 1cqw 1cqw 0;
  background:#18202f;
}

.gh-screen{
  display:flex;
  flex-direction:column;
  width:100%;height:100%;
  background:#202124;
  border-radius:7.2cqw;
  overflow:hidden;
  position:relative;
}
/* punch-hole camera */
.gh-cam{
  position:absolute;
  top:1.9cqw;left:50%;
  width:2.4cqw;height:2.4cqw;
  transform:translateX(-50%);
  border-radius:50%;
  background:#050608;
  box-shadow:inset 0 0 0 .5cqw #10131a;
}

/* status bar */
.gh-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2.2cqw 4.6cqw 0;
  color:#e8eaed;
  font-size:11px;
  font-size:2.9cqw;
  font-weight:500;
  letter-spacing:.02em;
}
.gh-statics{display:flex;align-items:center;gap:1.2cqw;}
.gh-statics svg{display:block;width:3.4cqw;height:3.4cqw;fill:#bdc1c6;}
.gh-statics .gh-batt{width:5cqw;}

/* search field */
.gh-search{
  display:flex;
  align-items:center;
  gap:2.6cqw;
  margin:3cqw 3.6cqw 0;
  padding:0 3.4cqw;
  height:10.6cqw;
  background:#303134;
  border-radius:7cqw;
}
.gh-glogo{width:4.6cqw;height:4.6cqw;flex:0 0 auto;display:block;}
.gh-query{
  color:#e8eaed;
  font-size:13px;
  font-size:3.4cqw;
  white-space:nowrap;
  overflow:hidden;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
.gh-caret{
  display:inline-block;
  width:.45cqw;min-width:1.5px;
  height:1.15em;
  margin-left:.6cqw;
  background:#8ab4f8;
  animation:ghBlink 1.06s steps(2,start) infinite;
}
.gh-mic{width:4.2cqw;height:4.2cqw;flex:0 0 auto;display:block;}

/* map strip */
.gh-map{
  display:block;
  margin:3cqw 3.6cqw 0;
  border-radius:3.4cqw;
  overflow:hidden;
  line-height:0;
  border:1px solid rgba(255,255,255,.05);
}
.gh-map svg{width:100%;height:auto;display:block;}
.gh-goldpin{transform-box:fill-box;transform-origin:50% 92%;}
.gh-pinring{opacity:0;transform-box:fill-box;transform-origin:50% 50%;}

/* local pack */
.gh-pack{
  display:block;
  margin:1.4cqw 0 0;
  flex:1 1 auto;
}
.gh-packlabel{
  display:block;
  padding:2.4cqw 4.6cqw 1cqw;
  color:#e8eaed;
  font-size:13px;
  font-size:3.5cqw;
  font-weight:500;
}
.gh-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:2cqw;
  padding:2.7cqw 4.6cqw;
  border-top:1px solid #3c4043;
  overflow:hidden;
}
.gh-rowmain{display:block;flex:1 1 auto;min-width:0;}
.gh-name{
  display:block;
  color:#e8eaed;
  font-size:14px;
  font-size:3.7cqw;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gh-meta{
  display:flex;
  align-items:center;
  gap:1.3cqw;
  margin-top:1cqw;
  color:#9aa0a6;
  font-size:12px;
  font-size:3.1cqw;
  white-space:nowrap;
}
.gh-ministar{width:3cqw;height:3cqw;fill:#9aa0a6;display:block;}
.gh-status2{
  display:flex;
  align-items:center;
  gap:1.3cqw;
  margin-top:1cqw;
  color:#9aa0a6;
  font-size:12px;
  font-size:3.1cqw;
  white-space:nowrap;
}
.gh-closed{color:#f28b82;}
.gh-open{color:#81c995;font-weight:500;}
.gh-dot{color:#5f6368;}
.gh-dim .gh-name{color:#9aa0a6;}
.gh-dim{opacity:.78;}

/* directions chip */
.gh-dir{
  flex:0 0 auto;
  width:8.6cqw;height:8.6cqw;
  border:1px solid #3c4043;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gh-dir svg{width:4.4cqw;height:4.4cqw;fill:#8ab4f8;display:block;}
.gh-dim .gh-dir svg{fill:#5f6368;}

/* hero row */
.gh-hero .gh-name{
  font-weight:700;
  font-size:15px;
  font-size:3.9cqw;
}
.gh-rating-hero{color:#e8eaed;font-weight:500;}
.gh-stars{
  position:relative;
  display:inline-flex;
  line-height:0;
}
.gh-starrow{display:inline-flex;gap:.5cqw;}
.gh-starrow svg{width:3.3cqw;height:3.3cqw;display:block;}
.gh-stars-base svg{fill:#5f6368;}
.gh-stars-fill{
  position:absolute;
  left:0;top:0;height:100%;
  width:100%;
  overflow:hidden;
}
.gh-stars-fill .gh-starrow{position:absolute;left:0;top:0;}
.gh-stars-fill svg{fill:#ffd36e;}
.gh-count{display:inline-block;}
.gh-ripple{
  position:absolute;
  left:58%;top:50%;
  width:13cqw;height:13cqw;
  margin:-6.5cqw 0 0 -6.5cqw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(170,200,255,.5), rgba(138,180,248,.22) 58%, transparent 74%);
  opacity:0;
  pointer-events:none;
}

/* more places + gesture bar */
.gh-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6cqw;
  border-top:1px solid #3c4043;
  padding:3cqw 0 2.6cqw;
  color:#8ab4f8;
  font-size:12px;
  font-size:3.2cqw;
  font-weight:500;
}
.gh-more svg{width:3cqw;height:3cqw;fill:#8ab4f8;display:block;}
.gh-gesture{
  display:block;
  margin:auto auto 2.2cqw;
  width:26cqw;height:1cqw;
  border-radius:1cqw;
  background:#5f6368;
}

/* the stranger's hand */
.gh-hand{
  position:absolute;
  left:0;bottom:-1px;
  width:100%;
  z-index:3;
  pointer-events:none;
  display:block;
}

/* timeline */
/* armed (JS ready, not yet played): hide the animated pieces */
.gh-armed:not(.gh-play):not(.gh-done) .gh-map,
.gh-armed:not(.gh-play):not(.gh-done) .gh-row,
.gh-armed:not(.gh-play):not(.gh-done) .gh-more{opacity:0;}
.gh-armed:not(.gh-play):not(.gh-done) .gh-stars-fill{width:0;}

/* play */
.gh-play .gh-glow{animation:ghGlowIn 1s ease both, ghBreathe 6s ease-in-out 3.4s infinite;}
.gh-play .gh-map{animation:ghFadeUp .55s ease .05s both;}
.gh-play .gh-row:nth-child(2){animation:ghFadeUp .45s ease .38s both;}
.gh-play .gh-row:nth-child(3){animation:ghFadeUp .45s ease .47s both;}
.gh-play .gh-row:nth-child(4){animation:ghFadeUp .45s ease .56s both;}
.gh-play .gh-more{animation:ghFadeUp .45s ease .68s both;}
.gh-play .gh-stars-fill{animation:ghStars .6s cubic-bezier(.3,.6,.3,1) 1.8s both;}
.gh-play .gh-ripple{animation:ghRipple 1.1s ease-out 2.6s both;}
.gh-play .gh-row.gh-hero{animation:ghFadeUp .45s ease .47s both, ghLift .45s ease 2.6s both;}
.gh-play .gh-goldpin{animation:ghPinPop .6s cubic-bezier(.3,1.6,.4,1) 2.6s both;}
.gh-play .gh-pinring{animation:ghPinRing 1.5s ease-out 2.6s 2;}
.gh-count.gh-ticking{animation:ghCountFlip .38s ease both;}

/* done / reduced motion: settled end state */
.gh-done .gh-glow{opacity:1;}
.gh-done .gh-stars-fill{width:100%;}
.gh-done .gh-hero{
  transform:translateY(-2px);
  background:#292c31;
  box-shadow:inset 0 0 0 1px rgba(255,211,110,.5);
  border-radius:2.4cqw;
  border-top-color:transparent;
}
.gh-done .gh-hero + .gh-more{border-top-color:transparent;}
.gh-done .gh-caret{animation:none;opacity:1;}

@keyframes ghBlink{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
@keyframes ghGlowIn{from{opacity:0;}to{opacity:1;}}
@keyframes ghBreathe{0%,100%{opacity:1;}50%{opacity:.68;}}
@keyframes ghFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes ghStars{from{width:0;}to{width:100%;}}
@keyframes ghRipple{0%{opacity:.9;transform:scale(.2);}70%{opacity:.35;}100%{opacity:0;transform:scale(3.4);}}
@keyframes ghLift{
  to{
    transform:translateY(-2px);
    background:#292c31;
    box-shadow:inset 0 0 0 1px rgba(255,211,110,.5);
    border-radius:2.4cqw;
    border-top-color:transparent;
  }
}
@keyframes ghPinPop{0%{transform:scale(1);}45%{transform:scale(1.45);}100%{transform:scale(1.18);}}
@keyframes ghPinRing{0%{opacity:.85;transform:scale(.4);}100%{opacity:0;transform:scale(2.6);}}
@keyframes ghCountFlip{0%{opacity:1;transform:translateY(0);}45%{opacity:0;transform:translateY(-.55em);}55%{opacity:0;transform:translateY(.55em);}100%{opacity:1;transform:translateY(0);}}

/* mobile: flat, full column */
@media (max-width:640px){
  .gh-phone{transform:none;width:80%;}
  .gh-stage:hover .gh-phone{transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .gh-stage *,.gh-stage *::before,.gh-stage *::after{animation:none !important;transition:none !important;}
}

/* ============================================================
   SCENE: board (bk-)
   ============================================================ */
@property --bk-curl{syntax:'<length>';inherits:false;initial-value:22px;}

.bk-stage{position:relative;width:100%;max-width:920px;margin:0 auto;font-family:'Inter Tight',sans-serif;}

.bk-room{position:relative;width:100%;aspect-ratio:16/8;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,#0d1a2e 0%,#0a1424 45%,#060b16 100%);
  border:1px solid rgba(150,180,220,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(214,228,248,.06);}
.bk-room::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 110px rgba(0,0,0,.55);}

.bk-grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='bkn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23bkn)'/%3E%3C/svg%3E");}
.bk-rail{position:absolute;left:0;right:0;top:64%;height:6px;z-index:1;
  background:linear-gradient(180deg,rgba(214,228,248,.09),rgba(214,228,248,.03) 45%,rgba(0,0,0,.42) 100%);}
.bk-floor{position:absolute;left:0;right:0;top:86%;bottom:0;z-index:1;
  background:linear-gradient(180deg,rgba(2,5,10,.68),rgba(4,8,16,.35));border-top:1px solid rgba(214,228,248,.07);}
.bk-tungsten{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(42% 48% at 9% 36%,rgba(255,186,102,.2),rgba(255,170,80,.06) 55%,transparent 74%);}

.bk-slate{position:absolute;left:2.8%;top:6%;z-index:2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.24em;color:rgba(178,200,228,.42);text-transform:uppercase;}

/* punch clock */
.bk-clock{position:absolute;left:4.2%;top:27%;width:9.2%;aspect-ratio:5/8;z-index:2;border-radius:9px;
  background:linear-gradient(165deg,#c0ac89 0%,#a08a67 45%,#77644a 100%);
  filter:brightness(.9);
  box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,210,.35), inset 0 -3px 6px rgba(0,0,0,.3);}
.bk-clock-card{position:absolute;left:31%;width:38%;height:13%;top:-8%;border-radius:2px 2px 0 0;
  background:linear-gradient(#d6c69a,#bfa97a);transform:rotate(2.5deg);box-shadow:0 2px 4px rgba(0,0,0,.4);}
.bk-clock-slot{position:absolute;left:18%;right:18%;top:7%;height:4%;background:#241f16;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,240,210,.25);}
.bk-clock-face{position:absolute;left:12%;right:12%;top:21%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e6ddc4,#c8bc9d 62%,#a89a78);
  box-shadow:inset 0 0 0 2px #3d352a, inset 0 2px 5px rgba(0,0,0,.35);}
.bk-hand{position:absolute;left:calc(50% - 1px);bottom:50%;width:2px;background:#2b251c;transform-origin:50% 100%;border-radius:2px;}
.bk-hh{height:27%;transform:rotate(272deg);}
.bk-mh{height:40%;transform:rotate(24deg);}
.bk-pin{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#2b251c;border-radius:50%;}
.bk-clock-plate{position:absolute;left:22%;right:22%;bottom:8%;height:9%;border-radius:3px;
  background:linear-gradient(#8d7a5c,#5f5038);box-shadow:inset 0 1px 0 rgba(255,240,210,.2);}

/* adhesive ghosts */
.bk-ghost{position:absolute;z-index:2;border-radius:3px;
  background:linear-gradient(165deg,rgba(216,230,250,.06),rgba(216,230,250,.018));
  box-shadow:inset 0 0 0 1px rgba(216,230,250,.055), inset 0 10px 18px rgba(216,230,250,.02);}
.bk-ghost::before{content:'';position:absolute;left:9%;top:6%;width:17%;height:11%;background:rgba(216,230,250,.05);border-radius:1px;}
.bk-ghost::after{content:'';position:absolute;right:9%;top:6%;width:17%;height:11%;background:rgba(216,230,250,.045);border-radius:1px;}
.bk-ghost1{left:34%;top:13%;width:11%;aspect-ratio:1;transform:rotate(3deg);display:flex;align-items:center;justify-content:center;}
.bk-ghost1 span{font-family:'Marker Felt','Comic Sans MS','Segoe Print',cursive;font-size:12px;color:rgba(205,220,240,.14);transform:rotate(-2deg);}
.bk-ghost2{left:15%;top:46%;width:8.5%;aspect-ratio:1;transform:rotate(-2.5deg);}
.bk-ghost3{left:20.5%;top:20%;width:14.2%;aspect-ratio:1;transform:rotate(-6deg);opacity:0;transition:opacity .8s ease .15s;}
.bk-fallen .bk-ghost3{opacity:1;}

/* sticky note (default = final lit state; .bk-armed = pre-scroll) */
.bk-note{--bk-curl:32px;position:absolute;left:20.5%;top:20%;width:14.2%;aspect-ratio:1;z-index:3;
  transform:rotate(-6deg);appearance:none;-webkit-appearance:none;border:0;margin:0;padding:13px 11px 0;
  cursor:pointer;text-align:left;
  background:linear-gradient(160deg,#f6e470 0%,#eed452 55%,#dfc243 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--bk-curl)),calc(100% - var(--bk-curl)) 100%,0 100%);
  filter:brightness(.8) drop-shadow(3px 7px 8px rgba(0,0,0,.45));
  transition:--bk-curl .9s ease, filter .9s ease, opacity .25s ease;
  font-family:'Marker Felt','Comic Sans MS','Segoe Print',cursive;color:#43380f;}
.bk-note::after{content:'';position:absolute;right:0;bottom:0;width:var(--bk-curl);height:var(--bk-curl);
  background:linear-gradient(135deg,#fbf0a0 0%,#e8d258 34%,#a68c2c 48%,transparent 50%);}
.bk-note:focus-visible{outline:3px solid #7fc1ff;outline-offset:4px;}
.bk-armed:not(.bk-on) .bk-note{--bk-curl:20px;filter:brightness(1) drop-shadow(3px 7px 8px rgba(0,0,0,.45));}
.bk-note-l1{display:inline-block;font-size:16px;line-height:1.18;font-weight:700;
  border-bottom:4px double rgba(67,56,15,.8);padding-bottom:3px;}
.bk-note-l2{display:block;margin-top:12px;font-size:11px;opacity:.72;white-space:nowrap;}

/* crumpled notes */
.bk-crumple{position:absolute;z-index:2;width:6%;aspect-ratio:8/5;
  background:
    linear-gradient(115deg,transparent 32%,rgba(0,0,0,.28) 34%,transparent 37%),
    linear-gradient(245deg,transparent 55%,rgba(0,0,0,.22) 57%,transparent 60%),
    linear-gradient(140deg,#cdb64d 0%,#a58e33 45%,#6f5e20 100%);
  clip-path:polygon(6% 58%,16% 24%,38% 6%,58% 16%,80% 4%,96% 34%,90% 66%,72% 94%,34% 96%,10% 84%);
  filter:brightness(.6) drop-shadow(0 3px 3px rgba(0,0,0,.5));}
.bk-crumple1{left:29%;top:80%;}
.bk-crumple2{left:23%;top:80.5%;transform:rotate(14deg) scale(.4);opacity:0;
  transition:opacity .3s ease .1s, transform .4s cubic-bezier(.2,1.6,.4,1) .1s;}
.bk-fallen .bk-crumple2{opacity:1;transform:rotate(14deg) scale(1);}

/* pencil scrawl */
.bk-scrawl{position:absolute;left:24%;top:52%;z-index:2;max-width:19%;
  font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive;font-size:13px;line-height:1.4;
  color:rgba(180,198,222,.42);transform:rotate(-3deg);opacity:0;transition:opacity 1.1s ease .5s;}
.bk-fallen .bk-scrawl{opacity:1;}

/* TV glow */
.bk-glow{position:absolute;z-index:1;left:33%;top:-8%;width:76%;height:100%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 42%,rgba(136,190,255,.24),rgba(120,175,255,.08) 55%,transparent 75%);
  opacity:1;transition:opacity .7s ease .15s;}
.bk-armed:not(.bk-on) .bk-glow{opacity:0;}

/* TV */
.bk-tv{position:absolute;left:53%;top:9%;width:41.5%;z-index:3;border-radius:10px;padding:1.1% 1.1% 2.4%;
  background:linear-gradient(#14171c,#08090c);
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 46px rgba(120,175,255,.15), inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .7s ease;}
.bk-armed:not(.bk-on) .bk-tv{box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);}
.bk-led{position:absolute;right:3.2%;bottom:.9%;width:5px;height:5px;border-radius:50%;
  background:#45e08c;box-shadow:0 0 7px rgba(69,224,140,.9);transition:background .4s,box-shadow .4s;}
.bk-armed:not(.bk-on) .bk-led{background:#39424f;box-shadow:none;}
.bk-screen{position:relative;border-radius:6px;overflow:hidden;background:#04101f;aspect-ratio:16/8.6;}
.bk-screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(190,220,255,.07) 0%,transparent 30%);}
.bk-screen-inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:4.6% 6% 4.2%;opacity:1;transition:opacity .3s;}
.bk-armed:not(.bk-on) .bk-screen-inner{opacity:0;}
.bk-on .bk-screen-inner{animation:bkBlink .5s ease-out;}
@keyframes bkBlink{0%{opacity:0;filter:brightness(3)}35%{opacity:1;filter:brightness(2.4)}55%{opacity:.75;filter:brightness(.7)}100%{opacity:1;filter:brightness(1)}}

.bk-tv-title{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#7fa6cc;}
.bk-rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;margin:1.5% 0;}
.bk-row{display:grid;grid-template-columns:minmax(54px,auto) 1fr auto;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:#9db8d6;}
.bk-rname i{font-size:11px;color:#ffd98c;margin-right:5px;}
.bk-lead .bk-rname,.bk-lead .bk-rnum{color:#ffd98c;}
.bk-rbar{height:8px;border-radius:99px;background:rgba(127,166,204,.14);overflow:hidden;}
.bk-rbar b{display:block;height:100%;width:var(--bk-w,0%);border-radius:inherit;
  background:linear-gradient(90deg,#1b8df6,#7fc1ff);transition:width .9s cubic-bezier(.25,.8,.3,1);}
.bk-row:nth-child(1) .bk-rbar b{transition-delay:.25s;}
.bk-row:nth-child(2) .bk-rbar b{transition-delay:.37s;}
.bk-row:nth-child(3) .bk-rbar b{transition-delay:.49s;}
.bk-row:nth-child(4) .bk-rbar b{transition-delay:.61s;}
.bk-armed:not(.bk-on) .bk-rbar b{width:0%;}
.bk-rnum{display:inline-block;font-variant-numeric:tabular-nums;font-weight:800;color:#eef4fb;font-size:14px;min-width:26px;text-align:right;}
.bk-rnum.bk-pulse{animation:bkPulse .95s ease;}
@keyframes bkPulse{0%{transform:scale(1)}30%{text-shadow:0 0 14px rgba(255,215,120,.95);transform:scale(1.22);color:#ffe7a8}100%{transform:scale(1)}}
.bk-ticker{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#628bb4;font-weight:600;}
.bk-tickdot{width:6px;height:6px;border-radius:50%;background:#e85d5d;box-shadow:0 0 8px rgba(232,93,93,.7);flex:none;}

/* the fall */
@keyframes bkFall{
  0%{transform:rotate(-6deg);}
  16%{transform:translate(4px,-8px) rotate(6deg);}
  60%{transform:translate(calc(var(--bk-fx,26px)*.7),calc(var(--bk-fy,240px)*.62)) rotate(-58deg);}
  82%{transform:translate(var(--bk-fx,26px),var(--bk-fy,240px)) rotate(-88deg);}
  91%{transform:translate(var(--bk-fx,26px),calc(var(--bk-fy,240px) - 10px)) rotate(-93deg);}
  100%{transform:translate(var(--bk-fx,26px),var(--bk-fy,240px)) rotate(-92deg);}
}
.bk-note.bk-fall{animation:bkFall 1.15s cubic-bezier(.42,0,.72,.9) forwards;pointer-events:none;}
.bk-fallen .bk-note{opacity:0;pointer-events:none;}

@media (max-width:640px){
  .bk-room{aspect-ratio:4/5;}
  .bk-slate{top:3%;}
  .bk-rail{top:58%;}
  .bk-floor{top:88%;}
  .bk-tungsten{background:radial-gradient(52% 34% at 88% 13%,rgba(255,186,102,.17),rgba(255,170,80,.05) 55%,transparent 74%);}
  .bk-clock{left:auto;right:6%;top:4.5%;width:16%;}
  .bk-note,.bk-ghost3{left:7%;top:8%;width:30%;}
  .bk-note{--bk-curl:26px;padding:11px 9px 0;}
  .bk-armed:not(.bk-on) .bk-note{--bk-curl:17px;}
  .bk-note-l1{font-size:13px;border-bottom-width:3px;padding-bottom:2px;}
  .bk-note-l2{font-size:9.5px;}
  .bk-ghost1{left:44%;top:6%;width:22%;}
  .bk-ghost1 span{font-size:11px;}
  .bk-ghost2{left:10%;top:33%;width:19%;}
  .bk-scrawl{left:43%;top:29%;max-width:38%;font-size:11.5px;}
  .bk-glow{left:4%;top:32%;width:92%;height:58%;}
  .bk-tv{left:17%;top:47%;width:66%;padding:1.6% 1.6% 3.6%;}
  .bk-screen-inner{padding:4.6% 5.5% 4%;}
  .bk-tv-title{font-size:9px;letter-spacing:.16em;}
  .bk-row{font-size:11px;gap:7px;grid-template-columns:minmax(42px,auto) 1fr auto;}
  .bk-rname i{font-size:9px;margin-right:3px;}
  .bk-rbar{height:6px;}
  .bk-rnum{font-size:12px;min-width:20px;}
  .bk-ticker{font-size:8px;letter-spacing:.1em;gap:5px;}
  .bk-tickdot{width:5px;height:5px;}
  .bk-crumple{width:12%;}
  .bk-crumple1{left:22%;top:83%;}
  .bk-crumple2{left:9%;top:83.5%;}
}

@media (prefers-reduced-motion:reduce){
  .bk-stage *,.bk-stage *::before,.bk-stage *::after{animation:none!important;transition:none!important;}
  .bk-stage .bk-fadeok{transition:opacity .45s ease!important;}
}

/* ============================================================
   SCENE: play (da-)
   ============================================================ */
/* ============ THE DEAD-AIR TAKE ============ */
.da-stage{width:100%;max-width:880px;margin:0 auto;}

.da-frame{
  display:block;position:relative;width:100%;aspect-ratio:16/10;
  border:1px solid rgba(127,166,204,.15);border-radius:18px;overflow:hidden;
  padding:0;margin:0;cursor:pointer;text-align:left;color:inherit;font:inherit;
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(52% 46% at 60% 24%, rgba(34,72,122,.5), transparent 70%),
    radial-gradient(42% 36% at 20% 72%, rgba(22,50,88,.45), transparent 72%),
    linear-gradient(158deg,#0b1728,#070f1d 52%,#0a1830);
}
.da-frame:focus-visible{outline:2px solid #7fc1ff;outline-offset:3px;}
.da-frame > span{display:block;}

/* counter glass atmosphere */
.da-glass{position:absolute;inset:0;pointer-events:none;}
.da-glass span{display:block;position:absolute;}
.da-glint-ring{left:41%;top:60%;width:60px;height:60px;border:10px solid rgba(236,190,80,.5);border-radius:50%;filter:blur(7px);}
.da-glint-ring2{left:48.5%;top:75%;width:36px;height:36px;border:7px solid rgba(255,231,168,.4);border-radius:50%;filter:blur(6px);}
.da-glint-band{left:31%;top:79%;width:128px;height:24px;border-radius:12px;transform:rotate(-13deg);filter:blur(9px);
  background:linear-gradient(90deg,rgba(184,130,28,.38),rgba(255,225,150,.5) 50%,rgba(184,130,28,.3));}
.da-glint-face{left:35.5%;top:75.5%;width:30px;height:30px;border-radius:50%;filter:blur(5px);
  background:radial-gradient(circle,rgba(255,240,200,.65),rgba(184,130,28,.25) 70%);}
.da-lamp{top:-5%;left:30%;width:44%;height:80%;filter:blur(16px);
  background:linear-gradient(180deg,rgba(255,217,140,.17),rgba(255,217,140,.05) 58%,transparent 82%);
  -webkit-clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);}
.da-vig{inset:0;border-radius:inherit;box-shadow:inset 0 0 90px 26px rgba(2,5,10,.72);
  background:linear-gradient(112deg,transparent 42%,rgba(210,228,255,.05) 46.5%,transparent 55%);}

/* slate + timecode */
.da-slate{position:absolute;top:16px;left:20px;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#7fa6cc;opacity:.9;}
.da-tc{position:absolute;top:14px;right:18px;display:flex !important;align-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:.1em;color:#ffd98c;}
.da-rec{width:7px;height:7px;border-radius:50%;background:#e85d5d;opacity:.25;margin-right:8px;}
.da-stage.da-running .da-rec{opacity:1;animation:daBlink 1.2s steps(2,start) infinite;}
@keyframes daBlink{to{visibility:hidden;}}

/* ---- cash: banded stack + fanned twenties ---- */
.da-cash{position:absolute;left:4.5%;top:30%;width:300px;height:230px;}
.da-cash span{position:absolute;}
.da-stackpile{left:10px;top:2px;width:106px;height:46px;border-radius:5px;
  background:linear-gradient(168deg,#8a9b8d,#6d8071 70%);
  border:1px solid rgba(50,66,48,.7);
  box-shadow:0 3px 0 #5a6b5e,0 6px 0 #4d5d51,0 9px 0 #435245,0 15px 18px rgba(0,0,0,.5);}
.da-stackpile::after{content:"";position:absolute;left:37%;top:-3px;bottom:-12px;width:27%;border-radius:3px;
  background:linear-gradient(180deg,#ece1cf,#cbbda6);opacity:.92;box-shadow:0 2px 3px rgba(0,0,0,.3);}
.da-bill{left:112px;top:112px;width:106px;height:46px;border-radius:4px;
  background:linear-gradient(160deg,#93a591 8%,#7b8f78 60%,#6d806b 100%);
  border:1px solid rgba(50,66,48,.75);
  box-shadow:0 4px 9px rgba(0,0,0,.4);
  transform-origin:4% 118%;
  opacity:0;transform:translate(-70px,-84px) rotate(-12deg);
  transition:transform .8s cubic-bezier(.2,.75,.25,1),opacity .5s ease;}
.da-bill::before{content:"20";position:absolute;top:2px;left:5px;font-size:9px;font-weight:800;
  color:#33452f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.da-bill::after{content:"";position:absolute;inset:5px;border:1px solid rgba(238,244,232,.4);border-radius:3px;
  background:radial-gradient(ellipse 26% 62% at 50% 50%,rgba(46,62,44,.4),rgba(46,62,44,.12) 58%,transparent 72%);}
.da-bill b{position:absolute;bottom:2px;right:5px;font-size:9px;font-weight:800;color:#33452f;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.da-b1 .da-bill-1{opacity:1;transform:rotate(-30deg);}
.da-b2 .da-bill-2{opacity:1;transform:rotate(-15deg);}
.da-b3 .da-bill-3{opacity:1;transform:rotate(-1deg);}
.da-b4 .da-bill-4{opacity:1;transform:rotate(13deg);}
.da-b5 .da-bill-5{opacity:1;transform:rotate(27deg);}

/* ---- the phone ---- */
.da-phone{position:absolute;right:13%;top:7.5%;width:206px;height:424px;border-radius:30px;
  background:linear-gradient(200deg,#182230,#0e141d 60%);padding:8px;
  transform:rotate(7deg);
  box-shadow:0 26px 38px -8px rgba(1,4,9,.68),inset 0 1px 0 rgba(255,224,160,.22),inset 0 -1px 0 rgba(120,160,210,.08);}
.da-phone span{display:block;}
.da-b2 .da-phone{animation:daNudge .55s ease .3s 2;}
@keyframes daNudge{0%,100%{transform:rotate(7deg) translate(0,0);}30%{transform:rotate(7deg) translate(2px,1px);}65%{transform:rotate(7deg) translate(-1px,0);}}
.da-screen{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#04070c;}
.da-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(116deg,rgba(255,238,205,.11),transparent 36%);}

/* messages app (wakes on beat 2) */
.da-msgapp{position:absolute;inset:0;background:#0b0f15;opacity:0;transition:opacity .55s ease .15s;padding:20px 11px 0;}
.da-b2 .da-msgapp{opacity:1;}
.da-msgday{text-align:center;font-size:8.5px;font-weight:600;color:#6f7a89;letter-spacing:.04em;margin-bottom:12px;}
.da-msgfrom{font-size:8.5px;color:#8a95a5;margin:0 0 3px 8px;}
.da-bubble{background:#262d37;color:#e8edf4;border-radius:15px 15px 15px 5px;padding:8px 10px;
  font-size:10.5px;line-height:1.45;margin:0 20px 6px 0;}
.da-linkcard{background:#1a202a;border:1px solid rgba(138,180,248,.14);border-radius:13px;
  padding:9px;margin:0 14px 0 0;display:flex !important;align-items:center;gap:9px;}
.da-gfav{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#fff;
  display:flex !important;align-items:center;justify-content:center;}
.da-gfav svg{width:16px;height:16px;display:block;}
.da-linkmeta{min-width:0;}
.da-linkmeta b{display:block;font-size:9.5px;font-weight:700;color:#e8edf4;line-height:1.3;}
.da-linkmeta i{display:block;font-style:normal;font-size:8.5px;color:#8ab4f8;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* fingertip tap (beat 3) */
.da-fingertip{position:absolute;left:34%;top:27%;width:46px;height:46px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(8,12,18,.42) 20%,rgba(8,12,18,0) 68%);
  opacity:0;transform:scale(.5);}
.da-b3 .da-fingertip{animation:daTap 1s ease .1s;}
@keyframes daTap{0%{opacity:0;transform:scale(.55);}28%{opacity:1;transform:scale(1);}46%{opacity:.95;transform:scale(.8);}68%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.12);}}

/* google review sheet (beat 3) */
.da-sheet{position:absolute;left:0;right:0;bottom:0;top:50%;background:#fff;border-radius:16px 16px 0 0;
  box-shadow:0 -8px 26px rgba(0,0,0,.45);padding:7px 12px 10px;color:#202124;
  font-family:Roboto,Arial,sans-serif;
  transform:translateY(112%);transition:transform .65s cubic-bezier(.3,.85,.3,1) .72s;}
.da-b3 .da-sheet{transform:translateY(0);}
.da-grab{width:32px;height:4px;border-radius:2px;background:#dadce0;margin:0 auto 8px;}
.da-sheethead{display:flex !important;align-items:center;gap:8px;}
.da-avatar{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#1a73e8;color:#fff;
  font-size:12px;font-weight:600;display:flex !important;align-items:center;justify-content:center;}
.da-who b{display:block;font-size:10.5px;font-weight:600;color:#202124;line-height:1.25;}
.da-who i{display:block;font-style:normal;font-size:8.5px;color:#5f6368;margin-top:1px;}
.da-stars{display:flex !important;justify-content:center;gap:7px;margin:11px 0 9px;}
.da-stars svg{width:25px;height:25px;display:block;}
.da-stars svg path{fill:transparent;stroke:#dadce0;stroke-width:1.7;stroke-linejoin:round;
  transition:fill .25s ease,stroke .25s ease;}
.da-b4 .da-stars svg:nth-child(1){animation:daPop .5s ease .15s both;}
.da-b4 .da-stars svg:nth-child(2){animation:daPop .5s ease .37s both;}
.da-b4 .da-stars svg:nth-child(3){animation:daPop .5s ease .59s both;}
.da-b4 .da-stars svg:nth-child(4){animation:daPop .5s ease .81s both;}
.da-b4 .da-stars svg:nth-child(5){animation:daPop .5s ease 1.03s both;}
.da-b4 .da-stars svg:nth-child(1) path{fill:#fbbc04;stroke:#f2a600;transition-delay:.15s;}
.da-b4 .da-stars svg:nth-child(2) path{fill:#fbbc04;stroke:#f2a600;transition-delay:.37s;}
.da-b4 .da-stars svg:nth-child(3) path{fill:#fbbc04;stroke:#f2a600;transition-delay:.59s;}
.da-b4 .da-stars svg:nth-child(4) path{fill:#fbbc04;stroke:#f2a600;transition-delay:.81s;}
.da-b4 .da-stars svg:nth-child(5) path{fill:#fbbc04;stroke:#f2a600;transition-delay:1.03s;}
@keyframes daPop{0%,100%{transform:scale(1);}45%{transform:scale(1.3);}}
.da-fieldhint{font-size:8.5px;color:#9aa0a6;border:1px solid #dadce0;border-radius:9px;padding:8px 9px;margin:0 0 9px;}
.da-postrow{display:flex !important;align-items:center;justify-content:flex-end;gap:9px;}
.da-postedchip{display:inline-flex !important;align-items:center;gap:4px;color:#188038;
  font-size:9.5px;font-weight:600;opacity:0;transform:translateY(3px);
  transition:opacity .4s ease .35s,transform .4s ease .35s;}
.da-postedchip svg{width:11px;height:11px;display:block;}
.da-b5 .da-postedchip{opacity:1;transform:none;}
.da-post{background:#f1f3f4;color:#9aa0a6;border-radius:15px;padding:6px 17px;
  font-size:10.5px;font-weight:600;transition:background .35s ease,color .35s ease;}
.da-b4 .da-post{background:#1a73e8;color:#fff;transition-delay:1.35s;}

/* subtitles */
.da-subtitle{position:absolute;left:7%;right:7%;bottom:4.2%;text-align:center;
  font-size:17px;font-weight:600;letter-spacing:.005em;color:#f3f7fd;min-height:1.45em;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.75);}
.da-subtitle.da-subin{animation:daSubIn .45s ease both;}
@keyframes daSubIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* replay */
.da-replayrow{display:flex;justify-content:center;min-height:46px;margin-top:8px;}
.da-replay{opacity:0;pointer-events:none;transition:opacity .45s ease .4s;
  background:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#7fc1ff;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(127,193,255,.45);
  padding:10px 18px;min-height:44px;}
.da-replay:hover{color:#aed6ff;}
.da-replay:focus-visible{outline:2px solid #7fc1ff;outline-offset:2px;border-radius:6px;}
.da-stage.da-done .da-replay{opacity:1;pointer-events:auto;}

/* reduced-motion transcript */
.da-transcript{display:none;list-style:none;margin:16px auto 0;padding:0;max-width:560px;}
.da-transcript li{display:flex;gap:12px;align-items:baseline;padding:7px 0;
  font-size:14px;line-height:1.5;color:#9db8d6;border-bottom:1px solid rgba(127,166,204,.12);}
.da-transcript li:last-child{border-bottom:0;}
.da-transcript li span{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:11.5px;color:#ffd98c;letter-spacing:.08em;}
.da-stage.da-static .da-transcript{display:block;}
.da-stage.da-static .da-replayrow{display:none;}
.da-stage.da-static .da-frame{cursor:default;}
.da-stage.da-static *,.da-stage.da-noanim *{animation:none !important;transition:none !important;}

/* ---- mobile: portrait crop ---- */
@media (max-width:640px){
  .da-frame{aspect-ratio:4/5;}
  .da-phone{width:176px;height:362px;right:6%;top:4.5%;border-radius:27px;padding:7px;}
  .da-screen{border-radius:20px;}
  .da-sheet{top:47%;}
  .da-cash{left:-62px;top:48%;transform:scale(.82);}
  .da-lamp{left:12%;width:72%;}
  .da-glint-ring{left:15%;top:37%;}
  .da-glint-ring2{left:26%;top:33%;}
  .da-glint-band{left:4%;top:30%;}
  .da-glint-face{left:9%;top:26.5%;}
  .da-slate{font-size:9px;top:13px;left:14px;letter-spacing:.18em;}
  .da-tc{font-size:11px;top:11px;right:12px;}
  .da-subtitle{font-size:13px;bottom:2.4%;left:4%;right:4%;}
  .da-fingertip{left:32%;top:26%;}
}

/* ============================================================
   SCENE: proof (tpr-)
   ============================================================ */
/* ============ TPR: The Trophy Printout ============ */
.tpr-stage {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding-top: 16px;
  --tprTilt: -1.5deg;
}
.tpr-stage::before {
  content: "";
  position: absolute;
  inset: -46px 0 -30px 0;
  background: radial-gradient(ellipse 62% 52% at 50% 40%, rgba(255,217,140,.14), rgba(255,217,140,0) 72%);
  pointer-events: none;
}
.tpr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* -- the sheet (a real button) -- */
.tpr-sheet {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 22px 22px 18px;
  border: 0;
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #202124;
  background: linear-gradient(174deg, #fefdfa 0%, #faf8f2 78%, #f3efe4 100%);
  box-shadow: 0 18px 34px rgba(2,7,16,.5), 0 5px 12px rgba(2,7,16,.4);
  transform: rotate(var(--tprTilt));
  -webkit-tap-highlight-color: transparent;
}
.tpr-sheet:focus-visible {
  outline: 3px solid #e8b53f;
  outline-offset: 4px;
}
.tpr-js .tpr-sheet {
  opacity: 0;
  transform: rotate(-3deg) translateY(-6px);
}
.tpr-stage.tpr-in .tpr-sheet {
  opacity: 1;
  transform: rotate(var(--tprTilt)) translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}

/* -- tape strips -- */
.tpr-tape {
  position: absolute;
  top: -11px;
  width: 76px;
  height: 26px;
  background: linear-gradient(180deg, rgba(235,219,166,.52), rgba(222,202,142,.36));
  box-shadow: 0 1px 3px rgba(0,0,0,.22), inset 0 0 6px rgba(255,250,230,.28);
  pointer-events: none;
}
.tpr-tape-l { left: 16px; transform: rotate(-6deg); }
.tpr-tape-r { right: 16px; transform: rotate(5deg); }

/* -- printed listing, slightly desaturated inkjet -- */
.tpr-print {
  display: block;
  filter: saturate(.8) contrast(.96);
  font-family: Roboto, Arial, sans-serif;
}
.tpr-listing {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.tpr-info { display: block; flex: 1; min-width: 0; }
.tpr-name {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1px;
  color: #202124;
  margin-bottom: 6px;
}
.tpr-rate {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px;
}
.tpr-num { font-size: 14px; color: #5f6368; }
.tpr-count { font-size: 14px; color: #5f6368; }
.tpr-stars { display: inline-flex; gap: 1px; }
.tpr-star { width: 13px; height: 13px; display: block; }
.tpr-star path { fill: #fbbc04; }
.tpr-meta {
  display: block;
  font-size: 13px;
  color: #5f6368;
  margin-top: 5px;
}
.tpr-meta b { font-weight: 400; color: #188038; }
.tpr-links {
  display: flex;
  gap: 20px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #1a73e8;
}
.tpr-links span { display: inline-flex; align-items: center; gap: 5px; }

/* -- map thumbnail -- */
.tpr-map {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 44%, #f7efdd 44%, #f7efdd 53%, transparent 53%),
    linear-gradient(0deg,   transparent 60%, #f7efdd 60%, #f7efdd 68%, transparent 68%),
    linear-gradient(90deg,  transparent 24%, #f7efdd 24%, #f7efdd 31%, transparent 31%),
    linear-gradient(160deg, #e9dfc9, #e2d5ba);
  box-shadow: inset 0 0 0 1px rgba(32,33,36,.12);
}
.tpr-map::before {
  content: "";
  position: absolute;
  left: 7%; top: 9%;
  width: 30%; height: 26%;
  border-radius: 2px;
  background: #ccdcb4;
}
.tpr-pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -14px 0 0 -7px;
  background: #ea4335;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tpr-pin::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fdf3f2;
}

/* -- china-marker ellipse -- */
.tpr-loop {
  position: absolute;
  left: -15px; top: -11px;
  width: calc(100% + 30px);
  height: calc(100% + 22px);
  overflow: visible;
  pointer-events: none;
}
.tpr-loop path {
  fill: none;
  stroke: #e2483d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.tpr-js .tpr-loop path {
  stroke-dasharray: var(--tprLen, 900);
  stroke-dashoffset: var(--tprLen, 900);
}
.tpr-stage.tpr-mark .tpr-loop path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .6s cubic-bezier(.45,0,.3,1) .3s;
}

/* -- red handwriting -- */
.tpr-note {
  display: block;
  margin: 12px 2px 0;
  font-family: 'Marker Felt','Bradley Hand','Segoe Print','Comic Sans MS',cursive;
  font-size: 20px;
  line-height: 1.3;
  color: #d43f2e;
  transform: rotate(-1.4deg);
}
.tpr-js .tpr-note {
  opacity: 0;
  transform: rotate(-1.4deg) translateY(4px);
}
.tpr-stage.tpr-mark .tpr-note {
  opacity: 1;
  transform: rotate(-1.4deg) translateY(0);
  transition: opacity .25s ease .95s, transform .25s ease .95s;
}

/* -- honesty line -- */
.tpr-honest {
  position: relative;
  margin: 26px 8px 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7fa6cc;
}

/* -- reduced motion / static -- */
.tpr-stage.tpr-static .tpr-sheet,
.tpr-stage.tpr-static .tpr-loop path,
.tpr-stage.tpr-static .tpr-note {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .tpr-stage .tpr-sheet,
  .tpr-stage .tpr-loop path,
  .tpr-stage .tpr-note {
    transition: none !important;
  }
}

/* -- 390px -- */
@media (max-width: 480px) {
  .tpr-stage { --tprTilt: -1deg; }
  .tpr-sheet { padding: 20px 16px 16px; }
  .tpr-listing { gap: 12px; }
  .tpr-map { width: 56px; height: 56px; }
  .tpr-name { font-size: 16.5px; }
  .tpr-note { font-size: 18px; max-width: 12em; }
  .tpr-tape { width: 62px; }
}

/* ============================================================
   SCENE: machine v2 (pm-) The Self-Filing Cabinet
   ============================================================ */
.pm-stage{width:100%;max-width:900px;margin:2.6rem auto 0;}
.pm-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:2.4rem;align-items:end;}
.pm-grid>*{min-width:0;}
/* phone */
.pm-phone{position:relative;border-radius:26px;padding:.9rem .7rem 1rem;min-height:460px;
  background:linear-gradient(160deg,#16263f,#0d1a30);border:7px solid #1c2c44;
  box-shadow:0 26px 60px rgba(0,0,0,.5);overflow:hidden;}
.pm-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:64px;height:14px;border-radius:9px;background:#0a1424;z-index:3;}
.pm-head{display:flex;gap:.55rem;align-items:center;padding:1.5rem .3rem .6rem;border-bottom:1px solid rgba(173,229,255,.12);}
.pm-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:rgba(232,181,63,.2);color:#ffd98c;font-weight:900;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.pm-head b{display:block;font-size:.72rem;color:#eef4fb;}
.pm-head span{display:block;font-size:.56rem;color:#7fa6cc;}
.pm-feed{display:flex;flex-direction:column;gap:.45rem;padding:.7rem .15rem 0;}
.pm-ts{text-align:center;font-size:.55rem;color:#7fa6cc;letter-spacing:.06em;margin:.3rem 0 .1rem;}
.pm-b{max-width:84%;padding:.5rem .65rem;border-radius:13px;font-size:.68rem;line-height:1.4;}
.pm-in{align-self:flex-start;background:#1c2c44;color:#eef4fb;border-bottom-left-radius:4px;}
.pm-out{align-self:flex-end;background:linear-gradient(135deg,#1b8df6,#0a6fd4);color:#fff;border-bottom-right-radius:4px;}
.pm-link{align-self:flex-start;display:flex;gap:.35rem;align-items:center;font-size:.62rem;font-weight:700;color:#7fc1ff;border:1px solid rgba(27,141,246,.4);border-radius:10px;padding:.4rem .6rem;background:rgba(27,141,246,.08);}
/* choreography: feed items hidden until their stage */
.pm-feed>*{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;}
.pm-stage.pm-s1 .pm-e1,.pm-stage.pm-s2 .pm-e2,.pm-stage.pm-s3 .pm-e3,
.pm-stage.pm-s4 .pm-e4,.pm-stage.pm-s5 .pm-e5,.pm-stage.pm-s6 .pm-e6{opacity:1;transform:none;}
/* branded preferences sheet */
.pm-sheet{position:absolute;left:5px;right:5px;bottom:5px;z-index:4;border-radius:16px 16px 20px 20px;
  background:#f6f1e3;border-top:4px solid #2e7d5b;padding:.7rem .7rem .8rem;
  transform:translateY(108%);transition:transform .55s cubic-bezier(.22,.9,.32,1);
  box-shadow:0 -14px 34px rgba(0,0,0,.4);}
.pm-stage.pm-s7 .pm-sheet{transform:translateY(0);}
.pm-sheet-bar{display:block;width:34px;height:4px;border-radius:99px;background:#cbbfa0;margin:0 auto .45rem;}
.pm-sheet-head{font-size:.58rem;font-weight:900;letter-spacing:.14em;color:#2e7d5b;text-align:center;}
.pm-sheet-sub{font-size:.64rem;color:#5d5648;text-align:center;margin:.12rem 0 .45rem;}
.pm-tog{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:#fff;border:1px solid #e3dac2;border-radius:10px;padding:.42rem .6rem;margin-top:.28rem;
  font:inherit;font-size:.66rem;font-weight:700;color:#33404f;cursor:pointer;}
.pm-tog:focus-visible{outline:2px solid #2e7d5b;outline-offset:2px;}
.pm-tog .pm-knob{width:26px;height:15px;border-radius:99px;background:#d9d2bd;position:relative;transition:background .25s;flex:0 0 auto;}
.pm-tog .pm-knob::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .25s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.pm-tog.on .pm-knob{background:#2e7d5b;}
.pm-tog.on .pm-knob::after{left:13px;}
/* card catalog cabinet */
.pm-cabwood{border-radius:14px;padding:12px;
  background:linear-gradient(160deg,#3a2b1a,#241a10);
  border:1px solid rgba(232,181,63,.25);
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,231,168,.12);}
.pm-drawer,.pm-mini{position:relative;border:1px solid rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,231,168,.14);}
.pm-top{height:82px;margin-bottom:10px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(180deg,#4a3722,#33251a);transition:transform .4s ease;}
.pm-top::before{content:"";position:absolute;top:-8px;left:8%;right:8%;height:6px;border-radius:3px;background:#150e08;}
.pm-stage.pm-topopen .pm-top{transform:translateY(5px);}
.pm-pull{display:block;width:38px;height:10px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(180deg,#e8b53f,#8a5f12);box-shadow:0 1px 2px rgba(0,0,0,.5);}
.pm-label{font-size:.6rem;font-weight:800;letter-spacing:.14em;color:#3b2c17;background:#efe6cd;
  padding:.14rem .5rem;border-radius:2px;box-shadow:inset 0 0 0 1px #d8cfae;white-space:nowrap;}
.pm-count{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;font-weight:800;color:#ffd98c;
  background:linear-gradient(180deg,#2b2013,#1c1409);border:1px solid rgba(232,181,63,.4);
  padding:.05rem .55rem;border-radius:4px;}
.pm-minirow{display:flex;flex-direction:column;gap:9px;}
.pm-mini{height:44px;border-radius:6px;display:flex;align-items:center;gap:.7rem;padding:0 .8rem;
  background:linear-gradient(180deg,#453321,#2e2114);transition:transform .35s ease;}
.pm-mini::before{content:"";position:absolute;top:-6px;left:6%;right:6%;height:4px;border-radius:2px;background:#150e08;}
.pm-mini .pm-pull{width:26px;height:8px;}
.pm-mini .pm-label{font-size:.55rem;}
.pm-mcount{margin-left:auto;font-family:'Bradley Hand','Marker Felt','Segoe Print','Comic Sans MS',cursive;font-size:.78rem;color:#cdb98a;}
.pm-mini.open{transform:translateY(4px);}
.pm-slip{position:absolute;top:-16px;left:50%;width:40px;height:24px;z-index:2;
  transform:translateX(-50%) translateY(-22px) rotate(-4deg);opacity:0;
  background:#f2ecd9;border:1px solid #d8cfae;border-radius:2px;pointer-events:none;}
.pm-mini .pm-slip{width:30px;height:18px;top:-11px;}
.pm-top .pm-slip.go,.pm-mini .pm-slip.go{animation:pmSlip .55s ease forwards;}
@keyframes pmSlip{
  0%{opacity:0;transform:translateX(-50%) translateY(-22px) rotate(-4deg);}
  25%{opacity:1;}
  80%{opacity:1;transform:translateX(-50%) translateY(-2px) rotate(0deg);}
  100%{opacity:0;transform:translateX(-50%) translateY(3px) rotate(0deg);}
}
.pm-pop{animation:pmPop .45s ease;}
@keyframes pmPop{50%{transform:scale(1.22);color:#ffe7a8;}}
.pm-plaque{margin:12px auto 0;width:max-content;max-width:100%;font-size:.62rem;font-weight:900;letter-spacing:.18em;color:#ffe7a8;
  background:linear-gradient(180deg,#8a5f12,#5c3f0a);padding:.32rem .95rem;border-radius:4px;
  border:1px solid rgba(255,231,168,.5);box-shadow:0 2px 8px rgba(0,0,0,.4);}
.pm-replay{display:block;margin:1.5rem auto 0;background:none;border:1px dashed rgba(127,166,204,.4);
  color:#7fc1ff;font:inherit;font-size:.8rem;font-weight:700;padding:.5rem 1.1rem;border-radius:8px;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s;}
.pm-stage.pm-done .pm-replay{opacity:1;pointer-events:auto;}
.pm-replay:focus-visible{outline:2px solid #7fc1ff;outline-offset:2px;}
.pm-cap{text-align:center;font-size:.85rem;color:#7fa6cc;margin-top:.9rem;font-weight:700;min-height:1.5em;}
@media(max-width:760px){
  .pm-grid{grid-template-columns:1fr;gap:1.7rem;}
  .pm-phone{max-width:300px;margin:0 auto;width:100%;}
  .pm-cab{max-width:420px;margin:0 auto;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .pm-feed>*,.pm-sheet,.pm-mini,.pm-top,.pm-tog .pm-knob,.pm-tog .pm-knob::after{transition:none !important;}
  .pm-slip,.pm-pop{animation:none !important;}
}

/* ============================================================
   SCENE: aireply (bo-)
   ============================================================ */
/* ============ BO SCENE: The Back Office Tab ============ */
.bo-stage {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 0 46px;
}
/* warm lamp pools, local to the stage */
.bo-stage::before {
  content: "";
  position: absolute;
  top: -50px; left: 4%;
  width: 74%; height: 70%;
  background: radial-gradient(closest-side, rgba(255,177,86,.13), rgba(255,177,86,.05) 55%, transparent 75%);
  pointer-events: none;
}
.bo-stage::after {
  content: "";
  position: absolute;
  bottom: -10px; right: 0;
  width: 55%; height: 45%;
  background: radial-gradient(closest-side, rgba(27,141,246,.09), transparent 72%);
  pointer-events: none;
}

/* ---- browser window ---- */
.bo-window {
  position: relative;
  margin-right: 96px;
  border-radius: 12px;
  background: #202124;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.65), 0 8px 22px rgba(0,0,0,.45);
  transform: rotate(1.5deg) translateY(14px);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.85,.25,1.05), opacity .7s ease;
  z-index: 2;
}
.bo-stage.bo-in .bo-window {
  transform: rotate(1.5deg) translateY(0);
  opacity: 1;
}
.bo-shadow {
  position: absolute;
  left: 5%; right: 12%;
  bottom: 18px;
  height: 42px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.5), transparent 68%);
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease .2s;
}
.bo-stage.bo-in .bo-shadow { opacity: 1; }

/* tab strip */
.bo-tabs {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 9px 14px 0;
  border-radius: 12px 12px 0 0;
  background: #202124;
}
.bo-lights {
  display: flex;
  gap: 7px;
  padding-bottom: 12px;
  flex: none;
}
.bo-lights i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #4a4d52;
}
.bo-lights i:nth-child(1) { background: #5f4744; }
.bo-lights i:nth-child(2) { background: #5d553f; }
.bo-lights i:nth-child(3) { background: #46543f; }
.bo-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 320px;
  padding: 8px 16px 9px 12px;
  border-radius: 10px 10px 0 0;
  background: #35363a;
  color: #e8eaed;
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .1px;
  white-space: nowrap;
}
.bo-tab-txt { overflow: hidden; text-overflow: ellipsis; }
.bo-fav {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc04 50% 75%, #ea4335 75% 100%);
}
.bo-tab-x { color: #9aa0a6; font-size: 11px; margin-left: 4px; flex: none; }

/* address bar */
.bo-addr {
  display: flex;
  align-items: center;
  padding: 7px 12px 9px;
  background: #35363a;
}
.bo-omni {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: #202124;
  color: #9aa0a6;
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
}
.bo-omni .ph-bold { font-size: 11px; color: #9aa0a6; flex: none; }
.bo-omni span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- white Google panel ---- */
.bo-panel {
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 22px 24px 24px;
  font-family: Roboto, Arial, sans-serif;
  color: #202124;
}
.bo-shop { font-size: 20px; font-weight: 500; line-height: 1.25; }
.bo-shop-sub { font-size: 12px; color: #5f6368; margin-top: 3px; }

.bo-summary {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 18px 0 6px;
}
.bo-histo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.bo-hrow { display: flex; align-items: center; gap: 10px; }
.bo-hnum { width: 10px; font-size: 12px; color: #5f6368; text-align: right; flex: none; }
.bo-htrack {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #f1f3f4;
  overflow: hidden;
}
.bo-hfill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #fbbc04;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22,.9,.3,1);
}
.bo-stage.bo-in .bo-hfill { transform: scaleX(1); }
.bo-hrow:nth-child(1) .bo-hfill { transition-delay: .35s; }
.bo-hrow:nth-child(2) .bo-hfill { transition-delay: .45s; }
.bo-hrow:nth-child(3) .bo-hfill { transition-delay: .55s; }
.bo-hrow:nth-child(4) .bo-hfill { transition-delay: .65s; }
.bo-hrow:nth-child(5) .bo-hfill { transition-delay: .75s; }

.bo-score { text-align: center; flex: none; }
.bo-big { font-size: 46px; font-weight: 400; line-height: 1.05; color: #202124; }
.bo-stars { display: block; margin: 4px auto 2px; }
.bo-count { font-size: 12px; color: #5f6368; margin-top: 2px; }

.bo-div { border: 0; border-top: 1px solid #e8eaed; margin: 18px 0; }

/* ---- reviews ---- */
.bo-review { margin-top: 4px; }
.bo-review + .bo-review { margin-top: 22px; }
.bo-rhead { display: flex; align-items: center; gap: 12px; }
.bo-ava {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}
.bo-ava-m { background: #8430ce; }
.bo-ava-d { background: #00897b; }
.bo-rwho { min-width: 0; }
.bo-rname { font-size: 14px; font-weight: 500; color: #202124; }
.bo-rmeta { font-size: 12px; color: #5f6368; margin-top: 1px; }
.bo-rstars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
}
.bo-rtime { font-size: 12px; color: #5f6368; }
.bo-rtext { font-size: 14px; line-height: 1.55; color: #202124; margin: 0; }

/* owner response */
.bo-resp {
  margin: 12px 0 0 52px;
  padding: 12px 14px 13px;
  border-radius: 8px;
  background: #f1f3f4;
}
.bo-resp-head { display: block; font-size: 13px; color: #202124; margin-bottom: 5px; }
.bo-resp-head b { font-weight: 500; }
.bo-resp-time { color: #5f6368; font-weight: 400; }
.bo-resp-body { display: block; font-size: 13px; line-height: 1.55; color: #3c4043; }

/* Dana reply = replayable button */
button.bo-resp {
  display: block;
  width: calc(100% - 52px);
  border: 0;
  font: inherit;
  font-family: Roboto, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .45s ease, transform .45s ease, box-shadow .2s ease;
}
button.bo-resp.bo-on { opacity: 1; transform: translateY(0); }
button.bo-resp:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
button.bo-resp:hover { box-shadow: 0 1px 6px rgba(32,33,36,.18); }

.bo-resp-time.bo-fadein { animation: boTimeIn .6s ease both; }
@keyframes boTimeIn { from { opacity: 0; } to { opacity: 1; } }

/* typing dots */
.bo-dots { display: inline-flex; gap: 4px; align-items: center; height: 1em; vertical-align: middle; }
.bo-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9aa0a6;
  animation: boDot 1s ease-in-out infinite;
}
.bo-dots i:nth-child(2) { animation-delay: .16s; }
.bo-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes boDot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* caret */
.bo-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 1px;
  background: #1a73e8;
  vertical-align: text-bottom;
  animation: boBlink .9s steps(1) infinite;
}
@keyframes boBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.bo-hide { display: none; }

/* gold keyword sweep (on white surface) */
.bo-g { font-weight: 400; }
.bo-g.bo-gdone {
  color: #a06a08;
  font-weight: 500;
  background-image: linear-gradient(100deg, rgba(255,211,110,0) 20%, rgba(255,211,110,.75) 40%, rgba(232,181,63,.55) 50%, rgba(255,211,110,0) 70%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
  animation: boGoldSweep .9s ease-out both;
}
@keyframes boGoldSweep {
  from { background-position: 130% 0; }
  to { background-position: -60% 0; }
}

/* ---- index card ---- */
.bo-card {
  position: absolute;
  top: 252px;
  right: 0;
  width: 196px;
  padding: 26px 15px 18px;
  background:
    linear-gradient(#f9f6ec, #f9f6ec) 0 0 / 100% 25px no-repeat,
    repeating-linear-gradient(#f9f6ec 0 21px, #b9cfe2 21px 22px);
  border-radius: 3px;
  box-shadow: 0 14px 26px -10px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.3);
  transform: rotate(2deg) translateY(10px);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.85,.25,1.05) .25s, opacity .6s ease .25s;
  z-index: 3;
}
.bo-stage.bo-in .bo-card { transform: rotate(2deg) translateY(0); opacity: 1; }
.bo-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 22px;
  height: 2px;
  background: #e2a29b;
}
.bo-card::after {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 84px; height: 24px;
  transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(rgba(255,246,214,.45), rgba(255,246,214,.28));
  border-left: 1px dashed rgba(255,255,255,.4);
  border-right: 1px dashed rgba(255,255,255,.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.bo-card p {
  margin: 0;
  font-family: "Marker Felt", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 15.5px;
  line-height: 22px;
  color: #2e4057;
}
.bo-card p b { color: #1d3350; font-weight: 700; }

/* reduced motion: everything complete, static */
.bo-stage.bo-rm *, .bo-stage.bo-rm *::before, .bo-stage.bo-rm *::after {
  animation: none !important;
  transition: none !important;
}
.bo-stage.bo-rm .bo-window, .bo-stage.bo-rm .bo-card { opacity: 1; }
.bo-stage.bo-rm .bo-window { transform: rotate(1.5deg); }

/* ---- mobile ---- */
@media (max-width: 560px) {
  .bo-stage { padding-top: 22px; }
  .bo-window { margin-right: 0; transform: rotate(0deg) translateY(14px); }
  .bo-stage.bo-in .bo-window, .bo-stage.bo-rm .bo-window { transform: rotate(0deg) translateY(0); }
  .bo-tabs { padding: 8px 10px 0; gap: 10px; }
  .bo-lights { gap: 6px; }
  .bo-lights i { width: 9px; height: 9px; }
  .bo-tab { max-width: none; min-width: 0; flex: 1; padding: 7px 12px 8px 10px; }
  .bo-panel { padding: 18px 16px 20px; }
  .bo-summary { gap: 18px; margin-top: 16px; }
  .bo-big { font-size: 40px; }
  .bo-resp, button.bo-resp { margin-left: 0; width: 100%; }
  .bo-card {
    position: static;
    width: 224px;
    margin: 26px auto 0;
    transform: rotate(-1.5deg) translateY(10px);
  }
  .bo-stage.bo-in .bo-card, .bo-stage.bo-rm .bo-card { transform: rotate(-1.5deg) translateY(0); }
}

/* --- aireply v2 additions: two-ink card + manager phone --- */
.bo-stage{padding-bottom:44px;}
.bo-card .bo-card-red{margin-top:.5rem;color:#e2483d;font-weight:700;transform:rotate(-.8deg);}
.bo-phone{position:absolute;right:-10px;bottom:-8px;width:208px;z-index:6;pointer-events:none;
  transform:rotate(6.5deg) translateY(10px);opacity:0;
  transition:opacity .55s ease, transform .55s ease;}
.bo-phone::before{content:"";position:absolute;inset:-28% -38%;z-index:-1;
  background:radial-gradient(circle, rgba(232,93,93,.15), transparent 65%);
  opacity:0;transition:opacity .9s ease;}
.bo-stage.bo-wake .bo-phone{opacity:1;transform:rotate(6.5deg) translateY(0);}
.bo-stage.bo-wake .bo-phone::before{opacity:1;}
.bo-pbody{border-radius:20px;padding:1.1rem .7rem 1.2rem;
  background:linear-gradient(180deg,#101d33,#070e1b);
  border:1px solid rgba(127,166,204,.35);box-shadow:0 24px 60px rgba(0,0,0,.6);}
.bo-ptime{display:block;text-align:center;font-size:1.4rem;font-weight:200;color:#eef4fb;margin-bottom:.6rem;}
.bo-notif{display:flex;gap:.5rem;align-items:flex-start;text-align:left;border-radius:12px;padding:.55rem .55rem;
  background:rgba(21,39,65,.92);border:1px solid rgba(210,74,74,.55);
  box-shadow:0 8px 26px rgba(210,74,74,.16);}
.bo-nic{flex:0 0 auto;width:26px;height:26px;border-radius:7px;overflow:hidden;
  background:rgba(232,181,63,.15);display:flex;align-items:center;justify-content:center;}
.bo-nic img{width:20px;height:20px;object-fit:contain;}
.bo-ntx{min-width:0;}
.bo-ntx b{display:block;font-size:.58rem;color:#eef4fb;}
.bo-ntx span{display:block;font-size:.55rem;color:#9db8d6;line-height:1.4;margin-top:.15rem;}
.bo-notif time{font-size:.5rem;color:#7fa6cc;flex:0 0 auto;}
@media(max-width:700px){
  .bo-stage{padding-bottom:0;}
  .bo-phone{position:static;width:100%;max-width:250px;margin:1.1rem auto 0;
    transform:rotate(0) translateY(8px);}
  .bo-stage.bo-wake .bo-phone{transform:none;}
  .bo-phone::before{inset:-18% 0;}
}
@media(prefers-reduced-motion:reduce){
  .bo-phone,.bo-phone::before{transition:none !important;}
}

/* ============================================================
   vc- : review flywheel (virtuous circle)
   ============================================================ */
.vc{max-width:400px;margin:2.2rem auto .5rem;text-align:center;}
.vc-svg{width:100%;max-width:360px;height:auto;}
.vc-arc{stroke-dasharray:340;stroke-dashoffset:340;animation:vcDraw 2.6s ease forwards;}
.vc-arc:nth-of-type(2){animation-delay:.5s;}
.vc-arc:nth-of-type(3){animation-delay:1s;}
@keyframes vcDraw{to{stroke-dashoffset:0;}}
.vc-node{opacity:0;animation:vcPop .5s ease forwards;}
.vc-node:nth-of-type(1){animation-delay:.2s;}
.vc-node:nth-of-type(2){animation-delay:.8s;}
.vc-node:nth-of-type(3){animation-delay:1.3s;}
@keyframes vcPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}
.vc-node{transform-box:fill-box;transform-origin:center;}
@media(prefers-reduced-motion:reduce){
  .vc-arc{stroke-dashoffset:0;animation:none;}
  .vc-node{opacity:1;animation:none;}
}

/* hero headline is longer than the default; give it room for 3 clean lines */
.gr-hero-grid h1{font-size:clamp(2.4rem,5.1vw,4.5rem);max-width:20ch;}

/* ============================================================
   fr- : friction comparison  |  jf- : Jeff's counter story
   ============================================================ */
.fr{max-width:600px;margin:2.2rem auto 0;display:flex;flex-direction:column;gap:.75rem;}
.fr-row{display:grid;grid-template-columns:190px 1fr 150px;align-items:center;gap:.9rem;}
.fr-method{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;color:#cfe4ff;}
.fr-method i{font-size:1.1rem;flex:0 0 auto;}
.fr-bad .fr-method i{color:#ff8f8f;}
.fr-good .fr-method i{color:#7fe0a8;}
.fr-good .fr-method{color:#eaf6ef;}
.fr-bar{height:12px;border-radius:6px;background:rgba(127,166,204,.12);overflow:hidden;}
.fr-bar b{display:block;height:100%;border-radius:6px;}
.fr-bad .fr-bar b{background:linear-gradient(90deg,#b5514b,#ff8f8f);}
.fr-good .fr-bar b{background:linear-gradient(90deg,#3f8f6a,#7fe0a8);box-shadow:0 0 12px rgba(127,224,168,.5);}
.fr-why{font-size:.82rem;color:#9db8d6;}
.fr-good .fr-why{color:#bfe0cf;font-weight:600;}
.fr-axis{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#7fa6cc;margin-top:.2rem;padding-left:190px;}
@media(max-width:600px){
  .fr-row{grid-template-columns:1fr auto;grid-template-areas:"method why" "bar bar";gap:.3rem .6rem;}
  .fr-method{grid-area:method;}.fr-why{grid-area:why;text-align:right;}.fr-bar{grid-area:bar;}
  .fr-axis{padding-left:0;}
}

.jf{max-width:660px;margin:2.2rem auto 0;display:flex;gap:1.3rem;align-items:center;padding:1.3rem 1.5rem;
  border-radius:16px;background:linear-gradient(180deg,rgba(15,31,54,.55),rgba(9,15,27,.85));border:1px solid rgba(127,166,204,.2);}
.jf-photo{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid rgba(127,193,255,.5);}
.jf-quote{font-size:.96rem;line-height:1.55;color:#dbe7f5;font-style:italic;margin:0;}
.jf-by{display:block;margin-top:.65rem;font-size:.82rem;color:#9db8d6;font-style:normal;}
.jf-by b{color:#cfe4ff;}
@media(max-width:600px){.jf{flex-direction:column;text-align:center;gap:.9rem;}.jf-photo{width:78px;height:78px;}}

/* Jeff: center the dead-air play block a little better */
#play .play-wrap{max-width:1040px;margin-inline:auto;}