/* Home, in the round 5 Decagon style. Builds on ../site.css (type, buttons, hero, logos, try window, flow, dark chapter, close)
   and only adds what the home needs: the hero painting, the two products, the live loops, the channels flow and the city. */

/* ---------- hero: the city corner by day ---------- */
.hero--home .hero__art img{object-position:60% 72%}
.hero--home .hero__in .h1{max-width:540px}
.hero--home .hero__sub{color:#2c3329}

/* ---------- try an interview: the orb holds a microphone ---------- */
.uorb--mic{display:block}
.uorb__mic{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#fff}
.uorb__mic svg{width:58px;height:58px;filter:drop-shadow(0 4px 14px rgba(17,20,24,.18))}
a.demo__cta{display:inline-flex;align-items:center;justify-content:center}
/* a bigger window with a thinner green field around it */
.demo--home .demo__field{padding:22px;border-radius:26px}
.demo--home .demo__field .demo__card{max-width:none}
.demo--home .demo__field .demo__inner{padding:88px 100px 92px;gap:72px}
.demo--home .uorb{width:280px;height:280px}
.demo--home .demo__info{padding:46px 48px}
.demo--home .demo__info h2{font-size:34px}
.demo--home .demo__info .ticks li{font-size:19px}

/* ---------- two products, each as its own painting ---------- */
.prod{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prod__c{display:flex;flex-direction:column;min-width:0}
.prod__pic{position:relative;display:block;height:460px;border-radius:var(--r);overflow:hidden;background:var(--sky)}
.prod__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 70%;transition:transform 1.2s var(--ease)}
.prod__c:hover .prod__pic img{transform:scale(1.035)}
.prod__t{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:20px;padding:24px 2px 0}
.prod__t > span:first-child{display:flex;flex-direction:column;gap:6px}
.prod__t b{font-weight:400}
.prod__t > span:first-child > span{font-size:18px;line-height:1.45;color:var(--mute)}
.prod__go{width:52px;height:52px;border-radius:999px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(20,21,20,.08),0 8px 20px rgba(20,21,20,.08);transition:transform .3s var(--ease),background .2s}
.prod__go svg{width:20px;height:20px}
.prod__c:hover .prod__go{transform:translateX(4px)}

/* ---------- conversations that do something: the live home's loops, each over its caption in a white card ---------- */
.cv{margin-top:56px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.cv__c{grid-column:span 2;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,21,20,.03),0 14px 36px rgba(20,21,20,.05)}
.cv__c--lg{grid-column:span 3}
.cv__v{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f7f6f2}
.cv__c--lg .cv__v{aspect-ratio:16/9}
.cv__v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cv__v--fit video{inset:auto;left:50%;top:50%;width:114%;height:114%;transform:translate(-50%,-50%)}
.cv__t{padding:20px 24px 22px;border-top:1px solid var(--line);font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.012em}

/* in their own language: the greeting pill, its flag and the row of flags take turns */
.cv__v--lang{display:grid;place-items:center;background:radial-gradient(70% 60% at 88% 8%,rgba(183,217,192,.28),transparent 62%),linear-gradient(180deg,#f5f7f2,#faf9f5)}
.lang{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.lang__w{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(290px,84%);padding:12px 12px 12px 28px;background:#fff;border-radius:999px;
  box-shadow:0 1px 2px rgba(17,20,24,.05),0 10px 28px rgba(17,20,24,.08)}
.lang__w span{font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.02em;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lang__w img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(17,20,24,.08);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lang.is-swap .lang__w span,.lang.is-swap .lang__w img{opacity:0;transform:translateY(8px)}
.lang__row{list-style:none;margin:0;padding:0;display:flex;gap:9px}
.lang__row img{width:24px;height:24px;border-radius:50%;object-fit:cover;opacity:.5;filter:saturate(.55);box-shadow:0 0 0 1px rgba(17,20,24,.08);transition:opacity .3s,filter .3s,transform .3s var(--ease),box-shadow .3s}
.lang__row .is-on img{opacity:1;filter:none;transform:scale(1.12);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--green)}

/* ---------- wherever people are: the channels, the node and the tools, drawn like the staffing ATS band ---------- */
.chan .h2{color:#fff;max-width:760px}
.chan .flow__heads{margin-top:64px}
.chan .flow__in{gap:10px}
.chan .flow__in .chan__ch{height:54px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 18px;font-size:16px;color:rgba(255,255,255,.86);white-space:nowrap}
.chan__ch svg{width:19px;height:19px;flex:none;color:var(--mint);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:color .35s}
/* the shared flow turns a tile white when you point at it (or lights it on touch screens): keep the words readable */
.chan .flow__in .chan__ch{transition:background-color .35s,border-color .35s,color .35s}
.chan .flow__in .chan__ch:hover,.chan .flow__in .chan__ch.is-lit{color:var(--ink)}
.chan .flow__in .chan__ch:hover svg,.chan .flow__in .chan__ch.is-lit svg{color:var(--green)}

/* ---------- where voice interviews work best: the city, with the study types pinned on it ---------- */
.city__stage{position:relative;margin:48px 0 0;height:760px;overflow:hidden}
.city__art{position:absolute;left:50%;bottom:0;width:min(1416px,100%);height:auto;transform:translateX(-50%);mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.city__pins{position:relative;height:100%}
.city__pins{--pw:270px}
.city__pins > .pin-wrap{position:absolute;left:min(var(--x),calc(100% - var(--pw) - var(--gut)));top:var(--y);z-index:2}
.pin{position:relative;display:block;width:var(--pw,270px);color:var(--ink)}
.pin__c{position:relative;display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:center;padding:12px 16px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(17,20,24,.09);transition:box-shadow .25s,transform .25s var(--ease)}
.js-motion .pin__c{animation:pinfloat 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.9s)}
@keyframes pinfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pin:hover .pin__c{box-shadow:0 18px 44px rgba(17,20,24,.15)}
.pin__c::after{content:"";position:absolute;left:26px;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.pin__i{width:38px;height:38px;border-radius:11px;border:1px solid #e3e7e2;display:grid;place-items:center;color:var(--green)}
.pin__i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pin b{display:block;font-size:18px;line-height:1.2;font-weight:550;letter-spacing:-.01em}
.pin small{display:block;margin-top:3px;font-size:15px;line-height:1.35;color:var(--mute)}
.pin__d{position:absolute;left:27px;bottom:-34px;width:12px;height:12px;border-radius:999px;background:var(--green);box-shadow:0 0 0 6px rgba(43,106,70,.15)}

.close--home > img{object-position:50% 100%}

/* motion off (no JavaScript, or reduced motion): the drifting rows become still, wrapped rows with every item showing */
html:not(.js-motion) .marq{-webkit-mask-image:none;mask-image:none}
html:not(.js-motion) .marq__track{width:auto;justify-content:center}
html:not(.js-motion) .logos .marq .marq__set{flex-wrap:wrap;justify-content:center;height:auto;row-gap:18px;padding:0 var(--gut)}
html:not(.js-motion) .marq__set[aria-hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .marq{-webkit-mask-image:none;mask-image:none}
  .js-motion .marq__track,.marq__track{width:auto;justify-content:center}
  .logos .marq .marq__set{flex-wrap:wrap;justify-content:center;height:auto;row-gap:18px;padding:0 var(--gut)}
  .marq__set[aria-hidden]{display:none}
  .js-motion .demo__live i{animation:none}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .demo--home .demo__field .demo__inner{padding:64px 56px;gap:48px}
  .city__stage{height:700px}
  .city__pins{--pw:240px}
}
@media (max-width:900px){
  .prod__pic{height:380px}
  .cv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv__c,.cv__c--lg{grid-column:auto}
  .cv__c:last-child{grid-column:1 / -1}
  .cv__c:last-child .cv__v{aspect-ratio:16/9}
  .city__stage{height:auto;padding-bottom:300px}
  .city__pins{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .city__pins > .pin-wrap{position:static}
  .pin{width:auto}
  .city__pins > .pin-wrap{left:auto}
  .pin__c::after,.pin__d{display:none}
  .js-motion .pin__c{animation:none}
  .city__art{width:900px;max-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 80%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
}

/* ---------- phone: a row of cards becomes a swipeable row (like the staffing industries), not a tall stack ---------- */
@media (max-width:640px){
  [data-swipe]{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut)}
  [data-swipe]::-webkit-scrollbar{display:none}
  [data-swipe] > *{scroll-snap-align:start}
  .prod{margin-top:32px}
  .prod > .prod__c{flex:0 0 84%}
  .cv{margin-top:32px}
  .cv > .cv__c{flex:0 0 84%}
  .cv__v,.cv__c--lg .cv__v,.cv__c:last-child .cv__v{aspect-ratio:1/1}
  .city__pins[data-swipe]{display:flex;width:auto;max-width:none;height:auto;margin:0;padding-top:4px;padding-bottom:16px}
  .city__pins + .ind-dots{position:relative;z-index:2;margin-top:2px}
  .city__pins > .pin-wrap{flex:0 0 78%;position:static}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .hero--home .hero__art img{object-position:84% 100%}
  .prod__pic{height:340px}
  .prod__t{padding-top:18px}
  .prod__t > span:first-child > span{font-size:17px}
  .prod__go{width:46px;height:46px}
  .close--home > img{object-position:12% 100%}
  .demo--home .demo__field{padding:10px;border-radius:22px}
  .demo--home .demo__field .demo__inner{padding:30px 16px 18px;gap:24px}
  .demo--home .uorb{width:180px;height:180px}
  .demo--home .demo__stage{gap:22px}
  .demo--home .demo__info{padding:24px 22px}
  .demo--home .demo__info h2{font-size:26px}
  .demo--home .demo__info .ticks{margin-top:16px;gap:12px}
  .demo--home .demo__info .ticks li{font-size:17px}
  .cv__v,.cv__c--lg .cv__v{aspect-ratio:1/1}
  .cv__v--fit video{width:100%;height:100%}
  .cv__t{padding:16px 18px 18px;font-size:19px}
  .lang__w span{font-size:28px}
  .chan .flow__in{flex-wrap:wrap;gap:8px}
  .chan .flow__in .chan__ch{flex:1 1 calc(50% - 4px);height:52px;min-width:0;padding:0 12px;gap:9px;font-size:15px}
  /* without JavaScript the phone keeps the wide poster, so the box keeps its shape */
  html:not(.js-motion) .cv__v,html:not(.js-motion) .cv__c--lg .cv__v{aspect-ratio:16/9}
  html:not(.js-motion) .cv__v--fit{aspect-ratio:4/3}
  .chan__ch svg{width:18px;height:18px}
  .city__stage{margin-top:28px;padding-bottom:250px}
  .city__art{width:640px}
  .pin__c{padding:11px 14px 11px 11px}
}
@media (prefers-reduced-motion:reduce){
  .js-motion .pin__c{animation:none}
}