/* "Watch how it works" on the one-off service cards: a big player over the page, with the card's details beside it.
   Each demo is an animated screen rather than a filmed video, so the words on it stay sharp. Loaded by index.html; built by demos.js. */

/* the button on the card: a play triangle instead of the plus */
.oo .more.sd-play .plus::before{width:0;height:0;border-radius:0;background:none;border-left:0.5625rem solid currentColor;border-top:0.375rem solid transparent;border-bottom:0.375rem solid transparent;transform:translate(-35%,-50%)}
.oo .more.sd-play .plus::after{display:none}

/* the player */
.sd{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;width:min(61.25rem,calc(100% - 2rem));overflow:visible;color:var(--ink)}
.sd::backdrop{background:rgba(34,19,47,.62);backdrop-filter:blur(4px)}
.sd[open]{animation:sd-in .4s var(--ease)}
.sd[open]::backdrop{animation:sd-fade .3s ease}
@keyframes sd-in{from{opacity:0;transform:translateY(1rem) scale(.97)}}
@keyframes sd-fade{from{opacity:0}}
.sd-box{position:relative;background:#fff;border-radius:18px;display:grid;grid-template-columns:1.7fr 1fr;max-height:calc(100dvh - 2rem);overflow:auto;box-shadow:0 2rem 5rem rgba(20,8,30,.35)}
.sd-x{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:0.75rem;right:0.75rem;z-index:5;width:2.25rem;height:2.25rem;border-radius:50%;background:#fff;color:var(--accent);box-shadow:0 2px 10px rgba(34,19,47,.18);display:grid;place-items:center;font-size:1.375rem;line-height:1}
.sd-x:focus-visible,.sd-pause:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sd-info{padding:1.75rem 1.5rem 1.5rem}
.sd-info h3{font-size:1.5rem;padding-right:2.5rem}
.sd-info .oo-price{margin:0.375rem 0 0}
.sd-info .ticks{margin:1.125rem 0 0.75rem;font-size:0.9375rem}
.sd-info .good{margin:0 0 0.75rem;font-size:0.9375rem;color:var(--muted)}
.sd-info .good b{color:var(--ink)}
.sd-info .ask{font-weight:600;font-size:0.9375rem;text-decoration:none}
.sd-info .ask:hover{text-decoration:underline}
.sd-info .pill{margin-top:1.25rem}
.sd-sum{display:none}
/* On phones the demo fills the screen and the details shrink to what fits below it without scrolling:
   the card's one-line summary takes the place of the list. */
@media (max-width:760px){
  .sd-box{display:flex;flex-direction:column;height:calc(100dvh - 2rem);overflow:hidden}
  .sd-box .sd-clip{flex:1 1 0;min-height:0;height:auto;border-radius:18px 18px 0 0}
  .sd-info{flex:none;padding:1rem 1.25rem 1.25rem}
  .sd-info h3{font-size:1.25rem}
  .sd-info .oo-price{font-size:0.9375rem}
  .sd-sum{display:block;margin:0.5rem 0 0;font-size:0.9375rem;line-height:1.45;color:var(--muted)}
  .sd-details .ticks,.sd-details .good{display:none}
  .sd-details{margin-top:0.625rem}
  .sd-info .pill{margin-top:0.875rem}
}

/* ---------- the demo screens ----------
   Every moving piece runs on one 9-second clock, and nothing moves unless the clip has "sd-on", like a paused video. */
/* a size container needs a set height (a minimum alone measures as zero), so the player is a fixed height on computers */
.sd-clip{position:relative;overflow:hidden;container-type:size;height:min(34rem,calc(100dvh - 4rem));border-radius:18px 0 0 18px;background:linear-gradient(135deg,#F4ECFB 0%,#E6D6F5 55%,#D9C4EE 100%);isolation:isolate;font-family:"Inter",ui-sans-serif,system-ui,sans-serif;line-height:1.35}
.sd-stage *{animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
.sd-on .sd-stage *{animation-play-state:running}
.sd-stage{position:absolute;inset:0;font-size:min(2.45cqw,3.05cqh)}
.sd-pause{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:0.75rem;bottom:0.75rem;z-index:6;width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(34,19,47,.7);display:grid;place-items:center}
.sd-pause::before{content:"";width:0.625rem;height:0.75rem;border-left:0.1875rem solid #fff;border-right:0.1875rem solid #fff;box-sizing:border-box}
.sd-clip:not(.sd-on) .sd-pause::before{width:0;height:0;border-right:0;border-left:0.625rem solid #fff;border-top:0.4375rem solid transparent;border-bottom:0.4375rem solid transparent;margin-left:0.1875rem}

.sd-phone{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:14em;height:28.5em;background:#fff;border-radius:2.6em;border:0.45em solid #1F1B16;box-shadow:0 1.4em 3em rgba(34,19,47,.25);overflow:hidden;color:var(--ink)}
/* a full-length phone: the camera notch at the top and the home bar at the bottom */
.sd-phone::before{content:"";position:absolute;z-index:6;top:0.55em;left:50%;width:4.2em;height:1.15em;margin-left:-2.1em;border-radius:1em;background:#1F1B16}
.sd-phone::after{content:"";position:absolute;z-index:6;bottom:0.45em;left:50%;width:5em;height:0.25em;margin-left:-2.5em;border-radius:1em;background:rgba(31,27,22,.3)}
.sd-scr{position:absolute;inset:0;background:#fff}
/* nowrap: the longer names only just fit, and a wider fallback font would wrap them and push the second line out of the bar */
.sd-bar{height:5.3em;background:var(--accent);color:#fff;padding:2.3em 1.1em 0;font-weight:600;white-space:nowrap}
.sd-bar small{display:block;font-weight:400;opacity:.8;font-size:0.78em;margin-top:-0.15em}
.sd-panel{position:absolute;right:7%;top:12%;width:17em;background:#fff;border-radius:1.2em;box-shadow:0 1.2em 2.6em rgba(34,19,47,.18);padding:1em 1.1em;color:var(--ink);animation-name:sd-panel}
.sd-panel h4{margin:0 0 0.6em;font-size:0.95em;font-weight:600;display:flex;justify-content:space-between;gap:0.5em;font-family:inherit;letter-spacing:0}
.sd-panel h4 small{color:var(--muted);font-weight:400}
@keyframes sd-panel{0%,40%{opacity:.5;transform:translateX(1em)}47%,92%{opacity:1;transform:none}100%{opacity:.5;transform:translateX(1em)}}
.sd-finger{position:absolute;z-index:4;width:2.2em;height:2.2em;margin:-1.1em 0 0 -1.1em;border-radius:50%;background:rgba(31,27,22,.28);border:0.18em solid rgba(255,255,255,.9);left:10em;top:30em}
.sd-toast{position:absolute;right:7%;bottom:9%;background:var(--night);color:#fff;border-radius:999px;padding:0.55em 1.1em;font-size:0.85em;font-weight:600;animation-name:sd-toast}
@keyframes sd-toast{0%,54%{opacity:0;transform:translateY(0.8em)}59%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.sd-check{width:3.2em;height:3.2em;border-radius:50%;background:#2E8B57;display:grid;place-items:center}
.sd-check::after{content:"";width:1.2em;height:0.6em;border-left:0.25em solid #fff;border-bottom:0.25em solid #fff;transform:translateY(-0.15em) rotate(-45deg)}

/* On a narrow player (phones) the panel sits lower and only appears once the phone has done its part. */
@container (max-aspect-ratio:1/1){
  .sd-stage{font-size:min(3.3cqw,3.05cqh)}
  .sd-phone{left:6%;top:6%;transform:none}
  .sd-panel{right:4%;top:auto;bottom:5%;animation-name:sd-panel-n;z-index:3}
  .sd-toast{display:none}   /* the calendar already shows it, and there is no room beside the close button */
}
@keyframes sd-panel-n{0%,40%{opacity:0;transform:translateY(1.5em)}47%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(1.5em)}}

/* Booking page: a customer picks 2:30 on their phone, and it lands on the owner's calendar */
.sd-svc{margin:0.9em 1em 0;padding:0.45em;border-radius:0.7em;background:var(--sunk);font-size:0.82em;font-weight:600;display:flex;align-items:center;gap:0.6em}
.sd-svc small{display:block;color:var(--muted);font-weight:400}
.sd-svc .th{width:2.6em;height:2.6em;border-radius:0.5em;overflow:hidden;flex:none}
.sd-bk .sd-bar{position:relative;padding-left:3.9em}
.sd-bk .sd-bar .av{position:absolute;left:1em;top:2.35em;width:2.3em;height:2.3em;border-radius:50%;overflow:hidden;box-shadow:0 0 0 0.12em rgba(255,255,255,.7)}
.sd-days{display:flex;gap:0.45em;padding:0.9em 1em 0.2em}
.sd-days span{flex:1;text-align:center;border-radius:0.6em;padding:0.3em 0;font-size:0.78em;background:var(--sunk);color:var(--muted)}
.sd-days span b{display:block;font-size:1.25em;color:var(--ink)}
.sd-days .on{background:var(--accent-soft);outline:0.12em solid var(--accent)}
.sd-slots{display:grid;grid-template-columns:1fr 1fr;gap:0.5em;padding:0.8em 1em}
.sd-slots span{border:0.12em solid var(--lav);border-radius:0.7em;text-align:center;padding:0.45em 0;font-size:0.9em;font-weight:600;color:var(--accent)}
.sd-slots .gone{border-color:#EEE;color:#C9C2D2;text-decoration:line-through;font-weight:400}
.sd-bk .pick{animation-name:sd-bk-pick}
@keyframes sd-bk-pick{0%,17%{background:#fff;color:var(--accent)}20%,92%{background:var(--accent);color:#fff;border-color:var(--accent)}100%{background:#fff;color:var(--accent)}}
.sd-bk .btn{margin:0.3em 1em;border-radius:999px;background:var(--accent);color:#fff;text-align:center;font-weight:600;font-size:0.9em;padding:0.6em 0;animation-name:sd-bk-btn}
@keyframes sd-bk-btn{0%,21%{opacity:0;transform:translateY(0.6em)}25%,31%{opacity:1;transform:none}33%{transform:scale(.94)}35%,92%{opacity:1;transform:none}100%{opacity:0}}
.sd-bk .done{position:absolute;inset:5.3em 0 0;background:#fff;display:grid;place-content:center;justify-items:center;text-align:center;padding:1em;animation-name:sd-bk-done}
.sd-bk .done .sd-check{margin-bottom:0.6em;animation-name:sd-pop}
.sd-bk .done b{font-size:1.1em}
.sd-bk .done small{color:var(--muted);font-size:0.8em;margin-top:0.2em}
@keyframes sd-bk-done{0%,35%{opacity:0}39%,92%{opacity:1}100%{opacity:0}}
@keyframes sd-pop{0%,36%{transform:scale(.4)}42%{transform:scale(1.12)}45%,100%{transform:none}}
.sd-bk .sd-finger{animation-name:sd-bk-finger}
@keyframes sd-bk-finger{0%,5%{opacity:0;left:10em;top:30em}9%{opacity:1}16%{left:9.2em;top:16.8em;transform:none}18%{transform:scale(.8)}20%{transform:none;left:9.2em;top:16.8em}27%{left:6.5em;top:25.2em;transform:none}32%{transform:scale(.8);left:6.5em;top:25.2em}34%{transform:none;opacity:1}38%,100%{opacity:0;left:6.5em;top:25.2em}}
.sd-row{display:grid;grid-template-columns:3.2em 1fr;align-items:center;gap:0.5em;height:2.3em;border-top:0.08em solid #EEE8F4;font-size:0.8em;color:var(--muted)}
.sd-ev{height:1.9em;border-radius:0.5em;padding:0 0.7em;display:flex;align-items:center;font-weight:600;color:var(--ink);background:var(--sunk);font-size:0.95em;white-space:nowrap;overflow:hidden}
.sd-bk .sd-ev.new{background:var(--accent);color:#fff;transform-origin:left;animation-name:sd-bk-new}
@keyframes sd-bk-new{0%,46%{transform:scaleX(0)}52%,92%{transform:none}100%{transform:scaleX(0)}}

/* Website: the bakery's own site on a computer, scrolling from its photo banner to today's bakes and its hours;
   then the same site on a phone, where one tap calls the bakery */
.sd-ws img,.sd-bk img,.sd-mc img{display:block;width:100%;height:100%;object-fit:cover}
.sd-br{position:absolute;left:4%;top:6%;width:30em;height:26em;background:#fff;border-radius:0.9em;overflow:hidden;box-shadow:0 1.4em 3em rgba(34,19,47,.22);color:var(--ink)}
.sd-br .chrome{height:2em;background:var(--sunk);display:flex;align-items:center;gap:0.35em;padding:0 0.8em}
.sd-br .chrome i{width:0.55em;height:0.55em;border-radius:50%;background:#D9CFE6}
.sd-br .chrome span{flex:1;margin-left:0.6em;height:1.15em;border-radius:999px;background:#fff;font-size:0.6em;color:var(--muted);display:flex;align-items:center;padding:0 1em;gap:0.5em}
.sd-br .chrome span::before{content:"";width:0.7em;height:0.7em;border-radius:0.15em;background:#2E8B57;flex:none}
.sd-br .view{position:absolute;inset:2em 0 0;overflow:hidden}
.sd-br .page{animation-name:sd-ws-scroll}
@keyframes sd-ws-scroll{0%,10%{transform:none}30%,92%{transform:translateY(-5.5em)}100%{transform:none}}
.sd-br nav{height:2.3em;display:flex;align-items:center;gap:1.1em;padding:0 1.1em;font-size:0.7em;color:var(--muted)}
.sd-br nav b{font-family:"Inter",sans-serif;font-size:1.25em;color:#7A4A1E;margin-right:auto}
.sd-br nav em{font-style:normal;background:#7A4A1E;color:#fff;border-radius:999px;padding:0.3em 0.9em;font-weight:600}
.sd-br .banner{position:relative;height:11.5em}
.sd-br .banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,22,8,.78) 0%,rgba(40,22,8,.35) 55%,rgba(40,22,8,0) 80%)}
.sd-br .banner div{position:absolute;inset:0;z-index:1;padding:2.1em 1.6em 0;color:#fff}
.sd-br .banner h5{margin:0;font:700 1.7em/1.02 "Inter",sans-serif;max-width:9em;letter-spacing:-.01em}
.sd-br .banner p{margin:0.55em 0 0.9em;font-size:0.72em;opacity:.92}
.sd-br .banner span{display:inline-block;font-size:0.68em;font-weight:600;border-radius:999px;padding:0.45em 1em;margin-right:0.5em;background:#fff;color:#7A4A1E}
.sd-br .banner span+span{background:transparent;color:#fff;box-shadow:inset 0 0 0 0.12em rgba(255,255,255,.8)}
.sd-br h6{margin:1.3em 1.6em 0.7em;font:700 0.95em "Inter",sans-serif}
.sd-br .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8em;margin:0 1.6em}
.sd-br .grid div{border-radius:0.6em;overflow:hidden;background:var(--paper);box-shadow:0 0 0 0.08em var(--line)}
.sd-br .grid img{height:5.4em}
.sd-br .grid b{display:block;font-size:0.62em;padding:0.55em 0.7em 0}
.sd-br .grid small{display:block;font-size:0.56em;color:var(--muted);padding:0.1em 0.8em 0.7em}
.sd-br .visit{display:grid;grid-template-columns:1fr 1fr;gap:0.8em;margin:1.2em 1.6em}
.sd-br .visit div{font-size:0.66em;line-height:1.6}
.sd-br .visit div b{display:block;font-size:1.2em}
.sd-br .visit .open{color:#2E8B57;font-weight:600}
.sd-br .map{height:5em;border-radius:0.6em;position:relative;background:#EAE3F2;background-image:linear-gradient(90deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(0deg,transparent 40%,#fff 40%,#fff 47%,transparent 47%),linear-gradient(90deg,transparent 15%,#F6F2FA 15%,#F6F2FA 18%,transparent 18%)}
.sd-br .map::after{content:"";position:absolute;left:50%;top:45%;width:0.9em;height:0.9em;margin:-0.9em 0 0 -0.45em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#C2453A}
.sd-ws .sd-phone{font-size:0.72em;left:auto;right:5%;top:auto;bottom:6%;transform:none;animation-name:sd-ws-phone}
@keyframes sd-ws-phone{0%,36%{opacity:0;transform:translateX(3em)}43%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateX(3em)}}
.sd-ws .m-photo{height:11em;position:relative}
.sd-ws .m-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(40,22,8,.8),rgba(40,22,8,0) 70%)}
.sd-ws .m-photo b{position:absolute;z-index:1;left:1em;bottom:0.9em;color:#fff;font:700 1.45em/1 "Inter",sans-serif}
.sd-ws .m-open{margin:0.9em 1em 0.6em;font-size:0.85em;font-weight:600;display:flex;align-items:center;gap:0.45em}
.sd-ws .m-open::before{content:"";width:0.6em;height:0.6em;border-radius:50%;background:#2E8B57}
.sd-ws .m-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4em;margin:0 1em}
.sd-ws .m-thumbs img{height:3.6em;border-radius:0.5em}
.sd-ws .m-list{margin:0.7em 1em 0;padding:0;list-style:none;font-size:0.8em;color:var(--muted)}
.sd-ws .m-list li{padding:0.4em 0;border-bottom:0.08em solid #EEE8F4}
.sd-ws .call{position:absolute;left:1em;right:1em;bottom:1.8em;border-radius:999px;background:#7A4A1E;color:#fff;text-align:center;font-weight:600;font-size:0.95em;padding:0.65em 0}
.sd-ws .calling{position:absolute;inset:0;background:var(--night);color:#fff;display:grid;place-content:center;justify-items:center;text-align:center;gap:0.3em;animation-name:sd-ws-calling}
.sd-ws .calling{z-index:2}
@keyframes sd-ws-calling{0%,58%{opacity:0}61%,92%{opacity:1}100%{opacity:0}}
.sd-ws .calling i{width:4.4em;height:4.4em;border-radius:50%;overflow:hidden;margin-bottom:0.6em;animation-name:sd-ring;animation-duration:1.5s}
.sd-ws .calling small{opacity:.75;font-size:0.85em}
@keyframes sd-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}100%{box-shadow:0 0 0 1.4em rgba(255,255,255,0)}}
.sd-ws .sd-finger{animation-name:sd-ws-finger}
@keyframes sd-ws-finger{0%,46%{opacity:0;left:9em;top:31em}50%{opacity:1}55%{left:6.5em;top:23.9em;transform:none}57%{transform:scale(.8)}59%{transform:none;opacity:1;left:6.5em;top:23.9em}62%,100%{opacity:0;left:6.5em;top:23.9em}}
.sd-ws .sd-toast{animation-name:sd-ws-toast;right:auto;left:6%;bottom:7%}
.sd-ws .sd-toast::before{content:"📞 "}
@keyframes sd-ws-toast{0%,62%{opacity:0;transform:translateY(0.8em)}66%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@container (max-aspect-ratio:1/1){
  /* the computer starts below the close button, and on tall phones the pair sits in the middle instead of leaving a gap */
  .sd-br{left:4%;top:max(3.5rem,calc(50% - 20em));width:28em}
  .sd-ws .sd-phone{right:4%;bottom:max(3%,calc(50% - 27.8em))}   /* 27.8em of the phone's smaller text = 20em of the stage's */
}

/* Missed-call text reply: nobody picks up, a text goes back straight away, and the owner sees what the caller needs */
.sd-mc .dial{display:grid;place-content:center;justify-items:center;text-align:center;gap:0.25em;background:var(--night);color:#fff;animation-name:sd-mc-dial}
@keyframes sd-mc-dial{0%,20%{opacity:1}23%,94%{opacity:0}100%{opacity:1}}
.sd-mc .dial i{width:3.6em;height:3.6em;border-radius:50%;background:#3E7CB1;margin-bottom:0.5em;display:grid;place-items:center;font-style:normal;font-weight:600;animation-name:sd-ring;animation-duration:1.5s}
.sd-mc .dial small{opacity:.75;font-size:0.8em}
.sd-mc .dial .end{margin-top:0.6em;font-size:0.8em;color:#F3A59E;animation-name:sd-mc-end}
@keyframes sd-mc-end{0%,12%{opacity:0}14%,100%{opacity:1}}
.sd-mc .msgs{background:#fff}
.sd-mc .bub{margin:0.6em 0.8em 0;padding:0.55em 0.75em;border-radius:1em;font-size:0.76em;max-width:82%;line-height:1.35}
.sd-mc .in{background:var(--sunk);border-bottom-left-radius:0.25em;animation-name:sd-mc-in}
.sd-mc .link{display:block;margin-top:0.55em;border-radius:0.7em;overflow:hidden;background:#fff}
.sd-mc .link img{height:5.2em}
.sd-mc .link b{display:block;padding:0.4em 0.7em 0;color:var(--accent)}
.sd-mc .link small{display:block;padding:0 0.7em 0.5em;color:var(--muted);font-size:0.9em}
@keyframes sd-mc-in{0%,25%{opacity:0;transform:translateY(0.8em)}29%,100%{opacity:1;transform:none}}
.sd-mc .pair{display:grid;justify-items:end;align-items:start}
.sd-mc .pair > *{grid-area:1/1}
.sd-mc .dots{background:var(--accent-soft);width:3.2em;height:2.1em;display:flex;gap:0.3em;justify-content:center;align-items:center;animation-name:sd-mc-dots}
.sd-mc .dots i{width:0.4em;height:0.4em;border-radius:50%;background:var(--accent)}
@keyframes sd-mc-dots{0%,33%{opacity:0}35%,40%{opacity:1}42%,100%{opacity:0}}
.sd-mc .out{background:var(--accent);color:#fff;border-bottom-right-radius:0.25em;animation-name:sd-mc-out}
@keyframes sd-mc-out{0%,40%{opacity:0;transform:translateY(0.8em)}43%,100%{opacity:1;transform:none}}
.sd-mc .ln{display:flex;gap:0.6em;align-items:flex-start;padding:0.55em 0;border-top:0.08em solid #EEE8F4;font-size:0.8em}
.sd-mc .ln i{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-style:normal;font-size:0.85em}
.sd-mc .ln small{display:block;color:var(--muted)}
.sd-mc .ln.yes i{background:#DDEFE4;color:#2E8B57}
.sd-mc .l2{animation-name:sd-mc-l2}
.sd-mc .l3{animation-name:sd-mc-l3}
@keyframes sd-mc-l2{0%,48%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
@keyframes sd-mc-l3{0%,55%{opacity:0}59%,92%{opacity:1}100%{opacity:0}}

/* shared pieces for the later demos */
.sd-search{margin:2.6em 1em 1em;border:0.1em solid var(--line);border-radius:999px;padding:0.5em 0.9em;font-size:0.85em;display:flex;align-items:center;gap:0.5em;background:#fff}
.sd-search::before{content:"";width:0.7em;height:0.7em;border:0.15em solid var(--muted);border-radius:50%;flex:none}
.sd-stage img{display:block;width:100%;height:100%;object-fit:cover}
.sd-line{display:flex;justify-content:space-between;gap:0.6em;padding:0.45em 0;border-bottom:0.08em solid #EEE8F4;font-size:0.78em}
.sd-line b{font-weight:600}
.sd-btn{border-radius:999px;background:var(--accent);color:#fff;text-align:center;font-weight:600;font-size:0.9em;padding:0.6em 0}
.sd-done{position:absolute;inset:5.3em 0 0;background:#fff;display:grid;place-content:center;justify-items:center;text-align:center;padding:1em;gap:0.2em}
.sd-done .sd-check{margin-bottom:0.5em;animation-name:sd-pop}
.sd-done b{font-size:1.1em}
.sd-done small{color:var(--muted);font-size:0.8em}
.sd-stars{color:#E8A317;letter-spacing:0.05em}
.sd-press{animation-name:sd-press}
@keyframes sd-press{0%,57%{transform:none;background:var(--accent)}59%{transform:scale(.93)}61%,92%{transform:none;background:#2E8B57}100%{background:var(--accent)}}

/* two labels in one spot: the first shows until a moment in the clip, then the second takes over (".sd-swap.at14" = at 14%) */
.sd-swap{display:inline-grid}
.sd-swap > *{grid-area:1/1;text-decoration:none}
.sd-swap > :first-child{animation-name:var(--sd-out)}
.sd-swap > :last-child{animation-name:var(--sd-in)}
.at14{--sd-out:sd-out14;--sd-in:sd-in14}.at23{--sd-out:sd-out23;--sd-in:sd-in23}.at27{--sd-out:sd-out27;--sd-in:sd-in27}.at61{--sd-out:sd-out61;--sd-in:sd-in61}
@keyframes sd-out14{0%,13%{opacity:1}14%,99%{opacity:0}100%{opacity:1}}@keyframes sd-in14{0%,13%{opacity:0}14%,99%{opacity:1}100%{opacity:0}}
@keyframes sd-out23{0%,22%{opacity:1}23%,99%{opacity:0}100%{opacity:1}}@keyframes sd-in23{0%,22%{opacity:0}23%,99%{opacity:1}100%{opacity:0}}
@keyframes sd-out27{0%,26%{opacity:1}27%,99%{opacity:0}100%{opacity:1}}@keyframes sd-in27{0%,26%{opacity:0}27%,99%{opacity:1}100%{opacity:0}}
@keyframes sd-out61{0%,60%{opacity:1}61%,99%{opacity:0}100%{opacity:1}}@keyframes sd-in61{0%,60%{opacity:0}61%,99%{opacity:1}100%{opacity:0}}

/* Google page: the café's listing on the map, filled in with photos, hours and buttons, and a review answered in the owner's voice */
.sd-gb .map{position:absolute;left:0;right:0;top:4.6em;height:9em;background:#EAE3F2;background-image:linear-gradient(90deg,transparent 30%,#fff 30%,#fff 34%,transparent 34%),linear-gradient(0deg,transparent 55%,#fff 55%,#fff 60%,transparent 60%),linear-gradient(90deg,transparent 70%,#F6F2FA 70%,#F6F2FA 72%,transparent 72%),linear-gradient(0deg,transparent 20%,#F6F2FA 20%,#F6F2FA 23%,transparent 23%)}
.sd-gb .map i{position:absolute;width:0.9em;height:0.9em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#B9AECB}
.sd-gb .map i.me{width:1.3em;height:1.3em;background:var(--accent);animation-name:sd-gb-pin}
@keyframes sd-gb-pin{0%,6%{transform:rotate(-45deg) scale(1)}9%{transform:rotate(-45deg) scale(1.35)}12%,100%{transform:rotate(-45deg) scale(1)}}
.sd-gb .sheet{position:absolute;left:0;right:0;bottom:0;top:11.6em;background:#fff;border-radius:1.2em 1.2em 0 0;box-shadow:0 -0.5em 1.5em rgba(34,19,47,.12);overflow:hidden;animation-name:sd-gb-sheet}
@keyframes sd-gb-sheet{0%,8%{transform:translateY(100%)}15%,92%{transform:none}100%{transform:translateY(100%)}}
.sd-gb .sc{padding:0.6em 0.9em;animation-name:sd-gb-scroll}
@keyframes sd-gb-scroll{0%,44%{transform:none}50%,92%{transform:translateY(-8.4em)}100%{transform:none}}
.sd-gb .grab{width:2.6em;height:0.25em;border-radius:1em;background:#DDD3EA;margin:0 auto 0.6em}
/* set heights rather than 100%: Safari drew the tall photo at zero height inside the grid, leaving a blank space */
.sd-gb .pics{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:2.95em 2.95em;gap:0.3em;border-radius:0.7em;overflow:hidden}
.sd-gb .pics img{height:2.95em}
.sd-gb .pics img:first-child{grid-row:span 2;height:6.2em}
.sd-gb h5{margin:0.6em 0 0.1em;font:700 1.1em "Inter",sans-serif}
.sd-gb .meta{font-size:0.72em;color:var(--muted)}
.sd-gb .meta.open{color:#2E8B57;font-weight:600}
.sd-gb .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:0.3em;margin:0.7em 0;text-align:center;font-size:0.62em;color:var(--accent);font-weight:600}
.sd-gb .acts span::before{content:"";display:block;width:2.6em;height:2.6em;margin:0 auto 0.3em;border-radius:50%;background:var(--accent-soft);box-shadow:inset 0 0 0 0.15em var(--lav)}
.sd-gb .rev{border-top:0.08em solid #EEE8F4;padding-top:0.6em;font-size:0.72em}
.sd-gb .rev p{margin:0.25em 0 0.5em;color:var(--ink)}
.sd-gb .reply{background:var(--sunk);border-radius:0.7em;padding:0.5em 0.7em;animation-name:sd-gb-reply}
.sd-gb .reply small{display:block;color:var(--muted);font-weight:600;margin-bottom:0.15em}
@keyframes sd-gb-reply{0%,61%{opacity:0;transform:translateY(0.6em)}65%,92%{opacity:1;transform:none}100%{opacity:0}}
.sd-gb .sd-panel p{margin:0.2em 0 0.7em;font-size:0.8em}
.sd-gb .draft{background:var(--accent-soft);border-radius:0.7em;padding:0.6em 0.75em;font-size:0.78em;margin-bottom:0.8em}
.sd-gb .draft small{display:block;color:var(--accent);font-weight:600;margin-bottom:0.2em}

/* SEO and GEO: the florist climbs to the top of local search, and an AI assistant names them in its answer */
.sd-seo .list{position:absolute;left:1em;right:1em;top:5.6em}
.sd-seo .res{position:absolute;left:0;right:0;height:4em;display:flex;align-items:center;gap:0.55em;padding:0 0.55em;border-radius:0.7em;background:var(--sunk);font-size:0.72em;white-space:nowrap}
.sd-seo .res i{width:2.8em;height:2.8em;border-radius:0.5em;flex:none;background:linear-gradient(135deg,#E9DDF3,#D7C6EA);overflow:hidden}
.sd-seo .r2 i{background:linear-gradient(135deg,#F3E3DD,#E8CFC5)}
.sd-seo .r3 i{background:linear-gradient(135deg,#DDEBDF,#C9DECD)}
.sd-seo .res b{display:block;color:var(--accent)}
.sd-seo .res small{color:var(--muted)}
.sd-seo .r1{animation-name:sd-seo-down}
.sd-seo .r2{top:4.6em;animation-name:sd-seo-down2}
.sd-seo .r3{top:9.2em;animation-name:sd-seo-down3}
.sd-seo .me{top:13.8em;background:#fff;box-shadow:0 0 0 0.12em var(--accent),0 0.6em 1.4em rgba(91,42,134,.18);z-index:2;animation-name:sd-seo-up}
@keyframes sd-seo-up{0%,14%{top:13.8em}28%,92%{top:0}100%{top:13.8em}}
@keyframes sd-seo-down{0%,14%{top:0}28%,92%{top:4.6em}100%{top:0}}
@keyframes sd-seo-down2{0%,14%{top:4.6em}28%,92%{top:9.2em}100%{top:4.6em}}
@keyframes sd-seo-down3{0%,14%{top:9.2em}28%,92%{top:13.8em}100%{top:9.2em}}
.sd-seo .rank{margin-left:auto;font-weight:700;color:var(--accent);font-size:1.05em}
.sd-seo .facts{position:absolute;left:1em;right:1em;top:19.8em;display:flex;flex-wrap:wrap;gap:0.35em}
.sd-seo .facts span{font-size:0.66em;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:0.25em 0.7em;font-weight:600;animation-name:sd-seo-fact}
@keyframes sd-seo-fact{0%,28%{opacity:0}33%,92%{opacity:1}100%{opacity:0}}
.sd-seo .ask{margin:0 0 0.5em auto;width:max-content;max-width:85%;background:var(--accent);color:#fff;border-radius:1em 1em 0.25em 1em;padding:0.5em 0.75em;font-size:0.78em;animation-name:sd-seo-ask}
@keyframes sd-seo-ask{0%,44%{opacity:0;transform:translateY(0.6em)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
.sd-seo .thinking{display:flex;gap:0.3em;padding:0.6em 0.75em;width:max-content;border-radius:1em;background:var(--sunk);animation-name:sd-seo-thinking}
.sd-seo .thinking i{width:0.4em;height:0.4em;border-radius:50%;background:var(--muted)}
@keyframes sd-seo-thinking{0%,49%{opacity:0}51%,55%{opacity:1}57%,100%{opacity:0}}
.sd-seo .ans{margin-top:-2em;background:var(--sunk);border-radius:1em 1em 1em 0.25em;padding:0.6em 0.75em;font-size:0.78em;animation-name:sd-seo-ans}
.sd-seo .ans b{color:var(--accent)}
@keyframes sd-seo-ans{0%,56%{opacity:0;transform:translateY(0.6em)}60%,92%{opacity:1;transform:none}100%{opacity:0}}
.sd-seo .acard{display:flex;gap:0.6em;align-items:center;margin-top:0.5em;background:#fff;border-radius:0.7em;padding:0.4em;font-size:0.92em}
.sd-seo .acard i{width:2.6em;height:2.6em;border-radius:0.5em;overflow:hidden;flex:none}
.sd-seo .acard small{display:block;color:var(--muted)}

/* Ordering page: a regular orders a latte and a sandwich, pays, and the order lands on the café's screen */
.sd-or .item{display:flex;align-items:center;gap:0.7em;margin:0 1em;padding:0.7em 0;border-bottom:0.08em solid #EEE8F4}
.sd-or .item i{width:3.6em;height:3.6em;border-radius:0.7em;overflow:hidden;flex:none}
.sd-or .item div{flex:1;font-size:0.8em}
.sd-or .item small{display:block;color:var(--muted)}
.sd-or .item em{font-style:normal;width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--accent);box-shadow:inset 0 0 0 0.12em var(--lav)}
.sd-or .a1 em{animation-name:sd-or-a1}
.sd-or .a3 em{animation-name:sd-or-a3}
@keyframes sd-or-a1{0%,12%{background:#fff;color:var(--accent)}14%,92%{background:var(--accent);color:#fff}100%{background:#fff;color:var(--accent)}}
@keyframes sd-or-a3{0%,21%{background:#fff;color:var(--accent)}23%,92%{background:var(--accent);color:#fff}100%{background:#fff;color:var(--accent)}}
.sd-or .pickup{margin:0.8em 1em 0;font-size:0.75em;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:0.4em 0.9em;width:max-content}
.sd-or .cart{position:absolute;left:1em;right:1em;bottom:1.8em;animation-name:sd-or-cart}
@keyframes sd-or-cart{0%,13%{opacity:0;transform:translateY(1em)}16%,31%{opacity:1;transform:none}33%{transform:scale(.94)}35%,92%{opacity:1;transform:none}100%{opacity:0}}
.sd-or .sd-done{animation-name:sd-or-done}
@keyframes sd-or-done{0%,35%{opacity:0}39%,92%{opacity:1}100%{opacity:0}}
.sd-or .sd-finger{animation-name:sd-or-finger}
.sd-or .ticket .sd-line{font-size:0.8em}
.sd-or .ticket .tag{display:inline-block;margin:0.7em 0 0.8em;font-size:0.72em;font-weight:600;color:#2E8B57;background:#DDEFE4;border-radius:999px;padding:0.25em 0.8em}

/* Quoting system: the customer opens a clear quote, accepts it and pays the deposit; the owner sees it go from draft to paid */
.sd-qt .photo{height:6.4em;margin:0.8em 1em 0.5em;border-radius:0.7em;overflow:hidden}
.sd-qt .qlines{margin:0 1em}
.sd-qt .tot{display:flex;justify-content:space-between;margin:0.6em 1em 0;font-weight:700}
.sd-qt .dep{display:flex;justify-content:space-between;margin:0.2em 1em 0;font-size:0.78em;color:var(--muted)}
.sd-qt .sd-btn{position:absolute;left:1em;right:1em;bottom:1.8em;animation-name:sd-qt-btn}
@keyframes sd-qt-btn{0%,29%{transform:none}31%{transform:scale(.94)}33%,100%{transform:none}}
.sd-qt .sd-done{animation-name:sd-qt-done}
@keyframes sd-qt-done{0%,33%{opacity:0}37%,92%{opacity:1}100%{opacity:0}}
.sd-qt .sd-finger{animation-name:sd-qt-finger}
.sd-qt .step{display:flex;gap:0.6em;align-items:flex-start;padding:0.5em 0;border-top:0.08em solid #EEE8F4;font-size:0.8em}
.sd-qt .step i{flex:none;width:1.5em;height:1.5em;border-radius:50%;background:#DDEFE4;color:#2E8B57;display:grid;place-items:center;font-style:normal;font-size:0.85em;font-weight:700}
.sd-qt .step small{display:block;color:var(--muted)}
.sd-qt .s4{animation-name:sd-qt-s4}
.sd-qt .s4 i{background:#2E8B57;color:#fff}
@keyframes sd-qt-s4{0%,49%{opacity:0;transform:translateY(0.5em)}53%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Subscriptions: a homeowner picks a mowing plan, it renews and bills on its own, and it joins the owner's list */
.sd-sb .photo{height:6.4em;margin:0.8em 1em 0.6em;border-radius:0.7em;overflow:hidden}
.sd-sb .plan{margin:0 1em 0.5em;padding:0.55em 0.8em;border-radius:0.8em;box-shadow:inset 0 0 0 0.12em var(--line);display:flex;justify-content:space-between;align-items:center;font-size:0.8em}
.sd-sb .plan small{display:block;color:var(--muted)}
.sd-sb .plan em{font-style:normal;font-size:0.8em;font-weight:600;color:var(--pop-ink,#3A2400);background:var(--pop-soft,#FDF0D3);border-radius:999px;padding:0.2em 0.6em}
.sd-sb .pick{animation-name:sd-sb-pick}
@keyframes sd-sb-pick{0%,15%{box-shadow:inset 0 0 0 0.12em var(--line);background:#fff}17%,92%{box-shadow:inset 0 0 0 0.16em var(--accent);background:var(--accent-soft)}100%{box-shadow:inset 0 0 0 0.12em var(--line);background:#fff}}
.sd-sb .sd-btn{position:absolute;left:1em;right:1em;bottom:1.8em;animation-name:sd-sb-btn}
@keyframes sd-sb-btn{0%,17%{opacity:.35}20%,27%{opacity:1;transform:none}29%{transform:scale(.94)}31%,92%{opacity:1;transform:none}100%{opacity:.35}}
.sd-sb .sd-done{animation-name:sd-sb-done}
@keyframes sd-sb-done{0%,31%{opacity:0}35%,92%{opacity:1}100%{opacity:0}}
.sd-sb .chips{display:flex;gap:0.4em;margin-top:0.8em}
.sd-sb .chips span{font-size:0.72em;font-weight:600;color:var(--accent);border-radius:999px;padding:0.3em 0.8em;box-shadow:inset 0 0 0 0.12em var(--lav)}
.sd-sb .sd-finger{animation-name:sd-sb-finger}
.sd-sb .big{font:700 1.9em/1 "Inter",sans-serif;margin:0.1em 0 0.1em}
.sd-sb .big small{font:600 0.4em "Inter",sans-serif;color:#2E8B57;margin-left:0.4em;vertical-align:middle}
.sd-sb .sub{font-size:0.75em;color:var(--muted);margin-bottom:0.6em}
.sd-sb .sd-line.new{color:var(--accent);animation-name:sd-sb-new}
@keyframes sd-sb-new{0%,50%{opacity:0;transform:translateX(-0.8em)}55%,92%{opacity:1;transform:none}100%{opacity:0}}

/* AI voice assistant: the assistant answers the call, says it is an assistant, books the visit, and texts the owner a summary */
.sd-vc .sd-scr{background:var(--night);color:#fff}
.sd-vc .vhead{padding:2.4em 1em 0;text-align:center}
.sd-vc .vhead i{display:block;width:3.4em;height:3.4em;border-radius:50%;overflow:hidden;margin:0 auto 0.5em;animation-name:sd-ring;animation-duration:1.5s}
.sd-vc .vhead b{display:block;font-size:0.95em}
.sd-vc .vhead small{font-size:0.72em;opacity:.7}
.sd-vc .vwave{display:flex;justify-content:center;align-items:center;gap:0.25em;height:2em;margin:0.4em 0}
.sd-vc .vwave span{width:0.28em;height:0.6em;border-radius:1em;background:var(--lav);animation-name:sd-vc-wave;animation-duration:0.9s}
.sd-vc .vwave span:nth-child(2){animation-delay:-0.2s}.sd-vc .vwave span:nth-child(3){animation-delay:-0.45s}.sd-vc .vwave span:nth-child(4){animation-delay:-0.1s}.sd-vc .vwave span:nth-child(5){animation-delay:-0.6s}
@keyframes sd-vc-wave{0%,100%{height:0.5em}50%{height:1.8em}}
.sd-vc .talk{position:absolute;left:0.8em;right:0.8em;top:12.6em;bottom:1.4em;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.sd-vc .b{max-width:86%;font-size:0.68em;flex:none;line-height:1.35;border-radius:1em;overflow:hidden;max-height:0;opacity:0;margin-top:0;padding:0 0.75em}
.sd-vc .b.a{background:rgba(255,255,255,.12);border-bottom-left-radius:0.25em}
.sd-vc .b.c{margin-left:auto;background:var(--accent);border-bottom-right-radius:0.25em}
.sd-vc .b small{display:block;font-size:0.85em;opacity:.65}
.sd-vc .b1{animation-name:sd-vc-b1}.sd-vc .b2{animation-name:sd-vc-b2}.sd-vc .b3{animation-name:sd-vc-b3}.sd-vc .b4{animation-name:sd-vc-b4}.sd-vc .b5{animation-name:sd-vc-b5}
@keyframes sd-vc-b1{0%,3%{max-height:0;opacity:0;margin-top:0;padding-block:0}7%,34%{max-height:8em;opacity:1;margin-top:0.5em;padding-block:0.5em}38%,100%{max-height:0;opacity:0;margin-top:0;padding-block:0}}
@keyframes sd-vc-b2{0%,15%{max-height:0;opacity:0;margin-top:0;padding-block:0}19%,42%{max-height:8em;opacity:1;margin-top:0.5em;padding-block:0.5em}46%,100%{max-height:0;opacity:0;margin-top:0;padding-block:0}}
@keyframes sd-vc-b3{0%,24%{max-height:0;opacity:0;margin-top:0;padding-block:0}28%,96%{max-height:8em;opacity:1;margin-top:0.5em;padding-block:0.5em}100%{max-height:0;opacity:0}}
@keyframes sd-vc-b4{0%,34%{max-height:0;opacity:0;margin-top:0;padding-block:0}38%,96%{max-height:8em;opacity:1;margin-top:0.5em;padding-block:0.5em}100%{max-height:0;opacity:0}}
@keyframes sd-vc-b5{0%,42%{max-height:0;opacity:0;margin-top:0;padding-block:0}46%,96%{max-height:8em;opacity:1;margin-top:0.5em;padding-block:0.5em}100%{max-height:0;opacity:0}}
.sd-vc .ln{display:flex;gap:0.6em;align-items:flex-start;padding:0.5em 0;border-top:0.08em solid #EEE8F4;font-size:0.8em}
.sd-vc .ln i{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-style:normal;font-size:0.85em}
.sd-vc .ln small{display:block;color:var(--muted)}
.sd-vc .ln.yes i{background:#DDEFE4;color:#2E8B57}
.sd-vc .l2{animation-name:sd-mc-l2}.sd-vc .l3{animation-name:sd-mc-l3}

@keyframes sd-or-finger{0%,6%{opacity:0;left:10em;top:30em}9%{opacity:1}12%{left:10.8em;top:7.5em;transform:none}13%{transform:scale(.8)}14%{transform:none;left:10.8em;top:7.5em}20%{left:10.8em;top:17.4em;transform:none}22%{transform:scale(.8)}23%{transform:none;left:10.8em;top:17.4em}30%{left:6.3em;top:25em;transform:none}32%{transform:scale(.8);left:6.3em;top:25em}34%{transform:none;opacity:1}37%,100%{opacity:0;left:6.3em;top:25em}}
@keyframes sd-qt-finger{0%,18%{opacity:0;left:10em;top:30em}21%{opacity:1}28%{left:6.3em;top:24.1em;transform:none}30%{transform:scale(.8);left:6.3em;top:24.1em}32%{transform:none;opacity:1}35%,100%{opacity:0;left:6.3em;top:24.1em}}
@keyframes sd-sb-finger{0%,6%{opacity:0;left:10em;top:30em}9%{opacity:1}14%{left:6.3em;top:17.2em;transform:none}15%{transform:scale(.8)}16%{transform:none;left:6.3em;top:17.2em}25%{left:6.3em;top:24.1em;transform:none}28%{transform:scale(.8);left:6.3em;top:24.1em}30%{transform:none;opacity:1}33%,100%{opacity:0;left:6.3em;top:24.1em}}

@media (prefers-reduced-motion:reduce){.sd[open],.sd[open]::backdrop{animation:none}}