/* ---------- app.css ----------
   Styles for individual app product pages.
   Loaded after style.css; reuses its tokens. */

/* ---------- app hero ---------- */
.app-hero{ position:relative; padding:72px 0 20px; text-align:center; z-index:2; overflow:hidden; }
.app-hero .glow{
  position:absolute; left:50%; top:20px; width:460px; height:460px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(245,165,33,0.22), transparent 68%);
  filter:blur(34px); z-index:-1;
}
.app-hero .eyebrow{
  color:var(--amber); font-family:var(--font-display); font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase; margin-bottom:14px;
}
.app-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,6vw,3.5rem); letter-spacing:0.01em;
  margin:0 0 14px; text-wrap:balance;
}
.app-hero .tagline{
  font-size:14px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--slate); margin:0 0 20px;
}
.app-lede{
  font-size:17px; color:var(--ink-muted);
  max-width:60ch; margin:26px auto 0; text-align:center;
}

/* ---------- screenshot gallery ---------- */
.shots{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:38px 26px; padding:56px 0 20px; position:relative; z-index:2;
}
.shot{ display:flex; flex-direction:column; }
.shot img{
  display:block; width:100%; height:auto;
  border-radius:20px;
  border:1px solid var(--panel-edge);
  box-shadow:0 20px 44px -20px rgba(0,0,0,0.7);
  background:var(--panel);
}
/* Landscape (iPad/desktop) captures need a wider slot than phone shots. */
.shots.wide{ grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:44px 26px; }
.shots.wide .shot img{ border-radius:14px; }

/* A single phone shot shouldn't stretch across the page. */
.shots.single{ grid-template-columns:minmax(0,300px); justify-content:center; }

.shot h3{
  font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:0.04em; text-transform:uppercase;
  margin:20px 0 7px; color:var(--paper);
}
.shot p{ font-size:14.5px; color:var(--ink-muted); margin:0; }

/* ---------- detail sections ---------- */
section.app-detail{ padding:44px 0 90px; position:relative; z-index:2; }
section.app-detail .section-label{
  font-family:var(--font-display); font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--amber); text-align:center; margin-bottom:34px;
}

/* ---------- doc links ---------- */
.app-links{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  padding:6px 0 0;
}
.app-links a{
  text-decoration:none; font-size:13px; letter-spacing:0.03em;
  color:var(--ink-muted);
  border:1px solid var(--panel-edge); border-radius:20px; padding:8px 18px;
  transition:color .15s ease, border-color .15s ease;
}
.app-links a:hover{ color:var(--amber); border-color:rgba(245,165,33,0.45); }

@media (max-width:560px){
  .app-hero{ padding:52px 0 16px; }
  .shots{ gap:32px 18px; padding:40px 0 14px; }
}