/* Bliss Collective brand: deep green #1E3309, olive #849A28, crimson #E23260, rose #F2678E, blush #FCA9AA, cream #FFF9F4, charcoal #3C3C3C.
   Layout: a fixed deep green panel on the left, then one centered column (max 1300px): greeting, Olive's note, the animated office strip, Emma's big box with the human team beside her, and the AI team below. */
:root{
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
  --font-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --side:448px;
  --bg:#FFF9F4; --surface:#FFFFFF; --ink:#3C3C3C; --muted:#6A6A66; --line:#EADFD3;
  --green:#1E3309; --on-green:#FFFFFF; --olive:#849A28; --rasp:#E23260; --pink:#F2678E; --coral:#FCA9AA; --blush:#FDE3EC; --sage:#E3E9CC; --mist:#F3F5E6;
  --side-bg:#1E3309; --warn:#8A5A00; --warn-bg:#FFF0D2; --ok:#2E7D5B;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121C10; --surface:#1A2817; --ink:#F2EEE6; --muted:#B9C4B3; --line:#2E4029;
    --green:#E6F0E0; --on-green:#16240F; --olive:#B5CC57; --rasp:#FF7A9C; --pink:#FF8DB3; --blush:#3A2230; --sage:#27402F; --mist:#1F3019;
    --side-bg:#0E1A09; --warn:#FFC468; --warn-bg:#4B3412; --ok:#6FD6A6; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121C10; --surface:#1A2817; --ink:#F2EEE6; --muted:#B9C4B3; --line:#2E4029;
  --green:#E6F0E0; --on-green:#16240F; --olive:#B5CC57; --rasp:#FF7A9C; --pink:#FF8DB3; --blush:#3A2230; --sage:#27402F; --mist:#1F3019;
  --side-bg:#0E1A09; --warn:#FFC468; --warn-bg:#4B3412; --ok:#6FD6A6; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1.15; text-wrap:balance}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--rasp); outline-offset:2px}

/* fixed side panel */
.side{position:fixed; left:0; top:0; bottom:0; width:var(--side); background:var(--side-bg); color:#FFF9F4; overflow:auto; padding:26px 22px 28px max(22px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:2px; z-index:20}
.logo{display:flex; align-items:center; gap:12px; padding:0 8px 16px}
.logo i{width:40px; height:40px; border-radius:12px; background:#FFF9F4; color:#1E3309; display:grid; place-items:center; font:400 24px var(--font-display); font-style:normal}
.logo b{display:block; font:400 24px var(--font-display)}
.logo span{font:500 11px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; opacity:.7}
.seg{display:flex; border:1px solid rgba(255,249,244,.3); border-radius:999px; padding:3px; margin:0 6px 8px}
.seg button{flex:1; border:0; background:transparent; color:#FFF9F4; font:500 14px var(--font-body); padding:7px 10px; border-radius:999px; cursor:pointer}
.seg button[aria-pressed="true"]{background:#FFF9F4; color:#1E3309}
.grp{font:500 11px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; opacity:.65; padding:16px 10px 5px}
.nav{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; text-decoration:none; color:#FFF9F4}
.nav:hover{background:rgba(255,249,244,.1)}
.nav[aria-current="page"]{background:#FFF9F4; color:#1E3309}
.nav .mini{flex:none; width:40px; height:40px; border-radius:50%; background:var(--blush); overflow:hidden}
.nav .mini svg{width:100%; height:100%; display:block}
.nav .tx{min-width:0; display:flex; flex-direction:column; line-height:1.25}
.nav .tx b{font-weight:700; font-size:15px}
.nav .tx span{font-size:13px; opacity:.75}
.nav small{margin-left:auto; font:500 10px var(--font-mono); letter-spacing:.06em; opacity:.7}
.nav.live .tx span::after{content:" \2197"; color:var(--coral)}
.btn.menu-btn{display:none}

/* centered content */
.main{margin-left:var(--side); padding:26px 28px 70px}
.content{width:100%; max-width:1300px; margin-inline:auto; display:flex; flex-direction:column; gap:22px}
.bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.bar h1{font-size:clamp(30px,4vw,42px); color:var(--green)}
.bar p{color:var(--muted)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:500 14px var(--font-body); padding:9px 16px; border-radius:999px; cursor:pointer; text-decoration:none}
.btn.primary{background:var(--green); color:var(--on-green); border-color:transparent}
.card{background:var(--surface); border:1px solid var(--line); border-radius:20px; min-width:0}
.tag{font:500 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:999px; background:var(--mist); color:var(--muted); white-space:nowrap}
:root:not([data-view="team"]) [data-for="team"]{display:none!important}
:root[data-view="team"] [data-for="emma"]{display:none!important}

/* Olive's note */
.olive{display:flex; align-items:center; gap:18px; padding:14px 20px 14px 14px}
.olive .face{flex:none; width:112px}
.olive .face svg{width:100%; height:auto; display:block}
.bubble{position:relative; flex:1; min-width:0; background:var(--blush); border-radius:18px; padding:13px 20px; color:#3C3C3C}
.bubble::before{content:""; position:absolute; left:-9px; top:50%; width:18px; height:18px; background:var(--blush); transform:translateY(-50%) rotate(45deg); border-radius:3px}
.bubble .nm{font:700 12px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:#6A6A66}
.bubble p{font-size:17px; line-height:1.45; margin-top:2px}
:root[data-theme="dark"] .bubble p,:root[data-theme="dark"] .bubble .nm{color:#F2EEE6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bubble p,:root:not([data-theme="light"]) .bubble .nm{color:#F2EEE6}}

/* office strip */
.strip{container:strip/inline-size; overflow:hidden}
.floor{position:relative; padding:84px 16px 0}
.row{--g:clamp(2px,.8cqw,10px); display:flex; flex-direction:column; gap:10px; position:relative; z-index:1}
.prow{display:flex; justify-content:center; align-items:end; gap:var(--g)}
.prow .person{flex:0 0 calc((100% - 6 * var(--g)) / 7); min-width:0}
.person{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center}
.person .av{width:100%; max-width:104px}
.person .av svg{display:block; width:100%; height:auto; overflow:visible; animation:float 4s ease-in-out infinite}
.person:nth-child(2n) .av svg{animation-delay:-1.3s} .person:nth-child(3n) .av svg{animation-delay:-2.4s}
.person .plate{margin-top:2px; font:700 clamp(7px,1.3cqw,12px) var(--font-body); overflow:hidden; text-overflow:clip; white-space:nowrap; color:var(--green); background:var(--sage); border-radius:8px 8px 0 0; padding:3px 6px; width:100%; max-width:104px}
.say{position:absolute; bottom:calc(100% - 6px); left:50%; transform:translateX(-50%) translateY(6px); width:156px; background:var(--blush); color:#3C3C3C; font-size:12.5px; line-height:1.3; padding:7px 10px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .4s, transform .4s; z-index:3}
.say::after{content:""; position:absolute; left:50%; bottom:-5px; width:12px; height:12px; background:var(--blush); transform:translateX(-50%) rotate(45deg); border-radius:2px}
.person.talk .say{opacity:1; transform:translateX(-50%)}
.person:first-child .say{left:-8px; transform:translateY(6px)}
.person:first-child.talk .say{transform:none}
.person:first-child .say::after{left:46px}
.person:last-child .say{left:auto; right:-8px; transform:translateY(6px)}
.person:last-child.talk .say{transform:none}
.person:last-child .say::after{left:auto; right:46px; transform:rotate(45deg)}
.say .need{display:inline-block; margin-left:4px; font:600 10px var(--font-body); padding:1px 7px; border-radius:999px; background:var(--warn-bg); color:var(--warn)}
.ground{height:74px; margin:0 -16px; background:linear-gradient(var(--mist),var(--sage)); border-top:3px solid var(--sage); position:relative}
.dogs{position:absolute; left:0; right:0; bottom:0; height:74px; pointer-events:none; z-index:2}
.dog{position:absolute; bottom:18px; width:72px; animation:stroll var(--t) linear infinite; animation-delay:var(--d)}
.dog .fl{animation:flip var(--t) steps(1) infinite; animation-delay:var(--d)}
.dog svg{display:block; width:100%; height:auto; animation:trot .5s ease-in-out infinite}
.dog .nm{position:absolute; left:50%; bottom:-15px; transform:translateX(-50%); white-space:nowrap; font:700 10px var(--font-body); color:#fff; padding:1px 7px; border-radius:999px; background:var(--c)}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@keyframes breathe{0%,100%{transform:scale(1,1)} 50%{transform:scale(1.015,1.03)}}
@keyframes trot{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}
@keyframes stroll{0%{left:var(--a)} 50%{left:var(--b)} 100%{left:var(--a)}}
@keyframes flip{0%{transform:scaleX(1)} 50%{transform:scaleX(-1)} 100%{transform:scaleX(1)}}
.blink{transform-box:fill-box; transform-origin:center; animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)} 96%{transform:scaleY(.08)}}
.tick{transform-box:view-box; transform-origin:98px 128px; animation:tick 8s steps(8) infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.steam{animation:steam 2.6s ease-in-out infinite}
@keyframes steam{0%{opacity:0; transform:translateY(3px)} 50%{opacity:.9} 100%{opacity:0; transform:translateY(-4px)}}
.wig{transform-box:fill-box; transform-origin:50% 0; animation:wig 4s ease-in-out infinite}
.wig.b{animation-delay:-1.3s} .wig.c{animation-delay:-2.6s}
@keyframes wig{0%,100%{transform:rotate(var(--r))} 50%{transform:rotate(calc(var(--r) + 6deg))}}
.glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.75} 50%{opacity:1}}
.pen{transform-box:fill-box; transform-origin:50% 100%; animation:pen 2.2s ease-in-out infinite}
@keyframes pen{0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(8deg)}}
.drop{animation:drop 2.4s ease-in infinite}
.drop.b{animation-delay:-.8s} .drop.c{animation-delay:-1.6s}
@keyframes drop{0%{opacity:0; transform:translateY(-6px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(8px)}}
.kick{transform-box:fill-box; transform-origin:50% 0; animation:kick 2.6s ease-in-out infinite}
.kick.b{animation-delay:-1.3s}
@keyframes beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.14)}}
.beat{transform-box:fill-box; transform-origin:50% 60%; animation:beat 1.6s ease-in-out infinite}
@keyframes kick{0%,100%{transform:rotate(3deg)} 50%{transform:rotate(-7deg)}}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .dog{left:var(--a)}
}

/* boxes */
.sec-h{font-size:24px; color:var(--green); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.sec-h span{font:500 12px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.t4w{container:t4/inline-size}
.top4{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:16px}
.pc{container:pc/inline-size; padding:16px; display:flex; flex-direction:column; gap:10px}
.pc .top{display:flex; align-items:center; gap:14px}
.pc .pf{flex:none; width:96px; height:96px; border-radius:22px; background:var(--blush); overflow:hidden; display:grid; align-items:end}
.pc .pf svg{display:block; width:100%; height:auto; transform-origin:50% 100%; animation:breathe 4s ease-in-out infinite}
.pc h3{font-size:22px; color:var(--green)}
.pc .role{color:var(--muted); font-size:13px}
.pc .hubn{font:500 12px var(--font-mono); color:var(--muted)}
.pc .st{display:flex; align-items:flex-start; gap:8px; font-size:14px}
.pc .st i{margin-top:7px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--olive); flex:none}
.dot.live{background:var(--ok)} .dot.needs{background:#E0A020} .dot.idle{background:#A5ADA7}
.pc .meta{font:500 12px var(--font-mono); color:var(--muted)}
.pc .go{margin-top:auto; padding-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.soonbtn{opacity:.6; cursor:default}
.big{display:grid; grid-template-columns:minmax(210px,.95fr) minmax(0,1fr); gap:6px 16px; padding:16px 20px 16px 10px; background:linear-gradient(160deg,var(--surface),var(--blush)); }
.big .scene>svg{display:block; width:100%; height:auto; overflow:visible}
.big .info{display:flex; flex-direction:column; gap:10px; justify-content:center}
.big h3{font-size:34px}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:16px; align-items:start}
.colg{display:flex; flex-direction:column; gap:12px}
.colg>h3{font-size:20px; color:var(--green); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.colg>h3 span{font:500 11px var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fine{font-size:13px; color:var(--muted); max-width:84ch}

@media (max-width:1280px){
  .side{position:static; width:auto; display:none; padding-right:max(22px, env(safe-area-inset-right,0px))}
  .side.open{display:flex}
  .main{margin-left:0; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
  .btn.menu-btn{display:inline-flex}
}
@media (max-width:900px){
  .olive{flex-direction:column; text-align:center}
  .bubble::before{left:50%; top:-9px; transform:translateX(-50%) rotate(45deg)}
}
.btn.soonbtn{opacity:.6; cursor:default}

/* Emma sitting at her desk */
.sit{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 4s ease-in-out infinite}
.sd{transform-box:fill-box; animation:deskwalk 14s linear infinite}
.sd.b{animation-duration:19s; animation-delay:-7s}
.sdf{transform-box:fill-box; transform-origin:center; animation:deskflip 14s steps(1) infinite}
.sd.b .sdf{animation-duration:19s; animation-delay:-7s}
@keyframes deskwalk{0%{transform:translateX(0)} 50%{transform:translateX(100px)} 100%{transform:translateX(0)}}
@keyframes deskflip{0%{transform:scaleX(1)} 50%{transform:scaleX(-1)} 100%{transform:scaleX(1)}}

/* responsive layout (container based, so it follows the space the cards really have) */
@container t4 (max-width:900px){
  .top4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big{grid-column:1/-1}
}
@container t4 (max-width:620px){
  .big{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding:16px}
  .big .scene{width:min(100%,380px)}
  .big .info{align-items:center}
}
@container t4 (max-width:330px){ .top4{grid-template-columns:minmax(0,1fr)} }
@container pc (max-width:640px){
  .pc:not(.big) .top{flex-direction:column; text-align:center}
  .pc:not(.big) .st{justify-content:center; text-align:center}
  .pc:not(.big) .meta{text-align:center}
  .pc:not(.big) .go{justify-content:center}
}
.big .go{margin-top:0}
@container t4 (max-width:620px){ .big .st,.big .go{justify-content:center} }
@container strip (max-width:760px){
  .floor{padding-inline:8px}
  .ground{margin:0 -8px}
  .say{width:min(150px,44cqw); font-size:11px; padding:6px 8px}
  .person:nth-child(2) .say{left:0; transform:translateY(6px)} .person:nth-child(2).talk .say{transform:none} .person:nth-child(2) .say::after{left:12px; transform:rotate(45deg)}
  .person:nth-child(9) .say{left:auto; right:0; transform:translateY(6px)} .person:nth-child(9).talk .say{transform:none} .person:nth-child(9) .say::after{left:auto; right:12px; transform:rotate(45deg)}
  .person:first-child .say::after{left:12px} .person:last-child .say::after{right:12px}
  .person:first-child .say{left:0} .person:last-child .say{right:0}
}
@container strip (max-width:520px){
  .floor{padding-top:96px}
  .dog{width:54px}
  .dog .nm{font-size:8px; padding:0 5px; bottom:-12px}
  .person .plate{padding:2px 1px; border-radius:5px 5px 0 0}
}