/* APPS · each app as a spec sheet, using the Recess intro styles (/recess/intro.css) */
.ax-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ax + .ax{border-top:1px solid rgba(43,43,43,.25)}
.ax-icon{display:block;width:78%;max-width:130px;height:auto;border-radius:22%;margin-top:.3em;box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}
.ax.in .ax-icon{animation:axFloat 6s ease-in-out infinite}
@keyframes axFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ax-cta{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,3vh,28px) 0 0;padding-left:var(--ind)}
.ax-cta a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:13px 18px;border:1px solid #2b2b2b;color:#2b2b2b;transition:background .2s,color .2s,border-color .2s}
.ax-cta .ax-store{background:var(--red);border-color:var(--red);color:#fff}
.ax-cta .ax-store:hover{background:#2b2b2b;border-color:#2b2b2b}
.ax-cta .ax-site:hover{background:#2b2b2b;color:#ebebe8}
.rx.in .ax-cta{transition-delay:.45s}
@media (max-width:640px){.ax-cta{padding-left:0}.ax-cta a{flex:1 1 auto;text-align:center}}
@media (prefers-reduced-motion:reduce){.ax-icon{animation:none!important}}
.ax + .ax{padding-top:clamp(28px,5vh,48px)}
.ax{padding-bottom:clamp(28px,5vh,44px)}
/* the roadmap hero: 1,000 thoughts drifting between the stages of making an app */
.tk{position:relative;min-height:100vh;min-height:100svh;box-sizing:border-box;background:#f3f3f0;color:#2b2b2b;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:calc(var(--hh,53px) + clamp(16px,3vh,32px)) clamp(16px,3vw,44px) clamp(20px,4vh,40px);font-family:var(--mono)}
.tk-side{display:flex;flex-direction:column;min-height:0}
.tk-day{margin:0;font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.04em;color:#c9c9c4;font-weight:400;white-space:nowrap}
.tk-day span{color:#2b2b2b}
.tk-ctl{display:flex;margin-top:10px}
.tk-ctl button{font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1px solid #2b2b2b;background:transparent;color:#2b2b2b;cursor:pointer;border-radius:0}
.tk-ctl button + button{border-left:0}
.tk-ctl button[aria-pressed="true"]{background:#2b2b2b;color:#f3f3f0}
.tk-phase{margin:clamp(22px,4vh,40px) 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.tk-note{margin:0;font-family:"Times New Roman",Times,serif;font-style:italic;font-size:clamp(15px,1.3vw,18px);line-height:1.3;min-height:4em;transition:opacity .4s}
.tk-h{margin:auto 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.tk-cap{margin:0;font-size:11px;line-height:1.55;opacity:.75;border-top:1px solid #2b2b2b;padding-top:8px}
.tk-stage{position:relative;min-height:0}
.tk-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.tk-labels{position:absolute;inset:0;pointer-events:none}
.tk-lab{position:absolute;left:0;top:0;will-change:transform;text-align:center;font-size:clamp(9px,.85vw,11px);line-height:1.3;white-space:nowrap}
.tk-lab b{display:block;font-weight:400;letter-spacing:.02em}
.tk-lab i{font-style:normal;opacity:.6}
.tk-lab.hot b{color:var(--red)}
@media (max-width:760px){
  .tk{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto;min-height:0;padding-top:calc(var(--hh,45px) + 14px)}
  .tk-note{min-height:3em}
  .tk-stage{order:-1}
  .tk-h,.tk-cap{display:none}
  .tk-stage{height:min(118vw,560px)}
  .tk-lab{font-size:8.5px}
}
.tk[hidden]{display:none!important}