/* Signature extras (18 Oct 2026): language flags, the introductory-price badge and a softer, greener accent. */
body.signature:not(.light){--lime:#a8dd6a;--accent:#a8dd6a}
.flags{display:inline-flex;gap:8px;align-items:center}
.flag{display:inline-grid;place-items:center;width:34px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;opacity:.55;transition:opacity .2s}
.flag svg{width:24px;height:15px;border-radius:2px;display:block}
.flag:hover{opacity:.9}
.flag[aria-pressed="true"]{opacity:1;border-color:var(--accent)}
.intro-badge{display:inline-block;margin:18px 0 0;padding:6px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.website-price .big-price{margin-top:10px}
.next-price{margin:2px 0 6px;font-size:14px;color:var(--muted)}
.next-price b{color:var(--ink);font-weight:600}
/* "0 % booking commission" is the key promise: a glowing green pill that gently breathes. */
.promise-key{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:700;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent),0 0 36px color-mix(in srgb,var(--accent) 18%,transparent);animation:promise-breathe 3.2s ease-in-out infinite}
@keyframes promise-breathe{0%,100%{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent),0 0 26px color-mix(in srgb,var(--accent) 12%,transparent)}50%{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent),0 0 46px color-mix(in srgb,var(--accent) 25%,transparent)}}
@media(prefers-reduced-motion:reduce){.promise-key{animation:none}}
/* The "0 % commission" badge: the translated number keeps its big size, and the badge glows and breathes. */
.booking-zero b span{font-size:inherit;letter-spacing:inherit}
.signature .booking-zero{width:150px;height:150px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),0 0 34px color-mix(in srgb,var(--accent) 55%,transparent);animation:zero-breathe 3.2s ease-in-out infinite}
.signature .booking-zero b{font-size:58px;font-weight:700;letter-spacing:-3px}
.signature .booking-zero>span{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
@keyframes zero-breathe{0%,100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 0 24px color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 26%,transparent),0 0 50px color-mix(in srgb,var(--accent) 70%,transparent)}}
@media(max-width:700px){.signature .booking-zero{width:112px;height:112px}.signature .booking-zero b{font-size:42px}.signature .booking-zero>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.signature .booking-zero{animation:none}}
/* Price cards: let the glow show on every side (the grid used to clip it) and follow the outer rounded corners. */
.signature .pricing-grid{overflow:visible}
.signature .website-price{border-radius:12px 0 0 12px}
.signature .booking-price{border-radius:0 12px 12px 0}
@media(max-width:600px){.signature .website-price{border-radius:12px 12px 0 0}.signature .booking-price{border-radius:0 0 12px 12px}}
/* Floating green motes over the moose (signature-dust.js), faded at the edges like the moose viewport. */
.moose-dust{position:absolute;inset:0 0 49px;width:100%;height:calc(100% - 49px);pointer-events:none;z-index:3;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 95%,transparent)}
@media(max-width:600px){.moose-dust{inset:0 0 47px;height:calc(100% - 47px)}}
/* Account login in the header (icon + text; icon only on small screens) and invisible jump targets for old links. */
.header-login{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:8px 10px;border-radius:999px;white-space:nowrap}
.header-login svg{width:18px;height:18px;color:var(--accent)}
.header-login:hover{color:var(--accent)}
@media(max-width:1100px){.header-login span{display:none}.header-login{padding:8px}}
.anchor-alias{display:block;position:relative;top:-20px;height:0;overflow:hidden}
/* Process steps as rounded cards, the same shape as the FAQ cards, so their glow follows the corners. */
.signature .steps{gap:18px}
.signature .steps article{border:1px solid var(--line);border-radius:12px;padding:26px 28px 30px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.signature .steps h3{margin:18px 0 12px}
/* Very small phones: the login stays in the menu (it is listed there), flags shrink a little so the header fits. */
@media(max-width:420px){.header-login{display:none}.flags{gap:5px}.flag{width:30px;height:22px}.flag svg{width:20px;height:13px}}
.header-login{margin-right:6px}
/* Light mode: the moose sits in a rounded window (signature-3d.css), so the motes are clipped to the same shape. */
.light .moose-dust{border-radius:140px 8px 8px 140px;-webkit-mask-image:none;mask-image:none}
@media(max-width:600px){.light .moose-dust{border-radius:0}}
/* "Say hello to the moose" is not used (the move was too subtle to notice): controls are load, pause, hello. */
.moose-controls button:nth-of-type(3){display:none!important}
/* Promise bar: the items light up one after another from left to right, then rest (a wave, every 5 s). */
.signature .promise-bar p>*{animation:promise-wave 5s ease-in-out infinite}
.signature .promise-bar p>:nth-child(1){animation-delay:0s}
.signature .promise-bar p>:nth-child(2){animation-delay:.3s}
.signature .promise-bar p>:nth-child(3){animation:promise-breathe 3.2s ease-in-out infinite,promise-wave 5s ease-in-out .6s infinite}
.signature .promise-bar p>:nth-child(4){animation-delay:.9s}
.signature .promise-bar p>:nth-child(5){animation-delay:1.2s}
@keyframes promise-wave{0%,26%,100%{text-shadow:none;filter:none}9%{color:var(--accent);text-shadow:0 0 8px var(--accent),0 0 20px color-mix(in srgb,var(--accent) 70%,transparent),0 0 38px color-mix(in srgb,var(--accent) 35%,transparent);filter:brightness(1.25)}}
.signature .promise-bar p>:nth-child(odd):not(.promise-key){transition:color .3s}
@media(prefers-reduced-motion:reduce){.signature .promise-bar p>*{animation:none!important}}
/* Price list download: a clear outlined button above the price cards. */
.price-download{display:inline-flex;align-items:center;gap:10px;margin:-6px 0 26px;padding:12px 18px;border:1px solid var(--accent);border-radius:999px;color:var(--ink);font-size:13px;font-weight:700}
.price-download svg{width:18px;height:18px;color:var(--accent)}
.price-download:hover{color:var(--accent)}
/* Sky behind the 3D moose (signature-dust.js): a nebula glow that shifts purple → green → silver, and soft clouds that
   drift slowly. Above the night-sky picture, below the WebGL moose. Only opacity and transform animate (GPU-composited,
   no repaints): three ready-coloured nebula layers cross-fade, and the clouds' softness is in the gradients, not a blur. */
.moose-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 82%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 82%)}
.moose-nebula{position:absolute;inset:-10%;opacity:0;will-change:opacity;animation:nebula-fade 27s ease-in-out infinite}
.neb-purple{--c:150,95,255;animation-delay:0s}
.neb-green{--c:110,230,135;animation-delay:-18s}
.neb-silver{--c:215,226,240;animation-delay:-9s}
.moose-nebula{background:radial-gradient(ellipse 45% 32% at 28% 34%,rgba(var(--c),.34),transparent 70%),radial-gradient(ellipse 35% 26% at 72% 22%,rgba(var(--c),.28),transparent 70%),radial-gradient(ellipse 30% 22% at 50% 58%,rgba(var(--c),.22),transparent 72%)}
@keyframes nebula-fade{0%,100%{opacity:1}22%,78%{opacity:0}}
.moose-clouds{position:absolute;top:4%;left:0;width:200%;height:62%;opacity:.2;will-change:transform;animation:clouds-drift 140s linear infinite;
  background:radial-gradient(ellipse 11% 16% at 8% 40%,rgba(223,231,242,.9),rgba(223,231,242,.35) 38%,transparent 72%),radial-gradient(ellipse 15% 13% at 19% 52%,rgba(201,212,227,.8),rgba(201,212,227,.3) 40%,transparent 72%),radial-gradient(ellipse 12% 11% at 33% 30%,rgba(230,237,246,.85),rgba(230,237,246,.3) 40%,transparent 72%),radial-gradient(ellipse 16% 14% at 41% 60%,rgba(203,214,228,.8),rgba(203,214,228,.3) 40%,transparent 72%),
             radial-gradient(ellipse 11% 16% at 58% 40%,rgba(223,231,242,.9),rgba(223,231,242,.35) 38%,transparent 72%),radial-gradient(ellipse 15% 13% at 69% 52%,rgba(201,212,227,.8),rgba(201,212,227,.3) 40%,transparent 72%),radial-gradient(ellipse 12% 11% at 83% 30%,rgba(230,237,246,.85),rgba(230,237,246,.3) 40%,transparent 72%),radial-gradient(ellipse 16% 14% at 91% 60%,rgba(203,214,228,.8),rgba(203,214,228,.3) 40%,transparent 72%)}
.moose-clouds-far{top:0;height:45%;opacity:.12;animation-duration:220s;animation-direction:reverse}
@keyframes clouds-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.sky-paused .moose-nebula,.sky-paused .moose-clouds{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.moose-nebula,.moose-clouds{animation:none}.neb-purple{opacity:1}}
/* Falling stars canvas (behind the moose, inside the sky layer). */
.moose-stars{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Example concepts: two equal cards side by side (same width, same height, tops aligned) instead of the staggered layout. */
.signature .work-massage{margin-top:0}
@media(min-width:801px){.signature .work-grid{grid-template-columns:1fr 1fr}.signature .work-visual,.signature .work-massage .work-visual{height:390px}}
/* Link arrows on the concept and service cards: a quiet outlined circle like the other buttons, green when the card is hovered. */
.signature .work-label>span[aria-hidden],.signature .service-top>span[aria-hidden]{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:14px;line-height:1;color:var(--muted);transition:color .25s,border-color .25s,background-color .25s,transform .25s}
.signature .service-top>span[aria-hidden]{width:32px;height:32px;font-size:13px}
.signature .work-card:hover .work-label>span[aria-hidden],.signature .work-card:focus-visible .work-label>span[aria-hidden],.signature .service-card:hover .service-top>span[aria-hidden],.signature .service-card:focus-visible .service-top>span[aria-hidden]{color:var(--accent);border-color:var(--accent);background-color:color-mix(in srgb,var(--accent) 10%,transparent);transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.signature .work-label>span[aria-hidden],.signature .service-top>span[aria-hidden]{transition:none}}
/* Booking section: how the website, the customer's email and the owner's app fit together. */
.signature .booking-story>p.flow-title{margin:30px 0 4px;font-size:10px;font-weight:700;letter-spacing:2.1px;line-height:1.6;text-transform:uppercase;color:var(--muted)}
.signature .booking-flow{list-style:none;counter-reset:flow;margin:0;padding:0;max-width:430px;font-size:13px;line-height:1.6}
.signature .booking-flow li{counter-increment:flow;position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--line)}
.signature .booking-flow li:before{content:counter(flow);position:absolute;left:0;top:11px;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--accent);border-radius:50%;font-size:11px;font-weight:700;color:var(--accent)}
.signature .booking-flow b{font-weight:700;color:var(--ink)}
.signature .booking-flow+.simple-list{margin-top:6px}
.signature .v2-app-link{margin-bottom:12px}