/* THE LOOP (v2 home and /demo/; approved piece v41). One phone, one screen
   at a time — your app, the client's page, WhatsApp — showing real captures
   of the demo. The five moment tabs are the only control: a tab plays its
   moment on its own and ends on a card: Replay, or Next. Above the phone, the step in one line and
   which screen it is; under it, a thin bar of the steps.
   Scoped to .loop so it sits on the new home (v2.css) and on /demo/
   (site.css) without either touching it. Every token it needs is its own. */
.loop{
  --l-ground:#141619; --l-band:#1c1f23; --l-card:#262a2f; --l-line:#33383e;
  --l-ink:#f3f4f2; --l-muted:#c9cdd1; --l-faint:#9aa1a8;
  --l-lime:oklch(0.84 0.16 124); --l-lime-ink:#0e1207;
  --l-font:'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wa-bg:#0b141a; --wa-out:#005c4b; --wa-in:#202c33; --wa-tick:#53bdeb;
  color:var(--l-ink);font-family:var(--l-font);font-size:16px;line-height:1.45;text-align:left;
}
.loop *{box-sizing:border-box}
.loop .band{background:var(--l-band);border-radius:28px;padding:18px clamp(14px,3vw,26px) 22px;display:flex;flex-direction:column;gap:14px;max-width:960px;margin:0 auto;width:100%}
.loop .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;border:0;background:none;grid-template-columns:none}
/* The tabs are the choice (v14–v16): bolder, a brighter rim, lime on hover,
   one row at every width. */
.loop .tab{font:600 15px/1 var(--l-font);color:var(--l-ink);background:transparent;border:1px solid #4a5058;border-radius:999px;padding:11px 16px;cursor:pointer}
.loop .tab:hover{border-color:var(--l-lime)}
.loop .tab[aria-selected="true"]{background:var(--l-lime);color:var(--l-lime-ink);border-color:var(--l-lime)}
.loop .tab:focus-visible{outline:2px solid var(--l-lime);outline-offset:3px}
.loop .phone{width:100%;max-width:236px;aspect-ratio:9/17.5;border-radius:36px;padding:9px;background:#0a0b0c;box-shadow:0 0 0 1px #2c3036,0 24px 50px rgba(0,0,0,.45);margin:0}
.loop .screen{width:100%;height:100%;min-height:0;border-radius:28px;overflow:hidden;position:relative;background:#f6f4f0;display:block}
.loop .screen.dark{background:#141619}
.loop .shot{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .3s ease;will-change:transform;opacity:1}
.loop .shot.out{opacity:0}
.loop .ring{position:absolute;border-radius:14px;border:3px solid var(--l-lime);box-shadow:0 0 0 2px rgba(10,12,8,.55),0 0 18px oklch(0.84 0.16 124 / .55);pointer-events:none;transition:all .6s cubic-bezier(.3,.7,.2,1);animation:loop-pulse 1.6s ease-in-out infinite}
.loop .ring.off{opacity:0;animation:none}
@keyframes loop-pulse{50%{box-shadow:0 0 0 2px rgba(10,12,8,.55),0 0 0 7px oklch(0.84 0.16 124 / .25)}}
.loop .toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,0);background:#14171a;color:#fff;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35);animation:loop-toast .45s ease both}
.loop .dark .toast{background:var(--l-lime);color:var(--l-lime-ink)}
@keyframes loop-toast{from{opacity:0;transform:translate(-50%,10px)}}
/* WhatsApp, drawn; the texts are Showup's own message templates */
.loop .wa{background:var(--wa-bg);color:#e9edef;display:flex;flex-direction:column;font-size:inherit}
.loop .wa-head{display:flex;align-items:center;gap:9px;padding:16px 12px 10px;background:#1f2c34}
.loop .wa-av{width:30px;height:30px;border-radius:15px;background:oklch(0.77 0.06 190);color:#14171a;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.loop .wa-av.pn{background:#c9b8e8}
.loop .wa-name{font-size:14px;font-weight:600}
.loop .wa-sub{font-size:11px;color:#8696a0}
.loop .wa-body{flex:1;padding:10px 9px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;overflow:hidden}
.loop .bubble{max-width:92%;border-radius:12px;padding:6px 8px 4px;font-size:10.5px;line-height:1.35;white-space:pre-line;flex-shrink:0}
.loop .bubble.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:3px}
.loop .bubble.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:3px}
.loop .bubble.new{animation:loop-enter .45s ease both}
.loop .meta{display:flex;justify-content:flex-end;gap:4px;font-size:10px;color:#a7c4bd;margin-top:2px}
.loop .ticks.read{color:var(--wa-tick)}
.loop .sendbar{display:flex;gap:8px;align-items:center;padding:7px 9px 12px}
.loop .sendbox{flex:1;background:#2a3942;border-radius:20px;padding:8px 12px;font-size:11.5px;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loop .sendbtn{width:32px;height:32px;border-radius:16px;background:#00a884;display:flex;align-items:center;justify-content:center;color:#0b141a;font-weight:800;flex-shrink:0}
.loop .sendbtn.tap{animation:loop-tap .5s ease}
/* A message Showup wrote waits typed in the compose box (v20), fading out at the foot when long. */
.loop .sendbar.typed-in{align-items:flex-end}
.loop .sendbar.typed-in .sendbox{white-space:pre-line;color:#e9edef;border-radius:16px;max-height:58%;overflow:hidden;font-size:11px;line-height:1.35;padding:9px 12px;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}
.loop .wa .sendbar.typed-in{flex:0 1 auto;min-height:0}
@keyframes loop-enter{from{opacity:0;transform:translateY(8px)}}
@keyframes loop-tap{40%{transform:scale(.88);box-shadow:0 0 0 6px rgba(0,168,132,.35)}}
/* one screen at a time, the same on a phone and a desk */
.loop .tabs{justify-content:center;flex-wrap:nowrap}
.loop .viewer{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;transform:none}
.loop .say{margin:0;font:600 clamp(16px,1.8vw,18px)/1.35 var(--l-font);text-align:center;max-width:30ch;min-height:2.7em;text-wrap:balance;display:flex;align-items:center;justify-content:center}
.loop .lanes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.loop .lanes span{font:600 13px/1 var(--l-font);color:var(--l-faint);border:1px solid var(--l-line);border-radius:999px;padding:8px 12px;transition:all .3s}
.loop .lanes span.on{background:var(--l-ink);color:var(--l-ground);border-color:var(--l-ink)}
.loop .lanes i{font-style:normal;color:var(--l-line);font-size:13px}
.loop .phone.one{position:relative;max-width:280px}
.loop .phone.one .screen{position:absolute;inset:9px;width:auto;height:auto;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.loop .phone.one .screen.on{opacity:1;visibility:visible}
/* The end card (v18): the last screen holds, blurred, under Replay and Next. */
.loop .phone.one .screen.blur{filter:blur(5px) brightness(.55);transition:filter .5s ease,opacity .35s ease,visibility .35s}
.loop .endcard{position:absolute;inset:9px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:5}
.loop .endcard[hidden]{display:none}
.loop .endcard button{font:700 15px/1 var(--l-font);border-radius:999px;padding:13px 20px;cursor:pointer;border:0}
.loop .replay{background:var(--l-lime);color:var(--l-lime-ink)}
.loop .nextm{background:rgba(20,22,25,.85);color:var(--l-ink);box-shadow:inset 0 0 0 1px #4a5058}
.loop .endcard button:focus-visible{outline:2px solid var(--l-lime);outline-offset:3px}
.loop .prog{display:flex;gap:5px}
.loop .prog i{width:18px;height:3px;border-radius:2px;background:var(--l-line)}
.loop .prog i.done{background:var(--l-muted)}
.loop .prog i.now{background:var(--l-lime)}
@media (max-width:600px){ .loop .bubble{font-size:12px} }
@media (max-width:480px){
  .loop .phone{border-radius:26px;padding:6px} .loop .screen{border-radius:21px}
  .loop .phone.one .screen,.loop .endcard{inset:6px}
  .loop .lanes{flex-wrap:nowrap;gap:4px}
  .loop .lanes i{display:none}
  .loop .lanes span{font-size:12px;padding:7px 10px;white-space:nowrap}
  .loop .tabs{gap:4px}
  .loop .tab{font-size:clamp(11.5px,3.5vw,14px);padding:9px clamp(7px,2.4vw,12px);white-space:nowrap}
  .loop .band{padding-inline:10px}
}
@media (prefers-reduced-motion:reduce){.loop *{animation:none!important;transition:none!important}}

/* Approved 15/10 walkthrough: narrative left, one phone right. */
.loop .band{padding:28px;gap:26px}
.loop .tabs{justify-content:flex-start;flex-wrap:wrap}
.loop .viewer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.loop .narrative{display:flex;flex-direction:column;gap:6px;min-width:0}
.loop .beat{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;text-align:left;background:transparent;color:var(--l-faint);border:0;border-radius:12px;padding:16px 12px;font:inherit;cursor:pointer;min-height:68px;width:100%}
.loop .beat:hover{color:var(--l-ink)}
.loop .beat.active{background:oklch(0.84 0.16 124 / .08);color:var(--l-ink)}
.loop .beat strong{display:block;font-size:18px;font-weight:600;line-height:1.3}
.loop .number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--l-line);font-size:12px;line-height:1}
.loop .active .number{background:var(--l-lime);color:var(--l-lime-ink)}
.loop .detail{display:none;margin-top:7px;color:var(--l-muted);font-size:14px;line-height:1.55}
.loop .active .detail{display:block}
.loop .preview{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.loop .actor{margin:0;color:var(--l-muted);font-size:13px;line-height:1.4;text-align:center}
.loop .say{display:none}
.loop .phone.one{width:100%;max-width:330px;aspect-ratio:9/17.5}
.loop .playback{display:flex;align-items:center;justify-content:center;gap:8px}
.loop .playback button{font:600 13px/1 var(--l-font);border:1px solid #4a5058;border-radius:999px;color:var(--l-ink);background:transparent;padding:10px 14px;min-width:44px;min-height:44px;cursor:pointer}
.loop .playback button:disabled{opacity:.4;cursor:default}
.loop .count{font-size:12px;color:var(--l-faint);min-width:34px;text-align:center}
.loop .beat:focus-visible,.loop .playback button:focus-visible{outline:2px solid var(--l-lime);outline-offset:3px}
.loop-lede{text-align:center;color:var(--muted);max-width:55ch;margin:16px auto 28px;font-size:16px;line-height:1.6}
@media(max-width:700px){
 .loop .band{padding:20px 14px;gap:20px}
 .loop .viewer{grid-template-columns:1fr;gap:0}
 .loop .narrative{display:none}
 .loop .tabs{justify-content:center;flex-wrap:nowrap;gap:4px}
 .loop .tab{font-size:clamp(11.5px,3.5vw,14px);padding:10px clamp(7px,2.4vw,12px);min-height:44px}
 .loop .say{display:block;font-size:17px;line-height:1.4;min-height:2.8em;max-width:30ch;margin:0;align-content:center}
 .loop .phone.one{max-width:300px}
}
/* Full viewport captures must keep their bottom action visible. */
.loop .phone.one{aspect-ratio:auto;height:auto}
.loop .phone.one::before{content:'';display:block;aspect-ratio:750/1624}

.loop-heading span,.loop-lede span,#loop .head .lede span{display:block}
#loop .loop-heading{max-width:26ch}