/* The front door: two halves, one per product, split by a lightning bolt in the app's caption yellow.
   Streams (Shorts) is violet like a chat-heavy stream; Meetings (Business) is green. Hovering a half
   pushes the bolt toward the other one; the bolt strikes once when the page loads. */
@property --mid{syntax:"<percentage>";inherits:true;initial-value:50%}

body.home{background:#0a7d55;min-height:100vh;display:flex;flex-direction:column;color:#fff}
.home{--violet-deep:#4326d9;--green-deep:#0a7d55;--bolt:clamp(96px,11vw,170px)}

/* ---- top bar sits on both colours */
.home-top{position:absolute;inset:0 0 auto 0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 32px;pointer-events:none}
.home-top>*{pointer-events:auto}
.home-top .mark{color:#fff;margin:0}
.home-top .ask{margin:0;font-stretch:75%;font-weight:750;font-size:19px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:7px 18px;box-shadow:3px 3px 0 var(--ink)}
.home-top nav{justify-self:end;display:flex;gap:22px}
.home-top nav a{color:#fff;font-weight:600;text-decoration:none}
.home-top nav a:hover{text-decoration:underline;color:#fff}

/* ---- the split */
.door{--mid:50%;position:relative;flex:1;display:grid;grid-template-columns:var(--mid) 1fr;min-height:max(640px,calc(100vh - 56px));
  transition:--mid .45s cubic-bezier(.2,.8,.2,1);isolation:isolate}
.door:has(.streams:hover){--mid:54%}
.door:has(.meets:hover){--mid:46%}
/* the violet half: its right edge follows the bolt's left edge */
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--violet-deep);
  background-image:radial-gradient(120% 80% at 0% 100%,rgba(18,181,229,.28),transparent 60%);
  clip-path:polygon(0 0,calc(var(--mid) - var(--bolt)/2 + var(--bolt)*.64) 0,calc(var(--mid) - var(--bolt)/2 + var(--bolt)*.18) 52%,
    calc(var(--mid) - var(--bolt)/2 + var(--bolt)*.40) 52%,calc(var(--mid) - var(--bolt)/2 + var(--bolt)*.24) 100%,0 100%)}
.door::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--green-deep);
  background-image:radial-gradient(120% 80% at 100% 100%,rgba(255,230,0,.16),transparent 60%)}

.side{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:34px;padding:128px 7vw 56px;color:#fff;text-decoration:none;min-width:0}
.side.streams{padding-right:calc(var(--bolt)/2 + 4vw)}
.side.meets{padding-left:calc(var(--bolt)/2 + 4vw)}
.side:hover{color:#fff}
.side:focus-visible{outline:4px solid var(--cap);outline-offset:-10px;border-radius:18px}
.side-in{max-width:30em}
.side h1{font-size:clamp(44px,5.6vw,86px);color:#fff;margin-bottom:.3em}
.side .pitch{font-size:19px;line-height:1.5;max-width:26em;color:rgba(255,255,255,.92)}
.works{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 30px}
.works li{font-weight:650;font-size:15px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35)}
.side .go{pointer-events:none}
.side:hover .go{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}

/* the previews: a Short on the left, a page of notes on the right */
.peek{display:flex}
.streams .peek{justify-content:flex-start}
.meets .peek{justify-content:flex-start}
.peek .short{max-width:200px;justify-self:auto;border-radius:20px;box-shadow:8px 8px 0 rgba(26,20,51,.55);transform:rotate(-3deg)}
.peek .short .cap{font-size:20px}
.peek .short .hook{font-size:10px}
.minutes.mini{max-width:330px;font-size:14px;transform:rotate(2deg);color:var(--ink);box-shadow:8px 8px 0 rgba(26,20,51,.55);padding:16px 18px}
.minutes.mini .minutes-head b{font-size:18px}
.minutes.mini .minutes-sec{color:var(--green-deep);margin:10px 0 4px}
.minutes.mini p{margin:0 0 5px}
.export-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:12px;padding-top:10px;border-top:2px solid var(--ink);font-size:13px;font-weight:650}
.export-row span{margin-right:3px}
.export-row i{font-style:normal;font-weight:700;font-size:12.5px;padding:2px 8px;border-radius:999px;background:var(--green-deep);color:#fff}

/* ---- the bolt */
.bolt-h{display:none}
.bolt{position:absolute;top:0;bottom:0;left:calc(var(--mid) - var(--bolt)/2);width:var(--bolt);height:100%;z-index:3;pointer-events:none;overflow:visible}
.bolt-fill{fill:var(--cap);stroke:var(--ink);stroke-width:5px;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 18px rgba(255,230,0,.55))}

@media (prefers-reduced-motion:no-preference){
  .bolt-h{animation:strike-h .55s cubic-bezier(.3,1.4,.5,1) .1s both}
  .bolt{animation:strike .55s cubic-bezier(.3,1.4,.5,1) .1s both}
  .door::before,.door::after{animation:lit .7s ease-out .1s both}
  .side-in,.peek{animation:arrive .5s ease-out .45s both}
}
@keyframes strike{0%{clip-path:inset(0 0 100% 0);filter:brightness(2.2)}70%{clip-path:inset(0 0 0 0);filter:brightness(1.8)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes strike-h{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes lit{0%{filter:brightness(.55)}35%{filter:brightness(1.35)}100%{filter:none}}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.peek .short,.minutes.mini{animation:none}

.home-foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;padding:16px 32px;background:var(--ink);font-size:14px}
.home-foot a{color:#fff;text-decoration:none}
.home-foot a:hover{text-decoration:underline;color:#fff}
.home-foot span{margin-left:auto;color:#bdb8d6}
.home-foot .tm{flex-basis:100%;color:#9f9abb;font-size:12.5px;line-height:1.5}

/* ---- tablet and phone: the halves stack and the bolt lies across */
@media (max-width:860px){
  .home-top{position:relative;grid-template-columns:1fr auto;background:var(--violet-deep);padding:16px 20px}
  .home-top .ask{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:14px;font-size:17px}
  .door{grid-template-columns:1fr;grid-auto-rows:1fr;min-height:0;transition:none}
  .door:has(.streams:hover),.door:has(.meets:hover){--mid:50%}
  .door::before{clip-path:polygon(0 0,100% 0,100% calc(50% - 35px + 42px),54% calc(50% - 35px + 18px),60% calc(50% - 35px + 35px),0 calc(50% - 35px + 7px))}
  .side{padding:44px 20px 64px;gap:26px}
  .side.streams{padding-right:20px}
  .side.meets{padding-left:20px;padding-top:72px}
  .peek .short{max-width:150px}
  .peek .short .cap{font-size:16px}
  .minutes.mini{max-width:300px}
  .bolt{display:none}
  .bolt-h{display:block;position:absolute;left:0;right:0;top:calc(50% - 35px);width:100%;height:70px;z-index:3;pointer-events:none}
  .side .pitch{font-size:17px}
}
@media (max-width:420px){.works li{font-size:14px}.peek{display:none}}