/* "See Tusker in action": a WhatsApp phone and the Tusker app side by side, with one plain sentence above.
   Flat like the rest of the site: white cards on the page colour, one blue accent.
   Every class is prefixed fd- so nothing here touches the older site CSS. */
.flow-demo{--fd-blue:#2864C5;--fd-blue-d:#1D43A6;--fd-tint:#E8EDFF;--fd-ink:#14151A;--fd-mute:#5D6070;--fd-line:#E6E3DC;--fd-canvas:#F6F6F3;
  --fd-wa:#075E54;--fd-wall:#EFE7DE;--fd-mine:#D9FDD3;--fd-green:#17924A;--fd-ease:cubic-bezier(.4,0,.2,1);--fd-ph:440px;
  border-top:1px solid #E8E6E0;padding:28px 0 48px;scroll-margin-top:70px;color:var(--fd-ink)}
.flow-demo *{box-sizing:border-box}
.flow-demo button{font:inherit;cursor:pointer}
.flow-demo .wrap{max-width:1184px}

.fd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.fd-head .eyebrow{margin:0 0 6px}
.fd-head h2{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.08}
.fd-switch{display:flex;background:#fff;border:1px solid var(--fd-line);border-radius:999px;padding:3px}
.fd-switch a{padding:8px 18px;border-radius:999px;text-decoration:none;color:var(--fd-mute);font-weight:600;font-size:14px}
.fd-switch a.active{background:var(--fd-tint);color:var(--fd-blue-d)}

.fd-days{display:flex;justify-content:center;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.fd-day{border:0;background:none;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-family:inherit;font-weight:600;font-size:16px;line-height:1;color:#7B7E8C;transition:background .3s,color .3s}
.fd-day i{width:9px;height:9px;border-radius:50%;background:#CFCDC6;transition:background .3s,box-shadow .3s}
.fd-day.past{color:#14603F}.fd-day.past i{background:var(--fd-green)}
.fd-day.now{background:#fff;color:var(--fd-blue-d);box-shadow:0 1px 3px #14151A14}.fd-day.now i{background:var(--fd-blue);box-shadow:0 0 0 4px #2864C522}
.fd-day:focus-visible,.flow-demo .fd-btn:focus-visible,.flow-demo .fd-play:focus-visible,.fd-stage:focus-visible{outline:2px solid var(--fd-blue);outline-offset:3px}

.fd-stage{position:relative;cursor:pointer;border-radius:16px;padding:2px 0 0}
.fd-line{text-align:center;font-weight:800;font-size:clamp(24px,2.8vw,34px);line-height:1.2;margin:0 auto 6px;min-height:1.2em}
.fd-line em{font-style:normal;color:var(--fd-blue)}
.fd-sub{text-align:center;color:var(--fd-mute);font-size:17px;margin:0 auto 20px;min-height:1.4em;max-width:720px}
.fd-swap{animation:fd-swap .5s var(--fd-ease) both}@keyframes fd-swap{from{opacity:0;transform:translateY(8px)}}

.fd-scene{display:grid;grid-template-columns:276px 1fr 500px;align-items:start;position:relative}
.fd-surface{display:flex;flex-direction:column;align-items:center;transition:opacity .6s var(--fd-ease),filter .6s var(--fd-ease)}
.fd-stage[data-focus="phone"] .fd-app-s{opacity:.45;filter:saturate(.5)}
.fd-stage[data-focus="app"] .fd-phone-s{opacity:.55;filter:saturate(.6)}
.fd-cap{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;font:700 14px/1 system-ui;color:#3C3F4C}
.fd-cap img{width:24px;height:24px}

/* phone */
.fd-phone{position:relative;width:276px;height:var(--fd-ph);border-radius:38px;background:#14181F;padding:9px;box-shadow:0 1px 2px #14151A14,0 28px 50px #14151A2E}
.fd-phone::before{content:'';position:absolute;top:14px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05080C;z-index:3}
.fd-screen{height:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;background:var(--fd-wall)}
.fd-wa-head{background:var(--fd-wa);color:#fff;padding:30px 14px 10px;display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px}
.fd-wa-head b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#F4D58D;color:#0B1F36}
.fd-wa-head small{display:block;font-weight:400;font-size:11px;opacity:.85}
.fd-compose{background:#F0F0F0;padding:8px 10px;display:flex;gap:8px;align-items:center}
.fd-compose div{flex:1;background:#fff;border-radius:18px;padding:7px 12px;font-size:12px;color:#8A9AA5}
.fd-compose b{width:30px;height:30px;border-radius:50%;background:#1FA855}
.fd-who{position:static;align-self:center;margin:0 0 14px;flex:none;background:#fff;border:1px solid var(--fd-line);border-radius:999px;padding:6px 13px;font:700 12px/1 system-ui;color:#3C3F4C;white-space:nowrap;z-index:4}

/* chat bubbles (WhatsApp-style) */
.fd-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px;overflow:hidden;background:var(--fd-wall)}
.fd-chat>*{will-change:transform}
.fd-cday{align-self:center;background:#FFFC;color:#54656F;font:600 12px/1 system-ui;padding:5px 10px;border-radius:8px}
.fd-msg{max-width:88%;padding:7px 9px 4px;border-radius:9px;background:#fff;font-size:13.5px;line-height:1.4;color:#111B21;white-space:pre-line;box-shadow:0 1px 1px #0002}
.fd-msg.me{align-self:flex-end;background:var(--fd-mine)}
.fd-msg .t{display:block;text-align:right;font:12px/1.6 system-ui;color:#667781;margin-top:2px}
.fd-msg.enter{animation:fd-pop .35s var(--fd-ease)}@keyframes fd-pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.fd-voice{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:#4A6A5B}
.fd-voice b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1FA855;color:#fff;font:700 12px/1 system-ui}
.fd-voice span{display:flex;align-items:center;gap:2px;height:22px;flex:1}.fd-voice span i{width:2px;background:#7FAE98;border-radius:2px}
.fd-voice small{font:12px system-ui}
.fd-vlabel{display:block;font:600 12px/1.4 system-ui;color:#6A7C75;margin-bottom:3px}
.fd-btns{display:flex;margin:6px -9px -4px;border-top:1px solid #0001}
.fd-btns span{flex:1;text-align:center;padding:7px 4px;color:#0A7A62;font-weight:600;font-size:13px}.fd-btns span+span{border-left:1px solid #0001}
.fd-btns span.hit{background:#D8F1E6;animation:fd-hit 1.1s ease-in-out infinite;border-radius:0 0 9px 0}@keyframes fd-hit{50%{background:#A5DEC4}}

/* the arrow between the two */
.fd-link{position:relative;height:var(--fd-ph);display:flex;align-items:center;justify-content:center}
.fd-link::before{content:'';position:absolute;left:14px;right:14px;top:50%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#C3C1BA 0 8px,transparent 8px 16px)}
.fd-link::after{content:'';position:absolute;right:10px;top:50%;margin-top:-8px;border-left:12px solid #C3C1BA;border-top:8px solid transparent;border-bottom:8px solid transparent}
.fd-sending .fd-link::before{background:repeating-linear-gradient(90deg,var(--fd-blue) 0 8px,transparent 8px 16px);animation:fd-march .5s linear infinite}
.fd-sending .fd-link::after{border-left-color:var(--fd-blue)}
@keyframes fd-march{to{background-position:16px 0}}
.fd-link span{position:relative;z-index:1;background:var(--fd-canvas);padding:4px 10px;border-radius:999px;font:700 12px/1 system-ui;color:#7B7E8C;letter-spacing:.03em;transform:translateY(-22px)}
.fd-packet{position:absolute;z-index:10;left:0;top:0;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--fd-green);color:#14603F;font:800 13px/1 system-ui;padding:9px 14px 9px 9px;border-radius:999px;box-shadow:0 8px 20px #17924A33;white-space:nowrap;pointer-events:none}
.fd-packet img{width:22px;height:22px}

/* the Tusker app window: as tall as the phone */
.fd-app{width:500px;height:var(--fd-ph);border-radius:16px;background:#fff;border:1px solid var(--fd-line);overflow:hidden;display:flex;flex-direction:column}
.fd-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F4F4F1;border-bottom:1px solid #ECEAE4;flex:none}
.fd-bar i{width:11px;height:11px;border-radius:50%}.fd-bar i:nth-child(1){background:#FF7B72}.fd-bar i:nth-child(2){background:#F5C451}.fd-bar i:nth-child(3){background:#5ECB78}
.fd-bar img{height:20px;margin-left:12px}
.fd-nav{margin-left:auto;display:flex;gap:6px}.fd-nav span{font:600 12px/1 system-ui;color:#7B7E8C;padding:6px 10px;border-radius:7px}.fd-nav .a{background:#fff;color:var(--fd-blue-d);box-shadow:0 1px 3px #0001}
.fd-body{flex:1;min-height:0;padding:18px 20px 18px;display:flex;flex-direction:column;gap:14px}
.fd-lead{border:1px solid var(--fd-line);border-radius:12px;padding:13px 16px;display:flex;flex-direction:column;gap:11px;background:#fff;transition:border-color .5s,box-shadow .5s,opacity .5s}
.fd-lead.empty{opacity:.55;border-style:dashed}
.fd-lead.flash{border-color:var(--fd-blue);box-shadow:0 0 0 4px #2864C524}
.fd-lead.won{border-color:#7DBE97}
.fd-lt{display:flex;align-items:center;gap:12px}.fd-lt i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--fd-tint);color:var(--fd-blue-d);font:700 18px/1 system-ui;font-style:normal}
.fd-lt h4{margin:0;font-size:19px;line-height:1.15}.fd-lt p{margin:2px 0 0;font-size:13px;color:var(--fd-mute)}.fd-lt small{margin-left:auto;font:700 12px system-ui;color:#7B7E8C;background:#F1F0EC;padding:5px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.fd-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,6),1fr)}
.fd-steps::before{content:'';position:absolute;left:calc(50% / var(--n,6));right:calc(50% / var(--n,6));top:8px;height:3px;background:#E6E4DE;border-radius:3px}
.fd-fill{position:absolute;left:calc(50% / var(--n,6));top:8px;height:3px;border-radius:3px;background:var(--fd-blue);width:0;transition:width .9s var(--fd-ease)}
.fd-st{position:relative;padding:0 3px;text-align:center;font:600 12px/1.25 system-ui;color:#8E919E;transition:color .4s}
.fd-st i{display:block;width:19px;height:19px;margin:0 auto 7px;border-radius:50%;background:#fff;border:3px solid #D5D3CC;position:relative;z-index:1;transition:background .4s,border-color .4s,box-shadow .4s}
.fd-st.d{color:#14603F}.fd-st.d i{background:var(--fd-green);border-color:var(--fd-green)}
.fd-st.n{color:var(--fd-blue-d);font-weight:800}.fd-st.n i{border-color:var(--fd-blue);box-shadow:0 0 0 5px #2864C524}
.fd-lead.won .fd-st.n{color:#14603F}.fd-lead.won .fd-st.n i{border-color:var(--fd-green);box-shadow:0 0 0 5px #17924A22}
.fd-nx{padding:11px 14px;border-radius:10px;background:#F6F6F3;border:1px solid var(--fd-line);font-size:14px}
.fd-nx small{display:block;font:700 12px/1.4 system-ui;letter-spacing:.07em;text-transform:uppercase;color:#7B7E8C}.fd-nx b{font-size:15px}
.fd-lead.won .fd-nx{border-color:#BFE3CE;background:#F1F9F4}
.fd-prize{display:none;font-weight:800;font-size:24px;line-height:1;color:var(--fd-green);font-variant-numeric:tabular-nums}.fd-lead.won .fd-prize{display:block}.fd-prize small{display:block;font:600 12px system-ui;color:#4A6A5B;margin-top:4px}
.fd-feed{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:12px;background:#F6F6F3;border:1px solid var(--fd-line);font-size:13px}
.fd-feed.empty{opacity:.7}
.fd-feed img{width:28px;height:28px;flex:none}
.fd-feed b{display:block;font-size:13px;color:var(--fd-ink)}.fd-feed span{color:var(--fd-mute)}
.fd-feed time{margin-left:auto;font:600 12px system-ui;color:#7B7E8C;white-space:nowrap}
.fd-feed.pop{animation:fd-popin .6s var(--fd-ease)}@keyframes fd-popin{from{transform:translateY(8px);opacity:0}}

/* controls */
.fd-ctl{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 0}
.fd-btn{border:1px solid var(--fd-line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;color:var(--fd-blue-d);white-space:nowrap}
.fd-btn:hover:not(:disabled){border-color:#B9C7F2}.fd-btn:disabled{opacity:.4;cursor:default}
.fd-play{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;border:0;background:var(--fd-blue);color:#fff;font-weight:700;font-size:15px;padding:9px 22px 9px 11px;border-radius:999px;transition:background .2s}
.fd-play:hover{background:#1C4DB5}
.fd-play i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff}
.fd-play i::before{content:'';border-left:9px solid var(--fd-blue);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.fd-play[data-state="playing"] i::before{width:9px;height:11px;border:0;border-left:3px solid var(--fd-blue);border-right:3px solid var(--fd-blue);margin:0}

.fd-go{position:absolute;inset:-6px;display:none;place-items:center;background:#F6F6F3EB;z-index:20;border-radius:16px}
.fd-go>div{text-align:center}
.fd-stage.fresh .fd-go{display:grid}.fd-go p{margin:14px 0 0;color:var(--fd-mute);font-size:15px}

/* Narrower than a laptop: no scaling; stack, one surface at a time. */
@media(max-width:1060px){
  .flow-demo{padding:44px 0 44px}
  .fd-scene{grid-template-columns:1fr;justify-items:center}
  .fd-link{display:none}
  .flow-demo .fd-day{font-size:14px;padding:7px 11px}
  .fd-app{width:100%;max-width:500px;height:auto;min-height:340px}
  .flow-demo{--fd-ph:440px}
  .fd-stage[data-focus="phone"] .fd-app-s,.fd-stage[data-focus="app"] .fd-phone-s{display:none}
}
@media(max-width:700px){
      .fd-line{font-size:22px}.fd-sub{font-size:15px}
  .fd-days{gap:2px}.flow-demo .fd-day{padding:7px 8px;font-size:0;gap:0}.flow-demo .fd-day.now{font-size:13px;gap:7px}
}
@media(prefers-reduced-motion:reduce){.fd-swap,.fd-msg.enter,.fd-feed.pop{animation:none}.fd-surface,.fd-lead,.fd-fill{transition:none}.fd-sending .fd-link::before{animation:none}.fd-btns span.hit{animation:none}}