/* allioo.studio · site-wide card style (matches the Headless templates page / allioo.com)
   Soft grey panels, no outlines, white inner cards with a quiet shadow, generous radii. */
:root{--r:24px;--rl:32px;--s3:#ECECEE;--cardsh:0 18px 40px -26px rgba(0,0,0,.28)}
[data-theme=dark]{--s3:#232326;--cardsh:0 18px 40px -26px rgba(0,0,0,.7)}

/* panels: grey fill instead of hairline outlines */
.tier,.bp-o,.bp-gl,.bp-cmp,.abio,.atbl,.hx-fan,.hx-d,.aov{border:0!important;background:var(--s1);border-radius:var(--rl)}
.tier{padding:clamp(26px,2.8vw,40px)}
.tier.hi{background:var(--btn)}
.aa{border:0!important;border-radius:var(--rl)}
.bp-cmp>div:first-child{background:var(--s3)}
.bp-gl li,.bp-cmp>div{border-color:var(--line)}
.card.all .win{border:0;background:var(--s1)}

/* inner cards: white on grey, soft shadow, no border */
.hx-core,.hx-chat,.hx-site,.hx-in,.hx-prompt,.tpo,.apm{border:0!important;background:var(--s2);box-shadow:var(--cardsh)}
.hx-in:focus-within{box-shadow:0 0 0 1.5px var(--blue),var(--cardsh)}
.tpo:has(input:checked){box-shadow:0 0 0 1.5px var(--blue),var(--cardsh);background:var(--s2)}

/* image wells */
.card .win,.post .im,.port,.hx-e .ph,.abody figure .ph,.tpimg,.bp-hero .bldv{border:0!important;background:var(--s1);border-radius:var(--r)}
.tpbig,.tpdev{border:0;border-radius:20px;box-shadow:var(--cardsh)}

/* pills and filters: filled, not outlined */
.flt a,.chips span,.hx-chips button,.bp-st,.tbld{border-color:transparent!important;background:var(--s1)}
.flt a.on,.chips input:checked+span{background:var(--ink);color:var(--bg)}
.hx-chips button:hover{background:var(--s3)}

/* form fields */
.cform input,.cform select,.cform textarea,.tsr input{border:0;background:var(--s1)}
.cform input:focus,.cform select:focus,.cform textarea:focus,.tsr input:focus{box-shadow:0 0 0 1.5px var(--blue)}

/* numbered markers */
.bp-gl li>span,#abody ol li:before{border:0;background:var(--s3)}

/* section headings: second clause in grey, as on the Headless templates page */
h2 .m,h1 .m{color:var(--ink3)}
/* panels: no blue corner marker or guide lines */
.hs-pn:after,.hs-pn:before{display:none!important}

/* bundle previews: three small windows in a well */
.bhd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:56px 0 16px}.bhd p{font-size:15px}
.bgrid+.aa{margin-top:16px}
.bstk{height:auto;aspect-ratio:16/6.6;border-radius:20px;background:var(--s3);overflow:hidden}
.bstk i{top:16%;width:44%;aspect-ratio:16/10;border-radius:10px;background:var(--s2);box-shadow:var(--cardsh);overflow:hidden}
.bstk i:before{content:"";position:absolute;left:0;right:0;top:0;height:12%;background:var(--s1);border-bottom:1px solid var(--line2)}
.bstk i:after{content:"";position:absolute;left:10%;top:28%;width:52%;height:9%;border-radius:4px;background:var(--line);box-shadow:0 2.4em 0 -.1em var(--line2)}
.bstk i:nth-child(1){left:4%}.bstk i:nth-child(2){left:28%;top:10%}.bstk i:nth-child(3){left:52%}

/* Wix Headless components (hl27 / hx27): grey panels, white cards, no outlines */
.hl-pan,.hl-w-stage{border:0!important;background:var(--s1)}
.hl-w-stage:before{display:none}
.hl-br,.hl-w-fe,.hl-w-c,.hl-db,.hl-tp,.hl-iv-c,.plg-site{border:0!important;box-shadow:var(--cardsh)}
.hl-w-ph{border:0;background:var(--s1)}
.hl-tag{border-color:transparent;background:var(--s1)}
.hl-ai-tabs button,.hl-bf-ch button,.hl-db-ask,.hl-db-arc .sg button,.plg-list button{border-color:transparent!important;background:var(--s1)}
.hl-ai-tabs button.on,.hl-bf-ch button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.hl-ai-tabs button:hover,.plg-list button:hover{background:var(--s3)}
.plg-list button.on{background:var(--blueT);color:var(--blue)}
.plg-r>i,.hl-ai-ft code{border:0}
.hl-db-tb,.hl-db-ib .ls,.hl-db-ib .th,.hl-tp-dash .rw{border:0;background:var(--s1)}
.plg{border-radius:var(--rl);background:var(--s1);padding:clamp(16px,2.4vw,32px)}
.hl-w-tx h2 span{color:var(--ink3)}
/* footer glow: faint white on every page */
.fp:before{background:radial-gradient(clamp(320px,40vw,620px) circle at var(--mx,85%) var(--my,0%),rgba(255,255,255,calc(var(--ma,.12) * .55)),transparent 70%)!important}
.plg .plg-list button{background:var(--s2)!important;box-shadow:var(--cardsh)}.plg .plg-list button:hover{background:var(--s3)!important}.plg .plg-list button.on{background:var(--blueT)!important;color:var(--blue)}