/* ==========================================================================
   AllPDF Android app page only (/apps/allpdf/android/). Loaded after site.css
   and built from its tokens, so every theme works; no other page links it.
   Device bezels stay dark on every theme, the way the hardware looks.
   ========================================================================== */

/* the soft glows behind the phones reach past the viewport: clip them (clip, not hidden: no scroll container) */
#main { overflow-x: clip; }

/* ---------- phone frame ---------- */
.ap-phone {
  --r: 40px;
  position: relative; margin: 0; padding: 9px; border-radius: var(--r);
  background: linear-gradient(150deg, #4b4e58, #1c1d23 36%, #0b0c0f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050506,
              0 50px 90px -36px var(--shadow-2), 0 24px 40px -28px var(--shadow);
}
.ap-phone img { width: 100%; border-radius: calc(var(--r) - 8px); background: #f7f4ef; }
/* punch-hole camera */
.ap-phone::after {
  content: ""; position: absolute; top: 19px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #040405; box-shadow: inset 0 0 0 2px #17181c;
}
.ap-phone--sm { --r: 30px; padding: 7px; }
.ap-phone--sm::after { top: 15px; width: 8px; height: 8px; margin-left: -4px; }

/* ---------- hero stage: the home screen with a scan in front ---------- */
.ap-stage { position: relative; isolation: isolate; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 540 / 600; }
.ap-stage::before {
  content: ""; position: absolute; inset: -4% -10% -6% -8%; z-index: -1;
  background: radial-gradient(56% 52% at 60% 38%, color-mix(in srgb, var(--app) 54%, transparent), color-mix(in srgb, var(--app) 20%, transparent) 60%, transparent),
              radial-gradient(44% 42% at 16% 82%, color-mix(in srgb, #7a4cff 42%, transparent), transparent),
              radial-gradient(40% 40% at 94% 94%, color-mix(in srgb, #ff5a4e 30%, transparent), transparent);
  filter: blur(36px); animation: breathe 7s ease-in-out infinite;
}
.ap-stage .ap-phone:not(.ap-phone--sm) { position: absolute; width: 50%; right: 9%; top: 0; }
.ap-stage .ap-phone--sm { position: absolute; z-index: 2; width: 38%; left: 4%; bottom: 0; rotate: -6deg; animation: float 8s ease-in-out infinite; }
.ap-badge {
  position: absolute; z-index: 3; right: 0; bottom: 12%;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text); background: var(--nav-bg);
  border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px -18px var(--shadow-2);
}
.ap-badge svg { width: 15px; height: 15px; color: var(--app-ink); }

/* CTA note under the hero buttons */
.ap-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.ap-note span { display: inline-flex; align-items: center; gap: 7px; }
.ap-note svg { width: 15px; height: 15px; color: var(--app-ink); }

/* tool marquee: app accent instead of gold */
.ap-marquee li::before { background: var(--app); box-shadow: 0 0 12px var(--app); }

/* ---------- numbers strip ---------- */
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ap-stat {
  position: relative; padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--card-shadow); overflow: hidden;
}
.ap-stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--app), transparent 75%); opacity: 0.85; }
.ap-stat b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.ap-stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--text-2); }

/* ---------- showcase rows (real captures beside copy) ---------- */
.ap-row + .ap-row { margin-top: clamp(72px, 10vw, 128px); }
.ap-shot { position: relative; isolation: isolate; max-width: 300px; margin-inline: auto; }
.ap-shot::before {
  content: ""; position: absolute; inset: -6% -24%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--app) 44%, transparent) 40%, color-mix(in srgb, var(--app) 22%, transparent) 70%, transparent);
  filter: blur(30px);
}
.ap-row h2, .ap-plan h3, .section__head h2, .band h2 { text-wrap: balance; }
.ap-row h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; }
.ap-row .split p { margin-top: 16px; }

/* Pro marker, used in headings, lists, tool lists and the plan cards */
.ap-pro {
  display: inline-flex; align-items: center; padding: 3px 8px 2px; margin-left: 8px; border-radius: 6px; vertical-align: 2px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4;
  color: var(--gold-ink); background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-3));
}
.split li .ap-pro { margin-left: 6px; }
.feature h3 .ap-pro { font-size: 10px; vertical-align: 1px; }

/* ---------- all 32 tools, grouped the way the app groups them ---------- */
.ap-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ap-group {
  padding: 24px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--card-shadow);
}
.ap-group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 17.5px; }
.ap-group h3 span { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ap-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ap-group li {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 10px; font-size: 14px; color: var(--text-2);
  border: 1px solid var(--line); background: var(--glass);
}
.ap-group li .ap-pro { margin-left: 7px; padding: 2px 6px 1px; font-size: 9.5px; vertical-align: 0; }
.ap-group--wide { grid-column: span 2; }

/* ---------- AllPDF and AllPDF Pro side by side ---------- */
.ap-plans { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; }
.ap-plan {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 38px); border-radius: 24px;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate;
}
.ap-plan--pro { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); box-shadow: 0 40px 90px -46px color-mix(in srgb, var(--gold) 60%, transparent), var(--card-shadow); }
.ap-plan--pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 300px at 100% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); }
.ap-plan__head { display: flex; align-items: center; gap: 14px; }
.ap-plan__head img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 12px 26px -12px var(--app), 0 0 0 1px var(--line); }
.ap-plan h3 { font-size: 24px; }
.ap-plan h3 .ap-pro { font-size: 12px; }
.ap-plan__sub { margin-top: 4px; font-size: 14.5px; color: var(--text-2); }
.ap-plan ul { margin-top: 24px; display: grid; gap: 12px; }
.ap-plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.ap-plan li svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--app-ink); }
.ap-plan--pro li svg { color: var(--gold-text); }
.ap-plan li b { color: var(--text); font-weight: 600; }
.ap-plan__foot { margin-top: auto; padding-top: 28px; }
.ap-plan__foot p { font-size: 14px; color: var(--muted); }

/* trademarks */
.ap-credits { max-width: 860px; margin-inline: auto; text-align: center; font-size: 13px; color: var(--muted); }
.ap-credits p + p { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ap-stats { grid-template-columns: 1fr 1fr; }
  .ap-tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ap-stage { max-width: 440px; margin-top: 8px; }
  .ap-plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ap-phone { --r: 30px; padding: 7px; }
  .ap-phone::after { top: 15px; width: 8px; height: 8px; margin-left: -4px; }
  .ap-phone--sm { --r: 22px; padding: 5px; }
  .ap-phone--sm::after { top: 11px; width: 6px; height: 6px; margin-left: -3px; }
  .ap-badge { bottom: 6%; font-size: 12px; padding: 7px 12px; }
  .ap-stat { padding: 20px 18px; }
  .ap-shot { max-width: 260px; }
  .ap-tools { grid-template-columns: 1fr; }
  .ap-group--wide { grid-column: auto; }
}