@charset "UTF-8";
/* Landing pages (/ad-blocker-for-iphone, /ad-blocker-for-android).
   Loaded after styles.css + blog.css; reuses blog tokens (--b-*), prose
   (.post-body), CTA, related cards and the side TOC. */

.landing-hero { padding: 34px 44px 40px; border-radius: 22px; border: 1px solid #dcdff2; background: radial-gradient(ellipse at 92% 0%, #d2c6ff55, transparent 55%), linear-gradient(112deg, #f1eaff 0%, #edf0ff 50%, #e6f4ff 100%); }
.landing-hero .blog-crumb { margin-bottom: 26px; }
.landing-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 48px; align-items: center; }
.landing-hero h1 { font-family: var(--b-head); font-weight: 600; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.045em; color: var(--b-ink); margin: 0 0 18px; }
.landing-hero h1 .muted-heading { color: var(--b-primary); }
.landing-hero__lede { max-width: 58ch; color: var(--b-ink-2); font-size: 18px; line-height: 1.6; }
.landing-hero__actions { justify-content: flex-start; margin-top: 26px; }
.landing-hero__note { margin-top: 14px; color: var(--b-muted); font-size: 13px; }
.landing-facts { list-style: none; margin: 0; padding: 22px 24px; display: grid; gap: 14px; background: #ffffffcc; border: 1px solid var(--b-line); border-radius: var(--b-radius-lg); box-shadow: 0 12px 28px #2a2f8a14; }
.landing-facts li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--b-ink); }
.landing-facts .bi { color: var(--b-primary); font-size: 20px; }

.landing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 48px; }
.landing-toc { position: sticky; top: 110px; }
.landing-body { min-width: 0; max-width: 780px; }
.landing-body .post-body > h2:first-child { margin-top: 0; }

.landing-faq { margin-top: 48px; }
.landing-faq h2 { font-family: var(--b-head); font-size: 30px; letter-spacing: -.035em; color: var(--b-ink); margin-bottom: 12px; scroll-margin-top: 110px; }
.landing-faq details { border-bottom: 1px solid var(--b-line); }
.landing-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 600; color: var(--b-ink); list-style: none; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary span { color: var(--b-primary); font-size: 20px; line-height: 1; transition: transform .2s; }
.landing-faq details[open] summary span { transform: rotate(45deg); }
.landing-faq details p { padding: 0 0 18px; color: var(--b-ink-2); font-size: 16px; line-height: 1.65; max-width: 68ch; }

@media (max-width: 1100px) {
  .landing-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .landing-toc { display: none; }
  .landing-body { margin-inline: auto; }
}
@media (max-width: 860px) {
  .landing-hero__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .landing-hero { padding: 24px 20px 28px; border-radius: 18px; }
  .landing-hero__lede { font-size: 16px; }
  .landing-hero__actions .store-button { width: 100%; max-width: 340px; }
  .landing-layout { margin-top: 32px; }
  .landing-faq h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .landing-faq summary span { transition: none; } }