/* Mauve House — shared studio styles: page chrome + product tiles.
   Used by the homepage and every stage page (lab / sandbox / preprod) so they
   all look identical. Tiles render in a centered 2-up grid (a lone card never
   stretches full width). */
:root{--bg:#e6c6cd;--panel:#efd1d8;--line:#cf9fae;--txt:#3a2a2c;--muted:#5e4448;--accent:#a85a64;--mauve:#c7868c;--good:#1a8f5e;}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;color:var(--txt);min-height:100vh;
  background:radial-gradient(1100px 600px at 75% -10%,#e9ccd2 0%,transparent 60%),
  radial-gradient(800px 500px at 0% 100%,#e1c0cd 0%,transparent 55%),var(--bg)}
.acct{position:fixed;top:14px;right:20px;color:var(--accent);text-decoration:none;font-weight:700;font-size:13px;z-index:10}
.acct:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:52px 24px 56px}
.top{text-align:center}
.logo{font-size:46px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,#c7868c,#a85a64);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
.crumbline{font-size:13px;color:var(--muted);margin:10px 0 0}
.crumbline a{color:var(--accent);text-decoration:none;font-weight:600}
.sub{color:var(--muted);max-width:520px;margin:14px auto 0;font-size:15px;line-height:1.6}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:40px}
.tile{flex:1 1 300px;max-width:330px;border-radius:18px;padding:22px 22px 20px;position:relative;overflow:hidden;
  text-decoration:none;color:#3a2a2c;display:flex;flex-direction:column;gap:10px;min-height:172px;border:1px solid rgba(255,255,255,.5)}
a.tile{transition:transform .15s,box-shadow .15s}
a.tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(58,42,44,.13)}
.tile.soon{opacity:.66}
.strip{position:absolute;left:0;top:0;bottom:0;width:6px}
.ic{font-size:32px}
.nm{font-size:18px;font-weight:800}
.ds{font-size:13.5px;line-height:1.5;flex:1;color:#4a383b}
.open{font-weight:800;font-size:14px;margin-top:2px}
.pill{align-self:flex-start;font-size:11px;font-weight:800;border-radius:99px;padding:3px 11px;border:1px solid}
.pill.soon{color:var(--accent);background:rgba(168,90,100,.14);border-color:var(--line)}
.pill.live{color:var(--good);background:rgba(26,143,94,.14);border-color:#8fcdb0}
.pill.stage{color:var(--muted);background:rgba(94,68,72,.1);border-color:var(--line)}
.more{text-align:center;color:var(--muted);font-size:13.5px;margin-top:32px;opacity:.9}
.empty{text-align:center;color:var(--muted);margin-top:42px;font-size:15px}
footer{text-align:center;margin-top:40px;font-size:12.5px;color:var(--muted)}
footer a{color:var(--accent);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
.foot-links{margin-bottom:8px}
.foot-links a{margin:0 8px}
@media (max-width:560px){
  .wrap{padding:40px 16px 46px}
  .logo{font-size:34px;letter-spacing:-.5px}
  .tile{flex:1 1 100%;max-width:none}
}