/* Home page styles from the Allioo Studio design (Home.html inline <style>), with real templates in place of its mock sites. */
a{color:inherit}a:hover{color:var(--blue)}
.tl{font-size:15px;font-weight:500;padding:12px 6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.hero{overflow-x:clip}
.msel{position:relative}
.msel>i,.msel>em{position:absolute;opacity:0;transition:opacity .3s}
.msel>i{width:7px;height:7px;background:#fff;border:1.5px solid #1B4FD8;border-radius:1.5px}
.msel>i:nth-child(1){left:-8px;top:-6px}.msel>i:nth-child(2){right:-8px;top:-6px}.msel>i:nth-child(3){left:-8px;bottom:-6px}.msel>i:nth-child(4){right:-8px;bottom:-6px}
.msel>em{left:-5px;bottom:calc(100% + 9px);background:#1B4FD8;color:#fff;font:500 11px/1.4 Geist,sans-serif;letter-spacing:0;padding:2px 8px;border-radius:5px;font-style:normal;white-space:nowrap}
.msel.on{outline:1.5px solid #1B4FD8;outline-offset:4px;border-radius:2px}.msel.on>i,.msel.on>em{opacity:1}
.edbody .hs-bn{margin-top:4px;text-align:left}
/* the Studio Two section keeps its selection frame once open; only the pointer fades (.nc, home.js) */
.edf.nc #edcur{opacity:0}
.cvs{border-radius:14px;background:var(--s1);padding:26px 22px 22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cvs small{font-size:12px;color:var(--ink3);margin-bottom:22px}.cvs .msel{display:inline-block}
.cvs h5{font-size:clamp(20px,1.9vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.cvb{font-size:12.5px;font-weight:500;background:var(--ink);color:var(--bg);padding:7px 13px;border-radius:999px}
.tgl3{width:32px;height:18px;border-radius:9px;background:var(--blue);position:relative;margin-left:auto}.tgl3:after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.bp{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--s1);align-self:flex-start}.bp i{font-style:normal;font-size:12.5px;color:var(--ink3);padding:6px 10px;border-radius:7px;transition:all .3s}.bp i.on{background:var(--s2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bpw{height:96px;border-radius:12px;background:var(--s1);display:flex;justify-content:center;padding:10px}
.bpf{width:100%;border-radius:8px;background:var(--s2);box-shadow:inset 0 0 0 1.5px var(--blue);padding:10px;display:flex;flex-direction:column;gap:6px;transition:width .7s var(--ease)}
.bpf i{height:7px;border-radius:4px;background:var(--line)}.bpf i:first-child{width:60%;height:10px;background:var(--ink);opacity:.8}.bpf i:last-child{width:40%}
.isw{display:flex;gap:8px}.isw i{width:26px;height:26px;border-radius:8px;transition:box-shadow .3s}.isw i.on{box-shadow:0 0 0 2px var(--s2),0 0 0 3.5px var(--blue)}
.sbtn2{align-self:flex-start;font-size:13px;font-weight:500;color:#fff;background:#141518;padding:9px 16px;border-radius:8px;transition:background .5s,border-radius .5s}
.tpair{display:flex;gap:8px}.tpair span{flex:1;border-radius:12px;background:var(--s1);padding:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink3)}.tpair b{font-size:24px;font-weight:500;color:var(--ink);line-height:1}
.hs-g [data-ok]{transition:opacity .4s}
/* wider page */
.wrap{max-width:1360px}.xw{max-width:1520px}
/* real estate */
.rrow{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(64px,7vw,104px)}
.rx-t{display:flex;flex-direction:column;gap:18px}.rx-t h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1.05}.rx-t h3 span{color:var(--ink3)}.rx-t>p{font-size:15.5px;line-height:1.55;max-width:42ch}
/* headless: AI builders row */
#stack .hs-seg,#stack .hs-cnt{display:none}
.aib{display:flex;flex-direction:column;gap:14px}
.aib>span{font-size:13.5px;color:var(--ink3)}
.aib .row{display:flex;flex-wrap:wrap;gap:8px}
.aib .ch{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:12px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;font-weight:500}
.aib .ch img,.aib .ch i{width:20px;height:20px;flex:none;border-radius:5px}
.aib .ch i{display:grid;place-items:center;font:600 10px/1 Geist,sans-serif;font-style:normal;background:var(--s2);color:var(--ink2)}
[data-theme=dark] .aib .ch img.mono{filter:invert(1)}
/* reviews */
.rv2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.rv2 figure{border-radius:28px;background:var(--s1);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:26px}
.rv2 .ft3{justify-content:space-between}
.rv2 .ft3 blockquote{font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.025em;font-weight:500;text-wrap:pretty}
.rv2 .sd{display:flex;flex-direction:column;gap:16px}
.rv2 .sd figure{flex:1;padding:clamp(22px,2.4vw,30px);gap:20px}
.rv2 .sd blockquote{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.rv2 figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:14px}
.rv2 figcaption b{display:block;font-weight:500}.rv2 figcaption span span{color:var(--ink3)}
.rv2 .hs-p{margin-left:auto}
@media(max-width:900px){.rv2{grid-template-columns:1fr}}
.tl:hover{color:var(--blue)}

/* AA: the design's --ink3 is under 4.5:1 for small text in both themes; small text here uses --ink2. */
.creds,.tpc figcaption span,.catc span,.scl{color:var(--ink2)}

/* Hero showcase (src/components/hero): a full-width frame that settles into a rounded container on scroll
   (width and radius set by home.js), holding the two loops (Headless chat, Studio panels). */
.hero{padding-top:clamp(124px,10vw,148px)}
.sc{margin-top:clamp(84px,9vw,128px);display:flex;flex-direction:column;align-items:center}
.scn{margin:14px auto 0;padding:0 20px;max-width:70ch;font-size:13.5px;line-height:1.5;color:var(--ink2);text-align:center}
/* partner credits under the hero: a slow strip that crosses the screen, fading out at both sides; still and
   centred with reduced motion. The second copy (.crx) only makes the loop seamless and is hidden from screen readers. */
#hero .creds{display:block;margin-top:clamp(64px,7vw,104px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#hero .crt{display:flex;width:max-content;animation:crs 64s linear infinite}
#hero .crt>span,#hero .crx>span{flex:none;padding-right:clamp(40px,5vw,72px);white-space:nowrap}
#hero .crx{display:flex}
@keyframes crs{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#hero .creds{-webkit-mask-image:none;mask-image:none}#hero .crt{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:14px 0}#hero .crx{display:none}}
.scw{position:relative;width:100vw;background:var(--s2);border:1px solid var(--line);border-left-width:0;border-right-width:0;overflow:hidden;will-change:width}
.scw.rd{border-left-width:1px;border-right-width:1px}
.scbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;height:48px;padding:0 10px 0 8px;border-bottom:1px solid var(--line2);background:var(--s1)}
.scl{font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:56ch}
/* the switch: two tabs in the frame's own top bar, same small type as the bar; the title sits in the exact centre */
.sct{display:flex;gap:2px;justify-self:start}
.sct button{font:500 13px/1 Geist,sans-serif;letter-spacing:-.01em;color:var(--ink2);background:none;border:0;border-radius:8px;padding:8px 11px;cursor:pointer;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.sct button:hover{color:var(--ink)}
.sct button[aria-selected=true]{background:var(--s2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(11,11,12,.06)}
.sct button:focus-visible,.scp:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.scp{justify-self:end;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--s2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .3s}
.scp:hover{border-color:var(--ink3)}
.scp .i-play,.scp.paused .i-pause{display:none}.scp.paused .i-play{display:block}
.scb{position:relative;aspect-ratio:5/3;background:var(--s1)}
.ws{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.012);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.ws.on{opacity:1;transform:none}
.ws video,.ws img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.scb{container-type:inline-size}
/* Wix Studio view: the frame's chrome turns to the dark editor look (Wix Studio Two), whatever the site theme */
.scw,.scbar,.scl,.sct,.sct button,.scp,.scb{transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.scw.dk{background:#141416;border-color:#2A2A2F}
.scw.dk .scbar{background:#1B1B1E;border-bottom-color:#2A2A2F}
.scw.dk .scl{color:#B4B5BB}
.scw.dk .sct button{color:#B4B5BB}.scw.dk .sct button:hover{color:#fff}
.scw.dk .sct button[aria-selected=true]{background:#2B2B30;color:#fff;box-shadow:inset 0 0 0 1px #3A3A41}
.scw.dk .scp{background:#232327;border-color:#34343A;color:#F3F3F4}
.scw.dk .scb{background:#18181A}
@media(max-width:700px){
  .scb{aspect-ratio:900/1360}
  .scbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs pause" "title title";row-gap:4px;height:auto;padding:6px 8px 8px 6px}
  .sct{grid-area:tabs}.scp{grid-area:pause}
  .scl{grid-area:title;justify-self:center;font-size:12px;white-space:normal;max-width:100%}
  .sct button{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .scw{width:min(1240px,92vw);border-radius:24px;border-left-width:1px;border-right-width:1px}
  .ws{transition:none;transform:none}
  .scw,.scbar,.scl,.sct,.sct button,.scp,.scb{transition:none}
}

/* Real estate strip (src/components/home/RealEstateStrip.astro): the design's full-bleed row, moved sideways on
   scroll by home.js; each card is a real template's home page scrolling slowly inside its frame. */
.tps{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;margin-top:clamp(40px,5vw,64px);padding:4px 0 8px}
.tpr{display:flex;gap:18px;will-change:transform}
.tpc{flex:0 0 auto;width:clamp(320px,38vw,620px);display:flex;flex-direction:column;gap:14px;margin:0}
.tpw{position:relative;display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--s2);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(11,11,12,.35)}
.tpw:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tpw .lpi{position:absolute;left:0;top:0;width:100%;height:auto;display:block;animation:lps 18s ease-in-out infinite alternate;will-change:transform}
.tpw{container-type:inline-size}
.tpw:hover .lpi{animation-play-state:paused}
@keyframes lps{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(var(--sy,0%))}}
.tpc figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:14px}.tpc figcaption b{font-weight:500;color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .tps{overflow-x:auto;scroll-snap-type:x mandatory;padding-left:max(20px,calc(50vw - 680px));padding-right:20px}
  .tpc{scroll-snap-align:start}
  .tpw .lpi{animation:none}
}

/* Hero: calm, two-line display headline at about the design's size, generous spacing; the showcase frame's top bar and
   a strip of the page show on first view at 1440x900 (on shorter laptops it may be only the switch). */
#hero{padding-top:clamp(112px,10vw,148px)}
#hero h1{font-size:clamp(34px,6.4vw,92px);line-height:.96;margin-top:clamp(20px,2vw,28px)}
#hero .lead{margin-top:clamp(20px,2vw,28px)}
#hero .btns{margin-top:clamp(24px,2.4vw,34px)}
#hero .sc{margin-top:clamp(84px,8.4vw,120px)}
/* phones: a swipeable row of template cards in place of the video showcase (src/components/hero/HeroCards.astro) */
.hcd{display:none}
@media(max-width:700px){
  #hero .sc{display:none}
  .hcd{display:flex;gap:12px;margin-top:40px;padding:0 20px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .hcd::-webkit-scrollbar{display:none}
  .hcc{flex:0 0 72vw;max-width:300px;margin:0;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}
  .hcc .tpw{aspect-ratio:4/5;border-radius:16px}
  .hcc figcaption{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:0 2px}
  .hcc figcaption b{font-weight:500;color:var(--ink)}.hcc figcaption span{color:var(--ink2)}
  #hero .creds{margin-top:44px}
}
#hero .eb{white-space:nowrap}
/* Phones: a bigger, airier headline, a shorter lead measure, a full-width primary button, a tighter gap to the
   showcase and a slimmer switch bar, so the hero reads as one calm column. Desktop is unchanged. */
@media(max-width:560px){
  #hero{padding-top:104px}
  #hero .eb{font-size:12px;padding:6px 12px}
  #hero h1{font-size:9.3vw;line-height:1.04;margin-top:18px}
  #hero .lead{margin-top:16px;font-size:16px;line-height:1.55;max-width:32ch}
  #hero .btns{margin-top:24px;flex-direction:column;align-items:center;gap:6px}
  #hero .btns .b.p{width:100%;max-width:320px;justify-content:center}
  #hero .sc{margin-top:44px}
  #hero .scbar{padding:6px 6px 8px 5px}
  #hero .sct button{font-size:13px;padding:8px 10px}
  #hero .scp{width:30px;height:30px}
  #hero .scn{font-size:13px;margin-top:12px}
}
#how{overflow-x:clip}

/* "Prefer to edit by hand?" cards: the card grows to fit its rows instead of clipping them at the bottom. */
.edbody .hs-g{flex:0 0 auto;min-height:max-content}
.edbody .hs-g .hs-ft{margin-top:14px}
/* small phones: the Studio Two cards shrink to the frame instead of being cut off at the right */
@media(max-width:900px){.edbody .hs-bn{grid-template-columns:minmax(0,1fr)}.edbody .hs-bn>div,.edbody .hs-g{min-width:0}}
@media(max-width:560px){.edf{padding:22px 14px}.edbody .hs-bn{padding:10px}.edbody .hs-g{padding:18px}.edbody .hs-g .rw{flex-wrap:wrap;row-gap:2px}.edbody .cvs h5{font-size:22px}}

/* "Nine tools": phones and small tablets get a plain static list instead of the scroll animation. */
.og-list{display:none}
@media(max-width:1000px){
  .hs-og .hs-og-st .hs-pn{display:none}
  .og-list{display:block;border-radius:24px;background:var(--s1);padding:clamp(16px,4vw,32px)}
  .hs-og-hs>div[data-a]{display:none}
  .hs-og-hs>div[data-b].off{opacity:1;transform:none;pointer-events:auto}
  .og-card{background:var(--s2);border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 60px -44px rgba(0,0,0,.4);padding:20px clamp(16px,4vw,24px) clamp(16px,4vw,24px);display:flex;flex-direction:column;gap:6px}
  .og-h{display:flex;flex-direction:column;gap:2px;padding-bottom:12px}
  .og-h b{font-weight:500;font-size:18px;letter-spacing:-.015em;color:var(--ink)}
  .og-h span{font-size:15px;color:var(--ink3)}
  .og-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .og-card li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line2);min-height:52px}
  .og-card li .ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--s1);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink2)}
  .og-card li b{flex:1;min-width:0;font-weight:500;font-size:16px;line-height:1.3;color:var(--ink)}
  .og-card li .hs-p{flex:none;font-size:13px}
  .og-card li .hs-ck{flex:none}
  .og-f{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--blue);color:#fff;font-size:16px;font-weight:500;line-height:1.35}
  .og-f span:last-child{opacity:.9;font-weight:400}
}
@media(max-width:560px){
  .og-h b{font-size:16px}.og-h span{font-size:13.5px}
  .og-card li{gap:10px;padding:10px 0;min-height:46px}
  .og-card li .ic{width:26px;height:26px;font-size:10px}
  .og-card li b{font-size:14.5px}
  .og-card li .hs-p{font-size:12px}
  .og-f{font-size:14.5px;padding:14px 16px}.og-f span:last-child{font-size:13.5px}
}

/* ==== Which one fits (#fit, src/components/home/PlatformPicker.astro) ====
   Tap what you need; the right card shows Headless, Studio Two or either. Same soft cards as the Studio Two row. */
.pk{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;min-width:0}
.pk-g{border-radius:20px;background:var(--s1);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:20px;min-width:0}
.pk-g h3{font-size:clamp(20px,1.9vw,24px);line-height:1.2;letter-spacing:-.02em}
.pk-g h3 .m{color:var(--ink2)}
.pk-ch{display:flex;flex-wrap:wrap;gap:8px}
.pk-ch button{white-space:nowrap;font:500 15px/1.2 Geist,sans-serif;letter-spacing:-.01em;color:var(--ink);background:var(--bg);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2);transition:background .25s,color .25s,box-shadow .25s}
.pk-ch button:hover{box-shadow:inset 0 0 0 1px var(--line)}
.pk-ch button[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:none}
.pk-ch button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pk-out{display:grid;justify-content:stretch}
.pk-r{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .35s}
.pk[data-r=none] .pk-none,.pk[data-r=h] .pk-h,.pk[data-r=s] .pk-s,.pk[data-r=b] .pk-b{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.pk-k{font-size:13px;color:var(--ink2)}
.pk-r b{font-size:clamp(30px,3.2vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.pk-none b{color:var(--ink2)}
.pk-r p{font-size:16px;line-height:1.5;color:var(--ink2);margin:0;max-width:40ch}
.pk-r .b{margin-top:8px}
.pk-bt{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.pk-bt .b{margin-top:0}
.pk:not(.pk-js) .pk-none{display:none}
.pk:not(.pk-js) .pk-b{opacity:1;visibility:visible;transform:none}
@media(max-width:900px){.pk{grid-template-columns:minmax(0,1fr)}
  /* stacked: the match card is as tall as the answer it shows, no reserved space */
  .pk[data-r=none] .pk-r:not(.pk-none),.pk[data-r=h] .pk-r:not(.pk-h),.pk[data-r=s] .pk-r:not(.pk-s),.pk[data-r=b] .pk-r:not(.pk-b){display:none}}
@media(max-width:560px){.pk-ch button{font-size:14px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.pk *{transition:none!important}}

/* ==== Business systems (#system, src/components/home/SystemDemo.astro) ====
   Same card language as the Studio Two row (.hs-g): soft card, two-tone title, a small built illustration. */
.bs{--bsa:#A5603F;margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,32px);min-width:0}
.bs[data-k=marlowe]{--bsa:#143023}.bs[data-k=lumin]{--bsa:#1A4BDB}
[data-theme=dark] .bs{--bsa:#D99271}[data-theme=dark] .bs[data-k=marlowe]{--bsa:#8FC3A0}[data-theme=dark] .bs[data-k=lumin]{--bsa:#7C9BFF}
.bs-pills{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:4px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line2)}
.bs-pill{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.2 Geist,sans-serif;letter-spacing:-.01em;color:var(--ink2);background:none;border:0;border-radius:10px;padding:9px 14px 9px 11px;cursor:pointer;transition:background .3s var(--ease),color .3s}
.bs-pill i{width:10px;height:10px;border-radius:50%;flex:none;background:#A5603F}
.bs-pill[data-k=marlowe] i{background:#143023}.bs-pill[data-k=lumin] i{background:#1A4BDB}
[data-theme=dark] .bs-pill i{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.bs-pill:hover{color:var(--ink)}
.bs-pill[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
.bs-pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bs-row{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;min-width:0}
.bs-g{border-radius:20px;background:var(--s1);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0;overflow:hidden}
.bs-g h3{font-size:18.5px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.bs-g h3 .m{color:var(--ink2)}
.bs-ft{margin-top:auto}
.bs-vis{display:grid;min-width:0;flex:1}
.bs-vis>.bs-t{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.bs .bs-t{opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.bs .bs-t.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.bs-fr{width:100%;border-radius:14px;background:var(--bg);border:1px solid var(--line);overflow:hidden;min-width:0}
.bs-url{padding:7px 10px;border-bottom:1px solid var(--line2);background:var(--s1)}
.bs-url span{display:block;width:60%;min-width:max-content;max-width:100%;margin:0 auto;text-align:center;font-size:11.5px;color:var(--ink2);background:var(--bg);border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-g1 .bs-vis>.bs-t{justify-content:stretch}
.bs-g1 .bs-fr{flex:none;display:flex;flex-direction:column;height:clamp(300px,24vw,360px)}
.bs-pg{flex:1;min-height:0;overflow:hidden}
.bs-pg img{display:block;width:100%;height:auto}
.bs-mw{display:flex;flex-direction:column;height:clamp(300px,24vw,360px)}
.bs-mh{flex:none;padding:10px 14px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink2)}
.bs-mh div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-mh b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.bs-mb{flex:1;min-height:0;overflow:hidden}
.bs-mb img{display:block;width:100%;height:auto}
/* backend: rows in the .rw style of the Studio Two cards */
.bs-bk{width:100%}
.bs-bki{display:flex;flex-direction:column;gap:8px}
.bs-bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 2px 2px}
.bs-bh b{font-weight:500;font-size:14px}.bs-bh span{font-size:12px;color:var(--ink2)}
.bs-bki .rw{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--bg);font-size:14px}
.bs-bki .rw i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;background:var(--bsa);color:#fff}
[data-theme=dark] .bs-bki .rw i{color:#0A0A0B}
.bs-bki .rw b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-bki .rw em{margin-left:auto;font-style:normal;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--s1);color:var(--ink)}
.bs-ans{flex-direction:column;align-items:flex-start!important;gap:2px!important}
.bs-ans small{font-size:12px;color:var(--ink2)}
.bs-ans span{font-size:14px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the story, once in view (.anim is set by the script, .in when the row is on screen) */
.bs.anim .bs-g{opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .9s var(--ease)}
.bs.anim .bs-g2{transition-delay:.12s}.bs.anim .bs-g3{transition-delay:.24s}
.bs.anim.in .bs-g{opacity:1;transform:none}
/* the site scrolls with the page: down to its form as you scroll down, back to the hero as you scroll up (--pg 0 to 1) */
.bs-pg{container-type:size}
.bs.anim .bs-pgi{transform:translateY(calc(var(--pg,0) * (100cqh - 100%)));will-change:transform}
.bs.anim .bs-new{opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .5s ease,transform .6s var(--ease)}
.bs.anim.in .bs-new{opacity:1;transform:none;transition-delay:1.6s}
.bs.anim .bs-ans{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s var(--ease)}
.bs.anim.in .bs-ans{opacity:1;transform:none;transition-delay:calc(1.9s + var(--d) * .15s)}
.bs.anim .bs-mb img{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .9s var(--ease)}
.bs.anim.in .bs-mb img{opacity:1;transform:none;transition-delay:2.5s}
.bs-cap{display:grid;max-width:62ch;text-align:center;font-size:14px;line-height:1.5;color:var(--ink2);margin:0}
.bs-cap>.bs-t{grid-area:1/1}
.bs-cap a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.bs-cap b{color:var(--ink);font-weight:500}
@media(max-width:1000px){
  .bs-row{grid-template-columns:minmax(0,1fr)}
  .bs-mw{height:360px}
}
@media(max-width:560px){
  .bs-pill{font-size:13.5px;padding:8px 11px 8px 9px;flex:none}.bs-pill span{display:none}
  /* the three cards: a sideways swipe row, edge to edge, the next card peeking in */
  .bs-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;width:auto;align-self:stretch;margin-inline:calc(-1 * clamp(20px,4vw,40px));padding:0 clamp(20px,4vw,40px) 4px;scroll-padding:0 clamp(20px,4vw,40px)}
  .bs-row::-webkit-scrollbar{display:none}
  .bs-row>.bs-g{flex:0 0 84%;scroll-snap-align:start}
  /* one row that swipes sideways instead of wrapping */
  .bs-pills{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .bs-pills::-webkit-scrollbar{display:none}
  .bs-pill{scroll-snap-align:start;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.bs *{transition:none!important}}

/* Real estate: the section as one black card that widens on scroll, with Showing to Closing in the Headless hero's
   card language (src/components/home/S2cTabs.astro). */
.s2b-card{--bg:#0B0B0C;--ink:#F3F3F4;--ink2:#B4B7BD;--ink3:#8E9198;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.07);--s1:rgba(255,255,255,.05);--s2:#151517;--s3:#1D1D20;--blue:#7C9BFF;--blueT:rgba(77,120,255,.16);--btn:#F3F3F4;--btnT:#0B0B0C;--cardsh:0 18px 40px -26px rgba(0,0,0,.7);position:relative;overflow:hidden;background:#0B0B0C;color:var(--ink);border-radius:clamp(24px,3vw,40px);padding:clamp(40px,5vw,80px) clamp(24px,5vw,72px)}
[data-theme=dark] .s2b-card{background:#121214;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.s2b-card .tpw{box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.s2b-card .eb{color:#F3F3F4;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.028) 42%,rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.035)}
.s2b-card .eb:before{background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 38%,rgba(255,255,255,.015) 62%,rgba(255,255,255,.14))}
/* the black card widens as it scrolls into view: --x goes 0 to 1 (S2cTabs.astro script) */
.s2b-card{--x:0;margin-inline:calc((100% - 100vw + 24px) / 2 * var(--x));border-radius:calc(40px - 14px * var(--x))}
.s2c{max-width:1280px;margin:clamp(72px,8vw,120px) auto 0;display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.s2c-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.s2c-h h3{font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1.04;max-width:16ch}.s2c-h h3 span{color:var(--ink3)}
.s2c-h>p{font-size:16.5px;line-height:1.55;max-width:46ch;color:var(--ink2)}
.s2c-h .btns{justify-content:center;margin-top:6px}
/* three cards in the Headless hero's card language (hs27.css), on the black card */
.s2b-card .s2c-bn{min-height:0;background:rgba(255,255,255,.04)}
.s2b-card .s2c-bn .hs-g{min-height:340px}
.s2c-bn .hs-g{flex:1}
.s2c-bn .hs-g h3 .m{color:var(--ink3)}
.s2c-bn .hs-g>p{font-size:14px;line-height:1.5;color:var(--ink2);margin:0}
.s2c-bn .hs-g .rw{background:rgba(255,255,255,.05)}
.s2c-bn .hs-g .rw.hi{background:var(--s2);box-shadow:inset 0 0 0 1.5px var(--blue),0 10px 24px -14px rgba(77,120,255,.45)}
.s2c-bn .hs-g .rw>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s2c-bn .hs-g .rw .hs-p{margin-left:auto}
.s2c-bn .hs-nt{background:var(--s3);box-shadow:inset 0 0 0 1px var(--line2),0 16px 32px -18px rgba(0,0,0,.9)}
.s2c-bn .hs-p{background:rgba(255,255,255,.07)}
.s2c-bn .hs-p.ok{background:rgba(46,155,105,.18);color:#7FD3A8}.s2c-bn .hs-p.wt{background:rgba(201,162,39,.16);color:#E2C46B}.s2c-bn .hs-p.bl{background:rgba(77,120,255,.2);color:#A9BEFF}
/* showings: pending turns confirmed after the request arrives */
.s2c-st{margin-left:auto;display:grid}
.s2c-st>.hs-p{grid-area:1/1;justify-self:end;margin:0!important;transition:opacity .4s var(--sd,2.2s)}
.s2c-st>.ok{opacity:0}
.s2c-bn.in .s2c-st>.wt,.s2c-bn.in .s2c-st>.ink{opacity:0}.s2c-bn.in .s2c-st>.ok{opacity:1}
/* rows arrive one by one once the cards are in */
.s2c-bn .hs-g .rw.s2c-r{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s var(--ease)}
.s2c-bn.in .hs-g .rw.s2c-r{opacity:1;transform:none}
.s2c-cap{font-size:13px;color:var(--ink3);text-align:center;margin:0}
.s2c-cap a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
@media(prefers-reduced-motion:reduce){.s2c *{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}}
@media(max-width:1000px){.s2c-bn{grid-template-columns:minmax(0,1fr)}.s2c-bn>div,.s2c-bn .hs-g{min-width:0}}
/* phones: cards as tall as their content (no desktop minimum), a little less padding around them */
@media(max-width:900px){.s2b-card .s2c-bn .hs-g{min-height:0}.s2b-card .s2c-bn .hs-g .hs-ft{margin-top:6px}}
@media(max-width:560px){.s2b-card .s2c-bn{padding:10px}.s2b-card .s2c-bn .hs-g{padding:18px}.s2c-bn .hs-g .rw>span:first-child{white-space:normal;overflow:visible}}