/* Homepage. Desktop numbers match the reference frame at 1440. */

.home{
  display:grid;
  grid-template-columns:560px minmax(0,1fr);
  align-items:start;
}

.intro{
  position:sticky;
  top:0;
  height:100vh;
  padding:214px 48px 48px 64px;
}
/* Same slot as the top nav wordmark: 64px from the left, centered in an 82px bar. */
.intro .logo{
  position:absolute;
  left:64px;
  top:0;
  height:82px;
  display:flex;
  align-items:center;
}
.intro .face{
  width:88px;
  height:88px;
  border-radius:999px;
  padding:3px;
  background:var(--lilac-ring);
}
.intro .face img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:translateX(9.756%) scale(1.525);
  transform-origin:center 48%;
}
.intro .face-crop{
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden;
}
.intro h1{
  margin:28px 0 0;
  max-width:440px;
  font-family:var(--font-display);
  font-stretch:125%;
  font-weight:700;
  font-size:39px;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.intro h1 .rest{color:var(--h1-rest)}
.intro .lede{
  margin:22px 0 0;
  max-width:400px;
  font-size:17px;
  line-height:1.5;
  color:var(--muted);
}
.hnav{margin-top:26px}
.hsent{
  margin:0;
  font-size:17px;
  line-height:1.5;
  color:var(--muted);
}
.ul{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  background-image:linear-gradient(var(--lilac),var(--lilac));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 3px;
  padding:1px 3px;
  margin:0 -3px;
  border-radius:3px;
}

.rail{
  padding:20px 20px 64px 0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.card{
  position:relative;
  display:block;
  height:780px;
  border-radius:34px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
}
/* Only the card on screen carries a shadow. The rest stay flat. */
.rail > .card{
  box-shadow:0 6px 14px rgba(23,26,51,0);
  transition:box-shadow .35s ease;
}
.rail > .card.is-inview{
  box-shadow:0 6px 14px rgba(23,26,51,.07);
}
/* Hover lifts only the picture, and the button darkens a touch. */
.card .shipped-visual,
.card.quest .snap{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-origin:center center}
.card:hover .shipped-visual,
.card:hover.quest .snap{transform:scale(1.015)}
.card .cta,.card .shipped-cta{transition:filter .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .cta,.card:hover .shipped-cta{filter:brightness(.9)}
.quest{
  background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(23,26,51,.10);
}
.quest .pills{left:30px;top:28px}
.quest .sq{
  font-family:var(--font-body);
  font-stretch:100%;
  font-size:13px;
  font-weight:500;
  line-height:32px;
  letter-spacing:0;
  text-transform:none;
}
.card-hit{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  color:transparent;
  font-size:0;
}
.quest-copy{
  position:absolute;
  left:32px;
  right:28px;
  bottom:32px;
  z-index:6;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  pointer-events:none;
}
.pills{pointer-events:none}
.quest-copy .stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:560px;
}
.kicker{
  font-family:var(--font-heading);
  font-stretch:100%;
  font-weight:600;
  font-size:15px;
}
.quest-title{
  font-family:var(--font-display);
  font-stretch:125%;
  font-weight:700;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.quest-meta{font-size:15px;font-weight:600}

.shipped-label{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 8px 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--subtle);
}
.shipped-label .hair{flex:1;height:1px;background:rgba(22,24,42,.12)}

/* White card, like the case-study reference: the picture sits in a small
   white frame, and the words live on the white field under it. */
.shipped{
  background:#fff;
  color:var(--ink);
  border:1.5px solid #fff;
  padding:8px 8px 0;
  height:auto;
  display:flex;
  flex-direction:column;
}
/* The glow sits in the picture, behind the animation, same place on every shipped card. */
/* The stages sit on top of the card. Keep them clear so the shared dots and glow show through,
   and drop each card's own dot layer, glow, and gradient rim. */
.journeys-stage,
.knotel-stage,
.card.has-stage .stage-frame{
  background:transparent !important;
}
.journeys-stage > div[style*="201,203,224"],
.knotel-stage > div[style*="201,203,224"],
.journeys-stage > div[style*="143,123,255"],
.knotel-stage > div[style*="47,111,228"]{display:none}
.journeys-stage > div[style*="linear-gradient(180deg"],
.knotel-stage > div[style*="linear-gradient(180deg"]{
  background:linear-gradient(180deg, rgba(23,26,51,0) 0%, rgba(23,26,51,.45) 58%, rgba(23,26,51,.7) 100%) !important;
}

.card.shipped .shipped-visual{isolation:isolate}
.card.shipped .shipped-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  width:86%;
  height:86%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:radial-gradient(closest-side,rgba(143,123,255,.22),rgba(143,123,255,0));
  pointer-events:none;
  z-index:-1;
}
.shipped-visual{
  position:relative;
  flex:none;
  width:100%;
  display:grid;
  place-items:center;
  border-radius:26px;
  overflow:hidden;
  background-color:#171A33;
  background-image:radial-gradient(rgba(201,203,224,.08) 1px,transparent 1px);
  background-size:18px 18px;
}
.flow-scale{
  width:min(100%,700px);
  aspect-ratio:700 / 480;
  position:relative;
  container-type:inline-size;
}
.flow-scale .flow{
  position:absolute;
  left:0;
  top:0;
  transform-origin:top left;
  transform:scale(calc(100cqw / 700px));
}
.shipped-shot{
  max-height:100%;
  width:auto;
  max-width:78%;
  object-fit:contain;
}
/* Same type scale and copy width as the side quest card. */
.shipped-copy{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding:22px 24px 24px;
}
.shipped-copy .stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:560px;
}
.shipped-co{
  font-family:var(--font-display);
  font-stretch:125%;
  font-size:15px;
  font-weight:700;
  color:#8E919E;
}
.shipped-hl{
  margin:0;
  font-family:var(--font-display);
  font-stretch:125%;
  font-weight:700;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--ink);
}
.shipped-result{
  font-size:15px;
  font-weight:600;
  color:#3A3D52;
}
/* Yellow-green, a step lighter so it stands off the white card. Same color on the pulse. */
.gain{color:#7A8C16;font-weight:700}
.bn .live,
.bn .live::after{background:#7A8C16}
.shipped-cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  background:#fff;
  color:#171A33;
  font-size:15px;
  font-weight:600;
  box-shadow:inset 0 0 0 1.5px rgba(23,26,51,.16);
}

.topbar{display:none}

/* Below desktop the words sit under the picture, and the purple reaches them sooner than it reaches the button on the big card. */
@keyframes inkHlate{0%,33.10%{color:#171A33}33.70%,96.50%{color:#fff}96.80%,100%{color:#171A33}}
@keyframes inkElate{0%,33.10%{color:rgba(23,26,51,.55)}33.70%,96.50%{color:rgba(255,255,255,.72)}96.80%,100%{color:rgba(23,26,51,.55)}}
@keyframes inkLlate{0%,33.10%{color:#26419C}33.70%,96.50%{color:#E4DEFF}96.80%,100%{color:#26419C}}
@keyframes inkBlate{0%,33.10%{background:#26419C;color:#fff}33.70%,96.50%{background:#fff;color:#171A33}96.80%,100%{background:#26419C;color:#fff}}

@media (max-width:1199px){
  /* Below desktop the copy sits under the animation, with a short gap,
     instead of floating over a tall card. The phone is centered in that frame. */
  .snap-fit{
    top:50%;
    transform-origin:center center;
    transform:translate(-50%, -50%) translateY(calc(32px * min(100cqw / 852px, 100cqh / 776px))) scale(min(calc(100cqw / 852px), calc(100cqh / 776px)));
  }
  .card.quest{height:auto}
  .quest .snap{
    position:relative;
    inset:auto;
    height:auto;
    width:100%;
    aspect-ratio:852 / 776;
    background:transparent;
  }
  /* One purple field for the whole card, dots included, so it continues under the words.
     The layer inside the phone scene is hidden here: it was a second grid, shrunk by the scene's scale. */
  .card.quest::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:inherit;
    pointer-events:none;
    background-color:#7458FF;
    background-image:
      linear-gradient(to top, rgba(32,10,100,.48) 0%, rgba(32,10,100,0) 50%),
      radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.2px);
    background-size:100% 100%, 16px 16px;
    animation-name:revealCard;
    animation-duration:21.18s;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-timing-function:linear;
    --cx:50%;
    --cy:40%;
    --fe:160px;
    -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv));
    mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--rv) - var(--fe)), transparent var(--rv));
  }
  .quest .snap-reveal{visibility:hidden}
  .card.quest .stage-wash{background:transparent !important}
  /* The photo fades out at #F6F5F4. The card under the words uses that same color, so the cut doesn't read as a white bar. */
  .card.quest{background:#F6F5F4}
  .quest .stage-wash::after{content:none}
  /* As the purple opens, the bedroom clears so that one dotted field shows through. */
  .quest .stage.room{
    animation-name:revealC;
    animation-duration:21.18s;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-timing-function:linear;
    --cx:50%;
    --cy:350px;
    --fe:110px;
    -webkit-mask-image:
      radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--rv) - var(--fe)), #000 var(--rv)),
      radial-gradient(ellipse 48% 46% at 50% 52%, #000 78%, transparent 100%);
    mask-image:
      radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--rv) - var(--fe)), #000 var(--rv)),
      radial-gradient(ellipse 48% 46% at 50% 52%, #000 78%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  .quest .pills{z-index:4}
  /* The purple reaches the words later than it reaches the phone, so the type waits to turn white. */
  .quest-copy .kicker{animation-name:inkElate !important}
  .quest-copy .quest-title{animation-name:inkHlate !important}
  .quest-copy .quest-meta{animation-name:inkLlate !important}
  .quest-copy .cta{animation-name:inkBlate !important}
  .quest .quest-copy{
    position:relative;
    inset:auto;
    margin-top:0;
    padding:12px 24px 24px;
  }
}
@media (max-width:1199px) and (min-width:900px){
  .home{grid-template-columns:420px minmax(0,1fr)}
  .intro{padding-left:40px;padding-right:32px}
  .intro h1,.intro .lede{max-width:none}
  .card{height:min(680px,78vh)}
  .card.quest,.card.shipped{height:auto}
}

@media (max-width:899px){
  .home{display:block}
  .topbar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:40;
    height:64px;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    background:rgba(241,241,245,.92);
    backdrop-filter:blur(10px);
  }
  .topbar nav{display:flex;align-items:center;gap:22px}
  .topbar nav a,.topbar .git{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:15px;
    font-weight:500;
    text-decoration:none;
    color:var(--ink);
  }
  .home{padding-top:64px}
  .intro{
    position:static;
    height:auto;
    padding:28px 16px 8px;
  }
  .intro .logo{display:none}
  .intro h1,.intro .lede{max-width:none}
  .intro h1{margin-top:20px}
  .intro .lede{margin-top:16px}
  .hnav{display:none}
  .rail{padding:16px 16px 48px}
  .card{height:auto;aspect-ratio:4 / 5}
  .card.quest{aspect-ratio:auto}
  .quest .quest-copy{padding:8px 20px 20px}
  .quest-copy{left:20px;right:16px;bottom:20px}
  .quest-copy,.shipped-copy{flex-direction:column;align-items:flex-start}
  .quest .quest-copy{left:auto;right:auto;bottom:auto}
  /* The two labels are wider than the picture. Stack them on the white
     card, above the picture, and let the card grow instead of clipping them. */
  .card.quest.has-ch .pills{
    position:relative;
    order:-1;
    left:auto;
    top:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin:4px 4px 12px;
    max-width:100%;
  }
  /* The labels no longer sit on the picture, so the phone can move back up. */
  .card.quest.has-ch .pwrap{top:64px}
  /* The label row needs the top of the frame. Drop the phone just enough to clear it. */
  .snap-fit{
    transform:translate(-50%, -50%) translateY(calc(88px * min(100cqw / 852px, 100cqh / 776px))) scale(min(calc(100cqw / 852px), calc(100cqh / 776px)));
  }
}

/* The picture keeps the 856×780 stage shape. The words sit under it, on the white card. */
.card.has-stage{
  height:auto;
  aspect-ratio:auto;
}
.card.has-stage .shipped-visual{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:856 / 780;
  display:block;
  overflow:hidden;
  container-type:size;
}
.stage-frame{
  position:absolute;
  left:0;
  top:0;
  width:856px;
  height:780px;
  transform-origin:0 0;
  transform:scale(calc(100cqw / 856px));
  pointer-events:none;
}
.sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:599px){
  /* The map is wider than a phone. Hide it and keep the phone in the middle of the stage. */
  .journeys-stage .gfade{visibility:hidden}
  .journeys-stage .phone{left:296px !important}
}

/* Transactional stays on the dark card. The light window sits above the words,
   so the light type stays on the dark background. */
.card.has-tx{
  height:auto;
  display:flex;
  flex-direction:column;
  cursor:default;
}
.card.has-tx:hover .shipped-visual{transform:none}
.card.has-tx .shipped-visual{
  position:relative;
  inset:auto;
  left:0;
  right:0;
  top:auto;
  bottom:auto;
  width:100%;
  height:auto;
  aspect-ratio:1184 / 740;
  display:block;
  overflow:hidden;
  container-type:size;
  flex:none;
}
.card.has-tx .shipped-copy{
  position:relative;
  inset:auto;
  left:auto;
  right:auto;
  bottom:auto;
  padding:28px 32px 32px;
}
.tx-frame{
  position:absolute;
  left:0;
  top:0;
  width:1184px;
  height:740px;
  transform-origin:0 0;
  transform:scale(calc(100cqw / 1184px));
  pointer-events:none;
}

@media (max-width:899px){
  .card.has-tx{aspect-ratio:auto}
  .card.has-tx .shipped-copy{
    left:auto;
    right:auto;
    bottom:auto;
    padding:20px 20px 22px;
  }
}

/* The scene's own frame is dropped so the card's white frame and the
   picture's navy are the only backgrounds. */
.card.has-atl{
  height:auto;
  aspect-ratio:auto;
  display:flex;
  flex-direction:column;
}
.card.has-atl .shipped-visual{
  position:relative;
  inset:auto;
  left:0;
  right:0;
  top:auto;
  bottom:auto;
  width:100%;
  height:auto;
  display:block;
  overflow:hidden;
  flex:none;
  border-radius:26px;
  background-color:#171A33;
  background-image:radial-gradient(rgba(201,203,224,.08) 1px,transparent 1px);
  background-size:18px 18px;
}
.card.has-atl .atl-hero,
.card.has-atl .atl-hero-m{
  border:0;
  border-radius:0;
  background:transparent;
}
.card.has-atl .atl-hero::before,
.card.has-atl .atl-hero-m::before,
.card.has-atl .atl-hero::after,
.card.has-atl .atl-hero-m::after{display:none}
.card.has-atl{cursor:default}
.card.has-atl:hover .shipped-visual{transform:none}
.soon{
  flex:none;
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  font-size:14px;
  font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.soon i{display:none}
.card.shipped .soon{
  background:rgba(23,26,51,.06);
  color:#3A3558;
  box-shadow:inset 0 0 0 1px rgba(23,26,51,.16);
}
.card.shipped .soon i{background:#6A6D80}
.card.quest .soon{
  background:rgba(23,26,51,.06);
  color:#3A3558;
  box-shadow:inset 0 0 0 1px rgba(23,26,51,.16);
}
.card.quest .soon i{background:#6B5BFF}
.card.quest,
.card.shipped{cursor:default}
.card.has-atl .shipped-copy{
  position:relative;
  inset:auto;
  left:auto;
  right:auto;
  bottom:auto;
  padding:22px 24px 24px;
}
@media (max-width:899px){
  .card.has-atl .shipped-copy{
    left:auto;
    right:auto;
    bottom:auto;
    padding:4px 20px 22px;
  }
}
/* The picture's own fill, frame, and bottom fade would cover the shared card background. */
.card.has-stage .stage-frame{
  background:transparent !important;
  padding:0 !important;
}
.card.has-stage .journeys-stage,
.card.has-stage .knotel-stage{
  width:856px !important;
  height:780px !important;
  background:transparent !important;
  border-radius:0 !important;
}
.journeys-stage > div[style*="rgba(201,203,224,.08)"],
.journeys-stage > div[style*="rgba(143,123,255,.22)"],
.knotel-stage > div[style*="rgba(201,203,224,.08)"],
.knotel-stage > div[style*="rgba(47,111,228,.22)"],
.journeys-stage > div[style*="linear-gradient(180deg, rgba(23,26,51"],
.knotel-stage > div[style*="linear-gradient(180deg, rgba(23,26,51"]{display:none}

/* Same white card as shipped work. The lilac stays in the picture,
   inside the white frame. The words sit on the white field under it. */
.card.quest.has-ch{
  height:auto;
  aspect-ratio:auto;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1.5px solid #fff;
  padding:8px 8px 0;
}
.card.quest.has-ch::before{content:none;animation:none}
.card.quest.has-ch .closet-card{
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:856 / 780;
  flex:none;
  container-type:size;
  border-radius:26px;
  overflow:hidden;
}
.card.quest.has-ch .hstage{
  position:absolute;
  inset:0;
  height:auto;
  border-radius:0;
  background:radial-gradient(78% 88% at 50% 28%, #F3EAFF 0%, #C4A4FF 40%, #7C4FE8 100%);
}
.card.quest.has-ch .pwrap{
  top:84px;
  transform:scale(calc((100cqh - 128px) / 844px));
  transform-origin:50% 0;
}
.card.quest.has-ch .quest-copy{
  position:relative;
  inset:auto;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:6;
  padding:22px 24px 24px;
}
.card.quest.has-ch .quest-copy .quest-title,
.card.quest.has-ch .quest-copy .quest-meta,
.card.quest.has-ch .quest-copy .cta{animation:none !important}
.card.quest.has-ch .quest-title{color:#171A33}
.card.quest.has-ch .quest-meta{
  max-width:520px;
  color:#3A3558;
  font-weight:500;
}
.card.quest.has-ch .quest-meta b{color:#171A33;font-weight:600}
.card.quest.has-ch .cta{background:#26419C;color:#fff}
.card.quest.has-ch:hover .closet-card .phone .cta{filter:none}

/* Narrower than the wide desktop, but still two columns: the words sit
   under the picture and the card grows. The picture keeps the size the
   column width gives it. */
@media (max-width:1440px){
  .card.has-stage,
  .card.quest.has-ch{
    aspect-ratio:auto;
    height:auto;
    display:flex;
    flex-direction:column;
  }
  .card.has-stage .shipped-visual{
    position:relative;
    inset:auto;
    left:0;
    right:0;
    top:auto;
    bottom:auto;
    width:100%;
    height:auto;
    aspect-ratio:856 / 780;
    flex:none;
  }
  .card.has-stage .shipped-copy,
  .card.quest.has-ch .quest-copy{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    bottom:auto;
    padding:22px 28px 28px;
  }
  .card.quest.has-ch .closet-card{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:856 / 780;
    flex:none;
  }
  /* Clear the "Built and testing" label, and leave a gap under the phone. */
  .card.quest.has-ch .pwrap{
    top:84px;
    transform-origin:50% 0;
    transform:scale(calc((100cqh - 128px) / 844px));
  }
  /* Same picture height as the closet card. The scenes were pinned to the
     top of that picture; shift each one so it sits in the middle. */
  .card.has-atl .shipped-visual,
  .card.has-tx .shipped-visual{
    aspect-ratio:856 / 780;
  }
  .card.has-atl .shipped-visual{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .card.has-atl .atl-hero{
    width:106%;
    max-width:none;
    flex:none;
  }
  .card.has-stage[data-case="attentive"] .stage-frame{
    transform-origin:0 0;
    transform:translate(calc(50cqw - 426px * 100cqw / 856px), calc(50cqh - 314px * 100cqw / 856px)) scale(calc(100cqw / 856px));
  }
  .card.has-stage[data-case="knotel"] .stage-frame{
    transform-origin:0 0;
    /* The phone draws at 580px, then sits at scale(.93). Match the side-quest phone, which fills the picture minus 128px. */
    transform:translate(calc(50cqw - 426px * (100cqh - 128px) / (580px * .93)), calc(50cqh - 292px * (100cqh - 128px) / (580px * .93))) scale(calc((100cqh - 128px) / (580px * .93)));
  }
  .card.has-tx .tx-frame{
    transform-origin:0 0;
    transform:translate(calc(50cqw - 592px * 100cqw / 1184px * 1.1), calc(50cqh - 370px * 100cqw / 1184px * 1.1)) scale(calc(100cqw / 1184px * 1.1));
  }
}

@media (max-width:899px){
  .rail{padding-top:36px}
  .card.has-stage,
  .card.quest.has-ch,
  .card.has-atl,
  .card.has-tx{
    aspect-ratio:auto;
    height:auto;
  }
  .card.has-stage .shipped-copy,
  .card.quest.has-ch .quest-copy,
  .card.has-atl .shipped-copy,
  .card.has-tx .shipped-copy{
    flex-direction:column;
    align-items:flex-start;
    padding:18px 20px 22px;
  }
  .card .soon{align-self:flex-start}
  /* Keep the closet picture and phone on the same frame as the other cards.
     A taller stage here made the phone much larger once the cards stack. */
  .card.has-atl .shipped-visual{
    display:block;
    padding:0;
  }
  .card.has-atl .atl-hero,
  .card.has-atl .atl-hero-m{
    width:100%;
    height:100%;
    max-width:none;
    flex:none;
  }
  .card.has-tx .shipped-visual{
    aspect-ratio:980 / 560;
    padding:0;
  }
  .card.has-tx .tx-frame{
    transform:translate(calc(50cqw - 592px * 100cqw / 980px), calc(20px - 150px * 100cqw / 980px)) scale(calc(100cqw / 980px));
  }
}

/* One swipe settles on the next project, instead of stopping halfway through it.
   The browser eases the card into that spot and holds it until the next swipe. */
html.home-page{
  scroll-snap-type:y mandatory;
  scroll-padding-top:20px;
  scroll-padding-bottom:28px;
}
html.home-page .rail > .card{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
@media (max-width:899px){
  html.home-page{scroll-padding-top:64px}
  html.home-page .intro{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}

@media (prefers-reduced-motion:reduce){
  html.home-page{scroll-snap-type:none}
  .rail > .card{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .stage-slot .tap,
  .stage-slot .cursor,
  .stage-slot .swipe,
  .tx-stage .cursor{display:none}
  .journeys-stage .caret,
  .journeys-stage .dot,
  .journeys-stage .tapring,
  .journeys-stage .live::after,
  .knotel-stage .caret,
  .knotel-stage .tapring,
  .knotel-stage .go .spark,
  .tx-stage .caret{animation:none}
}

/* The picture's shape is reserved even while its animation is stopped.
   If the box collapsed, the next scroll snap would jump. */
.card .shipped-visual.dc-slot{
  height:auto;
  min-width:0;
  container-type:normal;
  overflow:hidden;
  background:transparent;
}
.card .shipped-visual.dc-slot,
.card.has-atl .shipped-visual{
  aspect-ratio:844 / 720 !important;
}
.card.quest.has-ch .closet-card{
  aspect-ratio:auto;
  height:auto;
  min-width:0;
  container-type:normal;
  overflow:hidden;
}
.closet-fit{
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:844 / 720;
}
/* Stacked layout: the Atlassian phone scene is tall. Every picture
   uses that same frame so the scenes line up. */
@media (max-width:899px){
  .card .shipped-visual.dc-slot,
  .card.has-atl .shipped-visual{
    aspect-ratio:386 / 636 !important;
  }
  /* Knotel’s phone is the tall part of this picture. 25% less height
     makes the phone 25% smaller and shortens the whole card with it.
     Side quest uses that same picture so its phone matches. */
  .card[data-case="knotel"] .shipped-visual.dc-slot,
  .closet-fit{
    aspect-ratio:386 / 477 !important;
  }
  .card.has-atl .atl-hero-m{
    border-radius:inherit;
  }
  /* Knotel’s picture is the height these cards use. The signup flow
     is scaled down so it sits inside that shorter picture. */
  .card.has-atl .shipped-visual{
    aspect-ratio:386 / 477 !important;
  }
  .card.has-atl .atl-hero-m .fit{
    left:50%;
    top:50%;
    transform-origin:center center;
    transform:translate(-50%, -50%) scale(calc(100cqw / 386px * 477 / 636));
  }
  .card[data-case="attentive"] .shipped-visual.dc-slot,
  .card[data-case="transactional"] .shipped-visual.dc-slot{
    aspect-ratio:386 / 477 !important;
  }
  /* Attentive and Transactional keep this navy field, and their
     animation sits inside it instead of covering it edge to edge. */
  .card[data-case="attentive"] .shipped-visual.dc-slot,
  .card[data-case="transactional"] .shipped-visual.dc-slot{
    background-color:#171A33;
    background-image:radial-gradient(rgba(201,203,224,.08) 1px, transparent 1px);
    background-size:18px 18px;
  }
}
/* The Atlassian panel was a shorter card inside the shared picture.
   Stretch it to that picture so the navy background matches the others.
   The signup flow stays the same size and sits in the middle. */
.card.has-atl .atl-hero{
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  border-radius:inherit;
}
.card.has-atl .atl-hero .fit{
  left:50%;
  top:50%;
  transform-origin:center center;
  transform:translate(-50%, -50%) scale(calc(100cqw / 1180px));
}
.case-link{
  flex:none;
  align-self:flex-end;
  pointer-events:auto;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  color:#171A33;
  text-decoration:underline;
  text-underline-offset:3px;
}
.case-link:hover{color:#26419C}
@media (max-width:899px){
  .card .case-link{align-self:flex-start}
}
@media (max-width:480px){
  .intro h1{font-size:31px}
  .quest-title,.shipped-hl{font-size:18px}
}