/* App detail pages. Layout only — every colour comes from site.css. */

.bar { position: sticky; top: 0; z-index: 40; background: var(--ink-950); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: var(--s-10); height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: var(--s-3); margin-right: auto;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--text); }
.brand .mk { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-fill);
  display: grid; place-items: center; font-size: var(--t-label); font-weight: 700; color: var(--on-accent);
  box-shadow: 0 6px 20px var(--glow); }
.bar .lnk { display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--text-2); font-size: var(--t-sm); font-weight: 500; }
.bar .lnk:hover { color: var(--text); text-decoration: none; }

.crumb { padding-top: var(--s-7); font-size: var(--t-xs); color: var(--text-3); }
.crumb a { color: var(--text-3); }

.hero { position: relative; padding: var(--s-8) 0 var(--s-20); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -260px; right: -140px; width: 900px; height: 680px;
  border-radius: 50%; background: var(--glow); filter: blur(180px); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0,600px) minmax(0,1fr);
  gap: var(--s-16); align-items: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 62px); margin-top: var(--s-6); }
.lede { margin-top: var(--s-6); font-size: 17px; line-height: 1.68; color: var(--text-2); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);
  font-size: var(--t-xs); color: var(--text-3); }
.meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); display: block; }
.shot { position: relative; }
.shot .device { margin-inline: auto; max-width: 260px; }

/* the chip band */
.types { padding: var(--s-9) 0; }
.types .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.types .k { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-3); }

/* the secondary screenshot row */
.shots { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(16px, 3vw, 40px); }
.shots figure { margin: 0; }
.shots figcaption { margin-top: var(--s-3); text-align: center; font-size: var(--t-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.shots .device { width: min(240px, 60vw); }
.shots .browser { width: min(620px, 88vw); }
.shots .tablet { width: min(420px, 82vw); }

/* the live puzzle panel */
.live { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--ink-850); overflow: hidden; }
.live .top { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line); background: var(--ink-800); }
.live .top .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text);
  box-shadow: 0 0 0 4px var(--accent-wash); }
.live .top .t { font-size: var(--t-xs); color: var(--text-2); font-weight: 500; }
.live .top .r { margin-left: auto; font-size: 13px; color: var(--text-3); }
.live iframe { display: block; width: 100%; height: 640px; border: 0; }

/* facts */
.facts { padding: var(--s-20) 0; }
.facts .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.fact { padding: var(--s-9) var(--s-12) var(--s-10); position: relative; }
.fact:nth-child(odd) { padding-left: 0; }
.fact:nth-child(even)::before { content: ""; position: absolute; left: 0; top: var(--s-9); bottom: var(--s-10);
  width: 1px; background: var(--line); }
.fact:nth-child(n+3) { border-top: 1px solid var(--line); }
.fact h2 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.025em; }
.fact p { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.62; color: var(--text-2); max-width: 52ch; }

/* the privacy line */
.privacy-line { padding: var(--s-10) 0; font-size: var(--t-sm); color: var(--text-3); }
.privacy-line strong { color: var(--text-2); font-weight: 600; }

.site-foot { padding: var(--s-9) 0 var(--s-12); }
.site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-xs); color: var(--text-3); }
.site-foot a { color: var(--text-3); }

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s-12); }
  .facts .wrap { grid-template-columns: 1fr; }
  .fact { padding: var(--s-8) 0; }
  .fact:nth-child(even)::before { display: none; }
  .fact:nth-child(n+2) { border-top: 1px solid var(--line); }
  .live iframe { height: 520px; }
}
@media (max-width: 620px) {
  .bar .lnk { display: none; }
  .brand { white-space: nowrap; }
  .sec, .facts { padding: var(--s-14) 0; }
  .close .wrap { padding-block: var(--s-16); }
  .live iframe { height: 460px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background .2s ease, transform .12s ease; }
  .btn:active { transform: translateY(1px); }
  .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
  .reveal.in { opacity: 1; transform: none; }
}