/* Apps page. Loads after erp.css and reuses its shell (.panel, .c-idx, .c-grp,
   .c-cta, .c-cap) — only the phone wall and the two written blocks are new.

   There is no sliding console here: the page shows the phones once, and every
   claim under them is written rather than illustrated, because there is one
   shipped app to point at and inventing screens for the rest would be a lie. */

/* ---------- the wall: six phones, straightening under the cursor ----------
   Size is bounded twice over: by the row (six frames plus gaps inside the
   wrap) and by what is left of the viewport after the header. The chips that
   used to sit in this section were the binding constraint — with them here no
   phone could exceed ~130px, which is illegible. They are their own section
   now, and the phones get the screen. */
#wall{padding-block:clamp(40px,5vh,68px)}
#wall .wrap{max-width:1700px}
.a-wall{--g:clamp(10px,1.4vw,22px);display:flex;gap:var(--g);justify-content:center;
  align-items:center;padding:clamp(48px,9vh,104px) 0 clamp(16px,2.6vh,32px)}
/* three bounds, and the row one has to be a share of the row rather than a vw
   guess — a guess overflowed the wrap and put a scrollbar on the page */
.a-wall figure{margin:0;flex:none;
  width:min(calc((100% - 5 * var(--g)) / 6), calc((92svh - 290px) * 0.46), 172px);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .45s}
.a-wall figure:nth-child(odd){transform:translateY(-20px) rotate(-2.4deg)}
.a-wall figure:nth-child(even){transform:translateY(20px) rotate(2.4deg)}
.a-wall:hover figure{filter:saturate(.5) brightness(.66)}
.a-wall figure:hover{transform:translateY(0) rotate(0) scale(1.1);z-index:2;filter:none}
@media (prefers-reduced-motion:reduce){
  .a-wall figure,.a-wall figure:hover{transform:none;transition:none}
}

.a-frame{position:relative;border-radius:13% / 6.4%;overflow:hidden;
  background:#0b0d12;aspect-ratio:402/874;
  border:1px solid color-mix(in srgb,var(--fg) 15%,transparent);
  box-shadow:0 18px 46px rgba(0,0,0,.5)}
.a-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- the kinds of app, as chips ---------- */
.a-kinds{margin-top:clamp(6px,1vh,14px)}
.a-kinds ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.a-kinds li{border:1px solid var(--line);border-radius:100px;padding:9px 17px;
  font-size:14px;color:var(--fg2);transition:color .25s,border-color .25s,background .25s}
.a-kinds li:hover{color:var(--fg);border-color:color-mix(in srgb,var(--k) 60%,transparent);
  background:color-mix(in srgb,var(--k) 12%,transparent)}

/* ---------- how the work actually starts ---------- */
.a-steps{margin:clamp(26px,4vh,44px) 0 0;padding:0;list-style:none;counter-reset:s;
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--line)}
.a-steps li{counter-increment:s;padding:clamp(18px,2.4vh,26px) clamp(16px,1.8vw,24px);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.a-steps li:last-child{border-right:0}
.a-steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--kt);
  display:block;margin-bottom:9px}
.a-steps b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.a-steps span{display:block;color:var(--fg3);font-size:13.5px;line-height:1.55}

@media (max-width:900px){
  .a-wall{flex-wrap:wrap;gap:10px}
  .a-wall figure{width:clamp(96px,27vw,132px)}
  .a-wall figure:nth-child(n+5){display:none}
  .a-steps li{border-right:0}
}

/* On a phone the row wraps, and the alternating tilt that reads as a wall in
   one line reads as a spill in two — the second row starts on the wrong beat.
   Four phones, square on, twice the size: the screens are the point and at
   96px nothing on them could be read. */
@media (max-width:720px){
  .a-wall{display:grid;grid-template-columns:1fr 1fr;gap:14px;
    padding:clamp(20px,3.5vh,34px) 0 6px}
  .a-wall figure,
  .a-wall figure:nth-child(odd),
  .a-wall figure:nth-child(even){width:100%;transform:none}
  .a-wall figure:hover{transform:none;scale:1}
  .a-wall:hover figure{filter:none}
}

/* The inner pages run their section headings smaller than the landing page's.
   erp.css keys that off #system and #inside; this page uses neither id, so its
   headings were falling back to .panel h2 at 66px and wrapping to four lines. */
#wall h2,#inside h2,#custom h2{font-size:clamp(26px,3.4vw,48px);margin-top:16px}
@media (max-width:900px){
  #wall h2,#inside h2,#custom h2{font-size:clamp(24px,2.9vw,38px);margin-top:10px}
}

/* A short laptop is the tight case on both of these sections: the wall and the
   steps each lose a little padding rather than the page losing a whole row. */
@media (min-width:901px) and (max-height:810px){
  .a-wall{padding:clamp(54px,9.5vh,84px) 0 14px}
  .a-kinds li{padding:7px 14px;font-size:13.5px}
  .a-kinds ul{gap:7px;margin-top:10px}
  .a-steps{margin-top:20px}
  .a-steps li{padding:14px 16px}
  .a-steps span{font-size:12.5px}
  .a-steps b{font-size:15px}
}


@media (max-width:720px){
  .a-kinds li{font-size:13.5px;padding:11px 16px}
  .a-steps li{padding:16px 14px}
  .a-steps span{font-size:13px}
}

@media (max-width:720px){
  .a-steps li::before{font-size:12px}
}

@media (max-width:720px){
  #wall h2,#inside h2,#custom h2{font-size:clamp(34px,12vw,54px);margin-top:14px}
}