/* ---- Maxy · original layout (background art + white card at the bottom) in the new light colors ---- */
:root{--mx-blue:#3D74FF;--mx-blue2:#2556E0;--mx-ink:#101631;--mx-muted:#5F6784;--mx-box:#F1F4F9;--mx-line:#E4E8EF;--mx-page:#EEF2FA}
html,body{background:var(--mx-page)!important}
body{font-family:Heebo,Rubik,sans-serif}
.container{background:transparent!important}
/* page: soft blue-gray with a blue glow at the bottom (the chosen "bg 2" floor) */
.wrapper,.wrapper.block-white{background:radial-gradient(120% 60% at 50% 100%,rgba(61,116,255,.20),rgba(61,116,255,0) 70%),var(--mx-page)!important;background-image:radial-gradient(120% 60% at 50% 100%,rgba(61,116,255,.20),rgba(61,116,255,0) 70%)!important}
.wrapper.block-white,.wrapper.price-super{background:#fff!important;background-image:none!important}
/* the background art: the glass Maxy star where the original stripe mark sat */
.wrapper::before{content:"";position:absolute;z-index:0;pointer-events:none;top:96rem;left:50%;width:270rem;height:348rem;transform:translateX(-50%) rotate(-8deg);
  background:linear-gradient(115deg,rgba(255,255,255,.7) 0 16%,rgba(255,255,255,0) 38%),linear-gradient(160deg,#C9D8FF 0%,#6F97FF 30%,#3D74FF 55%,#6B5BFF 100%);
  -webkit-mask:url(../shared/brand/maxy-icon-blue.svg) center/contain no-repeat;mask:url(../shared/brand/maxy-icon-blue.svg) center/contain no-repeat;opacity:.9}
.wrapper.block-white::before,.wrapper.price-super::before,.wrapper.block-home::before,.wrapper.block-ai::before{display:none}
@media screen and (min-width:500px){.wrapper::before{top:50%;width:520rem;height:670rem;transform:translate(-50%,-50%) rotate(-8deg);opacity:.6}}
.block{position:relative;z-index:1}
.header{z-index:2}
/* header: blue logo, light progress segments, round back chip */
.maxy-logo img{content:url(../shared/brand/maxy-full-blue.svg)}
.header .line-item{background:#DCE3F0!important}
.header .line-item i{background:var(--mx-blue)!important}
.header-top .back{width:36rem;height:36rem;border-radius:50%;background:#fff;border:1px solid var(--mx-line);display:flex;align-items:center;justify-content:center}
.header-top .back svg{display:none!important}
.header-top .back::before{content:"";width:14rem;height:14rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23101631' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* the white card keeps its place and shape, with a soft shadow on the light page */
.wrapper .block{box-shadow:0 12rem 40rem rgba(16,22,49,.08),0 1rem 3rem rgba(16,22,49,.04)}
h1,p.text{font-family:Heebo,Rubik,sans-serif!important}
h1{color:var(--mx-ink)!important;font-weight:800!important}
p.text{color:var(--mx-muted)!important}
/* answers: same rows and circles as the original, in Maxy blue */
.radio,.radio span,.radio .zf-radio-p{font-family:Heebo,Rubik,sans-serif!important;color:var(--mx-ink)}
.radio.active .radioIcon{background:var(--mx-blue)!important;border-color:var(--mx-blue)!important}
.radio .zf-radio-p b{background:var(--mx-blue)!important}
.stage-wrapper label{border:1.5px solid var(--mx-line)!important;transition:border-color .15s,background .15s}
.stage-wrapper label.active{border-color:var(--mx-blue)!important;background:#EDF1FF}
label.checkbox.active .checkboxIcon{background:var(--mx-blue)!important;border-color:var(--mx-blue)!important}
.emojiRadio label.active .emojiRadio-item,.emojiRadio-item.active{border-color:var(--mx-blue)!important;background:#EDF1FF!important}
/* button: original pill, Maxy blue */
.btn,.btn.my-button{background:var(--mx-blue)!important;color:#fff!important;font-family:Heebo,sans-serif!important;box-shadow:0 8rem 22rem rgba(61,116,255,.28)}
.btn:hover{background:var(--mx-blue2)!important}
.btn svg path{fill:#fff!important}
.btn.disable{background:#DCE3F0!important;color:#8B93AD!important;box-shadow:none}
.btn.disable svg path{fill:#8B93AD!important}
/* hint note under an answer */
.typing-block{display:flex;align-items:center;gap:10rem;padding:12rem 14rem;background:#EEF3FF!important;border:1px solid #D6E2FF!important;border-radius:12rem}
.typing-block::before{content:"";flex:none;width:20rem;height:20rem;background:url(../shared/brand/maxy-icon-blue.svg) center/contain no-repeat}
.typing-block span{font:500 14rem/1.4 Heebo,sans-serif!important;color:var(--mx-ink)!important}
/* opening screen + "preparing your profile" screen: light */
.HomeLoader_homeLoader__xQNW4,.HomeLoader_homeLoader__xQNW4:before{background:var(--mx-page)!important}
.maxy-loader-logo{content:url(../shared/brand/maxy-full-blue.svg)}
.HomeLoader_homeLoaderTitle__\+BcCO h1{color:var(--mx-ink)!important}
.HomeLoader_homeLoaderBadge__jqYkr svg [fill="#fff"]{fill:var(--mx-ink)}
.HomeLoader_progressLabel__N\+ck5,.HomeLoader_progressPercentage__98KzU{color:var(--mx-muted)!important}
.HomeLoader_progressBarContainer__D0Yz-{background:#DCE3F0!important}
.HomeLoader_progressBarFill__xTzvj{background:var(--mx-blue)!important}
.block-ai{background:var(--mx-page)!important}
.block-ai:after{background:linear-gradient(-180deg,rgba(238,242,250,0),var(--mx-page) 27%)!important}
.ai-text > p{color:rgba(16,22,49,.12)!important}
.ai-type p,.ai-loader-top strong,.ai-loader-top span{color:var(--mx-ink)!important}
.ai-top-line{background:#DCE3F0!important}.ai-top-line span{background:var(--mx-blue)!important}
/* background art v2: Rispo-style halftone, the Maxy star blown up, cut by the corner and blurred into dots */
.wrapper::before{top:0!important;left:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;
  -webkit-mask:none!important;mask:none!important;background:url(halftone.png?v=2) left top/min(118vw,760px) auto no-repeat!important}
@media screen and (min-width:500px){.wrapper::before{background:url(halftone.png?v=2) left top/min(80vw,1100px) auto no-repeat!important;opacity:.85!important}}
/* keep the dots clear of the logo + progress bar: start them under the header */
.wrapper::before{background-position:left -30px top 96px!important;background-size:165vw auto!important}
@media screen and (min-width:500px){.wrapper::before{background-position:left top 70px!important;background-size:min(80vw,1100px) auto!important}}
.wrapper::before{opacity:.8!important}

/* ================= backgrounds v3: no star, Rispo-footer vocabulary (dot grids, rising glows, thin frames with corner marks) ================= */
html,body,.wrapper,.wrapper.block-white{background-color:#fff!important}
.wrapper:not(.block-white):not(.price-super){background-image:none!important}
.wrapper::before{inset:0!important;width:auto!important;height:auto!important;top:0!important;left:0!important;transform:none!important;opacity:1!important;-webkit-mask:none!important;mask:none!important;background:none!important}
/* thin frame with square corner marks around the art area (hidden on price / loaders) */
.wrapper:not(.block-white):not(.price-super):not(.block-home):not(.block-ai)::after{content:"";position:absolute;z-index:0;pointer-events:none;top:96rem;left:14rem;right:14rem;bottom:14rem;border:1px solid rgba(61,116,255,.18);border-radius:4rem;
  background:linear-gradient(#3D74FF,#3D74FF) left -4rem top -4rem/7rem 7rem no-repeat,linear-gradient(#3D74FF,#3D74FF) right -4rem top -4rem/7rem 7rem no-repeat,linear-gradient(#3D74FF,#3D74FF) left -4rem bottom -4rem/7rem 7rem no-repeat,linear-gradient(#3D74FF,#3D74FF) right -4rem bottom -4rem/7rem 7rem no-repeat;
  background-origin:border-box;opacity:.9}

/* 1 · Rispo glow: faint dot grid + strong blue light rising from the bottom */
html.bg-1 .wrapper::before{background:
  radial-gradient(110% 42% at 50% 72%,rgba(61,116,255,.95) 0%,rgba(61,116,255,.55) 30%,rgba(111,151,255,.18) 58%,rgba(255,255,255,0) 78%),
  radial-gradient(circle,rgba(61,116,255,.22) 1.1rem,transparent 1.6rem) 0 0/18rem 18rem!important}

/* 2 · Aurora: soft blue/violet/cyan light blobs up top + film grain */
html.bg-2 .wrapper::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,
  radial-gradient(60% 38% at 18% 12%,rgba(61,116,255,.55),transparent 70%),
  radial-gradient(55% 34% at 88% 22%,rgba(123,97,255,.45),transparent 70%),
  radial-gradient(70% 40% at 50% 48%,rgba(56,189,248,.28),transparent 70%),
  radial-gradient(100% 36% at 50% 74%,rgba(61,116,255,.35),transparent 70%)!important;background-blend-mode:soft-light,normal,normal,normal,normal!important}

/* 3 · Blueprint: fine line grid fading out, glow from the bottom */
html.bg-3 .wrapper::before{background:
  radial-gradient(110% 40% at 50% 72%,rgba(61,116,255,.55),rgba(61,116,255,0) 72%),
  linear-gradient(rgba(61,116,255,.13) 1px,transparent 1px) 0 0/26rem 26rem,
  linear-gradient(90deg,rgba(61,116,255,.13) 1px,transparent 1px) 0 0/26rem 26rem!important;
  -webkit-mask:radial-gradient(120% 90% at 50% 30%,#000 35%,rgba(0,0,0,.25) 80%)!important;mask:radial-gradient(120% 90% at 50% 30%,#000 35%,rgba(0,0,0,.25) 80%)!important}

/* 4 · Halftone sweep: dots that grow toward the bottom (Rispo hero feel, no shape) */
html.bg-4 .wrapper::before{background:
  radial-gradient(circle,rgba(61,116,255,.9) 3.4rem,transparent 3.9rem) 0 0/14rem 14rem,
  radial-gradient(circle,rgba(61,116,255,.7) 2.1rem,transparent 2.6rem) 7rem 7rem/14rem 14rem,
  radial-gradient(circle,rgba(61,116,255,.35) 1.1rem,transparent 1.6rem) 0 0/14rem 14rem!important;
  -webkit-mask:linear-gradient(to bottom,transparent 12%,rgba(0,0,0,.35) 40%,#000 85%)!important;mask:linear-gradient(to bottom,transparent 12%,rgba(0,0,0,.35) 40%,#000 85%)!important}

/* 5 · Night hero: deep navy upper part with dot grid and a glowing orb, the card sits on it */
html.bg-5 .wrapper:not(.block-white):not(.price-super)::before{background:
  radial-gradient(40% 26% at 50% 34%,rgba(111,151,255,.75),rgba(61,116,255,.25) 55%,transparent 75%),
  radial-gradient(circle,rgba(255,255,255,.16) 1.1rem,transparent 1.6rem) 0 0/18rem 18rem,
  linear-gradient(180deg,#0B1230 0%,#15246A 55%,#2F5BE0 100%)!important}
html.bg-5 .wrapper:not(.block-white):not(.price-super)::after{border-color:rgba(255,255,255,.18)}
html.bg-5 .wrapper:not(.block-white):not(.price-super) .maxy-logo img{content:url(../shared/brand/maxy-full-white.svg)}
html.bg-5 .wrapper:not(.block-white):not(.price-super) .header .line-item{background:rgba(255,255,255,.2)!important}
html.bg-5 .wrapper:not(.block-white):not(.price-super) .header .line-item i{background:#fff!important}
html.bg-5 .wrapper:not(.block-white):not(.price-super) .header-top .back{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
html.bg-5 .wrapper:not(.block-white):not(.price-super) .header-top .back::before{filter:invert(1)}

/* ===== default (bg-0, operator's pick 2026-09-25): the halftone Maxy star, soft blue page glow, no frame ===== */
html.bg-0,html.bg-0 body{background:var(--mx-page)!important}
/* a white step (plans, payment): the page around it is white too on wide screens (operator 2026-11-03) */
html.bg-0.page-white,html.bg-0.page-white body{background:#fff!important}
html.bg-0 .wrapper:not(.block-white):not(.price-super){background:radial-gradient(120% 60% at 50% 100%,rgba(61,116,255,.20),rgba(61,116,255,0) 70%),var(--mx-page)!important}
html.bg-0 .wrapper:not(.block-white):not(.price-super)::before{opacity:.8!important;background:url(halftone.png?v=2) left -30px top 96px/165vw auto no-repeat!important}
@media screen and (min-width:500px){html.bg-0 .wrapper:not(.block-white):not(.price-super)::before{background:url(halftone.png?v=2) left top 70px/min(80vw,1100px) auto no-repeat!important}}
html.bg-0 .wrapper::after{display:none!important}
html.bg-0 .wrapper.block-ai::after{display:block!important}
/* loading + opening screens have no card in the original layout: no card shadow there */
.wrapper.block-ai .block,.wrapper.block-home .block{box-shadow:none!important;background:transparent!important}
.wrapper.block-ai::after{background:none!important}