/* The blocks and page parts ported from the effects toolbox (tools\effects\, the rules in tools\effects-catalogue.md),
   2026-11-02. js/blocks.js builds them; this file styles them with the site's own tokens (the --dk-* set from
   desktop.css, the --hs-* set on the inner pages). Each block names its source component. No inline styles: the
   numbers (a slider's position, a bar's width) arrive as custom properties set from the script.
   Home blocks: reviews, compare, timeline, stats, countdown, plans, video, poll, partners.
   Every page: banner, quick message button, the wizard form, the photo field, the sending state of a submit button. */

.desk-sub{font-size:1.1rem;line-height:1.55;margin:-16px 0 28px;max-width:60ch;color:color-mix(in srgb,var(--dk-paper) 80%,transparent)}
.desk-sub:empty{display:none}

/* ---- reviews: Aceternity animated-testimonials. One review at a time, a photo beside it when there is one, the
   next one slides in; dots and arrows, and it moves on by itself every eight seconds until the mouse is over it. ---- */
.desk-reviews{display:grid;gap:28px;align-items:center}
.desk-rev-photos{position:relative;aspect-ratio:1;max-width:380px;width:100%;margin:0 auto}
.desk-rev-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;opacity:0;transform:scale(.94) rotate(calc(var(--r,0) * 1deg));transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);box-shadow:0 20px 50px color-mix(in srgb,var(--dk-ink) 50%,transparent)}
.desk-rev-photos img.on{opacity:1;transform:none;z-index:2}
.desk-rev-photos img.next{opacity:.55;z-index:1}
.desk-rev-text{min-height:200px;display:flex;flex-direction:column;justify-content:center}
.desk-rev-item{display:none}
.desk-rev-item.on{display:block;animation:desk-rev-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes desk-rev-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.desk-rev-stars{color:var(--dk-accent);letter-spacing:.1em;font-size:1.05rem;margin-bottom:10px}
.desk-rev-quote{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.45;margin:0;color:var(--dk-paper);font-weight:500}
.desk-rev-quote .w{display:inline-block;animation:desk-rev-word .4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 18ms)}
@keyframes desk-rev-word{from{opacity:0;filter:blur(6px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
.desk-rev-who{margin:18px 0 0;font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.05rem;color:var(--dk-paper)}
.desk-rev-who small{display:block;font-family:var(--body-font,inherit);font-weight:400;font-size:.9rem;color:var(--dk-plate-muted);margin-top:2px}
.desk-rev-nav{display:flex;align-items:center;gap:14px;margin-top:24px}
.desk-rev-nav button{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--dk-paper) 30%,transparent);background:color-mix(in srgb,var(--dk-paper) 8%,transparent);color:var(--dk-paper);cursor:pointer;font-size:1.1rem;display:grid;place-items:center;transition:background .2s,transform .2s}
.desk-rev-nav button:hover{background:color-mix(in srgb,var(--dk-paper) 16%,transparent);transform:translateY(-1px)}
.desk-rev-dots{display:flex;gap:6px}
.desk-rev-dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--dk-paper) 30%,transparent);transition:background .2s,transform .2s;cursor:pointer}
.desk-rev-dots i.on{background:var(--dk-accent);transform:scale(1.25)}

/* ---- compare: Aceternity compare. Two photos of the same view; the handle wipes between them. The range input
   lies over the whole picture (a thumb or a mouse drags it, the keyboard nudges it); --pos is its value. ---- */
.desk-compare{display:grid;gap:14px}
.desk-cmp{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--dk-paper) 8%,var(--dk-ink));user-select:none;-webkit-user-select:none;isolation:isolate}
.desk-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.desk-cmp .b{position:absolute;inset:0;clip-path:inset(0 0 0 calc(var(--pos,50) * 1%))}
.desk-cmp .line{position:absolute;top:0;bottom:0;left:calc(var(--pos,50) * 1%);width:2px;background:var(--dk-paper);transform:translateX(-1px);z-index:2;pointer-events:none;box-shadow:0 0 12px color-mix(in srgb,var(--dk-ink) 60%,transparent)}
.desk-cmp .knob{position:absolute;top:50%;left:calc(var(--pos,50) * 1%);width:44px;height:44px;border-radius:50%;background:var(--dk-paper);color:var(--dk-ink);transform:translate(-50%,-50%);z-index:3;pointer-events:none;display:grid;place-items:center;font-size:.9rem;letter-spacing:-.05em;box-shadow:0 6px 20px color-mix(in srgb,var(--dk-ink) 50%,transparent)}
.desk-cmp .tag{position:absolute;bottom:14px;z-index:2;padding:6px 12px;border-radius:999px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--dk-ink) 70%,transparent);color:var(--dk-paper);pointer-events:none}
.desk-cmp .tag.l{left:14px}.desk-cmp .tag.r{right:14px}
.desk-cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;appearance:none;-webkit-appearance:none;background:transparent}
.desk-cmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.desk-cmp input[type=range]:focus-visible + .line{outline:2px solid var(--dk-accent)}
.desk-cmp-cap{font-size:.95rem;color:var(--dk-plate-muted);margin:0}
.desk-cmp-pick{display:flex;gap:8px;flex-wrap:wrap}
.desk-cmp-pick button{border:1px solid color-mix(in srgb,var(--dk-paper) 30%,transparent);background:transparent;color:var(--dk-paper);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:.9rem}
.desk-cmp-pick button.on{background:var(--dk-accent);color:var(--on-accent,#fff);border-color:transparent}

/* ---- timeline: Aceternity timeline. A line down the left, a dot per entry, the entries fade up as they scroll in. ---- */
.desk-timeline{position:relative;padding-left:34px;max-width:860px}
.desk-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:color-mix(in srgb,var(--dk-paper) 18%,transparent)}
.desk-tl-item{position:relative;padding:0 0 34px}
.desk-tl-item:last-child{padding-bottom:0}
.desk-tl-item::before{content:"";position:absolute;left:-34px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--dk-ink);border:2px solid var(--dk-accent);box-shadow:0 0 0 4px var(--dk-ink)}
.desk-tl-item.in::before{background:var(--dk-accent)}
.desk-tl-when{font-family:var(--head-font);font-weight:var(--head-weight);text-transform:var(--dk-caps);letter-spacing:var(--dk-track-3);font-size:.8rem;color:var(--dk-accent)}
.desk-tl-item h3{font-size:1.35rem;margin:6px 0 8px;color:var(--dk-paper);text-shadow:none}
.desk-tl-item p{margin:0;line-height:1.55;color:var(--dk-plate-muted);max-width:60ch}

/* ---- stats: Cult UI rolling-number. Big numbers that count up from zero the first time they scroll in. ---- */
.desk-stats-band{flex:0 0 auto;margin:96px -14px 0;padding:72px 0;background:color-mix(in srgb,var(--dk-paper) 6%,var(--dk-ink));border-top:1px solid color-mix(in srgb,var(--dk-paper) 12%,transparent);border-bottom:1px solid color-mix(in srgb,var(--dk-paper) 12%,transparent)}
.desk-stats-band[hidden]{display:none}
.desk-stats-band .desk-in{padding-top:0}
.desk-stats{display:grid;gap:28px}
.desk-stat{text-align:left}
.desk-stat .n{display:block;font-family:var(--dk-num-font,var(--dk-name-font));font-weight:var(--dk-num-weight,var(--dk-name-weight));font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;color:var(--dk-paper);font-variant-numeric:tabular-nums;letter-spacing:var(--dk-name-spacing)}
.desk-stat .n{color:var(--dk-accent)}
.desk-stat .n b{color:inherit;font-weight:inherit}   /* the number and its prefix and suffix in one colour: "48 hr" read as two things (critic 2) */
.desk-stats:has(.long) .desk-stat .n{font-size:clamp(2rem,3.4vw,3.4rem)}   /* one long figure shrinks the band, so the numbers share a baseline */
.desk-stat .l{display:block;margin-top:8px;font-size:1rem;color:var(--dk-plate-muted)}

/* ---- countdown: Cult UI timer. Days, hours, minutes and seconds to a date, on an accent band with one button. ---- */
.desk-count-band{flex:0 0 auto;margin:96px -14px 0;background:var(--dk-accent);color:var(--on-accent,#fff)}
.desk-count-band[hidden]{display:none}
:is(.desk-steps,.desk-cta-band,.desk-stats-band,.desk-count-band) + :is(.desk-cta-band,.desk-stats-band,.desk-count-band,.desk-steps){margin-top:0}   /* two bands touch; no dark stripe between them (critic 1) */
.desk-count-band .desk-in{padding:64px 72px}
.desk-count-in{display:grid;gap:32px;align-items:center}
.desk-count-text .desk-h2{color:inherit}
.desk-count-text p{font-size:1.1rem;line-height:1.5;margin:12px 0 0;max-width:46ch;opacity:.9}
.desk-count{display:flex;gap:10px;flex-wrap:wrap}
.desk-count div{min-width:84px;padding:14px 12px;border-radius:12px;background:color-mix(in srgb,var(--on-accent,#fff) 12%,transparent);text-align:center}
.desk-count b{display:block;font-family:var(--dk-num-font,var(--dk-name-font));font-weight:var(--dk-num-weight,var(--dk-name-weight));font-size:clamp(2rem,4vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.desk-count small{display:block;margin-top:6px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.desk-count-till{margin:10px 0 0;font-size:.85rem;letter-spacing:.04em;opacity:.85}
.desk-count-done{font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.3rem}
.desk-count-band .desk-hero-btn{background:var(--dk-ink);color:var(--dk-paper);margin-top:22px}

/* ---- plans: Componentry pricing-01. Package cards; the featured one carries the accent. ---- */
.desk-plans{display:grid;gap:16px}
.desk-plan{display:flex;flex-direction:column;gap:14px;padding:28px 26px;border-radius:16px;background:color-mix(in srgb,var(--dk-paper) 7%,var(--dk-ink));border:1px solid color-mix(in srgb,var(--dk-paper) 14%,transparent);color:var(--dk-paper);position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.desk-plan:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dk-paper) 30%,transparent)}
.desk-plan.featured{border-color:var(--dk-accent);box-shadow:0 0 0 1px var(--dk-accent),0 24px 60px color-mix(in srgb,var(--dk-ink) 50%,transparent)}
.desk-plan .tag{position:absolute;top:-12px;left:24px;padding:5px 12px;border-radius:999px;background:var(--dk-accent);color:var(--on-accent,#fff);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.desk-plan h3{margin:0;font-size:1.3rem;color:var(--dk-paper);text-shadow:none}
.desk-plan .price{font-family:var(--dk-name-font);font-weight:var(--dk-name-weight);font-size:2.4rem;line-height:1;color:var(--dk-paper)}
.desk-plan .price small{font-family:var(--body-font,inherit);font-weight:400;font-size:.95rem;color:var(--dk-plate-muted);margin-left:6px}
.desk-plan .note{margin:0;color:var(--dk-plate-muted);line-height:1.5}
.desk-plan ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.desk-plan li{padding-left:24px;position:relative;line-height:1.4}
.desk-plan li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--dk-accent);border-bottom:2px solid var(--dk-accent);transform:rotate(-45deg)}
.desk-plan .desk-hero-btn{text-align:center;margin-top:8px}
.desk-plan:not(.featured) .desk-hero-btn{background:transparent;border:2px solid color-mix(in srgb,var(--dk-paper) 40%,transparent);color:var(--dk-paper)}

/* ---- video: Cult UI youtube-video-player. A poster with a play button; YouTube loads only when it is pressed. ---- */
.desk-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;max-width:1000px}
.desk-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.desk-video:hover img{transform:scale(1.03)}
.desk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.desk-video button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.desk-video button span{width:84px;height:84px;border-radius:50%;background:var(--dk-accent);display:grid;place-items:center;box-shadow:0 10px 40px color-mix(in srgb,var(--dk-ink) 60%,transparent);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.desk-video button:hover span{transform:scale(1.08)}
.desk-video button span::before{content:"";width:0;height:0;border-left:26px solid var(--on-accent,#fff);border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.desk-video-text{margin:16px 0 0;color:var(--dk-plate-muted);line-height:1.5;max-width:60ch}

/* ---- poll: Cult UI choice-poll. One question, the options as buttons; after a vote, the bars with the share. ---- */
.desk-poll{max-width:680px;padding:28px;border-radius:16px;background:color-mix(in srgb,var(--dk-paper) 7%,var(--dk-ink));border:1px solid color-mix(in srgb,var(--dk-paper) 14%,transparent)}
.desk-poll h3{margin:0 0 6px;font-size:1.4rem;color:var(--dk-paper);text-shadow:none}
.desk-poll .desk-poll-text{margin:0 0 18px;color:var(--dk-plate-muted);line-height:1.5}
.desk-poll-opts{display:flex;flex-direction:column;gap:10px}
.desk-poll-opt{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:10px;border:1px solid color-mix(in srgb,var(--dk-paper) 22%,transparent);background:transparent;color:var(--dk-paper);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.desk-poll-opt:hover{border-color:var(--dk-accent)}
.desk-poll-opt .bar{position:absolute;inset:0;width:calc(var(--w,0) * 1%);background:color-mix(in srgb,var(--dk-accent) 28%,transparent);transition:width .8s cubic-bezier(.16,1,.3,1);z-index:0}
.desk-poll-opt span{position:relative;z-index:1}
.desk-poll-opt .pct{font-family:var(--dk-name-font);font-weight:var(--dk-name-weight);font-size:1.05rem;color:var(--dk-paper);opacity:0;transition:opacity .4s}
.desk-poll.voted .desk-poll-opt{cursor:default}
.desk-poll.voted .desk-poll-opt .pct{opacity:1}
.desk-poll.voted .desk-poll-opt.mine{border-color:var(--dk-accent)}
.desk-poll-foot{margin:14px 0 0;font-size:.85rem;color:var(--dk-plate-muted)}

/* ---- partners: Aceternity infinite-moving-cards. A slow strip of names or logos, doubled for a seamless loop. ---- */
.desk-partners{flex:0 0 auto;margin:96px -14px 0;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.desk-partners[hidden]{display:none}
.desk-partners > .desk-in{padding-top:0}
.desk-partners.still > .desk-in .desk-h2{margin-bottom:24px}
.desk-partners-track{display:flex;gap:16px;width:max-content;animation:desk-partners 40s linear infinite}
.desk-partners.still{mask:none;-webkit-mask:none}
.desk-partners.still .desk-partners-track{animation:none;width:auto;flex-wrap:wrap;justify-content:flex-start;max-width:1156px;margin:0 auto;padding:0}   /* left, under its heading (critic 3) */
@media(max-width:999px){.desk-partners.still .desk-partners-track{padding:0 14px}.desk-partners .desk-h2{padding-inline:14px}}   /* the band is full bleed; its heading and cards keep the page gutter */
.desk-partners.still .desk-partner{white-space:normal;flex-direction:column;align-items:flex-start;gap:2px}
.desk-partners:hover .desk-partners-track{animation-play-state:paused}
.desk-partner{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:12px;background:color-mix(in srgb,var(--dk-paper) 7%,var(--dk-ink));border:1px solid color-mix(in srgb,var(--dk-paper) 14%,transparent);color:var(--dk-paper);font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.05rem;white-space:nowrap}
.desk-partner img{height:36px;width:auto;max-width:140px;object-fit:contain}
.desk-partner small{font-weight:400;color:var(--dk-plate-muted);font-size:.85rem}
@keyframes desk-partners{to{transform:translateX(-50%)}}

/* ---- banner: Aceternity sticky-banner. One line at the top of every page, inside the masthead so it sticks with it. ---- */
.desk-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 48px 9px 16px;background:var(--hs-accent,var(--dk-accent));color:var(--on-accent,#fff);font-size:.92rem;line-height:1.35;position:relative;text-align:center}
.desk-banner a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.desk-banner button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:color-mix(in srgb,var(--dk-ink) 18%,transparent);color:inherit;font-size:1.2rem;line-height:1;cursor:pointer}
.desk-banner[hidden]{display:none}

/* ---- quick message: Cult UI popover-form. A round button at the bottom right of every page; it opens a small form. ---- */
.desk-quick{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;border:0;background:var(--hs-accent,var(--dk-accent));color:var(--on-accent,#fff);font-family:var(--head-font);font-weight:var(--head-weight);font-size:1rem;cursor:pointer;box-shadow:0 12px 36px color-mix(in srgb,var(--hs-ink,var(--dk-ink)) 50%,transparent);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.desk-quick:hover{transform:translateY(-2px)}
.desk-quick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.home .desk-quick{bottom:88px}   /* above the phone book bar on the home */
@media(min-width:1000px){body.home .desk-quick{bottom:24px}}
.desk-quick-form .field:last-of-type{margin-bottom:4px}
.desk-quick-done{display:flex;gap:12px;align-items:center;padding:8px 0}
.desk-quick-done .tick{width:34px;height:34px;border-radius:50%;background:var(--good,#1f9d55);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}

/* ---- wizard: Cult UI wizard-expandable. The form asks one question at a time with Back and Next and a thin progress
   bar; the last screen holds the consent line, the bot check and the send button. ---- */
.book-form.wiz > .field:not(.wiz-on):not(.hp),.book-form.wiz > #orderFields > .field:not(.wiz-on),.book-form.wiz > #contactFields > .field:not(.wiz-on),.book-form.wiz > .book-step:not(.wiz-on){display:none}
.book-form.wiz > .consent,.book-form.wiz > .big-cta,.book-form.wiz > .bot-check{display:none}
.book-form.wiz.wiz-last > .consent,.book-form.wiz.wiz-last > .big-cta,.book-form.wiz.wiz-last > .bot-check{display:block}
.book-form.wiz.wiz-last > .big-cta,.book-form.wiz .wiz-nav > .big-cta:not([hidden]){display:inline-flex}
.wiz-bar{height:4px;border-radius:2px;background:var(--line);margin:0 0 18px;overflow:hidden}
.wiz-bar i{display:block;height:100%;width:calc(var(--p,0) * 1%);background:var(--accent);transition:width .4s cubic-bezier(.16,1,.3,1)}
.wiz-count{font-size:.8rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.wiz-nav{display:flex;gap:10px;margin:14px 0 6px}
.wiz-nav .btn{flex:1 1 auto;justify-content:center;padding:13px 16px;font-size:1rem;width:auto;max-width:none;margin:0}
.wiz-nav .btn[data-wiz="-1"]{flex:0 0 auto;padding-left:22px;padding-right:22px}
.wiz-nav .btn[hidden]{display:none}
.book-form.wiz .field.wiz-on + .field.wiz-on{animation-delay:.05s}
.book-form.wiz .field.wiz-on{animation:wiz-in .35s cubic-bezier(.16,1,.3,1) both}
.book-form.wiz .field.wiz-on input,.book-form.wiz .field.wiz-on select,.book-form.wiz .field.wiz-on textarea{font-size:1.05rem;padding:14px}
@keyframes wiz-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ---- the photo field: Aceternity file-upload. A drop zone that shows the picture once it is picked. ---- */
.field-photo .drop{display:block;position:relative;border:2px dashed var(--line);border-radius:12px;padding:0;cursor:pointer;background:var(--panel-2);overflow:hidden;transition:border-color .2s,background .2s;text-transform:none;letter-spacing:0}
.field-photo .drop:hover,.field-photo .drop.over{border-color:var(--accent)}
.field-photo .drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.field-photo .drop-in{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;text-align:center;color:var(--text)}
.field-photo .drop-in b{font-size:1rem}
.field-photo .drop-in small{color:var(--muted);font-size:.82rem}
.field-photo .drop-in::before{content:"";width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;margin-bottom:6px}
.field-photo .drop-prev{display:block;width:100%;max-height:280px;object-fit:cover}
.field-photo .drop.has .drop-in{display:none}
.field-photo .drop-change{position:absolute;right:10px;bottom:10px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;pointer-events:none}
.field-photo .drop:not(.has) .drop-change{display:none}

.req-photo{display:block;margin:8px 0 4px}
.req-photo img{max-height:120px;max-width:200px;border-radius:8px;display:block}

/* ---- the sending state: Aceternity stateful-button. The send button shows a spinner and "Sending" while it waits. ---- */
.btn.sending{position:relative;color:transparent!important;pointer-events:none}
.btn.sending::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--on-accent,#fff) 35%,transparent);border-top-color:var(--on-accent,#fff);animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---- wide screens ---- */
@media(min-width:1000px){
  .desk-reviews{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
  /* reviews with no photos: one big quote in the middle of the width, the heading and the arrows with it (critic 2) */
  .desk-reviews.no-photos{grid-template-columns:minmax(0,1fr);max-width:920px;margin:0 auto;text-align:center}
  #secReviews:has(.no-photos) > .desk-h2{text-align:center}
  .desk-reviews.no-photos .desk-rev-quote{font-size:clamp(1.5rem,2.4vw,2.1rem)}
  .desk-reviews.no-photos .desk-rev-nav{justify-content:center}
  /* the poll: the question on the left, the options on the right */
  .desk-poll{max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:40px}
  .desk-poll h3{font-size:1.9rem}
  /* a timeline of five or fewer runs across the width */
  .desk-timeline:not(:has(> :nth-child(6))){max-width:none;padding-left:0;padding-top:40px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:32px}
  .desk-timeline:not(:has(> :nth-child(6)))::before{left:0;right:0;top:9px;bottom:auto;width:auto;height:2px}
  .desk-timeline:not(:has(> :nth-child(6))) .desk-tl-item{padding:0}
  .desk-timeline:not(:has(> :nth-child(6))) .desk-tl-item::before{left:0;top:-40px}
  .desk-count-side{text-align:right}
  .desk-compare{grid-template-columns:minmax(0,1fr);max-width:1000px}
  .desk-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .desk-stats:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .desk-count-in{grid-template-columns:minmax(0,1fr) auto}
  .desk-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
  .desk-plans:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .desk-plans:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
  .desk-plan.featured{transform:translateY(-8px)}
  .desk-plan.featured:hover{transform:translateY(-12px)}
}
@media(max-width:999px){
  .desk-stats-band,.desk-count-band,.desk-partners{margin-top:64px}
  .desk-stats-band .desk-in{padding-left:20px;padding-right:20px}
  .desk-partners.still .desk-partner{width:100%}   /* cards stack with one left edge (critic 2) */
  .desk-count small{letter-spacing:.04em;font-size:.68rem}
  .desk-stats > :last-child:nth-child(odd){grid-column:1/-1}   /* an odd last number takes the row, no empty cell beside it */   /* the band runs to the screen edge; its words don't (critic 1) */
  .desk-quick{padding:16px;right:14px;bottom:14px}
  .desk-quick span{display:none}   /* a round icon on a phone, so it never covers the footer's last line */
  body.home .desk-quick{bottom:84px;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s,transform .3s}
  body.home:has(#deskBar.show) .desk-quick{opacity:1;pointer-events:auto;transform:none}   /* hidden on the first screen, where it sat on the hero's buttons (critic 3) */
  .desk-banner{font-size:.85rem;padding:8px 44px 8px 12px;gap:8px}
  .desk-stats-band{padding:48px 0}
  .desk-count-band .desk-in{padding:48px 20px}
  .desk-count div{min-width:0;flex:1 1 0}
  .desk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desk-plan{padding:22px 20px}
  .desk-rev-photos{max-width:260px}
  .desk-rev-text{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .desk-rev-item.on,.desk-rev-quote .w,.desk-partners-track,.book-form.wiz .field.wiz-on,.btn.sending::after{animation:none}
  .desk-rev-photos img,.desk-plan,.desk-poll-opt .bar,.wiz-bar i{transition:none}
}

/* the page end clears the message button */
body:not(.home):has(.desk-quick) .page{padding-bottom:72px}   /* an inner page's last line clears the button; the home already ends with room for its book bar (critic 2) */

/* a two button hours card on a narrow phone: the buttons stack, so a long label never fills its pill edge to edge (critic 3) */
@media(max-width:400px){.desk-hours-cta .desk-hero-btns{grid-template-columns:1fr}}   /* the phone row is a two column grid (desktop.css): one column on a narrow phone */
/* the hero status line on a phone: the street on its own line, no dot leading it (critic 3) */
@media(max-width:999px){.desk-hero-where{display:block;margin-top:2px}.desk-hero-where .sep{display:none}}
/* the inner pages' intro lines up with their left aligned title (critic 3) */
html.hero-site body:not(.home) .intro{text-align:left}
/* the shrunk masthead on the hero home is solid, so the page never shows through behind the logo (critic 3) */
.desk-hero-page .desk-mast.small{background:var(--dk-ink)}