/* The public Apps page in the flow look. Loaded after flow.css (tokens, header, buttons, focus, skip link,
   Mr. Octo's dark styles) and pages.css (the plain-page header links and the footer).

   Shapes: cards are a two-layer frame (22px shell, 16px core), buttons and chips are pills, the app
   badge is 14px. Text is 13px at the smallest. */

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.apps-page{max-width:1180px;margin:0 auto;padding:0 20px}
.apps-page h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.03em}

/* The page you are on, in the header. */
.page-header .header-links a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--yellow)}

/* ---------------------------------------------------------------- hero */
.apps-hero{display:grid;gap:12px;align-items:center;padding:40px 0 24px}
.back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:14px;color:var(--text-2);font-weight:600;font-size:15px;text-decoration:none;transition:color .3s var(--ease)}
.back-link span{color:var(--yellow);transition:transform .4s var(--ease)}
.back-link:hover{color:#fff}
.back-link:hover span{transform:translateX(-3px)}
.apps-hero h1{font-size:clamp(40px,5.6vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.035em;margin-bottom:20px}
.apps-hero h1 .serif{display:inline-block;padding-bottom:.06em}
.apps-hero .lede{color:var(--text-2);font-size:19px;line-height:1.6;max-width:27em}
.apps-hero .actions{margin-top:28px}
.apps-hero-art{margin:0;display:grid;justify-items:center}
.apps-hero-art img{width:100%;max-width:560px;filter:drop-shadow(0 26px 26px rgba(0,0,0,.4));animation:art-float 8s cubic-bezier(.45,0,.55,1) infinite}

/* ---------------------------------------------------------------- how it works: the route */
.how{padding:56px 0 8px}
.route-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
.route-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;align-content:start}
.route-steps .node{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);border:2px solid var(--yellow);color:var(--yellow);font-family:Manrope,sans-serif;font-weight:800;font-size:17px}
.route-steps li:last-child .node{background:var(--yellow);color:var(--on-yellow);box-shadow:0 0 0 6px rgba(255,208,0,.14)}
.route-steps strong{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:19px;color:#fff;margin:8px 0 4px}
.route-steps li span:not(.node){color:var(--text-3);font-size:16px;line-height:1.5}
/* The dashed yellow route from one node to the next: down on phones, across on wide screens. */
.route-steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;bottom:-18px;width:2px;background:repeating-linear-gradient(180deg,var(--yellow) 0 6px,transparent 6px 13px);opacity:.6}

/* ---------------------------------------------------------------- the catalogue */
.catalogue{padding:72px 0 0;scroll-margin-top:72px}
.apps{margin-top:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}

/* A card is a two-layer frame: a faint shell, and the charcoal core inside it. */
.card{padding:6px;border-radius:22px;background:rgba(244,242,234,.035);border:1px solid var(--line);transition:border-color .4s var(--ease),transform .5s var(--ease)}
.card:not(.is-skeleton):hover{border-color:rgba(255,208,0,.4)}
.card-core{height:100%;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:16px;background:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card.is-in{animation:card-in .7s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card-head{display:flex;align-items:center;gap:14px}
.badge{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(255,208,0,.12);border:1px solid rgba(255,208,0,.32);color:var(--yellow-2);font-family:Manrope,sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em}
.card h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.platform{display:inline-block;margin-top:4px;padding:1px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-3);font-size:13px;font-weight:600;line-height:1.6}
.card-core>p{flex:1;color:var(--text-2);font-size:16px;line-height:1.55}

.app-shots{display:flex;gap:10px;margin:0 -4px;padding:4px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.app-shot{flex:none;scroll-snap-align:start;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-3);transition:border-color .3s var(--ease)}
.app-shot:hover{border-color:rgba(255,208,0,.6)}
.app-shot img{display:block;width:132px;height:auto;aspect-ratio:9/20;object-fit:cover}

.meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--text-3);font-size:14px;font-variant-numeric:tabular-nums}
.notes{padding:10px 14px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line);color:var(--text-2);font-size:14px;line-height:1.5}
.notes b{display:block;color:#fff;font-weight:700;font-size:13px;margin-bottom:2px}

.card .btn{align-self:flex-start;margin-top:4px}
.btn-icon svg{width:20px;height:20px}
/* Not out yet: a calm, quiet state rather than a greyed-out button. */
.soon{align-self:flex-start;display:inline-flex;align-items:center;min-height:54px;margin-top:4px;padding:0 22px;border:1px dashed var(--line-2);border-radius:999px;color:var(--text-2);font-weight:600;font-size:16px}
.card.is-soon .badge{background:var(--ink-3);border-color:var(--line-2);color:var(--text-2)}

/* Loading: cards in the shape of the real ones. */
.sk{display:block;border-radius:999px;background:linear-gradient(90deg,var(--ink-3) 0 40%,#2c323d 50%,var(--ink-3) 60% 100%) 0 0/300% 100%;animation:sk-shine 1.6s linear infinite}
.sk-head{width:58%;height:52px;border-radius:14px}
.sk-line{height:14px}
.sk-line.short{width:70%}
.sk-btn{width:170px;height:54px;margin-top:18px}
@keyframes sk-shine{from{background-position:100% 0}to{background-position:0 0}}

.apps-note{padding:22px 24px;border-radius:var(--r-card);border:1px dashed var(--line-2);color:var(--text-2);font-size:17px;max-width:40em}

/* ---------------------------------------------------------------- installing on Android */
.help{margin:72px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;gap:14px}
.apps-page .help h2{font-size:24px;letter-spacing:-.02em}
.help-copy{display:grid;gap:10px;max-width:40em}
.help p{color:var(--text-2);font-size:17px;line-height:1.6}
.help b{color:#fff;font-weight:700}

@media (min-width:900px){
  .apps-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:48px 0 32px}
  .how{padding-top:64px}
  .route-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .route-steps li{grid-template-columns:1fr;gap:14px}
  .route-steps strong{margin-top:0}
  .route-steps li:not(:last-child)::after{left:58px;right:-18px;top:21px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 13px)}
  .catalogue{padding-top:88px}
  .help{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;margin-top:88px}
}
/* Short laptop screens: the hero art steps down so the headline and the button stay in view. */
@media (min-width:900px) and (max-height:700px){
  .apps-hero{padding-top:24px}
  .apps-hero-art img{max-width:440px}
  .back-link{margin-bottom:6px}
}
@media (max-width:600px){
  .apps-page{padding:0 16px}
  .apps-hero{padding-top:20px}
  .back-link{margin-bottom:6px}
  .apps-hero h1{font-size:40px}
  .apps-hero .lede{font-size:17px}
  .apps-hero .actions{margin-top:24px}
  .apps-hero-art img{max-width:340px}
  .how{padding-top:40px}
  .catalogue{padding-top:56px}
  .card-core{padding:18px}
  .help{margin-top:56px}
}