html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  :root{
    --sky:#E7ECF6; --paper:#F8FAFD; --card:#fff;
    --ink:#0E1526; --slate:#4B5568; --mute:#616B7E; --faint:#6A7383;

    --line:rgba(14,21,38,.10); --line-soft:rgba(14,21,38,.06);
    --blue:#1E6BE8; --blue-deep:#0E4CB8; --blue-wash:rgba(30,107,232,.08);
    /* ── one surface system for the four Base360 screens ── */
    --surf:#F7F9FC; --rail:52px;
    --r-win:16px; --r-card:14px; --r-field:12px; --r-chip:10px;
    --sh-card:0 8px 20px -8px rgba(14,21,38,.10),0 2px 6px rgba(14,21,38,.05);
    --sh-float:0 18px 40px -16px rgba(14,21,38,.16),0 4px 12px rgba(14,21,38,.06);
    --spring:cubic-bezier(.22,1,.36,1);
    --over:cubic-bezier(.34,1.45,.5,1);
    --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
    --mono:ui-monospace,'SF Mono','Cascadia Code',Menlo,monospace;
    --sofia:url(img/sofia.webp);--maya:url(img/maya.webp);--lena:url(img/lena.webp);
  }
  *{box-sizing:border-box}
  /* anchor gliding is driven by the rail script, which yields to the browser;
     CSS smooth-scroll would give the settle engine a second animator to fight */
  html{scroll-behavior:auto}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
  p{margin:0}
  .ic{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .icf{fill:currentColor}

  /* the first tab stop: off-screen until it is focused, then a chip under
     the sticky nav, so a keyboard lands past the four nav links */
  .skiplink{
    position:fixed;top:74px;left:-9999px;z-index:100;
    padding:10px 16px;border-radius:var(--r-chip);
    background:var(--blue);color:#fff;text-decoration:none;
    font:600 .9rem/1 var(--sans);
    box-shadow:var(--sh-float);
  }
  .skiplink:focus{left:16px}

  .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}

  /* ── the rail ───────────────────────────────────────────── */
  .rail{position:relative}
  .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:block}

  .stageground{
    position:absolute;inset:-12% -6%;pointer-events:none;--jp:0;
    background:
      radial-gradient(46% 42% at calc(50% - 9% * var(--jp)) calc(50% + 4% * var(--jp)),
        rgba(30,107,232,.11),transparent 66%),
      radial-gradient(40% 38% at calc(16% + 7% * var(--jp)) calc(76% - 6% * var(--jp)),
        rgb(15 191 201 / calc(.02 + .085 * var(--jp))),transparent 68%),
      radial-gradient(40% 38% at calc(84% - 7% * var(--jp)) calc(80% - 8% * var(--jp)),
        rgb(226 61 123 / calc(.015 + .07 * var(--jp))),transparent 68%),
      linear-gradient(180deg,transparent 0%,
        rgb(223 230 250 / calc(.5 * var(--jp))) 62%,
        rgb(201 212 246 / calc(.62 * var(--jp))) 100%);
  }

  .statbg{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;will-change:opacity;
    background:
      radial-gradient(62% 58% at 50% 46%,rgba(255,255,255,.88),transparent 74%),
      radial-gradient(42% 36% at 14% 18%,rgba(15,191,201,.10),transparent 70%),
      radial-gradient(42% 36% at 86% 20%,rgba(226,61,123,.08),transparent 70%),
      linear-gradient(180deg,#C9D4F6 0%,#DFE6FA 34%,#F2F5FD 68%,#F2F5FD 100%)}

  .statbg::after{content:'';position:absolute;inset:0;opacity:.45;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .35 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat}

  .scene{
    position:absolute;left:50%;top:50%;width:1160px;transform:translate(-50%,-50%);
    display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;
    will-change:transform,opacity;transform-origin:50% 50%;
    z-index:2;
  }

  @media (min-width:901px){ .scene{left:calc(50% + 62px)} }
  .scene .copy{text-align:right;justify-self:end}
  .stepdots{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:16px}
  .stepdots i{width:6px;height:6px;border-radius:100px;background:rgba(14,76,184,.26)}
  .stepdots i.on{width:20px;background:rgba(14,76,184,.26)}

  .stepdots span{margin-left:6px;padding:5px 13px 4px;border-radius:100px;
    background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0) 72%),
      linear-gradient(135deg,rgba(15,191,201,.09) 0%,rgba(30,107,232,.16) 50%,rgba(226,61,123,.09) 100%);font-family:'Roboto',var(--sans);font-size:.72rem;
    letter-spacing:.005em;line-height:1.2;color:var(--blue-deep);font-weight:500}

  .copy h3{font-family:'Roboto',var(--sans);font-weight:500;font-size:22px;line-height:28px;
    letter-spacing:0;margin-bottom:10px}
  .copy p{font-family:'Roboto',var(--sans);font-weight:400;font-size:17px;line-height:1.5;
    letter-spacing:0;color:var(--slate)}
  .copy em{font-style:normal;color:var(--ink);font-weight:600}
  .screen{position:relative;border-radius:35px;overflow:hidden;background:#fff;height:562px;display:flex;flex-direction:column}
  .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:24px;background:#0d1220;border-radius:14px;z-index:9}
  .sbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 4px;font-size:.7rem;font-weight:700;flex:none}
  .sbar .r{display:flex;gap:4px}
  .sbar svg{width:14px;height:14px}
  .sbar.dark{color:#fff}

  /* ── scene 1 · tiktok ───────────────────────────────────── */
  .tt{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b0d12}
  .tt-vid{position:absolute;inset:0}
  .tt-vid::before{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(60% 42% at 70% 22%,rgba(255,228,196,.5),transparent 70%),
      radial-gradient(52% 40% at 24% 34%,rgba(158,183,232,.42),transparent 70%),
      linear-gradient(168deg,#39424f,#171d28 58%,#0d1119);
  }
  .tt-vid::after{
    content:'';position:absolute;left:14%;right:14%;top:16%;height:34%;border-radius:14px;
    background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.05));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
    filter:blur(.3px);
  }
  .tt-top{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:22px;
    padding:2px 16px 10px;color:rgba(255,255,255,.66);font-weight:600;font-size:.86rem}
  .tt-top .on{color:#fff;position:relative}
  .tt-top .on::after{content:'';position:absolute;left:18%;right:18%;bottom:-6px;height:2.5px;background:#fff;border-radius:2px}
  .tt-top .sr{position:absolute;right:16px;color:#fff;display:flex}
  .tt-top .sr svg{width:17px;height:17px}
  .tt-top .lv{position:absolute;left:16px;color:#fff;display:flex}
  .tt-top .lv svg{width:16px;height:16px}
  .tt-fill{flex:1;position:relative;z-index:2}

  .sheet{
    position:relative;z-index:6;margin-top:auto;background:#fff;border-radius:18px 18px 0 0;
    box-shadow:0 -14px 34px rgba(0,0,0,.26);display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .78s var(--spring);
  }
  .on-1 .sheet{transform:translateY(0)}
  .sheet-h{position:relative;text-align:center;font-weight:700;font-size:.82rem;padding:8px 16px;
    border-bottom:1px solid var(--line-soft);color:var(--ink)}
  .sheet-h .x{position:absolute;right:14px;top:10px;color:var(--mute)}
  .sheet-h .x svg{width:15px;height:15px}
  .sheet-l{padding:11px 15px 2px;display:flex;flex-direction:column;gap:11px}

  .cm{position:relative;overflow:hidden;display:flex;gap:9px;align-items:flex-start;padding:7px;margin:-7px;border-radius:12px;
    opacity:0;transform:translateY(8px);transition:opacity .5s var(--spring),transform .5s var(--over),background .5s var(--spring),box-shadow .5s var(--spring)}
  .cm.drop{transform:translateY(-18px)}
  .cm.in{opacity:1;transform:none}
  .cm .av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:.68rem;font-weight:700}
  .av-j{background:url(img/jpg-26ffaa5a.jpg) center/cover}
  .av-c{background:url(img/webp-81632889.webp) center/cover}
  .av-m{background:url(img/webp-675a6089.webp) center/cover}
  .av-b{background:url(img/webp-81632889.webp) center/cover}
  .cm .bd{flex:1;min-width:0}
  .cm .nm{font-size:.72rem;color:var(--mute);font-weight:600;margin-bottom:2px}
  .cm .nm b{color:var(--blue);font-weight:700}
  .cm .tx{font-size:.86rem;color:var(--ink);line-height:1.34}
  .cm .mt{display:flex;gap:10px;align-items:center;margin-top:4px;font-size:.7rem;color:var(--mute);white-space:nowrap}
  .cm .lk{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mute);font-size:.64rem;padding-top:2px}
  .cm .lk svg{width:16px;height:16px}
  .cm .lk svg.dk{width:14px;height:14px;margin-top:5px;opacity:.85}
  .emrow{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 0;font-size:.92rem;line-height:1;flex:none}
  .hbar{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;width:96px;height:4px;border-radius:3px;background:rgba(13,18,32,.85);z-index:9}
  .duo .hbar{width:74px;bottom:6px}
  .cm.hot{background:var(--blue-wash);box-shadow:inset 0 0 0 1px rgba(30,107,232,.24)}
  .cm .flag{font-family:'Roboto',var(--sans);font-size:.62rem;letter-spacing:.005em;font-weight:500;
    color:var(--blue-deep);padding:2px 8px 1px;border-radius:100px;
    background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0) 72%),
    linear-gradient(135deg,rgba(15,191,201,.09) 0%,rgba(30,107,232,.16) 50%,rgba(226,61,123,.09) 100%);
    opacity:0;transform:translateX(-4px);transition:opacity .45s var(--spring),transform .45s var(--spring)}
  .cm.flagged .flag{opacity:1;transform:none}

  .reply{margin:2px 0 0 35px;padding-left:12px;border-left:2px solid rgba(30,107,232,.28);
    opacity:0;transform:translateY(6px);transition:opacity .5s var(--spring),transform .5s var(--over);
    max-height:0;overflow:hidden}
  .reply.in{opacity:1;transform:none;max-height:220px}
  .reply .caret{display:inline-block;width:1.5px;height:.9em;background:var(--blue);margin-left:2px;
    vertical-align:-1px;animation:blink .85s step-end infinite}
  .rep-mt{opacity:0;transition:opacity .5s var(--spring)}
  .rep-mt.in{opacity:1}

  .tt-in{display:flex;align-items:center;gap:9px;padding:9px 13px 13px;border-top:1px solid var(--line-soft);
    background:#fff;position:relative;z-index:7}
  .tt-in .av{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:.62rem;font-weight:700}
  .tt-in .fld{position:relative;flex:1;min-height:32px;border-radius:100px;background:#F1F2F4;display:flex;align-items:center;
    padding:6px 13px;color:var(--mute);font-size:.78rem;line-height:1.3;transition:background .4s var(--spring)}
  .tt-in .fld.live{background:var(--blue-wash);color:var(--ink)}
  .tt-in .fld .fics{margin-left:auto;display:inline-flex;align-items:center;gap:9px;color:var(--mute)}
  .tt-in .fld .fics b{font-weight:500;font-size:.9rem;font-family:-apple-system,system-ui,sans-serif}
  .tt-in .fld .fics svg{width:15px;height:15px}
  .tt-in .fld .caret{display:inline-block;width:1.5px;height:.92em;background:var(--blue);margin-left:2px;
    vertical-align:-2px;animation:caret 1s steps(1) infinite}
  @keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
  .tt-in .send{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    background:#EDEFF3;color:var(--faint);transition:background .4s var(--spring),color .4s var(--spring),transform .4s var(--over)}
  .tt-in .send.live{background:var(--blue);color:#fff}
  .tt-in .send.fire{transform:scale(.86)}
  .tt-in .send svg{width:14px;height:14px}

  @property --ga { syntax:'<angle>'; initial-value:0deg; inherits:false; }
  .popwrap{position:relative}
  #s1 .popwrap{margin-top:100px}
  @keyframes popspin{to{--ga:360deg}}
  .cm::before{
    content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:2;
    background:linear-gradient(105deg,transparent 32%,rgba(143,185,255,.42) 50%,transparent 68%);
    transform:translateX(-130%);
  }
  .cm.hot::before{animation:sweep .9s ease .1s forwards}
  .cm::after{
    content:'';position:absolute;inset:0;border-radius:12px;padding:1.4px;
    background:conic-gradient(from var(--ga),#1E6BE8,#9CC5FF,#37D2FF,#9CC5FF,#1E6BE8);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .7s var(--spring);pointer-events:none;
  }
  .cm.scan{background:var(--blue-wash)}
  .cm.scan::after{opacity:1;animation:popspin 2s linear infinite}
  .cm.grow{transform:scale(1.07);z-index:5;
    box-shadow:0 16px 36px rgba(14,21,38,.15),0 4px 10px rgba(14,21,38,.07)}
  .tt-in .fld::before{
    content:'';position:absolute;inset:0;border-radius:100px;padding:1.4px;
    background:conic-gradient(from var(--ga),#1E6BE8,#9CC5FF,#37D2FF,#9CC5FF,#1E6BE8);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .6s var(--spring);pointer-events:none;
  }
  .tt-in .fld.ai::before{opacity:1;animation:popspin 2s linear infinite}

  .note{position:absolute;left:372px;bottom:128px;z-index:8;
    opacity:0;transform:translateY(6px);transition:opacity .6s var(--spring) .25s,transform .6s var(--over) .25s}
  .note.in{opacity:1;transform:none}

  .note .nl{display:inline-block;white-space:nowrap;padding:6px 14px 5px;border-radius:100px;
    background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0) 72%),
      linear-gradient(135deg,rgba(15,191,201,.09) 0%,rgba(30,107,232,.16) 50%,rgba(226,61,123,.09) 100%);font-family:'Roboto',var(--sans);font-size:.8rem;
    letter-spacing:.005em;line-height:1.2;color:var(--blue-deep);font-weight:500}
  .note .nt{white-space:nowrap;margin-top:9px;color:var(--slate);
    font-family:'Roboto',var(--sans);font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}
  .note .nt b{font-weight:700;color:var(--ink)}
  .kbnet{position:absolute;left:300px;bottom:210px;width:280px;height:400px;z-index:8;pointer-events:none}
  .kbw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .kbw.m{display:none}
  .kbw path{stroke:rgba(30,107,232,.22);stroke-width:1.4;stroke-linecap:round;fill:none;
    stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
  .kbnet.on .kbw path{stroke-dashoffset:0}
  .kbnet .dot{opacity:0;transition:opacity .6s var(--spring) .9s}
  .kbnet.on .dot{opacity:1}
  .kbn{position:absolute;left:185px;width:80px;text-align:center;
    opacity:0;transform:translateY(10px) scale(.85);transition:opacity .55s var(--spring),transform .55s var(--over)}
  .kbnet.on .kbn{opacity:1;transform:none}
  #kbn1{top:43px}#kbn2{top:168px;transition-delay:.12s}#kbn3{top:293px;transition-delay:.24s}
  .kbc{width:54px;height:54px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 12px 30px rgba(14,21,38,.10),inset 0 0 0 1px rgba(255,255,255,.75);
    color:var(--slate);transition:color .5s var(--spring),box-shadow .5s var(--spring)}
  .kbc svg{width:22px;height:22px}
  .kbn.lit .kbc{color:var(--blue);box-shadow:0 12px 30px rgba(30,107,232,.16),inset 0 0 0 1px rgba(255,255,255,.75),0 0 0 4px var(--blue-wash)}
  .kbl2{display:block;margin-top:7px;font-family:'Roboto',var(--sans);font-weight:500;font-size:11px;letter-spacing:.01em;color:var(--mute)}
  .flarrow{position:absolute;left:308px;bottom:118px;width:58px;height:46px;z-index:8}
  .flarrow path{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
  .flarrow path:last-child{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s ease .6s}
  .flarrow.in path{stroke-dashoffset:0}

  /* ── scene 1 · connect your socials — Figma 853:7464, 1:1 ─── */
  @media (min-width:901px){
    #s1{left:calc(50% + 22px);width:1204px;
      grid-template-columns:282px 825px;gap:97px;align-items:start}
    #s1 .copy{justify-self:start;padding-top:10px}
  }
  #s1 .copy{text-align:left}
  #s1 .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s1 .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  #s1 .kxdots i{background:#E6ECFF}

  #s1 .kxwin{background:none;box-shadow:none}
  #s1 .kxwin *{box-sizing:border-box}
  #s1 .kxwin p{margin:0}
  #s1 .kxwin img{display:block}

  @keyframes kf_889_22210_translate_0 { 0% { translate: 0px 0px; } 44.681% { animation-timing-function: ease-in-out; translate: 0px 0px; } 70.213% { animation-timing-function: ease-out; translate: 0px 150.21px; } 76.596% { translate: 0px 161px; } 100% { translate: 0px 161px; } }
  @keyframes kf_889_22230_translate_0 { 0% { translate: 0px 0px; } 44.681% { animation-timing-function: ease-in-out; translate: 0px 0px; } 70.213% { animation-timing-function: ease-out; translate: 0px -329.612px; } 76.596% { translate: 0px -353.288px; } 100% { translate: 0px -353.288px; } }
  @keyframes kf_889_22265_opacity_0 { 0% { opacity: 1; } 33.617% { animation-timing-function: ease-out; opacity: 1; } 37.021% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22275_opacity_0 { 0% { opacity: 0; } 34.468% { animation-timing-function: ease-out; opacity: 0; } 38.723% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes kf_889_22275_scale_0 { 0% { scale: 0.8 0.8; } 34.468% { animation-timing-function: ease-out; scale: 0.8 0.8; } 40% { scale: 1 1; } 100% { scale: 1 1; } }
  @keyframes kf_889_22281_opacity_0 { 0% { opacity: 1; } 33.617% { animation-timing-function: ease-out; opacity: 1; } 37.021% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22286_opacity_0 { 0% { opacity: 0; } 34.468% { animation-timing-function: ease-out; opacity: 0; } 38.723% { opacity: 1; } 100% { opacity: 1; } }

  @keyframes kf_889_22535_opacity_0 { 0% { opacity: 0; } 60.638% { animation-timing-function: ease-out; opacity: 0; } 67.021% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes kf_889_22535_translate_0 { 0% { translate: 0px 14px; } 60.638% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); translate: 0px 14px; } 68.511% { translate: 0px 0px; } 100% { translate: 0px 0px; } }
  @keyframes kf_889_22541_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 61.702% { animation-timing-function: step-end; opacity: 1; } 64.681% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22546_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 64.681% { animation-timing-function: step-end; opacity: 1; } 67.66% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22551_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 67.66% { animation-timing-function: step-end; opacity: 1; } 70.638% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22556_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 70.638% { animation-timing-function: step-end; opacity: 1; } 73.617% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22561_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 73.617% { animation-timing-function: step-end; opacity: 1; } 76.596% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22566_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 76.596% { animation-timing-function: step-end; opacity: 1; } 79.574% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22571_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 79.574% { animation-timing-function: step-end; opacity: 1; } 82.553% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22576_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 82.553% { animation-timing-function: step-end; opacity: 1; } 85.532% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22581_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 85.532% { animation-timing-function: step-end; opacity: 1; } 88.511% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes kf_889_22585_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 88.511% { opacity: 1; } 100% { opacity: 1; } }
  #s1.on-1 .n22210{animation:kf_889_22210_translate_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22230{animation:kf_889_22230_translate_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22265{animation:kf_889_22265_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22275{animation:kf_889_22275_opacity_0 4.7s linear, kf_889_22275_scale_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22281{animation:kf_889_22281_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22286{animation:kf_889_22286_opacity_0 4.7s linear;animation-iteration-count:infinite}

  #s1.on-1 .n22535{animation:kf_889_22535_opacity_0 4.7s linear, kf_889_22535_translate_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22541{animation:kf_889_22541_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22546{animation:kf_889_22546_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22551{animation:kf_889_22551_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22556{animation:kf_889_22556_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22561{animation:kf_889_22561_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22566{animation:kf_889_22566_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22571{animation:kf_889_22571_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22576{animation:kf_889_22576_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22581{animation:kf_889_22581_opacity_0 4.7s linear;animation-iteration-count:infinite}
  #s1.on-1 .n22585{animation:kf_889_22585_opacity_0 4.7s linear;animation-iteration-count:infinite}


  /* ── scene 2 · upload knowledgebase — Figma 810:33090, 1:1 ── */

  @media (min-width:901px){
    #s2{left:calc(50% + 22px);width:1205px;
      grid-template-columns:282px 825px;gap:98px;align-items:start}
    #s2 .copy{justify-self:start;padding-top:10px}
  }
  #s2 .copy{text-align:left}
  #s2 .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s2 .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  .kxkick{display:flex;align-items:center;gap:16px;margin-bottom:8px}
  .kxkick .kxh{padding:8px 12px 8px 0;font-family:'Roboto',var(--sans);font-weight:500;
    font-size:14px;line-height:13.82px;letter-spacing:.058px;color:#6C80BE;white-space:nowrap}
  .kxdots{display:flex;align-items:center;gap:4px}
  .kxdots i{width:8px;height:8px;border-radius:51px;background:#D1DDFF}
  .kxdots i.lg{width:22px}

  /* ══ one radius language across the seven windows ═════════════════════════ */

  /* ══ the windows are shown whole ══════════════════════════════════════ */

  .kxwin{position:relative;width:825px;height:486px;background:#fff;border-radius:16px;overflow:hidden;
    font-family:'Inter',var(--sans);text-align:left;
    box-shadow:0 0 0 1px rgba(14,21,38,.05),0 8px 22px rgba(14,21,38,.07),0 40px 80px rgba(14,21,38,.16)}
  .kxbar{position:absolute;left:0;top:0;width:825px;height:52px;background:#F9FAFF;border-bottom:1px solid #557EE1}
  .kxbar i{position:absolute;top:22px;width:12px;height:12px;border-radius:6px}
  .kxbar i:nth-child(1){left:27px;background:#FF2D55}
  .kxbar i:nth-child(2){left:47px;background:#FC0}
  .kxbar i:nth-child(3){left:67px;background:#34C759}

  .kxside{position:absolute;left:0;top:52px;width:143px;height:434px;background:#fff;
    border-right:.5px solid #E6ECEC;padding:12px 8px;display:flex;flex-direction:column;
    justify-content:space-between;align-items:flex-end;translate:-200px 0}
  .kxsgrp{position:relative;display:flex;flex-direction:column;gap:4px;width:127px}
  .kxsk{height:20px;padding:4px 8px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}
  .kxsk span{display:flex;align-items:center;gap:4px}
  .kxsk i{width:5px;height:5px;border-radius:6px;background:#B3B3B3;flex:none}
  .kxsk b{width:27px;height:5px;border-radius:6px;background:#B3B3B3}
  .kxkb{display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:127px}
  .kxkb-b{display:flex;align-items:center;justify-content:space-between;height:20px;
    padding:4px 8px;border-radius:12px;background:#fff;width:100%}
  .kxkb-b span{display:flex;align-items:center;gap:5px}
  .kxkb-b span img{width:10px;height:10px;display:block}
  .kxkb-b b{font:500 8px/1 'Inter',var(--sans);color:#495564;width:70px}
  .kxkb-b .kxch{width:12px;height:12px;display:block}
  .kxkb-b.on{background:#00484A}
  .kxkb-b.on b{color:#fff}

  .kxkbhov,.kxkbdrop,.kxkbopen{position:absolute;left:0;top:168px;opacity:0}
  .kxkbhov{background:#F9FAFB}
  .kxkbhov b{font-weight:600}
  .kxkb-sub{display:flex;flex-direction:column;gap:2px;width:97px}
  .kxkb-sub span{display:flex;align-items:center;height:20px;padding:4px 8px;border-radius:12px;
    font:500 8px/1 'Inter',var(--sans);color:#495564}
  .kxkb-sub span.on{background:#E6ECEC;color:#00484A}
  .kxuser{display:flex;align-items:center;gap:6px;padding:0 8px;width:127px}
  .kxav{width:20px;height:20px;border-radius:50%;background:#D9D9D9;flex:none}

  .jdav{background-image:url(img/png-ae15f300.png);background-size:cover;background-position:center}
  .kxun{display:flex;flex-direction:column;gap:2px;width:55px}
  .kxun b{font:500 8px/1 'Inter',var(--sans);color:#344153}
  .kxun i{height:5px;border-radius:41px;background:#A9ACB3;display:block}
  .kxel{width:4px;height:4px;margin-left:auto}

  .kxmain{position:absolute;left:143px;top:52px;width:682px;height:434px;background:#fff;overflow:hidden}
  .kxtop{position:absolute;left:0;top:0;width:682px;height:22px;background:#fff;opacity:0;translate:0 6px}
  .kxtop span{position:absolute;top:7px;font:500 7px/1 'Inter',var(--sans);color:#6B7281;white-space:nowrap}
  .kxtop .tl{left:16px}
  .kxtop .hp{left:640px}
  .kxtop img{position:absolute;left:660px;top:7px;width:8px;height:8px}
  .kxtop::after{content:'';position:absolute;left:0;top:21px;width:682px;height:1px;background:#E9EDEE}
  .kxbody{position:absolute;left:0;top:22px;width:682px;height:412px;background:#FBFBFC;overflow:hidden}
  .kxh1{position:absolute;left:16px;top:14px;font:600 13px/1 'Inter',var(--sans);color:#212936;opacity:0;translate:0 10px}
  .kxsub{position:absolute;left:16px;top:33px;font:500 7.5px/1 'Inter',var(--sans);color:#6B7281;white-space:nowrap;opacity:0;translate:0 10px}
  .kxsearch{position:absolute;left:587px;top:16px;display:flex;align-items:center;gap:5px;
    padding:5px 8px;background:#fff;border:1px solid #E9EDEE;border-radius:10px;
    font:500 7.5px/1 'Inter',var(--sans);color:#6B7281;white-space:nowrap;opacity:0;translate:0 8px}
  .kxsearch img{width:8px;height:8px;display:block}
  .kxtabs{position:absolute;left:16px;top:52px;display:flex;gap:2px;padding:2px;border-radius:999px;
    background:#EFF1F3;opacity:0;translate:0 8px}
  .kxtab{position:relative;padding:4px 10px;border-radius:999px;font:500 7.5px/1 'Inter',var(--sans);
    color:#6B7281;white-space:nowrap}
  .kxtab.act{background:#fff;font-weight:600;color:#212936}

  .kxgrid{position:absolute;left:16px;top:82px;display:flex;flex-direction:column;gap:8px}
  .kxrow{display:flex;gap:8px}
  .kxcard{width:211px;padding:10px;background:#fff;border:1px solid #E9EDEE;border-radius:7px;
    display:flex;flex-direction:column;gap:6px;opacity:0;translate:0 12px}
  .kxtile{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex:none}
  .kxtile img{width:9px;height:9px;display:block}
  .kxct{display:flex;flex-direction:column;gap:2px}
  .kxct b{font:600 9px/1.2 'Inter',var(--sans);color:#212936;white-space:nowrap}
  .kxct small{font:500 7px/1.2 'Inter',var(--sans);color:#6B7281;white-space:nowrap}
  .kxview{background:#F1F2F4;border-radius:5px;padding:4px 0;text-align:center;
    font:500 7px/1 'Inter',var(--sans);color:#374151}

  #s2 .kxside{translate:0 0}
  #s2 .kxtop,#s2 .kxh1,#s2 .kxsub,#s2 .kxsearch,#s2 .kxtabs{opacity:1;translate:0 0}

  #s2 .kxcard{opacity:1;translate:0 0}

  /* ── the answer layer ───────────────────────────────────────────────── */

  .kxcard{position:relative}
  .kxring{position:absolute;inset:-1px;border-radius:7px;border:1.2px solid #1E6BE8;
    background:rgba(30,107,232,.055);opacity:0;pointer-events:none}
  .kxused{position:absolute;right:7px;top:7px;width:11px;height:11px;border-radius:50%;
    background:#1E6BE8;display:flex;align-items:center;justify-content:center;opacity:0}
  .kxused svg{width:7px;height:7px;display:block}

  .kxadd{position:absolute;left:485px;top:16px;display:flex;align-items:center;gap:4px;
    padding:5px 9px;background:#5070FE;border-radius:10px;
    font:500 7.5px/1 'Inter',var(--sans);color:#fff;white-space:nowrap}
  .kxadd i{position:relative;width:6px;height:6px;flex:none}
  .kxadd i::before,.kxadd i::after{content:'';position:absolute;background:#fff;border-radius:1px}
  .kxadd i::before{left:0;top:2.5px;width:6px;height:1px}
  .kxadd i::after{left:2.5px;top:0;width:1px;height:6px}

  /* ── the answer layer proper: routes, agent, conversation ── */

  #s2 .kxwin{overflow:visible}
  #s2 .kxclip{position:absolute;inset:0;border-radius:16px;overflow:hidden}
  .kxans{position:absolute;left:0;top:0;width:825px;height:486px;pointer-events:none}

  .kxflow{position:absolute;left:0;top:0;width:825px;height:486px;overflow:visible}
  .kxflow path{fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:100;stroke-dashoffset:100}

  .kxflow .halo{stroke:#fff;stroke-width:3.8;opacity:.92}
  .kxflow .wire{stroke:#8DB2F2;stroke-width:1.2}

  .kxpkt{position:absolute;width:4px;height:4px;border-radius:50%;background:#1E6BE8;
    box-shadow:0 0 0 2.5px rgba(30,107,232,.16);opacity:0}
  .kxpkt.p1{left:262px;top:242px}
  .kxpkt.p2{left:587px;top:294px}
  .kxpkt.p3{left:701px;top:240px}

  .kxnode{position:absolute;left:585px;top:336px;width:16px;height:16px;border-radius:50%;
    background:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px #fff,0 0 0 3.1px #1E6BE8,0 4px 12px rgba(30,107,232,.3);
    opacity:0;scale:.6}
  .kxnode svg{width:9px;height:9px;display:block}
  .kxnode::after{content:'';position:absolute;inset:0;border-radius:50%;
    border:1.2px solid #1E6BE8;opacity:0}

  .kxchat{position:absolute;left:597px;top:284px;width:280px;height:176px;background:#fff;
    border-radius:13px;
    box-shadow:0 0 0 1px rgba(14,21,38,.05),0 3px 8px rgba(14,21,38,.07),
      0 26px 54px rgba(14,21,38,.22);opacity:0;translate:0 12px}
  .kxchd{position:absolute;left:13px;top:13px;right:13px;display:flex;align-items:center;gap:6px;
    font:600 9.5px/1 'Inter',var(--sans);color:#212936;white-space:nowrap}
  .kxig{width:10px;height:10px;border-radius:3.5px;flex:none;
    background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7)}
  .kxst{position:relative;margin-left:auto;display:flex;align-items:center;
    height:14px;padding:0 7px;border-radius:999px;background:#EEF4FE;
    font:600 8.5px/1 'Inter',var(--sans);color:#1E6BE8}
  .kxst b{font-weight:600;white-space:nowrap}
  .kxst .s2{position:absolute;left:0;right:0;text-align:center;opacity:0}
  .kxb{position:absolute;max-width:214px;padding:8px 11px;border-radius:10px;
    font:500 10px/1.4 'Inter',var(--sans);opacity:0;translate:0 8px}
  .kxb.them{left:13px;top:36px;background:#F1F3F5;color:#212936;border-bottom-left-radius:3px}
  .kxb.us{right:13px;top:72px;background:#1E6BE8;color:#fff;border-bottom-right-radius:3px;
    text-align:left}
  .kxtyping{position:absolute;right:13px;top:72px;display:flex;align-items:center;gap:3.5px;
    padding:8px 11px;border-radius:10px;border-bottom-right-radius:3px;background:#1E6BE8;opacity:0}
  .kxtyping i{width:3.6px;height:3.6px;border-radius:50%;background:#fff;opacity:.5}
  .kxsrc{position:absolute;left:13px;right:13px;bottom:13px;display:flex;align-items:center;gap:6px;
    padding:5px 9px;border-radius:7px;background:#F7FAFF;border:1px solid #DEE9FD;
    font:600 8.5px/1 'Inter',var(--sans);color:#1E6BE8;white-space:nowrap;opacity:0}
  .kxsrc em{font-style:normal;font-weight:500;color:#6B7281}
  .kxsrc svg{width:9px;height:9px;display:block;flex:none}

  /* ── the 9.2s loop ── */
  #s2.on-2 .kxchat{animation:kxChat 9.2s linear infinite}
  #s2.on-2 .kxb.them{animation:kxThem 9.2s linear infinite}
  #s2.on-2 .kxnode{animation:kxNode 9.2s linear infinite}
  #s2.on-2 .kxnode::after{animation:kxPulse 9.2s linear infinite}
  #s2.on-2 .kxst{animation:kxStat 9.2s linear infinite}
  #s2.on-2 .kxst .s1{animation:kxS1 9.2s linear infinite}
  #s2.on-2 .kxst .s2{animation:kxS2 9.2s linear infinite}
  #s2.on-2 .w1 path{animation:kxWire1 9.2s linear infinite}
  #s2.on-2 .w2 path{animation:kxWire2 9.2s linear infinite}
  #s2.on-2 .w3 path{animation:kxWire3 9.2s linear infinite}
  #s2.on-2 .g1 .kxring{animation:kxRing1 9.2s linear infinite}
  #s2.on-2 .g3 .kxring{animation:kxRing3 9.2s linear infinite}
  #s2.on-2 .g5 .kxring{animation:kxRing5 9.2s linear infinite}
  #s2.on-2 .g1 .kxused{animation:kxUsed1 9.2s linear infinite}
  #s2.on-2 .g3 .kxused{animation:kxUsed3 9.2s linear infinite}
  #s2.on-2 .g5 .kxused{animation:kxUsed5 9.2s linear infinite}
  #s2.on-2 .kxpkt.p1{animation:kxPkt1 9.2s linear infinite}
  #s2.on-2 .kxpkt.p2{animation:kxPkt2 9.2s linear infinite}
  #s2.on-2 .kxpkt.p3{animation:kxPkt3 9.2s linear infinite}
  #s2.on-2 .kxtyping{animation:kxTyping 9.2s linear infinite}
  #s2.on-2 .kxtyping i:nth-child(1){animation:kxDot 1.05s ease-in-out infinite}
  #s2.on-2 .kxtyping i:nth-child(2){animation:kxDot 1.05s ease-in-out .14s infinite}
  #s2.on-2 .kxtyping i:nth-child(3){animation:kxDot 1.05s ease-in-out .28s infinite}
  #s2.on-2 .kxb.us{animation:kxReply 9.2s linear infinite}
  #s2.on-2 .kxsrc{animation:kxSrc 9.2s linear infinite}

  @keyframes kxChat{0%{opacity:0;translate:0 12px}5.978%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;translate:0 12px}13.587%{opacity:1;translate:0 0}96.739%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
  @keyframes kxThem{0%{opacity:0;translate:0 8px}9.239%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;translate:0 8px}15.761%{opacity:1;translate:0 0}96.739%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
  @keyframes kxNode{0%{opacity:0;scale:.6}14.674%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;scale:.6}19.022%{opacity:1;scale:1}96.739%{opacity:1;scale:1}100%{opacity:0;scale:1}}
  @keyframes kxPulse{0%{opacity:0;scale:1}49.457%{animation-timing-function:ease-out;opacity:.85;scale:1}55.978%{opacity:0;scale:2.1}100%{opacity:0;scale:2.1}}
  @keyframes kxStat{0%{opacity:0}16.848%{animation-timing-function:ease-out;opacity:0}21.196%{opacity:1}96.739%{opacity:1}100%{opacity:0}}
  @keyframes kxS1{0%{opacity:1}54.891%{animation-timing-function:step-end;opacity:1}55.109%{opacity:0}100%{opacity:0}}
  @keyframes kxS2{0%{opacity:0}54.891%{animation-timing-function:step-end;opacity:0}55.109%{opacity:1}100%{opacity:1}}
  @keyframes kxWire1{0%{stroke-dashoffset:100}19.022%{animation-timing-function:ease-in-out;stroke-dashoffset:100}30.978%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes kxWire2{0%{stroke-dashoffset:100}23.370%{animation-timing-function:ease-in-out;stroke-dashoffset:100}32.065%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes kxWire3{0%{stroke-dashoffset:100}21.196%{animation-timing-function:ease-in-out;stroke-dashoffset:100}30.978%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes kxRing1{0%{opacity:0}29.891%{animation-timing-function:ease-out;opacity:0}33.152%{opacity:1}96.739%{opacity:1}100%{opacity:0}}
  @keyframes kxRing3{0%{opacity:0}30.435%{animation-timing-function:ease-out;opacity:0}33.696%{opacity:1}96.739%{opacity:1}100%{opacity:0}}
  @keyframes kxRing5{0%{opacity:0}31.522%{animation-timing-function:ease-out;opacity:0}34.783%{opacity:1}96.739%{opacity:1}100%{opacity:0}}
  @keyframes kxUsed1{0%{opacity:0;scale:.4}80.435%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;scale:.4}84.130%{opacity:1;scale:1}96.739%{opacity:1;scale:1}100%{opacity:0;scale:1}}
  @keyframes kxUsed3{0%{opacity:0;scale:.4}81.522%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;scale:.4}85.217%{opacity:1;scale:1}96.739%{opacity:1;scale:1}100%{opacity:0;scale:1}}
  @keyframes kxUsed5{0%{opacity:0;scale:.4}82.609%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;scale:.4}86.304%{opacity:1;scale:1}96.739%{opacity:1;scale:1}100%{opacity:0;scale:1}}
  @keyframes kxPkt1{0%{opacity:0;translate:0 0}36.413%{opacity:0;translate:0 0}36.540%{translate:0 4px}37.500%{opacity:1}39.777%{translate:102px 4px}40.127%{translate:110px 12px}42.664%{translate:110px 92px}43.014%{translate:118px 100px}48.400%{opacity:1}49.457%{opacity:0;translate:321px 100px}100%{opacity:0;translate:321px 100px}}
  @keyframes kxPkt2{0%{opacity:0;translate:0 0}40.761%{opacity:0;translate:0 0}42.626%{opacity:1;translate:4px 4px}52.800%{opacity:1}53.804%{opacity:0;translate:4px 40px}100%{opacity:0;translate:4px 40px}}
  @keyframes kxPkt3{0%{opacity:0;translate:0 0}38.587%{opacity:0;translate:0 0}38.981%{opacity:1;translate:0 6px}45.664%{translate:-102px 6px}46.385%{translate:-110px 14px}50.600%{opacity:1}51.630%{opacity:0;translate:-110px 94px}100%{opacity:0;translate:-110px 94px}}
  @keyframes kxTyping{0%{opacity:0}55.435%{animation-timing-function:ease-out;opacity:0}57.065%{animation-timing-function:step-end;opacity:1}68.478%{opacity:0}100%{opacity:0}}
  @keyframes kxDot{0%{opacity:.45;translate:0 0}30%{opacity:1;translate:0 -1.6px}60%{opacity:.45;translate:0 0}100%{opacity:.45;translate:0 0}}
  @keyframes kxReply{0%{opacity:0;translate:0 8px}68.478%{animation-timing-function:cubic-bezier(.22,1,.36,1);opacity:0;translate:0 8px}77.174%{opacity:1;translate:0 0}96.739%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
  @keyframes kxSrc{0%{opacity:0}79.348%{animation-timing-function:ease-out;opacity:0}84.783%{opacity:1}96.739%{opacity:1}100%{opacity:0}}

  .flychip{position:absolute;z-index:12;white-space:nowrap;pointer-events:none;
    background:#fff;color:var(--blue);font-size:.74rem;font-weight:600;padding:5px 12px;border-radius:100px;
    box-shadow:0 12px 28px rgba(30,107,232,.22);
    transition:transform .7s var(--spring),opacity .7s var(--spring)}
  .flychip::before{
    content:'';position:absolute;inset:0;border-radius:100px;padding:1.5px;
    background:conic-gradient(from var(--ga),#1E6BE8,#9CC5FF,#37D2FF,#9CC5FF,#1E6BE8);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:popspin 1.8s linear infinite;pointer-events:none}

  .duo{position:relative;height:600px}
  .duo .screen{height:472px;border-radius:30px}
  .duo .notch{width:72px;height:20px}

  .ulbl,.slot .k,.cm-row .k,.cm-live,.fcard .ft span,.fcard .fb,
  .sale .st,.ring i,.crm2-note,.tl-w,.ar.hd,.lbl{
    font-family:'Roboto',var(--sans);font-weight:500;font-size:11px;line-height:1.4;
    letter-spacing:.01em;color:var(--mute);text-transform:none}

  .mac{
    position:absolute;right:0;top:0;width:656px;border-radius:var(--r-win);overflow:hidden;background:#fff;

    box-shadow:0 40px 80px rgba(14,21,38,.16),0 8px 22px rgba(14,21,38,.07);
    display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr;
  }
  .mac>.mac-bar{grid-column:1/-1}
  .mac-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#F5F7FA;border-bottom:1px solid var(--line-soft)}
  .mac-bar .d{width:10px;height:10px;border-radius:50%;background:#DFE3EA}
  .mac-bar .tab{margin-left:10px;display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r-chip);
    background:#fff;box-shadow:0 1px 3px rgba(14,21,38,.07);font-size:12px;font-weight:600;color:var(--slate)}
  .mac-bar .tab svg{width:12px;height:12px;color:var(--blue)}
  /* ── the rail ── */
  .side{background:var(--surf);padding:13px 0;display:flex;flex-direction:column;align-items:center;gap:5px}
  .side .bm{width:21px;height:21px;border-radius:7px;flex:none;margin-bottom:9px;
    background:linear-gradient(140deg,var(--blue),#37D2FF)}
  .side .si{width:30px;height:30px;border-radius:var(--r-chip);flex:none;
    display:flex;align-items:center;justify-content:center;color:var(--faint)}
  .side .si svg{width:17px;height:17px}
  .side .si.cur{background:var(--blue);color:#fff}

  .crm-top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
  .crm-top .av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:1rem}
  .crm-nm{font-size:1.06rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}
  .crm-src{font-size:.75rem;color:var(--mute);display:flex;align-items:center;gap:5px}
  .crm-src svg{width:11px;height:11px}
  .crm-src a{color:var(--blue);text-decoration:none;font-weight:600}
  .ring{margin-left:auto;position:relative;width:56px;height:56px;flex:none}
  .ring svg{width:56px;height:56px;transform:rotate(-90deg)}
  .ring .bgc{fill:none;stroke:#EDF0F5;stroke-width:5}
  .ring .fgc{fill:none;stroke:url(#ringgrad);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:154;stroke-dashoffset:154;transition:stroke-dashoffset .9s var(--spring)}
  .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
  .ring i{position:absolute;left:0;right:0;bottom:-15px;text-align:center;font-style:normal}

  .lbl{margin-bottom:9px}

  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}
  .fact{padding:11px 12px;border-radius:11px;background:#FAFBFD;box-shadow:inset 0 0 0 1px var(--line-soft);
    opacity:0;transform:translateY(9px);transition:opacity .55s var(--spring),transform .55s var(--over)}
  .fact.in{opacity:1;transform:none}
  .fact .k{font-size:.64rem;color:var(--mute);margin-bottom:3px}
  .fact .v{font-size:.85rem;font-weight:600;letter-spacing:-.01em}

  .chan{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap}
  .ch{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:100px;font-size:.74rem;
    background:#F5F6F9;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-soft)}
  .ch svg{width:12px;height:12px}
  .ch.on{background:var(--blue-wash);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(30,107,232,.26);font-weight:600}

  .tl{display:flex;flex-direction:column;gap:0}
  .tl-i{display:flex;gap:11px;align-items:flex-start;position:relative;padding-bottom:13px;
    opacity:0;transform:translateY(8px);transition:opacity .5s var(--spring),transform .5s var(--over)}
  .tl-i.in{opacity:1;transform:none}
  .tl-i:last-child{padding-bottom:0}
  .tl-i .pip{width:9px;height:9px;border-radius:50%;background:#DDE2EA;flex:none;margin-top:5px;position:relative;z-index:2}
  .tl-i.done .pip{background:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
  .tl-i::before{content:'';position:absolute;left:4px;top:12px;bottom:-2px;width:1px;background:var(--line-soft)}
  .tl-i:last-child::before{display:none}
  .tl-t{font-size:.79rem;color:var(--slate);line-height:1.35}
  .tl-t b{color:var(--ink);font-weight:600}
  .tl-w{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--faint);white-space:nowrap;padding-top:2px}

  /* ── scene 3 · voice ────────────────────────────────────── */
  .call{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#F7F9FD,#EDF1F8)}
  .c-tag{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;
    font-family:'Roboto',var(--sans);font-size:12px;letter-spacing:.01em;color:var(--blue-deep);font-weight:500}
  .c-tag i{width:6px;height:6px;border-radius:50%;background:var(--blue-deep);animation:blink 1.5s ease infinite}
  .c-nm{text-align:center;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-top:12px}

  .c-st{text-align:center;margin-top:5px;font-family:'Roboto',var(--sans);font-size:13px;color:var(--mute);
    letter-spacing:.01em;font-variant-numeric:tabular-nums}
  .c-avw{position:relative;width:92px;height:92px;margin:30px auto 0}
  .c-av{display:block;width:92px;height:92px;border-radius:50%;
    box-shadow:0 14px 34px rgba(14,21,38,.16),0 0 0 5px #fff}
  .c-avw::before,.c-avw::after{content:'';position:absolute;inset:-7px;border-radius:50%;
    border:1.5px solid rgba(30,107,232,.35);opacity:0}
  .calling .c-avw::before{animation:cring 1.8s ease-out infinite}
  .calling .c-avw::after{animation:cring 1.8s ease-out .9s infinite}
  @keyframes cring{0%{transform:scale(.88);opacity:.9}100%{transform:scale(1.55);opacity:0}}
  .wave{display:flex;gap:3px;align-items:center;justify-content:center;height:34px;margin-top:22px;padding:0 24px}
  .wave i{width:3px;height:30px;border-radius:2px;background:var(--blue);opacity:.8;
    transform:scaleY(.12);transition:transform .5s var(--spring)}
  .wave.on i{animation:wob var(--d) ease-in-out infinite alternate}
  @keyframes wob{from{transform:scaleY(.14)}to{transform:scaleY(var(--h))}}
  .c-cap{margin:auto 14px 12px;padding:11px 13px;border-radius:var(--r-card);background:rgba(255,255,255,.8);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:var(--sh-float);
    opacity:0;transform:translateY(10px);transition:opacity .55s var(--spring),transform .55s var(--over);min-height:76px}
  .c-cap.in{opacity:1;transform:none}
  .c-cap .cl{font-family:'Roboto',var(--sans);font-size:11px;font-weight:500;letter-spacing:.01em;
    color:var(--blue);margin-bottom:5px}
  .c-cap .ct{font-size:13px;line-height:1.45;color:var(--ink)}
  .c-cap .caret{display:inline-block;width:1.5px;height:.9em;background:var(--blue);margin-left:2px;
    vertical-align:-1px;animation:blink .85s step-end infinite}
  .c-ctl{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 0 20px}
  .c-ctl .cb{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
    color:var(--slate);box-shadow:var(--sh-card)}
  .c-ctl .cb svg{width:18px;height:18px}
  .c-ctl .cb.end{width:50px;height:50px;background:#E5605E;color:#fff;box-shadow:0 10px 24px rgba(229,96,94,.32)}
  .c-ctl .cb.end svg{transform:rotate(135deg)}

  .call .wave,.call .c-ctl{transition:opacity .6s var(--spring)}
  .call.pre .wave,.call.pre .c-ctl{opacity:0}

  .c-slide{position:absolute;left:16px;right:16px;bottom:18px;height:62px;border-radius:100px;
    background:rgba(255,255,255,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 12px 28px rgba(14,21,38,.10);
    opacity:0;pointer-events:none;transition:opacity .5s var(--spring)}
  .call.pre .c-slide{opacity:1}

  .cs-thumb{position:absolute;left:5px;top:5px;z-index:2;width:52px;height:52px;border-radius:50%;
    background:#34C759;color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px rgba(52,199,89,.38);transition:left .55s cubic-bezier(.4,0,.2,1)}
  .cs-thumb svg{width:21px;height:21px}
  .call.answer .cs-thumb{left:calc(100% - 57px)}
  .cs-txt{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
    padding-left:38px;font-size:.84rem;font-weight:500;letter-spacing:.01em;
    background:linear-gradient(90deg,#8892A4 35%,#0E1526 50%,#8892A4 65%) 0 0/200% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:csshine 2.4s linear infinite;
    transition:opacity .26s var(--spring),transform .4s var(--spring)}
  .call.answer .cs-txt{opacity:0;transform:translateX(14px)}
  @keyframes csshine{from{background-position:120% 0}to{background-position:-120% 0}}

  .s3net{left:296px;bottom:316px;width:340px;height:268px}

  .cmini{--rail:38px;position:absolute;left:96px;top:6px;width:284px;border-radius:var(--r-win);overflow:hidden;background:#fff;
    display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr;
    box-shadow:0 30px 60px rgba(14,21,38,.14),0 6px 18px rgba(14,21,38,.07);
    opacity:0;transform:translateY(12px) scale(.94);transform-origin:0 60%;
    transition:opacity .6s var(--spring),transform .6s var(--over)}
  .s3net.on .cmini{opacity:1;transform:none}
  .cmini>.mac-bar{grid-column:1/-1}
  .cmini .side{padding:10px 0;gap:3px}
  .cmini .side .bm{width:17px;height:17px;border-radius:6px;margin-bottom:6px}
  .cmini .side .si{width:26px;height:26px}
  .cmini .side .si svg{width:15px;height:15px}
  .cmini .mac-bar{padding:8px 11px}
  .cmini .mac-bar .d{width:8px;height:8px}
  .cmini .mac-bar .tab{margin-left:6px;padding:4px 10px;font-size:.66rem}
  .cm-bd{padding:12px 13px 12px}
  .cm-head{display:flex;align-items:center;gap:10px}
  .cm-av{width:34px;height:34px;border-radius:50%;flex:none}
  .cm-nm{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
  .cm-sub{font-size:12px;color:var(--mute);margin-top:1px}
  .cm-ring{margin-left:auto;position:relative;width:38px;height:38px;flex:none}
  .cm-ring svg{width:38px;height:38px;transform:rotate(-90deg)}
  .cm-ring .bgc{fill:none;stroke:#EDF0F5;stroke-width:4}
  .cm-ring .fgc{fill:none;stroke:url(#ringgrad);stroke-width:4;stroke-linecap:round;
    stroke-dasharray:97.4;stroke-dashoffset:7.8}
  .cm-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
  .cm-row{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:9px;padding:8px 11px;border-radius:var(--r-field);border:1.5px solid transparent;
    background:var(--surf);box-shadow:var(--sh-card);
    transition:background .5s var(--spring)}
  .cm-row .k{white-space:nowrap}
  .cm-row .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
  .cm-row.lit{background:var(--blue-wash)}
  .cm-row.lit::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 32%,rgba(143,185,255,.42) 50%,transparent 68%);
    transform:translateX(-130%);animation:sweep .9s ease .08s forwards}
  .cm-live{display:flex;align-items:center;gap:6px;margin-top:11px}
  .cm-live i{width:6px;height:6px;border-radius:50%;background:#34C759;
    animation:livepulse 2s ease-out infinite}
  @keyframes livepulse{from{box-shadow:0 0 0 0 rgba(52,199,89,.45)}to{box-shadow:0 0 0 7px rgba(52,199,89,0)}}

  #s3 .note{left:350px;bottom:250px}

  /* ── scene 3 · create your AI Agent — Figma 853:13213, 1:1 ── */
  @media (min-width:901px){
    #s3{left:calc(50% + 22px);width:1204px;
      grid-template-columns:312px 825px;gap:67px;align-items:start}
    #s3 .copy{justify-self:start;padding-top:10px}
  }
  #s3 .copy{text-align:left}
  #s3 .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s3 .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  #s3 .kxwin{font-family:'Inter',var(--sans)}
  #s3 .kxside{translate:none}

  .w3g5{position:relative;display:flex;flex-direction:column;gap:5px;width:100%}

  /* ── scene 3 · the tabbed builder shell ────────────────────── */

  #s3 .wftabs{position:absolute;left:99px;top:0;height:52px;display:flex;align-items:flex-end;gap:4px;z-index:3;padding-bottom:1px}
  #s3 .wftab{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
    position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;
    border-radius:10px 10px 0 0;color:#5A6474;font-family:'Inter',var(--sans);font-size:12.5px;
    font-weight:500;letter-spacing:.01em;transition:background .25s ease,color .25s ease}
  #s3 .wftab img{width:14px;height:14px;display:block;opacity:.72}
  #s3 .wftab:focus:not(:focus-visible){outline:none}
  #s3 .wftab:hover{background:rgba(30,107,232,.07)}

  #s3 .wftab.on{background:#fff;color:#101828;font-weight:600;
    box-shadow:inset 0 1px 0 #DFE6F1,inset 1px 0 0 #DFE6F1,inset -1px 0 0 #DFE6F1}
  #s3 .wfplus{width:26px;height:26px;margin-bottom:7px;margin-left:4px;display:grid;place-items:center;
    border-radius:7px;color:#8A93A6;font-size:16px;line-height:1}
  #s3 .wfview{position:absolute;left:0;top:52px;width:825px;height:434px;overflow:hidden;background:#fff}
  #s3 .wfv{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;pointer-events:none}
  #s3 .wfv.on{opacity:1}

  /* ── scene 3 · the workflow builder, drawn in the page ──────────
     Four screen recordings used to live here as 16.8 MB of mp4. The
     product they showed is a handful of cards on a canvas, so the page
     draws it instead: one shell, four scripted flows.               */
  .wfb{position:absolute;inset:0;background:#fff;font-family:'Inter',var(--sans,system-ui);
    color:#111827;overflow:hidden;--rail:55px;--hd:46px;--panel:263px}
  .wfb *{box-sizing:border-box}

  /* header ------------------------------------------------------- */
  .wfb .wfhd{position:absolute;left:0;top:0;right:0;height:var(--hd);background:#FAFAFA;
    border-bottom:1px solid #E5E7EB;z-index:6}
  .wfb .wfti{position:absolute;left:var(--rail);right:0;top:0;height:var(--hd);display:grid;
    place-items:center;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#111827}
  .wfb .wfsw{position:absolute;right:107px;top:0;height:var(--hd);display:flex;align-items:center;gap:9px;
    font-size:11.5px;font-weight:500;color:#6D737D}
  .wfb .wfsw i{width:28px;height:16px;border-radius:9px;background:#D6D7DE;position:relative;
    transition:background .3s ease}
  .wfb .wfsw i:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;
    background:#fff;transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
  .wfb.live .wfsw{color:#4F46E5}
  .wfb.live .wfsw i{background:#6366F1}
  .wfb.live .wfsw i:after{transform:translateX(12px)}
  .wfb .wfsave{position:absolute;right:30px;top:11px;width:54px;height:25px;border-radius:7px;
    background:#6366F1;color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;
    transition:transform .12s ease,filter .12s ease}
  .wfb .wfsave.hit{transform:scale(.95);filter:brightness(.9)}

  /* left rail ---------------------------------------------------- */
  .wfb .wfrail{position:absolute;left:0;top:0;bottom:0;width:var(--rail);background:#fff;
    border-right:1px solid #E5E7EB;z-index:7;display:flex;flex-direction:column;align-items:center;
    padding-top:15px}
  .wfb .wflogo{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-bottom:11px;
    background:radial-gradient(circle at 32% 26%,#8FB0FC,#3B6BF0 62%,#2450DC);
    box-shadow:0 1px 3px rgba(37,99,235,.32)}
  .wfb .wflogo svg{width:14px;height:14px;display:block}
  .wfb .wfdot{width:6px;height:6px;border-radius:50%;background:#D9DDE6;margin:9px 0}
  .wfb .wftile{width:28px;height:28px;border-radius:9px;background:#0F3F45;display:grid;place-items:center;
    margin:6px 0 12px}
  .wfb .wftile svg{width:16px;height:16px;stroke:#fff}
  .wfb .wfsep{width:22px;height:1px;background:#E4E7EC;margin:9px 0}
  .wfb .wfme{position:absolute;left:15.5px;bottom:12px;width:24px;height:24px;border-radius:50%;
    background:#EDEFF3 url(Avatar.png) center/cover no-repeat}

  /* canvas ------------------------------------------------------- */
  .wfb .wfcv{position:absolute;left:var(--rail);right:0;top:var(--hd);bottom:0;overflow:hidden;
    transition:right .34s cubic-bezier(.4,0,.2,1)}
  .wfb.panel .wfcv{right:var(--panel)}
  .wfb .wfgr{position:absolute;left:50%;top:14px;width:0;height:0;
    transition:transform 1.15s cubic-bezier(.34,.08,.2,1)}

  /* a node: badge, card, and the dashed run that reaches it ------- */
  .wfb .wfn{position:absolute;left:-164.5px;width:329px;opacity:0;transform:translateY(9px);
    transition:opacity .42s ease,transform .42s cubic-bezier(.2,.9,.3,1)}
  .wfb .wfn.in{opacity:1;transform:none}
  .wfb .wfn:before,.wfb .wfn:after,.wfb .wfcard:before{content:'';position:absolute;left:50%;opacity:0;
    transition:opacity .3s ease .1s}
  .wfb .wfn:before{top:-24.5px;height:50px;width:0;border-left:1.5px dashed #D1D5DB;transform:translateX(-.75px)}
  .wfb .wfn:after,.wfb .wfcard:before{width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;
    border:1.5px solid #D1D5DB;box-sizing:border-box}
  .wfb .wfn:after{top:-20px}            /* the dot under the card above */
  .wfb .wfcard:before{top:-10.5px}      /* the dot that meets this card */
  .wfb .wfn.link.in:before,.wfb .wfn.link.in:after,.wfb .wfn.link.in .wfcard:before{opacity:1}
  .wfb .wfnb{display:flex;width:max-content;align-items:center;gap:4px;margin-left:13px;height:20px;
    padding:0 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.01em;
    background:#E5E8F8;color:#6366F1}
  .wfb .wfnb svg{width:10px;height:10px}
  .wfb .wfnb.act{background:#FFE8D0;color:#B45309}
  .wfb .wfcard{margin-top:5.5px;height:55.5px;border-radius:10px;background:#fff;border:1px solid #E5E7EB;
    box-shadow:0 1px 2px rgba(16,24,40,.05),0 7px 16px -10px rgba(16,24,40,.28);position:relative;
    display:flex;align-items:center;padding:0 16px;gap:8px;transition:box-shadow .25s ease,border-color .25s ease}
  .wfb .wfn.sel .wfcard{border-color:#6366F1;box-shadow:0 0 0 1px #6366F1,0 7px 16px -10px rgba(99,102,241,.5)}
  .wfb .wfic{flex:none;width:26px;height:26px;border-radius:8px;background:#EFF6FF;display:grid;place-items:center}
  .wfb .wfic svg{width:14px;height:14px;stroke:#475569}
  .wfb .wftx{min-width:0;flex:1}
  .wfb .wftx b{display:block;font-size:12.5px;font-weight:600;line-height:15px;color:#111827;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wfb .wftx i{display:block;font-style:normal;font-size:10.5px;line-height:14px;color:#6B7280;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wfb .wfwarn{flex:none;width:13px;height:13px;opacity:0;transition:opacity .3s ease}
  .wfb .wfwarn svg{width:13px;height:13px;display:block}
  .wfb .wfn.warn .wfwarn{opacity:1}
  .wfb .wfkebab{flex:none;width:3px;height:13px;background:
      radial-gradient(circle,#98A2B3 1.2px,transparent 1.3px) 0 0/3px 4.4px repeat-y}

  /* the yes / no split under a condition -------------------------- */
  .wfb .wfsplit{position:absolute;left:-178.5px;width:357px;height:34px;opacity:0;transition:opacity .35s ease}
  .wfb .wfsplit.in{opacity:1}
  .wfb .wfsplit:before{content:'';position:absolute;left:0;right:0;top:13px;height:0;
    border-top:1.5px dashed #D1D5DB}
  .wfb .wfsplit:after{content:'';position:absolute;left:50%;top:0;width:0;height:13px;
    border-left:1.5px dashed #D1D5DB;transform:translateX(-.75px)}
  .wfb .wfsplit u,.wfb .wfsplit s{position:absolute;top:13px;width:0;height:21px;
    border-left:1.5px dashed #D1D5DB;text-decoration:none}
  .wfb .wfsplit u{left:0}.wfb .wfsplit s{right:0}
  .wfb .wfsplit em{position:absolute;top:16px;font-style:normal;font-size:9.5px;color:#9CA3AF}
  .wfb .wfsplit em.no{left:6px}.wfb .wfsplit em.yes{right:6px}

  /* the chat pill and the bottom toolbar --------------------------- */
  .wfb .wfpill{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);height:34px;padding:0 18px;
    display:flex;align-items:center;gap:7px;border-radius:19px;background:#fff;border:1px solid #C7D2FE;
    box-shadow:0 2px 10px -4px rgba(99,102,241,.4);font-size:12.5px;font-weight:600;color:#312E81;
    transition:opacity .3s ease,transform .18s ease;z-index:4}
  .wfb .wfpill svg{width:14px;height:14px}
  .wfb .wfpill.hit{transform:translateX(-50%) scale(.96)}
  .wfb.nopill .wfpill{opacity:0;pointer-events:none}
  .wfb .wftool{position:absolute;left:50%;bottom:14.5px;transform:translateX(-50%);width:377px;height:42px;
    display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-radius:12px;
    background:#fff;border:1px solid #D2D2D2;box-shadow:0 2px 12px -6px rgba(16,24,40,.35);z-index:4;
    transition:opacity .3s ease}
  .wfb .wftool span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
  .wfb .wftool span svg{width:15px;height:15px;stroke:#6B7280}
  .wfb .wftool span.on{background:#E5E8F8}
  .wfb .wftool span.on svg{stroke:#4C72E5}
  .wfb .wftool hr{width:1px;height:20px;border:0;background:#E8E7EB;margin:0}

  /* the right-hand inspector --------------------------------------- */
  .wfb .wfpn{position:absolute;right:0;top:var(--hd);bottom:0;width:var(--panel);background:#fff;
    border-left:1px solid #E5E7EB;padding:14px 15px;z-index:5;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1)}
  .wfb.panel .wfpn{transform:none}
  /* the face fills the panel and stays positioned, so .pnfoot below is anchored
     to it for the whole transition. Left in flow it would be a containing block
     only while the transform ran, and .pnfoot would snap to .wfpn on the last
     frame — the footer jumping into place instead of gliding there. */
  .wfb .wfpn .fade{position:absolute;left:15px;right:15px;top:14px;bottom:0;
    opacity:0;transform:translateY(5px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.2,.9,.3,1)}
  .wfb .wfpn .fade.go{opacity:1;transform:none}
  .wfb .pnh{display:flex;gap:8px;align-items:flex-start;margin-bottom:11px}
  .wfb .pnh svg{width:15px;height:15px;flex:none;margin-top:1px;stroke:#4F46E5}
  .wfb .pnh b{display:block;font-size:12.5px;font-weight:600;line-height:16px}
  .wfb .pnh i{display:block;font-style:normal;font-size:10.5px;color:#6B7280;margin-top:1px}
  .wfb .pnback{font-size:10.5px;color:#6B7280;margin-bottom:9px}
  .wfb .pnsearch{height:26px;border-radius:7px;border:1px solid #E5E7EB;display:flex;align-items:center;
    gap:6px;padding:0 8px;font-size:10.5px;color:#9CA3AF;margin-bottom:9px}
  .wfb .pnsearch svg{width:11px;height:11px;stroke:#9CA3AF}
  .wfb .pnrow{height:38px;border-radius:8px;border:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;
    padding:0 9px;margin-bottom:6px;transition:background .2s ease,border-color .2s ease}
  .wfb .pnrow.hot{border-color:#C7D2FE;background:#F5F7FF}
  .wfb .pnrow svg{width:13px;height:13px;flex:none;stroke:#475569}
  .wfb .pnrow b{display:block;font-size:10.5px;font-weight:600;line-height:13px}
  .wfb .pnrow i{display:block;font-style:normal;font-size:9.5px;color:#6B7280;line-height:12px}
  .wfb .pnskel{height:34px;border-radius:8px;background:#FAFAFB;display:flex;align-items:center;gap:8px;
    padding:0 9px;margin-bottom:6px}
  .wfb .pnskel:before{content:'';width:11px;height:11px;border-radius:50%;background:#E9EBF0;flex:none}
  .wfb .pnskel:after{content:'';height:6px;border-radius:3px;background:#E9EBF0;flex:1}
  .wfb .pnlab{font-size:10.5px;font-weight:500;color:#344054;margin:10px 0 4px}
  .wfb .pnlab em{font-style:normal;color:#E1483B}
  .wfb .pnf{height:29px;border-radius:7px;border:1px solid #E5E7EB;display:flex;align-items:center;
    padding:0 9px;font-size:10.5px;color:#111827;justify-content:space-between}
  .wfb .pnf svg{width:11px;height:11px;stroke:#6B7280}
  .wfb .pnarea{border-radius:7px;border:1px solid #E5E7EB;padding:7px 9px;font-size:10.5px;line-height:15px;
    color:#111827;min-height:46px;position:relative}
  .wfb .pnarea u{text-decoration:none;color:#2563EB}
  .wfb .pnarea s{position:absolute;right:8px;top:6px;text-decoration:none;color:#9CA3AF;font-size:10px}
  .wfb .pnchk{display:flex;gap:7px;align-items:flex-start;margin:10px 0 8px;font-size:10.5px;line-height:13.5px;
    color:#344054}
  .wfb .pnchk i{position:relative;flex:none;width:12px;height:12px;border-radius:3.5px;
    border:1.4px solid #C4CAD4;margin-top:1px;transition:background .2s ease,border-color .2s ease}
  .wfb .pnchk i:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath\
 d='M3.2 6.3 5 8.1 8.8 4.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'\
 stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    transform-origin:50% 50%;transform:scale(.4);opacity:0;
    transition:opacity .14s ease,transform .22s cubic-bezier(.3,1.5,.5,1)}
  .wfb .pnchk.on i{background:#6366F1;border-color:#6366F1}
  .wfb .pnchk.on i:after{opacity:1;transform:scale(1)}
  .wfb .pnbox{border-radius:8px;background:#FAFAFB;padding:9px;margin-top:8px}
  .wfb .pnbtn{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 9px;border-radius:7px;
    border:1px solid #E5E7EB;font-size:10.5px;font-weight:500;color:#344054;margin-top:9px;white-space:nowrap}
  .wfb .pnbtn svg{width:11px;height:11px;flex:none}
  .wfb .pnadd{font-size:10.5px;font-weight:500;color:#4F46E5;margin-top:7px}
  .wfb .pntog{display:flex;align-items:flex-start;gap:8px;margin-top:11px;border-radius:8px;padding:7px;
    transition:background .25s ease}
  .wfb .pntog.lit{background:#F5F7FF}
  .wfb .pntog div{flex:1}
  .wfb .pntog b{display:block;font-size:10.5px;font-weight:600}
  .wfb .pntog i{display:block;font-style:normal;font-size:9.5px;color:#6B7280;line-height:12.5px;margin-top:1px}
  .wfb .pntog u{flex:none;width:24px;height:14px;border-radius:8px;background:#D1D5DB;position:relative;
    text-decoration:none;transition:background .3s ease}
  .wfb .pntog u:after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;
    background:#fff;transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
  .wfb .pntog.on u{background:#6366F1}
  .wfb .pntog.on u:after{transform:translateX(10px)}
  .wfb .pnfoot{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:flex-end;gap:8px}
  .wfb .pnfoot b,.wfb .pnfoot u{height:25px;padding:0 12px;border-radius:7px;font-size:11px;font-weight:600;
    display:grid;place-items:center;text-decoration:none}
  .wfb .pnfoot b{border:1px solid #FBD5D2;color:#E1483B}
  .wfb .pnfoot u{background:#6366F1;color:#fff}

  /* the AI assistant sheet ----------------------------------------- */
  .wfb .wfai{position:absolute;left:var(--rail);right:0;top:var(--hd);bottom:0;background:#fff;z-index:8;
    opacity:0;pointer-events:none;transition:opacity .35s ease}
  .wfb.ai .wfai{opacity:1}
  .wfb .aihd{height:46px;display:flex;align-items:center;gap:9px;padding:0 18px;
    box-shadow:0 1px 0 rgba(16,24,40,.05)}
  .wfb .aihd .sq{width:22px;height:22px;border-radius:7px;border:1px solid #E5E7EB;display:grid;place-items:center}
  .wfb .aihd .sq svg{color:#6366F1}
  .wfb .aihd svg{width:12px;height:12px}
  .wfb .aihd b{display:block;font-size:11.5px;font-weight:600;line-height:14px}
  .wfb .aihd i{display:block;font-style:normal;font-size:10px;color:#6B7280}
  .wfb .aihd .x{margin-left:auto;font-size:13px;color:#9CA3AF;line-height:1}
  .wfb .aibig{position:absolute;left:0;right:0;top:105px;text-align:center}
  .wfb .aibig .sq{width:46px;height:46px;border-radius:13px;border:1px solid #E5E7EB;display:grid;
    place-items:center;margin:0 auto 26px;box-shadow:0 2px 10px -6px rgba(16,24,40,.3)}
  .wfb .aibig .sq svg{width:22px;height:22px;color:#6366F1}
  .wfb .aibig h4{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#111827}
  .wfb .aibig p{margin:0;font-size:11px;line-height:16px;color:#6B7280}
  .wfb .aiin{position:absolute;left:50%;transform:translateX(-50%);bottom:56px;width:567px;height:58px;
    border-radius:13px;border:1.6px solid #C7D2FE;box-shadow:0 0 0 4px rgba(99,102,241,.09);
    display:flex;align-items:center;padding:0 12px 0 20px;gap:10px;background:#fff}
  .wfb .aiin .txt{flex:1;font-size:12.5px;color:#111827;white-space:nowrap;overflow:hidden}
  .wfb .aiin .txt:after{content:'';display:inline-block;width:1px;height:13px;background:#111827;
    vertical-align:-2px;margin-left:1px;animation:wfbcaret 1s steps(1,end) infinite}
  .wfb.sent .aiin .txt:after{display:none}
  @keyframes wfbcaret{0%,50%{opacity:1}51%,100%{opacity:0}}
  .wfb .aiin .cur{font-size:11px;color:#9CA3AF}
  .wfb .aiin .send{width:40px;height:36px;border-radius:9px;background:#6366F1;display:grid;place-items:center;
    transition:transform .12s ease}
  .wfb .aiin .send svg{width:15px;height:15px;stroke:#fff}
  .wfb .aiin .send.hit{transform:scale(.93)}

  /* "Building your workflow…" -------------------------------------- */
  .wfb .wfbuild{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);font-size:12px;
    font-weight:500;z-index:5;opacity:0;transition:opacity .3s ease;
    background:linear-gradient(100deg,#B6BCC9 20%,#111827 44%,#B6BCC9 68%) 0 0/240% 100% text;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:wfbshimmer 1.5s linear infinite}
  .wfb.building .wfbuild{opacity:1}
  .wfb.building .wftool{opacity:.35}
  @keyframes wfbshimmer{to{background-position:-240% 0}}

  @media (prefers-reduced-motion:reduce){
    .wfb *{animation:none!important;transition-duration:.001ms!important}
  }

  /* ── scene 4 · first message received — Figma 889:17365, 1:1 ── */
  @media (min-width:901px){
    #s45{left:calc(50% + 22px);width:1204px;
      grid-template-columns:282px 825px;gap:97px;align-items:start}
    #s45 .copy{justify-self:start;padding-top:10px}
  }
  #s45 .copy{text-align:left}
  #s45 .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s45 .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  #s45 .kxwin{font-family:'Inter',var(--sans)}
  #s45 .kxwin *{box-sizing:border-box}
  #s45 .kxwin p{margin:0}
  #s45 .kxwin img{display:block}

  @keyframes kf_889_17391_opacity_0 {0% { opacity: 0; }7.658% { animation-timing-function: ease-out; opacity: 0; }13.514% { opacity: 1; }52.252% { animation-timing-function: ease-in; opacity: 1; }56.307% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17392_opacity_0 {0% { animation-timing-function: ease-out; opacity: 0; }4.054% { opacity: 1; }52.252% { animation-timing-function: ease-in; opacity: 1; }56.307% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17392_translate_0 {0% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 10px; }6.306% { translate: 0px 0px; }52.252% { animation-timing-function: ease-in; translate: 0px 0px; }56.756% { translate: -20px 0px; }100% { translate: -20px 0px; } }
  @keyframes kf_889_17398_opacity_0 {0% { opacity: 0; }0.451% { animation-timing-function: ease-out; opacity: 0; }5.856% { opacity: 1; }53.154% { animation-timing-function: ease-in; opacity: 1; }57.207% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17398_translate_0 {0% { translate: 0px 10px; }0.451% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 10px; }8.109% { translate: 0px 0px; }53.154% { animation-timing-function: ease-in; translate: 0px 0px; }57.657% { translate: -20px 0px; }100% { translate: -20px 0px; } }
  @keyframes kf_889_17711_opacity_0 {0% { opacity: 1; }52.252% { animation-timing-function: ease-in; opacity: 1; }56.307% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17711_translate_0 {0% { translate: 0px 0px; }52.252% { animation-timing-function: ease-in; translate: 0px 0px; }56.756% { translate: -20px 0px; }100% { translate: -20px 0px; } }
  @keyframes kf_889_17712_opacity_0 {0% { opacity: 0; }2.252% { animation-timing-function: ease-out; opacity: 0; }8.109% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_17712_background-color_0 {0% { animation-timing-function: step-end; background-color: #FFF; }14.189% { animation-timing-function: ease-out; background-color: #FFF; }16.892% { animation-timing-function: step-end; background-color: #F9FAFB; }24.099% { animation-timing-function: ease-out; background-color: #F9FAFB; }26.802% { background-color: #FFF; }100% { background-color: #FFF; } }
  @keyframes kf_889_17712_translate_0 {0% { translate: 0px 12px; }2.252% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }10.36% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_17712_scale_0 {0% { scale: 1 1; }14.189% { animation-timing-function: ease-out; scale: 1 1; }17.793% { scale: 1.02 1.02; }23.649% { animation-timing-function: ease-out; scale: 1.02 1.02; }26.802% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_17757_opacity_0 {0% { opacity: 0; }4.054% { animation-timing-function: ease-out; opacity: 0; }9.91% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_17757_background-color_0 {0% { animation-timing-function: step-end; background-color: #FFF; }23.198% { animation-timing-function: ease-out; background-color: #FFF; }25.9% { animation-timing-function: step-end; background-color: #F9FAFB; }33.109% { animation-timing-function: ease-out; background-color: #F9FAFB; }35.811% { animation-timing-function: step-end; background-color: #FFF; }41.216% { animation-timing-function: ease-out; background-color: #FFF; }43.919% { background-color: #F9FAFB; }100% { background-color: #F9FAFB; } }
  @keyframes kf_889_17757_translate_0 {0% { translate: 0px 12px; }4.054% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }12.163% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_17757_scale_0 {0% { scale: 1 1; }23.198% { animation-timing-function: ease-out; scale: 1 1; }26.802% { scale: 1.02 1.02; }32.657% { animation-timing-function: ease-out; scale: 1.02 1.02; }35.811% { scale: 1 1; }41.216% { animation-timing-function: ease-out; scale: 1 1; }44.82% { animation-timing-function: ease-in; scale: 1.02 1.02; }48.198% { animation-timing-function: ease-out; scale: 0.995 0.995; }51.351% { scale: 1.02 1.02; }100% { scale: 1.02 1.02; } }
  @keyframes kf_889_17802_opacity_0 {0% { opacity: 0; }5.856% { animation-timing-function: ease-out; opacity: 0; }11.712% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_17802_background-color_0 {0% { animation-timing-function: step-end; background-color: #FFF; }32.208% { animation-timing-function: ease-out; background-color: #FFF; }34.91% { animation-timing-function: step-end; background-color: #F9FAFB; }42.117% { animation-timing-function: ease-out; background-color: #F9FAFB; }44.82% { background-color: #FFF; }100% { background-color: #FFF; } }
  @keyframes kf_889_17802_translate_0 {0% { translate: 0px 12px; }5.856% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }13.964% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_17802_scale_0 {0% { scale: 1 1; }32.208% { animation-timing-function: ease-out; scale: 1 1; }35.811% { scale: 1.02 1.02; }41.667% { animation-timing-function: ease-out; scale: 1.02 1.02; }44.82% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_17847_opacity_0 {0% { opacity: 0; }7.658% { animation-timing-function: ease-out; opacity: 0; }13.514% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_17847_translate_0 {0% { translate: 0px 12px; }7.658% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }15.765% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_17892_translate_0 {0% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_17952_opacity_0 {0% { opacity: 1; }55.856% { animation-timing-function: step-end; opacity: 1; }56.081% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17953_opacity_0 {0% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17954_opacity_0 {0% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_17954_scale_0 {0% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_17955_opacity_0 {0% { opacity: 0; }55.856% { animation-timing-function: step-end; opacity: 0; }56.081% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18004_translate_0 {0% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18069_opacity_0 {0% { animation-timing-function: step-end; opacity: 0; }54.73% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18069_translate_0 {0% { translate: 26px 0px; }54.73% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 26px 0px; }65.315% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18070_opacity_0 {0% { opacity: 0; }55.856% { animation-timing-function: ease-out; opacity: 0; }61.261% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18070_translate_0 {0% { translate: 0px 12px; }55.856% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }64.865% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18079_opacity_0 {0% { opacity: 0; }57.432% { animation-timing-function: ease-out; opacity: 0; }62.838% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18079_translate_0 {0% { translate: 0px 12px; }57.432% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }66.442% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18111_opacity_0 {0% { opacity: 0; }61.261% { animation-timing-function: ease-out; opacity: 0; }66.667% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18111_translate_0 {0% { translate: 0px 12px; }61.261% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }70.271% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18174_opacity_0 {0% { opacity: 0; }59.46% { animation-timing-function: ease-out; opacity: 0; }64.865% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18174_translate_0 {0% { translate: 0px 12px; }59.46% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }68.468% { translate: 0px 0px; }100% { translate: 0px 0px; } }

  #s4.on-4 .n17391{animation:kf_889_17391_opacity_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17392{animation:kf_889_17392_opacity_0 4.44s linear, kf_889_17392_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17398{animation:kf_889_17398_opacity_0 4.44s linear, kf_889_17398_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17711{animation:kf_889_17711_opacity_0 4.44s linear, kf_889_17711_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17712{animation:kf_889_17712_opacity_0 4.44s linear, kf_889_17712_background-color_0 4.44s linear, kf_889_17712_translate_0 4.44s linear, kf_889_17712_scale_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17757{animation:kf_889_17757_opacity_0 4.44s linear, kf_889_17757_background-color_0 4.44s linear, kf_889_17757_translate_0 4.44s linear, kf_889_17757_scale_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17802{animation:kf_889_17802_opacity_0 4.44s linear, kf_889_17802_background-color_0 4.44s linear, kf_889_17802_translate_0 4.44s linear, kf_889_17802_scale_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17847{animation:kf_889_17847_opacity_0 4.44s linear, kf_889_17847_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17892{animation:kf_889_17892_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17952{animation:kf_889_17952_opacity_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17953{animation:kf_889_17953_opacity_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17954{animation:kf_889_17954_opacity_0 4.44s linear, kf_889_17954_scale_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n17955{animation:kf_889_17955_opacity_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n18004{animation:kf_889_18004_translate_0 4.44s linear;animation-iteration-count:infinite}

  #s4.on-4 .n18069{animation:kf_889_18069_opacity_0 4.44s linear, kf_889_18069_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n18070{animation:kf_889_18070_opacity_0 4.44s linear, kf_889_18070_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n18079{animation:kf_889_18079_opacity_0 4.44s linear, kf_889_18079_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n18111{animation:kf_889_18111_opacity_0 4.44s linear, kf_889_18111_translate_0 4.44s linear;animation-iteration-count:infinite}
  #s4.on-4 .n18174{animation:kf_889_18174_opacity_0 4.44s linear, kf_889_18174_translate_0 4.44s linear;animation-iteration-count:infinite}

  /* ── scenes 4/5 share a standalone window wrapper ───────── */
  .macwrap{position:relative;width:fit-content}
  .macwrap .mac{position:relative;right:auto;top:auto}

  #s4 .note{left:14px;top:380px;bottom:auto}
  #s5 .note{left:14px;top:calc(100% + 20px);bottom:auto}

  /* ── scene 4 · marketing flow ───────────────────────────── */
  .flow{position:relative;padding:24px 26px 26px;display:flex;flex-direction:column;align-items:center;width:604px}
  .fnode{position:relative;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s var(--spring),transform .5s var(--over)}
  .fnode.in{opacity:1;transform:none}

  .fnode::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
    background:conic-gradient(from var(--ga),#1E6BE8,#9CC5FF,#37D2FF,#9CC5FF,#1E6BE8);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .7s var(--spring);pointer-events:none}
  .fnode.ai::after{opacity:1;animation:popspin 2s linear infinite}
  .fwait.ai,.fcard.ai{background:var(--blue-wash)}
  .fpill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;
    background:var(--blue-wash);color:var(--blue);font-size:13px;font-weight:600}
  .fpill svg{width:13px;height:13px}
  .fpill.goal{background:#fff;color:var(--ink);
    box-shadow:inset 0 0 0 1.5px rgba(35,169,79,.34),0 10px 24px rgba(35,169,79,.12)}
  .fpill.goal svg{color:#1D9B4E}
  @keyframes fgoalbeat{0%,100%{transform:none}34%{transform:scale(1.13)}64%{transform:scale(.985)}}
  @keyframes fgoalring{0%{opacity:0;transform:scale(.94)}28%{opacity:.5;transform:scale(1.07)}
    100%{opacity:0;transform:scale(1.34)}}
  .fpill.goal::before{content:'';position:absolute;inset:-3px;border-radius:inherit;
    box-shadow:0 0 0 2px rgba(35,169,79,.55);opacity:0;pointer-events:none}
  .fnode.fpill.goal.in{animation:fgoalbeat .84s var(--over) .62s 2 forwards}
  .fnode.fpill.goal.in::before{animation:fgoalring .84s var(--spring) .62s 2 forwards}
  .fwait{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;
    background:var(--surf);color:var(--slate);font-size:12px}
  .fwait svg{width:12px;height:12px;color:var(--mute)}
  .fc{width:2px;height:24px;border-radius:2px;background:rgba(30,107,232,.30);
    transform:scaleY(0);transform-origin:top;transition:transform .5s var(--spring)}
  .fc.on{transform:scaleY(1)}
  .fcard{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-card);
    background:var(--surf);box-shadow:var(--sh-card);width:340px}
  .fcard.sm{width:auto;flex:1;min-width:0}

  .fcard .fic{width:30px;height:30px;border-radius:var(--r-chip);background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none}
  .fcard .fic svg{width:15px;height:15px}
  .fcard .ft{flex:1;min-width:0}
  .fcard .ft b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fcard .ft span{display:block;margin-top:2px}
  .fcard .fb{margin-left:auto;flex:none;transition:color .4s var(--spring)}
  .fcard .fb.ok{color:var(--blue);font-weight:700}
  .fcard::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
    background:linear-gradient(105deg,transparent 32%,rgba(143,185,255,.42) 50%,transparent 68%);
    transform:translateX(-130%)}
  .fcard.hit::before{animation:sweep .9s ease .05s forwards}
  .fbr{width:100%;height:26px;display:block;overflow:visible}
  .fbr path{stroke:rgba(30,107,232,.30);stroke-width:1.6;fill:none;
    stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
  .fbr.on path{stroke-dashoffset:0}
  .fbrow{display:flex;gap:12px;width:100%}
  .tok{position:absolute;width:20px;height:20px;border-radius:50%;z-index:12;opacity:0;
    box-shadow:0 6px 14px rgba(14,21,38,.25),0 0 0 2px #fff;
    transition:top .75s var(--spring),left .75s var(--spring),opacity .4s var(--spring)}

  .duo.rev .mac{right:auto;left:0;width:604px}
  .duo.rev .flow{width:552px}
  .lockv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    background:radial-gradient(90% 60% at 78% 10%,rgba(158,183,232,.5),transparent 70%),
               radial-gradient(80% 55% at 18% 32%,rgba(199,210,254,.55),transparent 72%),
               linear-gradient(176deg,#EEF3FC,#E3EAF8)}
  .lk-time{margin-top:52px;font-size:2.5rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
  .lk-date{font-size:.7rem;font-weight:600;color:var(--slate)}
  #lkdate{display:inline-block;transition:opacity .45s var(--spring),transform .45s var(--spring)}
  #lkdate.flip{opacity:0;transform:translateY(-6px)}
  .mn{position:absolute;left:9px;right:9px;top:150px;border-radius:15px;padding:10px 12px 11px;
    background:rgba(255,255,255,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 30px rgba(14,21,38,.12);
    opacity:0;transform:translateY(-12px) scale(.96);
    transition:opacity .5s var(--spring),transform .55s var(--over)}
  .mn.in{opacity:1;transform:none}
  .mn .mh{display:flex;align-items:center;gap:6px;font-size:.62rem;color:var(--slate);margin-bottom:5px}
  .mn .mh .mt,.mh2 .mt{margin-left:auto;color:var(--mute)}
  .mn .mic{width:16px;height:16px;border-radius:5px;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center}
  .mn .mic svg{width:10px;height:10px}
  .mn b{display:block;font-size:.73rem;font-weight:600;line-height:1.3;color:var(--ink)}
  .mn p{margin:2px 0 0;font-size:.68rem;line-height:1.35;color:var(--slate)}
  .mailv{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;z-index:5;
    font-family:'Roboto',var(--sans);transform:translateY(103%);transition:transform .7s var(--spring)}
  .mailv.in{transform:none}
  .icf{fill:currentColor;stroke:none}
  .gm-bar{display:flex;align-items:center;padding:33px 14px 8px 13px;color:#444746}
  .gm-bar>svg{width:15px;height:15px}
  .gm-acts{margin-left:auto;display:flex;align-items:center;gap:15px}
  .gm-acts svg{width:14px;height:14px}
  .gm-sub{display:flex;align-items:flex-start;gap:10px;padding:10px 14px 2px 16px;
    font-size:.85rem;font-weight:500;line-height:1.35;color:#1f1f1f}
  .gm-sub .st{margin-left:auto;flex:none;color:#444746;margin-top:2px}
  .gm-sub .st svg{width:13px;height:13px}
  .gm-from{display:flex;align-items:center;gap:9px;padding:11px 12px 10px 16px}
  .gm-av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--lena) center/cover}
  .gm-nm{font-size:.71rem;font-weight:500;color:#1f1f1f;display:flex;align-items:baseline;gap:7px}
  .gm-nm .gm-t{font-size:.58rem;font-weight:400;color:#5f6368}
  .gm-to{font-size:.62rem;color:#5f6368;display:flex;align-items:center;gap:2px;margin-top:1px}
  .gm-to svg{width:9px;height:9px}
  .gm-facts{margin-left:auto;display:flex;align-items:center;gap:13px;color:#444746}
  .gm-facts svg{width:13px;height:13px}
  .gm-foot{margin-top:auto;display:flex;gap:9px;padding:0 14px 16px}
  .gm-foot span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:33px;
    border:1px solid #c4c7c5;border-radius:100px;font-size:.66rem;font-weight:500;color:#444746}
  .gm-foot svg{width:12px;height:12px}
  .mv-bd{padding:8px 16px 14px;font-size:.71rem;line-height:1.5;color:#1f1f1f}
  .mv-bd>p{margin:0 0 11px}
  .mv-q{border-left:2px solid #DFE3EA;padding:1px 0 1px 10px;margin:0 0 10px}
  .mv-q span{display:block;font-size:.7rem;font-style:italic;color:var(--mute)}
  .mv-q b{display:block;font-size:.72rem;font-weight:400;color:#222A3A;margin-top:2px}
  .mv-cta{position:relative;margin-top:13px;display:inline-flex;align-items:center;padding:0 18px;height:35px;
    border-radius:11px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:600;
    transition:transform .2s var(--spring),filter .2s ease}
  .mv-cta.press{transform:scale(.94);filter:brightness(.86)}
  .tapdot{position:absolute;left:57%;top:54%;width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,.5);
    box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 3px 10px rgba(14,21,38,.28);
    transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;z-index:9}
  .tapdot.go{animation:tapgo .9s ease forwards}
  @keyframes tapgo{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
    22%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
  .mbanner{position:absolute;left:8px;right:8px;top:34px;z-index:8;display:flex;gap:9px;align-items:flex-start;
    border-radius:15px;padding:10px 12px;
    background:rgba(255,255,255,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 16px 34px rgba(14,21,38,.16);
    min-height:82px;transform:translateY(-140%);transition:transform .6s var(--over)}
  .mbanner.in{transform:none}
  .mbic{width:26px;height:26px;border-radius:8px;background:#34C759;color:#fff;flex:none;
    display:flex;align-items:center;justify-content:center;margin-top:1px}
  .mbic svg{width:14px;height:14px}
  .mbanner>div{flex:1;min-width:0}
  .mh2{display:flex;font-size:.62rem;color:var(--slate)}
  .mbanner b{display:block;font-size:.71rem;font-weight:600;margin-top:2px;color:var(--ink)}
  .mbanner p{margin:1px 0 0;font-size:.66rem;color:var(--slate);line-height:1.35}

  /* ── scene 5f · follow up the client — Figma 889:18233, 1:1 ──── */

  @keyframes kf_889_18272_opacity_0 {0% { animation-timing-function: ease-out; opacity: 0; }1.772% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18272_translate_0 {0% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 14.4px; }4.05% { translate: 0px 0px; }100% { translate: 0px 0px; } }
@keyframes kf_889_18278_opacity_0 {0% { opacity: 0; }1.899% { animation-timing-function: ease-out; opacity: 0; }3.671% { opacity: 1; }100% { opacity: 1; } }
@keyframes kf_889_18278_translate_0 {0% { translate: 0px 14.4px; }1.899% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 14.4px; }5.949% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18591_translate_0 {0% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18651_opacity_0 {0% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18652_opacity_0 {0% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18653_opacity_0 {0% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18653_scale_0 {0% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_18654_opacity_0 {0% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18703_translate_0 {0% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18767_opacity_0 {0% { opacity: 0; }3.797% { animation-timing-function: ease-out; opacity: 0; }5.316% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18767_translate_0 {0% { translate: 0px 15px; }3.797% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }7.849% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18771_opacity_0 {0% { opacity: 0; }8.861% { animation-timing-function: ease-out; opacity: 0; }10.38% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18771_translate_0 {0% { translate: 0px 15px; }8.861% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }12.911% { translate: 0px 0px; }88.354% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 0px; }94.051% { translate: 0px -80px; }100% { translate: 0px -80px; } }
  @keyframes kf_889_18774_opacity_0 {0% { opacity: 0; }9.874% { animation-timing-function: ease-out; opacity: 0; }11.393% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18774_translate_0 {0% { translate: 0px 15px; }9.874% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }13.924% { translate: 0px 0px; }89.24% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 0px; }94.937% { translate: 0px -80px; }100% { translate: 0px -80px; } }
  @keyframes kf_889_18777_opacity_0 {0% { opacity: 0; }5.063% { animation-timing-function: ease-out; opacity: 0; }6.583% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18777_translate_0 {0% { translate: 0px 15px; }5.063% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }9.114% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18781_opacity_0 {0% { opacity: 0; }8.355% { animation-timing-function: ease-out; opacity: 0; }9.874% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18781_translate_0 {0% { translate: 0px 15px; }8.355% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }12.405% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18784_opacity_0 {0% { opacity: 0; }9.367% { animation-timing-function: ease-out; opacity: 0; }10.886% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18784_translate_0 {0% { translate: 0px 15px; }9.367% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }13.418% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18787_opacity_0 {0% { opacity: 0; }6.33% { animation-timing-function: ease-out; opacity: 0; }7.849% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18787_translate_0 {0% { translate: 0px 15px; }6.33% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }10.38% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18791_opacity_0 {0% { opacity: 0; }8.861% { animation-timing-function: ease-out; opacity: 0; }10.38% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18791_translate_0 {0% { translate: 0px 15px; }8.861% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }12.911% { translate: 0px 0px; }88.354% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 0px; }94.304% { translate: 0px 80px; }100% { translate: 0px 80px; } }
  @keyframes kf_889_18794_opacity_0 {0% { opacity: 0; }7.849% { animation-timing-function: ease-out; opacity: 0; }9.367% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18794_translate_0 {0% { translate: 0px 15px; }7.849% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 15px; }11.899% { translate: 0px 0px; }87.089% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 0px; }93.417% { translate: 516.25px 0px; }100% { translate: 516.25px 0px; } }
  @keyframes kf_889_18802_opacity_0 {0% { opacity: 0; }19.241% { animation-timing-function: ease-out; opacity: 0; }20.254% { opacity: 0.12; }25.949% { animation-timing-function: ease-out; opacity: 0.12; }27.215% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18804_opacity_0 {0% { opacity: 0; }82.026% { animation-timing-function: ease-out; opacity: 0; }83.545% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18804_scale_0 {0% { scale: 0.94 0.94; }82.026% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.94 0.94; }85.823% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_18807_opacity_0 {0% { opacity: 0; }21.013% { animation-timing-function: ease-out; opacity: 0; }22.785% { opacity: 1; }41.772% { animation-timing-function: ease-in; opacity: 1; }44.304% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18807_scale_0 {0% { scale: 0.94 0.94; }21.013% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.94 0.94; }24.81% { scale: 1 1; }41.772% { animation-timing-function: ease-in; scale: 1 1; }44.304% { scale: 0.97 0.97; }100% { scale: 0.97 0.97; } }
  @keyframes kf_889_18810_opacity_0 {0% { opacity: 0; }31.899% { animation-timing-function: ease-out; opacity: 0; }33.165% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18812_opacity_0 {0% { opacity: 0; }31.899% { animation-timing-function: ease-out; opacity: 0; }33.165% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18817_scale_0 {0% { scale: 1 1; }39.747% { animation-timing-function: ease-in; scale: 1 1; }40.633% { animation-timing-function: ease-out; scale: 0.97 0.97; }41.772% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_18820_opacity_0 {0% { opacity: 0; }39.24% { animation-timing-function: ease-out; opacity: 0; }40.253% { opacity: 0.12; }100% { opacity: 0.12; } }
  @keyframes kf_889_18821_opacity_0 {0% { opacity: 0; }44.937% { animation-timing-function: ease-out; opacity: 0; }46.836% { opacity: 1; }80.253% { animation-timing-function: ease-in; opacity: 1; }84.304% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18821_translate_0 {0% { translate: 240px 0px; }44.937% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 240px 0px; }50% { translate: 0px 0px; }80.253% { animation-timing-function: ease-in; translate: 0px 0px; }85.57% { translate: 240px 0px; }100% { translate: 240px 0px; } }
  @keyframes kf_889_18824_opacity_0 {0% { opacity: 0; }50.633% { animation-timing-function: ease-out; opacity: 0; }51.266% { animation-timing-function: ease-in; opacity: 0.5; }58.228% { animation-timing-function: ease-out; opacity: 0; }58.861% { animation-timing-function: ease-in; opacity: 0.5; }65.822% { animation-timing-function: ease-out; opacity: 0; }66.455% { animation-timing-function: ease-in; opacity: 0.5; }73.418% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18824_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-out; scale: 1 1; }58.228% { animation-timing-function: step-end; scale: 1.6 1.6; }58.355% { animation-timing-function: ease-out; scale: 1 1; }65.822% { animation-timing-function: step-end; scale: 1.6 1.6; }65.949% { animation-timing-function: ease-out; scale: 1 1; }73.418% { scale: 1.6 1.6; }100% { scale: 1.6 1.6; } }
  @keyframes kf_889_18826_opacity_0 {0% { animation-timing-function: ease-out; opacity: 0.25; }50% { animation-timing-function: ease-in; opacity: 1; }53.038% { animation-timing-function: ease-out; opacity: 0.25; }56.075% { animation-timing-function: ease-in; opacity: 1; }59.114% { animation-timing-function: ease-out; opacity: 0.25; }62.152% { animation-timing-function: ease-in; opacity: 1; }65.19% { animation-timing-function: ease-out; opacity: 0.25; }68.227% { animation-timing-function: ease-in; opacity: 1; }71.266% { opacity: 0.25; }75.949% { animation-timing-function: ease-in; opacity: 0.25; }79.24% { opacity: 0.12; }100% { opacity: 0.12; } }
  @keyframes kf_889_18827_opacity_0 {0% { opacity: 0.25; }50% { animation-timing-function: ease-out; opacity: 0.25; }52.025% { animation-timing-function: ease-in; opacity: 1; }55.063% { animation-timing-function: ease-out; opacity: 0.25; }58.102% { animation-timing-function: ease-in; opacity: 1; }61.139% { animation-timing-function: ease-out; opacity: 0.25; }64.177% { animation-timing-function: ease-in; opacity: 1; }67.215% { animation-timing-function: ease-out; opacity: 0.25; }70.254% { animation-timing-function: ease-in; opacity: 1; }73.291% { opacity: 0.25; }75.949% { animation-timing-function: ease-in; opacity: 0.25; }79.24% { opacity: 0.12; }100% { opacity: 0.12; } }
  @keyframes kf_889_18828_opacity_0 {0% { opacity: 0.25; }50% { animation-timing-function: ease-out; opacity: 0.25; }54.05% { animation-timing-function: ease-in; opacity: 1; }57.089% { animation-timing-function: ease-out; opacity: 0.25; }60.127% { animation-timing-function: ease-in; opacity: 1; }63.164% { animation-timing-function: ease-out; opacity: 0.25; }66.202% { animation-timing-function: ease-in; opacity: 1; }69.241% { animation-timing-function: ease-out; opacity: 0.25; }72.279% { animation-timing-function: ease-in; opacity: 1; }75.316% { opacity: 0.25; }75.949% { animation-timing-function: ease-in; opacity: 0.25; }79.24% { opacity: 0.12; }100% { opacity: 0.12; } }
  @keyframes kf_889_18833_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18833_scale_0 {0% { animation-timing-function: ease-in-out; scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 0.5 0.5; }53.164% { animation-timing-function: ease-in-out; scale: 0.962 0.962; }55.696% { animation-timing-function: ease-in-out; scale: 1.116 1.116; }58.228% { animation-timing-function: ease-in-out; scale: 0.859 0.859; }60.76% { animation-timing-function: ease-in-out; scale: 0.638 0.638; }63.291% { animation-timing-function: ease-in-out; scale: 1.043 1.043; }65.822% { animation-timing-function: ease-in-out; scale: 1.085 1.085; }68.354% { animation-timing-function: ease-in-out; scale: 0.737 0.737; }70.886% { animation-timing-function: ease-in-out; scale: 0.769 0.769; }73.418% { animation-timing-function: ease-out; scale: 1.096 1.096; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18834_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18834_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }51.266% { animation-timing-function: ease-in-out; scale: 1.115 1.115; }53.797% { animation-timing-function: ease-in-out; scale: 0.969 0.969; }56.33% { animation-timing-function: ease-in-out; scale: 0.51 0.51; }58.861% { animation-timing-function: ease-in-out; scale: 0.955 0.955; }61.393% { animation-timing-function: ease-in-out; scale: 1.117 1.117; }63.924% { animation-timing-function: ease-in-out; scale: 0.867 0.867; }66.455% { animation-timing-function: ease-in-out; scale: 0.628 0.628; }68.988% { animation-timing-function: ease-in-out; scale: 1.038 1.038; }71.519% { animation-timing-function: ease-out; scale: 1.088 1.088; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18835_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18835_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }51.899% { animation-timing-function: ease-in-out; scale: 0.658 0.658; }54.43% { animation-timing-function: ease-in-out; scale: 0.841 0.841; }56.963% { animation-timing-function: ease-in-out; scale: 1.113 1.113; }59.494% { animation-timing-function: ease-in-out; scale: 0.976 0.976; }62.025% { animation-timing-function: ease-in-out; scale: 0.521 0.521; }64.557% { animation-timing-function: ease-in-out; scale: 0.948 0.948; }67.088% { animation-timing-function: ease-in-out; scale: 1.118 1.118; }69.621% { animation-timing-function: ease-in-out; scale: 0.875 0.875; }72.152% { animation-timing-function: ease-out; scale: 0.618 0.618; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18836_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18836_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }52.531% { animation-timing-function: ease-in-out; scale: 1.074 1.074; }55.063% { animation-timing-function: ease-in-out; scale: 1.057 1.057; }57.595% { animation-timing-function: ease-in-out; scale: 0.668 0.668; }60.127% { animation-timing-function: ease-in-out; scale: 0.833 0.833; }62.658% { animation-timing-function: ease-in-out; scale: 1.112 1.112; }65.19% { animation-timing-function: ease-in-out; scale: 0.983 0.983; }67.721% { animation-timing-function: ease-in-out; scale: 0.531 0.531; }70.254% { animation-timing-function: ease-in-out; scale: 0.941 0.941; }72.785% { animation-timing-function: ease-out; scale: 1.119 1.119; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18837_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18837_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }53.164% { animation-timing-function: ease-in-out; scale: 0.806 0.806; }55.696% { animation-timing-function: ease-in-out; scale: 0.698 0.698; }58.228% { animation-timing-function: ease-in-out; scale: 1.07 1.07; }60.76% { animation-timing-function: ease-in-out; scale: 1.062 1.062; }63.291% { animation-timing-function: ease-in-out; scale: 0.679 0.679; }65.822% { animation-timing-function: ease-in-out; scale: 0.824 0.824; }68.354% { animation-timing-function: ease-in-out; scale: 1.11 1.11; }70.886% { animation-timing-function: ease-in-out; scale: 0.989 0.989; }73.418% { animation-timing-function: ease-out; scale: 0.542 0.542; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18838_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18838_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }53.797% { animation-timing-function: ease-in-out; scale: 0.995 0.995; }56.33% { animation-timing-function: ease-in-out; scale: 1.108 1.108; }58.861% { animation-timing-function: ease-in-out; scale: 0.815 0.815; }61.393% { animation-timing-function: ease-in-out; scale: 0.688 0.688; }63.924% { scale: 1.066 1.066; }66.455% { animation-timing-function: ease-in-out; scale: 1.066 1.066; }68.988% { animation-timing-function: ease-in-out; scale: 0.688 0.688; }71.519% { animation-timing-function: ease-out; scale: 0.815 0.815; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18839_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18839_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }54.43% { animation-timing-function: ease-in-out; scale: 0.934 0.934; }56.963% { animation-timing-function: ease-in-out; scale: 0.541 0.541; }59.494% { animation-timing-function: ease-in-out; scale: 0.989 0.989; }62.025% { animation-timing-function: ease-in-out; scale: 1.11 1.11; }64.557% { animation-timing-function: ease-in-out; scale: 0.824 0.824; }67.088% { animation-timing-function: ease-in-out; scale: 0.678 0.678; }69.621% { animation-timing-function: ease-in-out; scale: 1.061 1.061; }72.152% { animation-timing-function: ease-out; scale: 1.07 1.07; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18840_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18840_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }55.063% { animation-timing-function: ease-in-out; scale: 0.883 0.883; }57.595% { animation-timing-function: ease-in-out; scale: 1.119 1.119; }60.127% { animation-timing-function: ease-in-out; scale: 0.941 0.941; }62.658% { animation-timing-function: ease-in-out; scale: 0.531 0.531; }65.19% { animation-timing-function: ease-in-out; scale: 0.982 0.982; }67.721% { animation-timing-function: ease-in-out; scale: 1.112 1.112; }70.254% { animation-timing-function: ease-in-out; scale: 0.833 0.833; }72.785% { animation-timing-function: ease-out; scale: 0.668 0.668; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18841_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18841_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }55.696% { animation-timing-function: ease-in-out; scale: 1.033 1.033; }58.228% { animation-timing-function: ease-in-out; scale: 0.618 0.618; }60.76% { animation-timing-function: ease-in-out; scale: 0.875 0.875; }63.291% { animation-timing-function: ease-in-out; scale: 1.118 1.118; }65.822% { animation-timing-function: ease-in-out; scale: 0.949 0.949; }68.354% { animation-timing-function: ease-in-out; scale: 0.52 0.52; }70.886% { animation-timing-function: ease-in-out; scale: 0.976 0.976; }73.418% { animation-timing-function: ease-out; scale: 1.113 1.113; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18842_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18842_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }56.33% { animation-timing-function: ease-in-out; scale: 0.746 0.746; }58.861% { animation-timing-function: ease-in-out; scale: 1.088 1.088; }61.393% { animation-timing-function: ease-in-out; scale: 1.038 1.038; }63.924% { animation-timing-function: ease-in-out; scale: 0.629 0.629; }66.455% { animation-timing-function: ease-in-out; scale: 0.867 0.867; }68.988% { animation-timing-function: ease-in-out; scale: 1.117 1.117; }71.519% { animation-timing-function: ease-out; scale: 0.956 0.956; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18843_opacity_0 {0% { opacity: 0.7; }76.582% { animation-timing-function: ease-in; opacity: 0.7; }79.746% { opacity: 0.3; }100% { opacity: 0.3; } }
  @keyframes kf_889_18843_scale_0 {0% { scale: 1 1; }50.633% { animation-timing-function: ease-in-out; scale: 1 1; }56.963% { animation-timing-function: ease-in-out; scale: 1.096 1.096; }59.494% { animation-timing-function: ease-in-out; scale: 0.77 0.77; }62.025% { animation-timing-function: ease-in-out; scale: 0.736 0.736; }64.557% { animation-timing-function: ease-in-out; scale: 1.085 1.085; }67.088% { animation-timing-function: ease-in-out; scale: 1.043 1.043; }69.621% { animation-timing-function: ease-in-out; scale: 0.639 0.639; }72.152% { animation-timing-function: ease-out; scale: 0.858 0.858; }75.949% { animation-timing-function: ease-in; scale: 1 1; }79.24% { scale: 0.28 0.28; }100% { scale: 0.28 0.28; } }
  @keyframes kf_889_18844_opacity_0 {0% { opacity: 0; }54.43% { animation-timing-function: ease-out; opacity: 0; }55.949% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18844_translate_0 {0% { translate: 0px 9.6px; }54.43% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 9.6px; }58.228% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18850_opacity_0 {0% { opacity: 0; }65.19% { animation-timing-function: ease-out; opacity: 0; }66.708% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18850_translate_0 {0% { translate: 0px 9.6px; }65.19% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 9.6px; }68.988% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18855_opacity_0 {0% { opacity: 0; }73.418% { animation-timing-function: ease-out; opacity: 0; }74.937% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_889_18855_translate_0 {0% { translate: 0px 9.6px; }73.418% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 9.6px; }77.215% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_889_18860_opacity_0 {0% { opacity: 1; }50.633% { animation-timing-function: ease-in-out; opacity: 1; }55.696% { animation-timing-function: ease-in-out; opacity: 0.35; }60.76% { animation-timing-function: ease-in-out; opacity: 1; }65.822% { animation-timing-function: ease-in-out; opacity: 0.35; }70.886% { animation-timing-function: ease-in-out; opacity: 1; }75.316% { animation-timing-function: ease-in-out; opacity: 0.35; }77.468% { animation-timing-function: ease-in; opacity: 1; }79.24% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18861_opacity_0 {0% { opacity: 0; }77.215% { animation-timing-function: ease-out; opacity: 0; }77.721% { animation-timing-function: ease-in; opacity: 0.75; }83.292% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_889_18861_scale_0 {0% { scale: 1 1; }77.215% { animation-timing-function: ease-out; scale: 1 1; }83.292% { scale: 2.3 2.3; }100% { scale: 2.3 2.3; } }
  @keyframes kf_889_18862_scale_0 {0% { scale: 1 1; }76.582% { animation-timing-function: ease-in; scale: 1 1; }77.468% { animation-timing-function: ease-out; scale: 0.88 0.88; }78.987% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_889_18863_scale_0 {0% { scale: 1 1; }76.582% { animation-timing-function: ease-in; scale: 1 1; }77.468% { animation-timing-function: ease-out; scale: 0.88 0.88; }78.987% { scale: 1 1; }100% { scale: 1 1; } }
  #s5f.on .n18272{animation:kf_889_18272_opacity_0 7.9s linear, kf_889_18272_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18278{animation:kf_889_18278_opacity_0 7.9s linear, kf_889_18278_translate_0 7.9s linear;animation-iteration-count:infinite}
  
  #s5f.on .n18591{animation:kf_889_18591_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18651{animation:kf_889_18651_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18652{animation:kf_889_18652_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18653{animation:kf_889_18653_opacity_0 7.9s linear, kf_889_18653_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18654{animation:kf_889_18654_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18703{animation:kf_889_18703_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18767{animation:kf_889_18767_opacity_0 7.9s linear, kf_889_18767_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18771{animation:kf_889_18771_opacity_0 7.9s linear, kf_889_18771_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18774{animation:kf_889_18774_opacity_0 7.9s linear, kf_889_18774_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18777{animation:kf_889_18777_opacity_0 7.9s linear, kf_889_18777_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18781{animation:kf_889_18781_opacity_0 7.9s linear, kf_889_18781_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18784{animation:kf_889_18784_opacity_0 7.9s linear, kf_889_18784_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18787{animation:kf_889_18787_opacity_0 7.9s linear, kf_889_18787_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18791{animation:kf_889_18791_opacity_0 7.9s linear, kf_889_18791_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18794{animation:kf_889_18794_opacity_0 7.9s linear, kf_889_18794_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18802{animation:kf_889_18802_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18804{animation:kf_889_18804_opacity_0 7.9s linear, kf_889_18804_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18807{animation:kf_889_18807_opacity_0 7.9s linear, kf_889_18807_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18810{animation:kf_889_18810_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18812{animation:kf_889_18812_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18817{animation:kf_889_18817_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18820{animation:kf_889_18820_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18821{animation:kf_889_18821_opacity_0 7.9s linear, kf_889_18821_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18824{animation:kf_889_18824_opacity_0 7.9s linear, kf_889_18824_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18826{animation:kf_889_18826_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18827{animation:kf_889_18827_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18828{animation:kf_889_18828_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18833{animation:kf_889_18833_opacity_0 7.9s linear, kf_889_18833_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18834{animation:kf_889_18834_opacity_0 7.9s linear, kf_889_18834_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18835{animation:kf_889_18835_opacity_0 7.9s linear, kf_889_18835_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18836{animation:kf_889_18836_opacity_0 7.9s linear, kf_889_18836_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18837{animation:kf_889_18837_opacity_0 7.9s linear, kf_889_18837_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18838{animation:kf_889_18838_opacity_0 7.9s linear, kf_889_18838_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18839{animation:kf_889_18839_opacity_0 7.9s linear, kf_889_18839_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18840{animation:kf_889_18840_opacity_0 7.9s linear, kf_889_18840_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18841{animation:kf_889_18841_opacity_0 7.9s linear, kf_889_18841_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18842{animation:kf_889_18842_opacity_0 7.9s linear, kf_889_18842_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18843{animation:kf_889_18843_opacity_0 7.9s linear, kf_889_18843_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18844{animation:kf_889_18844_opacity_0 7.9s linear, kf_889_18844_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18850{animation:kf_889_18850_opacity_0 7.9s linear, kf_889_18850_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18855{animation:kf_889_18855_opacity_0 7.9s linear, kf_889_18855_translate_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18860{animation:kf_889_18860_opacity_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18861{animation:kf_889_18861_opacity_0 7.9s linear, kf_889_18861_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18862{animation:kf_889_18862_scale_0 7.9s linear;animation-iteration-count:infinite}
  #s5f.on .n18863{animation:kf_889_18863_scale_0 7.9s linear;animation-iteration-count:infinite}
  

  /* ── scene 4 · the two CRM timelines, one window ─────────── */
  #s4.on-4 [class^="n"],
  #s5f.on [class^="n"]{animation-iteration-count:1;animation-fill-mode:forwards}

  #s5f .crmzoom{position:absolute;inset:0;transform:scale(.8333);transform-origin:143px 52px}

  #s45 .taskcue{flex:1;padding:6px 10px;border-radius:8px;
    background:#FFF3DF;box-shadow:inset 0 0 0 1px rgba(233,117,0,.34)}
  #s4.on-4 .taskcue{animation:taskcue_ring 1s ease-out 3.05s 2}
  @keyframes taskcue_ring{
    0%{box-shadow:inset 0 0 0 1px rgba(233,117,0,.34),0 0 0 0 rgba(233,117,0,.36)}
    72%{box-shadow:inset 0 0 0 1px rgba(233,117,0,.34),0 0 0 7px rgba(233,117,0,0)}
    100%{box-shadow:inset 0 0 0 1px rgba(233,117,0,.34),0 0 0 0 rgba(233,117,0,0)}}

  #s45 .crmph{position:absolute;inset:0;
    opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
  #s45 .crmph.is-live{opacity:1;visibility:inherit;transition:opacity .34s ease,visibility 0s}

  /* ── scene 6t · marketing — hand-built, 13.0s ───────── */
  @media (min-width:901px){
    #s6t{left:calc(50% + 23.5px);width:1201px;
      grid-template-columns:282px 825px;gap:94px;align-items:start}
    #s6t .copy{justify-self:start;padding-top:10px}
  }
  #s6t .copy{text-align:left}
  #s6t .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s6t .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  #s6t .kxwin{border-radius:12px;font-family:'Inter',var(--sans)}
  #s6t .kxwin *{box-sizing:border-box}
  #s6t .kxwin p{margin:0}
  #s6t .kxwin img{display:block}

  #s6t .mkstage{position:relative;width:825px;height:486px}
  #s6t .mkstage > .kxwin{position:absolute;inset:0}

  /* ── the product island — always light, whatever the page theme ── */
  .mkui{--i-line:#E6E9EE; --i-line2:#F1F3F6; --i-ghost:#DEE3E9; --i-ghost2:#EDF0F4;
    --i-ink:#111827; --i-ink2:#6B7280; --i-ink3:#9CA3AF;
    --i-teal:#0D4F3C; --i-tealsoft:#E9F1ED;
    --i-blue:#5070FE; --i-bluesoft:#E8ECFF;
    --i-ai:#8944D0; --i-aisoft:#F1E9FC; --i-ailine:#D6C2F2;
    --i-brand:#00484A; --i-brand2:#305A59;
    --i-good:#0F7B4F; --i-goodsoft:#DAF3E6}
  .mkui .win-in{position:absolute;top:52px;left:0;right:0;bottom:0;display:flex}

  .mkui .mkside{width:143px;flex-shrink:0;border-right:.5px solid #E6ECEC;background:#fff;
    padding:12px 8px;display:flex;flex-direction:column;
    justify-content:space-between;align-items:flex-end}
  .mkui .sgrp{display:flex;flex-direction:column;gap:4px;width:127px}
  .mkui .s-row{height:20px;padding:4px 8px;border-radius:12px;
    display:flex;align-items:center;justify-content:space-between}
  .mkui .s-row em{display:flex;align-items:center;gap:4px;font-style:normal}
  .mkui .s-row i{width:5px;height:5px;border-radius:6px;background:#B3B3B3;flex:none}
  .mkui .s-row b{height:5px;border-radius:6px;background:#B3B3B3}
  .mkui .s-pill{display:flex;align-items:center;justify-content:space-between;
    height:20px;padding:4px 8px;border-radius:12px;background:#00484A;width:100%}
  .mkui .s-pill em{display:flex;align-items:center;gap:5px;font-style:normal}
  .mkui .s-pill b{font:600 8px/1 'Inter',var(--sans);color:#fff}
  .mkui .s-pill svg{width:9px;height:9px;color:#fff;flex:none}
  .mkui .s-pill .chv{color:rgba(255,255,255,.75)}
  .mkui .ssub{display:flex;flex-direction:column;gap:2px;width:97px}
  .mkui .s-sub{display:flex;align-items:center;gap:5px;height:20px;padding:4px 8px;
    border-radius:12px;font:500 8px/1 'Inter',var(--sans);color:#495564}
  .mkui .s-sub svg{width:9px;height:9px;flex:none}
  .mkui .s-sub b{height:5px;border-radius:6px;background:#B3B3B3;font-weight:400}
  .mkui .s-sub.sel{background:#E6ECEC;color:#00484A}
  .mkui .s-foot{display:flex;align-items:center;gap:6px;padding:0 8px;width:127px}
  .mkui .s-av{width:20px;height:20px;border-radius:50%;background-color:#D9D9D9;flex:none}
  .mkui .s-un{display:flex;flex-direction:column;gap:2px;width:55px}
  .mkui .s-un b{font:500 8px/1 'Inter',var(--sans);color:#344153}
  .mkui .s-un i{height:5px;border-radius:41px;background:#A9ACB3;display:block}

  .mkui .pane{flex:1;position:relative;overflow:hidden;background:#fff}
  .mkui .pg{position:absolute;inset:0;padding:15px 17px;opacity:0}
  .mkui .crumb{font-size:8px;color:var(--i-ink3);margin-bottom:8px}
  .mkui .crumb b{color:var(--i-ink2);font-weight:500}
  .mkui .phead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
  .mkui .ptitle{font-size:16px;font-weight:600;color:var(--i-ink);letter-spacing:-.25px;line-height:1.15}
  .mkui .psub{font-size:8.6px;color:var(--i-ink2);margin-top:3px}
  .mkui .btn{height:20px;border-radius:5px;background:var(--i-blue);color:#fff;
    font-size:8.2px;font-weight:600;display:inline-flex;align-items:center;
    padding:0 10px;white-space:nowrap}
  .mkui .btn.gh{background:#fff;border:1px solid var(--i-line);color:var(--i-ink2)}
  .mkui .tabs{display:inline-flex;gap:3px;background:#F4F6F8;border-radius:6px;padding:2.5px;
    margin-bottom:9px}
  .mkui .tabs span{font-size:7.6px;color:var(--i-ink2);padding:3px 8px;border-radius:4px}
  .mkui .tabs span.on{background:#fff;color:var(--i-ink);font-weight:600;
    box-shadow:0 1px 2px rgba(13,20,36,.07)}
  .mkui .srch{height:18px;border:1px solid var(--i-line);border-radius:5px;
    display:flex;align-items:center;padding:0 7px;margin-bottom:10px;max-width:230px}
  .mkui .srch em{font-style:normal;font-size:7.4px;color:var(--i-ink3)}

  .mkui .cards{display:grid;grid-template-columns:repeat(4,156.75px);gap:7px}
  .mkui .card{border:1px solid var(--i-line);border-radius:6px;
    background:#fff;padding:5px;display:flex;flex-direction:column;gap:4px;height:112px}
  .mkui .card .thumb{flex:1;border-radius:3px;background:var(--i-ghost2)}
  .mkui .card .ln{height:3.5px;border-radius:2px;background:var(--i-ghost);width:72%}
  .mkui .card .ln.s{width:44%;height:3px;background:var(--i-ghost2)}
  .mkui .card.fresh{border-color:var(--i-blue);opacity:0;
    transform:scale(.94);transform-origin:50% 0}
  .mkui .card.fresh .thumb{position:relative;overflow:hidden}
  .mkui .aibadge{position:absolute;left:4px;top:4px;display:flex;align-items:center;gap:2px;
    background:var(--i-aisoft);border:1px solid var(--i-ailine);border-radius:3px;
    padding:1.5px 4px;font-size:5.6px;font-weight:700;color:var(--i-ai);
    letter-spacing:.04em}

  .mkui .thead{display:flex;gap:8px;padding:0 6px 5px;border-bottom:1px solid var(--i-line)}
  .mkui .thead span{font-size:6.4px;font-weight:600;letter-spacing:.06em;color:var(--i-ink3)}
  .mkui .trow{display:flex;align-items:center;gap:8px;padding:7px 6px;
    border-bottom:1px solid var(--i-line2);font-size:8px;color:var(--i-ink)}
  .mkui .trow .nm{flex:1;min-width:0;font-weight:500}
  .mkui .trow .ct{width:52px;font-variant-numeric:tabular-nums;font-weight:600}
  .mkui .trow .de{width:120px;color:var(--i-ink3);font-size:7.4px}
  .mkui .trow .dt{width:64px;color:var(--i-ink2);font-size:7.4px;text-align:right}
  .mkui .pill{font-size:6.6px;font-weight:600;padding:2px 6px;border-radius:20px;
    background:var(--i-bluesoft);color:#1B4FA8;white-space:nowrap}
  .mkui .pill.ok{background:var(--i-goodsoft);color:var(--i-good)}
  .mkui .pill.wa{background:#E3F6EB;color:#116B41}
  .mkui .pill.gray{background:#F0F2F5;color:var(--i-ink2)}

  /* ── creation happens in a CENTRED modal ──────────────────── */
  .mkui .mlayer{position:absolute;top:-15px;bottom:-15px;left:-17px;right:-17px;
    z-index:6;display:flex;align-items:center;justify-content:center;
    pointer-events:none}
  .mkui .scrim{position:absolute;inset:0;background:rgba(13,20,36,.22);opacity:0}
  .mkui .modal{position:relative;border-radius:10px;background:#fff;
    border:1px solid var(--i-line);
    box-shadow:0 12px 40px -10px rgba(13,20,36,.4),0 2px 6px rgba(13,20,36,.1);
    opacity:0}
  .mkui .mhead{display:flex;align-items:center;gap:6px;padding:8px 11px;
    border-bottom:1px solid var(--i-line)}
  .mkui .mhead h4{margin:0;font-size:10px;font-weight:600;color:var(--i-ink);
    font-family:'Inter',var(--sans)}
  .mkui .mhead em{font-style:normal;font-size:7.4px;font-weight:500;color:var(--i-blue);
    background:var(--i-bluesoft);border-radius:3px;padding:2px 5px;line-height:1}
  .mkui .mx{margin-left:auto;flex-shrink:0;width:13px;height:13px;border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    color:var(--i-ink3);font-size:9px;line-height:1}
  .mkui .mbody{padding:11px}
  .mkui .mfoot{display:flex;align-items:center;gap:7px;padding:8px 11px;
    border-top:1px solid var(--i-line);background:#FAFBFD;
    border-radius:0 0 9px 9px}
  .mkui .mfoot .sp{margin-left:auto}

  .mkui .mksheet{width:430px}
  .mkui .mbody.two{display:flex;gap:12px}
  .mkui .mcol-l{flex:0 0 168px;display:flex;flex-direction:column}
  .mkui .mcol-r{flex:1;min-width:0;display:flex;flex-direction:column}
  .mkui .clab2{font-size:7.4px;color:var(--i-ink2);margin-bottom:4px}
  .mkui .prow{display:flex;align-items:center;margin-bottom:4px}
  .mkui .prow .clab2{margin-bottom:0}
  .mkui .fld{border:1px solid var(--i-line);border-radius:5px;padding:6px 7px;
    font-size:7.4px;color:var(--i-ink3);height:52px;position:relative;overflow:hidden}
  .mkui .fld .ph-a{position:absolute;left:7px;top:6px}
  .mkui .fld .type{position:absolute;left:7px;top:6px;right:7px;color:var(--i-ink);
    font-weight:500;line-height:1.45}
  .mkui .fld .type i{display:block;width:max-content;max-width:100%;font-style:normal}
  .mkui .fld .type u{display:block;width:0;overflow:hidden;white-space:nowrap;
    text-decoration:none;border-right:1px solid transparent}
  .mkui .chrow{display:flex;gap:4px;margin-bottom:9px}
  .mkui .chp{font-size:7.2px;color:var(--i-ink2);background:#F1F4F5;border-radius:20px;
    padding:3.5px 8px;font-weight:500}
  .mkui .chp.on{background:var(--i-blue);color:#fff;font-weight:600}
  .mkui .btn.wide{width:100%;justify-content:center;height:23px;gap:4px}
  .mkui .wchip{margin-left:auto;display:flex;align-items:center;gap:3px;border-radius:20px;
    padding:2.5px 6px;font-size:6.8px;font-weight:600;
    background:var(--i-aisoft);color:var(--i-ai)}
  .mkui .wchip.rd{background:var(--i-bluesoft);color:var(--i-blue)}
  .mkui .spark{width:6px;height:6px;flex-shrink:0}
  .mkui .pcard{border:1px solid var(--i-line);border-radius:5px;overflow:hidden;flex:1;
    display:flex;flex-direction:column;background:#fff}
  .mkui .pcard-h{background:var(--i-brand);padding:10px 8px}
  .mkui .pcard-h .subj{font-size:9px;font-weight:600;color:#fff;letter-spacing:-.15px}
  .mkui .pcard-b{padding:7px 8px;display:flex;flex-direction:column;gap:5px;flex:1}
  .mkui .pcard-b p{margin:0;font-size:6.4px;line-height:1.5;color:var(--i-ink2)}
  .mkui .pcta{align-self:flex-start;background:var(--i-brand);color:#fff;border-radius:4px;
    padding:4px 8px;font-size:6.4px;font-weight:600}
  .mkui .psign{font-size:6px;color:var(--i-ink3);margin-top:auto}

  .mkui .mkcsheet{width:412px}
  .mkui .crow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .mkui .clab{width:56px;font-size:7.6px;color:var(--i-ink2);flex-shrink:0}
  .mkui .sel{flex:1;border:1px solid var(--i-line);border-radius:5px;height:22px;
    display:flex;align-items:center;padding:0 8px;font-size:8px;color:var(--i-ink3);
    position:relative}
  .mkui .sel .val{color:var(--i-ink);font-weight:600;opacity:0}
  .mkui .sel .ph{position:absolute;left:8px}
  .mkui .drop{position:absolute;left:0;right:0;top:24px;background:#fff;border-radius:6px;
    border:1px solid var(--i-line);box-shadow:0 8px 22px -10px rgba(13,20,36,.35);
    padding:3px;z-index:4;opacity:0}
  .mkui .drop div{display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:4px;
    font-size:7.8px;color:var(--i-ink)}
  .mkui .drop div b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--i-ink2);
    font-weight:600;font-size:7.4px}
  .mkui .toggle{display:flex;align-items:center;gap:5px;border:1px solid var(--i-line);
    border-radius:20px;padding:3px 9px;font-size:7.6px;color:var(--i-ink2)}
  .mkui .toggle .tick{width:9px;height:9px;border-radius:5px;border:1.2px solid var(--i-ghost)}
  .mkui .toggle.on{border-color:var(--i-blue);color:#1B4FA8;background:var(--i-bluesoft)}
  .mkui .toggle.on .tick{background:var(--i-blue);border-color:var(--i-blue)}
  .mkui .toggle.on.wa{border-color:#1AA35C;color:#116B41;background:#E3F6EB}
  .mkui .toggle.on.wa .tick{background:#1AA35C;border-color:#1AA35C}

  /* ── the send proves itself on real devices ───────────────── */
  .mkui .phones{position:absolute;right:-38px;bottom:-30px;width:280px;height:330px;
    pointer-events:none;z-index:4}
  .mkui .mkph{position:absolute;border-radius:20px;background:#0D1424;
    box-shadow:0 18px 44px -14px rgba(13,20,36,.5),0 2px 6px rgba(13,20,36,.22);
    padding:5px;opacity:0}
  .mkui .ph .scr{width:100%;height:100%;border-radius:16px;overflow:hidden;position:relative;
    background:radial-gradient(85% 55% at 76% 12%,rgba(158,183,232,.62),transparent 70%),
               radial-gradient(78% 52% at 20% 34%,rgba(199,210,254,.6),transparent 72%),
               linear-gradient(176deg,#EFF4FD,#E2E9F7)}
  .mkui .ph .tm{position:absolute;left:0;right:0;top:26px;text-align:center;
    font-size:24px;font-weight:700;letter-spacing:-.03em;color:#0D1424;line-height:1}
  .mkui .ph .dt{position:absolute;left:0;right:0;top:54px;text-align:center;
    font-size:7px;font-weight:600;color:#5A6478}
  .mkui .ph-a2{width:150px;height:302px;right:0;bottom:0;z-index:3}
  .mkui .ph-b2{width:126px;height:254px;right:104px;bottom:44px;z-index:2;rotate:-7deg}
  .mkui .mn2{position:absolute;left:7px;right:7px;top:88px;border-radius:11px;
    padding:7px 8px;background:rgba(255,255,255,.8);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 8px 18px rgba(13,20,36,.13);
    opacity:0}
  .mkui .ph-b2 .mn2{top:70px;left:6px;right:6px;padding:6px 7px}
  .mkui .mn2 .hd{display:flex;align-items:center;gap:5px;margin-bottom:3px}
  .mkui .mn2 .ic{width:11px;height:11px;border-radius:3px;flex-shrink:0}
  .mkui .mn2 .ic.wa{background:#1AA35C}
  .mkui .mn2 .ic.em{background:#fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 36'><path fill='%234285F4' d='M3.5 36h8.6V15.1L0 5.9v26.6C0 34.4 1.6 36 3.5 36z'/><path fill='%2334A853' d='M36.9 36h8.6c1.9 0 3.5-1.6 3.5-3.5V5.9l-12.1 9.2V36z'/><path fill='%23FBBC04' d='M36.9 3.5v11.6L49 5.9V5.2c0-4.3-4.9-6.8-8.4-4.2l-3.7 2.5z'/><path fill='%23EA4335' d='M12.1 15.1V3.5L24.5 12.8 36.9 3.5v11.6L24.5 24.4z'/><path fill='%23C5221F' d='M0 5.2v.7l12.1 9.2V3.5L8.4 1C4.9-1.6 0 .9 0 5.2z'/></svg>") no-repeat center/7.2px 5.3px;
    box-shadow:inset 0 0 0 .5px rgba(13,20,36,.14)}
  .mkui .mn2 .hd b{font-size:6.6px;font-weight:600;color:#0D1424}
  .mkui .mn2 .hd em{font-style:normal;margin-left:auto;font-size:6px;color:#7C8799}
  .mkui .mn2 .bd{font-size:6.6px;line-height:1.35;color:#2B3446}
  .mkui .more{position:absolute;left:-14px;bottom:2px;z-index:5;
    display:flex;align-items:center;gap:5px;
    background:#0D1424;color:#fff;border-radius:20px;padding:5px 11px;
    font-size:10px;font-weight:600;letter-spacing:-.1px;opacity:0;
    box-shadow:0 8px 20px -6px rgba(13,20,36,.5)}
  .mkui .more span{width:5px;height:5px;border-radius:3px;background:#3FCB93}

  /* ══ the 15s timeline ═══════════════════════════════════════ */
  @keyframes pgTpl{0%{opacity:1}39.78%{opacity:1}41.77%{opacity:0}100%{opacity:0}}
  @keyframes pgSeg{0%{opacity:0}40.47%{opacity:0}42.46%{opacity:1}
    57.43%{opacity:1}59.42%{opacity:0}100%{opacity:0}}
  @keyframes pgCmp{0%{opacity:0}58.04%{opacity:0}60.03%{opacity:1}100%{opacity:1}}

  @keyframes selTpl{0%,39.43%{background:#E6ECEC;color:#00484A}
    39.78%,100%{background:transparent;color:var(--i-ink2)}}
  @keyframes selSeg{0%,39.43%{background:transparent;color:var(--i-ink2)}
    39.78%,57.08%{background:#E6ECEC;color:#00484A}
    57.43%,100%{background:transparent;color:var(--i-ink2)}}
  @keyframes selCmp{0%,57.08%{background:transparent;color:var(--i-ink2)}
    57.43%,100%{background:#E6ECEC;color:#00484A}}

  /* ── beat 1 · the AI writes the template, in a modal (0 → 5.4s) ── */
  @keyframes scA{0%,5%{opacity:0}7.7%{opacity:1}26.5%{opacity:1}
    28.5%{opacity:0}100%{opacity:0}}
  @keyframes shA{0%,5.4%{opacity:0;scale:.94}
    7.7%{opacity:1;scale:1}26.5%{opacity:1;scale:1}
    28.5%{opacity:0;scale:.97}100%{opacity:0;scale:.97}}
  @keyframes phGo{0%,8.5%{opacity:1}8.9%{opacity:0}100%{opacity:0}}
  @keyframes typeL1{0%,8.79%{width:0;border-right-color:transparent}
    8.8%{width:0;border-right-color:var(--i-blue)}
    11.97%{width:100%;border-right-color:var(--i-blue)}
    11.98%,100%{width:100%;border-right-color:transparent}}
  @keyframes typeL2{0%,12.26%{width:0;border-right-color:transparent}
    12.27%{width:0;border-right-color:var(--i-blue)}
    15.24%{width:100%;border-right-color:var(--i-blue)}
    15.25%,100%{width:100%;border-right-color:transparent}}
  @keyframes typeL3{0%,15.53%{width:0;border-right-color:transparent}
    15.54%{width:0;border-right-color:var(--i-blue)}
    18.4%{width:100%;border-right-color:var(--i-blue)}
    18.9%{width:100%;border-right-color:var(--i-blue)}
    18.91%,100%{width:100%;border-right-color:transparent}}
  @keyframes genPress{0%,18.9%{transform:none;filter:none}
    19.2%{transform:scale(.965);filter:brightness(.9)}
    19.7%{transform:none;filter:none}100%{transform:none;filter:none}}
  @keyframes writing{0%,19.8%{opacity:0}20.2%{opacity:1}
    23.8%{opacity:1}24.2%{opacity:0}100%{opacity:0}}
  @keyframes ready{0%,23.8%{opacity:0}24.2%{opacity:1}100%{opacity:1}}
  @keyframes pv1{0%,20.4%{opacity:0;transform:translateY(3px)}21.8%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes pv2{0%,20.9%{opacity:0;transform:translateY(3px)}22.3%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes pv3{0%,21.4%{opacity:0;transform:translateY(3px)}22.8%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes pv4{0%,21.9%{opacity:0;transform:translateY(3px)}23.3%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes pv5{0%,22.4%{opacity:0;transform:translateY(3px)}23.8%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes freshIn{
    0%,28.8%{opacity:0;transform:scale(.94) translateY(-6px);
      box-shadow:0 0 0 0 rgba(80,112,254,0)}
    31.5%{opacity:1;transform:scale(1) translateY(0);
      box-shadow:0 0 0 0 rgba(80,112,254,0)}
    32.2%{box-shadow:0 0 0 4px rgba(80,112,254,.32)}
    33%  {box-shadow:0 0 0 0 rgba(80,112,254,0)}
    33.6%{box-shadow:0 0 0 4px rgba(80,112,254,.32)}
    34.4%{box-shadow:0 0 0 0 rgba(80,112,254,0)}
    35%  {box-shadow:0 0 0 4px rgba(80,112,254,.32)}
    35.8%{opacity:1;transform:scale(1) translateY(0);
      box-shadow:0 0 0 0 rgba(80,112,254,0)}
    100% {opacity:1;transform:scale(1) translateY(0);
      box-shadow:0 0 0 0 rgba(80,112,254,0)}}

  /* ── beat 2 · the segments build (3.5 → 6.3s) ───────────── */
  @keyframes segRow1{0%,42.72%{opacity:0;transform:translateY(7px)}
    44.8%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes segRow2{0%,46.1%{opacity:0;transform:translateY(7px)}
    48.09%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes segRow3{0%,49.38%{opacity:0;transform:translateY(7px)}
    51.37%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes d1{0%{opacity:1}44.11%{opacity:0}100%{opacity:0}}
  @keyframes d2{0%{opacity:0}44.11%{opacity:1}45.4%{opacity:0}100%{opacity:0}}
  @keyframes d3{0%{opacity:0}45.4%{opacity:1}46.79%{opacity:0}100%{opacity:0}}
  @keyframes d4{0%{opacity:0}46.79%{opacity:1}100%{opacity:1}}

  /* ── beat 3 · the campaign is composed, in a modal (6.3 → 10.5s) ── */
  @keyframes scB{0%,63.05%{opacity:0}65.74%{opacity:1}83.73%{opacity:1}
    85.72%{opacity:0}100%{opacity:0}}
  @keyframes cshIn{0%,63.4%{opacity:0;scale:.94}
    65.74%{opacity:1;scale:1}83.73%{opacity:1;scale:1}
    85.72%{opacity:0;scale:.97}100%{opacity:0;scale:.97}}
  @keyframes dropOpen{0%,68.42%{opacity:0}68.68%{opacity:1}
    72.75%{opacity:1}73%{opacity:0}100%{opacity:0}}
  @keyframes pickRow{0%,71.71%{background:transparent}
    72.05%{background:var(--i-bluesoft)}72.75%{background:var(--i-bluesoft)}
    73%{background:transparent}100%{background:transparent}}
  @keyframes valIn{0%,72.75%{opacity:0}73%{opacity:1}100%{opacity:1}}
  @keyframes phOut{0%,72.75%{opacity:1}73%{opacity:0}100%{opacity:0}}
  @keyframes tplIn{0%,75.34%{opacity:0}75.69%{opacity:1}100%{opacity:1}}
  @keyframes chEmail{0%,78.02%{background:#fff;border-color:var(--i-line);color:var(--i-ink2)}
    78.37%,100%{background:var(--i-bluesoft);border-color:var(--i-blue);color:#1B4FA8}}
  @keyframes tkEmail{0%,78.02%{background:transparent;border-color:var(--i-ghost)}
    78.37%,100%{background:var(--i-blue);border-color:var(--i-blue)}}
  @keyframes chWa{0%,80.36%{background:#fff;border-color:var(--i-line);color:var(--i-ink2)}
    80.71%,100%{background:#E3F6EB;border-color:#1AA35C;color:#116B41}}
  @keyframes tkWa{0%,80.36%{background:transparent;border-color:var(--i-ghost)}
    80.71%,100%{background:#1AA35C;border-color:#1AA35C}}
  @keyframes tapScale{0%,83.04%{scale:1}83.39%{scale:.95}84.17%{scale:1}100%{scale:1}}

  /* ── beat 4 · the send proves itself on devices (10.5 → 13.0s) ── */
  @keyframes sentRow{0%,85.98%{opacity:0;transform:translateY(-9px)}
    88.32%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes phoneA{0%,88.06%{opacity:0;transform:translateY(38px) scale(.96)}
    91.35%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes phoneB{0%,92.39%{opacity:0;transform:translateY(30px) scale(.96)}
    95.33%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes notifA{0%,90.66%{opacity:0;transform:translateY(-11px) scale(.96)}
    93.34%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes notifB{0%,94.64%{opacity:0;transform:translateY(-9px) scale(.96)}
    96.97%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes moreChip{0%,96.97%{opacity:0;transform:translateY(8px) scale(.9)}
    99.31%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:1;transform:translateY(0) scale(1)}}

  #s6t.on .mkui .pg-tpl{animation:pgTpl 15s linear infinite}
  #s6t.on .mkui .pg-seg{animation:pgSeg 15s linear infinite}
  #s6t.on .mkui .pg-cmp{animation:pgCmp 15s linear infinite}
  #s6t.on .mkui .sub-tpl{animation:selTpl 15s step-end infinite}
  #s6t.on .mkui .sub-seg{animation:selSeg 15s step-end infinite}
  #s6t.on .mkui .sub-cmp{animation:selCmp 15s step-end infinite}
  #s6t.on .mkui .sc-a{animation:scA 15s linear infinite}
  #s6t.on .mkui .sc-b{animation:scB 15s linear infinite}
  #s6t.on .mkui .mksheet{animation:shA 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .type i:nth-child(1) u{animation:typeL1 15s steps(32,end) infinite}
  #s6t.on .mkui .type i:nth-child(2) u{animation:typeL2 15s steps(30,end) infinite}
  #s6t.on .mkui .type i:nth-child(3) u{animation:typeL3 15s steps(29,end) infinite}
  #s6t.on .mkui .btn.gen{animation:genPress 15s ease infinite}
  #s6t.on .mkui .ph-a{animation:phGo 15s step-end infinite}
  #s6t.on .mkui .wr{animation:writing 15s linear infinite}
  #s6t.on .mkui .rdy{animation:ready 15s linear infinite}
  #s6t.on .mkui .pv1{animation:pv1 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .pv2{animation:pv2 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .pv3{animation:pv3 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .pv4{animation:pv4 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .pv5{animation:pv5 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .card.fresh{animation:freshIn 15s cubic-bezier(.2,.8,.3,1) infinite}
  #s6t.on .mkui .sg1{animation:segRow1 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .sg2{animation:segRow2 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .sg3{animation:segRow3 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .k1{animation:d1 15s step-end infinite}
  #s6t.on .mkui .k2{animation:d2 15s step-end infinite}
  #s6t.on .mkui .k3{animation:d3 15s step-end infinite}
  #s6t.on .mkui .k4{animation:d4 15s step-end infinite}
  #s6t.on .mkui .mkcsheet{animation:cshIn 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .drop{animation:dropOpen 15s linear infinite}
  #s6t.on .mkui .drop .pk{animation:pickRow 15s step-end infinite}
  #s6t.on .mkui .val{animation:valIn 15s step-end infinite}
  #s6t.on .mkui .ph-b{animation:phOut 15s step-end infinite}
  #s6t.on .mkui .tplchip{animation:tplIn 15s linear infinite}
  #s6t.on .mkui .tg-em{animation:chEmail 15s step-end infinite}
  #s6t.on .mkui .tg-em .tick{animation:tkEmail 15s step-end infinite}
  #s6t.on .mkui .tg-wa{animation:chWa 15s step-end infinite}
  #s6t.on .mkui .tg-wa .tick{animation:tkWa 15s step-end infinite}
  #s6t.on .mkui .schd{animation:tapScale 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkui .sentrow{animation:sentRow 15s cubic-bezier(.2,.7,.3,1) infinite}
  #s6t.on .mkstage .ph-a2{animation:phoneA 15s cubic-bezier(.2,.75,.3,1) infinite}
  #s6t.on .mkstage .ph-b2{animation:phoneB 15s cubic-bezier(.2,.75,.3,1) infinite}
  #s6t.on .mkstage .mn-wa{animation:notifA 15s cubic-bezier(.2,.75,.3,1) infinite}
  #s6t.on .mkstage .mn-em{animation:notifB 15s cubic-bezier(.2,.75,.3,1) infinite}
  #s6t.on .mkstage .more{animation:moreChip 15s cubic-bezier(.2,.8,.3,1) infinite}

  #s6t:not(.on) .mkui .pg-tpl{opacity:1}
  #s6t:not(.on) .mkui .sub-tpl{background:#E6ECEC;color:#00484A}
  .mkui .pv{opacity:0}
  .mkui .wchip{opacity:0}
  /* ── scene 6 · unified inbox — Figma 1091:41424 / win 1091:44891, 1:1 ─
     Same measured row as its siblings — 282px copy on x143, 825px window on
     x519, gutter 94 — and the timeline binds on `.on`, so reshuffles of the
     ride can never unplug it. Generated mechanically from the fetched
     motion context, every track verbatim. */
  @media (min-width:901px){
    #s6{left:calc(50% + 23.5px);width:1201px;
      grid-template-columns:282px 825px;gap:94px;align-items:start}
    #s6 .copy{justify-self:start;padding-top:10px}
  }
  #s6 .copy{text-align:left}
  #s6 .copy h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:30px;
    letter-spacing:-.48px;color:#0E1526;margin-bottom:5px}
  #s6 .copy p{font-size:17px;line-height:25.5px;color:#4B5568}
  #s6 .kxwin{border-radius:12px;font-family:'Inter',var(--sans)}
  #s6 .kxwin *{box-sizing:border-box}
  #s6 .kxwin p{margin:0}
  #s6 .kxwin img{display:block}

  /* ── adım başlığı: mavi→mor degrade (Elif, takas — head düz maviye */
  #s1 .copy h3,#s2 .copy h3,#s3 .copy h3,#s45 .copy h3,
  #s6t .copy h3,#s6 .copy h3{
    width:fit-content;max-width:100%;
    background-image:linear-gradient(96deg,#0E4CB8 0%,#7B4FD8 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}

  @keyframes kf_1091_44905_opacity_0 {0% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_44905_translate_0 {0% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45033_opacity_0 {0% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45038_opacity_0 {0% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45045_opacity_0 {0% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45061_opacity_0 {0% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45061_scale_0 {0% { scale: 1 1; }55.137% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_1091_45121_opacity_0 {0% { opacity: 0; }5.688% { animation-timing-function: ease-out; opacity: 0; }6.798% { opacity: 1; }8.463% { animation-timing-function: ease-in; opacity: 1; }9.758% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45128_opacity_0 {0% { opacity: 0; }8.277% { animation-timing-function: ease-out; opacity: 0; }8.833% { opacity: 1; }9.758% { animation-timing-function: ease-in; opacity: 1; }10.868% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
    @keyframes kf_1091_45142_opacity_0 {0% { opacity: 0; }10.868% { animation-timing-function: ease-out; opacity: 0; }12.718% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45142_translate_0 {0% { translate: 24px 0px; }10.868% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 24px 0px; }15.679% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_s6pick_scale_0 { 0% { scale: 1 1; } 5.093% { animation-timing-function: ease-out; scale: 1 1; } 7.5% { scale: 1.012 1.012; } 9.073% { animation-timing-function: ease-in; scale: 1.012 1.012; } 9.723% { animation-timing-function: ease-out; scale: 0.998 0.998; } 10.371% { scale: 1.012 1.012; } 100% { scale: 1.012 1.012; } }
  @keyframes kf_s6pick_bg_0 { 0% { background-color: #fff; } 5.093% { animation-timing-function: ease-out; background-color: #fff; } 7.5% { background-color: #f4f7fa; } 100% { background-color: #f4f7fa; } }
  @keyframes kf_1091_45193_opacity_0 {0% { opacity: 0; }16.975% { animation-timing-function: ease-out; opacity: 0; }18.455% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45193_translate_0 {0% { translate: 0px 11.7px; }16.975% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 11.7px; }20.861% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45211_opacity_0 {0% { opacity: 0; }50.468% { animation-timing-function: ease-out; opacity: 0; }51.948% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45211_translate_0 {0% { translate: 0px 11.7px; }50.468% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 11.7px; }54.352% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45226_opacity_0 {0% { opacity: 0; }66.445% { animation-timing-function: ease-out; opacity: 0; }69.259% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45226_translate_0 {0% { translate: 0px 11.7px; }66.44% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 11.7px; }72.037% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45279_opacity_0 {0% { opacity: 0; }46.767% { animation-timing-function: ease-out; opacity: 0; }47.877% { opacity: 1; }49.913% { animation-timing-function: ease-in; opacity: 1; }50.652% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45279_translate_0 {0% { translate: 0px 6px; }46.767% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 6px; }50.097% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45294_opacity_0 {0% { opacity: 0; }69.777% { animation-timing-function: ease-out; opacity: 0; }72.129% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45294_scale_0 {0% { scale: 0.985 0.985; }69.782% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.985 0.985; }77.778% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_1091_45303_opacity_0 {0% { opacity: 0; }62.963% { animation-timing-function: ease-out; opacity: 0; }65.37% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45303_translate_0 {0% { translate: 0px 7px; }61.942% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 7px; }68.333% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45315_opacity_0 {0% { opacity: 0; }62.963% { animation-timing-function: ease-out; opacity: 0; }65.37% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45334_opacity_0 {0% { opacity: 0; }19.565% { animation-timing-function: ease-out; opacity: 0; }21.6% { opacity: 1; }44.731% { animation-timing-function: ease-in; opacity: 1; }46.582% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45334_translate_0 {0% { translate: 0px 14px; }19.565% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 14px; }24.007% { translate: 0px 0px; }44.731% { animation-timing-function: ease-in; translate: 0px 0px; }46.582% { translate: 0px -12px; }55.137% { translate: 0px -12px; }100% { translate: 0px -12px; } }
  @keyframes kf_1091_45334_scale_0 {0% { scale: 0.985 0.985; }19.565% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.985 0.985; }24.191% { scale: 1 1; }44.731% { animation-timing-function: ease-in; scale: 1 1; }46.582% { scale: 0.985 0.985; }55.137% { scale: 0.985 0.985; }100% { scale: 0.985 0.985; } }
  @keyframes kf_1091_45334_shadow_0 { 0% { box-shadow: 0 0 0 0 rgba(30,107,232,0), 0 0 0 0 rgba(30,107,232,0); } 38.24% { animation-timing-function: ease-out; box-shadow: 0 0 0 0 rgba(30,107,232,0), 0 0 0 0 rgba(30,107,232,0); } 39.814% { animation-timing-function: ease-in; box-shadow: 0 0 0 1.5px rgba(30,107,232,.42), 0 0 0 7px rgba(30,107,232,.09); } 43.518% { animation-timing-function: ease-out; box-shadow: 0 0 0 1.5px rgba(30,107,232,.62), 0 0 0 11px rgba(30,107,232,.14); } 44.444% { box-shadow: 0 0 0 2.5px rgba(30,107,232,.95), 0 0 0 17px rgba(30,107,232,.20); } 45.833% { animation-timing-function: ease-in; box-shadow: 0 0 0 2.5px rgba(30,107,232,.95), 0 0 0 17px rgba(30,107,232,.20); } 47.685% { box-shadow: 0 0 0 0 rgba(30,107,232,0), 0 0 0 0 rgba(30,107,232,0); } 100% { box-shadow: 0 0 0 0 rgba(30,107,232,0), 0 0 0 0 rgba(30,107,232,0); } }
  @keyframes kf_1091_45345_opacity_0 {0% { opacity: 0; }24.191% { animation-timing-function: ease-out; opacity: 0; }27.152% { opacity: 1; }32.981% { animation-timing-function: ease-in; opacity: 1; }35.757% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45345_scale_0 {0% { scale: 0.985 0.985; }24.191% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.985 0.985; }28.633% { scale: 1 1; }55.137% { scale: 1 1; }100% { scale: 1 1; } }
  @keyframes kf_1091_45361_opacity_0 {0% { opacity: 1; }28.817% { animation-timing-function: ease-in; opacity: 1; }29.928% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45366_opacity_0 {0% { opacity: 0; }29.373% { animation-timing-function: ease-out; opacity: 0; }30.483% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45376_opacity_0 {0% { opacity: 0; }24.931% { animation-timing-function: ease-out; opacity: 0; }26.412% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45376_translate_0 {0% { translate: 0px 7px; }24.931% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 7px; }28.633% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45383_opacity_0 {0% { opacity: 1; }24.931% { animation-timing-function: ease-in; opacity: 1; }26.226% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45392_opacity_0 {0% { opacity: 0; }26.412% { animation-timing-function: ease-out; opacity: 0; }27.892% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45392_translate_0 {0% { translate: 0px 7px; }26.412% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 7px; }30.112% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45399_opacity_0 {0% { opacity: 1; }26.412% { animation-timing-function: ease-in; opacity: 1; }27.707% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45408_opacity_0 {0% { opacity: 0; }27.892% { animation-timing-function: ease-out; opacity: 0; }29.373% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45408_translate_0 {0% { translate: 0px 7px; }27.892% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 7px; }31.593% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45415_opacity_0 {0% { opacity: 1; }27.892% { animation-timing-function: ease-in; opacity: 1; }29.187% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45422_opacity_0 {0% { opacity: 0; }24.561% { animation-timing-function: ease-out; opacity: 0; }27.522% { opacity: 1; }32.981% { animation-timing-function: ease-in; opacity: 1; }35.757% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45431_opacity_0 {0% { opacity: 0; }32.149% { animation-timing-function: ease-out; opacity: 0; }33.999% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45431_translate_0 {0% { translate: 0px 6px; }32.149% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 6px; }36.034% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45436_opacity_0 {0% { opacity: 1; }31.593% { animation-timing-function: ease-in; opacity: 1; }33.073% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45441_opacity_0 {0% { opacity: 1; }31.593% { animation-timing-function: ease-in; opacity: 1; }33.073% { opacity: 0; }55.137% { opacity: 0; }100% { opacity: 0; } }
  @keyframes kf_1091_45450_opacity_0 {0% { opacity: 0; }35.294% { animation-timing-function: ease-out; opacity: 0; }37.144% { opacity: 1; }55.137% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45450_translate_0 {0% { translate: 0px 8px; }35.294% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 8px; }39.55% { translate: 0px 0px; }55.137% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45457_translate_0 {0% { translate: 0px 0px; }38.255% { translate: 0px 0px; }43.991% { translate: 96px 0px; }55.137% { translate: 96px 0px; }100% { translate: 96px 0px; } }
      @keyframes kf_1091_45479_opacity_0 {0% { opacity: 0; }75% { animation-timing-function: ease-out; opacity: 0; }77.314% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45492_opacity_0 {0% { opacity: 0; }76.379% { animation-timing-function: ease-out; opacity: 0; }79.352% { opacity: 1; }100% { opacity: 1; } }
  @keyframes kf_1091_45492_translate_0 {0% { translate: 0px 12px; }76.382% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); translate: 0px 12px; }82.778% { translate: 0px 0px; }100% { translate: 0px 0px; } }
  @keyframes kf_1091_45492_scale_0 {0% { scale: 0.96 0.96; }76.382% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.96 0.96; }82.778% { scale: 1 1; }100% { scale: 1 1; } }

  #s6.on .n44905{animation:kf_1091_44905_opacity_0 10.8s linear, kf_1091_44905_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45033{animation:kf_1091_45033_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45038{animation:kf_1091_45038_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45045{animation:kf_1091_45045_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6 .s6ai{background:url(img/svg-0cf050d6.svg) center/contain no-repeat}
  #s6 .s6av-s{background:var(--sofia) center/cover}
  #s6.on .n45061{animation:kf_1091_45061_opacity_0 10.8s linear, kf_1091_45061_scale_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .s6pick{animation:kf_s6pick_scale_0 10.8s linear, kf_s6pick_bg_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45121{animation:kf_1091_45121_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45128{animation:kf_1091_45128_opacity_0 10.8s linear;animation-iteration-count:infinite}
    #s6.on .n45142{animation:kf_1091_45142_opacity_0 10.8s linear, kf_1091_45142_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45193{animation:kf_1091_45193_opacity_0 10.8s linear, kf_1091_45193_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45211{animation:kf_1091_45211_opacity_0 10.8s linear, kf_1091_45211_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45226{animation:kf_1091_45226_opacity_0 10.8s linear, kf_1091_45226_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45279{animation:kf_1091_45279_opacity_0 10.8s linear, kf_1091_45279_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45294{animation:kf_1091_45294_opacity_0 10.8s linear, kf_1091_45294_scale_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45303{animation:kf_1091_45303_opacity_0 10.8s linear, kf_1091_45303_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45315{animation:kf_1091_45315_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45334{animation:kf_1091_45334_opacity_0 10.8s linear, kf_1091_45334_translate_0 10.8s linear, kf_1091_45334_scale_0 10.8s linear, kf_1091_45334_shadow_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45345{animation:kf_1091_45345_opacity_0 10.8s linear, kf_1091_45345_scale_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45361{animation:kf_1091_45361_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45366{animation:kf_1091_45366_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45376{animation:kf_1091_45376_opacity_0 10.8s linear, kf_1091_45376_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45383{animation:kf_1091_45383_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45392{animation:kf_1091_45392_opacity_0 10.8s linear, kf_1091_45392_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45399{animation:kf_1091_45399_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45408{animation:kf_1091_45408_opacity_0 10.8s linear, kf_1091_45408_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45415{animation:kf_1091_45415_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45422{animation:kf_1091_45422_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45431{animation:kf_1091_45431_opacity_0 10.8s linear, kf_1091_45431_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45436{animation:kf_1091_45436_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45441{animation:kf_1091_45441_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45450{animation:kf_1091_45450_opacity_0 10.8s linear, kf_1091_45450_translate_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45457{animation:kf_1091_45457_translate_0 10.8s linear;animation-iteration-count:infinite}
      #s6.on .n45479{animation:kf_1091_45479_opacity_0 10.8s linear;animation-iteration-count:infinite}
  #s6.on .n45492{animation:kf_1091_45492_opacity_0 10.8s linear, kf_1091_45492_translate_0 10.8s linear, kf_1091_45492_scale_0 10.8s linear;animation-iteration-count:infinite}

  /* ── scene 5 · attribution ──────────────────────────────── */
  .attr{padding:20px 22px 20px;width:604px}
  .ar{display:grid;grid-template-columns:1fr 74px 52px 50px 72px;gap:8px;align-items:center;
    padding:10px;border-radius:var(--r-field);font-size:13px;font-variant-numeric:tabular-nums;
    opacity:0;transform:translateY(8px);
    transition:opacity .5s var(--spring),transform .5s var(--over),background .5s var(--spring),box-shadow .5s var(--spring)}
  .ar.in{opacity:1;transform:none}
  .ar.hd{padding:0 10px 8px}
  .ar .c-cm,.ar .c-ld,.ar .c-sl,.ar .c-rv{text-align:right}
  .ar .c-rv{font-weight:600}
  .ar .c-post{display:flex;gap:10px;align-items:center;min-width:0;text-align:left}
  .pmeta{min-width:0;flex:1}
  .pmeta .ttl{display:flex;align-items:center;gap:6px;min-width:0}
  .pmeta .ttl b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who{flex:none;font-style:normal;font-size:11px;font-weight:500;line-height:1;padding:3px 8px;border-radius:100px;
    background:var(--surf);color:var(--slate)}
  .who.own{background:var(--blue-wash);color:var(--blue)}
  .hnd{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mute);margin-top:2px;min-width:0}
  .hnd .pav{width:15px;height:15px;border-radius:50%;flex:none;background:var(--lena) center/cover}
  .hnd .pav.pt{background:url(img/webp-0e765ef0.webp) center/cover}
  .hnd svg{width:11px;height:11px;color:var(--faint);flex:none}
  .th{width:34px;height:44px;border-radius:var(--r-chip);flex:none;position:relative;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .th::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);width:0;height:0;
    border-left:7px solid rgba(255,255,255,.88);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
  .th1{background:radial-gradient(64% 46% at 70% 20%,rgba(255,214,166,.85),transparent 72%),
    radial-gradient(56% 44% at 22% 36%,rgba(150,181,240,.8),transparent 72%),
    radial-gradient(50% 40% at 55% 82%,rgba(240,168,150,.45),transparent 75%),
    linear-gradient(168deg,#4a5566,#1c2331)}
  .th2{background:radial-gradient(62% 48% at 28% 24%,rgba(140,224,214,.85),transparent 72%),
    radial-gradient(52% 42% at 72% 74%,rgba(255,226,178,.5),transparent 75%),
    linear-gradient(160deg,#37505a,#16222b)}
  .th3{background:radial-gradient(60% 46% at 64% 66%,rgba(255,206,150,.8),transparent 72%),
    radial-gradient(48% 40% at 26% 22%,rgba(196,178,232,.45),transparent 75%),
    linear-gradient(172deg,#4d463c,#211c15)}
  .ar.hl{background:var(--blue-wash)}
  .c-sl.tickpop{animation:tickp .55s var(--over)}
  @keyframes tickp{30%{transform:scale(1.45);color:var(--blue)}}
  .sale{display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 13px;border-radius:var(--r-card);
    background:#fff;box-shadow:var(--sh-card);
    font-size:13px;color:var(--slate);
    opacity:0;transform:translateY(8px);transition:opacity .5s var(--spring),transform .5s var(--over)}
  .sale.in{opacity:1;transform:none}
  .sale i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);flex:none}
  .sale b{color:var(--ink);font-weight:600}
  .sale .st{margin-left:auto}

  /* ── intro: no layer of its own — the hero's fixed wheel (.hxorbit) */

  /* ── finale: the loop, seen from above ────────────────────── */
  .finlayer{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
    pointer-events:none;opacity:0;will-change:opacity}
  .fincam{position:relative;width:min(86svh,90vw);aspect-ratio:1;

    margin-top:2.4svh;

    transform-origin:50% 92.97%;will-change:transform;
    container-type:inline-size }
  .finring{position:absolute;inset:0;will-change:transform;transition:opacity .6s var(--spring)}
  .finsvg{position:absolute;inset:0;width:100%;height:100%}
  .finsvg .ring{fill:none;stroke:rgba(30,107,232,.20);stroke-width:1.5}

  .finsvg .orb{opacity:0;transition:opacity .9s var(--spring) 1.4s}
  .finlayer.go .orb{opacity:1}
  .fn{position:absolute;transform:translate(-50%,-50%);z-index:2}
  .fnb{display:flex;flex-direction:column;align-items:center;gap:12px;
    opacity:0;transition:opacity .55s var(--spring)}
  .finlayer.go .fnb{opacity:1}

  .fn1{left:50%;top:7.03%}     .finlayer.go .fn1 .fnb{transition-delay:.12s}
  .fn2{left:87.21%;top:28.52%} .finlayer.go .fn2 .fnb{transition-delay:.24s}
  .fn3{left:87.21%;top:71.48%} .finlayer.go .fn3 .fnb{transition-delay:.36s}
  .fn4{left:50%;top:92.97%}    .finlayer.go .fn4 .fnb{transition-delay:.48s}
  .fn5{left:12.79%;top:71.48%} .finlayer.go .fn5 .fnb{transition-delay:.60s}
  .fn6{left:12.79%;top:28.52%} .finlayer.go .fn6 .fnb{transition-delay:.72s}
  .fni{position:relative;width:clamp(46px,7.6cqw,84px);height:clamp(46px,7.6cqw,84px);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 26px rgba(30,107,232,.13),inset 0 0 0 1px rgba(255,255,255,.85),
      0 0 0 1px rgba(30,107,232,.10);color:var(--blue);opacity:.45;
    transition:background-color .5s var(--spring),color .5s var(--spring),
      box-shadow .5s var(--spring),opacity .5s var(--spring)}
  .fni svg{width:clamp(19px,3.2cqw,35px);height:clamp(19px,3.2cqw,35px)}

  /* micro-stat sweep: once the ring settles, each station "completes" in
     story order — icon fills, the night's tally lands on its shoulder */
  .fnstat{position:absolute;top:calc(-4px - .9cqw);right:calc(-8px - 1.1cqw);z-index:1;
    font-family:var(--mono);font-weight:600;font-style:normal;
    font-size:clamp(.52rem,1.35cqw,.8rem);letter-spacing:.05em;line-height:1;
    padding:.35em .6em;border-radius:99px;background:rgba(255,255,255,.94);
    box-shadow:0 6px 16px rgba(30,107,232,.16),0 0 0 1px rgba(30,107,232,.10);
    opacity:0;transform:translateY(7px) scale(.82);
    transition:opacity .4s var(--spring),transform .55s var(--over)}
  .fs-teal{color:#0FBFC9}.fs-pink{color:#E23D7B}.fs-green{color:#23A94F}.fs-blue{color:#2563EF}
  .finlayer.go .fn .fnstat{opacity:1;transform:none}
  .finlayer.go .fn .fni{background:#fff;opacity:1;
    box-shadow:0 14px 30px rgba(30,107,232,.22),inset 0 0 0 1px rgba(255,255,255,.9),
      0 0 0 1px rgba(30,107,232,.16)}
  /* per station: appear dim (.fnb above), brighten +.5s later, badge +.2s after that */
  .finlayer.go .fn1 .fni{transition-delay:.62s}
  .finlayer.go .fn2 .fni{transition-delay:.74s}
  .finlayer.go .fn3 .fni{transition-delay:.86s}
  .finlayer.go .fn4 .fni{transition-delay:.98s}
  .finlayer.go .fn5 .fni{transition-delay:1.10s}
  .finlayer.go .fn6 .fni{transition-delay:1.22s}
  .finlayer.go .fn1 .fnstat{transition-delay:.82s}
  .finlayer.go .fn2 .fnstat{transition-delay:.94s}
  .finlayer.go .fn3 .fnstat{transition-delay:1.06s}
  .finlayer.go .fn4 .fnstat{transition-delay:1.18s}
  .finlayer.go .fn5 .fnstat{transition-delay:1.30s}
  .finlayer.go .fn6 .fnstat{transition-delay:1.42s}
  .fnb>span{font-family:'Inter',var(--sans);font-weight:600;letter-spacing:.01em;
    font-size:clamp(.66rem,1.7cqw,1rem);color:var(--mute);white-space:nowrap;text-align:center}
  .fnc{position:absolute;left:50%;top:50%;width:min(420px,56%);text-align:center;
    transform:translate(-50%,-50%);z-index:3}
  .fncb{opacity:0;transition:opacity .8s var(--spring) 1.05s}
  .finlayer.go .fncb{opacity:1}

  .fnc p{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
  .fnc p b{font-weight:600;color:var(--blue)}

  /* ── stat phase: one more turn of scroll and the loop OPENS — the ring */
  .finlayer.stats .finring{opacity:0}

  .fnc2{position:absolute;left:50%;top:50%;width:min(1080px,90vw);text-align:center;
    transform:translate(-50%,-50%);z-index:6}
  .fncs{opacity:0;pointer-events:none;transform:translateY(18px);
    transition:opacity .6s var(--spring),transform .75s var(--spring)}

  .sthead{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
  .sthead b{font-weight:600;color:var(--blue)}

  .stline{font-family:'Roboto',var(--sans);font-weight:400;font-size:1.25rem;line-height:1.4;letter-spacing:0;color:var(--slate);max-width:44ch;margin:16px auto 0}
  .stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}

  .stcard{padding:26px 16px 22px;border-radius:20px;
    background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 22px 44px -20px rgba(30,107,232,.30),0 3px 8px rgba(14,21,38,.04),
      inset 0 0 0 1px rgba(255,255,255,.88),0 0 0 1px rgba(30,107,232,.07);
    opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--spring),transform .6s var(--over)}

  .stnum{display:block;font-family:'Roboto',var(--sans);font-weight:700;
    font-variant-numeric:tabular-nums;
    font-size:40px;line-height:normal;letter-spacing:-.03em;margin-bottom:8px}
  .st-teal{color:#0FBFC9}.st-pink{color:#E23D7B}.st-green{color:#23A94F}.st-blue{color:#2563EF}

  .stcard>span{display:block;font-family:'Roboto',var(--sans);font-weight:400;font-size:14.5px;
    line-height:1.55;letter-spacing:0;color:var(--slate)}
  .finlayer.stats .fncb{opacity:0;transition:opacity .4s var(--spring)}
  .finlayer.stats .fncs{opacity:1;transform:none}
  .finlayer.stats .stcard{opacity:1;transform:none}
  .finlayer.stats .stcard:nth-child(1){transition-delay:.16s}
  .finlayer.stats .stcard:nth-child(2){transition-delay:.24s}
  .finlayer.stats .stcard:nth-child(3){transition-delay:.32s}
  .finlayer.stats .stcard:nth-child(4){transition-delay:.40s}

  .stnote{max-width:min(100%,560px);margin:26px auto 0;text-wrap:balance;
    font-family:'Roboto',var(--sans);font-weight:400;font-size:13px;line-height:1.5;
    letter-spacing:.01em;color:var(--mute);
    opacity:0;transform:translateY(10px);
    transition:opacity .55s var(--spring),transform .6s var(--over)}
  .finlayer.stats .stnote{opacity:1;transform:none;transition-delay:.5s}

  /* ── mobile: the wheel keeps its turn, the frame gets a RIDE ── */
  @media (max-width:900px){

    .mflow{position:relative}

    .scene{width:min(100vw,478px);padding:0 30px 32px;
      grid-template-columns:minmax(0,1fr);gap:20px;
      justify-items:stretch;align-items:start}

    .scene .copy{order:2;text-align:left;justify-self:stretch;max-width:none}

    .copy p{font-size:16px}
    .scene>.popwrap,.scene>.macwrap,.scene>.duo{order:1;justify-self:center!important}

    .copy h3{margin-bottom:8px}
    .stepdots{justify-content:flex-start;margin-bottom:10px}

    .popwrap,.macwrap{width:100%!important;display:flex;justify-content:center}
    #s1 .popwrap{margin-top:0}

    .scene .phone{zoom:.9}
    /* .link here is scene decoration. The builder gives its own in-run nodes
       a .link class too (app.js, nodeHTML) and they are not decoration —
       unscoped, this rule blanked steps 2, 3 and 4 out of Full Autopilot on
       phones and left the gap they were positioned into. */
    .kbnet,.flarrow,.note,.link:not(.wfn){display:none!important}

    .duo{width:100%!important;height:auto;display:flex;flex-direction:column;align-items:center;gap:18px}

    .duo .mac,.macwrap .mac{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:430px;
      grid-template-columns:minmax(0,1fr)}
    .mac>.mac-bar{grid-column:1;border-bottom:0}
    .mac .side{flex-direction:row;justify-content:flex-start;gap:6px;padding:0 12px 9px}
    .mac .side .bm{display:none}
    .mac .side .si{width:28px;height:28px}
    .duo .phone{position:relative;left:auto;right:auto;bottom:auto;top:auto}

    #s1,#s2,#s3,#s45,#s6t,#s6{gap:0}

    #s1 .copy,#s2 .copy,#s3 .copy,#s45 .copy,#s6t .copy,#s6 .copy{display:contents}
    #s1 .kxkick,#s2 .kxkick,#s3 .kxkick,#s45 .kxkick,#s6t .kxkick,#s6 .kxkick{order:1;margin-bottom:6px}
    #s1 .copy h3,#s2 .copy h3,#s3 .copy h3,#s45 .copy h3,#s6t .copy h3,#s6 .copy h3{order:2;margin-bottom:16px}
    #s1 .copy p,#s2 .copy p,#s3 .copy p,#s45 .copy p,#s6t .copy p,#s6 .copy p{order:4;margin-top:16px}

    #s1 .kxwin,#s2 .kxwin,#s3 .kxwin,#s45 .kxwin,#s6t .kxwin,#s6 .kxwin{order:3;justify-self:start;zoom:var(--kxz,.42)}
    #s6t .kxwin{zoom:1}
    #s6t .mkstage{order:3;justify-self:start;zoom:var(--kxz,.42)}
    #s6t .copy p{margin-top:calc(16px + var(--kxz,.42) * 30px)}
    /* scene 4 · the flow window runs the show; the mail phone slides
       IN over its right edge once the first send fires, and slides OUT
       the moment Purchase lands (Elif: "adımlar ilerlerken telefon bir
       yerden gelsin, purchase olunca kapatalım") */
    /* the scene gutter went up, so the window gives some of its own inset
       back — otherwise the two branch labels lose another word each */
    .flow{width:100%;padding:20px 11px 22px}

    .flow>.fcard{width:100%}
    #s4 .fbrow{gap:9px}
    #s4 .fbrow .fcard{padding:9px 10px;gap:8px}
    #s4 .fbrow .fcard .fic{width:26px;height:26px;border-radius:8px;background:var(--blue);color:#fff}
    #s4 .fbrow .fcard .fic svg{width:14px;height:14px}

    #s4 .fcard .ft b{font-size:12px}
    #s4 .fcard .ft span,#s4 .fcard .fb{font-size:10px}
    #s4 .duo{display:block;position:relative}

    #s4 .duo .mac{margin:0 auto;width:100%}
    #s4 .flow{width:100%}
    #s4 .duo .phone{position:absolute;right:-4px;bottom:-10px;z-index:4;zoom:1;
      width:288px;padding:10px;border-radius:44px;transform-origin:100% 100%;
      transform:translateX(125%) scale(.81) rotate(3deg);opacity:0;margin-bottom:0;
      transition:transform .85s var(--over),opacity .45s ease-out}
    #s4.mailin .duo .phone{transform:scale(.81);opacity:1}
    #s4.maildone .duo .phone{transform:translateX(125%) scale(.81) rotate(3deg);opacity:0;
      transition:transform .7s cubic-bezier(.55,0,.8,.5),opacity .5s .15s}

    .attr{width:100%;padding:16px 14px 16px}
    .ar{grid-template-columns:minmax(0,1fr) 44px 66px;gap:8px;padding:8px 10px}
    .ar.hd{padding:0 10px 7px}
    .ar .c-cm,.ar .c-ld{display:none}
    .pmeta .ttl{flex-wrap:wrap;gap:3px 6px}
    .pmeta .ttl b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
    .sale{margin-top:11px;padding:9px 11px}

    #s5 .lbl{display:none}
    #s5 .macwrap{margin-bottom:14px}
    #s5 .macwrap .mac{transform:scale(1.07);transform-origin:50% 42%}

    .fni{width:34px;height:34px}
    .fni svg{width:15px;height:15px}

    .fnb>span{display:none}

    .fnc{width:70%}
    .fnc p{font-size:26px;line-height:32px}

    .stline{display:block;font-size:1.06rem;max-width:34ch;margin:12px auto 0}

    .fincam{width:min(80svh,99vw)}

    .fnc2{width:min(420px,90vw)}

    .stgrid{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
    .stcard{padding:15px 10px 13px;border-radius:16px;
      box-shadow:0 14px 28px -14px rgba(30,107,232,.28),0 2px 5px rgba(14,21,38,.04),
        inset 0 0 0 1px rgba(255,255,255,.88),0 0 0 1px rgba(30,107,232,.07)}
    .stnum{font-size:29px;margin-bottom:4px}

    .stcard>span{font-size:13px;line-height:1.4;letter-spacing:0}
    .stnote{font-size:12px;margin-top:20px;max-width:38ch}
  }
  /* ══ STAGE HEAD ════════════════════════════════════════════ */
  .jvh{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
    padding-top:clamp(44px,7.5svh,76px)}
  .jvh-in{max-width:1240px;margin:0 auto;padding:0 40px}

  .jvh-pill{display:inline-flex;margin-bottom:12px;padding:8px 12px;border-radius:81px;
    background:#D1DDFF}

  .jvh-pill b{font-family:'Roboto',var(--sans);font-weight:500;font-size:14px;line-height:13.82px;letter-spacing:.058px;
    color:var(--blue-deep)}
  .jvh h2{font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em}

  .jvh h2 b{font-weight:600;color:#5070FE}
  .jvh p{margin-top:12px;max-width:680px;
    font-family:'Roboto',var(--sans);font-size:1.25rem;line-height:1.4;color:var(--slate)}

  @media (min-width:901px) and (max-height:780px){ .jvh p{display:none} }
  @media (max-width:900px){

    .jvh{padding:clamp(30px,5svh,52px) 0 0;text-align:left}
    .jvh-in{padding:0 30px}
    .jvh h2{max-width:none;margin:0}
    .jvh-pill{margin-bottom:14px}
    .jvh p{margin-top:10px;max-width:34ch;font-size:1.02rem;line-height:1.45}
  }

  /* ══ CUSTOMER STORY — The Flex, the finale screen ══════════ */

  .story-fin{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
    text-align:left;padding:48px 52px;border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.44));
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 22px 44px -20px rgba(30,107,232,.30),0 3px 8px rgba(14,21,38,.04),
      inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1px rgba(30,107,232,.07)}

  .fncs .story-copy,.fncs .story-chat{opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--spring),transform .6s var(--over)}
  .finlayer.stats .story-copy{opacity:1;transform:none;transition-delay:.16s}
  .finlayer.stats .story-chat{opacity:1;transform:none;transition-delay:.32s}

  .story-copy h2{font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
  .story-copy h2 b{font-weight:600;color:var(--blue)}
  .story-quote{margin:20px 0 0;max-width:34ch;
    font-size:22px;line-height:1.42;letter-spacing:-.015em;font-weight:500;color:var(--ink)}

  .story-who{margin-top:24px;display:flex;align-items:center;gap:16px}
  .story-who img{height:30px;width:auto;display:block}
  .story-who span{font-family:'Roboto',var(--sans);font-size:13.5px;line-height:1.5;color:var(--mute);
    padding-left:16px;border-left:1px solid var(--line)}

  .story-tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
  .story-tags span{padding:6px 12px;border-radius:100px;
    font-family:'Roboto',var(--sans);font-size:13px;font-weight:500}
  .story-tags .tg-teal{background:rgba(0,184,196,.1);color:#00858F}
  .story-tags .tg-pink{background:rgba(214,41,107,.1);color:#B22359}
  .story-tags .tg-amber{background:rgba(224,86,42,.1);color:#B4431F}

  .story-chat{justify-self:center;width:min(348px,100%)}
  .story-card{border-radius:30px;background:#fff;overflow:hidden;
    box-shadow:0 22px 44px -20px rgba(40,78,76,.35),0 3px 8px rgba(14,21,38,.05),
      0 0 0 1px rgba(40,78,76,.08)}
  .story-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;
    background:linear-gradient(135deg,rgba(40,78,76,.05),rgba(40,78,76,.12));
    border-bottom:1px solid rgba(40,78,76,.10)}
  .story-av{width:38px;height:38px;border-radius:100px;background:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(40,78,76,.16)}
  .story-av img{height:20px;width:auto;display:block}
  .story-hd .bd{display:flex;flex-direction:column;gap:2px}
  .story-hd .nm{font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
  .story-hd .st{display:flex;align-items:center;gap:5px;
    font-family:'Roboto',var(--sans);font-size:11.5px;color:var(--mute)}
  .story-hd .st i{width:6px;height:6px;border-radius:100px;background:#2F8467}
  .story-hd .ch{margin-left:auto;font-family:'Roboto',var(--sans);font-size:11px;color:var(--mute)}

  .story-msgs{display:flex;flex-direction:column;gap:12px;padding:20px 18px 8px}
  .story-m{display:flex;flex-direction:column;gap:4px;max-width:86%}
  .story-m.in{align-self:flex-start}
  .story-m.out{align-self:flex-end}
  .story-m .bb{padding:11px 14px;font-family:'Roboto',var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink)}
  .story-m.in .bb{background:#F0F2F7;border-radius:16px 16px 16px 5px}
  .story-m.out .bb{background:rgba(40,78,76,.10);border-radius:16px 16px 5px 16px;color:#1E3B38}
  .story-m .cap{display:flex;align-items:center;gap:5px;padding:0 4px;
    font-family:'Roboto',var(--sans);font-size:11px;color:var(--mute)}
  .story-m.out .cap{align-self:flex-end}
  .story-m .cap svg{display:block}

  .story-in2{display:flex;align-items:center;gap:10px;padding:6px 14px 16px}
  .story-in2 .fld{flex:1;height:40px;display:flex;align-items:center;padding:0 16px;
    border-radius:100px;background:#F0F2F7;
    font-family:'Roboto',var(--sans);font-size:13px;color:var(--faint)}
  .story-in2 .snd{width:40px;height:40px;border-radius:100px;background:#284E4C;flex-shrink:0;
    display:flex;align-items:center;justify-content:center}
  .story-in2 .snd svg{display:block}

  @media (max-width:900px){
    .story-fin{grid-template-columns:1fr;gap:18px;padding:22px 20px;border-radius:24px}
    .story-copy h2{font-size:1.62rem}
    .story-quote{margin-top:14px;font-size:16px;line-height:1.4;max-width:none}
    .story-tags{display:none}
    .story-who{margin-top:14px;gap:12px}
    .story-who img{height:22px}
    .story-who span{font-size:12px;line-height:1.45;padding-left:12px}
    .story-chat{width:min(300px,100%);zoom:.85;justify-self:center}
    .story-hd{gap:10px;padding:12px 14px}
    .story-av{width:32px;height:32px}
    .story-av img{height:17px}
    .story-msgs{gap:9px;padding:14px 14px 6px}
    .story-m .bb{padding:9px 12px;font-size:13px;line-height:1.42}
    .story-in2{gap:8px;padding:4px 12px 12px}
    .story-in2 .fld{height:34px;padding:0 14px}
    .story-in2 .snd{width:34px;height:34px}
  }
  /* the stage is one screen tall and the card is centred in it, so every
     step down in viewport height buys the card a smaller scale */
  @media (max-width:900px) and (max-height:760px){
    .story-quote{font-size:15px}
    .story-chat{zoom:.78}
  }
  @media (max-width:900px) and (max-height:670px){
    .story-copy h2{font-size:1.45rem}
    .story-who{margin-top:12px;gap:10px}
    .story-who img{height:19px}
    .story-who span{font-size:11px;padding-left:10px}
    .story-chat{zoom:.7}
  }
  @media (max-width:900px) and (max-height:600px) and (orientation:portrait){
    .story-fin{gap:14px;padding:18px 16px}
    .story-quote{margin-top:12px;font-size:14px}
    .story-who{display:none}
    .story-chat{zoom:.64}
  }
  /* phone landscape: height is the scarce axis, so the copy and the chat
     sit side by side again */
  @media (max-width:900px) and (max-height:520px) and (orientation:landscape){
    .fnc2{width:min(760px,94vw)}
    .story-fin{grid-template-columns:1.05fr .95fr;gap:28px;padding:18px 22px}
    .story-copy h2{font-size:1.35rem}
    .story-quote{margin-top:10px;font-size:13.5px;line-height:1.38}
    .story-who{display:flex;margin-top:10px}
    .story-chat{zoom:.56}
  }

  /* ══ CHANNELS ══════════════════════════════════════════════ */

  .chan{position:relative;z-index:2;padding:118px 0 132px;margin-bottom:0;
    background:linear-gradient(180deg,#F2F5FD 0%,#F8FAFD 28%,#fff 56%)}

  .chan::before{content:'';position:absolute;left:0;right:0;top:0;height:560px;
    z-index:0;pointer-events:none;opacity:.45;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .35 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 10%,transparent 62%);
            mask-image:linear-gradient(180deg,#000 0%,#000 10%,transparent 62%)}

  .chan-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 40px}
  .chan-h{max-width:none}
  .chan-h h2{font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em;
    max-width:none;text-wrap:balance}
  .chan-h h2 b{font-weight:600;color:var(--blue)}
  .chan-h p{margin-top:16px;max-width:52ch;
    font-family:'Roboto',var(--sans);font-size:1.25rem;line-height:1.4;color:var(--slate)}

  .chan-grid{margin:52px 0 0;padding:0;list-style:none;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .cc{padding:30px 26px;border-radius:26px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 16px 40px -16px rgba(31,59,110,.2)}
  .cc-ic{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:15px}
  .cc-ic svg{display:block}

  .cc h3{margin-top:20px;font-size:18px;line-height:1.3;letter-spacing:-.02em}
  .cc p{margin-top:8px;font-family:'Roboto',var(--sans);
    font-size:14.5px;line-height:1.55;color:var(--slate)}
  .cc--teal  .cc-ic{background:rgba(0,184,196,.12)}
  .cc--pink  .cc-ic{background:rgba(214,41,107,.12)}
  .cc--blue  .cc-ic{background:rgba(30,107,232,.12)}
  .cc--green .cc-ic{background:rgba(31,168,92,.12)}
  .cc--amber .cc-ic{background:rgba(224,86,42,.12)}

  .lift{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--spring),transform .7s var(--spring)}
  .lift.on{opacity:1;transform:none}
  .cc:nth-child(2){transition-delay:.06s}
  .cc:nth-child(3){transition-delay:.12s}
  .cc:nth-child(4){transition-delay:.18s}
  .cc:nth-child(5){transition-delay:.24s}
  .cc:nth-child(6){transition-delay:.3s}

  /* ══ PRICING ═══════════════════════════════════════════════ */
  .prc{position:relative;z-index:2;padding:110px 0 118px;

    --prc-edge:linear-gradient(135deg,#1E6BE8 0%,#4F6FFF 48%,#8B5CF6 100%);
    background:linear-gradient(180deg,#fff 0,#F1F4FC 170px,
      #F1F4FC calc(100% - 170px),#fff 100%)}
  .prc-in{position:relative;max-width:1240px;margin:0 auto;padding:0 40px}

  .prc-pill{display:inline-flex;margin-bottom:12px;padding:8px 12px;border-radius:81px;
    background:#D1DDFF;font-family:'Roboto',var(--sans);font-weight:500;
    font-size:14px;line-height:13.82px;letter-spacing:.058px;color:var(--blue-deep)}
  .prc-h h2{font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;
    letter-spacing:-.03em;text-wrap:balance}
  .prc-h h2 b{font-weight:600;color:var(--blue)}
  .prc-h p{margin-top:16px;max-width:60ch;
    font-family:'Roboto',var(--sans);font-size:1.25rem;line-height:1.4;color:var(--slate)}

  .prc-grid{margin:52px 0 0;padding:0;list-style:none;
    display:grid;gap:18px;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
  .pc{position:relative;display:flex;flex-direction:column;
    padding:30px 26px;border-radius:26px;background:#fff;
    box-shadow:0 16px 40px -16px rgba(31,59,110,.22)}

  .pc--pop{margin:-16px 0;padding:44.5px 28.5px 38.5px;border:1.5px solid transparent;
    border-radius:28px;
    background:linear-gradient(#fff,#fff) padding-box,var(--prc-edge) border-box;
    box-shadow:0 32px 64px -24px rgba(79,111,255,.5)}
  .pc--pop .pc-ic{width:51px;height:51px;border-radius:17px}
  .pc--pop .pc-ic svg{width:24px;height:24px}
  .pc--pop h3{font-size:19px}
  .pc--pop .pc-price .cur{font-size:24px}
  .pc--pop .pc-price .amt{font-size:45px}
  .pc-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    padding:5px 13px;border-radius:81px;background:var(--prc-edge);color:#fff;
    white-space:nowrap;font-family:'Roboto',var(--sans);font-weight:500;
    font-size:14px;line-height:13.82px;letter-spacing:.058px}

  .pc-ic{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:15px}
  .pc-ic svg{display:block;width:22px;height:22px;fill:none;stroke-width:1.83333;
    stroke-linecap:round;stroke-linejoin:round}
  .pc--teal  .pc-ic{background:rgba(0,184,196,.12)}  .pc--teal  .pc-ic svg{stroke:#00B8C4}
  .pc--blue  .pc-ic{background:rgba(30,107,232,.12)} .pc--blue  .pc-ic svg{stroke:#1E6BE8}
  .pc--amber .pc-ic{background:rgba(224,86,42,.12)}  .pc--amber .pc-ic svg{stroke:#E0562A}
  .pc--green .pc-ic{background:rgba(31,168,92,.12)}  .pc--green .pc-ic svg{stroke:#1FA85C}
  .pc h3{margin-top:20px;font-size:18px;line-height:1.3;letter-spacing:-.02em}

  .pc-for{margin-top:8px;font-family:'Roboto',var(--sans);
    font-size:14.5px;line-height:1.55;color:var(--slate)}

  .pc-price{margin-top:24px;display:flex;align-items:flex-start;gap:2px;
    font-family:var(--sans);font-weight:600;letter-spacing:-.03em;color:var(--ink)}
  .pc-price .cur{padding-top:5px;font-size:22px;line-height:1}
  .pc-price .amt{font-size:40px;line-height:1}
  .pc-price .per{align-self:flex-end;margin-left:4px;
    font-family:'Roboto',var(--sans);font-weight:400;font-size:14.5px;line-height:1;
    letter-spacing:0;color:var(--mute)}

  .pc-vol{margin-top:10px;font-family:'Roboto',var(--sans);
    font-size:14.5px;line-height:1.55;color:var(--mute)}
  .pc-vol b{color:var(--ink);font-weight:600}

  .pc-go{display:block;margin-top:24px;height:44px;line-height:44px;padding:0 16px;
    text-align:center;border-radius:12px;text-decoration:none;
    font-family:'Inter',var(--sans);font-size:16px;font-weight:500;
    background:var(--blue-wash);color:var(--blue-deep);
    transition:background .3s var(--spring),transform .3s var(--over),filter .3s var(--spring)}
  .pc-go:hover{background:rgba(30,107,232,.15);transform:translateY(-1px)}
  .pc-go:active{transform:translateY(0)}
  .pc--pop .pc-go{height:48px;line-height:48px;background:#5070FE;color:#FAFAFA;
    box-shadow:0 12px 26px -12px rgba(80,112,254,.7)}
  .pc--pop .pc-go:hover{background:#3B5BF7}
  .pc-list{margin:24px 0 0;padding:0;list-style:none;
    display:flex;flex-direction:column;gap:12px}
  .pc-list li{display:flex;gap:10px;font-family:'Roboto',var(--sans);
    font-size:14.5px;line-height:1.55;color:var(--slate)}

  .pc-list svg{flex:none;margin-top:4px;width:15px;height:15px;fill:none;
    stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  .pc-list .inh{color:var(--ink);font-weight:600}
  .pc-list .inh svg{stroke:var(--faint);stroke-width:2}
  /* the closing note — a card, so the setup promise reads as part of the offer */
  .setupmini{max-width:900px;margin:44px auto 0;
    display:flex;align-items:center;gap:16px;
    padding:14px 14px 14px 16px;border-radius:18px;background:#fff;
    box-shadow:0 0 0 1px rgba(14,21,38,.06),0 10px 28px -18px rgba(31,59,110,.35)}
  .sm-ic{display:flex;align-items:center;justify-content:center;flex:none;
    width:38px;height:38px;border-radius:12px;background:rgba(80,112,254,.11)}
  .sm-ic svg{width:19px;height:19px;fill:none;stroke:#5070FE;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .sm-tx{flex:1;min-width:0;font-family:'Roboto',var(--sans);
    font-size:14.5px;line-height:1.55;color:var(--mute)}
  .sm-tx b{color:var(--ink);font-weight:600}
  .sm-go{flex:none;height:40px;line-height:40px;padding:0 18px;border-radius:11px;
    text-decoration:none;white-space:nowrap;
    font-family:'Inter',var(--sans);font-size:15px;font-weight:500;
    background:var(--blue-wash);color:var(--blue-deep);
    transition:background .3s var(--spring),transform .3s var(--over)}
  .sm-go:hover{background:rgba(30,107,232,.15);transform:translateY(-1px)}
  .pc:nth-child(2){transition-delay:.06s}
  .pc:nth-child(3){transition-delay:.12s}
  .pc:nth-child(4){transition-delay:.18s}

  @media (max-width:1180px){
    .prc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
    .pc--pop{margin:-10px 0}
  }
  @media (max-width:900px){
    .prc{padding:74px 0 84px}
    .prc-in{padding:0 22px}
    .prc-h p{font-size:1.06rem}
    .prc-grid{grid-template-columns:minmax(0,420px);justify-content:center;
      margin-top:38px;gap:26px}
    .pc--pop{margin:0}
    .setupmini{margin-top:32px}
  }
  @media (max-width:720px){
    .setupmini{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
    .sm-go{align-self:stretch;text-align:center}
  }

  /* ══ CTA + FOOTER ══════════════════════════════════════════ */

  .cta{position:relative;padding:104px 24px 116px;
    background:linear-gradient(180deg,#fff 0,var(--paper) 150px,
      var(--paper) calc(100% - 130px),#fff 100%)}

  .cta-card{position:relative;max-width:1180px;margin:0 auto;border-radius:30px;overflow:hidden;
    padding:66px 64px 70px;text-align:left;
    display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:52px;align-items:center;

    background:radial-gradient(120% 130% at 8% 0%,#4F6FFF 0%,#3A50D8 40%,#202BA0 100%);
    box-shadow:0 44px 90px -34px rgba(32,43,160,.5)}

  .cta-card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.25 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
  .cta-copy{position:relative;z-index:1}
  .cta h2{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3.05vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:rgba(255,255,255,.84)}

  .cta h2 b{font-weight:600;color:#fff}
  .cta p{margin:20px 0 0;max-width:44ch;font-family:'Roboto',var(--sans);font-weight:400;font-size:1.25rem;line-height:1.4;letter-spacing:0;color:rgba(255,255,255,.78)}
  .cta-form{margin-top:40px;display:flex;align-items:center;justify-content:flex-start;
    gap:14px;flex-wrap:wrap}
  .cta-form input{width:320px;height:44px;padding:0 16px;
    border-radius:13px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff;
    font-family:'Roboto',var(--sans);font-size:16px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:border-color .25s ease,background .25s ease,box-shadow .3s var(--spring)}
  .cta-form input::placeholder{color:rgba(255,255,255,.62)}
  .cta-form input:focus{outline:none;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.18);
    box-shadow:0 0 0 4px rgba(255,255,255,.16)}

  .cta-form button{height:44px;padding:8px 16px;border:0;border-radius:12px;
    background:#FAFAFA;color:#18181B;cursor:pointer;
    font-family:'Inter',var(--sans);font-size:16px;line-height:24px;font-weight:500;
    transition:background .3s var(--spring),transform .3s var(--over)}
  .cta-form button:hover{background:#fff;transform:translateY(-1px)}
  .cta-form button:active{transform:translateY(0)}

  .cta-loop{position:relative;z-index:1;width:100%;aspect-ratio:1;justify-self:center}
  .cta-loop svg{position:absolute;inset:0;width:100%;height:100%}
  .cta-loop .lring{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.4}
  .cta-loop .lp{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.5);stroke-width:1}
  .cta-loop .li{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  .cta-loop .ldot{fill:#fff}

  @keyframes lspin{to{transform:rotate(360deg)}}
  @keyframes lspin-rev{to{transform:rotate(-360deg)}}
  .cta-loop .lrot{transform-box:view-box;transform-origin:165px 165px;
    animation:lspin 46s linear infinite}
  .cta-loop .lnode{transform-box:view-box;transform-origin:var(--cx) var(--cy);
    animation:lspin-rev 46s linear infinite}

  .cta-loop.lsleep .lrot,.cta-loop.lsleep .lnode{animation-play-state:paused}

  .foot{background:#fff;padding:46px 40px 34px}
  .foot-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;
    justify-content:space-between;gap:24px;flex-wrap:wrap}
  .foot img{width:111px;height:24.5px;display:block}
  .foot nav{display:flex;align-items:center;gap:22px}
  .foot a,.foot p{font-size:13.5px;line-height:normal;color:#4C5C77}
  .foot a{text-decoration:none;transition:color .25s var(--spring)}
  .foot a:hover{color:var(--blue)}

  @media (max-width:1080px){
    .chan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:900px){

    .chan{padding:74px 0 84px}
    .chan-in{padding:0 22px}
    .chan-h p,.cta p{font-size:1.06rem}
    .chan-grid{grid-template-columns:minmax(0,420px);justify-content:center;margin-top:38px}
    .cta{padding:72px 18px 80px}

    .cta-card{grid-template-columns:1fr;gap:0;padding:46px 26px 50px;border-radius:24px}
    .cta-loop{display:none}
    .cta p{max-width:none}
    .cta-form{gap:12px}
    .cta-form input{width:100%;max-width:none}

    .cta-form{align-items:flex-start}
    .foot{padding:34px 22px 30px}
    .foot-in{justify-content:center;text-align:center;row-gap:18px}
    .foot-in>*{width:100%;display:flex;justify-content:center}
  }

  @media (prefers-reduced-motion:reduce){
    .lift{opacity:1;transform:none;transition:none}
    .cta-loop .lrot,.cta-loop .lnode{animation:none}
  }

  .hxnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
    box-shadow:0 1px 0 rgba(14,21,38,.05);
    transition:transform .5s var(--spring),background .4s var(--spring),box-shadow .4s var(--spring)}
  .hxnav.is-stuck{background:rgba(255,255,255,.86);
    box-shadow:0 1px 0 rgba(14,21,38,.06),0 14px 34px -26px rgba(14,21,38,.26)}
  .hxnav.is-away{transform:translateY(-101%)}
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .hxnav,.hxnav.is-stuck{background:rgba(255,255,255,.97)}
  }

  #channels,#pricing,#demo{scroll-margin-top:76px}
  .hxnav .in{max-width:1240px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;gap:36px}
  .hxnav .lnk{display:flex;gap:30px;margin:0 auto;font-size:.92rem;font-weight:500;color:var(--slate)}
  .hxnav .lnk a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .3s var(--spring)}
  .hxnav .lnk a:hover{color:var(--ink)}

  .hxh1 b{color:#5070FE;font-weight:inherit}

  .hxcta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:8px 16px;border-radius:12px;background:#5070FE;color:#FAFAFA;
    font-family:'Inter',var(--sans);font-size:18px;line-height:28px;font-weight:500;
    text-decoration:none;transition:background .3s var(--spring),transform .3s var(--over)}
  .hxcta.md{font-size:16px;line-height:24px}
  .hxcta.sm{font-size:14px;line-height:20px}
  .hxcta:hover{background:#3B5BF7;transform:translateY(-1px)}
  .hxcta:active{transform:translateY(0)}

  .hxhero{position:relative;isolation:isolate;min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;
    overflow:hidden;background:var(--paper)}

  .hxwash{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(58% 46% at 50% 6%,rgba(255,255,255,.9),transparent 70%),
      radial-gradient(42% 36% at 12% 72%,rgba(15,191,201,.12),transparent 70%),
      radial-gradient(42% 36% at 88% 74%,rgba(226,61,123,.10),transparent 70%),
      linear-gradient(180deg,#F2F5FD 0%,#DFE6FA 46%,#C9D4F6 100%)}
  .hxwash::after{content:'';position:absolute;inset:0;z-index:1;opacity:.45;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .35 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat}
  .hxwash::before{content:'';position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg,transparent 70%,var(--paper) 97%)}

  .hxhero::after{content:'';position:absolute;left:50%;top:46%;width:920px;height:720px;transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.5),rgba(255,255,255,.16) 46%,transparent 70%);
    z-index:0;pointer-events:none}

  .hxorbit{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
    animation:hxoin 1.6s var(--spring) .2s backwards}
  @keyframes hxoin{from{opacity:0}}

  .hxo-wheel{position:absolute;left:50%;top:calc(58% + 27px);width:1554px;height:1554px;
    margin:-1554px 0 0 -777px;transform-origin:50% 100%;will-change:transform}
  .hxo-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

  .hxo-turn{position:absolute;inset:0;transform:rotate(-52deg);
    transition:transform .95s var(--spring);will-change:transform}
  .hxo-turn.hop{transition:none}
  .hxo-turn.hop .hxo-dot{opacity:0}

  .hxo-turn.dive{transition:none}
  .hxo-dot{position:absolute;left:50%;top:100%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
    background:rgb(var(--hxacc,30,107,232));box-shadow:0 0 0 5px rgba(var(--hxacc,30,107,232),.16);
    transition:background .5s var(--spring),box-shadow .5s var(--spring),opacity .32s var(--spring)}

  .hxo-station{position:absolute;left:50%;top:calc(58% + 27px);width:0;height:0;opacity:0;
    will-change:transform,opacity}
  .hxo-si{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 26px rgba(30,107,232,.13),inset 0 0 0 1px rgba(255,255,255,.85),
      0 0 0 1px rgba(30,107,232,.10);color:var(--blue)}
  .hxo-si svg{width:32px;height:32px}

  .hxo-stops{position:absolute;left:50%;top:calc(58% + 27px);width:0;height:0;opacity:0;
    will-change:transform,opacity}

  .hxo-stops i{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
    border-radius:50%;background:linear-gradient(140deg,#7458F5,#1E6BE8);
    box-shadow:0 0 0 5px rgba(30,107,232,.13)}

  @keyframes hxup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  .hxcopy{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(54px,10.5svh,120px);z-index:2}

  .hxh1{margin:0;text-wrap:balance;font-family:'Roboto',var(--sans);font-size:clamp(2.5rem,3.96vw,57px);font-weight:600;
    letter-spacing:-.25px;line-height:calc(64/57);color:var(--ink);
    text-align:center;animation:hxup .8s var(--spring) .05s backwards}
  .hxrotor{display:grid;place-items:center;min-height:52px;animation:hxup .8s var(--spring) .16s backwards}

  .hxline{grid-area:1/1;display:flex;align-items:center;gap:13px;white-space:nowrap;
    opacity:0;transform:rotate(-3.4deg);transform-origin:50% -860px;pointer-events:none;
    transition:opacity .45s var(--spring),transform .7s var(--spring)}
  .hxline.is-on{opacity:1;transform:rotate(0)}
  .hxline.is-out{opacity:0;transform:rotate(3.4deg)}
  .hxline b{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;color:rgb(var(--acc))}
  .hxline i{font-size:2.5rem;font-weight:500;font-style:normal;letter-spacing:-.02em;color:var(--slate)}
  .hxbadge{width:42px;height:42px;border-radius:11px;background:rgb(var(--acc));display:grid;place-items:center;
    box-shadow:0 12px 26px -9px rgba(var(--acc),.72)}
  .hxbadge img{width:24px;height:24px;display:block}
  .p-tiktok{--acc:30,107,232}.p-instagram{--acc:214,41,107}.p-whatsapp{--acc:31,168,92}.p-mail{--acc:224,86,42}

  .hxcue{position:absolute;left:calc(50% - 350px);top:62%;z-index:2;color:#C3CBD8;display:flex;flex-direction:column;gap:-6px;
    text-decoration:none;animation:hxup .8s var(--spring) .5s backwards}
  .hxcue svg{display:block;animation:hxnudge 2.2s var(--spring) infinite}
  .hxcue svg+svg{margin-top:-9px;animation-delay:.12s}
  @keyframes hxnudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

  .hxstage{position:relative;z-index:2;--dsw:1;--dsh:1;--ds:min(var(--dsw),var(--dsh));
    width:calc(825px*var(--ds));height:calc(486px*var(--ds));
    margin-top:clamp(22px,4.6svh,48px);
    animation:hxup .8s var(--spring) .28s backwards;
    transform-origin:50% -980px;will-change:transform;
    transition:transform .78s var(--spring),opacity .42s var(--spring)}

  .hxstage.ride-out{transform:rotate(12deg);opacity:0;
    transition:transform .72s cubic-bezier(.5,.05,.7,.3),opacity .6s cubic-bezier(.33,0,.67,1)}
  .hxstage.ride-in{transition:none;transform:rotate(-15deg);opacity:0}

  /* ══ the hero screen — the same window the rail's scenes are drawn in ══ */
  .hxdesk{display:grid;width:825px;height:486px;transform:scale(var(--ds,1));transform-origin:0 0}
  .hxscr.hxd{grid-area:1/1;display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;
    background:#fff;font-family:'Roboto',var(--sans);text-align:left;
    box-shadow:0 0 0 1px rgba(14,21,38,.05),0 8px 22px rgba(14,21,38,.07),0 40px 80px rgba(14,21,38,.16)}
  .hxstage .hxscr.hxd{background:#fff}


  .hxphone{position:relative;width:316px;height:620px;padding:11px;border-radius:46px;background:#141A28;
    box-shadow:0 46px 90px -34px rgba(14,21,38,.42);transform:scale(.9);transform-origin:50% 0;margin-left:-15px}
  .hxisland{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:98px;height:26px;border-radius:16px;background:#0A0F1C;z-index:3}
  .hxstack{display:grid;height:100%;border-radius:37px;overflow:hidden;background:#fff}

  .hxscr{grid-area:1/1;display:flex;flex-direction:column;height:100%;background:#fff;
    opacity:0;pointer-events:none}
  .hxscr.is-on{opacity:1}
  .hxsb{display:flex;align-items:center;justify-content:space-between;padding:13px 22px 4px;flex:0 0 auto}
  .hxsb span:first-child{font-size:12.5px;font-weight:700;line-height:1;color:var(--ink)}
  .hxsb .r{display:flex;align-items:center;gap:5px}
  .hxsb img{display:block}
  .hxchat{display:flex;align-items:center;gap:10px;padding:8px 14px 12px;background:rgba(var(--acc),.08)}
  .hxchat .meta{display:flex;flex-direction:column;gap:2px}
  .hxchat .app{display:flex;align-items:center;gap:5px;font-size:10.5px;line-height:1;color:var(--mute)}
  .hxcb{width:14px;height:14px;border-radius:4px;background:rgb(var(--acc));display:grid;place-items:center;font-style:normal}
  .hxcb img{display:block}
  .hxchat .meta b{font-size:13px;font-weight:600;line-height:1;color:var(--ink)}
  .hxchat .auto{margin-left:auto;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:100px;
    background:rgba(var(--acc),.1);font-size:9.6px;font-weight:700;letter-spacing:.4px;line-height:1;color:rgb(var(--acc))}
  .hxav{display:grid;place-items:center;border-radius:50%;font-weight:700;color:#fff;flex:0 0 auto}
  .hxav--34{width:34px;height:34px;font-size:14.3px}
  .hxav--26{width:26px;height:26px;font-size:10.9px}
  .hxav--18{width:18px;height:18px;font-size:7.6px}
  .hxav--m{background:var(--maya) center/cover;color:transparent}
  .hxav--l{background:var(--lena) center/cover;color:transparent}
  .hxav--y{background:var(--sofia) center/cover;color:transparent}
  .hxmsgs{flex:1 0 0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:16px 14px}
  .hxrow{display:flex;width:100%}
  .hxrow--end{justify-content:flex-end}
  .hxrow--mid{justify-content:center}
  .hxbub{display:inline-block;font-size:13px;line-height:1.36}
  .hxbub--them{background:#EEF0F3;color:var(--ink);padding:9px 13px;border-radius:16px 16px 16px 5px}
  .hxbub--us{background:rgb(var(--acc));color:#fff;padding:9px 13px;border-radius:16px 16px 5px 16px;max-width:212px}
  .hxbub--sys{background:#F1F3F6;color:var(--mute);font-size:10.5px;padding:5px 11px;border-radius:100px}
  .hxbub--typing{display:flex;align-items:center;gap:4px;padding:11px 13px;border-radius:16px;background:#EEF0F3}
  .hxbub--typing i{width:5px;height:5px;border-radius:50%;background:#9AA4B2;animation:hxtdot 1.3s ease-in-out infinite}
  .hxbub--typing i:nth-child(2){animation-delay:.16s}
  .hxbub--typing i:nth-child(3){animation-delay:.32s}
  @keyframes hxtdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  .hxcomp{display:flex;align-items:center;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line-soft)}
  .hxcomp .fld{flex:1;height:34px;display:flex;align-items:center;padding-left:14px;border-radius:100px;background:#F1F3F6;
    font-size:12.8px;line-height:1;color:var(--mute)}
  .hxcomp .snd{width:34px;height:34px;border-radius:100px;background:rgb(var(--acc));display:grid;place-items:center;flex:0 0 auto}
  .hxmailwrap{flex:1 0 0;min-height:0;padding:16px 12px;display:flex}
  .hxmail{display:flex;flex-direction:column;gap:9px;background:#fff;border-radius:14px;padding:14px;width:100%;align-self:flex-start;
    box-shadow:0 10px 26px rgba(14,21,38,.09),inset 0 0 0 1px var(--line-soft)}
  .hxmail .from{display:flex;align-items:center;gap:8px}
  .hxmail .who{display:flex;flex-direction:column;gap:1px}
  .hxmail .who b{font-size:12px;font-weight:600;line-height:1;color:var(--ink)}
  .hxmail .who i{font-size:10.5px;font-style:normal;line-height:1;color:var(--mute)}
  .hxmail h4{margin:4px 0 0;font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:1.25;color:var(--ink)}
  .hxmail p{margin:0;font-size:12.4px;line-height:1.5;color:var(--slate)}
  .hxmail .btn{align-self:flex-start;margin-top:4px;padding:9px 14px;border-radius:8px;background:rgb(var(--acc));
    font-size:12px;font-weight:600;line-height:1;color:#fff}

  .hxscr.p-mail{background:#fff}
  .hgmbar,.hgmsub,.hgmfrom,.hgmbody,.hgmfoot{font-family:'Roboto',-apple-system,system-ui,sans-serif}
  .hgmbar{display:flex;align-items:center;padding:12px 15px 10px;color:#444746}
  .hgmbar .sp{flex:1}
  .hgmbar .r{display:flex;align-items:center;gap:17px}
  .hgmbar svg,.hgmsub svg,.hgmfrom svg,.hgmfoot svg{display:block;flex:0 0 auto}
  .hgmsub{display:flex;align-items:center;gap:8px;padding:8px 16px 4px}
  .hgmsub b{flex:1;font-size:15px;font-weight:500;line-height:1.3;color:#1f1f1f}
  .hgmsub .inb{font-size:9.5px;line-height:1;padding:4px 6px;border-radius:4px;background:#E8EAED;color:#5f6368}
  .hgmfrom{display:flex;align-items:center;gap:10px;padding:10px 16px 8px}
  .hgmav{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--lena) center/cover}
  .hgmfrom .hwho{display:flex;flex-direction:column;gap:4px;min-width:0}
  .hgmfrom .hwho .t{display:flex;align-items:baseline;gap:7px}
  .hgmfrom .hwho .t b{font-size:12.8px;font-weight:500;line-height:1;color:#1f1f1f}
  .hgmfrom .hwho .t i{font-style:normal;font-size:10.5px;line-height:1;color:#5f6368}
  .hgmfrom .hwho .to{display:flex;align-items:center;gap:4px;font-size:10.8px;line-height:1;color:#5f6368}
  .hgmfrom .r{margin-left:auto;display:flex;align-items:center;gap:15px}
  .hgmbody{padding:8px 16px 0;font-size:12.8px;line-height:1.55;color:#1f1f1f}
  .hgmbody p{margin:0 0 14px}
  .hgmcta{display:inline-block;padding:10px 15px;border-radius:11px;background:rgb(var(--acc));
    font-size:12.3px;font-weight:500;line-height:1;color:#fff}
  .hgmauto{display:flex;justify-content:flex-end;padding:12px 16px 0}
  .hgmfoot{margin-top:auto;display:flex;gap:10px;padding:12px 14px 16px}
  .hgmfoot span{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:36px;
    border:1px solid #C4C7C5;border-radius:100px;font-size:12.5px;font-weight:500;color:#444746}

  .hxscr.p-tiktok{background:#000}
  .hxscr.p-tiktok .hxsb{filter:invert(1)}
  .tkvid{position:relative;height:92px;flex:0 0 auto}
  .tkvid .thumb{position:absolute;left:50%;top:0;bottom:0;width:150px;transform:translateX(-50%);
    background:linear-gradient(160deg,#1B4965,#0E7490 55%,#0BA4C4);border-radius:2px}
  .tkvid .srch{position:absolute;right:16px;top:10px}
  .tksheet{flex:1 0 0;min-height:0;display:flex;flex-direction:column;background:#fff;border-radius:14px 14px 0 0}
  .tkhd{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 14px 11px}
  .tkhd b{font-size:11.5px;font-weight:600;line-height:1;color:#161823}
  .tkhd svg{display:block}
  .tkhd .x{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
  .tkcs{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:6px 14px 10px;overflow:hidden}
  .tkc{display:flex;gap:9px}
  .tkc.tkre{margin-left:39px}
  .tkc .av{width:30px;height:30px;font-size:12.6px}
  .avp{border-radius:50%;flex:0 0 auto;background:var(--lena) center/cover}
  .tkc.tkre .avp{width:24px;height:24px}
  .tkc .bd{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
  .tkc .nm{display:flex;align-items:center;gap:5px;font-size:10.8px;line-height:1;font-weight:500;color:#8A8B91}
  .tkc .nm .cr{color:#0BA4C4;font-weight:600}
  .tkc .tx{font-size:12.8px;line-height:1.4;color:#161823}
  .tkc .mt{display:flex;align-items:center;gap:14px;font-size:10.5px;line-height:1;color:#8A8B91;margin-top:1px}
  .tkc .mt .lk{margin-left:auto;display:flex;align-items:center;gap:4px}
  .tkc .mt svg{display:block}
  .tkauto{display:flex;justify-content:flex-end;margin-top:-5px}
  .tkbar{display:flex;align-items:center;gap:9px;padding:9px 12px 11px;border-top:1px solid #F0F0F1}
  .tkbar .avp{width:30px;height:30px}
  .tkbar .fld{flex:1;height:34px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:100px;
    background:#F1F1F2;font-size:12.6px;line-height:1;color:#8A8B91}
  .tkbar .fld i{flex:1}
  .tkbar svg{display:block;flex:0 0 auto}

  .igxhd{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;border-bottom:1px solid rgba(0,0,0,.08)}
  .igxhd svg{display:block;flex:0 0 auto}
  .igxava{width:32px;height:32px;font-size:13.4px;position:relative}
  .igxava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
    background:#1CD14F;border:2px solid #fff}
  .igxmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
  .igxmeta b{font-size:13.5px;font-weight:600;line-height:1;color:#111}
  .igxmeta i{font-style:normal;font-size:10.5px;line-height:1;color:#8E8E8E}
  .igxact{margin-left:auto;display:flex;align-items:center;gap:17px}
  .hxscr.p-instagram .hxmsgs{gap:7px}
  .igxtime{font-size:9.5px;line-height:1;color:#8E8E8E;padding:4px 0 2px}
  .igxin{align-items:flex-end;gap:7px}
  .igxsm{width:20px;height:20px;font-size:8.4px;flex:0 0 auto}
  .igxsp{width:20px;flex:0 0 auto}
  .igxb{display:inline-block;max-width:72%;padding:9px 13px;border-radius:18px;font-size:12.8px;line-height:1.35}
  .igxb--in{background:#EFEFEF;color:#111}
  .igxb--in.rb{border-bottom-left-radius:5px}
  .igxb--in.rt{border-top-left-radius:5px}
  .igxb--out{background:linear-gradient(135deg,#7A40F2,#3D6DF6);color:#fff}
  .igxtyping{display:flex;align-items:center;gap:4px;padding:12px 13px}
  .igxtyping i{width:5px;height:5px;border-radius:50%;background:#9A9A9A;animation:hxtdot 1.3s ease-in-out infinite}
  .igxtyping i:nth-child(2){animation-delay:.16s}
  .igxtyping i:nth-child(3){animation-delay:.32s}
  .igxcomp{padding:8px 10px 12px;background:#fff}
  .igxfld{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px 0 5px;border-radius:100px;
    background:#F1F1F2;font-size:12.8px;line-height:1;color:#8E8E8E}
  .igxfld svg{display:block;flex:0 0 auto}
  .igxfld .sp{flex:1}
  .igxcam{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(135deg,#7A40F2,#3D6DF6)}

  .hxbrk{position:absolute;left:-30px;right:-30px;bottom:88px;z-index:4;display:flex;flex-direction:column;gap:8px;
    padding:13px 15px 14px;border-radius:16px;background:color-mix(in srgb,rgb(var(--acc)) 9%,#fff);
    box-shadow:0 26px 50px -18px rgba(var(--acc),.45),0 6px 16px -8px rgba(var(--acc),.25),
      inset 0 0 0 1px rgba(var(--acc),.16);
    opacity:0;transform:translateY(12px) scale(.95);pointer-events:none;
    transition:opacity .5s var(--spring),transform .7s var(--spring)}
  .hxbrk.is-on{opacity:1;transform:none;transition-delay:.55s}

  .hxbrk .hxbk-hd{display:flex;align-items:center;gap:8px}
  .hxbrk .hxbk-hd b{font-size:12.6px;font-weight:600;line-height:1;color:var(--ink)}
  .hxbrk .hxbk-ic{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
    background:rgba(var(--acc),.14);color:rgb(var(--acc))}
  .hxbrk .hxbk-ic svg{display:block}

  .hxbrk .hxbk-st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px 4px 8px;border-radius:100px;background:rgba(var(--acc),.13);
    font-family:'Roboto',var(--sans);font-size:10.4px;font-weight:500;line-height:1.1;color:rgb(var(--acc))}
  .hxbrk .hxbk-st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
  .hxbrk .hxbk-row{display:flex;align-items:center;gap:9px;font-size:12.6px;line-height:1.4;min-width:0}
  .hxbrk .hxbk-row+.hxbk-row{margin-top:-2px}
  .hxbrk .hxbk-k{flex:0 0 auto;width:54px;color:var(--mute)}
  .hxbrk .hxbk-v{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink);white-space:nowrap}
  .hxbrk .hxbk-v em{font-style:normal;font-weight:600;color:rgb(var(--acc))}
  .hxbrk .hxbk-ar{color:var(--faint)}

  .hxscr.p-whatsapp{background:#EFEAE2}
  .hxscr.p-whatsapp .hxsb{background:#F6F5F1}
  .wahd{display:flex;align-items:center;gap:9px;padding:7px 12px 9px 10px;background:#F6F5F1;
    border-bottom:1px solid rgba(20,26,40,.12)}
  .wahd svg{display:block;flex:0 0 auto}
  .wahav{width:33px;height:33px;font-size:13.8px}
  .wameta{display:flex;flex-direction:column;gap:3px;min-width:0}
  .wameta b{font-size:13.5px;font-weight:600;line-height:1;color:#0B141A}
  .wameta i{font-style:normal;font-size:10.5px;line-height:1;color:#667781}
  .waact{margin-left:auto;display:flex;align-items:center;gap:16px}
  .hxscr.p-whatsapp .hxmsgs{gap:8px;padding:12px 12px 14px;background-color:#EFEAE2;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='none' stroke='%23E1D7CA' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M24,14c1,6,4,9,10,10c-6,1-9,4-10,10c-1-6-4-9-10-10c6-1,9-4,10-10z'/><circle cx='92' cy='26' r='5.5'/><path d='M114,54q5-7,10,0t10,0'/><path d='M18,74q6-8,12,0t12,0'/><path d='M75,75c-5-4-8-7-8-11a4.6,4.6,0,0,1,8-2.6a4.6,4.6,0,0,1,8,2.6c0,4-3,7-8,11z'/><circle cx='134' cy='96' r='2' fill='%23E1D7CA' stroke='none'/><path d='M34,116c1,5,3.5,7.5,8.5,8.5c-5,1-7.5,3.5-8.5,8.5c-1-5-3.5-7.5-8.5-8.5c5-1,7.5-3.5,8.5-8.5z'/><circle cx='104' cy='128' r='6.5'/><path d='M64,138q5-6,10,0'/><circle cx='12' cy='44' r='1.8' fill='%23E1D7CA' stroke='none'/><circle cx='72' cy='16' r='1.8' fill='%23E1D7CA' stroke='none'/><path d='M132,16q-6,2-8,8'/></g></svg>");
    background-size:150px 150px}
  .wapill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:#fff;
    color:#54656F;font-size:10px;font-weight:500;line-height:1.15;box-shadow:0 1px .5px rgba(11,20,26,.13)}
  .wapill--e2e{display:inline-block;max-width:238px;padding:6px 11px;border-radius:10px;background:#FFF6C7;
    color:#54655F;font-size:9.4px;font-weight:400;text-align:center}
  .wapill--e2e svg{display:inline-block;vertical-align:-1px;margin-right:3px}
  .wab{position:relative;display:inline-block;max-width:80%;padding:6px 8px 7px 9px;border-radius:8px;
    font-size:12.6px;line-height:1.35;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
  .wab--in{background:#fff}
  .wab--out{background:#D9FDD3}
  .wab--tail.wab--in{border-top-left-radius:0}
  .wab--tail.wab--out{border-top-right-radius:0}
  .wab--tail.wab--in::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='13'><path fill='white' d='M8,0H0C4,2,7,6,8,13Z'/></svg>") no-repeat}
  .wab--tail.wab--out::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='13'><path fill='%23D9FDD3' d='M0,0H8C4,2,1,6,0,13Z'/></svg>") no-repeat}
  .wam{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px -2px -4px 8px;
    font-size:9.6px;line-height:1;color:#667781}
  .wam svg{display:block}
  .wauto{display:inline-flex;align-items:center;gap:4px;margin-top:-2px;padding:4px 8px;border-radius:100px;
    background:#fff;box-shadow:0 1px 2px rgba(11,20,26,.16);font-family:'Roboto',var(--sans);
    font-size:9.6px;font-weight:500;letter-spacing:.005em;line-height:1.15;color:#0E4CB8}
  .wacomp{display:flex;align-items:center;gap:11px;padding:8px 10px 10px;background:#F6F5F1;
    border-top:1px solid rgba(20,26,40,.12)}
  .wacomp>svg{flex:0 0 auto;display:block}
  .wafld{flex:1;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 9px 0 12px;
    border-radius:100px;background:#fff;border:1px solid rgba(20,26,40,.14);font-size:12.8px;line-height:1;color:#8696A0}
  .wafld svg{display:block}

  .hxstrip{margin-top:auto;width:100%;padding:36px 0 30px;display:flex;flex-direction:column;align-items:center;gap:20px;
    z-index:2;animation:hxup .8s var(--spring) .42s backwards}
  .hxstrip .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);font-weight:500}
  .hxmq{width:min(1240px,calc(100% - 48px));overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .hxmq .track{display:flex;gap:56px;width:max-content;animation:hxslide 30s linear infinite}
  .hxmq:hover .track{animation-play-state:paused}
  .hxmq .set{display:flex;gap:56px;align-items:center}
  .hxpl{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:600;color:var(--faint);white-space:nowrap}
  .hxpl img{display:block}
  @keyframes hxslide{to{transform:translateX(calc(-100%/3 - 56px/3))}}

  .hxsleep .hxmq .track,.hxsleep .hxbub--typing i,.hxsleep .igxtyping i,
  .hxsleep .hxcue svg{animation-play-state:paused}

  @media (max-width:1200px){.hxo-turn{transform:rotate(-40deg)}}

  @media (max-width:1240px){.hxstage{--dsw:.84}}
  @media (max-width:1060px){.hxstage{--dsw:.72}}
  @media (max-width:900px){.hxstage{--dsw:.62}}
  @media (max-width:1100px){.hxcue{display:none}}
  @media (max-width:720px){

    .hxnav .lnk{display:none}
    .hxnav .in{padding:0 20px;gap:12px;justify-content:space-between}
    .hxnav .hxcta{font-size:14px;line-height:20px}
    .hxnav .in>a:first-child img{width:96px;height:auto}
    .hxh1{font-size:min(2.5rem,8.4vw)}
    .hxline b,.hxline i{font-size:1.55rem}
    .hxline{gap:9px}
    .hxbadge{width:30px;height:30px;border-radius:8px}
    .hxbadge img{width:18px;height:18px}
    .hxrotor{min-height:38px}

    .hxstage{--dsw:.44;margin-top:auto}
  }

  @media (max-width:400px){
    .hxstage{--dsw:.38}
  }

  @media (max-width:340px){
    .hxstage{--dsw:.34}
  }

  @media (max-height:960px) and (min-width:721px){
    .hxcopy{margin-top:46px}
    .hxstage{margin-top:22px;--dsh:.86}
    .hxstrip{padding:26px 0 24px;gap:16px}
  }

  /* ══ the hero window is the rail's window ═══════════════════════════
     Same 825x486 .kxwin body, same .kxbar, same .win-in > .mkside + .pane,
     and the same kit inside it — see the marketing scene further down. */
  .hxscr.hxd{grid-area:1/1;display:block;position:relative;height:100%;
    border-radius:16px;overflow:hidden;background:#fff;
    font-family:'Inter',var(--sans);text-align:left;
    box-shadow:0 0 0 1px rgba(14,21,38,.05),0 8px 22px rgba(14,21,38,.07),
      0 40px 80px rgba(14,21,38,.16)}
  .hxscr.hxd *{box-sizing:border-box}
  .hxd .kxbar{width:auto;right:0}
  .hxd .pg.on{opacity:1}

  /* ── the pane is bigger; the rail is where it was ─────────────────
     "ekranlar cok guzel ama fazla kucuk kaliyor, yazilar falan. Sol
     kisimdaki navbar haric, ekranin kalan kisimlarini buyutebilir miyiz
     tum ekranlarda" -- 825x486 of design shown at .86 on a 900px desk is
     what makes the copy small: the kit's 8.4px body text lands at 7.2 and
     its 6.6px pill at 5.7. Growing the window is not available, because
     --ds is already the height of the screen; and growing the type alone
     would mean re-stating every one of the kit's own sizes inside .hxd.

     zoom does the one thing needed: it grows everything inside a box
     without growing the box. The pane keeps the 682x434 it has always had
     on screen, everything in it is drawn 1.2x larger, and the rail --
     which the note leaves alone -- is outside it and untouched.

     What it costs is design room: the pane is now measured against
     568x362 rather than 682x434. The three places that were fitted to the
     old figure are re-fitted below -- the inbox's three columns and its
     conversation list, and the board's trays. */
  .hxd .pane{zoom:1.2}
  .mkui .s-sub.here{background:#E6ECEC;color:#00484A}

  /* No subject in the line any more, so .hxline u and the three type steps
     that were added to make room for it are gone.

     What replaced them is a longer line, not a shorter one. "turns comments
     into conversations" is 666px on the desktop against the 472px of the
     line it replaces, and 422px once main's own phone step has taken the
     type to 1.55rem -- against the 341px screen where that step starts. The
     old answer was another notch down; here that does not work. To fit this
     copy on one line at 320 the type would have to fall to about 19px, and
     the headline over it is 27px on the same screen.

     So on phones the line breaks instead of shrinking. .hxline i takes
     flex-basis:100% and lands on a row of its own -- the same break in
     every beat, so the rotor does not change height as the beats turn --
     and the type stays exactly where the hero's own step put it. The widest
     row that leaves is 221px at 320, where 288px is available.

     The break needs the copy column to know how wide it is. .hxcopy is a
     fit-content item in a column flex that centres rather than stretches,
     so until now it simply grew past the screen and was clipped by
     .hxhero's overflow -- which is why the old line was being cut at both
     ends rather than overflowing the page. It is bounded here. */
  /* One step in between, for the band where main's own type step has not
     kicked in yet but the line no longer has room. At 721px -- the first
     pixel above that step -- the 666px line leaves 28px of air either side,
     and the lines that are riding out sit on a 3.4deg arc swung around a
     point 860px overhead, which throws their ends about 51px further out
     still. The min-width half of the query matters: this block is appended
     after main's max-width:720px step, so without it the larger type would
     win on phones too. */
  @media (min-width:721px) and (max-width:860px){
    .hxline b,.hxline i{font-size:2.1rem}
    .hxline{gap:11px}
    .hxbadge{width:38px;height:38px;border-radius:10px}
    .hxbadge img{width:22px;height:22px}
    .hxrotor{min-height:46px}
  }

  /* The extra air over the headline is a desktop note -- "her seyi yukaridaki
     navbara margin birakarak uzaklastir" was written against a wide screen,
     where the nav is a full bar and the hero has room to give. A phone's nav
     is a logo and one button, and its hero is already scrolling, so the step
     below hands the phones back the measure they had. */
  @media (max-width:720px){
    .hxcopy{margin-top:clamp(30px,7svh,84px)}
  }

  @media (max-width:480px){
    .hxcopy{max-width:100%;padding:0 16px;box-sizing:border-box}
    .hxrotor{width:100%;min-height:72px}
    .hxline{width:100%;flex-wrap:wrap;justify-content:center;row-gap:0;line-height:1.16}
    .hxline i{flex-basis:100%;text-align:center}
  }

  /* ── the three pieces the kit did not have ─────────────────────────
     A two-column page, a message thread, and a cell that can hold two
     states so a pill changes without the row reflowing. Every value below
     is one of .mkui's own tokens at .mkui's own scale. */
  /* ── the Unified Inbox: list · thread · context ────────────────────
     Three columns inside a flush .pg -- 164 + 288 + 116 across the 568
     the zoomed pane is left with once the rail has taken its 143. The list is the
     periphery so it is bars, and only its channel badges and its status
     carry meaning; the thread and the AI summary are the only places on
     the screen allowed to hold a sentence. Every value is one of .mkui's
     own tokens at .mkui's own scale. */
  .mkui .pg.flush{padding:0}
  .mkui .hb-cols{display:flex;height:362px}

  .mkui .hb-list{flex:0 0 164px;border-right:1px solid var(--i-line);
    padding:10px 8px;display:flex;flex-direction:column;overflow:hidden}
  .mkui .hb-lhd{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:7px}
  .mkui .hb-lhd b{font-size:10.5px;font-weight:600;color:var(--i-ink);letter-spacing:-.15px}
  .mkui .hb-rnds{display:flex;gap:4px}
  .mkui .hb-rnds i{width:13px;height:13px;border-radius:50%;
    border:1px solid var(--i-line);display:block}
  .mkui .hb-fil{margin-bottom:6px;gap:3px}
  .mkui .hb-fil .chp{font-size:6.8px;padding:3px 6px;white-space:nowrap}
  .mkui .hb-list .srch{margin-bottom:6px;max-width:none;height:17px}
  .mkui .hb-cvs{display:flex;flex-direction:column;gap:4px;min-height:0}

  .mkui .hb-cv{display:flex;gap:7px;padding:6px;border:1px solid var(--i-line);
    border-radius:7px;background:#fff;flex:none;height:52px}
  .mkui .hb-cv.on{background:var(--i-bluesoft);border-color:#CBD5FF}
  .mkui .hb-cvc{flex:1;min-width:0}
  .mkui .hb-cvt{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:4px}
  .mkui .hb-cvt b{height:5px;border-radius:6px;background:#A9ACB3}
  .mkui .hb-cvt i{width:16px;height:4px;border-radius:6px;background:var(--i-ghost)}
  .mkui .hb-cvl{display:flex;flex-direction:column;gap:3px}
  .mkui .hb-cvl b{height:4px;border-radius:6px;background:var(--i-ghost)}
  .mkui .hb-cv.on .hb-cvl b{background:#C7D2FE}
  .mkui .hb-cvst{margin-top:5px;display:flex;align-items:center;
    justify-content:space-between;gap:5px}
  .mkui .hb-cvch{display:flex;align-items:center;gap:3px;min-width:0}
  .mkui .hb-cvch svg{width:8.5px;height:8.5px;display:block;flex:none}
  .mkui .hb-cvch em{font-style:normal;font-size:6.6px;font-weight:600;
    color:var(--i-ink2);letter-spacing:-.05px;white-space:nowrap}

  /* Inside the window the channel marks carry their own colour. The strip
     under the hero is a marketing surface and stays muted on purpose, but
     this is the app, and six platforms arriving in one list is the whole
     claim -- the eye has to be able to sort them without reading. */
  .mkui .ch-tt{color:#101828}
  .mkui .ch-ig{color:#D6296B}
  .mkui .ch-wa{color:#1FA85C}
  .mkui .ch-ms{color:#0B84FF}
  .mkui .ch-gm{color:#E0562A}

  /* the avatar wears the channel the message came in on */
  .mkui .hb-avb{position:relative;flex:none;width:20px;height:20px}
  .mkui .hb-avb .hb-av{width:20px;height:20px}
  .mkui .hb-avb>i{position:absolute;right:-2px;bottom:-2px;width:9.5px;height:9.5px;
    border-radius:3px;background:#fff;display:grid;place-items:center;
    box-shadow:0 0 0 .5px rgba(13,20,36,.10)}
  .mkui .hb-avb>i svg{width:7px;height:7px;display:block}
  .mkui .hb-avb>i.ch-app{width:11px;height:11px;right:-3px;bottom:-3px;
    background:none;border-radius:0;box-shadow:none}
  .mkui .hb-avb>i.ch-app svg{width:100%;height:100%}
  .mkui .hb-av{width:17px;height:17px;border-radius:50%;flex:none;overflow:hidden;
    background:var(--i-ghost2);display:grid;place-items:center}
  .mkui .hb-face{width:100%;height:100%;display:block;border-radius:50%;
    background:url(Avatar.png) center/cover no-repeat}

  .mkui .hb-thrc{flex:1;min-width:0;display:flex;flex-direction:column;
    position:relative;border-right:1px solid var(--i-line);background:#fff}

  /* ── the proposal, sitting over the thread it is about ────────────
     A card, not a bubble: it is not in the conversation yet. The blue
     halo is the kit's --i-blue at 13%, the chips are .pill's soft blue,
     and the auto-send bar is 2.5px of --i-blue on --i-ghost. */
  .mkui .hb-prop{position:absolute;right:11px;bottom:49px;width:240px;z-index:4;
    background:#fff;border:1px solid var(--i-blue);border-radius:10px;padding:9px 10px 10px;
    box-shadow:0 0 0 5px rgba(80,112,254,.13),0 16px 34px -14px rgba(13,20,36,.30)}
  .mkui .hb-prh{display:flex;align-items:center;gap:5px;margin-bottom:7px}
  .mkui .hb-prh .spark{width:11px;height:11px;flex:none}
  .mkui .hb-prh b{font-size:8.6px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-prh em{font-style:normal;font-size:8px;font-weight:600;color:var(--i-blue)}
  .mkui .hb-prh i{margin-left:auto;font-style:normal;font-size:8px;color:var(--i-ink3)}
  .mkui .hb-src{display:flex;align-items:center;gap:6px;height:21px;padding:0 7px;
    background:#F5F7FA;border:1px solid var(--i-line2);border-radius:7px}
  .mkui .hb-src svg{width:9.5px;height:9.5px;display:block;flex:none;color:var(--i-blue)}
  .mkui .hb-srcw{width:140px;height:11px}
  .mkui .hb-src .hb-sw>*{display:flex;align-items:center;height:11px}
  .mkui .hb-src .t{font-size:7.4px;font-weight:500;color:var(--i-ink2);white-space:nowrap}
  .mkui .hb-src u{margin-left:auto;text-decoration:none;font-size:9px;color:var(--i-ink3)}
  .mkui .hb-kbs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .mkui .hb-kb{display:inline-flex;align-items:center;gap:4px;font-size:7px;font-weight:600;
    color:#1B4FA8;background:var(--i-bluesoft);border-radius:20px;padding:3px 7px}
  .mkui .hb-kb s{width:3.5px;height:3.5px;border-radius:50%;background:var(--i-blue);
    text-decoration:none;flex:none}
  .mkui .hb-prd{margin:7px 0 0;font-size:8.4px;line-height:1.5;color:var(--i-ink)}
  .mkui .hb-prf{display:flex;align-items:flex-end;gap:7px;margin-top:8px}
  .mkui .hb-auto{flex:1;min-width:0;padding-bottom:2px}
  .mkui .hb-auto em{display:block;font-style:normal;font-size:7px;color:var(--i-ink3);
    margin-bottom:4px}
  .mkui .hb-bar{display:block;height:3px;border-radius:2px;background:var(--i-ghost);
    overflow:hidden}
  .mkui .hb-bar i{display:block;height:100%;width:0;background:var(--i-blue);border-radius:2px}
  .mkui .hb-prf .btn{height:19px;font-size:7.6px;padding:0 9px}
  .mkui .hb-thd{display:flex;align-items:center;gap:7px;padding:9px 12px;
    border-bottom:1px solid var(--i-line);flex:none}
  .mkui .hb-thn{min-width:0}
  .mkui .hb-thn b{display:block;font-size:9px;font-weight:600;color:var(--i-ink);
    letter-spacing:-.1px}
  .mkui .hb-thn em{display:block;font-style:normal;font-size:7.2px;color:var(--i-ink3);
    margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mkui .hb-thd .hb-wc{margin-left:auto}
  .mkui .hb-dots{display:flex;gap:3px;flex:none}
  .mkui .hb-dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--i-ghost)}
  .mkui .hb-body{flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;
    justify-content:flex-end;overflow:hidden}
  .mkui .hb-day{margin-bottom:auto;display:flex;justify-content:center;padding-bottom:10px}
  .mkui .hb-day span{font-size:6.6px;font-weight:500;color:var(--i-ink3);
    background:#F4F6F8;border-radius:20px;padding:2.5px 8px}

  .mkui .hb-msg{max-width:86%;margin-bottom:9px}
  .mkui .hb-msg.own{align-self:flex-end}
  .mkui .hb-bub{border:1px solid var(--i-line);border-radius:8px;padding:7px 9px;
    background:#F7F8FA}
  .mkui .hb-msg.own .hb-bub{background:var(--i-bluesoft);border-color:#CBD5FF}
  .mkui .hb-who{display:flex;align-items:center;gap:4px;margin-bottom:4px;
    font-size:7.6px;color:var(--i-ink2)}
  .mkui .hb-who b{font-weight:600;color:var(--i-ink)}
  .mkui .hb-who svg{width:9px;height:9px;display:block;flex:none}
  .mkui .hb-who i,.mkui .hb-cch i{display:flex;flex:none}
  .mkui .hb-ai{display:flex;align-items:center;gap:3px}
  .mkui .hb-ai b{color:var(--i-blue)}
  .mkui .hb-ai .spark{width:7.5px;height:7.5px}
  .mkui .hb-sub{color:var(--i-ink3)}
  .mkui .hb-bub p{margin:0;font-size:8.4px;line-height:1.5;color:var(--i-ink)}
  .mkui .hb-msg.own .hb-bub p{color:#16307E}
  .mkui .hb-bub em{display:block;margin-top:4px;font-style:normal;font-size:6.8px;
    color:var(--i-ink3)}
  .mkui .hb-msg.own .hb-bub em{color:#6F84C8}
  .mkui .hb-stamp{margin-top:5px;text-align:right}
  .mkui .hb-cmp{flex:none;padding:0 12px 12px;display:flex;gap:6px;align-items:flex-end}
  .mkui .hb-fld{flex:1;height:34px}
  .mkui .hb-fld .type{font-size:8.4px}
  .mkui .hb-send{height:22px}

  .mkui .hb-ctx{flex:0 0 116px;padding:12px 11px;display:flex;flex-direction:column;
    gap:9px;overflow:hidden}
  .mkui .hb-ctxh{display:flex;justify-content:center}
  .mkui .hb-ctxh .hb-avb,.mkui .hb-ctxh .hb-avb .hb-av{width:26px;height:26px}
  .mkui .hb-ctxn{display:flex;flex-direction:column;align-items:center;gap:2px;
    text-align:center;min-width:0}
  .mkui .hb-ctxn b{font-size:8.6px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-ctxn em{font-style:normal;font-size:7px;color:var(--i-ink3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mkui .hb-cch{display:flex;align-items:center;gap:4px;font-size:7px;color:var(--i-ink2)}
  .mkui .hb-cch svg{width:9px;height:9px;display:block;flex:none}
  .mkui .hb-sec{display:flex;align-items:center;justify-content:space-between}
  .mkui .hb-sec b{height:4px;border-radius:6px;background:var(--i-ghost)}
  .mkui .hb-sec i{width:4px;height:4px;border-radius:50%;background:var(--i-ghost)}
  .mkui .hb-ais{border:1px solid var(--i-blue);border-radius:6px;padding:6px 7px;
    background:#fff}
  .mkui .hb-aish{display:flex;align-items:center;gap:3px;font-size:7.4px;font-weight:600;
    color:var(--i-blue);margin-bottom:4px}
  .mkui .hb-aish .spark{width:7.5px;height:7.5px}
  .mkui .hb-ais p{margin:0;font-size:6.8px;line-height:1.55;color:var(--i-ink2)}
  .mkui .hb-see{display:inline-block;margin-top:4px;font-size:6.8px;font-weight:600;
    color:var(--i-blue)}

  /* ── the two-state cells, measured rather than guessed ────────────
     "bazi textler layout disina cikmis". Both of these hold two states in
     one box so a pill can change without the row moving, and both were
     given a height by eye: 13px, against a .wchip that is 16 and a .pill
     that is 15 once it is a block. So the pill hung 3px out of the bottom
     of every card on the board and of every conversation in the list.

     The heights below are the ones the parts actually measure, and the
     states are flex boxes filling them rather than inline boxes sitting on
     a 16px strut they inherited from the page.

     .rdy is the one state that is wider than the cell rather than taller:
     it is absolutely positioned, so "6 new leads" and "3 tasks done" were
     being shrunk to the width of "Working..." and wrapping onto a second
     line inside a 13px box. It is right-aligned, and the header it sits in
     has 270px of empty space to its left, so it may have the room. */
  .mkui .hb-wc{position:relative;display:flex;align-items:center;height:16px}
  .mkui .hb-wc .rdy{position:absolute;right:0;top:0;white-space:nowrap;
    background:var(--i-bluesoft);color:var(--i-blue)}
  .mkui .hb-sw{position:relative;display:block;height:15px;flex:none}
  .mkui .hb-sw>*{position:absolute;left:0;top:0;height:100%;
    display:flex;align-items:center}
  .mkui .hb-src .hb-sw{height:11px}
  .mkui .hb-ch{display:flex;align-items:center;gap:4px;font-size:7.6px;color:var(--i-ink2)}
  .mkui .hb-ch svg{width:10px;height:10px;flex:none;display:block}
  .mkui .hb-ch i{display:flex;flex:none}
  .mkui .trow .nm em{display:block;margin-top:2px;font-style:normal;font-weight:400;
    font-size:7.4px;color:var(--i-ink3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mkui .hb-act{display:flex;gap:4px}

  /* ── CRM › Inbox: the avatar column and the channel chips ─────────
     .trow already carries a name, a fixed column and a date; what it had
     no shape for is an avatar in front of the name and a filter chip
     wearing its channel's mark. Both are the kit's own parts at the kit's
     own sizes -- .hb-avb from the conversation list, .chp from the
     unified inbox. */
  .mkui .hb-nmc{display:flex;align-items:center;gap:7px}
  .mkui .hb-nmc b{font-size:8.4px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-fr{flex-wrap:wrap;margin-bottom:11px}
  .mkui .hb-fc{display:inline-flex;align-items:center;gap:4px}
  .mkui .hb-fc svg{width:8.5px;height:8.5px;display:block;flex:none}
  .mkui .hb-fc i{display:flex;flex:none}
  .mkui .hb-fc em{font-style:normal;font-weight:700;color:var(--i-ink3)}
  .mkui .hb-fc.on em{color:rgba(255,255,255,.72)}
  .mkui .hb-ir{height:34px}
  .mkui .hb-sent{border-radius:8px;border-bottom-color:transparent;
    position:relative;z-index:1;background:#fff;
    box-shadow:0 0 0 1px rgba(80,112,254,1),0 0 0 5px rgba(80,112,254,.13)}

  /* Calls and texts are Base360's own channels rather than someone
     else's, so they wear the app's green and a violet that no brand in
     the list is using. */
  .mkui .ch-call{color:#00484A}
  .mkui .ch-sms{color:#6938EF}

  /* ── the Opportunities board ──────────────────────────────────────
     Three trays across the 534 the zoomed pane leaves once .pg has taken
     its padding, on the kit's own #F7F8FA. The cards are its .card in every
     respect but the height, and everything the beat is not about is its
     .ln bar. */
  .mkui .hb-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:226px}
  .mkui .hb-col{background:#F7F8FA;border-radius:8px;padding:7px;display:flex;
    flex-direction:column;gap:6px;overflow:hidden}
  .mkui .hb-colh{display:flex;align-items:center;gap:5px;padding:1px 3px 2px}
  .mkui .hb-colh i{width:5px;height:5px;border-radius:50%;flex:none}
  .mkui .hb-colh b{font-size:7.6px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-colh em{margin-left:auto;font-style:normal;font-size:6.6px;font-weight:600;
    color:var(--i-ink2);background:#EDF0F4;border-radius:20px;padding:1.5px 5px}
  .mkui .hb-oc{background:#fff;border:1px solid var(--i-line);border-radius:7px;
    padding:7px;display:flex;flex-direction:column;gap:5px;flex:none}
  .mkui .hb-oc.gh{gap:6px;padding:10px 8px}
  .mkui .hb-oc .ln{height:4px;border-radius:6px;background:var(--i-ghost)}
  .mkui .hb-oc .ln.s{height:3.5px;background:var(--i-ghost2)}
  .mkui .hb-och{display:flex;align-items:center;gap:6px}
  .mkui .hb-och>b{font-size:8.6px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-och .hb-av{width:19px;height:19px}
  .mkui .hb-ob{margin-left:auto;width:19px;height:19px;border-radius:50%;flex:none;
    background:#F4F6F8;color:var(--i-ink2);display:grid;place-items:center}
  .mkui .hb-ob svg{width:10px;height:10px;display:block}
  .mkui .hb-otel{display:flex;align-items:center;gap:4px;font-size:7.2px;color:var(--i-ink2)}
  .mkui .hb-otel svg{width:8.5px;height:8.5px;display:block;flex:none;color:var(--i-ink3)}
  .mkui .hb-ot{height:15px;margin-top:1px;display:flex;align-items:center}
  .mkui .hb-ob.hb-obc{background:var(--i-bluesoft);color:var(--i-blue)}
  .mkui .hb-ob.hb-obw{background:#E3F6EB;color:#116B41}
  .mkui .hb-ob.hb-obg{background:var(--i-goodsoft);color:var(--i-good)}

  /* ── a card that is on two trays at once ──────────────────────────
     The card does not slide from one column to the other -- a grid has
     nowhere to slide it to. It is written into both trays and only ever
     open in one of them: the To do copy closes over six points of the
     beat while the Done copy opens over the same six, so what the eye
     follows is one card changing trays. max-height carries the collapse
     because the cards are not all the same height, and the negative
     margin takes the tray's 6px gap with it, so nothing below shifts
     twice. */
  .mkui .hb-td,.mkui .hb-dn{position:relative;overflow:hidden}
  .mkui .hb-dn{max-height:0;opacity:0;margin-bottom:-6px;
    padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0}

  /* ── the phone the step is done on ────────────────────────────────
     Every number here is the Live call export's own; see the note beside
     the markup. It is pinned to .pg, whose padding box is the whole pane,
     so top and right are measured from the window itself -- 158 wide at
     20 from the right edge sits it exactly over the Purchased tray, which
     is the one column the beat is not working. */
  .mkui .hb-ph{position:absolute;top:13px;right:20px;width:158px;height:336px;z-index:5;
    background:#fff;border-radius:26.4px;opacity:0;transform:translateX(118%);
    display:flex;flex-direction:column;align-items:center;padding:12px 12px 15px;
    box-shadow:0 26px 58px -22px rgba(13,20,36,.34),0 0 0 1px rgba(13,20,36,.05)}
  .mkui .hb-phn{width:34px;height:4px;border-radius:1.8px;background:#9CA3B0;flex:none}
  .mkui .hb-phh{display:flex;align-items:center;gap:7px;margin-top:15px;flex:none}
  .mkui .hb-agb{width:31px;height:31px;border-radius:10px;flex:none;
    background:var(--i-blue);display:grid;place-items:center}
  .mkui .hb-agb svg{width:15px;height:15px;display:block}
  .mkui .hb-phh .hb-av{width:31px;height:31px}
  .mkui .hb-lnk{display:flex;gap:4px;flex:none}
  .mkui .hb-lnk i{width:4px;height:4px;border-radius:50%;background:#C6CBD4}
  .mkui .hb-phl{width:134px;height:17px;margin-top:12px;flex:none}
  .mkui .hb-phl>*{width:100%;justify-content:center;gap:5px;font-size:12px;
    font-weight:600;color:var(--i-ink);letter-spacing:-.2px;white-space:nowrap}
  .mkui .hb-phl s{width:5px;height:5px;border-radius:50%;flex:none;
    background:var(--i-blue);text-decoration:none}
  .mkui .hb-phs{font-size:9.6px;font-weight:500;color:#6B7281;margin-top:2px;flex:none}
  .mkui .hb-phw{display:flex;align-items:center;gap:5.6px;height:32px;
    margin-top:12px;flex:none}
  .mkui .hb-phw i{width:3.6px;border-radius:1.8px;background:var(--i-blue);opacity:.7}
  .mkui .hb-trs{width:134px;margin-top:13px;display:flex;flex-direction:column;gap:8px}
  .mkui .hb-tr{display:flex;align-items:flex-end;gap:6px;max-width:100%}
  .mkui .hb-bb{max-width:100%;min-width:0}
  .mkui .hb-tr.them{justify-content:flex-end}
  .mkui .hb-trb{width:14px;height:14px;border-radius:50%;flex:none;
    background:var(--i-blue);display:grid;place-items:center}
  .mkui .hb-trb svg{width:8px;height:8px;display:block}
  .mkui .hb-tr .hb-av{width:14px;height:14px}
  .mkui .hb-bb{border-radius:12px;padding:8px 9px;display:flex;flex-direction:column;
    gap:5px;background:#F1F3F7}
  .mkui .hb-tr.ai .hb-bb{background:#ECF0FE}
  .mkui .hb-bb b{height:6px;border-radius:3px;background:#9CA3B0;opacity:.5}
  .mkui .hb-end{width:36px;height:36px;border-radius:50%;flex:none;margin-top:auto;
    background:#EF4444;color:#fff;display:grid;place-items:center;
    transform:rotate(134deg)}
  .mkui .hb-end svg{width:17px;height:17px;display:block}

  /* the same phone, with the message in it */
  .mkui .hb-wa{width:134px;flex:1;min-height:0;margin-top:13px;
    display:flex;flex-direction:column}
  .mkui .hb-wah{display:flex;align-items:center;gap:6px;flex:none;padding-bottom:9px;
    border-bottom:1px solid var(--i-line2)}
  .mkui .hb-wah .hb-av{width:22px;height:22px}
  .mkui .hb-wah b{font-size:9.2px;font-weight:600;color:var(--i-ink);letter-spacing:-.1px}
  .mkui .hb-wah .ch-wa{display:flex;flex:none}
  .mkui .hb-wah .ch-wa svg{width:13px;height:13px;display:block}
  .mkui .hb-was{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;
    padding:11px 0}
  .mkui .hb-dm{max-width:92%;background:#F1F3F7;border-radius:11px 11px 11px 3px;
    padding:7px 8px 6px}
  .mkui .hb-dm p{margin:0;font-size:8.6px;line-height:1.42;color:var(--i-ink)}
  .mkui .hb-dm em{display:flex;align-items:center;justify-content:flex-end;gap:3px;
    font-style:normal;font-size:7px;color:var(--i-ink3);margin-top:3px}
  .mkui .hb-dm.out{align-self:flex-end;background:#E7F8EE;
    border-radius:11px 11px 3px 11px}
  .mkui .hb-tk{width:12px;height:8px;display:block;flex:none;color:var(--i-ink3)}
  .mkui .hb-wac{display:flex;align-items:center;gap:6px;flex:none}
  .mkui .hb-cmp2{flex:1;min-width:0;overflow:hidden;height:22px;display:flex;
    align-items:center;padding:0 9px;font-size:8.4px}
  .mkui .hb-typ{display:block;font-style:normal;white-space:nowrap;color:var(--i-ink);
    clip-path:inset(0 100% 0 0)}
  .mkui .hb-snd{width:22px;height:22px;border-radius:50%;flex:none;
    background:var(--i-blue);color:#fff;display:grid;place-items:center}
  .mkui .hb-snd svg{width:11px;height:11px;display:block}

  /* everything that is not the step being worked */
  .mkui .hb-bscr{position:absolute;inset:0;z-index:3;opacity:0;
    background:rgba(13,20,36,.055)}

  /* The send dialog is narrower than the scene's .mkcsheet (412px) because
     it has nothing to compose: the mail is already written, so the sheet is
     the .pcard preview the kit uses for templates plus one row of choices.
     330px is what "Send by" and the four .toggle chips measure. */
  .mkui .hb-msheet{width:330px}
  .mkui .hb-crow{margin:9px 0 0}

  /* the marketing scene styles its phone screens through a .ph class its
     own markup never sets, so the hero addresses .mkph directly */
  .hxsat{grid-area:1/1;position:relative;pointer-events:none;z-index:3}
  /* the satellite only belongs to the fourth beat. Its animations start
     from opacity:0, so with motion on that alone hid it -- but an
     animation is exactly what a reader who asks for less motion does not
     get, so the hiding has to live in the base state too. */
  .hxsat .mkph,.hxsat .mn2,.hxsat .more{opacity:0}
  /* a little lower and a little further apart than on the rail, so the
     phones clear the last campaign row and neither notification is cut */
  .hxsat .phones{bottom:-54px}
  .hxsat .ph-b2{right:146px}
  .hxsat .scr{width:100%;height:100%;border-radius:16px;overflow:hidden;position:relative;
    background:radial-gradient(85% 55% at 76% 12%,rgba(158,183,232,.62),transparent 70%),
      radial-gradient(78% 52% at 20% 34%,rgba(199,210,254,.6),transparent 72%),
      linear-gradient(176deg,#EFF4FD,#E2E9F7)}
  .hxsat .tm{position:absolute;left:0;right:0;top:26px;text-align:center;
    font-size:24px;font-weight:700;letter-spacing:-.03em;color:#0D1424;line-height:1}
  .hxsat .dt{position:absolute;left:0;right:0;top:54px;text-align:center;
    font-size:7px;font-weight:600;color:#5A6478}

  /* ══ the beats ══════════════════════════════════════════════════════
     One pass each, on the kit's own curves. Nothing is outlined: work in
     progress is the inbox scene's row lift, something new is .fresh's blue
     border and pulse, a page change is a cross-fade, and the agent's state
     is the .wchip. .3s of delay lets the window finish riding in, so the
     last event has to land by ~85%. */
  .hxscr.hxd.is-on .wr{animation:hbWr 5.2s linear .3s both}
  .hxscr.hxd.is-on .rdy{animation:hbRdy 5.2s linear .3s both}

  /* beat 0 · the knowledge base is read, the draft is proposed, it sends
     itself, and the reply lands in the thread */
  .hxscr[data-scr="0"].is-on .hb-pr{animation:hbProp 5.2s cubic-bezier(.2,.7,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-srcw .hb-s1{animation:hbSrcA 5.2s step-end .3s both}
  .hxscr[data-scr="0"].is-on .hb-srcw .hb-s2{animation:hbSrcB 5.2s step-end .3s both}
  .hxscr[data-scr="0"].is-on .hb-k1{animation:hbKb1 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-k2{animation:hbKb2 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-k3{animation:hbKb3 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-prd{animation:hbDraft 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-fill{animation:hbFill 5.2s linear .3s both}
  .hxscr[data-scr="0"].is-on .hb-m2{animation:hbSay 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .hb-stamp{animation:hbStamp 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="0"].is-on .wr{animation:hbWr0 5.2s linear .3s both}
  .hxscr[data-scr="0"].is-on .rdy{animation:hbRdy0 5.2s linear .3s both}
  .hxscr[data-scr="0"].is-on .hb-c0 .hb-s1{animation:hbCvOff 5.2s step-end .3s both}
  .hxscr[data-scr="0"].is-on .hb-c0 .hb-s2{animation:hbCvOn 5.2s step-end .3s both}
  @keyframes hbWr{0%,4.8462%{opacity:0}6.2308%{opacity:1}42.9231%{opacity:1}45%{opacity:0}100%{opacity:0}}
  @keyframes hbRdy{0%,44.3077%{opacity:0}46.3846%{opacity:1}100%{opacity:1}}
  @keyframes hbWr0{0%,2.0769%{opacity:0}4.1538%,48.4615%{opacity:1}51.2308%,100%{opacity:0}}
  @keyframes hbRdy0{0%,49.8462%{opacity:0}52.6154%,100%{opacity:1}}
  @keyframes hbProp{0%,3.4615%{opacity:0;transform:translateY(11px) scale(.96)}
    9.6923%,45.6923%{opacity:1;transform:none}
    50.5385%,100%{opacity:0;transform:translateY(-6px) scale(.97)}}
  @keyframes hbSrcA{0%,13.8462%{opacity:1}14.5385%,100%{opacity:0}}
  @keyframes hbSrcB{0%,13.8462%{opacity:0}14.5385%,100%{opacity:1}}
  @keyframes hbKb1{0%,14.5385%{opacity:0;transform:translateY(4px)}18%,100%{opacity:1;transform:none}}
  @keyframes hbKb2{0%,18.6923%{opacity:0;transform:translateY(4px)}22.1538%,100%{opacity:1;transform:none}}
  @keyframes hbKb3{0%,22.8462%{opacity:0;transform:translateY(4px)}26.3077%,100%{opacity:1;transform:none}}
  @keyframes hbDraft{0%,27.6923%{opacity:0;transform:translateY(4px)}31.8462%,100%{opacity:1;transform:none}}
  @keyframes hbFill{0%,32.5385%{width:0}45.6923%,100%{width:100%}}
  @keyframes hbCvOff{0%,47.7692%{opacity:1}48.4615%,100%{opacity:0}}
  @keyframes hbCvOn{0%,47.7692%{opacity:0}48.4615%,100%{opacity:1}}
  @keyframes hbSay{0%,46.3846%{opacity:0;transform:translateY(10px) scale(.985)}
    53.3077%{opacity:1;transform:none}100%{opacity:1;transform:none}}
  @keyframes hbStamp{0%,54%{opacity:0;transform:translateY(4px)}
    58.8462%{opacity:1;transform:none}100%{opacity:1;transform:none}}

  /* beat 1 · one pass down the inbox, and every row becomes a lead */
  .hxscr[data-scr="1"].is-on .wr{animation:hbWr1 5.2s linear .3s both}
  .hxscr[data-scr="1"].is-on .rdy{animation:hbRdy1 5.2s linear .3s both}
  @keyframes hbWr1{0%,2.0769%{opacity:0}4.1538%,54%{opacity:1}56.7692%,100%{opacity:0}}
  @keyframes hbRdy1{0%,55.3846%{opacity:0}58.1538%,100%{opacity:1}}
  .hxscr[data-scr="1"].is-on .hb-i1{animation:hbIr1 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i1 .hb-s1{animation:hbIa1 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i1 .hb-s2{animation:hbIb1 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i2{animation:hbIr2 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i2 .hb-s1{animation:hbIa2 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i2 .hb-s2{animation:hbIb2 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i3{animation:hbIr3 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i3 .hb-s1{animation:hbIa3 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i3 .hb-s2{animation:hbIb3 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i4{animation:hbIr4 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i4 .hb-s1{animation:hbIa4 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i4 .hb-s2{animation:hbIb4 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i5{animation:hbIr5 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i5 .hb-s1{animation:hbIa5 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i5 .hb-s2{animation:hbIb5 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i6{animation:hbIr6 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="1"].is-on .hb-i6 .hb-s1{animation:hbIa6 5.2s step-end .3s both}
  .hxscr[data-scr="1"].is-on .hb-i6 .hb-s2{animation:hbIb6 5.2s step-end .3s both}
  @keyframes hbIr1{0%,5.5385%{background:#fff;transform:none}8.3077%,13.8462%{background:#F9FAFB;transform:scale(1.02)}16.6154%,100%{background:#fff;transform:none}}
  @keyframes hbIa1{0%,10.3846%{opacity:1}11.0769%,100%{opacity:0}}
  @keyframes hbIb1{0%,10.3846%{opacity:0}11.0769%,100%{opacity:1}}
  @keyframes hbIr2{0%,13.8462%{background:#fff;transform:none}16.6154%,22.1538%{background:#F9FAFB;transform:scale(1.02)}24.9231%,100%{background:#fff;transform:none}}
  @keyframes hbIa2{0%,18.6923%{opacity:1}19.3846%,100%{opacity:0}}
  @keyframes hbIb2{0%,18.6923%{opacity:0}19.3846%,100%{opacity:1}}
  @keyframes hbIr3{0%,22.1538%{background:#fff;transform:none}24.9231%,30.4615%{background:#F9FAFB;transform:scale(1.02)}33.2308%,100%{background:#fff;transform:none}}
  @keyframes hbIa3{0%,27%{opacity:1}27.6923%,100%{opacity:0}}
  @keyframes hbIb3{0%,27%{opacity:0}27.6923%,100%{opacity:1}}
  @keyframes hbIr4{0%,30.4615%{background:#fff;transform:none}33.2308%,38.7692%{background:#F9FAFB;transform:scale(1.02)}41.5385%,100%{background:#fff;transform:none}}
  @keyframes hbIa4{0%,35.3077%{opacity:1}36%,100%{opacity:0}}
  @keyframes hbIb4{0%,35.3077%{opacity:0}36%,100%{opacity:1}}
  @keyframes hbIr5{0%,38.7692%{background:#fff;transform:none}41.5385%,47.0769%{background:#F9FAFB;transform:scale(1.02)}49.8462%,100%{background:#fff;transform:none}}
  @keyframes hbIa5{0%,43.6154%{opacity:1}44.3077%,100%{opacity:0}}
  @keyframes hbIb5{0%,43.6154%{opacity:0}44.3077%,100%{opacity:1}}
  @keyframes hbIr6{0%,47.0769%{background:#fff;transform:none}49.8462%,55.3846%{background:#F9FAFB;transform:scale(1.02)}58.1538%,100%{background:#fff;transform:none}}
  @keyframes hbIa6{0%,51.9231%{opacity:1}52.6154%,100%{opacity:0}}
  @keyframes hbIb6{0%,51.9231%{opacity:0}52.6154%,100%{opacity:1}}

  /* beat 2 · two lines of the to-do list, each one opened and finished */
  .hxscr[data-scr="2"].is-on .wr{animation:hbWr2 10.4s linear .3s both}
  .hxscr[data-scr="2"].is-on .rdy{animation:hbRdy2 10.4s linear .3s both}
  .hxscr[data-scr="2"].is-on .hb-bscr{animation:hbBscr 10.4s linear .3s both}
  @keyframes hbWr2{0%,3%{opacity:0}6%,86%{opacity:1}90%,100%{opacity:0}}
  @keyframes hbRdy2{0%,88%{opacity:0}92%,100%{opacity:1}}
  @keyframes hbBscr{0%,4%{opacity:0}9%,86%{opacity:1}92%,100%{opacity:0}}

  /* step one · the call. The card is lifted out of the scrim and ringed
     while its drawer is open, and closes as the Done copy opens. */
  .hxscr[data-scr="2"].is-on .hb-td1{animation:hbTd1 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-b1{animation:hbOb1 10.4s cubic-bezier(.2,.7,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-ph1{animation:hbPh1 10.4s cubic-bezier(.25,.9,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-tl1{animation:hbTrA 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-tl2{animation:hbTrB 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-tl3{animation:hbTrC 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-dn1{animation:hbDn1 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  @keyframes hbTd1{0%,3%{z-index:0;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0)}
    4%{z-index:4}
    7%,40%{z-index:4;border-color:var(--i-blue);box-shadow:0 0 0 5px rgba(80,112,254,.13)}
    43%{z-index:4;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0);
      max-height:90px;opacity:1;margin-bottom:0;padding-top:7px;padding-bottom:7px;
      border-top-width:1px;border-bottom-width:1px}
    49%,100%{z-index:0;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0);
      max-height:0;opacity:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;
      border-top-width:0;border-bottom-width:0}}
  @keyframes hbOb1{0%,3%{transform:none;background:#F4F6F8;color:var(--i-ink2)}
    5%{transform:scale(.9);background:#F4F6F8;color:var(--i-ink2)}
    8%,100%{transform:none;background:var(--i-bluesoft);color:var(--i-blue)}}
  @keyframes hbPh1{0%,6%{opacity:0;transform:translateX(118%)}
    7%{opacity:1;transform:translateX(110%)}
    14%,40%{opacity:1;transform:translateX(0)}
    46%{opacity:1;transform:translateX(118%)}
    47%,100%{opacity:0;transform:translateX(118%)}}
  @keyframes hbTrA{0%,24%{opacity:0;transform:translateY(6px)}27%,100%{opacity:1;transform:none}}
  @keyframes hbTrB{0%,29%{opacity:0;transform:translateY(6px)}32%,100%{opacity:1;transform:none}}
  @keyframes hbTrC{0%,34%{opacity:0;transform:translateY(6px)}37%,100%{opacity:1;transform:none}}
  @keyframes hbDn1{0%,43%{max-height:0;opacity:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;
      border-top-width:0;border-bottom-width:0}
    49%,100%{max-height:90px;opacity:1;margin-bottom:0;padding-top:7px;padding-bottom:7px;
      border-top-width:1px;border-bottom-width:1px}}

  /* it rings, it connects, the timer runs, it ends */
  .hxscr[data-scr="2"].is-on .hb-phl .hb-s1{animation:hbCa1 10.4s step-end .3s both}
  .hxscr[data-scr="2"].is-on .hb-phl .hb-s2{animation:hbCa2 10.4s step-end .3s both}
  .hxscr[data-scr="2"].is-on .hb-phl .hb-s3{animation:hbCa3 10.4s step-end .3s both}
  .hxscr[data-scr="2"].is-on .hb-phl .hb-s4{animation:hbCa4 10.4s step-end .3s both}
  @keyframes hbCa1{0%,22%{opacity:1}23%,100%{opacity:0}}
  @keyframes hbCa2{0%,22%{opacity:0}23%,30%{opacity:1}31%,100%{opacity:0}}
  @keyframes hbCa3{0%,30%{opacity:0}31%,37%{opacity:1}38%,100%{opacity:0}}
  @keyframes hbCa4{0%,37%{opacity:0}38%,100%{opacity:1}}

  /* step two · the message. Typed into the composer, sent as a bubble,
     and the ticks turn once it has been read. */
  .hxscr[data-scr="2"].is-on .hb-td2{animation:hbTd2 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-b2{animation:hbOb2 10.4s cubic-bezier(.2,.7,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-ph2{animation:hbPh2 10.4s cubic-bezier(.25,.9,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-dn2{animation:hbDn2 10.4s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-typ{animation:hbTyp 10.4s steps(29,end) .3s both}
  .hxscr[data-scr="2"].is-on .hb-dmo{animation:hbBub 10.4s cubic-bezier(.2,.9,.3,1) .3s both}
  .hxscr[data-scr="2"].is-on .hb-dmo .hb-tk{animation:hbTk 10.4s step-end .3s both}
  @keyframes hbTd2{0%,48%{z-index:0;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0)}
    49%{z-index:4}
    52%,80%{z-index:4;border-color:var(--i-blue);box-shadow:0 0 0 5px rgba(80,112,254,.13)}
    83%{z-index:4;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0);
      max-height:90px;opacity:1;margin-bottom:0;padding-top:7px;padding-bottom:7px;
      border-top-width:1px;border-bottom-width:1px}
    89%,100%{z-index:0;border-color:var(--i-line);box-shadow:0 0 0 0 rgba(80,112,254,0);
      max-height:0;opacity:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;
      border-top-width:0;border-bottom-width:0}}
  @keyframes hbOb2{0%,49%{transform:none;background:#F4F6F8;color:var(--i-ink2)}
    51%{transform:scale(.9);background:#F4F6F8;color:var(--i-ink2)}
    54%,100%{transform:none;background:#E3F6EB;color:#116B41}}
  @keyframes hbPh2{0%,50%{opacity:0;transform:translateX(118%)}
    51%{opacity:1;transform:translateX(110%)}
    58%,82%{opacity:1;transform:translateX(0)}
    88%{opacity:1;transform:translateX(118%)}
    89%,100%{opacity:0;transform:translateX(118%)}}
  @keyframes hbDn2{0%,83%{max-height:0;opacity:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;
      border-top-width:0;border-bottom-width:0}
    89%,100%{max-height:90px;opacity:1;margin-bottom:0;padding-top:7px;padding-bottom:7px;
      border-top-width:1px;border-bottom-width:1px}}
  @keyframes hbTyp{0%,60%{clip-path:inset(0 100% 0 0);opacity:1}
    70%{clip-path:inset(0 0 0 0);opacity:1}
    71%,100%{clip-path:inset(0 0 0 0);opacity:0}}
  @keyframes hbBub{0%,70%{opacity:0;transform:translateY(7px) scale(.92)}
    75%,100%{opacity:1;transform:none}}
  @keyframes hbTk{0%,77%{color:var(--i-ink3)}78%,100%{color:#34B7F1}}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(1){animation:hbWv1 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(2){animation:hbWv2 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(3){animation:hbWv3 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(4){animation:hbWv4 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(5){animation:hbWv5 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(6){animation:hbWv6 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(7){animation:hbWv7 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(8){animation:hbWv8 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(9){animation:hbWv9 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(10){animation:hbWv10 10.4s ease-in-out .3s both}
  .hxscr[data-scr="2"].is-on .hb-phw i:nth-child(11){animation:hbWv11 10.4s ease-in-out .3s both}
  @keyframes hbWv1{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.55)}27%{transform:scaleY(1.3)}29%{transform:scaleY(0.8)}31%{transform:scaleY(1.15)}33%{transform:scaleY(0.7)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv2{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(1.2)}27%{transform:scaleY(0.7)}29%{transform:scaleY(1.35)}31%{transform:scaleY(0.85)}33%{transform:scaleY(1.1)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv3{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.8)}27%{transform:scaleY(1.4)}29%{transform:scaleY(0.95)}31%{transform:scaleY(1.2)}33%{transform:scaleY(0.7)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv4{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(1.25)}27%{transform:scaleY(0.8)}29%{transform:scaleY(0.65)}31%{transform:scaleY(1.35)}33%{transform:scaleY(1)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv5{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.7)}27%{transform:scaleY(1.15)}29%{transform:scaleY(1.4)}31%{transform:scaleY(0.8)}33%{transform:scaleY(1.25)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv6{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(1.35)}27%{transform:scaleY(0.75)}29%{transform:scaleY(1.05)}31%{transform:scaleY(0.9)}33%{transform:scaleY(1.4)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv7{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.85)}27%{transform:scaleY(1.3)}29%{transform:scaleY(0.7)}31%{transform:scaleY(1.2)}33%{transform:scaleY(0.8)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv8{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(1.1)}27%{transform:scaleY(0.9)}29%{transform:scaleY(1.35)}31%{transform:scaleY(0.68)}33%{transform:scaleY(1.15)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv9{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.72)}27%{transform:scaleY(1.05)}29%{transform:scaleY(0.85)}31%{transform:scaleY(1.3)}33%{transform:scaleY(0.78)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv10{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(1.3)}27%{transform:scaleY(0.8)}29%{transform:scaleY(1.2)}31%{transform:scaleY(0.95)}33%{transform:scaleY(1.35)}37%,100%{transform:scaleY(.34);opacity:.35}}
  @keyframes hbWv11{0%,23%{transform:scaleY(.34);opacity:.35}24%{opacity:.7}25%{transform:scaleY(0.9)}27%{transform:scaleY(1.35)}29%{transform:scaleY(0.75)}31%{transform:scaleY(1.1)}33%{transform:scaleY(0.85)}37%,100%{transform:scaleY(.34);opacity:.35}}
  /* beat 3 · one choice, one send, and the mail lands on real screens.
     The sheet is up by 10% and gone by 42%; everything after that is the
     delivery, which is what the beat is for. */
  .hxscr[data-scr="3"].is-on .hb-sc{animation:hbScrim 5.2s linear .3s both}
  .hxscr[data-scr="3"].is-on .hb-sheet{animation:hbSheet 5.2s cubic-bezier(.2,.7,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on .hb-tgem{animation:hbChEm 5.2s step-end .3s both}
  .hxscr[data-scr="3"].is-on .hb-tgem .tick{animation:hbTkEm 5.2s step-end .3s both}
  .hxscr[data-scr="3"].is-on .hb-schd{animation:hbTap 5.2s cubic-bezier(.2,.7,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on .hb-sent{animation:hbFresh3 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  @keyframes hbScrim{0%,2.7692%{opacity:0}6.9231%,22.1538%{opacity:1}26.3077%,100%{opacity:0}}
  @keyframes hbSheet{0%,2.7692%{opacity:0;scale:.94}6.9231%,22.1538%{opacity:1;scale:1}
    26.3077%,100%{opacity:0;scale:.97}}
  @keyframes hbChEm{0%,13.1538%{background:#fff;border-color:var(--i-line);color:var(--i-ink2)}
    13.8462%,100%{background:var(--i-bluesoft);border-color:var(--i-blue);color:#1B4FA8}}
  @keyframes hbTkEm{0%,13.1538%{background:transparent;border-color:var(--i-ghost)}
    13.8462%,100%{background:var(--i-blue);border-color:var(--i-blue)}}
  @keyframes hbTap{0%,20.0769%{scale:1}21.4615%{scale:.95}23.5385%,100%{scale:1}}
  /* ── the row the mail went out on ─────────────────────────────────
     "ekran goruntusundeki elementin highlight olmus versiyonu, olmamis.
      Onu attigim ikinci gorseldekinin stroke'i tarzinda highlight'a
      cevirelim ve lutfen kose curvelerine dikkat edelim."

     It pulsed a halo twice and then handed it back, so by the time the
     beat is standing still -- which is the whole point of the hold -- the
     one row the beat is about looked like the two under it. It keeps the
     ring now, and the ring is the one the proposed reply wears two beats
     earlier: 1px of --i-blue with 5px of it at 13% outside that.

     A .trow is a flush table row: no radius, and a hairline along the
     bottom. Both had to be answered or the ring would have had square
     corners with a rule cutting across two of them, so the highlighted row
     takes the kit's 8px and gives its own hairline up while it is ringed. */
  @keyframes hbFresh3{0%,26.3077%{opacity:0;transform:translateY(-7px);
      box-shadow:0 0 0 0 rgba(80,112,254,0),0 0 0 0 rgba(80,112,254,0)}
    31.1538%{opacity:1;transform:none;
      box-shadow:0 0 0 1px rgba(80,112,254,0),0 0 0 0 rgba(80,112,254,0)}
    35.3077%,100%{opacity:1;transform:none;
      box-shadow:0 0 0 1px rgba(80,112,254,1),0 0 0 5px rgba(80,112,254,.13)}}

  /* and the send leaves the product: the scene's own phones, outside the
     frame, because .hxscr.hxd clips */
  .hxscr[data-scr="3"].is-on~.hxsat .ph-a2{animation:hbPhA 5.2s cubic-bezier(.2,.75,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on~.hxsat .ph-b2{animation:hbPhB 5.2s cubic-bezier(.2,.75,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on~.hxsat .hb-na{animation:hbNa 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on~.hxsat .hb-nb{animation:hbNb 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  .hxscr[data-scr="3"].is-on~.hxsat .hb-more{animation:hbMore 5.2s cubic-bezier(.2,.8,.3,1) .3s both}
  @keyframes hbPhA{0%,29.0769%{opacity:0;transform:translateY(34px) scale(.96)}
    34.6154%,100%{opacity:1;transform:none}}
  @keyframes hbPhB{0%,32.5385%{opacity:0;transform:translateY(28px) scale(.96)}
    38.0769%,100%{opacity:1;transform:none}}
  @keyframes hbNa{0%,37.3846%{opacity:0;transform:translateY(-10px) scale(.96)}
    42.2308%,100%{opacity:1;transform:none}}
  @keyframes hbNb{0%,41.5385%{opacity:0;transform:translateY(-9px) scale(.96)}
    46.3846%,100%{opacity:1;transform:none}}
  @keyframes hbMore{0%,48.4615%{opacity:0;transform:translateY(8px) scale(.9)}
    53.3077%,100%{opacity:1;transform:none}}

  @media (prefers-reduced-motion:reduce){
    .hxscr.hxd.is-on .wr{opacity:0}
    .hxscr.hxd.is-on .rdy,.hxscr.hxd .hb-m2,.hxscr.hxd .hb-stamp,
    .hxscr.hxd .hb-sent{opacity:1}
    .hxscr[data-scr="3"].is-on~.hxsat .mkph,
    .hxscr[data-scr="3"].is-on~.hxsat .mn2,
    .hxscr[data-scr="3"].is-on~.hxsat .more{opacity:1}
    .hxscr.hxd .hb-sc,.hxscr.hxd .hb-sheet,.hxscr.hxd .hb-pr{opacity:0}
    .hxscr.hxd .hb-ir .hb-s1,.hxscr.hxd .hb-c0 .hb-s1{opacity:0}
    .hxscr.hxd .hb-td1,.hxscr.hxd .hb-td2,.hxscr.hxd .hb-ph{display:none}
    .hxscr.hxd .hb-dn{max-height:90px;opacity:1;margin-bottom:0;
      padding-top:7px;padding-bottom:7px;border-top-width:1px;border-bottom-width:1px}
    .hxscr.hxd *,.hxsat *{animation:none!important}
  }

  @media (prefers-reduced-motion:reduce){
    .hxh1,.hxrotor,.hxstage,.hxstrip,.hxcue,.hxorbit,.hxcue svg{animation:none}
    .hxo-turn{transition:none}
  }

  /* ── calendly popup ─────────────────────────────────────── */
  /* the widget ships its own stylesheet and injects it after ours, so every
     rule here carries one extra ancestor for weight — and !important only
     where calendly itself used one */
  body .calendly-overlay{
    background:rgba(14,21,38,.46);
    -webkit-backdrop-filter:saturate(130%) blur(5px);
    backdrop-filter:saturate(130%) blur(5px);
    animation:cal-veil .26s ease both;
  }
  /* calendly's booking page keeps its two-pane layout only from 1000px of
     iframe width up — at 992px it folds into one tall column. The frame sits
     14px inside the card (see below), so the card needs 1028px+ to stay wide */
  body .calendly-overlay .calendly-popup{
    min-width:0;max-width:none;
    width:min(1040px,calc(100vw - 96px));
    height:min(700px,calc(100dvh - 128px))!important;
    max-height:calc(100dvh - 128px)!important;
    background:#fff;
    border-radius:var(--r-win);
    overflow:hidden;
    box-shadow:0 40px 90px -34px rgba(14,21,38,.50),0 6px 20px rgba(14,21,38,.12);
    animation:cal-rise .42s var(--spring) both;
  }
  /* calendly pins its "Privacy Policy" link to the very edge of the iframe, so
     the rounded corner lands right on it — we can't reach inside a cross-origin
     frame, but we can inset the frame itself inside the white card */
  body .calendly-overlay .calendly-popup .calendly-popup-content{
    padding:14px;background:#fff;border-radius:inherit;overflow:hidden}

  /* a 19px white glyph over a pale page is invisible — give it a real target */
  body .calendly-overlay .calendly-popup-close{
    top:20px;right:20px;width:40px;height:40px;border-radius:100px;
    background:rgba(255,255,255,.16)
      url(https://assets.calendly.com/assets/external/close-icon.svg) no-repeat 50%/15px;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    transition:background-color .18s ease,transform .18s var(--spring)}
  body .calendly-overlay .calendly-popup-close:hover{
    background-color:rgba(255,255,255,.30);transform:scale(1.07)}

  @keyframes cal-veil{from{opacity:0}to{opacity:1}}
  @keyframes cal-rise{
    from{opacity:0;transform:translate(-50%,-50%) scale(.97)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

  /* under ~1128px the card can no longer be 1028px wide with any margin left,
     so calendly folds into its single column anyway. A tall narrow frame fits
     that column; a wide short one just leaves empty sides and scrolls */
  @media (max-width:1128px){
    body .calendly-overlay .calendly-popup{
      /* calendly's own <=975px rules pin the card to all four edges — undo that
         and keep it centred like every other width */
      position:absolute;left:50%;right:auto;top:50%;bottom:auto;
      transform:translate(-50%,-50%);
      width:min(600px,calc(100vw - 24px));
      height:min(880px,calc(100dvh - 120px))!important;
      max-height:calc(100dvh - 120px)!important}
    body .calendly-overlay .calendly-popup-close{top:16px;right:16px}
  }

  @media (prefers-reduced-motion:reduce){
    body .calendly-overlay,
    body .calendly-overlay .calendly-popup{animation:none}
  }