/* Copied from approved local component and HomeFresh board. */
/* ---- the mark: one stroke. "m" = sound wave, trailing into a text cursor ---- */
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-breathe{0%,100%{d:path("M20 96 L20 58 C20 30 60 30 60 58 L60 96 L60 58 C60 30 100 30 100 58 L100 84 C100 98 114 98 118 86 C122 74 130 74 134 82 C138 90 144 90 148 82 L156 82")}50%{d:path("M20 96 L20 58 C20 26 60 26 60 58 L60 96 L60 58 C60 26 100 26 100 58 L100 84 C100 100 114 100 118 84 C122 70 130 70 134 84 C138 94 144 94 148 80 L156 82")}}
@keyframes mk-talk{0%,100%{d:path("M20 96 L20 58 C20 18 60 18 60 58 L60 96 L60 58 C60 40 100 40 100 58 L100 84 C100 108 114 108 118 78 C122 58 130 58 134 88 C138 104 144 104 148 74 L156 82")}50%{d:path("M20 96 L20 58 C20 40 60 40 60 58 L60 96 L60 58 C60 18 100 18 100 58 L100 84 C100 72 114 72 118 92 C122 104 130 104 134 72 C138 62 144 62 148 90 L156 82")}}
@keyframes mk-sheen{from{stroke-dashoffset:0}to{stroke-dashoffset:-640}}
@keyframes mk-blink{50%{opacity:0}}
.mk .ink,.mk .sheen{fill:none;stroke-linecap:round;stroke-linejoin:round;d:path("M20 96 L20 58 C20 30 60 30 60 58 L60 96 L60 58 C60 30 100 30 100 58 L100 84 C100 98 114 98 118 86 C122 74 130 74 134 82 C138 90 144 90 148 82 L156 82")}
.mk .ink{stroke-width:9;stroke-dasharray:420;stroke-dashoffset:420;animation:mk-draw 1.6s cubic-bezier(.6,.1,.3,1) forwards,mk-breathe 5s ease-in-out 1.6s infinite}
.mk .sheen{stroke-width:9;stroke:#fff3df;opacity:.55;stroke-dasharray:22 618;filter:blur(1.2px);animation:mk-sheen 3.6s linear 1.6s infinite,mk-breathe 5s ease-in-out 1.6s infinite}
.mk .caret{fill:#f5eee0;animation:mk-blink 1.1s step-end 1.6s infinite}
.talk .mk .ink,.talk .mk .sheen{animation:mk-talk .7s ease-in-out infinite}
.talk .mk .ink{stroke-dashoffset:0}
.talk .mk .sheen{animation:mk-sheen 1.4s linear infinite,mk-talk .7s ease-in-out infinite}
.talk .mk .caret{animation:mk-blink .35s step-end infinite}
.done .mk .ink,.done .mk .sheen{d:path("M20 96 L20 58 C20 30 60 30 60 58 L60 96 L60 58 C60 30 100 30 100 58 L100 84 C100 92 112 92 118 92 C122 92 130 92 134 92 C138 92 144 92 148 92 L156 92");animation:none;stroke-dashoffset:0;transition:d .6s ease}
.done .mk .sheen{opacity:0}
.done .mk .caret{animation:mk-blink 1.1s step-end infinite}




/* ---- resonance: layered waves that swell from the tail each time the pulse leaves the m ----
   The pulse (.sheen) runs 3.6s from 1.6s; its centre reaches the foot of the m's last stroke at 41.7% of each cycle and leaves the tail at 53%. */
@keyframes res-cycle{0%,41.5%{transform:scaleY(0);opacity:0}44%{transform:scaleY(.35);opacity:.75}54%{transform:scaleY(1);opacity:1}72%{transform:scaleY(.55);opacity:.7}90%{transform:scaleY(.12);opacity:.15}100%{transform:scaleY(0);opacity:0}}
@keyframes res-talk{0%,100%{transform:scaleY(.7);opacity:1}35%{transform:scaleY(1.15);opacity:1}65%{transform:scaleY(.9);opacity:1}}
.mk .res-amp{transform-box:view-box;transform-origin:0 76px;opacity:0;animation:res-cycle 3.6s linear 1.6s infinite;transition:transform .6s ease,opacity .6s ease}
.talk .mk .res-amp{animation:res-talk 1.1s ease-in-out infinite}
.done .mk .res-amp{animation:none;transform:scaleY(.04);opacity:0}

/* ---- the Start dictating button ---- */
@keyframes halo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.14,1.5);opacity:0}}
@keyframes shine{0%,70%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
.go{position:relative;display:inline-flex;align-items:center;gap:14px;height:68px;padding:0 30px 0 9px;border:0;border-radius:999px;background:linear-gradient(180deg,#e3a462,#d0904c);color:#191714;cursor:pointer;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 12px 30px -14px rgba(217,154,85,.9)}
.go::before,.go::after{content:'';position:absolute;inset:0;border-radius:999px;border:2px solid rgba(217,154,85,.55);z-index:-1;animation:halo 3.6s ease-out infinite}
.go::after{animation-delay:1.8s}
.go .shine{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.go .shine::before{content:'';position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 5s ease-in-out infinite}
.go .dot{width:50px;height:50px;border-radius:50%;background:#191714;display:grid;place-content:center;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,210,150,.25)}
.go .dot svg{width:36px;height:24px}
.go .dot .mk .ink{stroke-width:11}
.go .lab{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.go .lab b{font-size:18px;font-weight:900;letter-spacing:-.01em}
.go .lab small{font-size:12px;font-weight:700;opacity:.72;margin-top:3px}
.go.hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 36px -14px rgba(217,154,85,1)}
.talk .go{background:linear-gradient(180deg,#ff7d5e,#f0603f)}
.talk .go::before,.talk .go::after{border-color:rgba(255,108,76,.6);animation-duration:1.4s}
.talk .go::after{animation-delay:.7s}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.mk .ink{stroke-dashoffset:0}}

/* ---- hero demo: what you can do (one clock: --t runs 0-38.5 s; 7 scenes x 5.5 s) ---- */
@property --t{syntax:'<number>';inherits:true;initial-value:0}
@keyframes demo-clock{from{--t:0}to{--t:38.5}}
.demo{position:relative;width:224px;height:162px;border-radius:14px;background:#191511;border:1px solid rgba(232,226,212,.08);overflow:hidden;animation:demo-clock 38.5s linear infinite}
.demo .scene{position:absolute;inset:0;padding:9px;display:flex;flex-direction:column;gap:5px}
.demo .said{font-size:10.5px;font-style:italic;color:#e6a866;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.demo .said::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff6c4c;margin-right:5px;vertical-align:1px;animation:recdot 1s ease-in-out infinite}
@keyframes recdot{50%{opacity:.3}}
.demo .win{border-radius:8px;background:#f3ece0;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding-bottom:6px;flex-grow:1;min-height:0}
.demo .win .bar{display:flex;align-items:center;gap:3px;height:15px;flex:none;padding:0 6px;background:#d9cfbd}
.demo .win .bar i{width:5px;height:5px;border-radius:50%;background:#a39a86}
.demo .win .bar b{margin-left:5px;font-size:8.5px;color:#4a4033;font-weight:800}
.demo .ln{display:block;height:4px;border-radius:2px;background:#d9cfbd;margin:0 8px;flex:none}
.demo .ln.mid{width:60%}.demo .ln.short{width:40%}
.demo .type{display:block;overflow:hidden;white-space:nowrap;width:0;font-size:9.5px;font-weight:700;color:#2a2016;margin:0 8px;border-right:1.5px solid #ff6c4c}
.demo .term{background:#0f0d0b;gap:2px}.demo .term .bar{background:#2b2721}.demo .term .bar b{color:#b3aa96}
.demo .ps{background:#0d1626}.demo .ps .bar{background:#1d2a40}.demo .ps .bar b{color:#9fb6d9}
.demo .mono{display:block;font-family:'Google Sans Code',monospace;font-size:8.3px;line-height:1.35;color:#e8e2d4;margin:0 7px;white-space:pre;overflow:hidden}
.demo .mono .type{display:inline-block;vertical-align:bottom;margin:0;color:#e8e2d4;font:inherit;font-weight:400;border-color:#e8e2d4}
.demo .pr{color:#7cc47a}.demo .ps .pr{color:#7fb2d9}
.demo .out{color:#b3aa96}
.demo .saved{align-self:flex-start;flex:none;font-size:9.5px;font-weight:800;color:#191714;background:#7cc47a;border-radius:999px;padding:2px 8px}
.demo .mail .plain{margin:2px 8px 0;font-size:9.5px;color:#6b604f}
.demo .mail .styled{margin:-14px 8px 0;font-size:9.5px;font-weight:700;color:#2a2016;line-height:1.45}
.demo .voicechip{align-self:flex-start;flex:none;font-size:9.5px;font-weight:800;color:#e2c9ff;background:rgba(199,125,255,.18);border-radius:999px;padding:2px 8px}
.demo .desk{position:relative;flex-grow:1;border-radius:8px;background:linear-gradient(160deg,#2a2419,#1d1915);display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:6px}
.demo .tile{width:18px;height:18px;border-radius:5px;display:grid;place-content:center;font:900 9px Figtree,sans-serif;color:#fff}
.demo .t-word{background:#2f6fba}.demo .t-teams{background:#7a6be0}.demo .t-out{background:#3d7bd9}
.demo .app{position:absolute;left:10px;right:10px;top:6px;bottom:30px}
.demo .card-task{display:flex;align-items:center;gap:8px;margin-top:6px;padding:10px;border-radius:10px;background:#2a2419;border:1px solid #4a3b22}
.demo .card-task b{display:block;font-size:11px;color:#f5eee0}
.demo .card-task small{font-size:9.5px;color:#e6a866}
.demo .tk{width:14px;height:14px;border-radius:50%;border:2px solid #7a7262;flex:none}
.demo .s1{opacity:min(clamp(0, (var(--t) - 0) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 5) / 0.4, 1)))}
.demo .s2{opacity:min(clamp(0, (var(--t) - 5.5) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 10.5) / 0.4, 1)))}
.demo .s3{opacity:min(clamp(0, (var(--t) - 11) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 16) / 0.4, 1)))}
.demo .s4{opacity:min(clamp(0, (var(--t) - 16.5) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 21.5) / 0.4, 1)))}
.demo .s5{opacity:min(clamp(0, (var(--t) - 22) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 27) / 0.4, 1)))}
.demo .s6{opacity:min(clamp(0, (var(--t) - 27.5) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 32.5) / 0.4, 1)))}
.demo .s7{opacity:min(clamp(0, (var(--t) - 33) / 0.45, 1), calc(1 - clamp(0, (var(--t) - 38) / 0.4, 1)))}
.demo .t1a{width:calc(clamp(0, (var(--t) - 0.7) / 1.4, 1) * 25ch)}
.demo .t1b{width:calc(clamp(0, (var(--t) - 2.1) / 0.8, 1) * 12ch)}
.demo .c2a{width:calc(clamp(0, (var(--t) - 6.3) / 1, 1) * 29ch)}
.demo .c2b{width:calc(clamp(0, (var(--t) - 7.3) / 0.6, 1) * 22ch)}
.demo .o2-0{opacity:clamp(0, (var(--t) - 8.1) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 8.1) / 0.3, 1)) * 3px))}
.demo .o2-1{opacity:clamp(0, (var(--t) - 8.25) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 8.25) / 0.3, 1)) * 3px))}
.demo .o2-2{opacity:clamp(0, (var(--t) - 8.4) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 8.4) / 0.3, 1)) * 3px))}
.demo .o2-3{opacity:clamp(0, (var(--t) - 8.55) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 8.55) / 0.3, 1)) * 3px))}
.demo .o2-4{opacity:clamp(0, (var(--t) - 8.7) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 8.7) / 0.3, 1)) * 3px))}
.demo .s2 .saved{opacity:clamp(0, (var(--t) - 9) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 9) / 0.3, 1)) * 3px))}
.demo .c3a{width:calc(clamp(0, (var(--t) - 11.8) / 0.4, 1) * 13ch)}
.demo .c3b{width:calc(clamp(0, (var(--t) - 12.2) / 1, 1) * 37ch)}
.demo .c3c{width:calc(clamp(0, (var(--t) - 13.2) / 0.6, 1) * 25ch)}
.demo .o3-0{opacity:clamp(0, (var(--t) - 14) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 14) / 0.3, 1)) * 3px))}
.demo .o3-1{opacity:clamp(0, (var(--t) - 14.15) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 14.15) / 0.3, 1)) * 3px))}
.demo .o3-2{opacity:clamp(0, (var(--t) - 14.3) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 14.3) / 0.3, 1)) * 3px))}
.demo .s3 .saved{opacity:clamp(0, (var(--t) - 14.7) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 14.7) / 0.3, 1)) * 3px))}
.demo .plain{opacity:clamp(0, (var(--t) - 17.1) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 17.1) / 0.3, 1)) * 3px))}
.demo .plain{opacity:min(clamp(0, (var(--t) - 17.1) / 0.3, 1), calc(1 - clamp(0, (var(--t) - 18.7) / 0.3, 1)))}
.demo .styled{opacity:clamp(0, (var(--t) - 19) / 0.5, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 19) / 0.5, 1)) * 3px))}
.demo .voicechip{opacity:clamp(0, (var(--t) - 18.8) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 18.8) / 0.3, 1)) * 3px))}
.demo .t-out{transform:translateY(calc(min(clamp(0, (var(--t) - 23) / 0.3, 1), calc(1 - clamp(0, (var(--t) - 23.4) / 0.3, 1))) * -5px)) scale(calc(1 + min(clamp(0, (var(--t) - 23) / 0.3, 1), calc(1 - clamp(0, (var(--t) - 23.4) / 0.3, 1))) * .15));box-shadow:0 0 0 calc(min(clamp(0, (var(--t) - 23) / 0.3, 1), calc(1 - clamp(0, (var(--t) - 23.4) / 0.3, 1))) * 2px) #e6a866}
.demo .app{opacity:clamp(0, (var(--t) - 23.5) / 0.5, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 23.5) / 0.5, 1)) * 30px)) scale(calc(.6 + clamp(0, (var(--t) - 23.5) / 0.5, 1) * .4))}
.demo .sg0{width:calc(clamp(0, (var(--t) - 28.3) / 0.36, 1) * 13ch)}
.demo .sg1{width:calc(clamp(0, (var(--t) - 28.66) / 0.31, 1) * 11ch)}
.demo .sg2{width:calc(clamp(0, (var(--t) - 28.97) / 0.84, 1) * 30ch)}
.demo .sg3{width:calc(clamp(0, (var(--t) - 29.81) / 0.34, 1) * 12ch)}
.demo .s6 .saved{opacity:clamp(0, (var(--t) - 30.35) / 0.3, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 30.35) / 0.3, 1)) * 3px))}
.demo .card-task{opacity:clamp(0, (var(--t) - 34.1) / 0.4, 1);transform:translateY(calc((1 - clamp(0, (var(--t) - 34.1) / 0.4, 1)) * 3px))}