/* Hero bento, ported 1:1 from the design preview (design.archon-preview.pages.dev). Same markup, styles and loop timings. */
.xb{font-family:var(--type-sans);color:#111;letter-spacing:var(--type-track-body);--vsoft:#5f5f5a;--vbox:#ecede6}
.xb .dband{padding:0;background:transparent;border-radius:0}
.xb .vbento{display:grid;grid-template-columns:40fr 60fr;grid-template-rows:minmax(clamp(200px,17.5vw,400px),auto) minmax(clamp(200px,17.5vw,400px),auto);gap:12px;margin:0}
.xb .vtall{grid-row:span 2}
.xb .vright{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.xb .vtile{border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff}
.xb .vphoto{border-radius:6px;background:#ddd url("/hero-photo.jpg") 54% center/cover no-repeat;background-image:image-set(url("/hero-photo.avif") type("image/avif"),url("/hero-photo.webp") type("image/webp"),url("/hero-photo.jpg") type("image/jpeg"))}
.xb .vmono{font-family:var(--type-sans);font-size:var(--type-demo-label);letter-spacing:var(--type-track-body);color:#4f4f4c}
/* status tile */
.xb .vstack{width:100%;max-width:300px;display:grid;gap:8px}
.xb .vsrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(251,251,249,.82);border:1px solid transparent;border-radius:8px;backdrop-filter:blur(6px);padding:9px 12px;font-size:var(--type-demo);line-height:var(--type-lh-meta);letter-spacing:var(--type-track-body);color:#0b0b0b;transition:background .5s ease,color .5s ease,border-color .5s ease}
.xb .vsrow:not(.vdark) span,.xb .vsrow:not(.vdark) .vchip{color:#3f3f3c}
.xb .vchip{font-size:var(--type-demo-label);line-height:var(--type-lh-ui);background:var(--vbox);border-radius:999px;padding:3px .75em;white-space:nowrap}
.xb .vsrow.vdark{background:#161616;border-color:#161616;color:#fff}
.xb .vsrow.vdark .vchip{background:transparent;color:#d4d4d0;padding-right:0}
.xb .vst{display:inline-flex;align-items:center;gap:6px}
.xb .vic{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:xvspin .8s linear infinite;flex-shrink:0;box-sizing:border-box}
.xb .vic.wait{animation:none;border-style:dashed;border-right-color:currentColor;opacity:.5}
.xb .vic.ok{border:0;animation:none;background:#335b5d;position:relative}
.xb .vic.ok::after{content:"";position:absolute;left:4px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.xb .vsrow.vdark .vic.ok{background:#fbfbf9}
.xb .vsrow.vdark .vic.ok::after{border-color:#161616}
@keyframes xvspin{to{transform:rotate(360deg)}}
/* finds tile */
.xb .vmark{padding:clamp(12px,3cqw,22px);container-type:inline-size;overflow:visible}
.xb .pcloud{display:flex;align-items:center;justify-content:center}
.xb .pcloud .cloud-in{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(5px,1.6cqw,9px);max-width:100%}
.xb .pcloud .pill{display:inline-flex;align-items:center;gap:.45em;padding:.42em .75em;border-radius:.65em;font-size:var(--type-demo);line-height:var(--type-lh-ui);color:#1f1f1d;background:#fff;white-space:nowrap;letter-spacing:var(--type-track-body);border:0}
.xb .pcloud .pill svg{width:1.1em;height:1.1em;flex-shrink:0;fill:none;stroke:#3a3a38;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* accountant tile */
.xb .vmail{background:#161616;grid-column:2}
.xb .vmwrap{width:100%;max-width:380px}
.xb .vmcard{background:#fff;border-radius:16px;padding:12px 14px}
.xb .vmhead{display:flex;align-items:center;gap:8px;padding-bottom:9px;line-height:var(--type-lh-ui)}
.xb .vmcard p{margin:9px 0 0;font-size:var(--type-demo);color:#3f3f3c;line-height:var(--type-lh-meta)}
.xb .vsubj{color:#111}
.xb .vmfoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#9a9a93}
.xb .vprep{display:inline-flex;align-items:center;gap:6px;color:#d4d4d0}
.xb .vspark{display:inline-flex;color:#efa54d}
.xb .vspark svg{width:12px;height:12px;fill:currentColor;animation:xvtwinkle 1.2s ease-in-out infinite}
@keyframes xvtwinkle{50%{opacity:.35;transform:scale(.8)}}
.xb .vmbtn{font-size:var(--type-demo);color:#fff;border:1px solid transparent;border-radius:6px;padding:5px 20px;white-space:nowrap;cursor:pointer;user-select:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.xb .vmbtn:hover{background:#fbfbf9;color:#161616;border-color:#fbfbf9}
@media (max-width:52rem){
 .xb .vbento{grid-template-columns:1fr;grid-template-rows:240px auto 210px}
 .xb .vtall{grid-row:auto}
 .xb .vmail{grid-column:auto}
 .xb .vright{grid-template-columns:1fr;grid-template-rows:190px auto}
}
@media (prefers-reduced-motion:reduce){.xb .vic,.xb .vspark svg{animation:none}.xb .vsrow{transition:none}}

/* no backdrop (Joel, Oct 26): tiles carry a neutral grey fill so they stay visible on white */
.xb .vtile:not(.vmail):not(.vphoto){background:#F4F4F2}
.xb .pcloud .pill{background:transparent}