/* The guides (/guides/) and the app page (/app/). Built on the site's tokens
   (site.css) and the FAQ style (pdf.css). Kept calm on purpose: plain text,
   lots of space, few boxes. */

/* ── A guide ─────────────────────────────────────────────────────────── */
.article { max-width: 700px; margin: 0 auto; padding: 40px 0 20px; color: var(--text-2); }
.article .crumbs { margin: 0 0 18px; }
.article h1 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 820; color: var(--text); line-height: 1.15; margin: 0 0 14px; }
.article-lead { font-size: 18.5px; line-height: 1.6; color: var(--text-3); margin: 0 0 10px; }
.article-meta { font-size: 13.5px; color: var(--muted); margin: 0 0 36px; }
.article-body h2, .article-faq h2, .article-more h2 {
  font-size: 23px; font-weight: 780; color: var(--text); margin: 44px 0 12px; scroll-margin-top: 80px;
}
.article-body p, .article-body li { font-size: 17px; line-height: 1.75; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin: 6px 0; }
.article-body li::marker { color: var(--muted); }
.article-body b { color: var(--text); font-weight: 650; }
.article-body a, .article-faq a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent); text-underline-offset: 3px; }
.article-body a:hover, .article-faq a:hover { text-decoration-color: currentColor; }
.article-body .btn { text-decoration: none; }

/* A short note: a thin line at the side, no box */
.article-body .note { padding: 2px 0 2px 16px; border-left: 3px solid var(--line-2); color: var(--text-3); }

/* Tables: lines only */
.table-wrap { overflow-x: auto; margin: 8px 0 22px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.table-wrap th, .table-wrap td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { font-size: 13px; font-weight: 650; color: var(--muted); }
.table-wrap td:first-child { color: var(--text); }

/* A screenshot */
.article-shot { margin: 12px auto 26px; text-align: center; }
.article-shot img { width: 240px; max-width: 64%; height: auto; border-radius: 24px; border: 1px solid var(--line); }
.article-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* One quiet line pointing to the app, the checker or a tool */
.article-body .cta-line { display: flex; align-items: center; gap: 12px; margin: 4px 0 24px; color: var(--text-3); }
.cta-line .app-icon { flex: none; border-radius: 7px; }

.article-faq .faq-item p { font-size: 16px; line-height: 1.7; }
.article-more ul, .guide-list ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.article-more li, .guide-list li { border-bottom: 1px solid var(--line); }
.article-more a, .guide-list a { display: block; padding: 14px 2px; color: var(--text); font-weight: 600; font-size: 16px; }
.article-more a:hover, .guide-list a:hover { color: var(--blue); text-decoration: none; }

/* ── The guides index ────────────────────────────────────────────────── */
.guides-index h1 { margin-bottom: 8px; }
.guide-list { margin-top: 34px; }
.guide-list h2 { font-size: 15px; font-weight: 700; color: var(--muted); margin: 0 0 10px; }

/* ── The app page ────────────────────────────────────────────────────── */
.app-page { max-width: 1000px; }
.app-hero { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; padding: 64px 0 24px; }
.app-name { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.app-name .app-icon { border-radius: 13px; }
.app-name b { display: block; font-size: 18px; font-weight: 780; color: var(--text); }
.app-name small { display: block; font-size: 13.5px; color: var(--muted); }
.app-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 840; line-height: 1.08; }
.app-hero .lede { margin: 18px 0 30px; max-width: 520px; }
.app-hero-shot { width: 280px; height: auto; border-radius: 30px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.store-badge img { height: 44px; width: auto; }
.store-badge:hover { opacity: .88; }

.app-points { list-style: none; padding: 40px 0 0; margin: 40px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.app-points h2 { font-size: 16.5px; font-weight: 750; color: var(--text); margin: 12px 0 6px; }
.app-points p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.point-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.app-legal { margin: 56px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.app-legal a { color: var(--muted); }
.app-legal a:hover { color: var(--text); }
.app-legal span { margin: 0 8px; }

/* ── Phones and tablets ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .app-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .app-hero-shot { width: 220px; justify-self: center; }
  .app-points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .article { padding-top: 24px; }
  .article-lead { font-size: 17px; }
  .article-body p, .article-body li { font-size: 16px; line-height: 1.7; }
  .app-hero-shot { width: 190px; }
  .app-points { grid-template-columns: 1fr; gap: 22px; }
  .app-points li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
  .app-points .point-icon { grid-row: span 2; }
  .app-points h2 { margin: 0 0 2px; }
}