/* Start your journey: sits in a notch cut to its own shape, folds into a chat button on scroll,
   opens back up on hover or keyboard focus */
.journey{position:fixed;right:10px;bottom:10px;z-index:55;display:flex;align-items:center;height:52px;width:var(--jw,250px);background:var(--orange,#F26B1D);color:#063B40;text-decoration:none;font:800 11.5px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:width .55s cubic-bezier(.7,0,.2,1),background .25s,color .25s;overflow:hidden;white-space:nowrap;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
.journey:hover{background:#063B40;color:#fff}
.journey:focus-visible{outline:none;background:#063B40;color:#fff}
.journey .j-ico{flex:none;width:50px;height:52px;display:flex;align-items:center;justify-content:center;position:relative;padding-left:6px}
.journey .j-ico svg{position:absolute;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.journey .j-arrow{transform:none;opacity:1}
.journey .j-chat{transform:translateY(130%);opacity:0}
.journey .j-txt{padding-right:18px;transition:opacity .3s .1s}
.journey.reduced{width:56px}
.journey.reduced .j-txt{opacity:0;transition-delay:0s}
.journey.reduced .j-arrow{transform:translateY(-130%);opacity:0}
.journey.reduced .j-chat{transform:none;opacity:1}
.journey.reduced:hover,.journey.reduced:focus-visible{width:var(--jw,250px)}
.journey.reduced:hover .j-txt,.journey.reduced:focus-visible .j-txt{opacity:1;transition-delay:.15s}
@media (max-width:700px){.journey{height:48px}.journey .j-ico{width:48px;height:48px}.journey.reduced{width:52px}}
/* never let the page get wider than the screen (body overflow-x:hidden alone still lets phones pan sideways) */
html,body{overflow-x:hidden;overflow-x:clip}
main{overflow-x:clip}

/* ---------- 77Labs turquoise theme: light grid ground, teal gradient surfaces, orange accent ---------- */
:root{--deep:#063B40;--petrol:#0B6D72;--teal:#0F7F8C;--tq:#2EC4B6;--aqua:#5FE3D6;
  --tgrad:linear-gradient(135deg,#063B40 0%,#0B6D72 55%,#16A3A0 100%);
  --tgrid:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
/* the 77labs.ai hero grid, redrawn on a light ground */
.gridbg{background-color:var(--ground);background-image:linear-gradient(rgba(11,109,114,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(11,109,114,.085) 1px,transparent 1px);background-size:48px 48px}
.gridbg::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 92% 8%,rgba(46,196,182,.16),transparent 70%),radial-gradient(45% 50% at 0% 100%,rgba(242,107,29,.07),transparent 70%)}
/* dark surfaces become the teal gradient with the faint grid on top */
.phero,.cta-band,.dark-sec,.proof,.founding{background-color:var(--deep);background-image:var(--tgrid),radial-gradient(60% 70% at 85% 25%,rgba(95,227,214,.28),transparent 70%),var(--tgrad);background-size:48px 48px,48px 48px,100% 100%,100% 100%}
.phero::after{background:linear-gradient(180deg,rgba(6,59,64,.35),rgba(6,59,64,.05) 40%,rgba(6,59,64,.7))}
.phero .bgimg{opacity:.28;mix-blend-mode:luminosity}
.phero .lead{color:#D6EEEC}
.fix{background:var(--tgrad)}
.fix small{color:var(--aqua)}
.msgs span{background:var(--petrol)}
.msgs span:nth-child(even){background:#fff;color:var(--ink)}
.sh .bg::after{background:linear-gradient(135deg,rgba(6,59,64,.8),rgba(11,109,114,.55) 60%,rgba(22,163,160,.45))}
.bar.g{background:var(--deep)}
.bar.d{background:var(--petrol)}
.lbl::before{background:var(--tq)}
.dark-sec .lbl,.proof .lbl{color:var(--aqua)}
::selection{background:var(--tq);color:var(--deep)}