/* Biviti onboarding "Signature" (v64, owner-approved 2026-10-02). The onboarding dialog sits over the live homepage, which stays
   visible behind it, softly blurred. Left: five stars and particles that spell the explored path. Right: the welcome, name and a
   spotlight index of the five options set directly on the scene (no box), with an astrolabe behind them on wide screens. Phones and
   portrait tablets: a fixed "sky" band (logo, buttons, stars, particle words) and the welcome and options in their own scroll area.
   Behaviour: assets/js/onboarding-signature.js. Choice and preference logic is unchanged (homepage.js). */
/* D-266 (v65): muted text uses solid tokens that meet WCAG AA (4.5:1) on the onboarding's own grounds, never low opacity:
   --soft for labels and step names, --mute for inactive options, Optional and the placeholder */
#personalize.onb-sig{--ink:#1a1210;--soft:#5f534d;--mute:#6a5d56;--faint:#6a5d56;--hi:#4a0f1a;--hair:rgba(74,15,26,.2);--on-hi:#fbf6ee;
 --scrim:linear-gradient(90deg,rgba(248,243,234,0) 0%,rgba(248,243,234,.55) 38%,rgba(248,243,234,.92) 62%,rgba(248,243,234,.96) 100%);
 --haze:radial-gradient(70% 90% at 24% 50%,rgba(248,243,234,.5),rgba(244,236,224,.86) 80%);
 position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
 background:transparent;color:var(--ink);overflow:hidden;box-shadow:none;font-family:'Plus Jakarta Sans',system-ui,sans-serif;opacity:1;transform:none}
html[data-theme=dark] #personalize.onb-sig{--ink:#f6eee2;--soft:#b9ad9f;--mute:#9c9084;--faint:#9c9084;--hi:#e9cfaa;--hair:rgba(233,207,170,.2);--on-hi:#120c0d;
 --scrim:linear-gradient(90deg,rgba(7,5,6,0) 0%,rgba(7,5,6,.55) 38%,rgba(7,5,6,.9) 62%,rgba(7,5,6,.94) 100%);
 --haze:radial-gradient(70% 90% at 24% 50%,rgba(30,11,16,.45),rgba(7,5,6,.82) 80%)}
#personalize.onb-sig::backdrop{background:transparent;backdrop-filter:none}
#personalize.onb-sig:not([open]){display:none}
/* the live homepage behind: blurred and dimmed while the onboarding is open; clearer while an option is previewed */
html.onb-first body>*:not(#personalize),html.onb-open body>*:not(#personalize){filter:blur(var(--onb-blur,6px)) brightness(var(--onb-dim,.62)) saturate(.85);transition:filter 1s cubic-bezier(.22,.8,.2,1)}
html[data-theme=light].onb-first body>*:not(#personalize),html[data-theme=light].onb-open body>*:not(#personalize),html:not([data-theme]).onb-open body>*:not(#personalize){filter:blur(var(--onb-blur,6px)) saturate(.8)}
html.onb-open{overflow:hidden}
#personalize .onb-haze,#personalize .onb-scrim,#personalize .onb-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#personalize .onb-haze{background:var(--haze);transition:opacity 1s}
#personalize .onb-scrim{background:var(--scrim);transition:opacity 1s}
#personalize .personalize-surface{all:unset;display:contents}
#personalize .onb-sr,#personalize .need-preview{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important}
/* top: wordmark, theme and Skip */
#personalize .onb-top{position:absolute;left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);top:22px;display:flex;justify-content:space-between;align-items:center;z-index:5}
#personalize .onb-mark{height:24px;width:auto;filter:brightness(0)}
html[data-theme=dark] #personalize .onb-mark{filter:brightness(0) invert(.95) sepia(.15)}
#personalize .onb-tools{display:flex;gap:8px}
#personalize .onb-tools .theme-control{width:44px;height:44px;min-height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
#personalize .onb-tools .theme-control svg{width:18px;height:18px;fill:none;stroke:currentColor}
#personalize .onb-skip{white-space:nowrap;min-height:44px;padding:0 4px 0 18px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--ink);font:500 14px 'Plus Jakarta Sans',sans-serif;display:inline-flex;gap:10px;align-items:center;cursor:pointer}
#personalize .onb-skip span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair)}
#personalize .onb-tools .theme-control:hover,#personalize .onb-skip:hover{border-color:var(--hi)}
#personalize .onb-tools :is(.theme-control,.onb-skip):focus-visible,#personalize .clear-preference:focus-visible{outline:1px solid var(--hi);outline-offset:3px;box-shadow:none}
#personalize .onb-tools :is(.theme-control,.onb-skip):focus:not(:focus-visible){outline:none;box-shadow:none}
/* the stage: type set directly on the scene */
#personalize .onb-stage{position:absolute;top:0;bottom:0;right:0;width:min(54vw,880px);padding:clamp(96px,14vh,140px) clamp(24px,4.4vw,72px) 72px clamp(24px,3vw,48px);display:flex;flex-direction:column;overflow:auto;scrollbar-width:none;z-index:3}
#personalize .onb-stage::-webkit-scrollbar{display:none}
#personalize .welcome-name{all:unset;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--hi)}
#personalize .welcome-name::before{content:"";width:34px;height:1px;background:currentColor}
#personalize #onb-title{all:unset;display:block;font-size:clamp(34px,3.5vw,60px);line-height:1;letter-spacing:-.045em;margin:16px 0 0;font-weight:800;color:var(--ink)}
#personalize .onb-l{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.16em}
#personalize .onb-l>span{display:inline-block;transform:translateY(105%);animation:onbUp 1.1s cubic-bezier(.22,.8,.2,1) forwards}
#personalize .onb-l+.onb-l>span{animation-delay:.17s}
@keyframes onbUp{to{transform:none}}
#personalize .optional-name{all:unset;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:clamp(20px,3.6vh,36px) 0 0}
#personalize .optional-name label{all:unset;font-size:15px;color:var(--soft)}
#personalize .optional-name small{all:unset;display:inline;font-size:12px;margin-left:6px;color:var(--mute)}
#personalize .onb-f{position:relative;flex:1 1 220px;min-width:0}
#personalize #first-name{all:unset;box-sizing:border-box;width:100%;height:50px;font-size:clamp(22px,1.8vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--hi);caret-color:var(--hi)}
#personalize #first-name::placeholder{color:var(--mute);opacity:1;font-weight:500}
#personalize .onb-f::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--hair)}
#personalize .onb-f::before{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:var(--hi);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.8,.2,1);z-index:1}
#personalize .onb-f:focus-within::before{transform:none}
/* D-267 (v65): an understated text link with a 44 px high hit area */
#personalize .clear-preference{all:unset;box-sizing:border-box;cursor:pointer;margin:6px 0 0;padding:0 2px;font-size:13px;font-weight:600;color:var(--hi);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}
#personalize .clear-preference[hidden]{display:none}
#personalize .need-options{all:unset;display:block}
#personalize .need-options>h3{all:unset;display:block;margin:clamp(26px,4.4vh,44px) 0 6px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
#personalize .current-preference{all:unset;display:block;font-size:14px;color:var(--hi);margin:0 0 8px}
#personalize .current-preference[hidden]{display:none}
/* the spotlight index */
#personalize .onb-idx{list-style:none;margin:0;padding:0}
#personalize .onb-item{position:relative;border-top:1px solid var(--hair);opacity:0;transform:translateY(16px);animation:onbIn .9s cubic-bezier(.22,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 800ms)}
#personalize .onb-item:last-child{border-bottom:1px solid var(--hair)}
@keyframes onbIn{to{opacity:1;transform:none}}
#personalize .onb-item [data-need]{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:10px;width:100%;min-height:clamp(58px,7.4vh,74px);padding:6px 0;color:var(--ink);text-align:left;font-size:clamp(19px,1.75vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15;cursor:pointer;transition:color .45s,opacity .45s,transform .6s cubic-bezier(.22,.8,.2,1)}
#personalize .onb-item [data-need]:focus-visible{outline:1px solid var(--hi);outline-offset:4px;border-radius:14px}
#personalize .onb-item strong{font-weight:600}
#personalize .onb-n{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--hi);font-variant-numeric:tabular-nums}
#personalize .onb-a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair);opacity:0;transform:scale(.6) rotate(-45deg);transition:.5s cubic-bezier(.22,.8,.2,1)}
/* the spotlight: the explored option takes the accent; the others step back in colour (still AA), not in opacity */
#personalize .onb-idx.has-on .onb-item:not(.is-on) [data-need]{color:var(--mute)}
#personalize .onb-item.is-on [data-need]{opacity:1;color:var(--hi);transform:translateX(10px)}
#personalize .onb-item.is-on .onb-a{opacity:1;transform:none;background:var(--hi);color:var(--on-hi);border-color:var(--hi)}
/* the saved current focus (edit mode): a filled accent mark after the label, distinct from hover, preview and keyboard focus */
#personalize .onb-item [data-need][aria-pressed=true] strong::after{content:"";display:inline-block;width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--hi);vertical-align:.12em}
#personalize .onb-streak{position:absolute;left:0;top:-1px;height:1px;width:28%;background:linear-gradient(90deg,transparent,var(--hi),transparent);opacity:0;pointer-events:none}
#personalize .onb-item.is-on .onb-streak{animation:onbStreak 1.4s cubic-bezier(.22,.8,.2,1) both}
@keyframes onbStreak{0%{transform:translateX(0);opacity:0}20%,80%{opacity:1}100%{transform:translateX(257%);opacity:0}}
#personalize .onb-path{height:0;overflow:hidden;transition:height .6s cubic-bezier(.22,.8,.2,1)}
#personalize .onb-path svg{display:block;max-width:100%;height:auto;overflow:visible}
#personalize .onb-path .base{stroke:var(--hair);stroke-width:1;fill:none}
#personalize .onb-path .draw{stroke:var(--hi);stroke-width:1.4;fill:none;animation:onbDraw 1.1s cubic-bezier(.22,.8,.2,1) .1s forwards}
@keyframes onbDraw{to{stroke-dashoffset:0}}
#personalize .onb-path circle{stroke:none;fill:var(--hi);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);animation:onbPop .5s cubic-bezier(.22,.8,.2,1) forwards;animation-delay:calc(var(--k)*140ms + 200ms)}
#personalize .onb-path circle.glow{animation:onbGlow 2.6s ease-in-out infinite;animation-delay:calc(var(--k)*140ms + 600ms)}
#personalize .onb-path text{font:600 12px 'Plus Jakarta Sans',sans-serif;fill:var(--soft);stroke:none;opacity:0;animation:onbPop .5s cubic-bezier(.22,.8,.2,1) forwards;animation-delay:calc(var(--k)*140ms + 300ms)}
@keyframes onbPop{to{opacity:1;transform:none}}
@keyframes onbGlow{0%,100%{opacity:.08;transform:scale(1)}50%{opacity:.22;transform:scale(1.6)}}
#personalize .onb-steps{list-style:none;margin:2px 0 16px 34px;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
#personalize .onb-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--soft);opacity:0;transform:translateY(6px);animation:onbPop .45s cubic-bezier(.22,.8,.2,1) forwards;animation-delay:calc(var(--k)*90ms + 150ms)}
#personalize .onb-steps li i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--hi)}
#personalize .onb-steps li:first-child i{background:var(--hi)}
#personalize .onb-cap{position:absolute;margin:0;color:var(--ink);font-size:clamp(22px,2.2vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1;z-index:2}
/* the astrolabe behind the words (wide screens) */
#personalize .onb-astro{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;opacity:0;animation:onbAstro 2.2s cubic-bezier(.22,.8,.2,1) .3s forwards;z-index:1}
@keyframes onbAstro{to{opacity:1}}
#personalize .onb-astro .ring{fill:none;stroke:var(--hi);stroke-width:1;opacity:.16}
#personalize .onb-astro .ring.d{stroke-dasharray:2 7;opacity:.26}
#personalize .onb-astro .ticks line{stroke:var(--hi);stroke-width:1;opacity:.2}
#personalize .onb-astro .ticks line.l{opacity:.38}
#personalize .onb-astro .spin{transform-origin:0 0;animation:onbSpin 120s linear infinite}
#personalize .onb-astro .spin2{transform-origin:0 0;animation:onbSpin 60s linear infinite reverse}
#personalize .onb-astro .orbiter{transform-origin:0 0;animation:onbSpin 26s linear infinite}
#personalize .onb-astro .orbiter circle,#personalize .onb-astro .bear circle,#personalize .onb-astro .needle circle.tip{fill:var(--hi)}
#personalize .onb-astro .bear circle{opacity:.32;transition:opacity .5s}
#personalize .onb-astro .bear.on circle{opacity:1}
#personalize .onb-astro .needle{transform-origin:0 0;transition:transform 1.4s cubic-bezier(.22,.8,.2,1);opacity:0}
#personalize .onb-astro.has-on .needle{opacity:1}
#personalize .onb-astro .needle line{stroke:var(--hi);stroke-width:1;opacity:.55}
#personalize .onb-astro .needle circle.ring{fill:none;stroke:var(--hi);opacity:.6}
@keyframes onbSpin{to{transform:rotate(360deg)}}
/* leaving: the words step aside while the particles scatter */
#personalize.is-leaving .onb-stage>*,#personalize.is-leaving .onb-top{opacity:0;transform:translateX(30px);transition:opacity .45s,transform .7s cubic-bezier(.22,.8,.2,1)}
#personalize.is-leaving :is(.onb-haze,.onb-scrim,.onb-astro,.onb-cap){opacity:0!important;transition:opacity .6s;animation:none}
@media (max-width:900px){
 #personalize.onb-sig{--sky:max(210px,27svh);--scrim:linear-gradient(180deg,rgba(248,243,234,0) 0%,rgba(248,243,234,.3) calc(var(--sky) - 60px),rgba(248,243,234,.97) var(--sky))}
 html[data-theme=dark] #personalize.onb-sig{--scrim:linear-gradient(180deg,rgba(7,5,6,0) 0%,rgba(7,5,6,.25) calc(var(--sky) - 60px),rgba(7,5,6,.96) var(--sky))}
 #personalize .onb-astro,#personalize .onb-cap{display:none}
 #personalize .onb-stage{top:var(--sky);left:0;right:0;width:auto;padding:20px 16px 48px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
 #personalize .welcome-name{font-size:11px;letter-spacing:.24em}
 #personalize #onb-title{font-size:clamp(28px,8vw,40px);margin-top:12px}
 #personalize .optional-name{margin-top:18px;gap:8px 12px}
 #personalize #first-name{font-size:20px;height:44px}
 #personalize .optional-name label{font-size:13.5px}
 #personalize .need-options>h3{margin:24px 0 4px;font-size:12px}
 #personalize .onb-item [data-need]{font-size:17px;grid-template-columns:34px 1fr 40px;min-height:60px}
 #personalize .onb-a{width:38px;height:38px}
 #personalize .onb-item.is-on [data-need]{transform:none}
 #personalize .onb-top{top:12px;left:16px;right:12px}
}
@media (prefers-reduced-motion:reduce){
 #personalize .onb-l>span{transform:none;animation:none}
 #personalize .onb-item{opacity:1;transform:none;animation:none}
 #personalize .onb-item.is-on .onb-streak{animation:none}
 #personalize .onb-path .draw{animation:none;stroke-dashoffset:0}
 #personalize .onb-path circle,#personalize .onb-path text,#personalize .onb-steps li{animation:none;opacity:1;transform:none}
 #personalize .onb-path circle.glow{opacity:.12}
 #personalize .onb-astro{animation:none;opacity:1}
 #personalize .onb-astro :is(.spin,.spin2,.orbiter){animation:none}
 html.onb-first body>*:not(#personalize),html.onb-open body>*:not(#personalize){transition:none}
}