:root{
    --rarely:#2E9E5B; --sometimes:#E3AD1F; --often:#E8722E; --alltime:#D63B3B;
    --ink:#16181d; --ink40:rgba(22,24,29,.64); --ink55:rgba(22,24,29,.78);
    --blue:#2f6fb5;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  img{-webkit-touch-callout:none; -webkit-user-drag:none;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0; overscroll-behavior:none; font-family:'Manrope',system-ui,-apple-system,sans-serif; background:#eceef1; color:var(--ink);
       display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:16px 12px;}
  .pagehead{max-width:420px; text-align:center; margin-bottom:18px;}
  .pagehead h1{font-size:17px; font-weight:800; margin:0 0 6px;}
  .pagehead p{font-size:12.5px; font-weight:600; color:var(--ink55); line-height:1.5; margin:0;}
  .phone{container-type:inline-size; width:min(400px,100vw - 16px); height:800px; max-height:calc(100vh - 40px); min-height:640px;
         background:#fbfbfa; border-radius:34px; box-shadow:0 22px 60px rgba(22,24,29,.22), 0 0 0 1px rgba(22,24,29,.06);
         overflow:hidden; position:relative; display:flex; flex-direction:column; touch-action:none; user-select:none;}
  .footnote{font-size:11px; font-weight:700; color:var(--ink40); margin-top:14px;}

  /* top bar */
  .topbar{display:flex; align-items:center; gap:12px; padding:18px 18px 8px;}
  .ptrack{flex:1; height:6px; border-radius:100px; background:rgba(22,24,29,.08); overflow:hidden;}
  .pfill{height:100%; width:0%; border-radius:100px; background:var(--blue); transition:width .35s ease;}
  .pcount{font-size:12px; font-weight:800; color:var(--ink40); white-space:nowrap;}
  .prompt{text-align:center; font-size:22px; font-weight:800; color:var(--ink); padding:10px 18px 0; line-height:1.22; transition:opacity .5s;}
  @supports (width: 1cqw){ .prompt{font-size:clamp(17px, 5.6cqw, 23px);} }

  /* stage */
  .stage{flex:1; position:relative; margin:2px 0 4px; container-type:size;}
  .deckwrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .cardbox{position:relative; width:74%; max-width:300px; aspect-ratio:2/2.56;}
  @supports (height: 1cqh){
    .cardbox{width:auto; max-width:none; height:min(94cqh, calc(min(94cqw, 372px) * 1.28));}
  }
  .under img{width:150%; margin-left:-25%; height:auto; display:block;}
  .under{position:absolute; inset:0; border-radius:16px; box-shadow:0 8px 26px rgba(22,24,29,.16); overflow:hidden; background:#fff; transition:opacity .35s;}
  .under img{width:100%; height:100%; object-fit:cover; display:block;}
  .u1{transform:rotate(4.5deg) translate(7px,6px); opacity:.9;}
  @keyframes shimmy{
    0%,100%{transform:rotate(4.5deg) translate(7px,6px)}
    20%{transform:rotate(1.5deg) translate(4px,6px)}
    40%{transform:rotate(7deg) translate(10px,6px)}
    60%{transform:rotate(2.5deg) translate(5px,6px)}
    80%{transform:rotate(6deg) translate(9px,6px)}}
  .u1.shimmy{animation:shimmy .7s ease-in-out;}
  .u2{transform:rotate(-3deg) translate(-6px,4px); background:#fff;}
  .card{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:#fff;
        box-shadow:0 14px 34px rgba(22,24,29,.22); cursor:grab; will-change:transform;
        transition:transform .38s cubic-bezier(.2,.8,.3,1.05), opacity .3s;}
  .card img{width:100%; height:auto; aspect-ratio:2/2.44; object-fit:cover; object-position:top; display:block; pointer-events:none;}
  .numpatch{display:none;}   /* page number is cropped away with the strip */
  .card.dragging{transition:none; cursor:grabbing;}
  .card.gone{pointer-events:none;}
  .card .glow{position:absolute; inset:0; border-radius:16px; opacity:0; transition:opacity .12s; pointer-events:none;
              box-shadow:inset 0 0 0 4px currentColor;}
  /* rating label lives ON the card so it tracks the drag */
  .card .biglab{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
         font-size:29px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff;
         padding:9px 20px; border-radius:14px; opacity:0; pointer-events:none; white-space:nowrap;
         box-shadow:0 10px 30px rgba(22,24,29,.25); transition:opacity .12s;}
  /* edge chevrons — small chips riding the card's edges */
  .chev{position:absolute; z-index:41; width:27px; height:27px; border-radius:50%;
        background:rgba(255,255,255,.94); box-shadow:0 3px 10px rgba(22,24,29,.18);
        display:flex; align-items:center; justify-content:center; cursor:pointer;
        font-size:14px; font-weight:800; opacity:.85; transition:opacity .15s, transform .15s;}
  .chev.hot{opacity:1; transform:scale(1.3);}
  .chevL{left:-12px; top:50%; translate:0 -50%; color:var(--rarely);}
  .chevR{right:-12px; top:50%; translate:0 -50%; color:var(--often);}
  .chevT{top:-12px; left:50%; translate:-50% 0; color:var(--alltime);}
  .chevB{bottom:-12px; left:50%; translate:-50% 0; color:var(--sometimes);}

  /* dock */
  .dock{display:flex; gap:8px; padding:10px 14px calc(18px + env(safe-area-inset-bottom)); transition:opacity .5s;}
  .chip{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff;
        border:1.5px solid rgba(22,24,29,.08); border-radius:16px; padding:10px 4px 9px; cursor:pointer;
        font-family:inherit; transition:transform .12s, box-shadow .12s, border-color .12s;}
  .chip:active{transform:scale(.95);}
  .chip .dot{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
             color:#fff; font-size:18px; font-weight:800;}
  .chip .w{font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--ink); text-align:center; line-height:1.1;}
  .chip.hot{border-color:currentColor; box-shadow:0 4px 14px rgba(22,24,29,.14); transform:translateY(-3px);}

  /* welcome screen */
  .welcome{position:absolute; inset:0; z-index:80; background:#fbfbfa; display:flex; flex-direction:column;
           align-items:center; justify-content:center; padding:30px 34px; text-align:center; transition:opacity .45s; overflow-y:auto;}
  .welcome .wcover{width:67%; max-width:275px; border-radius:16px; box-shadow:0 18px 44px rgba(22,24,29,.25);
           margin-bottom:24px; transition:transform .55s cubic-bezier(.2,.8,.3,1.05), opacity .5s;}
  .welcome .wtitle{font-size:23px; font-weight:800; line-height:1.3; max-width:320px; margin-bottom:8px;}
  .welcome .wsub{font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.5; max-width:310px; margin-bottom:10px;}
  .welcome .wsub2{font-size:13.5px; font-weight:700; color:var(--ink55); margin-bottom:14px;}
  .anon{background:rgba(46,158,91,.13); color:#1d7a44; font-size:13.5px; font-weight:800;
        border-radius:100px; padding:8px 16px; margin-bottom:24px;}
  .welcome .wgo{background:var(--blue); color:#fff; border:none; border-radius:100px; padding:15px 44px;
           font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;}
  .welcome.away{opacity:0; pointer-events:none;}
  .welcome.away .wcover{transform:translateY(-140px) rotate(-7deg); opacity:0;}

  /* how-to screen */
  .howto{position:absolute; inset:0; z-index:79; background:#fbfbfa; display:flex; flex-direction:column;
         align-items:center; justify-content:flex-start; padding:26px 34px 30px; text-align:center; transition:opacity .4s; overflow-y:auto;}
  .howto.away{opacity:0; pointer-events:none;}
  .howto .htitle{font-size:22px; font-weight:800; margin-bottom:10px;}
  .hdemo{height:290px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
  .hcard{position:relative; width:168px; height:252px; border-radius:12px; overflow:hidden;
         box-shadow:0 8px 20px rgba(22,24,29,.22); animation:hswipe 8s ease-in-out infinite;}
  .hcard img{width:100%; height:100%; object-fit:cover; display:block;}
  @keyframes hswipe{
    0%,6%{transform:none} 12%{transform:translateX(-72px) rotate(-8deg)} 18%,31%{transform:none}
    37%{transform:translateY(60px) rotate(4deg)} 43%,56%{transform:none}
    62%{transform:translateX(72px) rotate(8deg)} 68%,81%{transform:none}
    87%{transform:translateY(-66px) rotate(-4deg)} 93%,100%{transform:none}}
  .hlab{position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:2; padding:5px 12px;
        border-radius:9px; color:#fff; font-size:13px; font-weight:800; text-transform:uppercase;
        letter-spacing:.03em; opacity:0; white-space:nowrap; box-shadow:0 6px 16px rgba(22,24,29,.25);}
  .hl1{background:#2E9E5B; animation:hlk1 8s infinite;}
  .hl2{background:#E3AD1F; color:#3a2f00; animation:hlk2 8s infinite;}
  .hl3{background:#E8722E; animation:hlk3 8s infinite;}
  .hl4{background:#D63B3B; animation:hlk4 8s infinite;}
  @keyframes hlk1{0%,7%{opacity:0}12%{opacity:1}17%,100%{opacity:0}}
  @keyframes hlk2{0%,32%{opacity:0}37%{opacity:1}42%,100%{opacity:0}}
  @keyframes hlk3{0%,57%{opacity:0}62%{opacity:1}67%,100%{opacity:0}}
  @keyframes hlk4{0%,82%{opacity:0}87%{opacity:1}92%,100%{opacity:0}}
  .hrow{border-radius:12px; padding:5px 8px;}
  .hrow1{animation:hg1 8s infinite} .hrow2{animation:hg2 8s infinite}
  .hrow3{animation:hg3 8s infinite} .hrow4{animation:hg4 8s infinite}
  @keyframes hg1{0%,4%{background:transparent}12%{background:rgba(46,158,91,.16)}20%,100%{background:transparent}}
  @keyframes hg2{0%,29%{background:transparent}37%{background:rgba(227,173,31,.18)}45%,100%{background:transparent}}
  @keyframes hg3{0%,54%{background:transparent}62%{background:rgba(232,114,46,.16)}70%,100%{background:transparent}}
  @keyframes hg4{0%,79%{background:transparent}87%{background:rgba(214,59,59,.16)}95%,100%{background:transparent}}
  .howto .hsub{font-size:15px; font-weight:600; color:var(--ink55); line-height:1.55; max-width:300px; margin-bottom:22px;}
  .hgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:300px; margin-bottom:8px;}
  .hrow{display:flex; align-items:center; gap:10px; width:100%;}
  .hrow .dot{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
             color:#fff; font-size:16px; font-weight:800; flex:none;}
  .hrow .hw{font-size:16px; font-weight:800; color:var(--ink);}
  .howto .hnote{font-size:13.5px; font-weight:600; color:var(--ink55); margin:14px 0 20px;}
  .howto .wgo{background:var(--blue); color:#fff; border:none; border-radius:100px; padding:15px 44px;
         font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;}

  /* first-card coach hint */
  .coach{position:absolute; bottom:1%; left:50%; translate:-50% 0; z-index:6; font-size:13px; font-weight:800;
         color:var(--ink55); background:#fff; border:1.5px solid rgba(22,24,29,.08); padding:8px 14px;
         border-radius:100px; box-shadow:0 6px 18px rgba(22,24,29,.10); white-space:nowrap;
         animation:coachpulse 1.6s ease-in-out infinite; transition:opacity .3s;}
  @keyframes coachpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  .bridge{position:absolute; inset:0; background:#fbfbfa; z-index:58; display:flex; flex-direction:column;
          align-items:center; justify-content:center; text-align:center; padding:40px 34px;
          opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease, visibility .6s;}
  .bridge.show{opacity:1; visibility:visible; pointer-events:auto;}
  .bridge .big{font-size:24px; font-weight:800; line-height:1.25; letter-spacing:.01em; margin-bottom:12px;}
  .bridge .sub{font-size:17px; font-weight:600; color:var(--ink55); line-height:1.55; max-width:330px; margin-bottom:20px;}
  .bridge .send{max-width:280px;}
  .bridge .done-check{width:54px; height:54px; border-radius:50%; background:var(--rarely); color:#fff; font-size:26px;
          font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}

  /* results / fix-first screen */
  .results{position:absolute; inset:0; background:#fbfbfa; z-index:60; display:none; flex-direction:column;
           padding:44px 30px 30px; overflow-y:auto;}
  .results.show{display:flex;}
  .results .big{font-size:22px; font-weight:800; line-height:1.25; letter-spacing:.02em; margin-bottom:8px;}
  .results .sub{font-size:15px; font-weight:600; color:var(--ink55); line-height:1.55; letter-spacing:.01em; margin-bottom:18px;}
  .frow{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid rgba(22,24,29,.09);
        border-radius:14px; margin-bottom:8px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s;}
  .frow .ring{width:26px; height:26px; border-radius:50%; border:2px solid rgba(22,24,29,.3); color:rgba(22,24,29,.5);
        display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; flex:none; line-height:1;}
  .frow .rname{flex:1; font-size:15px; font-weight:800; color:var(--ink);}
  .frow .rword{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;}
  .frow .rnum{width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px;
        font-weight:800; display:none; align-items:center; justify-content:center; flex:none;}
  .frow.picked{border-color:var(--blue); box-shadow:0 4px 14px rgba(47,111,181,.18);}
  .frow.picked .rnum{display:flex;}
  .frow.dim{opacity:.42; cursor:default;}
  .tray{margin-bottom:12px;}
  .tlabel{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink40); margin-bottom:8px;}
  .tslot{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid rgba(47,111,181,.35);
         background:rgba(47,111,181,.06); border-radius:14px; margin-bottom:8px; touch-action:none;
         cursor:grab; transition:transform .15s; user-select:none;}
  .tslot.dragging{transition:none; position:relative; z-index:5; box-shadow:0 8px 20px rgba(22,24,29,.2); background:#fff; cursor:grabbing;}
  .tslot .tnum{width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px;
         font-weight:800; display:flex; align-items:center; justify-content:center; flex:none;}
  .tslot .tname{flex:1; font-size:15px; font-weight:800;}
  .tslot .tword{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; flex:none;}
  .tslot .tx{background:none; border:none; color:var(--ink40); font-size:19px; font-weight:800; cursor:pointer; padding:0 4px;}
  .tempty{border:1.5px dashed rgba(22,24,29,.18); border-radius:14px; padding:12px 14px; font-size:13.5px;
         font-weight:700; color:var(--ink40); margin-bottom:8px;}
  .podium{margin-bottom:24px; padding:14px 16px; border:1.5px solid rgba(22,24,29,.09); border-radius:14px; background:#fff;}
  .podium .ptitle{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink40); margin-bottom:8px;}
  .podium .prow{font-size:15px; font-weight:800; padding:3px 0;}

  .finale{position:absolute; inset:0; background:#fbfbfa; z-index:75; display:none; flex-direction:column;
          align-items:center; justify-content:center; text-align:center; padding:40px 34px;}
  .finale.show{display:flex;}
  .finale .big{font-size:28px; font-weight:800; letter-spacing:.01em; margin-bottom:14px;}
  .finale .sub{font-size:15.5px; font-weight:600; color:var(--ink55); line-height:1.65; max-width:300px; margin-bottom:24px;}
  .finale .dots{display:flex; gap:10px; margin-bottom:16px;}
  .finale .dots span{width:14px; height:14px; border-radius:50%;}
  .finale .brand{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink55);}
  .finale .done-check{width:60px; height:60px; border-radius:50%; background:var(--rarely); color:#fff; font-size:28px;
          font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
  .finale.show .done-check{animation:bigpop .5s cubic-bezier(.2,.8,.3,1.2) both;}
  .finale .restart{margin-top:20px; padding-top:0;}

  /* thanks screen */
  .thanks{position:absolute; inset:0; background:#fbfbfa; z-index:60; display:none; flex-direction:column;
          padding:44px 30px 30px; overflow-y:auto;}
  .thanks.show{display:flex;}
  .thanks .done-check{width:54px; height:54px; border-radius:50%; background:var(--rarely); color:#fff;
          font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .thanks.show .done-check{animation:bigpop .5s cubic-bezier(.2,.8,.3,1.2) both;}
  .thanks.show .big{animation:bigpop .45s .08s cubic-bezier(.2,.8,.3,1.2) both;}
  @keyframes bigpop{0%{transform:scale(.82); opacity:0}100%{transform:scale(1); opacity:1}}
  .thanks .big{font-size:26px; font-weight:800; line-height:1.2; margin-bottom:10px;}
  .thanks .timestat{font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink40); margin-bottom:12px;}
  .thanks .sub{font-size:16.5px; font-weight:600; color:var(--ink55); line-height:1.55; margin-bottom:28px;}
  .thanks .ask{font-size:15.5px; font-weight:800; margin-bottom:10px;}
  .thanks input{width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid rgba(22,24,29,.15);
                font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); outline:none; margin-bottom:10px;}
  .thanks .send, .results .send, .bridge .send{width:100%; background:var(--blue); color:#fff; border:none; border-radius:100px; padding:14px;
                font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;}
  .thanks .skip{background:none; border:none; color:var(--ink40); font-family:inherit; font-size:14px; font-weight:800;
                cursor:pointer; margin:10px auto 0; display:block;}
  .thanks .fine{font-size:13.5px; font-weight:600; color:var(--ink40); line-height:1.5; margin-top:14px;}
  .thanks .div{height:1px; background:rgba(22,24,29,.1); margin:26px 0 20px;}
  .thanks .team, .capture .team{width:100%; background:#fff; border:1.5px solid rgba(22,24,29,.14); color:var(--ink);
                border-radius:100px; padding:13px; font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer;}
  .thanks .ok{font-size:15px; font-weight:700; color:var(--rarely); line-height:1.5; padding:12px 0;}
  .choice{display:flex; flex-direction:column; gap:10px;}
  .capture{position:absolute; inset:0; background:#fbfbfa; z-index:70; display:none; flex-direction:column;
           padding:34px 30px 26px; overflow-y:auto;}
  .capture.show{display:flex;}
  .capture .big{font-size:24px; font-weight:800; line-height:1.2; margin-bottom:10px;}
  .capture .sub{font-size:14.5px; font-weight:600; color:var(--ink55); line-height:1.55; margin-bottom:22px;}
  .capture input{width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid rgba(22,24,29,.15);
           font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); outline:none; margin-bottom:10px;}
  .capture .fine{font-size:12.5px; font-weight:600; color:var(--ink40); line-height:1.5; margin-top:14px;}
  .capture .ok{font-size:14px; font-weight:700; color:var(--rarely); line-height:1.55; padding:10px 0 16px;}
  .back{align-self:flex-start; background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:800;
        color:var(--ink55); cursor:pointer; padding:0; margin-bottom:20px;}
  .send.donebtn{background:rgba(46,158,91,.13); color:#1d7a44;}
  .team.donebtn{border-color:rgba(46,158,91,.4); color:#1d7a44;}
  .expand{max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s;}
  .expand.open{max-height:250px; opacity:1;}
  .expand .asksm{font-size:14px; font-weight:800; margin:4px 0 8px;}
  .mini{font-size:11.5px; font-weight:700; color:var(--ink40); margin:-2px 0 0 4px;}
  .chk{display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border:1.5px solid rgba(22,24,29,.12);
       border-radius:14px; cursor:pointer; font-size:15.5px; font-weight:800; background:#fff; user-select:none;}
  .chklab{display:flex; flex-direction:column; gap:3px; text-align:left;}
  .chkdesc{font-size:14px; font-weight:600; color:var(--ink55); line-height:1.5;}
  .chk .box{margin-top:1px; width:22px; height:22px; border-radius:7px; border:2px solid rgba(22,24,29,.25); flex:none;
       display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800;}
  .chk.on{border-color:var(--blue); background:rgba(47,111,181,.06);}
  .chk.on .box{background:var(--blue); border-color:var(--blue);}
  .thanks .send:disabled{background:rgba(22,24,29,.12); color:rgba(22,24,29,.4); cursor:default;}
  .restart{background:none;border:none;color:var(--ink40);font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;margin-top:auto;padding-top:22px;}
  @media (max-width:480px){
    body{padding:0;}
    .pagehead,.footnote{display:none;}
    .phone{width:100vw; height:100dvh; max-height:none; min-height:0; border-radius:0; box-shadow:none;}
  }
  @media (prefers-reduced-motion: reduce){ .card{transition:opacity .2s;} .pfill{transition:none;} .hcard,.hrow1,.hrow2,.hrow3,.hrow4,.coach,.hlab,.u1.shimmy{animation:none;} }

  /* ===== lead funnel additions ===== */
  .ob{position:absolute; inset:0; background:#fbfbfa; display:flex; flex-direction:column;
      align-items:center; justify-content:center; padding:30px; text-align:center;
      transition:opacity .45s; overflow-y:auto;}
  .ob.away{opacity:0; pointer-events:none;}
  .logo{display:flex; flex-direction:column; align-items:center; margin-top:-44px; margin-bottom:40px;
        filter:drop-shadow(0 10px 22px rgba(22,24,29,.16));}
  .plaque{background:#fff; padding:12px 26px 14px; box-shadow:0 4px 14px rgba(22,24,29,.12);}
  .p1{transform:rotate(-3.5deg); z-index:2;}
  .p2{transform:rotate(2.5deg) translateY(-7px); z-index:1; padding:10px 24px 12px;}
  .pword{font-weight:800; font-style:italic; letter-spacing:.01em; transform:skewX(-6deg); display:block;}
  .p1 .pword{font-size:52px; color:#2E8FD8;}
  .p2 .pword{font-size:43px; color:#111;}
  .p2 .tm{font-size:15px; vertical-align:top; font-style:normal;}
  .ob .wtitle{font-size:32px; font-weight:800; line-height:1.22; max-width:330px; margin-bottom:14px;}
  .ob .wsub2{font-size:16.5px; font-weight:700; color:var(--ink55); line-height:1.5; max-width:310px; margin-bottom:30px;}
  .ob .wgo{background:var(--blue); color:#fff; border:none; border-radius:100px; padding:19px 64px;
           font-family:inherit; font-size:18px; font-weight:800; cursor:pointer; width:100%; max-width:320px;
           box-shadow:0 6px 18px rgba(47,111,181,.35);}
  .ob .wgo:active{transform:translateY(1px);}
  .hookline{margin-top:18px; font-size:14.5px; font-weight:800; color:var(--blue); line-height:1.4; max-width:300px;}
  .qscreen{justify-content:flex-start; padding-top:76px;}
  .qstep{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink40); margin-bottom:10px;}
  .qsub{font-size:15px; font-weight:700; color:var(--ink55); line-height:1.5; max-width:300px; margin-bottom:18px;}
  .qtitle{font-size:28px; font-weight:800; line-height:1.25; max-width:320px; margin-bottom:24px;}
  .qchips{display:flex; flex-direction:column; gap:11px; width:100%; max-width:320px;}
  .qchip{background:#fff; border:2px solid rgba(22,24,29,.13); border-bottom-width:4px; border-radius:16px;
         padding:16px 18px; font-family:inherit; font-size:16.5px; font-weight:800; color:var(--ink); cursor:pointer;
         box-shadow:0 3px 8px rgba(22,24,29,.08); transition:transform .1s, border-color .12s, background .12s;}
  .qchip:active{transform:translateY(2px); border-bottom-width:2px;}
  .qchip.sel{border-color:var(--blue); background:rgba(47,111,181,.07); color:var(--blue);}
  .qchip.ghost{color:var(--ink40); box-shadow:none; border-color:rgba(22,24,29,.10); background:#fdfdfc; margin-top:6px;}
  .flipscreen{justify-content:flex-start; padding-top:64px;}
  .swipecap{font-size:14.5px; font-weight:800; color:var(--ink55); margin-bottom:10px;}
  .flipwrap{perspective:1200px; width:min(82%, 315px); aspect-ratio:2/3; margin-bottom:20px;
            transition:transform .42s cubic-bezier(.2,.8,.3,1.05);}
  .flipcard{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.3,.7,.3,1);}
  .flipwrap.flipped .flipcard{transform:rotateY(180deg);}
  .fface{position:absolute; inset:0; border-radius:16px; overflow:hidden; backface-visibility:hidden;
         box-shadow:0 14px 34px rgba(22,24,29,.22); background:#fff;}
  .fback img{width:100%; height:100%; object-fit:cover; display:block;}
  .ffront{transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
          padding:38px 24px 26px; text-align:center; border:1px solid rgba(22,24,29,.07);}
  .ftext{font-size:21.5px; font-weight:800; line-height:1.45; color:var(--ink);}
  .fsmall{font-size:17px; font-weight:700; color:var(--ink55); margin-top:14px; line-height:1.5;}
  .flab{position:absolute; left:50%; top:72%; transform:translate(-50%,-50%);
        font-size:25px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff;
        padding:9px 20px; border-radius:14px; opacity:0; pointer-events:none; white-space:nowrap;
        box-shadow:0 10px 30px rgba(22,24,29,.25); transition:opacity .18s; z-index:3;}
  .fglow{position:absolute; inset:0; border-radius:16px; opacity:0; transition:opacity .18s; pointer-events:none;
         box-shadow:inset 0 0 0 4px currentColor; z-index:2;}
  .minidock{display:flex; gap:9px; width:100%; max-width:340px; margin-bottom:18px;}
  .minidock .chip{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff;
        border:2px solid rgba(22,24,29,.13); border-bottom-width:4px; border-radius:16px; padding:11px 4px 10px; cursor:pointer;
        font-family:inherit; box-shadow:0 3px 8px rgba(22,24,29,.08); transition:transform .15s, box-shadow .15s, border-color .15s;}
  .minidock .chip:active{transform:translateY(2px); border-bottom-width:2px; box-shadow:none;}
  .minidock .dot{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
             color:#fff; font-size:20px; font-weight:800;}
  .minidock .w{font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink); text-align:center; line-height:1.1;}
  .minidock .chip.hot{border-color:currentColor; transform:translateY(-3px); box-shadow:0 6px 16px rgba(22,24,29,.16);}
  /* deck screen: button-ledge dock + bottom progress bar */
  .chip{border:2px solid rgba(22,24,29,.13); border-bottom-width:4px; box-shadow:0 3px 8px rgba(22,24,29,.08);}
  .chip:active{transform:translateY(2px); border-bottom-width:2px; box-shadow:none;}
  .chip.hot{border-color:currentColor;}
  .dock{padding:10px 14px 6px;}
  .topbar.botbar{padding:4px 18px calc(14px + env(safe-area-inset-bottom));}
  .prompt{padding-top:26px;}
  .count{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:45;
         background:rgba(22,24,29,.34); border-radius:16px; opacity:1; transition:opacity .4s;}
  .count.off{opacity:0; pointer-events:none;}
  .cnum{width:130px; height:130px; border-radius:50%; background:rgba(251,251,250,.96); color:var(--ink);
        display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:800;
        box-shadow:0 14px 40px rgba(22,24,29,.35);}
  .cnum.word{font-size:34px;}
  @keyframes cpop{0%{transform:scale(.55); opacity:0}55%{transform:scale(1.08); opacity:1}100%{transform:scale(1); opacity:1}}
  .cnum.pop{animation:cpop .5s cubic-bezier(.2,.8,.3,1.2) both;}
  /* bridge flip sizing */
  .bridge .bwrap{width:min(72%, 270px); margin-bottom:20px;}
  .bridge .ffront .done-check{margin-bottom:14px;}
  /* sort rows get the ledge */
  .frow{border:2px solid rgba(22,24,29,.11); border-bottom-width:4px;}
  /* thanks screen */
  .thanks{align-items:center;}
  .toplabel{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink40); margin-bottom:20px;}
  .topcards{display:flex; gap:14px; justify-content:center; margin-bottom:22px; padding-top:4px;}
  .tcard{position:relative; width:92px; border-radius:10px;}
  .tcard img{width:100%; aspect-ratio:2/2.454; object-fit:cover; object-position:top; display:block; border-radius:10px;}
  .tcard img{width:100%; border-radius:10px; box-shadow:0 8px 20px rgba(22,24,29,.22); display:block;}
  .tcard .rank{position:absolute; top:-10px; left:-10px; width:27px; height:27px; border-radius:50%; background:var(--blue);
        color:#fff; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center;
        box-shadow:0 4px 10px rgba(22,24,29,.25); z-index:2;}
  .compare{width:100%; max-width:330px; border-top:1.5px solid rgba(22,24,29,.1); padding-top:18px;}
  .cmphead{font-size:20px; font-weight:800; margin-bottom:8px; text-align:center;}
  .cmpsub{font-size:15px; font-weight:700; color:var(--ink55); line-height:1.5; margin-bottom:14px; text-align:center;}
  .cfine{font-size:13px; font-weight:700; color:var(--ink55); line-height:1.5; margin-top:12px; text-align:center;}
  .smalllogo{margin:26px 0 0 !important; filter:drop-shadow(0 6px 14px rgba(22,24,29,.14));}
  .smalllogo .plaque{padding:7px 15px 8px;}
  .smalllogo .p2{padding:6px 14px 7px; transform:rotate(2.5deg) translateY(-4px);}
  .smalllogo .p1 .pword{font-size:26px;}
  .smalllogo .p2 .pword{font-size:21px;}
  .smalllogo .p2 .tm{font-size:9px;}
  /* v2: hide printed page numbers (deck is shuffled) */
  .card .numpatch{position:absolute; left:32%; right:32%; bottom:1.2%; height:5.2%; background:#fff; pointer-events:none;}
  .tcard .numpatch{position:absolute; left:30%; right:30%; bottom:1.5%; height:6%; background:#fff; pointer-events:none; border-radius:3px;}
  /* v3: instruction and closing cards match the deck card size */
  .flipwrap{width:min(82%, 320px);}
  .bridge .bwrap{width:min(82%, 320px);}
  @supports (width: 1cqw){
    .flipwrap{width:min(82cqw, 320px);}
    .bridge .bwrap{width:min(82cqw, 320px);}
  }
  @keyframes btnpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
  .attn{animation:btnpulse 1.4s ease-in-out infinite; box-shadow:0 10px 26px rgba(47,111,181,.5);}
  @media (prefers-reduced-motion: reduce){ .attn{animation:none;} }
  .flogo{display:flex; flex-direction:column; align-items:center; margin:0 0 22px; filter:drop-shadow(0 5px 12px rgba(22,24,29,.14));}
  .flogo .plaque{padding:9px 19px 10px;}
  .flogo .p2{padding:7px 17px 8px; transform:rotate(2.5deg) translateY(-5px);}
  .flogo .p1 .pword{font-size:35px;}
  .flogo .p2 .pword{font-size:29px;}
  .flogo .p2 .tm{font-size:12px;}
  .lsvg{display:block; height:auto; aspect-ratio: 276.5 / 144.25;}
  .logo .lsvg{width:min(84%, 320px);}
  .flogo .lsvg{width:min(80%, 230px);}
  /* iPhone: browser chrome eats height; shrink cards so buttons stay on screen */
  .ob{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .results{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
  .thanks{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
  #rcontinue{position:sticky; bottom:0; box-shadow:0 -8px 16px rgba(251,251,250,.9), 0 4px 12px rgba(22,24,29,.18);}
  @media (max-height: 800px){
    .flipscreen{padding-top:42px;}
    .flipwrap{width:min(64cqw, 258px);}
    .ffront{padding-top:26px;}
    .ftext{font-size:19px;}
    .minidock .dot{width:36px; height:36px; font-size:17px;}
    .qscreen{padding-top:56px;}
  }
  @media (max-height: 690px){
    .flipwrap{width:min(56cqw, 224px);}
    .flipscreen{padding-top:30px;}
    .logo{margin-top:-10px; margin-bottom:26px;}
  }


  /* ---- v24: undo lives in the progress row ---- */
  .undobtn{background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:800;
           color:var(--ink55); cursor:pointer; padding:4px 8px 4px 0; flex:0 0 auto; line-height:1.2;}
  .undobtn:disabled{color:rgba(22,24,29,.26); cursor:default;}

  /* ---- v20 additions ---- */
  .treorder{font-size:13.5px; font-weight:700; color:var(--ink55); line-height:1.5;
            margin:0 2px 10px; text-transform:none; letter-spacing:0;}
  .tslot .tbody{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0;}
  .tarrows{display:flex; flex-direction:column; gap:3px; flex:0 0 auto;}
  .tarrow{width:32px; height:26px; border:1.5px solid rgba(22,24,29,.16); background:#fff;
          border-radius:8px; font-family:inherit; font-size:14px; line-height:1; color:var(--ink55);
          cursor:pointer; padding:0; display:grid; place-items:center;}
  .tarrow:disabled{opacity:.3; cursor:default;}

  /* the new prompt is 34 chars vs the old 18 — the nowrap/8cqw sizing clipped it */
  .prompt{white-space:normal; font-size:clamp(17px, 5.6cqw, 23px); padding-top:20px;
          max-width:340px; margin-left:auto; margin-right:auto; text-wrap:balance;}
  /* v21 readability pass: nothing new drops below 13.5px, and secondary text sits on
     --ink55 (.78 alpha) rather than --ink40 (.64), matching the v19 legibility work. */
  .pilotnote{margin-top:14px; font-size:13.5px; font-weight:700; color:var(--ink55);
             line-height:1.5; max-width:300px;}
  .privlink{color:var(--blue); text-decoration:underline; text-underline-offset:2px;
            font-weight:800; padding:2px 1px;}

  /* v21: reads as a control, not a caption. Longer than it is tall, and clearly
     secondary to the four rating chips above it. */
  .nabtn{display:block; margin:14px auto 0; width:min(86%, 268px); background:#fff;
         border:1.5px solid rgba(22,24,29,.16); border-bottom-width:2.5px; border-radius:100px;
         font-family:inherit; font-size:15px; font-weight:800; color:var(--ink55);
         cursor:pointer; padding:9px 20px; line-height:1.2;
         box-shadow:0 2px 6px rgba(22,24,29,.06);
         transition:transform .1s, color .15s, border-color .15s, background .15s;}
  .nabtn:hover{color:var(--ink); border-color:rgba(22,24,29,.28);}
  .nabtn:active{transform:translateY(1px); background:rgba(22,24,29,.03);}
  .nabtn:disabled{opacity:.35; cursor:default;}
  /* the practice screen shows the real control, and tapping it demonstrates the swipe —
     it looks pressable because it is. Extra gap below so it can't be fat-fingered
     into "Start the deck". */
  .napreview{margin:10px auto 18px; font-size:14.5px; padding:8px 20px;}
  /* the instruction copy was top-aligned in a 2:3 card, leaving the bottom half empty
     and reading as unfinished. Centre it — same treatment the bridge card already uses. */
  #pflip .ffront{justify-content:center; padding-top:26px;}
  /* on tall screens no height media query fires, so the full-size practice card plus the
     new NA control pushed "Start the deck" past the fold. Trim the practice card only. */
  @media (min-height: 801px){ #pflip{width:min(74cqw, 292px);} }

  .topcaveat{font-size:16px; font-weight:700; color:var(--ink55); line-height:1.55;
             max-width:300px; margin:2px auto 18px; text-align:center; text-wrap:pretty;}
  .flabel{display:block; text-align:left; font-size:13.5px; font-weight:800; color:var(--ink55);
          letter-spacing:.03em; margin:0 0 6px 2px;}
  .fprivacy{font-size:13.5px; font-weight:700; color:var(--ink55); line-height:1.5;
            margin:9px 2px 12px; text-align:left;}
  .optin{display:flex; align-items:flex-start; gap:10px; text-align:left; margin:0 2px 16px;
         font-size:14.5px; font-weight:700; color:var(--ink55); line-height:1.45; cursor:pointer;}
  .optin input{width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--blue);}
  .restart{font-size:13.5px;}

  /* v21: the confirmation and team screens are built as cards in the product's own
     language. In v20 they used .big/.sub/.send, which are all scoped to their parent
     screens, so these two rendered as unstyled browser defaults. */
  .ovl{position:absolute; inset:0; background:#fbfbfa; z-index:88;
       display:none; flex-direction:column; align-items:center; justify-content:center;
       padding:24px 20px calc(20px + env(safe-area-inset-bottom)); text-align:center;}
  .ovl.show{display:flex;}
  .ocard{width:min(100%, 330px); background:#fff; border:1px solid rgba(22,24,29,.07);
         border-radius:20px; box-shadow:0 14px 34px rgba(22,24,29,.14);
         padding:28px 22px 22px; display:flex; flex-direction:column; align-items:center;}
  .ohead{font-size:23px; font-weight:800; line-height:1.24; color:var(--ink);
         letter-spacing:.01em; margin-bottom:10px; text-wrap:balance;}
  .osub{font-size:16px; font-weight:600; color:var(--ink55); line-height:1.55;
        margin-bottom:16px; text-wrap:pretty;}
  .obtn{width:100%; background:var(--blue); color:#fff; border:none; border-radius:100px;
        padding:15px 22px; font-family:inherit; font-size:15.5px; font-weight:800;
        cursor:pointer; line-height:1.25; display:grid; place-items:center;
        text-decoration:none; box-shadow:0 6px 16px rgba(47,111,181,.28);
        transition:transform .1s, box-shadow .15s;}
  .obtn:active{transform:translateY(1px); box-shadow:0 3px 10px rgba(47,111,181,.24);}
  .obtn:disabled{background:rgba(22,24,29,.12); color:rgba(22,24,29,.4); box-shadow:none; cursor:default;}
  .oskip{background:none; border:none; color:var(--ink55); font-family:inherit;
         font-size:14.5px; font-weight:800; cursor:pointer; margin-top:12px; padding:6px 10px;}
  .oskip:disabled{opacity:.45; cursor:default;}
  .cicon{width:58px; height:58px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
         font-size:27px; background:rgba(47,111,181,.12); color:var(--blue); margin-bottom:16px;}
  .cicon.bad{background:rgba(214,59,59,.12); color:#D63B3B;}
  .cicon.good{background:rgba(46,158,91,.14); color:#1d7a44;}
  /* five dots for the five-response floor — the promise made visible */
  .temblem{display:flex; gap:7px; margin-bottom:18px;}
  .temblem i{width:13px; height:13px; border-radius:50%; background:rgba(47,111,181,.22);}
  .temblem i:nth-child(5){background:var(--blue);}
  .tnote{font-size:14px; font-weight:700; color:var(--ink55); line-height:1.5;
         background:rgba(47,111,181,.07); border:1px solid rgba(47,111,181,.16);
         border-radius:12px; padding:11px 14px; margin-bottom:18px; text-wrap:pretty;}

  /* short viewports (SE-class phones with Safari chrome showing): the practice-screen
     preview of the NA control is the first thing to go — the real control is one tap away. */
  @media (max-height: 660px){
    .nabtn{margin-top:10px; font-size:14.5px; padding:8px 18px;}
    .napreview{margin:8px auto 12px;}
    .ocard{padding:22px 18px 18px;}
    .ohead{font-size:21px;}
    .osub{font-size:15px; margin-bottom:14px;}
    .cicon{width:50px; height:50px; font-size:24px; margin-bottom:12px;}
    .temblem{margin-bottom:14px;}
    .tnote{margin-bottom:14px; padding:10px 12px;}
  }
  /* pre-existing in the live build, not new in v20: below ~600px the practice screen
     pushed its own button off the fold. Third tier after the 800px / 690px steps. */
  @media (max-height: 600px){
    .flipwrap{width:min(46cqw, 176px);}
    .flipscreen{padding-top:16px;}
    .ftext{font-size:16.5px;}
    .swipecap{font-size:13px; margin-bottom:6px;}
    .minidock .dot{width:30px; height:30px; font-size:15px;}
    .logo{margin-top:-14px; margin-bottom:16px;}
    .qscreen{padding-top:34px;}
  }
  
  /* ═══ v27 ═══ */
  #ob-welcome .lsvg{width:min(73%, 278px);}          /* logo −13% */
  .ob .wtitle{font-size:clamp(28px, 8.6cqw, 30px);}  /* .ob prefix outranks the old 32px rule */
  .ob .wsub2{font-size:15.5px;}
  .wgo{min-height:50px;}
  .ob .pilotnote{font-size:13px;}
  .ob .qstep{font-size:12.5px;}
  .qchip{min-height:47px; font-size:clamp(15px, 4.4cqw, 16px);}
  .phead{font-size:19px; font-weight:800; color:var(--ink); margin-bottom:14px;}
  .frow{min-height:47px;}
  /* fit passes — every intro/outro screen must clear 320x568 with zero scroll */
  @media (max-height:700px){
    #ob-practice .flipwrap{width:min(52cqw, 196px);}
    #ob-practice .ftext{font-size:14.5px;}
    .phead{font-size:17px; margin-bottom:8px;}
    .swipecap{margin-top:8px;}
  }
  .results{padding-top:26px;}
  .results .big{font-size:22px; margin-bottom:6px;}
  #rsub{margin-bottom:10px;}
  .results .frow{padding:8px 12px; margin-bottom:7px;}
  .thanks{padding-top:26px;}
  .thanks .big{font-size:22px;}
  #thanks .done-check{margin-bottom:8px;}
  @media (max-height:620px){
    #thanks .done-check{display:none;}
    .topcaveat{font-size:14px; margin-bottom:10px;}
  }
  .emailscr{padding-top:44px;}
  .emailscr .compare{max-width:330px;}
  /* second fit pass — measured overflows at 320x568 (sort was 360px over when picked) */
  .results{padding-top:16px; padding-left:22px; padding-right:22px;}
  .results .big{font-size:21px; margin-bottom:5px;}
  #rsub{margin-bottom:8px; font-size:13.5px; line-height:1.45;}
  .results .frow{padding:6px 12px; margin-bottom:7px; min-height:46px;}
  .frow .rname{font-size:14.5px;}
  .tslot{padding:5px 8px 5px 12px; margin-bottom:7px; min-height:46px;}
  .tarrows{display:flex; flex-direction:row; gap:4px;}   /* side by side: 44px-tall targets without a 91px slot */
  .tarrow{width:38px; height:44px;}
  .tslot{gap:8px;}
  .tslot .tnum{width:22px; height:22px;}
  .tslot .tx{min-width:28px; min-height:44px; padding:0 2px;}
  .tslot .tbody{min-width:0;}
  .tslot .tname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:13.5px;}
  .treorder{margin-bottom:7px;}
  .tempty{padding:9px 14px;}
  .tray{margin-bottom:8px;}
  .results .send{padding:12px; margin-top:6px !important;}
  .thanks{padding-top:18px;}
  .thanks .skip{margin-top:8px;}
  .thanks .restart{margin-top:12px; padding-top:0;}
  .rvstage{margin-bottom:10px;}
  .topcaveat{margin-bottom:10px;}
  .qchip.qlong{font-size:14.5px; padding-left:10px; padding-right:10px;}  /* 286px of text vs 284 of room — padding gives it back */
  @media (max-height:620px){
    .results .big{font-size:19px;}
    #rsub{font-size:13px;}
    .results{padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));}
    .results .frow{margin-bottom:5px;}
    .tslot{margin-bottom:5px;}
    .tray{margin-bottom:4px;}
    .treorder{margin-bottom:5px; font-size:12.5px;}
    .tempty{padding:7px 12px; font-size:12.5px;}
    .results .send{margin-top:2px !important; padding:11px;}
  }
  @media (max-height:700px){
    #ob-practice .flipwrap{width:min(44cqw, 168px);}
    #ob-practice .ftext{font-size:14px;}
    .napreview{margin:6px auto 10px; font-size:13px; padding:7px 16px; white-space:nowrap;}
    .minidock{margin-bottom:10px;}
    #ob-practice .swipecap{margin-top:6px; font-size:13px;}
  }
  .tarrow{width:44px; height:38px;}
  .tx{min-width:40px; min-height:40px;}
  #emailOne{font-size:16px;}
  .emailscr{justify-content:flex-start; padding-top:54px;}
  .emailscr .big{margin-bottom:4px;}
  .rvtabs{display:flex; flex-direction:column; gap:7px; width:100%; max-width:330px; margin:0 auto 12px; flex:none;}
  .rvtab{display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 14px; text-align:left;
         border:2px solid rgba(22,24,29,.12); border-radius:13px; background:#fff; font-family:inherit;
         font-size:15px; font-weight:800; color:var(--ink); cursor:pointer;}
  .rvtab.sel{border-color:var(--blue); background:#EAF3FA;}
  .rvtab .tnum{background:rgba(22,24,29,.24);}
  .rvtab.sel .tnum{background:var(--blue);}
  .rvname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .rvstage{flex:1 1 auto; min-height:110px; display:flex; align-items:center; justify-content:center;
           width:100%; margin-bottom:14px;}
  .rvstage img{height:100%; max-height:100%; max-width:min(92%, 340px); aspect-ratio:2/2.454;
               object-fit:cover; object-position:top; border-radius:12px;
               border:1px solid rgba(22,24,29,.08); box-shadow:0 10px 26px rgba(22,24,29,.16);}
  .teamblock{width:100%; max-width:300px;}
  .tdiv{height:1.5px; background:rgba(22,24,29,.12); width:min(72%, 220px); margin:20px auto 16px;}
  .thead2{font-size:17.5px; font-weight:800; color:var(--ink); margin-bottom:7px;}
  .tsub2{font-size:14px; font-weight:700; color:var(--ink55); line-height:1.5; max-width:280px; margin:0 auto 14px;}
  .teamgo2{display:block; text-decoration:none; text-align:center; max-width:280px; margin:0 auto;
           box-sizing:border-box; width:100%; background:var(--blue); color:#fff; border:none;
           border-radius:100px; padding:14px; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;}
  .finale .flipwrap{width:min(40cqh, 176px);}
  .teamsoon{font-size:13px; font-weight:700; color:var(--ink40); margin-top:8px;}         /* the merged screen must fit 320×568 */

  /* ═══ v28 ═══ */
  /* 1 — the practice dock IS the real dock: same chip, same dot, same word */
  /* same effective width as the deck dock (100vw − 14px×2), so the same words wrap
     the same way and the chips come out the same height */
  .minidock{gap:8px; width:calc(100vw - 28px); max-width:none; align-self:center; padding:0; margin-bottom:16px;}
  /* neutralize only the size differences — border, shadow and press feel then
     come from the same .chip rules the deck itself uses */
  .minidock .chip{padding:10px 4px 9px; gap:6px;}
  .minidock .dot{width:38px; height:38px; font-size:18px;}
  .minidock .w{font-size:12px;}

  /* 2 — one display-card size, shared by every screen that shows a card.
     The deck itself keeps its larger interactive size — it is the work surface. */
  :root{--dispcard:min(56vw, 220px);}
  @media (max-height:700px){ :root{--dispcard:min(44vw, 172px);} }
  #ob-practice .flipwrap{width:var(--dispcard);}
  #bflip{width:var(--dispcard);}
  #fflip{width:var(--dispcard);}
  /* the viewer card targets the shared size but may flex smaller rather than scroll */
  .rvstage{flex:1 1 auto; min-height:110px;}
  .rvstage img{height:100%; max-height:calc(var(--dispcard) * 1.227); max-width:var(--dispcard);}
  #thanks .done-check{display:none;}   /* the heading carries the moment; the ✓ cost 40px */
  @media (max-height:620px){
    /* long card names wrapped rows unpredictably (shuffle-dependent); on the
       smallest screens the name keeps one line and the rating word steps aside */
    .frow .rword{display:none;}
    .frow .rname{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    #rlist .frow{margin-bottom:4px;}
    .tray{margin-bottom:2px;}
    .results .send{padding:10px;}
    .thanks{padding-top:12px;}
    .thanks .skip{margin-top:5px;}
    .thanks .restart{margin-top:8px;}
    .topcaveat{margin-bottom:6px;}
    .rvstage{margin-bottom:6px;}
    .rvtabs{margin-bottom:8px;}
  }

  /* ═══ v30 ═══ */
  .nabtn{margin-top:4px;}                      /* NA pill rides just under the dock */
  #ob-practice{display:none;}                  /* the how-to screen is gone */
  .rvstack{position:relative; width:calc(var(--dispcard) + 30px); height:calc(var(--dispcard)*1.28 + 26px);
           margin:6px auto 16px; cursor:pointer; flex:none;}
  .rvcard{position:absolute; inset:0 auto auto 0; transition:transform .28s cubic-bezier(.2,.8,.3,1);
          width:var(--dispcard); aspect-ratio:2/2.56; background:#fff; border-radius:12px;
          border:1px solid rgba(22,24,29,.1); box-shadow:0 10px 24px rgba(22,24,29,.18); overflow:hidden;}
  .rvcard img{width:100%; aspect-ratio:2/2.44; object-fit:cover; object-position:top; display:block;}
  .rvcard.pos0{z-index:3; transform:translate(8px,0);}
  .rvcard.pos1{z-index:2; transform:translate(24px,10px) rotate(2.4deg);}
  .rvcard.pos2{z-index:1; transform:translate(-6px,18px) rotate(-2.6deg);}
  .rvrank{position:absolute; top:-9px; left:-1px; z-index:5; width:26px; height:26px; border-radius:50%;
          background:var(--ink); color:#fff; font-weight:800; font-size:13px;
          display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(22,24,29,.28);}
  #obgo0{white-space:nowrap;}
  /* the finale card face scales its contents to the shared card size */
  .finale .flogo .lsvg{width:64%;}
  .finale .ffront{padding:12px 8px !important;}
  .finale .ffront .big{font-size:16.5px !important; margin-bottom:5px !important;}
  #finText{font-size:12px !important; line-height:1.45 !important; max-width:90% !important; margin-bottom:7px !important;}
  @media (max-height:620px){ .finale .flogo{display:none;} }
  .fprivlink{margin:4px 0 10px;}
  .fprivlink .privlink{font-size:13px; font-weight:800; color:var(--blue);}
  .shareblock{width:100%; max-width:300px; margin-top:14px;}
  .sharehead{font-size:14px; font-weight:800; color:var(--ink); margin-bottom:8px;}
  .sharerow{display:flex; align-items:center; justify-content:center; gap:14px;}
  .shareqr{width:84px; height:84px; border-radius:10px; border:1.5px solid rgba(22,24,29,.12); background:#fff;}
  .sharecopy{background:#fff; border:2px solid rgba(22,24,29,.13); border-bottom-width:4px; border-radius:100px;
             padding:10px 18px; font-family:inherit; font-size:13.5px; font-weight:800; color:var(--ink); cursor:pointer;}
  @media (max-height:620px){ .shareqr{width:70px; height:70px;} .shareblock{margin-top:8px;} .tdiv{margin:12px auto 10px;} }
  /* list + stack both fit: tighter viewer under 700h, smaller shared card under 620h */
  @media (max-height:700px){
    .thanks{padding-top:14px;}
    .thanks .big{font-size:20px;}
    .topcaveat{font-size:13px; margin-bottom:8px;}
    .rvtabs{gap:5px; margin-bottom:8px;}
    .rvtab{min-height:44px; font-size:14px;}
    .rvstack{margin:2px auto 10px;}
    .thanks .skip{margin-top:4px;}
    .thanks .restart{margin-top:8px;}
  }
  @media (max-height:620px){
    :root{--dispcard:min(38vw, 150px);}
    #thanks .topcaveat{display:none;}
  }
  /* six size buckets need a tighter column on 568px-class screens */
  @media (max-height:620px){
    .qchips{gap:7px;}
    .qchip{padding:12px 18px; min-height:46px;}
    .qtitle{font-size:24px; margin-bottom:14px;}
    .qstep{margin-bottom:6px;}
    .qscreen{padding-top:26px;}
  }

  /* ═══ v32 ═══ */
  .rvtab .tnum, .rvtab.sel .tnum{background:none; box-shadow:none; color:var(--ink);
    width:auto; min-width:14px; height:auto; font-size:15px;}
  .rvrank{top:7px; left:7px; transition:opacity .25s;}
  .rvcard.pos1 .rvrank, .rvcard.pos2 .rvrank{opacity:0;}   /* only the front card wears its number */
  /* seven functional-area options: smaller type keeps the long labels on one line */
  #ob-q3 .qchip{font-size:13.5px; min-height:44px; padding:11px 12px;}
  #ob-q3 .qchips{gap:8px;}
  @media (max-height:620px){
    #ob-q3 .qchip{min-height:42px; padding:9px 10px;}
    #ob-q3 .qchips{gap:6px;}
    #ob-q3 .qtitle{font-size:22px; margin-bottom:10px;}
  }