:root{
  --bg:#f4f3f1; --surface:#fff; --ink:#1a1815; --ink2:#6e6a64; --ink3:#8b877f;
  --accent:#ff6b8a; --line:rgba(26,24,21,0.08);
  --sans:"Public Sans",system-ui,sans-serif; --disp:"Bricolage Grotesque",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:#e7e5e0;-webkit-font-smoothing:antialiased;overflow:hidden;
  background-image:radial-gradient(rgba(26,24,21,0.05) 1px,transparent 1px);background-size:26px 26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:var(--sans);}
a{color:var(--accent);text-decoration:none;} a:hover{color:#e14f72;}

/* ── stage / device ── */
.stagewrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;}
.stage{position:relative;}
.phone{width:402px;height:874px;border-radius:54px;background:var(--bg);position:relative;overflow:hidden;transform-origin:top left;
  box-shadow:0 40px 90px rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.10);}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:24px;background:#000;z-index:50;}
.status{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:20px 32px 0;z-index:20;}
.status .t{font-weight:600;font-size:16px;color:var(--ink);}
.status .icons{display:flex;align-items:center;gap:7px;}
.homebar{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:139px;height:5px;border-radius:999px;background:rgba(26,24,21,0.25);z-index:60;}

/* ── persistent UI frame ── */
.ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:56px 26px 22px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.wm{display:flex;align-items:flex-end;gap:0;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-0.5px;color:var(--ink);line-height:1;}
.skip{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;transition:color .2s,opacity .2s;}
.skip:hover{color:var(--ink);}
.dots{display:flex;gap:6px;margin-top:18px;}
.dots i{height:3.5px;width:13px;border-radius:999px;background:rgba(26,24,21,0.13);display:block;transition:width .4s cubic-bezier(.22,1,.36,1),background .4s;}
.dots i.on{width:26px;background:var(--accent);}

/* ── step deck ── */
.stepwrap{flex:1;position:relative;margin-top:6px;}
.step{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(30px);
  transition:opacity .42s ease, transform .48s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.step.active{opacity:1;transform:none;pointer-events:auto;}
.step.exit{opacity:0;transform:translateX(-30px);}

/* ── footer CTA ── */
.foot{margin-top:auto;padding-top:10px;}
.btn{height:56px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:640;font-size:15px;box-shadow:0 8px 22px rgba(255,107,138,0.34);cursor:pointer;border:none;width:100%;
  transition:transform .15s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(255,107,138,0.42);}
.btn:active{transform:translateY(0) scale(.99);}
.btn.pulse{animation:btnpulse 1s ease .1s 1;}
.ofn{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--ink3);padding:12px 0 2px;}

/* ── external controls ── */
.controls{display:flex;align-items:center;gap:14px;padding:14px 0 22px;}
.nav{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 3px 10px rgba(26,24,21,.06);transition:transform .15s,opacity .2s,background .2s;}
.nav:hover{transform:translateY(-1px);background:#fff;}
.nav:disabled{opacity:.32;cursor:default;transform:none;}
.nav.wide{width:auto;padding:0 15px;gap:7px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);}
.cstep{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--ink3);min-width:112px;text-align:center;}
.cstep b{color:var(--ink);}
.hintkeys{font-family:var(--sans);font-size:11px;color:var(--ink3);margin-left:4px;}

/* ── frame 1 hero ── */
.hero{height:318px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:8px;position:relative;}
.halo{width:300px;height:300px;border-radius:999px;position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 47%, rgba(255,107,138,0.17), rgba(255,107,138,0.09) 60%, rgba(255,107,138,0.03));}
.bubble{position:absolute;top:20px;right:2px;background:var(--surface);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:4px;padding:9px 13px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(26,24,21,0.06);white-space:nowrap;z-index:5;transform-origin:bottom right;}
.bubble .wave{display:inline-block;transform-origin:70% 80%;}
.copy{margin-top:8px;}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:600;color:var(--ink2);}
.big{font-family:var(--disp);font-weight:640;font-size:33px;letter-spacing:-0.6px;line-height:1.04;margin-top:12px;display:flex;align-items:baseline;}
.big .a{color:var(--accent);font-style:italic;}
.big .and{font-size:15px;color:var(--ink3);font-weight:500;margin:0 9px;}
.body{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink2);margin-top:14px;max-width:330px;}
/* screen 1 reads a touch larger */
.step[data-step="1"] .eyebrow{font-size:12px;letter-spacing:2.6px;}
.step[data-step="1"] .big{font-size:42px;margin-top:14px;}
.step[data-step="1"] .big .and{font-size:17px;margin:0 11px;}
.step[data-step="1"] .body{font-size:16.5px;margin-top:16px;}
.step[data-step="1"] .bubble{font-size:13.5px;}

/* ── map (frames 2/3/5) ── */
.mapcard{margin-top:10px;height:432px;border-radius:24px;position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#f6f4ef,#eeebe4);border:1px solid var(--line);box-shadow:0 4px 14px rgba(26,24,21,0.05);}
.mcenter{position:absolute;left:50%;top:205px;transform:translate(calc(-50% - 4px),calc(-50% + 9px));z-index:6;}
.mglow{position:absolute;left:50%;top:205px;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:999px;background:rgba(255,107,138,0.16);z-index:5;}
.ping{position:absolute;left:50%;top:205px;width:16px;height:16px;border-radius:999px;border:2px solid var(--accent);transform:translate(-50%,-50%) scale(1);opacity:0;z-index:4;}
.scanner{position:absolute;left:175px;top:205px;width:342px;height:342px;transform:translate(-50%,-50%);border-radius:50%;z-index:4;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,107,138,0) 288deg, rgba(255,107,138,0.10) 332deg, rgba(255,107,138,0.32) 356deg, rgba(255,107,138,0.58) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 30px, #000 32px);mask:radial-gradient(circle, transparent 30px, #000 32px);}
.mchip{position:absolute;display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3.5px 8px 3.5px 6px;box-shadow:0 2px 7px rgba(26,24,21,0.09);z-index:7;white-space:nowrap;}
.mchip i{width:9px;height:9px;border-radius:999px;flex:none;}
.mchip span{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--ink);}
.mchip .v{margin-left:3px;font-family:var(--sans);font-size:9.5px;font-weight:800;}
.v.ok{color:#1a9e54;} .v.no{color:#d1435f;}
.mchip.dim{opacity:0.42;} .mdot.dim{opacity:0.4;}
.mdot{position:absolute;width:15px;height:15px;border:2px solid #fff;border-radius:50% 50% 50% 0;box-shadow:0 3px 5px rgba(26,24,21,0.22);z-index:6;transform:translate(-50%,-50%) rotate(-45deg);}
.mdot::after{content:"";position:absolute;left:50%;top:50%;width:4.5px;height:4.5px;border-radius:999px;background:#fff;transform:translate(-50%,-50%);}

/* ── frame 3 checking bubbles ── */
.qbubble{position:absolute;width:150px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 12px 10px;box-shadow:0 6px 18px rgba(26,24,21,0.10);z-index:8;}
.qbubble .qtext{font-family:var(--sans);font-size:12px;font-weight:640;line-height:1.3;color:var(--ink);text-wrap:pretty;}
.qbubble .qtext b{color:var(--accent);font-weight:700;}
.qbubble .mdot{left:16px;top:-3px;}
.qbubble .qv{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-family:var(--sans);font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.qbubble .qv.ok{background:rgba(26,158,84,0.12);color:#1a9e54;}
.qbubble .qv.no{background:rgba(209,67,95,0.12);color:#d1435f;}
.qthink{display:inline-flex;gap:3px;margin-top:9px;height:12px;align-items:center;}
.qthink i{width:5px;height:5px;border-radius:999px;background:var(--ink3);opacity:.5;}

.scancopy{margin-top:16px;}
.headline{font-family:var(--disp);font-weight:640;font-size:26px;letter-spacing:-0.5px;line-height:1.1;color:var(--ink);margin-top:9px;max-width:320px;text-wrap:pretty;}
.headline .a{color:var(--accent);}

/* ── frame 4 rank ── */
.rlist{margin-top:12px;display:flex;flex-direction:column;gap:9px;flex-shrink:0;}
.rrow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:9px 10px;box-shadow:0 3px 10px rgba(26,24,21,0.05);}
.rrow.top{border:1.5px solid var(--accent);box-shadow:0 8px 20px rgba(255,107,138,0.22);}
.rtile{width:44px;height:44px;border-radius:12px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.rtile b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);}
.rtile s{font-family:var(--mono);font-size:6.6px;font-weight:700;color:rgba(26,24,21,0.7);text-decoration:none;margin-top:2px;}
.rinfo{flex:1;min-width:0;}
.rinfo .n{font-family:var(--sans);font-size:13.5px;font-weight:640;color:var(--ink);display:flex;align-items:center;gap:6px;}
.rinfo .m{font-family:var(--sans);font-size:11px;color:var(--ink2);margin-top:2px;}
.rtag{font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:1px;color:#fff;background:var(--accent);padding:2px 6px;border-radius:999px;}
.rscore{width:48px;height:48px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;}
.rscore .pct{position:absolute;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);}
.rfoot{text-align:center;margin-top:13px;}
.rfoot span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--ink3);background:var(--bg);padding:6px 12px;border-radius:999px;}

/* ── frame 5 pals ── */
.pnode{position:absolute;width:38px;height:38px;border-radius:999px;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:12.5px;color:#fff;box-shadow:0 3px 8px rgba(26,24,21,0.22);z-index:6;transform:translate(-50%,-50%);}
.pnlabel{position:absolute;width:120px;font-family:var(--sans);color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px 8px;z-index:6;transform:translate(-50%,0);text-align:center;line-height:1.22;box-shadow:0 2px 6px rgba(26,24,21,0.10);}
.pnlabel b{display:block;font-size:9.5px;font-weight:800;color:var(--ink);}
.pnlabel span{display:block;font-size:8.5px;font-weight:600;color:var(--ink2);margin-top:1px;}
.fchip{position:absolute;display:flex;flex-direction:column;gap:1px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px;box-shadow:0 4px 11px rgba(26,24,21,0.10);z-index:8;white-space:nowrap;}
.fchip .fk{font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.9px;color:var(--ink3);}
.fchip .fv{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink);}
.midpin{position:absolute;transform:translate(-50%,-50%);z-index:7;}
.vcard{position:absolute;left:50%;top:236px;transform:translateX(-50%);width:196px;background:var(--ink);border-radius:16px;padding:11px 13px 12px;z-index:9;box-shadow:0 14px 30px rgba(26,24,21,0.32);}
.vcard .vt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:7.5px;font-weight:700;letter-spacing:.7px;color:#fff;background:var(--accent);padding:3px 8px;border-radius:999px;}
.vcard .vn{color:#fff;font-family:var(--disp);font-size:13px;font-weight:700;margin-top:8px;line-height:1.12;}
.vcard .vm{color:rgba(255,255,255,.62);font-family:var(--mono);font-size:8px;letter-spacing:.5px;margin-top:6px;}
.vcard .vtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.vcard .vtags span{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:8.5px;font-weight:700;color:#fff;background:rgba(255,255,255,0.13);border-radius:999px;padding:3px 8px;}
.vcard .vtags i{width:7px;height:7px;border-radius:999px;flex:none;}
.flowlines{stroke-dasharray:2 6;}

/* ── frame 6 connect ── */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.cbtn{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 12px;box-shadow:0 3px 10px rgba(26,24,21,0.05);cursor:pointer;position:relative;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s;}
.cbtn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(26,24,21,0.08);}
.cbtn .ci{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.cbtn .cl{font-family:var(--sans);font-size:13px;font-weight:640;color:var(--ink);line-height:1.1;}
.cbtn .cl s{display:block;font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.8px;color:var(--ink3);text-decoration:none;margin-top:3px;}
.cbtn .cstate{margin-left:auto;flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.cbtn .spin{width:15px;height:15px;border-radius:999px;border:2px solid rgba(26,24,21,.15);border-top-color:var(--accent);display:none;}
.cbtn .tick{width:20px;height:20px;border-radius:999px;background:#1a9e54;display:none;align-items:center;justify-content:center;}
.cbtn.connecting{border-color:rgba(255,107,138,.4);}
.cbtn.connecting .spin{display:block;animation:spin .7s linear infinite;}
.cbtn.done{border-color:rgba(26,158,84,.45);}
.cbtn.done .tick{display:flex;animation:pop .4s cubic-bezier(.22,1.4,.4,1) both;}
.crow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 13px;margin-top:10px;box-shadow:0 3px 10px rgba(26,24,21,0.05);}
.crow .ci{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:#ffb074;}
.crow .cl{flex:1;font-family:var(--sans);font-size:13px;font-weight:640;color:var(--ink);}
.crow .cl s{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--ink2);text-decoration:none;margin-top:2px;}
.tgl{width:46px;height:27px;border-radius:999px;background:var(--accent);flex:none;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);cursor:pointer;transition:background .25s;}
.tgl::after{content:"";position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:right .25s cubic-bezier(.22,1,.36,1);}
.tgl.off{background:rgba(26,24,21,0.18);}
.tgl.off::after{right:22px;}
.cchat{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 13px;margin-top:10px;box-shadow:0 3px 10px rgba(26,24,21,0.05);}
.cchat .cph{flex:1;font-family:var(--sans);font-size:12px;font-style:italic;color:var(--ink3);line-height:1.35;min-height:32px;}
.cchat .cph .car{display:inline-block;width:1.5px;height:13px;background:var(--accent);margin-left:1px;vertical-align:-2px;animation:caret .9s step-end infinite;}
.cchat .snd{width:34px;height:34px;border-radius:999px;background:var(--accent);flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,107,138,0.34);}

/* ══ entrance animation base + keyframes ══ */
.a0{opacity:0;}
@keyframes rise{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:none;}}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@keyframes pop{0%{opacity:0;transform:scale(.8);}68%{opacity:1;transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}
@keyframes popcenter{0%{opacity:0;transform:translate(calc(-50% - 4px),calc(-50% + 9px)) scale(.82);}68%{opacity:1;transform:translate(calc(-50% - 4px),calc(-50% + 9px)) scale(1.05);}100%{opacity:1;transform:translate(calc(-50% - 4px),calc(-50% + 9px)) scale(1);}}
@keyframes springmascot{0%{opacity:0;transform:translateY(26px) scale(.78);}60%{opacity:1;transform:translateY(-6px) scale(1.05);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes halopulse{0%{transform:scale(.9);opacity:.5;}45%{transform:scale(1.04);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes bubblepop{0%{opacity:0;transform:scale(.6) translateY(6px);}70%{opacity:1;transform:scale(1.06);}100%{opacity:1;transform:scale(1);}}
@keyframes wave{0%,100%{transform:rotate(0);}20%{transform:rotate(16deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(14deg);}80%{transform:rotate(-6deg);}}
@keyframes dropdot{0%{opacity:0;transform:translate(-50%,-190%) rotate(-45deg);}60%{opacity:1;transform:translate(-50%,-38%) rotate(-45deg);}100%{opacity:1;transform:translate(-50%,-50%) rotate(-45deg);}}
@keyframes dropdotdim{0%{opacity:0;transform:translate(-50%,-190%) rotate(-45deg);}100%{opacity:.4;transform:translate(-50%,-50%) rotate(-45deg);}}
@keyframes ping{0%{opacity:.7;transform:translate(-50%,-50%) scale(.3);}80%{opacity:0;}100%{opacity:0;transform:translate(-50%,-50%) scale(10);}}
@keyframes popnode{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}70%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}100%{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes labelrise{0%{opacity:0;transform:translate(-50%,10px);}100%{opacity:1;transform:translate(-50%,0);}}
@keyframes cardrise{0%{opacity:0;transform:translateX(-50%) translateY(22px);}100%{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes ringsweep{from{stroke-dashoffset:140.1;}to{stroke-dashoffset:var(--off,0);}}
@keyframes liftglow{0%{transform:translateY(0);}55%{transform:translateY(-5px);box-shadow:0 14px 30px rgba(255,107,138,0.34);}100%{transform:translateY(0);box-shadow:0 8px 20px rgba(255,107,138,0.22);}}
@keyframes shakex{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-3px);}80%{transform:translateX(2px);}}
@keyframes flow{to{stroke-dashoffset:-16;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes caret{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes btnpulse{0%{transform:scale(1);}40%{transform:scale(1.035);box-shadow:0 14px 30px rgba(255,107,138,0.5);}100%{transform:scale(1);}}
@keyframes thinkpulse{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-2px);}}
@keyframes stampno{0%{opacity:0;transform:translateX(0) scale(.82);}40%{opacity:1;transform:scale(1);}55%{transform:translateX(-4px);}70%{transform:translateX(4px);}85%{transform:translateX(-2px);}100%{transform:translateX(0);}}
.step.active .qthink i{animation:thinkpulse 1.1s ease-in-out infinite;}
.step.active .qthink i:nth-child(2){animation-delay:.16s;}
.step.active .qthink i:nth-child(3){animation-delay:.32s;}

/* continuous flow of the connector dashes while frame 5 is live */
.step.active .flowlines{animation:flow 1s linear infinite;}

/* looping radar sweep (screens 2 & 3) + living mascot */
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes blink{0%,90%,100%{transform:scaleY(1);}95%{transform:scaleY(.1);}}
@keyframes trunkswing{0%,100%{transform:rotate(0deg);}25%{transform:rotate(7deg);}75%{transform:rotate(-7deg);}}
.step[data-step="2"].active .scanner{animation:sweep 3.2s linear infinite;}
.step[data-step="3"] .scanner{display:none;}
.step.active .eye,.step.active .eye2{animation:blink 3.8s ease-in-out infinite;}
.step.active .trunk,.step.active .trunk2{animation:trunkswing 3.4s ease-in-out infinite;}

/* smoother step transitions: crossfade (2↔3) + morph-shrink (1→2) */
.step.hold{transform:none !important;}
.step.shrink{opacity:0;transform:scale(.5);transform-origin:50% 34%;transition:opacity .5s ease, transform .6s cubic-bezier(.5,0,.25,1);}

/* screen 2 found-line */
.foundline{font-family:var(--sans);font-size:12px;color:var(--ink2);margin-top:10px;line-height:1.4;}
.foundline b{color:var(--ink);font-weight:700;}

/* screen 3 discernment: dim the non-questioned, pop question speech bubbles */
.fade3{opacity:0;}
@keyframes dimdown{0%{opacity:1;}100%{opacity:0;}}
.step.active .fade3{animation:dimdown .55s ease .5s both;}
.bg3{opacity:.4;}
@keyframes bgdown{0%{opacity:1;}100%{opacity:.4;}}
.step.active .bg3{animation:bgdown .55s ease .5s both;}
.qspeech.grp::before{display:none;}
.qspeech .gtri{position:absolute;width:11px;height:11px;background:#fff;border:1px solid var(--line);transform:rotate(45deg);z-index:-1;}
.qspeech{position:absolute;width:132px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px 10px;box-shadow:0 8px 18px rgba(26,24,21,0.14);z-index:9;font-family:var(--sans);font-size:11px;font-weight:400;font-style:italic;line-height:1.3;color:var(--ink);text-wrap:pretty;}
.qspeech i{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:5px;vertical-align:1px;}
.qspeech::before{content:"";position:absolute;top:-6px;left:16px;width:11px;height:11px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);}

/* screen 4 mood prompt */
.moodrow{display:flex;align-items:center;gap:12px;margin-top:18px;padding:0 2px;}
.moodpal{flex:none;}
.moodbubble{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:4px;padding:11px 14px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 5px 16px rgba(26,24,21,0.08);line-height:1.35;}
.moodbubble b{color:var(--accent);font-weight:700;}
.moodbubble::before{content:"";position:absolute;left:-6px;bottom:14px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);}

/* screen 5 considered ticks + preference highlights */
.ftick{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:999px;background:#1a9e54;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(26,158,84,.4);z-index:9;}
.hl{font-style:normal;font-weight:800;color:#e14f72;background:rgba(255,107,138,.20);border-radius:5px;padding:0 3px;display:inline-block;}
@keyframes hlmark{0%{background:rgba(255,107,138,0);transform:scale(1);}60%{transform:scale(1.14);}100%{background:rgba(255,107,138,.20);transform:scale(1);}}

/* screen 6 contacts card */
.cbtn.wide{width:100%;}

@media (prefers-reduced-motion: reduce){
  .a0{opacity:1 !important;}
  .step{transition:opacity .2s;transform:none;}
  .step.exit{transform:none;}
  .cbtn .spin{animation:none;}
  .step.active .flowlines{animation:none;}
  .step.active .scanner,.step.active .eye,.step.active .eye2,.step.active .trunk,.step.active .trunk2{animation:none;}
  .step.active .fade3{animation:none;}
  .step.active .bg3{animation:none;}
  .hl{transform:none;}
  .step.shrink{transition:opacity .2s;transform:none;}
}