/* HeyBooking marketing site. Quiet studio direction (docs/brand/BRAND.md). */
:root{
  /* Colours, fonts and easing come from /site/tokens.css, generated from src/styles/tokens.css
     (docs/brand/SHARED_DESIGN_SYSTEM.md). Only site-only values live here. */
  --T:7s;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bone);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 32px}}
.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--plum);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.preview-bar{background:var(--ink);color:#fff;font:500 12.5px/1.3 var(--body);text-align:center;padding:8px 16px}
h1,h2,h3,h4{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:20px;line-height:1.2}
p{margin:0 0 14px}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:56ch}
.fine{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 14.5px var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),background .2s var(--ease),border-color .2s}
.btn:hover{border-color:var(--faint)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--plum);border-color:var(--plum);color:#fff}
.btn.primary:hover{background:var(--plum-deep)}
.btn.lg{height:50px;padding:0 22px;font-size:15.5px}
:focus-visible{outline:3px solid var(--peach);outline-offset:2px}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(246,243,238,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:68px}
.brand{display:block;width:150px;flex:none}
.brand svg{display:block;width:100%;height:auto;overflow:visible}
.links{display:none;gap:28px;font-size:14.5px;justify-self:center}
.links a[aria-current]{color:var(--ink);font-weight:600}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--ink)}
.acts{justify-self:end;display:flex;align-items:center;gap:14px}
.lnk{font-size:14.5px;text-decoration:none;color:var(--muted)}
.acts .btn{height:38px;font-size:14px}
@media(min-width:960px){.links{display:flex}.menu-btn{display:none}}
@media(max-width:959px){.top-in{grid-template-columns:1fr auto}}
.menu-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:grid;place-content:center;gap:5px;cursor:pointer}
.menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink)}
.mnav{display:grid;padding:8px 16px 16px;border-top:1px solid var(--line);background:var(--bone)}
.mnav[hidden]{display:none}
.mnav a{padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:16px}
@media(max-width:420px){.lnk{display:none}.brand{width:130px}}
/* logo motion */
.brand .w{stroke-dasharray:1 1;animation:draw .5s var(--ease) both}
.brand circle{transform-box:fill-box;transform-origin:50% 50%;animation:pop .32s .36s cubic-bezier(.3,1.6,.5,1) both}
.brand.ready circle{animation:none}
.brand.ready:hover circle{animation:jump .55s cubic-bezier(.3,.7,.3,1)}
.brand.ready .w{animation:none}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes jump{0%{transform:none}18%{transform:translateY(8%) scale(1.12,.86)}48%{transform:translateY(-70%) scale(.94,1.08)}76%{transform:translateY(6%) scale(1.1,.9)}100%{transform:none}}

/* hero */
.hero{padding:56px 0 40px;overflow:hidden}
.hero-in{display:grid;gap:40px;align-items:center}
@media(min-width:1000px){.hero-in{grid-template-columns:1fr 1.05fr}}
.hero-copy h1{margin-bottom:20px}
.mark-word{position:relative;display:inline-block;white-space:nowrap}
.mark-word span{position:relative;z-index:1;display:inline-block;transition:opacity .25s,transform .25s var(--ease)}
.mark-word::before{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.08em;height:.42em;background:var(--peach);border-radius:.12em;z-index:0;transform-origin:left;transition:transform .35s var(--ease)}
.mark-word.out span{opacity:0;transform:translateY(.15em)}
.mark-word.out::before{transform:scaleX(.2)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 12px}
.hero-vis{position:relative;height:460px;border-radius:28px;background:var(--sage-soft);overflow:hidden}
.hv{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);visibility:hidden}
.hv.on{opacity:1;visibility:visible}

.calwin{position:absolute;left:24px;right:96px;top:28px;bottom:-14px;background:var(--paper);border-radius:14px;box-shadow:0 22px 44px -22px rgba(75,29,63,.35);overflow:hidden;display:flex;flex-direction:column}
.cw-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.cw-h b{font:600 15px var(--display);font-variation-settings:"SOFT" 60;color:var(--ink)}
.seg-s{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.seg-s i{font-style:normal;padding:2px 9px;border-radius:999px;font-size:10px}
.seg-s i.on{background:var(--plum);color:#fff}
.cw-days{display:grid;grid-template-columns:34px repeat(6,1fr);font:600 10px var(--body);color:var(--muted);padding:7px 6px 6px 0;border-bottom:1px solid var(--line);text-align:center}
.cw-grid{flex:1;display:grid;grid-template-columns:34px 1fr;position:relative;--row:26px}
.cw-hrs{position:relative}
.cw-hrs span{position:absolute;right:5px;top:calc(var(--h) * var(--row) - 6px);font-size:9px;color:var(--faint)}
.cw-cols{position:relative;display:grid;grid-template-columns:repeat(6,1fr);margin-right:6px;background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--row) - 1px),#f0ebe4 calc(var(--row) - 1px) var(--row))}
.cw-cols i{border-left:1px solid #f0ebe4}
/* Week calendar, box in a box (mirrors src/components/calendar/CalendarSlot.tsx; APP_REDESIGN_DECISIONS.md, Calendar) */
.cw-days .today{color:var(--ink);font-weight:700}
.cw-cols{background-color:var(--bone)}
.cb{position:absolute;left:calc(var(--d) * (100% / 6) + 2px);width:calc(100% / 6 - 4px);top:calc(var(--h) * var(--row) - 13px);height:calc(var(--l) * var(--row) + 13px)}
.cb .sl{display:flex;align-items:center;gap:3px;height:13px;font:600 8.5px/1 var(--body);color:var(--ink);white-space:nowrap}
.cb .sl b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cb .sl .k,.dayrow .k{flex:none;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.cb .sl .k.full,.dayrow .k.full{font-weight:700;color:var(--ink)}
.cb .bx{position:absolute;left:0;right:0;top:13px;bottom:0;background:var(--paper);border:1px solid var(--line);border-radius:5px}
.cb .ic{position:absolute;left:3px;right:3px;top:calc(var(--o) * var(--row) + 3px);height:calc(var(--n) * var(--row) - 6px);display:flex;align-items:center;gap:3px;padding:0 4px;border-radius:4px;background:color-mix(in srgb,var(--plum) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--plum) 14%,var(--paper));font-size:8.5px;overflow:hidden;white-space:nowrap}
.cb .ic .o{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cb .ic .hb-pp{font-size:8.5px;gap:4px}
.cb .hb-av{width:12px;height:12px;font-size:5px}
.cb .hb-pp .hb-more{margin-left:-2px}
.cb.past{opacity:.55}
.cb.closed .bx,.cb.blk .bx{background:repeating-linear-gradient(-45deg,transparent 0 4px,color-mix(in srgb,var(--muted) 20%,transparent) 4px 6px),color-mix(in srgb,var(--grey-soft) 70%,var(--paper))}
.cb.blk{top:calc(var(--h) * var(--row));height:calc(var(--l) * var(--row))}
.cb.blk .bx{top:0;padding:4px 5px;font-size:8.5px}
.hero-vis .s1{position:absolute;left:auto;right:-30px;top:auto;bottom:0;width:300px;height:420px;transform:scale(.82);transform-origin:bottom right}
.hero-vis .s1 .phone{top:20px}
@media(max-width:640px){.hero-vis{height:420px}.calwin{right:24px}.cw-days span:nth-child(n+5),.cw-cols i:nth-child(n+4),.cb[style*="--d:3"],.cb[style*="--d:4"],.cb[style*="--d:5"]{display:none}.cw-days{grid-template-columns:34px repeat(3,1fr)}.cw-cols{grid-template-columns:repeat(3,1fr)}.cb{width:calc(100% / 3 - 6px);left:calc(var(--d) * (100% / 3) + 3px)}.hero-vis .s1{display:none}.hero-vis{height:380px}}

/* sections */
.band{padding:72px 0;border-top:1px solid var(--line)}
.sh{max-width:720px;margin-bottom:32px}
.sh h2,.two h2,.int-in h2{margin-bottom:16px}
.sh p:not(.eyebrow){color:var(--muted)}
.two{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:56px}}
.two>*{min-width:0}
.grid{display:grid;gap:16px}
@media(min-width:860px){.g2{grid-template-columns:1fr 1fr}}
.grid>*{min-width:0}

.pms{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}
.pm{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:600 13.5px var(--body)}
.big-no{font:600 clamp(26px,3vw,34px)/1.1 var(--display);font-variation-settings:"SOFT" 60;margin:0}
.big-no span{font:400 15px/1.5 var(--body);color:var(--muted)}
.flat{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px}
.flat h3{font-size:24px;margin-bottom:8px}
.flat p{color:var(--muted);font-size:15px}
.chart{width:100%;height:auto;margin-top:6px;font-family:var(--body)}

.asks{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px}
.asks li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:15px}
.think{background:var(--lilac-soft);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:220px;justify-content:center}
.bubble-demo{display:flex;flex-direction:column;gap:10px}
.bubble-demo .bub{font-size:15px;padding:10px 14px;max-width:80%}
.bubble-demo .bub.them{width:72px;display:flex;align-items:center;justify-content:center;color:var(--plum);padding:12px}

.types{display:grid;gap:12px}
@media(min-width:640px){.types{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.types{grid-template-columns:repeat(3,1fr)}}
.type{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.type:hover{border-color:var(--plum);transform:translateY(-2px)}
.type b{font:600 18px var(--display);font-variation-settings:"SOFT" 60}
.type span{grid-column:1;color:var(--muted);font-size:14px}
.type i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--plum);font-size:18px}
.type[href="#"]{opacity:.75}

.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--peach-soft);color:var(--plum);display:grid;place-items:center;font:600 15px var(--display);margin-bottom:6px}
.steps b{font:600 19px var(--display);font-variation-settings:"SOFT" 60}
.steps span{color:var(--muted);font-size:15px}

.quote{padding:24px 0 72px}
.q-ph{margin:0;border:2px dashed var(--faint);border-radius:22px;padding:28px}
.q-ph blockquote{margin:0 0 10px;font:500 clamp(20px,2.4vw,26px)/1.3 var(--display);font-variation-settings:"SOFT" 60;color:var(--muted)}
.q-ph figcaption{font-size:13px;color:var(--faint)}

.plans{display:grid;gap:14px}
@media(min-width:720px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.plans{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:6px}
.plan.hl{border:2px solid var(--plum)}
.plan.soon{background:transparent;border-style:dashed}
.plan h3{font-size:22px}
.plan .pb{color:var(--muted);font-size:14px;margin:0}
.price{margin:10px 0 6px;display:flex;align-items:baseline;gap:4px}
.price b{font:600 38px/1 var(--display);font-variation-settings:"SOFT" 60;letter-spacing:-.02em}
.price span{color:var(--muted);font-size:14px}
.plan ul{list-style:none;padding:0;margin:6px 0 18px;display:grid;gap:7px;font-size:14.5px;flex:1;align-content:start}
.plan li{display:flex;gap:9px}
.plan li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--plum);margin-top:9px}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:600 18px var(--display);font-variation-settings:"SOFT" 60;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--plum);font-family:var(--body);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--muted);margin:10px 0 0}

.interest{background:var(--plum);color:var(--bone);padding:72px 0}
.interest .eyebrow{color:var(--peach)}
.interest p{color:rgba(246,243,238,.8)}
.int-in{display:grid;gap:32px}
@media(min-width:900px){.int-in{grid-template-columns:1fr 1fr;gap:56px}}
.int-form{display:grid;gap:12px;background:rgba(255,255,255,.06);border-radius:22px;padding:22px}
.int-form label{display:grid;gap:6px;font-size:13.5px;font-weight:600}
.int-form input,.int-form textarea{font:15px var(--body);border-radius:10px;border:1px solid rgba(255,255,255,.2);background:var(--paper);color:var(--ink);padding:11px 12px;width:100%}
.int-form .btn.primary{background:var(--peach);border-color:var(--peach);color:var(--plum);justify-self:start}
.int-form .fine{color:rgba(246,243,238,.65);margin:0}

.foot{padding:56px 0 28px;font-size:14px}
.foot-in{display:grid;gap:28px}
@media(min-width:860px){.foot-in{grid-template-columns:1.5fr repeat(4,1fr)}}
.foot-brand svg{width:150px;height:auto}
.foot-brand p{color:var(--muted);max-width:36ch;margin-top:12px}
.foot h4{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.foot a{display:block;text-decoration:none;color:var(--ink);padding:3px 0}
.foot a[aria-current]{font-weight:600}
.foot-small{margin-top:28px;color:var(--faint);font-size:13px}

.region-hint{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:0 auto;background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:14px;z-index:60;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.region-hint[hidden]{display:none}
.region-hint a{color:var(--peach);font-weight:600;white-space:nowrap}
.region-hint span{flex:1}
.region-hint button{background:none;border:0;color:#fff;font-size:14px;cursor:pointer;padding:4px}

/* niche pages */
.crumbs{font-size:13px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.niche .two{align-items:center}
.niche-card .fc{max-width:560px;margin-left:auto}
.feats{display:grid;gap:14px}
@media(min-width:760px){.feats{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px}
.feat h3{margin-bottom:6px}
.feat p{color:var(--muted);font-size:15px;margin:0 0 10px}
.feat .ex{font-size:13.5px;color:var(--plum);background:var(--peach-soft);border-radius:10px;padding:8px 10px;margin:0}

/* chat bubbles + loader shared with the card kit */
.bub{border-radius:18px;line-height:1.35}
.bub.me{align-self:flex-end;background:var(--plum);color:#fff;border-bottom-right-radius:6px}
.bub.them{align-self:flex-start;background:var(--paper);border-bottom-left-radius:6px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hv{transition:none}
  .brand .w,.brand circle{animation:none}
  .mark-word span,.mark-word::before{transition:none}
}

/* ===== v2 pages ===== */
.fc .copy{padding:22px 24px 26px}
.fc .copy h3{margin-bottom:8px}
.more{display:inline-flex;gap:6px;margin-top:12px;font:600 14px var(--body);color:var(--plum);text-decoration:none}
.more:hover{text-decoration:underline}
.center{text-align:center;margin-top:28px}
.hero.sub{padding:28px 0 40px}
.hero.sub h1{font-size:clamp(36px,5.2vw,60px);max-width:16ch;margin-bottom:16px}
.band.nob{border-top:0;padding-top:8px}
.where{font-size:14px;color:var(--muted);margin-top:4px}
.gh{font-size:22px;margin:0 0 14px}
.fgroup{margin-bottom:36px}
.ftiles{display:grid;gap:12px}
@media(min-width:640px){.ftiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ftiles{grid-template-columns:repeat(3,1fr)}}
.ftile{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.ftile:hover{border-color:var(--plum);transform:translateY(-2px)}
.ftile b{font:600 18px var(--display);font-variation-settings:"SOFT" 60}
.ftile span{grid-column:1;color:var(--muted);font-size:14px}
.ftile i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--plum)}
.example{margin-top:18px;background:var(--peach-soft);border-radius:16px;padding:16px 18px;font-size:15px;color:var(--plum);display:flex;gap:12px;align-items:baseline}
.example span{font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase;flex:none}
.steps.four{grid-template-columns:1fr}
@media(min-width:860px){.steps.four{grid-template-columns:repeat(4,1fr)}}
.promise{background:var(--paper)}
.promise-in{display:grid;gap:22px;align-items:center}
@media(min-width:960px){.promise-in{grid-template-columns:1fr 1fr 1fr auto}}
.promise-in b{display:block;font:600 20px var(--display);font-variation-settings:"SOFT" 60;margin-bottom:4px}
.promise-in span{color:var(--muted);font-size:15px}
.endcta{background:var(--plum);color:var(--bone);border-top:0}
.endcta-in{text-align:center;display:grid;justify-items:center}
.endcta .lede{color:rgba(246,243,238,.8);margin:12px auto 0}
.endcta .btn{background:transparent;color:var(--bone);border-color:rgba(246,243,238,.4)}
.endcta .btn.primary{background:var(--peach);border-color:var(--peach);color:var(--plum)}
/* set up by chat */
.chatband{background:var(--lilac-soft);border-top:0}
/* old chat demo (kept for reference) */
.chatdemo{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:24px;padding:22px;box-shadow:0 22px 44px -26px rgba(75,29,63,.35)}
.chatdemo .bub{padding:10px 14px;max-width:86%;font-size:14.5px}
.chatdemo .bub.them{background:var(--bone)}
.chatdemo .bub.loader{width:68px;display:flex;justify-content:center;color:var(--plum)}
.draft{border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:13.5px;align-self:flex-start;width:88%}
.d-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.d-h b{font:600 15px var(--display);font-variation-settings:"SOFT" 60;flex:1}
.d-logo{width:22px;height:22px;border-radius:50%;background:var(--peach)}
.d-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.d-row span:nth-child(2){color:var(--muted)}
/* static UI fragments */
.frag .fx-scene{display:flex;align-items:center;justify-content:center;padding:28px 22px;height:380px}
.fx{background:var(--paper);border-radius:16px;box-shadow:0 22px 44px -22px rgba(75,29,63,.35);padding:16px 18px;width:100%;max-width:380px;font-size:12.5px;display:grid;gap:8px}
.fx-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx-h b{font:600 16px var(--display);font-variation-settings:"SOFT" 60}
.fx-sub{color:var(--muted);font-size:11.5px;margin-top:-4px}
.fx-foot{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.fx .btn-p,.fx .btn-s{height:30px;padding:0 12px;font-size:11px}
.credits{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.credits b{font:600 34px/1 var(--display)}
.credits span{color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--bone);overflow:hidden}
.bar i{display:block;height:100%;background:var(--plum);border-radius:3px}
.hist{list-style:none;padding:0;margin:4px 0 0;display:grid}
.hist li{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.hist em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.inv table{width:100%;border-collapse:collapse;font-size:12px}
.inv td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.inv td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.inv td span{color:var(--muted);font-size:11px}
.inv tr.t td{font-weight:600}
.drow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.drow code{font:600 11px ui-monospace,Menlo,monospace;background:var(--bone);padding:3px 6px;border-radius:6px}
.drow span{color:var(--muted)}
.drow em{font-style:normal;font-variant-numeric:tabular-nums}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.rrow span:first-child{flex:1}
.callout{background:var(--bone);border-radius:10px;padding:8px 10px;color:var(--muted)}
.tick2{color:var(--muted);letter-spacing:6px}
.fx .sec{font:600 9.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.note{background:var(--amber-soft);border-radius:10px;padding:8px 10px}
.perm{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;background:var(--bone);border-radius:12px;padding:10px 12px}
.perm b{grid-column:1/-1;font-weight:600}
.perm .off{color:var(--faint)}
.mail .mh{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mail .mh span{color:var(--muted)}
.mail .when{background:var(--bone);border-radius:10px;padding:10px 12px;display:grid}
.mail .sm{color:var(--muted);font-size:11.5px;margin:0}
.mail p{margin:0}
/* chart */
.chartfig{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin-bottom:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.k-hb,.m-hb{background:#7d3f6f;fill:#7d3f6f}
.k-per,.m-per{background:#d9886a;fill:#d9886a}
.chartwrap{position:relative}
.chartwrap svg{width:100%;height:auto;display:block;font-family:var(--body)}
.chartwrap .gl{stroke:#efe9e1;stroke-width:1}
.chartwrap .base{stroke:#d9d1c6;stroke-width:1}
.chartwrap .ax{font-size:11px;fill:var(--muted)}
.chartwrap .dl{font-size:12px;font-weight:600;fill:var(--ink)}
.chartwrap .hit{fill:transparent;cursor:default}
.chartwrap .hit:hover{fill:rgba(75,29,63,.05)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-110%)}
.chartfig figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.tbl{margin-top:10px;font-size:13px}
.tbl summary{cursor:pointer;color:var(--plum);font-weight:600}
.tbl table{width:100%;border-collapse:collapse;margin-top:8px}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.plan.soon .btn{white-space:normal;text-align:center;height:auto;min-height:42px;padding:8px 14px}

@media(min-width:960px){.menu-btn{display:none}}

/* ===== set-up crew (playful, original characters) ===== */
.crew{--T2:8s;position:relative;height:460px;border-radius:28px;background:var(--paper);box-shadow:0 22px 44px -26px rgba(75,29,63,.35);overflow:hidden}
.crew-logo{position:absolute;left:50%;top:22px;width:150px;margin-left:-75px}
.crew-logo svg{width:100%;height:auto;display:block;overflow:visible}
.crew-logo .w{stroke-dasharray:1 1;animation:cr-logo var(--T2) var(--ease) infinite}
.crew-logo circle{transform-box:fill-box;transform-origin:50% 50%;animation:cr-dot var(--T2) var(--ease) infinite}
@keyframes cr-logo{0%,4%{stroke-dashoffset:1}12%,100%{stroke-dashoffset:0}}
@keyframes cr-dot{0%,9%{transform:scale(0)}13%{transform:scale(1.2)}16%,80%{transform:scale(1)}84%{transform:translateY(-60%)}88%,100%{transform:none}}
.crew-page{position:absolute;left:50%;top:78px;width:min(300px,72%);transform:translateX(-50%);background:var(--bone);border:1.5px solid var(--line);border-radius:16px;padding:0 0 14px;min-height:250px}
.cp-bar{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:9.5px;color:var(--muted)}
.cp-bar span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.cp-bar em{font-style:normal;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-head{display:flex;align-items:center;gap:8px;margin:10px 10px 8px;padding:12px;border-radius:12px;background:var(--peach-soft);transform-origin:left;animation:cr-paint var(--T2) var(--ease) infinite}
.cp-head i{width:22px;height:22px;border-radius:50%;background:var(--peach);flex:none}
.cp-head b{font:600 15px var(--display);font-variation-settings:"SOFT" 60;color:var(--plum)}
@keyframes cr-paint{0%,12%{transform:scaleX(0);opacity:0}14%{opacity:1}26%,92%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.cp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 10px 6px;padding:9px 11px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:11.5px}
.cp-row b{display:block;font-weight:600}
.cp-row em{font-style:normal;color:var(--muted);font-size:10.5px}
.cp-row strong{font-weight:600;font-variant-numeric:tabular-nums}
.cp-row.r1{animation:cr-r1 var(--T2) var(--ease) infinite}
.cp-row.r2{animation:cr-r2 var(--T2) var(--ease) infinite}
@keyframes cr-r1{0%,28%{transform:translateX(-120%);opacity:0}36%,92%{transform:none;opacity:1}97%,100%{opacity:0}}
@keyframes cr-r2{0%,40%{transform:translateX(140%);opacity:0}52%,92%{transform:none;opacity:1}97%,100%{opacity:0}}
.cp-btn{margin:8px 10px 0;height:34px;border-radius:10px;background:var(--plum);color:#fff;font:600 12px var(--body);display:grid;place-items:center;animation:cr-btn var(--T2) var(--ease) infinite}
@keyframes cr-btn{0%,56%{transform:translateY(-170px);opacity:0}58%{opacity:1}66%{transform:translateY(6px)}70%,92%{transform:none;opacity:1}97%,100%{opacity:0}}
.cp-live{position:absolute;right:-8px;top:-10px;background:var(--sage-soft);color:var(--sage-deep);font:600 11px var(--body);padding:5px 10px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(0,0,0,.2);animation:cr-live var(--T2) cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes cr-live{0%,72%{transform:scale(0)}77%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
/* ===== crew: characters (scripts/site/crew.py). Shared by the site, the wizard and the crew sheet ===== */
.crw{display:block;width:100%;height:auto;overflow:visible}
.crw .crw-breathe{transform-origin:32px 66px;animation:crw-breathe 3.6s ease-in-out infinite}
.crw .crw-eyes{transform-origin:32px 41px;animation:crw-blink 5.2s linear infinite}
.crw-tock .crw-breathe,.crw-tock .crw-eyes{animation-delay:-1.1s}.crw-tally .crw-breathe,.crw-tally .crw-eyes{animation-delay:-2.3s}
.crw-penny .crw-breathe,.crw-penny .crw-eyes{animation-delay:-3.2s}.crw-posy .crw-breathe,.crw-posy .crw-eyes{animation-delay:-.6s}.crw-mo .crw-breathe,.crw-mo .crw-eyes{animation-delay:-4.1s}
@keyframes crw-breathe{0%,100%{transform:none}50%{transform:scale(.985,1.025)}}
@keyframes crw-blink{0%,93%,100%{transform:none}95%{transform:scaleY(.1)}}
.crw .crw-hop,.crw .crw-shadow{transform-origin:32px 67px}
.crw .crw-fl,.crw .crw-fr{transform-origin:32px 67px}
/* done: a hop with happy eyes */
.crw.is-done .crw-happy{opacity:1}.crw.is-done .crw-eyes{opacity:0}
.crw.is-done .crw-hop{animation:crw-hop 3.2s var(--ease) infinite}
.crw.is-done .crw-shadow{animation:crw-shadow 3.2s var(--ease) infinite}
@keyframes crw-hop{0%,46%,100%{transform:none}8%{transform:scale(1.06,.92)}20%{transform:translateY(-10px) scale(.96,1.05)}32%{transform:none}37%{transform:scale(1.04,.95)}}
@keyframes crw-shadow{0%,32%,100%{transform:none}20%{transform:scale(.7)}}
/* working loops */
.crw-pip.is-work .crw-tool{transform-origin:50px 43px;animation:crw-roll 1.1s ease-in-out infinite alternate}
@keyframes crw-roll{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.crw-tock.is-work .crw-hop{animation:crw-trot .5s ease-in-out infinite alternate}
.crw-tock.is-work .crw-fl{animation:crw-step .5s ease-in-out infinite alternate}
.crw-tock.is-work .crw-fr{animation:crw-step .5s ease-in-out infinite alternate-reverse}
.crw-tock.is-work .crw-tool{transform-origin:32px 60px;animation:crw-tilt 1s ease-in-out infinite alternate}
@keyframes crw-trot{to{transform:translateY(-2px)}}
@keyframes crw-step{from{transform:translateY(.5px)}to{transform:translateY(-3px)}}
@keyframes crw-tilt{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.crw-tally.is-work .crw-top{animation:crw-card 2.6s var(--ease) infinite}
.crw-tally.is-work .crw-tool{animation:crw-tap 2.6s var(--ease) infinite}
@keyframes crw-card{0%{transform:translate(9px,-12px) rotate(14deg);opacity:0}12%{opacity:1}34%,82%{transform:none;opacity:1}96%,100%{transform:translate(9px,-12px) rotate(14deg);opacity:0}}
@keyframes crw-tap{0%,38%,52%,100%{transform:none}44%{transform:translateY(1.6px)}}
.crw-penny.is-work .crw-tool{transform-origin:50px 44px;animation:crw-show 2.8s var(--ease) infinite}
@keyframes crw-show{0%,100%{transform:none}25%,75%{transform:translateY(-3px) rotate(-7deg)}45%{transform:translateY(-3px) rotate(-3deg)}55%{transform:translateY(-3px) rotate(-9deg)}}
.crw-posy.is-work .crw-tool{transform-origin:50px 44px;animation:crw-flick 2.8s var(--ease) infinite}
.crw-posy.is-work .crw-env{transform-origin:58px 38px;animation:crw-send 2.8s var(--ease) infinite}
@keyframes crw-flick{0%,18%,40%,100%{transform:none}28%{transform:rotate(-24deg)}}
@keyframes crw-send{0%,20%{transform:none;opacity:1}46%{transform:translate(12px,-26px) rotate(-16deg) scale(.6);opacity:0}47%,70%{transform:translateY(8px) scale(.6);opacity:0}86%,100%{transform:none;opacity:1}}
.crw-mo.is-work .crw-hop{animation:crw-lean 3.2s ease-in-out infinite}
.crw-mo.is-work .crw-tool{transform-origin:50px 52px;animation:crw-mat 3.2s ease-in-out infinite}
@keyframes crw-lean{0%,100%{transform:none}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes crw-mat{0%,100%{transform:none}25%{transform:translateY(-1.5px)}75%{transform:translateY(1px)}}
.paused .crw *,.crw.paused *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.crw *{animation:none!important}}
/* ===== crew: end characters ===== */

/* ===== crew: scene (the page gets built while the owner chats) ===== */
.crew{--cw:62px;--pl:calc(50% - min(150px,36%));--pr:calc(50% + min(150px,36%))}
.cw{position:absolute;width:var(--cw);z-index:2}
.cw.flip .crw{transform:scaleX(-1)}
.cw-pip{left:calc(var(--pl) - var(--cw) + 7px);top:118px}
.crew-plank{position:absolute;left:calc(var(--pl) - var(--cw) - 2px);top:calc(118px + var(--cw) * .955);width:calc(var(--cw) + 4px);height:6px;border-radius:3px;background:#e2d6c6;z-index:2}
.cw-tock{left:calc(var(--pl) - var(--cw) + 4px);top:204px;animation:cs-tock var(--T2) var(--ease) infinite}
.cw-penny{left:calc(var(--pl) - var(--cw) + 2px);top:286px;animation:cs-pop var(--T2) var(--ease) infinite}
.cw-tally{left:calc(var(--pr) - 6px);top:228px;animation:cs-tally var(--T2) var(--ease) infinite}
.cw-posy{left:calc(var(--pr) - 4px);top:300px;animation:cs-posy var(--T2) var(--ease) infinite}
.cw-pip .crw-tool{transform-origin:50px 43px;animation:cs-roll var(--T2) ease-in-out infinite}
@keyframes cs-roll{0%,12%,28%,100%{transform:none}14%,19%,24%{transform:rotate(-14deg)}16.5%,21.5%,26%{transform:rotate(14deg)}}
@keyframes cs-tock{0%,13%{transform:translateX(-240px)}27%,92%{transform:none;opacity:1}97%{opacity:0}100%{transform:none;opacity:0}}
.cw-tock .crw-hop{animation:cs-trot var(--T2) var(--ease) infinite}
@keyframes cs-trot{0%,13%,27%,100%{transform:none}78%,90%{transform:none}80%{transform:scale(1.06,.92)}83%{transform:translateY(-10px) scale(.96,1.05)}86%{transform:none}88%{transform:scale(1.04,.95)}15%,19%,23%{transform:translateY(-2.5px)}17%,21%,25%{transform:none}}
@keyframes cs-tally{0%,27%{transform:translateX(240px)}39%,92%{transform:none;opacity:1}97%{opacity:0}100%{transform:none;opacity:0}}
.cw-tally .crw-hop{animation:cs-trot2 var(--T2) var(--ease) infinite}
@keyframes cs-trot2{0%,27%,39%,100%{transform:none}78%,90%{transform:none}80%{transform:scale(1.06,.92)}83%{transform:translateY(-10px) scale(.96,1.05)}86%{transform:none}88%{transform:scale(1.04,.95)}29%,33%,37%{transform:translateY(-2.5px)}31%,35%{transform:none}}
@keyframes cs-pop{0%,55%{transform:translateY(24px) scale(.2);opacity:0}60%{transform:translateY(-4px) scale(1.06);opacity:1}64%,92%{transform:none;opacity:1}97%,100%{transform:none;opacity:0}}
.cw-penny .crw-tool{transform-origin:50px 44px;animation:cs-show var(--T2) var(--ease) infinite}
@keyframes cs-show{0%,62%,74%,100%{transform:none}66%,70%{transform:translateY(-3px) rotate(-8deg)}}
@keyframes cs-posy{0%,64%{transform:translateY(24px) scale(.2);opacity:0}68%{transform:translateY(-4px) scale(1.06);opacity:1}71%,92%{transform:none;opacity:1}97%,100%{transform:none;opacity:0}}
.cw-posy .crw-tool{transform-origin:50px 44px;animation:cs-flick var(--T2) var(--ease) infinite}
.cw-posy .crw-env{transform-origin:58px 38px;animation:cs-send var(--T2) var(--ease) infinite}
@keyframes cs-flick{0%,71%,76%,100%{transform:none}73%{transform:rotate(-26deg)}}
@keyframes cs-send{0%,71%{transform:none;opacity:1}77%{transform:translate(40px,-150px) rotate(-20deg) scale(.5);opacity:0}78%,99%{transform:scale(.5);opacity:0}100%{transform:none;opacity:1}}
.crew .cw:not(.cw-tock):not(.cw-tally) .crw-hop{animation:cs-done var(--T2) var(--ease) infinite}
@keyframes cs-done{0%,78%,90%,100%{transform:none}80%{transform:scale(1.06,.92)}83%{transform:translateY(-10px) scale(.96,1.05)}86%{transform:none}88%{transform:scale(1.04,.95)}}
.crew .crw-eyes circle{animation:cs-eyes var(--T2) linear infinite}
.crew .crw-happy{animation:cs-happy var(--T2) linear infinite}
@keyframes cs-eyes{0%,78%,95%,100%{opacity:1}79%,94%{opacity:0}}
@keyframes cs-happy{0%,78%,95%,100%{opacity:0}79%,94%{opacity:1}}
.crew-say{position:absolute;left:18px;bottom:18px;right:18px;display:flex;animation:cr-say var(--T2) var(--ease) infinite}
.crew-say .bub{padding:9px 13px;font-size:13px;max-width:82%}
@keyframes cr-say{0%,2%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.paused .crew *, .crew.paused *{animation-play-state:paused}
@media(max-width:640px){.crew{height:440px;--cw:46px}.cw-pip{top:124px}.crew-plank{top:calc(124px + var(--cw) * .955)}.cw-tock{top:212px}.cw-penny{top:292px}.cw-tally{top:236px}.cw-posy{top:306px}}
@media (prefers-reduced-motion:reduce){.crew *{animation:none!important}}
/* ===== crew: end scene ===== */

.feat.has-mini{padding:0 0 22px;overflow:hidden}
.feat.has-mini .mn{margin:0 0 16px;border-bottom:1px solid var(--line)}
.feat.has-mini h3,.feat.has-mini p{padding:0 22px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== card kit (docs/brand/card-kit) ===== */
/* ===== card shell ===== */
.fc{border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.fc .scene{position:relative;height:380px;overflow:hidden}
.fc .copy{padding:6px 24px 24px}
.fc h3{font-size:22px;line-height:1.2;margin-bottom:6px}
.fc .copy p{font-size:14.5px;color:rgba(26,20,24,.72);margin:0}
.c-peach{background:var(--peach-soft)}.c-sage{background:var(--sage-soft)}.c-amber{background:var(--amber-soft)}.c-lilac{background:var(--lilac-soft)}
.paused *{animation-play-state:paused!important}

/* ===== iPhone, true proportions (393 x 852 pt), cropped by the card's bottom edge ===== */
.phone{position:absolute;left:50%;top:30px;width:262px;height:568px;margin-left:-131px;border-radius:46px;background:#111;padding:9px;box-shadow:0 0 0 1.5px #3a3a3c,0 24px 50px -22px rgba(75,29,63,.45)}
.phone .screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--paper)}
.island{position:absolute;left:50%;top:9px;width:72px;height:22px;margin-left:-36px;background:#000;border-radius:14px;z-index:5}
.sb{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0 24px;height:42px;font:600 12px var(--body)}
.sb .icons{display:flex;gap:4px;align-items:center}
.sb .icons i{display:block;background:var(--ink);border-radius:1.5px}
.urlbar{margin:2px 12px 6px;height:30px;border-radius:10px;background:#efebe6;display:flex;align-items:center;justify-content:center;gap:5px;font:500 11px var(--body);color:var(--ink);z-index:3}
.urlbar svg{width:9px;height:11px}
.ah{padding:6px 16px 2px;font:600 20px var(--display);font-variation-settings:"SOFT" 60}
.asub{padding:0 16px 10px;font-size:11px;color:var(--muted)}
.dayrow{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 10px 6px;border-radius:14px;background:var(--bone);font-size:11.5px;line-height:1.25}
.dayrow .t{font-weight:600;font-variant-numeric:tabular-nums;width:54px;flex:none;font-size:11px}
.dayrow .n{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dayrow .n b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap{font:500 11px var(--body);font-variant-numeric:tabular-nums;color:var(--muted);position:relative;width:30px;height:15px;flex:none}
.cap span{position:absolute;inset:0;text-align:right}
.cap .k{position:static}
.cap .k.full{font-weight:700;color:var(--ink)}
/* an appointment window in the day list: name and "N booked", then one line per booked start */
.dayrow.win{display:block}
.dayrow.win .wh{display:flex;justify-content:space-between;gap:6px}
.dayrow.win .wh .k{font-size:11px}
.dayrow .wl{display:flex;gap:8px;align-items:flex-start;padding-top:6px;margin-top:4px;border-top:1px solid var(--line);font-size:10.5px}
.dayrow .wl .t{width:56px;white-space:nowrap;font-size:10.5px;font-weight:500;color:var(--muted)}
.dayrow .wl .n b{font-weight:500}

/* people: circles with initials, then first names; circles and "+N" when names don't fit
   (mirrors PeopleRow in src/components/calendar/CalendarSlot.tsx and avatarTone in calendar-people.ts) */
.hb-pp{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;font:500 10px/1 var(--body);color:var(--ink)}
.hb-pp .p{display:inline-flex;align-items:center;gap:3px}
.hb-pp .st{display:inline-flex;align-items:center}
.hb-pp .st .hb-av+.hb-av{margin-left:-4px;box-shadow:0 0 0 1.5px var(--paper)}
.hb-pp .hb-more{margin-left:-3px;font-weight:600;color:var(--ink)}
.hb-av{width:14px;height:14px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font:600 6px/1 var(--body);color:var(--ink);background:var(--grey-soft)}
.hb-av.t1{background:var(--sage-soft)}.hb-av.t2{background:var(--info-soft)}.hb-av.t3{background:var(--amber-soft)}.hb-av.t4{background:color-mix(in srgb,var(--plum) 20%,var(--paper))}

/* iOS notification */
.notif{position:absolute;left:8px;right:8px;top:48px;background:rgba(245,242,240,.97);border-radius:20px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);font-size:11px;line-height:1.3;transform:translateY(-140%);z-index:4}
.notif .ic{width:30px;height:30px;border-radius:8px;flex:none;background:linear-gradient(#5aa9f7,#2f7de1);display:grid;place-items:center}
.notif .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:1px}
.notif b{font-weight:600;display:block}
.notif .n-body{flex:1;min-width:0}

/* badges as in booking-badges.tsx: one size */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 10.5px/1 var(--body);white-space:nowrap}
.b-paid{background:var(--sage-soft);color:var(--sage-deep)}
.b-rep{background:var(--info-soft);color:var(--info)}
.b-unpaid{background:var(--amber-soft);color:var(--amber)}
.b-kind{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}

/* desktop window: Bookings list + side panel */
.win{position:absolute;left:18px;right:18px;top:26px;bottom:-14px;background:var(--paper);border-radius:14px;box-shadow:0 22px 44px -22px rgba(75,29,63,.35);overflow:hidden;display:grid;grid-template-columns:1fr 1.12fr}
.list{border-right:1px solid var(--line);min-width:0}
.list .hd{padding:12px 14px 8px;font:600 15px var(--display);font-variation-settings:"SOFT" 60}
.list .chips{display:flex;gap:5px;padding:0 14px 10px}
.chip{font:500 10px var(--body);border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted);white-space:nowrap}
.chip.on{border-color:var(--plum);color:var(--plum)}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 14px;border-top:1px solid var(--line);font-size:11px;line-height:1.3}
.lrow>span:first-child{min-width:0}
.lrow b{font-weight:600}
.lrow .muted{color:var(--muted);font-size:10px}
.lrow.sel{background:var(--peach-soft)}
.panel{display:flex;flex-direction:column;min-width:0;position:relative}
.panel .ph{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.panel .ph .name{display:flex;align-items:center;gap:8px;font:600 16px var(--display);font-variation-settings:"SOFT" 60}
.vp{font:600 9.5px var(--body);border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted);white-space:nowrap}
.panel .sub{font-size:10.5px;color:var(--muted);margin:3px 0 7px}
.badges{display:flex;gap:5px;position:relative;height:20px}
.panel .bd{padding:12px 16px;flex:1}
.sec{font:600 9.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px;margin:0}
.dl dt{color:var(--muted)}
.dl dd{margin:0}
.proofs{display:flex;gap:6px;margin-top:8px}
.shot{width:40px;height:56px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(#fff 0 18%,#e7f2ea 18% 46%,#fff 46%);position:relative;overflow:hidden}
.shot::after{content:"";position:absolute;left:7px;right:7px;top:30px;height:4px;border-radius:2px;background:#9cc5a6;box-shadow:0 8px 0 #d9d5cf,0 14px 0 #d9d5cf}
.pf{display:flex;gap:6px;align-items:center;padding:10px 12px 26px;border-top:1px solid var(--line);position:relative}
.btn-p,.btn-s,.btn-m{height:30px;border-radius:8px;font:600 10px var(--body);display:inline-flex;align-items:center;justify-content:center;padding:0 9px;white-space:nowrap}
.btn-p{background:var(--plum);color:#fff}
.btn-s{border:1px solid var(--line);color:var(--ink)}
.btn-m{border:1px solid var(--line);width:30px;padding:0;color:var(--muted)}
.toast{position:absolute;left:50%;bottom:80px;transform:translate(-50%,24px);background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font:600 10.5px var(--body);opacity:0;white-space:nowrap;z-index:3}

/* gestures */
.finger{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(26,20,24,.2);border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(26,20,24,.2);pointer-events:none;opacity:0;z-index:6}
.cursor{position:absolute;width:17px;height:21px;pointer-events:none;z-index:6}
.ripple{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--plum);opacity:0;pointer-events:none;z-index:5}

/* ===== Scene 1 ===== */
.s1 .notif{animation:s1n var(--T) var(--ease) infinite}
@keyframes s1n{0%,8%{transform:translateY(-140%)}14%,46%{transform:translateY(0)}52%,100%{transform:translateY(-140%)}}
.s1 .r2{animation:s1hl var(--T) var(--ease) infinite}
@keyframes s1hl{0%,50%{background:var(--bone)}56%,84%{background:var(--peach-soft)}92%,100%{background:var(--bone)}}
.s1 .c4{animation:s1a var(--T) var(--ease) infinite}
.s1 .c5{animation:s1b var(--T) var(--ease) infinite}
@keyframes s1a{0%,52%{transform:translateY(0);opacity:1}58%,100%{transform:translateY(-100%);opacity:0}}
@keyframes s1b{0%,52%{transform:translateY(100%);opacity:0}58%,96%{transform:translateY(0);opacity:1}100%{opacity:0}}

/* ===== Scene 2 ===== */
.s2 .cursor{animation:s2c var(--T) var(--ease) infinite}
@keyframes s2c{0%,16%{left:30%;top:88%}38%,56%{left:var(--bx);top:var(--by)}74%,100%{left:30%;top:88%}}
.s2 .ripple{left:var(--bx);top:var(--by);animation:s2r var(--T) ease-out infinite}
@keyframes s2r{0%,41%{opacity:0;transform:scale(.4)}43%{opacity:.9}55%,100%{opacity:0;transform:scale(1.7)}}
.s2 .rep,.s2 .rep2,.s2 .footer-a{animation:s2b var(--T) var(--ease) infinite}
.s2 .paid,.s2 .paid2,.s2 .footer-b{animation:s2a var(--T) var(--ease) infinite}
.s2 .paid{position:absolute;left:var(--px,58px);top:0}
.s2 .paid2{position:absolute;right:0;top:0}
.s2 .footer-a{display:flex;gap:6px;flex:1;min-width:0}
.s2 .footer-b{position:absolute;left:12px;right:12px;top:10px;display:flex;gap:6px}
.s2 .footer-a .btn-p,.s2 .footer-a .btn-s,.s2 .footer-b .btn-s{flex:1 1 0;min-width:0}
@keyframes s2b{0%,44%{opacity:1}47%,96%{opacity:0}100%{opacity:1}}
@keyframes s2a{0%,44%{opacity:0;transform:scale(.8)}48%{opacity:1;transform:scale(1.08)}52%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
.s2 .toast{animation:s2t var(--T) var(--ease) infinite}
@keyframes s2t{0%,48%{opacity:0;transform:translate(-50%,24px)}54%,80%{opacity:1;transform:translate(-50%,0)}88%,100%{opacity:0;transform:translate(-50%,24px)}}
.swap{position:relative;display:inline-block;min-width:100px;height:20px;text-align:right}
.swap .rep2{position:absolute;right:0;top:0}

/* ===== Scene 3 ===== */
.store{display:flex;align-items:center;gap:8px;padding:2px 16px 8px;font:600 12px var(--body);border-bottom:1px solid var(--line)}
.store i{width:22px;height:22px;border-radius:50%;background:var(--amber-soft);display:block}
.pick{padding:10px 14px 0}
.pick h4{margin:0 0 2px;font:600 15px var(--display);font-variation-settings:"SOFT" 60}
.pick .was{font-size:10px;color:var(--muted);margin-bottom:8px}
.cal{font-size:10px}
.cal .mh{display:flex;justify-content:space-between;font-weight:600;font-size:11px;margin-bottom:4px}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal .g span{height:22px;line-height:22px;border-radius:7px;font-variant-numeric:tabular-nums}
.cal .g .dw{color:var(--faint);height:16px;line-height:16px}
.cal .g .off{color:#cfc8c0}
.cal .g .av{font-weight:600}
.cal .g .cur{outline:1.5px solid var(--line)}
.times{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 14px 0}
.times>span{height:32px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px}
.times em{font-style:normal;color:var(--muted);font-size:9.5px}
.times .full{color:var(--faint)}
.mfoot{display:flex;gap:6px;padding:10px 14px}
.mfoot span{height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font:600 11px var(--body)}
.mfoot .b{flex:none;width:64px;border:1px solid var(--line)}
.mfoot .c{flex:1;background:var(--plum);color:#fff;opacity:.45}
.s3 .d23{animation:s3d var(--T) var(--ease) infinite}
@keyframes s3d{0%,22%{background:transparent;color:var(--ink)}26%,92%{background:var(--plum);color:#fff}100%{background:transparent}}
.s3 .t7{animation:s3s var(--T) var(--ease) infinite}
@keyframes s3s{0%,40%{border-color:var(--line);background:transparent}44%,92%{border-color:var(--plum);background:var(--peach-soft)}100%{border-color:var(--line)}}
.s3 .mfoot .c{animation:s3c var(--T) var(--ease) infinite}
@keyframes s3c{0%,40%{opacity:.45}44%,92%{opacity:1}100%{opacity:.45}}
.s3 .finger{animation:s3f var(--T) var(--ease) infinite}
@keyframes s3f{
  0%,14%{opacity:0;left:var(--d23x);top:var(--d23y);transform:scale(1.3)}
  18%{opacity:1;transform:scale(1)}22%{transform:scale(.82)}26%{transform:scale(1)}
  34%{opacity:1;left:var(--t7x);top:var(--t7y)}38%{transform:scale(.82)}42%{transform:scale(1)}
  50%{opacity:1;left:var(--cx);top:var(--cy)}54%{transform:scale(.82)}58%{transform:scale(1);opacity:1}
  62%,100%{opacity:0;left:var(--cx);top:var(--cy)}}
.s3 .done{position:absolute;left:0;right:0;top:44px;bottom:0;background:var(--paper);padding:26px 18px;text-align:center;opacity:0;animation:s3done var(--T) var(--ease) infinite;z-index:4}
@keyframes s3done{0%,60%{opacity:0;transform:translateY(14px)}66%,94%{opacity:1;transform:none}100%{opacity:0}}
.tick{width:48px;height:48px;border-radius:50%;background:var(--sage-soft);display:grid;place-items:center;margin:8px auto 12px}
.done h4{margin:0 0 6px;font:600 17px var(--display);font-variation-settings:"SOFT" 60}
.done p{font-size:11px;color:var(--muted);margin:0 auto 12px}
.done .when{background:var(--bone);border-radius:10px;padding:10px 12px;text-align:left;font-size:11.5px;margin-bottom:12px}
.done .when b{display:block;font-weight:600}

/* ===== Scene 4 ===== */
.chatw{position:absolute;left:22px;right:22px;top:26px;bottom:-14px;background:var(--paper);border-radius:14px;box-shadow:0 22px 44px -22px rgba(75,29,63,.35);display:flex;flex-direction:column;overflow:hidden}
.chatw .hd{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.chatw .hd b{display:block;font:600 16px var(--display);font-variation-settings:"SOFT" 60}
.chatw .hd span{font-size:10.5px;color:var(--muted)}
.msgs{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.bub{max-width:80%;padding:8px 12px;border-radius:18px;font-size:11.5px;line-height:1.35}
.bub.me{align-self:flex-end;background:var(--plum);color:#fff;border-bottom-right-radius:6px}
.bub.them{align-self:flex-start;background:var(--bone);border-bottom-left-radius:6px}
.ans{align-self:flex-start;width:88%;background:var(--bone);border-radius:18px;border-bottom-left-radius:6px;padding:10px 12px;font-size:11px}
.ans .li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.ans .li:first-of-type{border-top:0}
.composer{margin:0 14px 28px;height:36px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:var(--faint)}
.s4 .q{animation:s4q var(--T) var(--ease) infinite}
@keyframes s4q{0%,6%{opacity:0;transform:translateY(10px)}12%,94%{opacity:1;transform:none}100%{opacity:0}}
.s4 .typing{animation:s4t var(--T) var(--ease) infinite;overflow:hidden}
@keyframes s4t{0%,14%{opacity:0;max-height:0;padding-block:0}18%,40%{opacity:1;max-height:40px;padding-block:9px}44%,100%{opacity:0;max-height:0;padding-block:0}}
.s4 .ans{animation:s4a var(--T) var(--ease) infinite}
@keyframes s4a{0%,42%{opacity:0;transform:translateY(10px)}48%,94%{opacity:1;transform:none}100%{opacity:0}}
.s4 .li{animation:s4l var(--T) var(--ease) infinite}
.s4 .li:nth-of-type(2){animation-name:s4l2}.s4 .li:nth-of-type(3){animation-name:s4l3}
@keyframes s4l{0%,46%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
@keyframes s4l2{0%,50%{opacity:0}54%,94%{opacity:1}100%{opacity:0}}
@keyframes s4l3{0%,54%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
.mk{display:block;overflow:visible}
.mk .w{stroke-dasharray:1 1}
.mk .d{transform-box:fill-box;transform-origin:50% 50%}
.loader .w{animation:ldraw 1.3s var(--ease) infinite}
.loader .d{animation:lhop 1.3s var(--ease) infinite}
@keyframes ldraw{0%{stroke-dashoffset:1}42%{stroke-dashoffset:0}64%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes lhop{0%,22%{transform:scale(0)}34%{transform:scale(1.15)}42%{transform:scale(1)}54%{transform:translateY(-55%)}64%{transform:translateY(0) scale(1.08,.9)}72%,92%{transform:scale(1)}100%{transform:scale(0)}}

@media (prefers-reduced-motion:reduce){
  .fc *{animation:none!important}
  .s1 .c4{opacity:0}.s1 .c5{opacity:1;transform:none}
  .s2 .rep,.s2 .rep2,.s2 .footer-a{opacity:0}.s2 .paid,.s2 .paid2,.s2 .footer-b{opacity:1}
  .s4 .typing{display:none}
  .s3 .done{display:none}
}


/* ===== more scenes ===== */
/* Eight feature cards: pack, invoice, discount, roster, customer, team, shop, email.
   Needs the card kit's base (tokens, .fc, .scene, .phone, .screen, .sb, .urlbar, .notif, .badge, .finger, .cursor, .ripple).
   Shared pieces are prefixed mx-, each scene's own pieces with its scene prefix (pk iv dc rs cu tm sh em). */

/* --- shared --- */
.mx-win{position:absolute;left:18px;right:18px;top:26px;bottom:-14px;background:var(--paper);border-radius:14px;box-shadow:0 22px 44px -22px rgba(75,29,63,.35);overflow:hidden}
.mx-h{font:600 8.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.mx-card{border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:24px;padding:0 9px;border-radius:7px;border:1px solid var(--line);background:var(--paper);font:600 9.5px/1 var(--body);color:var(--ink);white-space:nowrap;position:relative}
.mx-btn.p{background:var(--plum);border-color:var(--plum);color:#fff}
.mx-btn svg{width:10px;height:10px;flex:none}
.mx-ic{width:10px;height:10px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mx-dot{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--bone);color:var(--muted)}
.mx-dot.bk{background:var(--sage-soft);color:var(--sage-deep)}
.mx-b{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:999px;font:600 8.5px/1 var(--body);white-space:nowrap}
.mx-b.ok{background:var(--sage-soft);color:var(--sage-deep)}
.mx-b.warn{background:var(--amber-soft);color:var(--amber)}
.mx-b.info{background:var(--info-soft);color:var(--info)}
.mx-b.sec{background:#efebe6;color:var(--muted)}
.mx-b.out{border:1px solid var(--line);color:var(--muted);font-weight:500}
.mx-swap{position:relative;display:inline-flex}
.mx-swap>.b2{position:absolute;left:0;top:0}
.mx-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.mx-roll>span{display:block}
.mx-roll>span+span{position:absolute;left:0;top:0}
.mx-toast{position:absolute;right:14px;bottom:30px;display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:8px;border:1px solid #c9dcc4;background:#f1f7ef;color:var(--sage-deep);font:600 10px/1.2 var(--body);box-shadow:0 10px 24px -12px rgba(26,20,24,.35);opacity:0;z-index:5;white-space:nowrap}
.mx-toast svg{width:12px;height:12px}
.mx-sw{position:relative;width:24px;height:14px;border-radius:999px;background:#d9d2c8;flex:none}
.mx-sw i{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.mx-sw.on{background:var(--plum)}.mx-sw.on i{transform:translateX(10px)}
.mx-cb{width:12px;height:12px;border-radius:3px;border:1.4px solid #b9b0a6;flex:none;display:grid;place-items:center;margin-top:1px;position:relative}
.mx-cb.on{background:var(--plum);border-color:var(--plum)}
.mx-cb svg{width:8px;height:8px;stroke:#fff;fill:none;stroke-width:2.2}
.mx-cb.dis{opacity:.5}
.mx-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mx-scr{position:relative;overflow:hidden}

/* ===== pack: customer's pack loses a credit when a booking lands ===== */
.pk .notif{animation:pkN var(--T) var(--ease) infinite}
.pk .notif{transform:translateY(calc(-100% - 60px))}
@keyframes pkN{0%,6%{transform:translateY(calc(-100% - 60px))}12%,40%{transform:translateY(0)}46%,100%{transform:translateY(calc(-100% - 60px))}}
.pk-body{padding:0 12px;font-size:10px;line-height:1.3}
.pk-pack{display:flex;align-items:center;gap:6px;padding:7px 8px}
.pk-pack .t{display:flex;gap:7px;align-items:center;min-width:0;flex:1 1 0}
.pk-pack .t b{display:block;font-weight:600;font-size:10px}
.pk-pack .t span{color:var(--muted);font-size:8.5px}
.pk-pack .mx-roll{height:11px;vertical-align:-1px}
.pk-pack .acts{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:none}
.pk-comp{padding:6px 7px}
.pk-comp .ta{height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:8.5px;color:var(--faint);line-height:1.25}
.pk-comp .r{display:flex;justify-content:flex-end;margin-top:4px}
.pk-comp .mx-btn{opacity:.45;height:20px}
.pk-tl{margin-top:6px}
.pk-row{display:flex;gap:7px;align-items:flex-start;padding:7px 9px;border-top:1px solid var(--line)}
.pk-row b{font-weight:600;font-size:9.5px}
.pk-row .d{font-size:8.5px;color:var(--muted)}
.pk-new{overflow:hidden;max-height:0;opacity:0;animation:pkNew var(--T) var(--ease) infinite}
.pk-new:first-child .pk-row{border-top:0}
@keyframes pkNew{0%,30%{max-height:0;opacity:0;background:var(--peach-soft)}36%{max-height:60px;opacity:1;background:var(--peach-soft)}70%,94%{max-height:60px;opacity:1;background:transparent}100%{max-height:0;opacity:0}}
.pk .ro{animation:pkO var(--T) var(--ease) infinite}
.pk .rn{animation:pkI var(--T) var(--ease) infinite}
@keyframes pkO{0%,30%{transform:none;opacity:1}35%,96%{transform:translateY(-100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes pkI{0%,30%{transform:translateY(100%);opacity:0}35%,94%{transform:none;opacity:1}98%,100%{transform:translateY(100%);opacity:0}}

/* ===== invoice: Mark paid turns the invoice into a receipt ===== */
.iv-bg{padding:16px 18px;font-size:10px}
.iv-bg .row{display:flex;align-items:center;gap:8px;padding:9px 10px}
.iv-bg .row .t{flex:1;min-width:0}
.iv-bg .row b{display:block;font-weight:600}
.iv-bg .row span{color:var(--muted);font-size:8.5px}
.iv-ov{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.iv-dlg{position:absolute;left:50%;top:22px;width:min(92%,340px);transform:translateX(-50%);background:var(--paper);border-radius:12px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);padding:14px 16px 12px;font-size:10px;line-height:1.35}
.iv-dlg h4{margin:0;font:600 13px/1.2 var(--body)}
.iv-dlg .x{position:absolute;right:12px;top:12px;width:12px;height:12px;color:var(--muted)}
.iv-dlg .desc{color:var(--muted);font-size:9.5px;margin:3px 0 10px}
.iv-card{border:1px solid var(--line);border-radius:9px;padding:10px 11px}
.iv-card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.iv-card .top b{font-weight:600;font-size:10.5px}
.iv-card .tot{color:var(--muted);margin-top:4px}
.iv-card .iss{color:var(--muted);font-size:8.5px;margin-top:2px}
.iv-card .paid{opacity:0;animation:ivP var(--T) var(--ease) infinite}
.iv-mp{overflow:hidden;max-height:60px;animation:ivMP var(--T) var(--ease) infinite}
.iv-mp .in{padding-top:6px}
.iv-mp .hint{font-size:8.5px;color:var(--muted);margin-top:4px}
.iv-share{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.iv-share .b{display:flex;gap:6px;flex-wrap:wrap}
.iv-share .u{font-size:8px;color:var(--muted);margin-top:5px;word-break:break-all}
.iv-foot{display:flex;justify-content:flex-end;margin-top:10px}
.iv .b1{animation:ivBo var(--T) var(--ease) infinite}
.iv .b2{animation:ivBn var(--T) var(--ease) infinite}
@keyframes ivBo{0%,46%{opacity:1}48%,96%{opacity:0}100%{opacity:1}}
@keyframes ivBn{0%,46%{opacity:0;transform:scale(.8)}49%{opacity:1;transform:scale(1.1)}53%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes ivP{0%,47%{opacity:0}52%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes ivMP{0%,46%{max-height:60px;opacity:1}52%,96%{max-height:0;opacity:0}100%{max-height:60px;opacity:1}}
.iv-mp .lbl{animation:ivL var(--T) steps(1) infinite}
.iv-mp .spin{animation:ivS var(--T) steps(1) infinite}
.iv-mp .spin svg{animation:mxSpin .7s linear infinite}
@keyframes ivL{0%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes ivS{0%,40%{opacity:0}41%,47%{opacity:1}48%,100%{opacity:0}}
.iv-mp .spin{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
@keyframes mxSpin{to{transform:rotate(360deg)}}
.iv .cursor{animation:ivC var(--T) var(--ease) infinite}
@keyframes ivC{0%,16%{left:78%;top:94%}34%,46%{left:var(--ivx);top:var(--ivy)}66%,100%{left:78%;top:94%}}
.iv .ripple{left:var(--ivx);top:var(--ivy);animation:ivR var(--T) ease-out infinite}
@keyframes ivR{0%,37%{opacity:0;transform:scale(.4)}39%{opacity:.9}52%,100%{opacity:0;transform:scale(1.7)}}

/* ===== discount: switch a code on ===== */
.dc-body{padding:0 12px;font-size:10px;line-height:1.3}
.dc-search{height:26px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--faint);font-size:9.5px}
.dc-chips{display:flex;gap:5px;margin:7px 0 8px}
.dc-chips span{font:500 9px var(--body);border:1px dashed #cfc6bb;border-radius:999px;padding:3px 8px;color:var(--muted)}
.dc-card{border:1px solid var(--line);border-radius:11px;padding:8px 9px;margin-bottom:6px;display:flex;gap:6px;justify-content:space-between;align-items:flex-start}
.dc-card .t{min-width:0;flex:1}
.dc-card .l{display:flex;flex-wrap:wrap;gap:3px 4px;align-items:center}
.dc-card .l b{font-weight:600;font-size:10px;margin-right:2px}
.dc-card .s{font-size:8.5px;color:var(--muted);margin-top:3px}
.dc-card .u{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.dc-card .a{display:flex;gap:4px;align-items:center;flex:none}
.dc-card .a .mx-btn{height:20px;padding:0 6px;font-size:8.5px}
.dc-card .a .sq{width:20px;padding:0}
.dc .tg .mx-sw{animation:dcT var(--T) var(--ease) infinite}
.dc .tg .mx-sw i{animation:dcK var(--T) var(--ease) infinite}
@keyframes dcT{0%,36%{background:#d9d2c8}39%,94%{background:var(--plum)}98%,100%{background:#d9d2c8}}
@keyframes dcK{0%,36%{transform:none}39%,94%{transform:translateX(10px)}98%,100%{transform:none}}
.dc .b1{animation:dcBo var(--T) var(--ease) infinite}
.dc .b2{animation:dcBn var(--T) var(--ease) infinite}
@keyframes dcBo{0%,37%{opacity:1}39%,96%{opacity:0}100%{opacity:1}}
@keyframes dcBn{0%,37%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}44%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
.dc .finger{animation:dcF var(--T) var(--ease) infinite;left:var(--dcx);top:var(--dcy)}
@keyframes dcF{0%,24%{opacity:0;transform:scale(1.3)}30%{opacity:1;transform:scale(1)}36%{transform:scale(.82)}40%{transform:scale(1);opacity:1}48%,100%{opacity:0;transform:scale(1)}}

/* ===== roster: tick who came ===== */
.rs-hd{display:flex;gap:6px;align-items:flex-start;padding:8px 12px 9px;border-bottom:1px solid var(--line)}
.rs-hd .t{flex:1;min-width:0}
.rs-hd b{display:block;font:600 12px/1.2 var(--body)}
.rs-hd .sub{font-size:8.5px;color:var(--muted);margin-top:3px}
.rs-hd .m{display:flex;gap:4px;margin-top:6px}
.rs-hd .x{width:12px;height:12px;color:var(--muted);margin-top:2px}
.rs-body{padding:8px 12px;font-size:10px}
.rs-top{display:flex;justify-content:space-between;align-items:center}
.rs-top h5{margin:0;font:500 8.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rs-top span{font:600 9px var(--body);color:var(--ink)}
.rs-sum{position:relative;height:13px;font-size:8.5px;color:var(--muted);margin:3px 0 4px}
.rs-sum span{position:absolute;left:0;top:0;white-space:nowrap}
.rs-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-top:1px solid rgba(230,223,213,.6)}
.rs-row:first-of-type{border-top:0}
.rs-av{width:22px;height:22px;border-radius:50%;background:#efebe6;color:var(--muted);font:600 9px/22px var(--body);text-align:center;flex:none}
.rs-row .n{flex:1;min-width:0}
.rs-row .n b{display:block;font-weight:600;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row .n .bs{display:flex;gap:3px;margin-top:2px}
.rs-tk{display:flex;align-items:center;gap:1px;flex:none}
.rs-tk span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.rs-tk span svg{width:11px;height:11px}
.rs-tk .on{background:var(--sage-soft);color:var(--sage-deep)}
.rs-dots{width:16px;color:var(--muted);text-align:center;font-weight:700;letter-spacing:.5px;flex:none}
.rs .tgt{animation:rsT var(--T) var(--ease) infinite}
@keyframes rsT{0%,35%{background:transparent;color:var(--muted)}37%,94%{background:var(--sage-soft);color:var(--sage-deep)}98%,100%{background:transparent;color:var(--muted)}}
.rs .s1{animation:rsO var(--T) var(--ease) infinite}
.rs .s2{animation:rsN var(--T) var(--ease) infinite;opacity:0}
@keyframes rsO{0%,36%{opacity:1}38%,96%{opacity:0}100%{opacity:1}}
@keyframes rsN{0%,36%{opacity:0}39%,94%{opacity:1}98%,100%{opacity:0}}
.rs .finger{left:var(--rsx);top:var(--rsy);animation:rsF var(--T) var(--ease) infinite}
@keyframes rsF{0%,22%{opacity:0;transform:scale(1.3)}28%{opacity:1;transform:scale(1)}34%{transform:scale(.82)}38%{transform:scale(1);opacity:1}46%,100%{opacity:0}}

/* ===== customer: a note lands on the timeline ===== */
.cu-body{padding:4px 20px 0;font-size:10.5px;line-height:1.35}
.cu-pack{display:flex;align-items:center;gap:9px;padding:9px 11px}
.cu-pack .t{flex:1;min-width:0}
.cu-pack .t b{display:block;font-weight:600}
.cu-pack .t span{color:var(--muted);font-size:9px}
.cu-comp{padding:9px 11px}
.cu-ta{position:relative;height:36px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:9.5px;line-height:1.3;overflow:hidden}
.cu-ta .ph{color:var(--faint);animation:cuPh var(--T) steps(1) infinite}
.cu-ta .ty{position:absolute;left:8px;top:6px;right:8px;white-space:nowrap;color:var(--ink);clip-path:inset(0 100% 0 0);animation:cuTy var(--T) steps(34,end) infinite}
.cu-ta .ty::after{content:"";display:inline-block;width:1px;height:11px;background:var(--ink);vertical-align:-2px;margin-left:1px}
@keyframes cuPh{0%,7%{opacity:1}8%,47%{opacity:0}48%,100%{opacity:1}}
@keyframes cuTy{0%,8%{clip-path:inset(0 100% 0 0);opacity:1}34%,46%{clip-path:inset(0 -4px 0 0);opacity:1}47%,100%{clip-path:inset(0 -4px 0 0);opacity:0}}
.cu-comp .r{display:flex;justify-content:flex-end;margin-top:7px}
.cu-comp .mx-btn{animation:cuB var(--T) steps(1) infinite}
@keyframes cuB{0%,8%{opacity:.45}9%,47%{opacity:1}48%,100%{opacity:.45}}
.cu-tl{margin-top:7px}
.cu-row{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;border-top:1px solid var(--line)}
.cu-row .t{flex:1;min-width:0}
.cu-row .h{display:flex;gap:6px;align-items:center}
.cu-row b{font-weight:600}
.cu-row .d{font-size:9px;color:var(--muted)}
.cu-row .ed{margin-left:auto;font-size:8.5px;color:var(--muted);text-decoration:underline}
.cu-new{overflow:hidden;max-height:0;opacity:0;animation:cuNew var(--T) var(--ease) infinite}
.cu-new .cu-row{border-top:0}
@keyframes cuNew{0%,47%{max-height:0;opacity:0;background:var(--peach-soft)}52%{max-height:70px;opacity:1;background:var(--peach-soft)}80%,94%{max-height:70px;opacity:1;background:transparent}100%{max-height:0;opacity:0}}
.cu-new+.cu-row{}
.cu .mx-toast{animation:cuT var(--T) var(--ease) infinite}
@keyframes cuT{0%,48%{opacity:0;transform:translateY(14px)}53%,82%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(14px)}}
.cu .cursor{animation:cuC var(--T) var(--ease) infinite}
@keyframes cuC{0%,22%{left:62%;top:96%}38%,46%{left:var(--cux);top:var(--cuy)}64%,100%{left:62%;top:96%}}
.cu .ripple{left:var(--cux);top:var(--cuy);animation:cuR var(--T) ease-out infinite}
@keyframes cuR{0%,42%{opacity:0;transform:scale(.4)}44%{opacity:.9}56%,100%{opacity:0;transform:scale(1.7)}}

/* ===== team: untick See prices for Instructor; their phone loses the payment pills ===== */
.tm .mx-win{right:168px}
.tm-g{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:12px 12px 0;font-size:9.5px;line-height:1.3}
.tm-roles{align-self:start}
.tm-roles .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;border-bottom:1px solid var(--line)}
.tm-roles .hd b{font:600 11px var(--display);font-variation-settings:"SOFT" 60}
.tm-roles .hd .mx-btn{height:20px;padding:0 6px;font-size:8px}
.tm-roles li{display:flex;align-items:center;gap:5px;padding:6px 9px;border-top:1px solid var(--line)}
.tm-roles li:first-child{border-top:0}
.tm-roles li .t{flex:1;min-width:0}
.tm-roles li b{display:block;font-weight:600;font-size:9.5px}
.tm-roles li span{font-size:8px;color:var(--muted)}
.tm-roles li.sel{background:#f1ede7}
.tm-roles ul{list-style:none;margin:0;padding:0}
.tm-area .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.tm-area .hd b{display:block;font-weight:600;font-size:10px}
.tm-area .hd small{font-size:8.5px;color:var(--muted)}
.tm-area .hd .lk{font:600 9px var(--body);color:var(--plum);text-decoration:underline}
.tm-area ul{list-style:none;margin:0;padding:0}
.tm-area li{display:flex;gap:7px;align-items:flex-start;padding:6px 10px;border-top:1px solid var(--line)}
.tm-area li:first-child{border-top:0}
.tm-area li b{display:block;font-weight:500;font-size:9.5px}
.tm-area li span{display:block;font-size:8px;color:var(--muted);line-height:1.3}
.tm-area li .ds{display:none}
.tm-area li .lockt{display:inline}
.tm-save{position:absolute;left:0;right:0;bottom:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px;border-top:1px solid var(--line);background:var(--paper);font-size:9px;color:var(--muted)}
.tm-save .b{display:flex;gap:5px;align-items:center}
.tm-save .ok{color:var(--sage-deep);font-weight:500;opacity:0;animation:tmOk var(--T) steps(1) infinite}
@keyframes tmOk{0%,47%{opacity:0}48%,94%{opacity:1}95%,100%{opacity:0}}
.tm-save .mx-btn{animation:tmDirty var(--T) steps(1) infinite}
@keyframes tmDirty{0%,29%{opacity:.45}30%,47%{opacity:1}48%,100%{opacity:.45}}
.tm .tgt{animation:tmCb var(--T) steps(1) infinite}
.tm .tgt svg{animation:tmCk var(--T) steps(1) infinite}
@keyframes tmCb{0%,29%{background:var(--plum);border-color:var(--plum)}30%,95%{background:transparent;border-color:#b9b0a6}96%,100%{background:var(--plum);border-color:var(--plum)}}
@keyframes tmCk{0%,29%{opacity:1}30%,95%{opacity:0}96%,100%{opacity:1}}
.tm .lockc{animation:tmLock var(--T) steps(1) infinite}
@keyframes tmLock{0%,29%{opacity:.5}30%,95%{opacity:1}96%,100%{opacity:.5}}
.tm .lockt{animation:tmLockT var(--T) steps(1) infinite}
@keyframes tmLockT{0%,29%{opacity:1}30%,95%{opacity:0}96%,100%{opacity:1}}
.tm .c1{animation:tmC1 var(--T) steps(1) infinite}
.tm .c2{animation:tmC2 var(--T) steps(1) infinite;opacity:0;position:absolute;left:0;top:0}
.tm-area .hd small{position:relative;display:block}
@keyframes tmC1{0%,29%{opacity:1}30%,95%{opacity:0}96%,100%{opacity:1}}
@keyframes tmC2{0%,29%{opacity:0}30%,95%{opacity:1}96%,100%{opacity:0}}
.tm .cursor{animation:tmCur var(--T) var(--ease) infinite}
@keyframes tmCur{0%,12%{left:30%;top:96%}24%,31%{left:var(--tmax);top:var(--tmay)}42%,49%{left:var(--tmbx);top:var(--tmby)}62%,100%{left:30%;top:96%}}
.tm .ripple{animation:tmR var(--T) ease-out infinite;left:var(--tmax);top:var(--tmay)}
@keyframes tmR{0%,27%{opacity:0;transform:scale(.4);left:var(--tmax);top:var(--tmay)}29%{opacity:.9;left:var(--tmax);top:var(--tmay)}38%{opacity:0;transform:scale(1.7);left:var(--tmax);top:var(--tmay)}39%,45%{opacity:0;transform:scale(.4);left:var(--tmbx);top:var(--tmby)}47%{opacity:.9;left:var(--tmbx);top:var(--tmby)}56%,100%{opacity:0;transform:scale(1.7);left:var(--tmbx);top:var(--tmby)}}
/* the instructor's phone: kit phone at 0.7 scale, anchored right */
.tm .phone{left:auto;right:12px;top:58px;margin-left:0;transform:scale(.62);transform-origin:100% 0}
.tm-p{padding:0 12px;font-size:10px;line-height:1.3}
.tm-p h6{margin:2px 0 6px;font:600 17px var(--display);font-variation-settings:"SOFT" 60}
.tm-ban{position:relative;border:1px solid var(--line);background:#f4f1ec;border-radius:8px;padding:6px 8px;font-size:9px;color:var(--muted);min-height:37px}
.tm-ban span{display:block}
.tm-ban .v2{position:absolute;left:8px;right:8px;top:6px;opacity:0;animation:tmBn var(--T) steps(1) infinite}
.tm-ban .v1{animation:tmBo var(--T) steps(1) infinite}
@keyframes tmBo{0%,62%{opacity:1}63%,95%{opacity:0}96%,100%{opacity:1}}
@keyframes tmBn{0%,62%{opacity:0}63%,95%{opacity:1}96%,100%{opacity:0}}
.tm-tabs{display:flex;gap:12px;border-bottom:1px solid var(--line);margin:8px 0 2px;font:500 9.5px var(--body);color:var(--muted)}
.tm-tabs span{padding:5px 0}
.tm-tabs .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--plum)}
.tm-row{padding:7px 0;border-top:1px solid var(--line)}
.tm-row:first-of-type{border-top:0}
.tm-row b{font-weight:600}
.tm-row .d{font-size:8.5px;color:var(--muted)}
.tm-row .bs{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-top:3px;font-size:8.5px;color:var(--muted)}
.tm .pay{animation:tmPay var(--T) steps(1) infinite}
@keyframes tmPay{0%,62%{opacity:1;transform:none}63%,95%{opacity:0;transform:scale(.6)}96%,100%{opacity:1;transform:none}}
.tm .urlbar{position:relative;overflow:hidden}
.tm .urlbar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:#2f7de1;transform:scaleX(0);transform-origin:0 50%;animation:tmLoad var(--T) linear infinite}
@keyframes tmLoad{0%,57%{transform:scaleX(0);opacity:1}62%{transform:scaleX(1);opacity:1}64%,100%{transform:scaleX(1);opacity:0}}
.tm-p .fade{animation:tmFade var(--T) linear infinite}
@keyframes tmFade{0%,59%{opacity:1}61%{opacity:.35}64%,100%{opacity:1}}

/* ===== shop: Advance moves an order to the next stage ===== */
.sh-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:12px 14px 8px}
.sh-hd b{display:block;font:600 15px var(--display);font-variation-settings:"SOFT" 60}
.sh-hd span{display:block;font-size:9px;line-height:1.35;color:var(--muted);margin-top:2px}
.sh-hd .sh-seg{display:inline-flex;margin-top:0}
.sh-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:2px;flex:none}
.sh-seg i{font:500 9px/1 var(--body);font-style:normal;padding:4px 7px;border-radius:6px;color:var(--muted)}
.sh-seg i.on{background:var(--bone);color:var(--ink);font-weight:600}
.sh-board{display:flex;gap:9px;padding:2px 14px 0;font-size:9.5px;line-height:1.3}
.sh-col{flex:none;width:calc((100% - 18px) / 2.75);min-width:0;position:relative}
.sh-col .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sh-col .ch b{font-weight:600;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-col .ch .mx-roll{height:12px;font-size:8.5px;color:var(--muted);flex:none;margin-left:4px;min-width:6px}
.sh-cd{border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:var(--paper);margin-bottom:7px}
.sh-cd .r{font-weight:600;font-size:9.5px}
.sh-cd .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sh-cd .p{display:flex;justify-content:space-between;align-items:center;margin-top:3px;gap:4px}
.sh-cd .mx-btn{width:100%;margin-top:6px;height:22px}
.sh-cd .mx-btn .spin{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.sh-cd .mx-btn .spin svg{animation:mxSpin .7s linear infinite}
.sh-empty{border:1px dashed var(--line);border-radius:9px;padding:9px;text-align:center;color:var(--muted);font-size:8.5px}
.sh .go{animation:shGo var(--T) var(--ease) infinite;overflow:hidden}
@keyframes shGo{0%,40%{opacity:1;transform:none;max-height:100px;margin-bottom:7px;padding-top:7px;padding-bottom:7px;border-width:1px}45%{opacity:0;transform:translateX(30px);max-height:100px}50%,96%{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}100%{opacity:1;transform:none;max-height:100px;margin-bottom:7px;padding-top:7px;padding-bottom:7px;border-width:1px}}
.sh .come{animation:shCome var(--T) var(--ease) infinite;opacity:0;position:absolute;left:0;right:0;top:20px}
@keyframes shCome{0%,44%{opacity:0;transform:translateX(-30px);background:var(--paper)}49%{opacity:1;transform:none;background:var(--peach-soft)}76%,94%{opacity:1;background:var(--paper)}98%,100%{opacity:0}}
.sh .empty3{animation:shE var(--T) steps(1) infinite}
@keyframes shE{0%,44%{opacity:1}45%,97%{opacity:0}98%,100%{opacity:1}}
.sh .go .lbl{animation:shL var(--T) steps(1) infinite}
.sh .go .spin{animation:shS var(--T) steps(1) infinite}
@keyframes shL{0%,37%{opacity:1}38%,100%{opacity:0}}
@keyframes shS{0%,37%{opacity:0}38%,44%{opacity:1}45%,100%{opacity:0}}
.sh .ro{animation:pkO var(--T) var(--ease) infinite}
.sh .rn{animation:pkI var(--T) var(--ease) infinite}
.sh .ro{animation-name:shRo}.sh .rn{animation-name:shRn}
@keyframes shRo{0%,44%{transform:none;opacity:1}48%,96%{transform:translateY(-100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes shRn{0%,44%{transform:translateY(100%);opacity:0}48%,94%{transform:none;opacity:1}98%,100%{transform:translateY(100%);opacity:0}}
.sh .mx-toast{animation:shT var(--T) var(--ease) infinite}
@keyframes shT{0%,44%{opacity:0;transform:translateY(14px)}49%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(14px)}}
.sh .cursor{animation:shC var(--T) var(--ease) infinite}
@keyframes shC{0%,14%{left:24%;top:94%}30%,40%{left:var(--shx);top:var(--shy)}60%,100%{left:24%;top:94%}}
.sh .ripple{left:var(--shx);top:var(--shy);animation:shR var(--T) ease-out infinite}
@keyframes shR{0%,35%{opacity:0;transform:scale(.4)}37%{opacity:.9}50%,100%{opacity:0;transform:scale(1.7)}}

/* ===== email: the confirmation arrives in Mail and opens ===== */
.em .screen{background:#fff}
.em-nav{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 0;font:400 11px var(--body);color:#2f7de1;height:22px}
.em-nav b{font-weight:400}
.em-title{padding:2px 14px 6px;font:700 22px/1.1 -apple-system,system-ui,var(--body)}
.em-search{margin:0 14px 6px;height:24px;border-radius:8px;background:#efeff0;display:flex;align-items:center;gap:5px;padding:0 8px;font-size:10px;color:#8e8e93}
.em-list{border-top:1px solid #e5e5ea;margin-left:14px}
.em-it{position:relative;padding:7px 14px 8px 0;border-bottom:1px solid #e5e5ea;font-size:9.5px;line-height:1.3}
.em-it .f{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.em-it .f b{font-weight:600;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-it .f span{color:#8e8e93;font-size:9px;flex:none}
.em-it .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-it .pv{color:#8e8e93;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.em-it .u{position:absolute;left:-10px;top:12px;width:7px;height:7px;border-radius:50%;background:#2f7de1}
.em-new{overflow:hidden;max-height:0;animation:emNew var(--T) var(--ease) infinite}
@keyframes emNew{0%,12%{max-height:0}18%,100%{max-height:80px}}
.em-new .em-it{animation:emHl var(--T) var(--ease) infinite}
@keyframes emHl{0%,31%{background:#fff}33%,44%{background:#e5e5ea}46%,100%{background:#fff}}
.em-msg{position:absolute;left:0;right:0;top:42px;bottom:0;background:#fff;transform:translateX(100%);animation:emMsg var(--T) cubic-bezier(.3,.8,.3,1) infinite;z-index:3;overflow:hidden}
@keyframes emMsg{0%,36%{transform:translateX(100%)}44%,92%{transform:none}99%,100%{transform:translateX(100%)}}
.em-mnav{position:relative;z-index:2;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:4px 14px 6px;color:#2f7de1;font-size:11px;height:24px}
.em-scroll{animation:emScr var(--T) var(--ease) infinite}
@keyframes emScr{0%,56%{transform:none}68%,100%{transform:translateY(calc(-1 * var(--ems,120px)))}}
.em-from{display:flex;gap:8px;align-items:center;padding:4px 14px 6px}
.em-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 11px var(--body);flex:none}
.em-from b{display:block;font-weight:600;font-size:10.5px}
.em-from span{font-size:8.5px;color:#8e8e93}
.em-subj{padding:0 14px 8px;font:600 12px/1.25 var(--body);border-bottom:1px solid #e5e5ea}
.em-html{background:#f4f4f5;padding:10px 8px 14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.em-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.em-brand{padding:12px 16px;text-align:center;color:#fff}
.em-brand .lg{width:24px;height:24px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.em-brand .nm{font-size:11.5px;font-weight:600}
.em-ct{padding:14px 14px 12px}
.em-ct h4{margin:0 0 4px;font-size:14px;color:#111827}
.em-ct .hi{margin:0 0 9px;font-size:9.5px;color:#6b7280;line-height:1.35}
.em-det{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:10px 11px;font-size:9.5px;color:#374151;line-height:1.5}
.em-det .lb{font-size:8px;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.em-det .sv{font-size:10.5px;font-weight:600;color:#111827;margin-bottom:3px}
.em-ref{margin:12px 0 0;font-size:8.5px;color:#9ca3af}
.em-sm{margin:6px 0 0;font-size:8.5px;color:#9ca3af;line-height:1.35}
.em-sm u{text-decoration:underline}
.em-man{text-align:center;margin-top:11px;font-size:9.5px;color:#6b7280;text-decoration:underline}
.em-ft{border-top:1px solid #e5e7eb;padding:8px;text-align:center;font-size:8px;color:#9ca3af}
.em .finger{animation:emF var(--T) var(--ease) infinite;left:var(--emx);top:var(--emy)}
@keyframes emF{0%,24%{opacity:0;transform:scale(1.3);left:var(--emx);top:var(--emy)}29%{opacity:1;transform:scale(1)}32%{transform:scale(.82)}35%{transform:scale(1);opacity:1;top:var(--emy)}40%,50%{opacity:0;left:var(--emx);top:var(--emsy)}55%{opacity:1;top:var(--emsy);transform:scale(.9)}68%{opacity:1;top:calc(var(--emsy) - var(--ems,120px));transform:scale(.9)}72%,100%{opacity:0;top:calc(var(--emsy) - var(--ems,120px))}}

/* ===== reduced motion: the after frame, still ===== */
@media (prefers-reduced-motion:reduce){
  .fc *,.fc *::after{animation:none!important}
  .pk .notif{transform:translateY(calc(-100% - 60px))}
  .pk-new{max-height:60px;opacity:1}
  .pk .ro{opacity:0}.pk .rn{opacity:1;transform:none}
  .iv .b1{opacity:0}.iv .b2{opacity:1}.iv-card .paid{opacity:1}.iv-mp{max-height:0;opacity:0}
  .iv .cursor,.iv .ripple{display:none}
  .dc .tg .mx-sw{background:var(--plum)}.dc .tg .mx-sw i{transform:translateX(10px)}.dc .b1{opacity:0}.dc .b2{opacity:1}
  .rs .tgt{background:var(--sage-soft);color:var(--sage-deep)}.rs .s1{opacity:0}.rs .s2{opacity:1}
  .cu-new{max-height:70px;opacity:1}.cu-ta .ty{display:none}.cu .cursor,.cu .ripple{display:none}
  .tm .tgt{background:transparent;border-color:#b9b0a6}.tm .tgt svg{opacity:0}.tm .c1{opacity:0}.tm .c2{opacity:1}.tm .lockt{opacity:0}.tm .lockc{opacity:1}
  .tm-save .ok{opacity:1}.tm .pay{opacity:0}.tm-ban .v1{opacity:0}.tm-ban .v2{opacity:1}.tm .cursor,.tm .ripple{display:none}
  .sh .go{display:none}.sh .come{opacity:1}.sh .empty3{opacity:0}.sh .ro{opacity:0}.sh .rn{opacity:1;transform:none}.sh .cursor,.sh .ripple{display:none}
  .em-msg{transform:none}
  .cu-comp .mx-btn,.tm-save .mx-btn{opacity:.45}
}

/* narrow cards (phone-width site): the team window drops the roles column, the board shows two and a bit columns */
@media (max-width:520px){
  .tm .mx-win{right:118px;left:12px}
  .tm-g{grid-template-columns:minmax(0,1fr)}
  .tm-roles{display:none}
  .tm .phone{right:8px;transform:scale(.62)}
  .tm .mx-win{right:150px}
  .tm-area li .keep2{display:none}
  .mx-win:not(.tm-win){left:12px;right:12px}
  .sh-col{width:calc((100% - 18px) / 3)}
  .sh-board{padding:2px 10px 0;gap:8px}
  .sh-cd{padding:6px 6px}
  .cu-body{padding:4px 14px 0}
  .iv-bg{padding:14px 12px}
}

/* ===== minis ===== */
/* One small, mostly still crop of the real app per "What you get" point. 150px tall, any width from 280px up.
   Needs the Quiet studio tokens (--paper --ink --muted --faint --line --plum --peach-soft --sage-soft --sage-deep
   --amber-soft --amber --lilac-soft --info --info-soft --bone --body --display --ease --T). */
.mn{position:relative;height:150px;overflow:hidden;background:var(--peach-soft);--md:0s}
.mn[data-feature=bookings],.mn[data-feature=packs],.mn[data-feature=team]{background:var(--peach-soft)}
.mn[data-feature=booking-page],.mn[data-feature=payments],.mn[data-feature=customers]{background:var(--sage-soft)}
.mn[data-feature=emails],.mn[data-feature=discounts],.mn[data-feature=shop]{background:var(--amber-soft)}
.mn[data-feature=invoices],.mn[data-feature=calendar],.mn[data-feature=assistant]{background:var(--lilac-soft)}
.mn[data-point="1"]{--md:-1.4s}.mn[data-point="2"]{--md:-2.8s}.mn[data-point="3"]{--md:-4.2s}.mn[data-point="4"]{--md:-5.6s}.mn[data-point="5"]{--md:-.7s}
.mn-ui{position:absolute;left:14px;right:14px;top:14px;bottom:-10px;background:var(--paper);border-radius:10px;box-shadow:0 14px 30px -18px rgba(75,29,63,.35);padding:10px 12px;font:400 9.5px/1.35 var(--body);color:var(--ink);overflow:hidden}
.mn-ui.mn-np{padding:0}
.mn-ui *{box-sizing:border-box}
.mn-h{font:600 8px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.mn-t{font:600 11px/1.25 var(--body);margin:0 0 2px}
.mn-m{color:var(--muted)}
.mn-s{font-size:8.5px}
.mn-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mn-row{display:flex;align-items:center;gap:6px}
.mn-sp{justify-content:space-between}
.mn-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mn-b{display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:999px;font:600 8px/1 var(--body);white-space:nowrap}
.mn-b.ok{background:var(--sage-soft);color:var(--sage-deep)}
.mn-b.warn{background:var(--amber-soft);color:var(--amber)}
.mn-b.info{background:var(--info-soft);color:var(--info)}
.mn-b.sec{background:#efebe6;color:var(--muted)}
.mn-b.out{border:1px solid var(--line);color:var(--muted);font-weight:500}
.mn-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:22px;padding:0 9px;border-radius:7px;border:1px solid var(--line);background:var(--paper);font:600 9px/1 var(--body);color:var(--ink);white-space:nowrap}
.mn-btn.p{background:var(--plum);border-color:var(--plum);color:#fff}
.mn-btn.w{width:100%}
.mn-ic{width:10px;height:10px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mn-lbl{font:500 9px/1.2 var(--body);margin:0 0 3px}
.mn-in{height:22px;border:1px solid var(--line);border-radius:7px;padding:0 8px;display:flex;align-items:center;gap:6px;font-size:9.5px;background:var(--paper);min-width:0;white-space:nowrap;overflow:hidden}
.mn-sel{justify-content:space-between}
.mn-sel::after{content:"";width:5px;height:5px;border-right:1.3px solid var(--muted);border-bottom:1.3px solid var(--muted);transform:rotate(45deg) translateY(-2px);flex:none}
.mn-hint{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.3}
.mn-card{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--paper)}
.mn-sel-card{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum) inset;background:#fbf6f8}
.mn-dot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:#efebe6;color:var(--muted)}
.mn-dot.ok{background:var(--sage-soft);color:var(--sage-deep)}
.mn-sw{position:relative;width:22px;height:13px;border-radius:999px;background:#d9d2c8;flex:none}
.mn-sw i{position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.mn-sw.on{background:var(--plum)}.mn-sw.on i{transform:translateX(9px)}
.mn-cb{width:11px;height:11px;border-radius:3px;border:1.3px solid #b9b0a6;flex:none;display:grid;place-items:center;margin-top:1px}
.mn-cb.on{background:var(--plum);border-color:var(--plum)}
.mn-cb svg{width:7px;height:7px;stroke:#fff;fill:none;stroke-width:2.2}
.mn-hr{height:1px;background:var(--line);margin:6px 0}
.mn-li{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px solid var(--line)}
.mn-li:first-child{border-top:0}
.mn-av{width:18px;height:18px;border-radius:50%;background:#efebe6;color:var(--muted);font:600 8px/18px var(--body);text-align:center;flex:none}
.mn-tk{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted);flex:none}
.mn-tk.on{background:var(--sage-soft);color:var(--sage-deep)}
.mn-menu{border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--paper);box-shadow:0 10px 24px -14px rgba(26,20,24,.35)}
.mn-menu span{display:block;padding:4px 8px;border-radius:5px;font-size:9.5px}
.mn-menu .sep{height:1px;padding:0;margin:3px 0;background:var(--line)}
.mn-menu .red{color:#b23a3a}
.mn-menu .hl{background:#f1ede7}
.mn-slot{display:flex;justify-content:space-between;align-items:center;height:24px;border:1px solid var(--line);border-radius:7px;padding:0 9px;font-size:9.5px;margin-bottom:5px}
.mn-slot em{font-style:normal;font-size:8.5px;color:var(--muted)}
.mn-slot.off{opacity:.5}
.mn-mail{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.mn-ebrand{padding:7px 10px;text-align:center;color:#fff;font:600 10px/1.2 -apple-system,system-ui,sans-serif}
.mn-ebox{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:7px 9px;color:#374151;font-size:8.5px;line-height:1.45}
.mn-ebox .lb{font-size:7.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.mn-ebox .sv{font-size:9.5px;font-weight:600;color:#111827}
.mn-toast{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;border:1px solid #c9dcc4;background:#f1f7ef;color:var(--sage-deep);font:600 8.5px/1.2 var(--body)}
.mn-qr{width:62px;height:62px;flex:none;border-radius:6px;background:
  linear-gradient(90deg,var(--ink) 0 22%,transparent 22% 30%,var(--ink) 30% 38%,transparent 38% 62%,var(--ink) 62% 70%,transparent 70% 78%,var(--ink) 78%) 0 0/100% 14% no-repeat,
  repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/12px 12px;outline:5px solid #fff;outline-offset:-5px;border:1px solid var(--line)}
/* week mini: the agreed box in a box (APP_REDESIGN_DECISIONS.md, Calendar; mirrors src/components/calendar/CalendarSlot.tsx) */
.mn-wk{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;flex:1;min-width:0}
.mn-wk>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.mn-wk b{font:600 7.5px var(--body);color:var(--muted);text-align:center}
.mn-sl{display:block;font-style:normal;min-width:0}
.mn-sl.past{opacity:.55}
.mn-sl u{display:flex;gap:2px;text-decoration:none;font:600 6.5px/1.3 var(--body);color:var(--ink);white-space:nowrap}
.mn-sl u span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mn-sl u em,.mn-dl em{font-style:normal;font-weight:500;color:var(--muted)}
.mn-sl u em.f{font-weight:700;color:var(--ink)}
.mn-sl s{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:2px}
.mn-sl a{display:flex;align-items:center;height:13px;padding:0 2px;border-radius:3px;background:color-mix(in srgb,var(--plum) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--plum) 14%,var(--paper))}
.mn-sl .mn-av,.mn-dlp .mn-av{width:8px;height:8px;margin-left:-2px;box-shadow:0 0 0 1px var(--paper)}
.mn-sl .mn-av:first-child,.mn-dlp .mn-av:first-child{margin-left:0}
.mn-sl a em,.mn-dlp em{font:600 6px var(--body);font-style:normal;margin-left:2px;color:var(--ink)}
.mn-av.t1{background:var(--sage-soft)}.mn-av.t2{background:var(--info-soft)}.mn-av.t3{background:var(--amber-soft)}.mn-av.t4{background:color-mix(in srgb,var(--plum) 20%,var(--paper))}
.mn-dl{flex-direction:column;align-items:stretch;gap:1px}
.mn-sp2{display:flex;justify-content:space-between;gap:3px}
.mn-dlp{display:flex;align-items:center;margin:1px 0 2px}
.mn-rcpt{position:relative;width:26px;height:36px;flex:none;border-radius:4px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(var(--info) 0 22%,var(--paper) 22%)}
.mn-rcpt::before{content:"";position:absolute;left:50%;top:11px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--sage-deep)}
.mn-rcpt::after{content:"";position:absolute;left:4px;right:4px;top:25px;height:2px;border-radius:2px;background:var(--ink);opacity:.5;box-shadow:0 4px 0 var(--line)}
.mn-shot{width:30px;height:44px;border-radius:5px;border:1px solid var(--line);background:linear-gradient(#fff 0 18%,#e7f2ea 18% 46%,#fff 46%);position:relative;flex:none}
.mn-shot::after{content:"";position:absolute;left:5px;right:5px;top:23px;height:3px;border-radius:2px;background:#9cc5a6;box-shadow:0 6px 0 #d9d2c8,0 11px 0 #d9d2c8}
.mn-img{width:100%;height:46px;border-radius:7px;background:linear-gradient(135deg,#f3dccb,#e8c9b1);position:relative}
.mn-img.b{background:linear-gradient(135deg,#efe3c4,#dcc79c)}
.mn-img .mn-b{position:absolute;left:5px;top:5px}
.mn-bub{max-width:82%;padding:6px 9px;border-radius:13px;font-size:9.5px;line-height:1.35}
.mn-bub.me{align-self:flex-end;background:var(--plum);color:#fff;border-bottom-right-radius:4px}
.mn-bub.them{align-self:flex-start;background:var(--bone);border-bottom-left-radius:4px}

/* the few things that move: one each, staggered by point so a row of cards never moves together */
.mn-swap{position:relative;display:inline-flex}
.mn-swap .b2{position:absolute;left:0;top:0;opacity:0}
.mn-swap .b1{animation:mnOut var(--T) var(--ease) infinite var(--md)}
.mn-swap .b2{animation:mnIn var(--T) var(--ease) infinite var(--md)}
@keyframes mnOut{0%,40%{opacity:1}43%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes mnIn{0%,40%{opacity:0;transform:scale(.85)}44%{opacity:1;transform:scale(1.06)}48%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
.mn-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;height:1.35em;white-space:nowrap}
.mn-roll span{display:block}
.mn-roll .rn{position:absolute;left:0;top:0}
.mn-roll .ro{animation:mnRo var(--T) var(--ease) infinite var(--md)}
.mn-roll .rn{animation:mnRn var(--T) var(--ease) infinite var(--md);transform:translateY(100%);opacity:0}
@keyframes mnRo{0%,40%{transform:none;opacity:1}46%,92%{transform:translateY(-100%);opacity:0}96%,100%{transform:none;opacity:1}}
@keyframes mnRn{0%,40%{transform:translateY(100%);opacity:0}46%,90%{transform:none;opacity:1}94%,100%{transform:translateY(100%);opacity:0}}
.mn-tog{animation:mnTg var(--T) var(--ease) infinite var(--md)}
.mn-tog i{animation:mnTk var(--T) var(--ease) infinite var(--md)}
@keyframes mnTg{0%,40%{background:#d9d2c8}44%,92%{background:var(--plum)}96%,100%{background:#d9d2c8}}
@keyframes mnTk{0%,40%{transform:none}44%,92%{transform:translateX(9px)}96%,100%{transform:none}}
.mn-untick{animation:mnUc var(--T) steps(1) infinite var(--md)}
.mn-untick svg{animation:mnUs var(--T) steps(1) infinite var(--md)}
@keyframes mnUc{0%,41%{background:var(--plum);border-color:var(--plum)}42%,93%{background:transparent;border-color:#b9b0a6}94%,100%{background:var(--plum);border-color:var(--plum)}}
@keyframes mnUs{0%,41%{opacity:1}42%,93%{opacity:0}94%,100%{opacity:1}}
.mn-tick{animation:mnTi var(--T) var(--ease) infinite var(--md)}
@keyframes mnTi{0%,40%{background:transparent;color:var(--muted)}43%,92%{background:var(--sage-soft);color:var(--sage-deep)}96%,100%{background:transparent;color:var(--muted)}}
.mn-pop{animation:mnPop var(--T) var(--ease) infinite var(--md)}
@keyframes mnPop{0%,40%{opacity:0;transform:scale(.7)}44%{opacity:1;transform:scale(1.08)}48%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.mn-new{overflow:hidden;animation:mnNew var(--T) var(--ease) infinite var(--md)}
@keyframes mnNew{0%,40%{max-height:0;opacity:0}46%{max-height:40px;opacity:1;background:var(--peach-soft)}80%,92%{max-height:40px;opacity:1;background:transparent}97%,100%{max-height:0;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .mn *{animation:none!important}
  .mn-swap .b1{opacity:0}.mn-swap .b2{opacity:1}
  .mn-roll .ro{opacity:0}.mn-roll .rn{opacity:1;transform:none}
  .mn-tog{background:var(--plum)}.mn-tog i{transform:translateX(9px)}
  .mn-untick{background:transparent;border-color:#b9b0a6}.mn-untick svg{opacity:0}
  .mn-tick{background:var(--sage-soft);color:var(--sage-deep)}
  .mn-pop{opacity:1}
  .mn-new{max-height:40px;opacity:1}
}

/* ===== feature illustrations (scripts/site/illus.py; docs/brand/WEBSITE.md "Feature illustrations") =====
   One template per feature, words swapped per country and business type. Everything inside is sized in em, and the
   em follows the frame's width (container query), so the picture scales like an image but stays real, crisp text.
   Colours from /site/tokens.css only. One quiet change per picture on the --T loop; paused off screen (.paused, set
   by site.js); reduced motion shows the end frame.

   The frame (art direction, 25 Oct): a flat tint "stage" with the screen centred in it, whole, never cut by the
   edge, lifted by one soft shadow. Customer screens sit in a browser window (narrow, with the address bar); owner
   screens are the app's panel or page (wider). The same frame is used by the small point pictures (minis). */
:root{--il-shadow:0 1px 2px color-mix(in srgb,var(--plum) 10%,transparent),0 18px 40px -18px color-mix(in srgb,var(--plum) 38%,transparent)}
.il{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:5/4;background:var(--peach-soft);container-type:inline-size;isolation:isolate}
.il.c-peach{background:var(--peach-soft)}.il.c-sage{background:var(--sage-soft)}.il.c-amber{background:var(--amber-soft)}.il.c-lilac{background:var(--lilac-soft)}
.il-s{position:absolute;inset:0;display:grid;place-items:center;font:400 12px/1.4 var(--body);font-size:clamp(8.5px,calc(100cqw / 42),13.5px);color:var(--ink);text-align:left}
.il-s *{box-sizing:border-box}
.il-ui{width:84%;max-height:90%;background:var(--paper);border-radius:1.1em;box-shadow:var(--il-shadow);padding:1.3em 1.4em;overflow:hidden}
.il-ui.il-wide{width:90%}
.il-ui.il-web{width:62%}
.il-ui.il-np{padding:0}
.il-ui.il-mail{width:70%}
.il-col{display:flex;flex-direction:column;gap:.15em;min-width:0;flex:1}
.il-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;min-width:0}
.il-row.il-l{justify-content:flex-start;flex-wrap:wrap;gap:.45em}
.il-row.il-top{align-items:flex-start;gap:.9em}
.il-row.il-top .il-qrimg{width:6em;height:6em;margin:0;flex:none}
.il-row.il-g{gap:.5em;margin-top:.9em}
.il-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:.8em;margin-bottom:.9em}
.il-t{font:600 1.45em/1.2 var(--display);font-variation-settings:"SOFT" 60;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-t.il-small{font-size:1.2em;white-space:normal}
.il-t.il-u,.il-li b.il-u{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.2em}
.il-sub,.il-m{color:var(--muted)}
.il-sub{font-size:.95em}
.il-sm{font-size:.86em}
.il-sm.il-c{text-align:center}
.il-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.il-cap{font:500 .78em/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.il-bs{display:flex;gap:.35em;flex-wrap:wrap;align-items:center;margin-top:.45em}
.il-k{font-weight:600;font-size:.95em;white-space:nowrap}
.il-link{font-weight:600;color:var(--plum);text-transform:none;letter-spacing:0;font-size:1.1em}
.il-pill{display:inline-flex;align-items:center;height:1.9em;padding:0 .75em;border-radius:999px;border:1px solid var(--line);font:600 .8em/1 var(--body);white-space:nowrap}
.il-b{display:inline-flex;align-items:center;height:1.75em;padding:0 .65em;border-radius:999px;font:600 .82em/1 var(--body);white-space:nowrap;background:var(--grey-soft);color:var(--grey)}
.il-b.il-kind{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}
.il-b.il-ok{background:var(--sage-soft);color:var(--sage-deep)}
.il-b.il-warn{background:var(--amber-soft);color:var(--amber)}
.il-b.il-info{background:var(--info-soft);color:var(--info)}
.il-b.il-grey{background:var(--grey-soft);color:var(--grey)}
.il-btn{display:inline-flex;align-items:center;justify-content:center;height:2.5em;padding:0 1em;border-radius:.65em;border:1px solid var(--line);background:var(--paper);font:600 .92em/1 var(--body);white-space:nowrap;color:var(--ink)}
.il-btn.il-p{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.il-btn.il-w{width:100%}
.il-btn.il-tall{height:3em;font-size:1em;margin-top:.3em}
.il-btn.il-mini{height:2em;font-size:.8em;margin-top:.35em}
.il-foot{display:flex;justify-content:flex-end;gap:.5em;margin-top:1em;padding-top:.9em;border-top:1px solid var(--line)}
.il-li{display:flex;align-items:center;gap:.7em;padding:.65em 0;border-top:1px solid var(--line);min-width:0}
.il-hd+.il-li,.il-sec+.il-li,.il-li:first-child{border-top:0}
.il-li b{font-weight:600}
.il-li em{font-style:normal;color:var(--muted);white-space:nowrap}
.il-li.il-tot{border-top:1.5px solid var(--ink);justify-content:space-between}
.il-li.il-rule,.il-row.il-rule{border-top:1px solid var(--line);padding-top:.7em;margin-top:.6em}
.il-row.il-rule{margin-bottom:.7em}
.il-li code,.il-oc2 code,.il-row code{font:600 .88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--grey-soft);border-radius:.4em;padding:.15em .45em}
.il-sec{font:600 .74em/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:1.1em 0 .45em}
.il-dl{display:grid;grid-template-columns:auto 1fr;gap:.45em 1.2em;align-items:center}
.il-dl>span:nth-child(even){justify-self:end;text-align:right}
.il-card{display:flex;align-items:center;gap:.7em;border:1px solid var(--line);border-radius:.8em;padding:.8em .95em;margin-top:.8em;background:var(--paper)}
.il-card.il-stack{flex-direction:column;align-items:stretch;gap:.5em}
.il-lbl{display:block;font:500 .88em/1.2 var(--body);color:var(--muted);margin:.7em 0 .4em}
.il-in{display:flex;align-items:center;height:2.5em;border:1px solid var(--line);border-radius:.65em;padding:0 .8em;white-space:nowrap;overflow:hidden;margin-bottom:.2em}
.il-hint{font-size:.85em;color:var(--muted);margin-top:.8em}
.il-callout{background:var(--grey-soft);border-radius:.7em;padding:.6em .85em;font-size:.92em;margin-bottom:.4em;color:var(--ink)}
.il-ico{width:2.2em;height:2.2em;border-radius:.65em;flex:none;background:var(--peach-soft);position:relative}
.il-ico::after{content:"";position:absolute;inset:.65em;border-radius:50%;border:.16em solid var(--plum)}
.il-ico.il-k1{background:var(--sage-soft)}.il-ico.il-k1::after{border-color:var(--sage-deep);border-radius:.2em}
.il-ico.il-k2{background:var(--lilac-soft)}.il-ico.il-k2::after{border-radius:.25em .25em .6em .6em}
.il-ico.il-k3{background:var(--amber-soft)}.il-ico.il-k3::after{border-color:var(--amber);inset:.6em .5em}
.il-sw{position:relative;width:2.3em;height:1.35em;border-radius:999px;background:var(--line-strong);flex:none}
.il-sw i{position:absolute;left:.18em;top:.18em;width:1em;height:1em;border-radius:50%;background:var(--paper)}
.il-sw.il-on{background:var(--plum)}.il-sw.il-on i{left:auto;right:.18em}
/* people circles: mirror calendar-people.ts avatarTone (t0 to t4) */
.il-av{width:2.1em;height:2.1em;border-radius:50%;flex:none;display:inline-grid;place-items:center;font:600 .78em/1 var(--body);color:var(--ink);background:var(--grey-soft)}
.il-av.il-t1{background:var(--sage-soft)}.il-av.il-t2{background:var(--info-soft)}.il-av.il-t3{background:var(--amber-soft)}.il-av.il-t4{background:color-mix(in srgb,var(--plum) 20%,var(--paper))}
.il-pp{display:inline-flex;align-items:center}
.il-pp .il-av{width:2.5em;height:2.5em;font-size:.62em;box-shadow:0 0 0 1.5px var(--paper)}
.il-pp .il-av+.il-av{margin-left:-.55em}
.il-more{font:600 .72em/1 var(--body);margin-left:.3em;color:var(--ink)}
.il-tk{width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;color:var(--muted);flex:none;font-size:.9em}
/* customer pages: the browser bar, then the page */
.il-url{display:flex;align-items:center;justify-content:center;height:2.3em;background:var(--grey-soft);font-size:.8em;color:var(--muted);border-bottom:1px solid var(--line)}
.il-pg{padding:1.1em 1.2em 1.2em;display:flex;flex-direction:column;gap:.2em}
.il-bk-h{display:flex;flex-direction:column;gap:.1em;margin-bottom:.8em}
.il-bk-h b{font-weight:600;font-size:1.05em}
.il-split{display:grid;grid-template-columns:1.25fr 1fr;gap:.9em;align-items:start}
.il-month{min-width:0}
.il-mh2{font-size:.85em;margin-bottom:.4em}
.il-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:.12em;text-align:center;font-size:.72em}
.il-mw{color:var(--muted);font-weight:500;padding:.2em 0}
.il-md{padding:.35em 0;border-radius:.4em}
.il-md.il-past{color:var(--faint)}
.il-md.il-sel{background:var(--plum);color:var(--paper);font-weight:600}
.il-times{display:flex;flex-direction:column;gap:.4em;min-width:0}
.il-times .il-lbl{margin:0 0 .1em;font-size:.78em}
.il-tb{display:flex;justify-content:space-between;align-items:center;gap:.3em;height:2.3em;padding:0 .6em;border:1px solid var(--line);border-radius:.55em;font-size:.82em;font-weight:500;white-space:nowrap}
.il-tb em{font-style:normal;opacity:.7;font-size:.88em}
.il-tb.il-off{opacity:.5}
.il-sd{display:grid;grid-template-columns:2em auto 1fr auto;gap:.5em;align-items:center;padding:.4em .55em;border-radius:.45em;background:var(--grey-soft);font-size:.86em;margin-bottom:.3em}
.il-sd em{font-style:normal;color:var(--muted);font-size:.9em}
.il-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3em;margin:.2em 0 .2em}
.il-dc{display:grid;place-items:center;height:3.3em;border-radius:.6em;font-weight:600;line-height:1.1;background:var(--paper);border:1px solid var(--line)}
.il-dc i{font:500 .75em var(--body);font-style:normal;color:var(--muted)}
.il-dc.il-a,.il-dc.il-z,.il-dc.il-mid{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.il-dc.il-a i,.il-dc.il-z i,.il-dc.il-mid i{color:var(--peach-soft)}
.il-dc.il-mid{background:color-mix(in srgb,var(--plum) 72%,var(--paper))}
.il-cover{height:4.2em;background:var(--plum);position:relative}
.il-logo{position:absolute;left:1.3em;bottom:-1.5em;width:3.2em;height:3.2em;border-radius:50%;background:var(--peach);border:.2em solid var(--paper);display:grid;place-items:center;font:600 1.2em var(--display);color:var(--plum)}
.il-pg2{padding:2em 1.3em 1.2em;display:flex;flex-direction:column;gap:.15em}
.il-oc{display:flex;align-items:center;gap:.7em;border:1px solid var(--line);border-radius:.8em;padding:.65em .8em;margin-top:.55em}
/* the class card (mirrors OfferingCard.tsx): picture on top; with no picture, the store colour, a faint wave and the initials */
.il-ocs{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.55em}
.il-oc.il-oc-a{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;margin:0;overflow:hidden;background:var(--paper);min-width:0}
.il-wash{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--plum) 13%,var(--paper));color:var(--plum)}
.il-wash svg{position:absolute;left:0;bottom:2%;width:100%;height:46%;opacity:.13}
.il-wash i{position:relative;font:600 1.7em/1 var(--display);font-style:normal;transform:translateY(-18%)}
.il-ocb{display:flex;flex-direction:column;align-items:flex-start;gap:.45em;padding:.55em .65em .65em;flex:1}
.il-ocb .il-btn{align-self:flex-end;margin-top:auto}
.il-ocb .il-m{font-size:.86em}
.il-ocb .il-col{flex:none}
.il-ocb .il-col b{font-family:var(--display)}
/* payment page (ManageBookingPage) */
.il-paybox{display:flex;flex-direction:column;gap:.45em;border:1px solid var(--line);border-radius:.8em;padding:1em}
.il-big{font-size:1.35em;font-weight:700}
.il-big.il-small{font-size:1.15em}
.il-qrimg{display:block;width:7em;height:7em;margin:.3em auto;border-radius:.4em;border:.45em solid var(--paper);outline:1px solid var(--line);background:
  linear-gradient(90deg,var(--ink) 0 22%,transparent 22% 30%,var(--ink) 30% 38%,transparent 38% 62%,var(--ink) 62% 70%,transparent 70% 78%,var(--ink) 78%) 0 0/100% 14% no-repeat,
  repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0 0/1.1em 1.1em}
.il-ref{display:flex;align-items:center;gap:.6em;border:2px dashed var(--line);background:var(--bone);border-radius:.6em;padding:.55em .7em}
.il-ref .il-mono{font-size:1.2em;font-weight:700}
.il-up{display:flex;align-items:center;gap:.7em;border:1px solid var(--line);border-radius:.8em;padding:.55em .65em;margin:.35em 0}
/* a payment app receipt as a screenshot thumbnail: header bar, a tick, the amount lines */
.il-shot{position:relative;width:2.9em;height:3.9em;flex:none;border-radius:.4em;border:1px solid var(--line);overflow:hidden;background:linear-gradient(var(--info) 0 22%,var(--paper) 22%)}
.il-shot::before{content:"";position:absolute;left:50%;top:32%;width:1.1em;height:1.1em;margin-left:-.55em;border-radius:50%;background:var(--sage-deep)}
.il-shot::after{content:"";position:absolute;left:.45em;right:.45em;top:66%;height:.22em;border-radius:.2em;background:var(--ink);opacity:.55;box-shadow:0 .45em 0 var(--line),0 .85em 0 var(--line)}
.il-shot i{position:absolute;left:50%;top:calc(32% + .32em);width:.42em;height:.24em;margin-left:-.22em;border-left:.14em solid var(--paper);border-bottom:.14em solid var(--paper);transform:rotate(-45deg)}
/* pack meter (PackManageDialog) */
.il-bar{height:.55em;border-radius:999px;background:var(--grey-soft);overflow:hidden;margin:.5em 0 .2em}
.il-bar i{display:block;height:100%;width:var(--z);background:var(--plum);border-radius:inherit;animation:ilBar var(--T) var(--ease) infinite}
@keyframes ilBar{0%,40%{width:var(--a)}48%,92%{width:var(--z)}97%,100%{width:var(--a)}}
.il-sec+.il-m{margin-bottom:.3em}
/* email */
.il-ui.il-mail{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.il-mh{display:grid;grid-template-columns:auto 1fr;gap:.2em .7em;padding:.9em 1.2em;border-bottom:1px solid var(--line);font-size:.86em}
.il-mh span{color:var(--muted)}.il-mh b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-band{background:var(--plum);color:var(--paper);text-align:center;font-weight:600;padding:.6em}
.il-mb{padding:1em 1.2em 1.2em;display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.il-facts{align-self:stretch;display:grid;grid-template-columns:auto 1fr;gap:.25em .9em;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.6em 0}
.il-facts span{color:var(--muted);font-size:.85em}
/* invoice */
.il-ui.il-web .il-dl{margin:.6em 0}
/* customers */
.il-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.il-stats span{display:flex;flex-direction:column;gap:.15em;border:1px solid var(--line);border-radius:.6em;padding:.5em .6em}
.il-stats i{font-style:normal;font-size:.78em}
.il-stats b{font-size:1.05em}
.il-note{background:var(--amber-soft);border-radius:.6em;padding:.6em .8em;font-size:.95em}
/* calendar: the agreed box in a box (APP_REDESIGN_DECISIONS.md, Calendar; mirrors CalendarSlot.tsx) */
.il-week{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.il-day{display:flex;flex-direction:column;gap:.5em;min-width:0}
.il-dh{font:600 .8em var(--body);color:var(--muted);text-align:center;padding:.2em 0;border-radius:.4em}
.il-day.il-today .il-dh{background:var(--plum);color:var(--paper)}
.il-cb{display:flex;flex-direction:column;gap:.2em;min-width:0}
.il-cb.il-past{opacity:.55}
.il-sl{display:flex;justify-content:space-between;gap:.2em;font:600 .7em/1.25 var(--body);white-space:nowrap}
.il-sl b{overflow:hidden;text-overflow:ellipsis;min-width:0}
.il-sl em{font-style:normal;font-weight:500;color:var(--muted)}
.il-bx{display:block;background:var(--paper);border:1px solid var(--line);border-radius:.45em;padding:.25em}
.il-bx .il-pp{display:flex;align-items:center;height:2em;padding:0 .3em;border-radius:.35em;background:color-mix(in srgb,var(--plum) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--plum) 14%,var(--paper))}
.il-cb.il-blk .il-bx{height:3.6em;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--grey-soft) 0 .4em,var(--paper) .4em .8em);font-size:.75em;color:var(--muted)}
.il-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.15em;font-size:.82em;flex:none}
.il-seg i{font-style:normal;padding:.3em .8em;border-radius:999px;color:var(--muted)}
.il-seg i.il-on{background:var(--plum);color:var(--paper)}
.il-dr{display:flex;align-items:center;gap:.8em;padding:.7em .8em;border:1px solid var(--line);border-radius:.8em;margin-bottom:.5em}
.il-dr em{font-style:normal;font-weight:600;font-size:.95em}
.il-tm{font-weight:600;width:5.2em;flex:none;font-size:.92em}
.il-closed{color:var(--muted)}
/* team */
.il-cbx{display:flex;align-items:center;gap:.55em;font-size:.95em}
.il-cbx::before{content:"";width:1.15em;height:1.15em;border-radius:.3em;border:1.5px solid var(--line-strong);flex:none}
.il-cbx.il-on::before{background:var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/80% no-repeat;border-color:var(--plum)}
/* assistant */
.il-chat{display:flex;flex-direction:column;gap:.6em}
.il-bub{max-width:86%;padding:.7em .95em;border-radius:1.1em;line-height:1.35}
.il-bub.il-me{align-self:flex-end;background:var(--plum);color:var(--paper);border-bottom-right-radius:.35em}
.il-bub.il-them{align-self:flex-start;background:var(--bone);border-bottom-left-radius:.35em;display:flex;flex-direction:column;gap:.35em;min-width:65%}
.il-ar{display:flex;justify-content:space-between;gap:1em}
.il-ask{margin-top:1em;border:1px solid var(--line);border-radius:999px;padding:.7em 1em;color:var(--faint);font-size:.92em}
/* shop */
.il-board{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.il-oc-col{background:var(--bone);border-radius:.7em;padding:.5em;display:flex;flex-direction:column;gap:.45em;min-width:0;min-height:9em}
.il-oc-col .il-lbl{margin:.1em 0 .1em;font-size:.78em}
.il-oc2{background:var(--paper);border:1px solid var(--line);border-radius:.6em;padding:.5em .6em;display:flex;flex-direction:column;gap:.15em;font-size:.88em;min-width:0}
.il-oc2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-prods{display:grid;gap:.7em;margin-top:.7em}
.il-prods.il-three{grid-template-columns:repeat(3,1fr)}
.il-prod{display:flex;flex-direction:column;gap:.15em;min-width:0;font-size:.9em}
.il-prod b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-img{display:block;aspect-ratio:1;border-radius:.6em;background:linear-gradient(135deg,var(--peach-soft),var(--peach));position:relative;margin-bottom:.3em}
.il-img.il-alt{background:linear-gradient(135deg,var(--amber-soft),color-mix(in srgb,var(--amber) 35%,var(--amber-soft)))}
.il-img .il-b{position:absolute;left:.4em;top:.4em}

/* ----- the one change per picture ----- */
.il-swap{display:inline-grid;vertical-align:middle;justify-items:start;align-items:center}
.il-swap.il-end{justify-items:end}
.il-swap>span{grid-area:1/1;white-space:nowrap}
.il-swap .il-s2{opacity:0}
.il-swap .il-s1{animation:ilOut var(--T) var(--ease) infinite}
.il-swap .il-s2{animation:ilIn var(--T) var(--ease) infinite}
@keyframes ilOut{0%,40%{opacity:1}43%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes ilIn{0%,40%{opacity:0;transform:scale(.88)}44%{opacity:1;transform:scale(1.05)}48%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
.il-roll{display:inline-grid;overflow:hidden;vertical-align:bottom;height:1.3em;line-height:1.3em;white-space:nowrap}
.il-roll>span{grid-area:1/1}
.il-roll .il-r2{transform:translateY(100%);opacity:0}
.il-roll .il-r1{animation:ilRo var(--T) var(--ease) infinite}
.il-roll .il-r2{animation:ilRn var(--T) var(--ease) infinite}
@keyframes ilRo{0%,40%{transform:none;opacity:1}46%,92%{transform:translateY(-100%);opacity:0}96%,100%{transform:none;opacity:1}}
@keyframes ilRn{0%,40%{transform:translateY(100%);opacity:0}46%,90%{transform:none;opacity:1}94%,100%{transform:translateY(100%);opacity:0}}
.il-pop{animation:ilPop var(--T) var(--ease) infinite}
.il-pop.il-d1{animation-delay:.25s}.il-pop.il-d2{animation-delay:.5s}
@keyframes ilPop{0%,38%{opacity:0;transform:scale(.85)}44%{opacity:1;transform:scale(1.04)}48%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.il-tick{animation:ilTick var(--T) var(--ease) infinite}
.il-tick.il-d1{animation-delay:.35s}.il-tick.il-d2{animation-delay:.7s}
@keyframes ilTick{0%,40%{background:transparent;color:var(--muted)}44%,92%{background:var(--sage-soft);color:var(--sage-deep)}96%,100%{background:transparent;color:var(--muted)}}
.il-new{overflow:hidden;animation:ilNew var(--T) var(--ease) infinite}
@keyframes ilNew{0%,40%{max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;opacity:0;border-color:transparent}46%{max-height:6em;opacity:1;background:var(--peach-soft)}80%,92%{max-height:6em;opacity:1;background:transparent}97%,100%{max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;opacity:0}}
.il-press{animation:ilPress var(--T) var(--ease) infinite}
@keyframes ilPress{0%,36%,46%,100%{transform:none;box-shadow:none}40%{transform:scale(.96);box-shadow:0 0 0 .35em color-mix(in srgb,var(--plum) 18%,transparent)}}
.il-pick{animation:ilPick var(--T) var(--ease) infinite}
@keyframes ilPick{0%,38%{background:var(--paper);color:var(--ink);border-color:var(--line)}42%,92%{background:var(--plum);color:var(--paper);border-color:var(--plum)}96%,100%{background:var(--paper);color:var(--ink);border-color:var(--line)}}
.il-typed span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:ilType var(--T) steps(24,end) infinite}
@keyframes ilType{0%,20%{max-width:0}52%,92%{max-width:22em}97%,100%{max-width:0}}
.il-fade{animation:ilFade var(--T) var(--ease) infinite}
@keyframes ilFade{0%,40%{opacity:1}46%,92%{opacity:.6}97%,100%{opacity:1}}
.il-leave{animation:ilLeave var(--T) var(--ease) infinite}
@keyframes ilLeave{0%,38%{opacity:1;transform:none}46%,92%{opacity:0;transform:translateX(40%)}97%,100%{opacity:1;transform:none}}
.il-arrive{animation:ilArrive var(--T) var(--ease) infinite}
@keyframes ilArrive{0%,42%{opacity:0;transform:translateX(-30%)}50%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.il.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .il *{animation:none!important}
  .il-swap .il-s1{opacity:0}.il-swap .il-s2{opacity:1}
  .il-swap:has(.il-s2:empty){display:none}
  .il-roll .il-r1{opacity:0}.il-roll .il-r2{opacity:1;transform:none}
  .il-pop,.il-new,.il-arrive{opacity:1}
  .il-leave{opacity:0}
  .il-tick{background:var(--sage-soft);color:var(--sage-deep)}
  .il-pick{background:var(--plum);color:var(--paper);border-color:var(--plum)}
  .il-fade{opacity:.6}
}

/* ===== page layout (feature and business pages). One spacing scale: 8, 16, 24, 32, 48, 72. ===== */
.niche-card .il{max-width:560px;margin-left:auto}
.zz{display:grid;gap:72px}
.zz-row{display:grid;gap:24px;align-items:center}
@media(min-width:880px){.zz-row{grid-template-columns:1fr 1fr;gap:72px}.zz-row:nth-child(even) .il{order:2}}
.zz-row .il{width:100%;max-width:560px}
.zz-row:nth-child(even) .il{justify-self:end}
.zz-tx h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:12px}
.zz-tx p{color:var(--muted);font-size:17px;margin:0 0 16px;max-width:46ch}
.zz-tx .eyebrow{margin-bottom:12px}
.more-l{font-weight:600;color:var(--plum);text-decoration:none}
.more-l:hover{text-decoration:underline}
/* outcomes: a picture and two lines of words. No card around the words, so nothing reads as a box in a box. */
.outcomes{display:grid;gap:48px 32px}
@media(min-width:760px){.outcomes{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.outcomes.n3{grid-template-columns:repeat(3,1fr)}}
.oc h3{font-size:21px;margin:20px 0 8px}
.oc p{color:var(--muted);font-size:16px;margin:0;max-width:44ch}
/* the small point pictures (minis) in the same frame as the big ones: a tint stage, the screen centred and whole */
.oc .mn{height:auto;aspect-ratio:16/9;border-radius:20px;display:grid;place-items:center;padding:20px}
.oc .mn .mn-ui{position:relative;inset:auto;width:min(100%,340px);max-height:100%;border-radius:12px;box-shadow:var(--il-shadow);zoom:1.15}
@media(min-width:1080px){.outcomes:not(.n3) .oc .mn .mn-ui{zoom:1.4}}
.oc .mn .mn-ui[style*="transparent"]{box-shadow:none}
/* how it works: numbered, on a rule, not in boxes */
.how{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:32px}
@media(min-width:860px){.how{grid-template-columns:repeat(3,1fr)}}
.how li{counter-increment:s;border-top:2px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.how li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--plum);color:var(--paper);display:grid;place-items:center;font:600 15px var(--display);margin-bottom:8px}
.how b{font:600 20px var(--display);font-variation-settings:"SOFT" 60}
.how span{color:var(--muted);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;align-items:center}
.chips span{color:var(--muted);font-size:14px;margin-right:8px}
.chips a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;font-size:14px;font-weight:500}
.chips a:hover{border-color:var(--plum)}
/* questions: the same grid as every other section, heading on the left, answers on the right */
.qa{display:grid;gap:24px}
@media(min-width:900px){.qa{grid-template-columns:1fr 1.6fr;gap:72px}.qa .sh{margin:0}}
.qa .faq{margin:0;border-top:1px solid var(--line)}
/* on a phone the frame is narrow: let the customer screens use more of it */
@container (max-width:440px){.il-ui.il-web{width:78%}.il-ui.il-mail{width:86%}.il-ui{width:88%}}