/* ============ Guides: article + hub styles (extends style.css) ============ */

/* ---- Article page ---- */
.article { max-width: 840px; }
.article .byline {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font-family: var(--font-mono, "Martian Mono", monospace);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-faint); margin: 18px 0 26px;
}
.article .byline b { color: var(--gold); font-weight: 600; }

.article-hero { margin: 0 0 34px; }
.article-hero img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line);
}

.article h2 { margin-top: 44px; }
.article h3 {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--bone); margin: 30px 0 12px;
}
.article p { line-height: 1.75; }
.article li { line-height: 1.7; }
.article blockquote {
  margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--gold);
  background: rgba(212, 168, 67, 0.06); border-radius: 0 10px 10px 0;
}
.article blockquote p { margin: 0; color: var(--bone); }

/* tables — scroll inside their own box, never the page */
.article table {
  display: block; overflow-x: auto; white-space: nowrap;
  border-collapse: collapse; margin: 24px 0; max-width: 100%;
  font-size: 14px;
}
.article table th, .article table td {
  padding: 10px 14px; border: 1px solid var(--line); text-align: left;
  color: var(--bone-dim); white-space: normal; min-width: 90px;
}
.article table th {
  font-family: var(--font-mono, "Martian Mono", monospace);
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); background: rgba(212, 168, 67, 0.05);
}
.article table td strong { color: var(--bone); }

/* ---- FAQ reuses .faq-list / .faq-item from style.css ---- */
.article .faq-list { margin-top: 26px; max-width: none; }

/* ---- App CTA panel ---- */
.cta-panel {
  margin: 46px 0; padding: 30px 30px 34px;
  border: 1px solid rgba(212, 168, 67, 0.35); border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(212, 168, 67, 0.1), transparent 55%),
    var(--coal);
}
.cta-panel h2 { margin: 0 0 10px; }
.cta-panel > p { max-width: 620px; }
.cta-panel .stores { margin-top: 20px; }
.doc a.store-badge, .doc a.store-badge:hover { text-decoration: none; }
.cta-panel .cta-hint {
  margin-top: 14px; font-family: var(--font-mono, "Martian Mono", monospace);
  font-size: 11.5px; letter-spacing: 0.05em; color: var(--bone-faint);
}

/* ---- Related links ---- */
.related { margin-top: 50px; }
.related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px;
}
.related-card {
  display: block; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--coal);
  text-decoration: none !important;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.related-card:hover { border-color: rgba(212, 168, 67, 0.45); transform: translateY(-2px); }
.related-card b {
  display: block; color: var(--bone); font-size: 15px; line-height: 1.4; margin-bottom: 6px;
}
.related-card span { color: var(--bone-faint); font-size: 13px; line-height: 1.55; display: block; }

/* ---- Guides hub ---- */
.hub-intro { max-width: 760px; }
.hub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 20px;
}
.hub-card {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: var(--coal);
  text-decoration: none !important;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.hub-card:hover { border-color: rgba(212, 168, 67, 0.45); transform: translateY(-3px); }
.hub-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hub-card .hub-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.hub-card .hub-date {
  font-family: var(--font-mono, "Martian Mono", monospace);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-faint);
}
.hub-card b { color: var(--bone); font-size: 16px; line-height: 1.4; }
.hub-card span { color: var(--bone-dim); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hub-grid, .related-grid { grid-template-columns: 1fr; }
}

/* ---- Story page (/story/) ---- */
.story-lead { font-size: 18px; line-height: 1.7; color: var(--bone); max-width: 720px; }

.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 44px 0;
}
.stat-tile {
  padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--coal); text-align: left;
}
.stat-tile b {
  display: block; font-family: "Big Shoulders Display", sans-serif; font-weight: 800;
  font-size: 40px; line-height: 1; color: var(--gold-hi); margin-bottom: 8px;
}
.stat-tile span { color: var(--bone-faint); font-size: 12.5px; line-height: 1.5; display: block; }

.timeline { margin: 44px 0; border-left: 2px solid rgba(212, 168, 67, 0.35); padding-left: 26px; }
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -33px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.18);
}
.timeline-item .t-date {
  font-family: var(--font-mono, "Martian Mono", monospace); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px;
}
.timeline-item h3 { margin: 0 0 6px; }
.timeline-item p { margin: 0; }

.principle {
  margin: 26px 0; padding: 24px 28px; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(140% 180% at 0% 0%, rgba(212, 168, 67, 0.07), transparent 55%), var(--coal);
}
.principle p {
  font-family: "Big Shoulders Display", sans-serif; font-size: 24px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.25;
  color: var(--bone); margin: 0 0 10px;
}
.principle span {
  font-family: var(--font-mono, "Martian Mono", monospace); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint);
}

.engine-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 40px 0; }
.engine-step {
  padding: 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--coal);
}
.engine-step .e-k {
  font-family: var(--font-mono, "Martian Mono", monospace); font-size: 10.5px;
  letter-spacing: 0.12em; color: var(--gold); display: block; margin-bottom: 10px;
}
.engine-step h3 { margin: 0 0 8px; }
.engine-step p { font-size: 14px; margin: 0; }

@media (max-width: 800px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .engine-steps { grid-template-columns: 1fr; }
}

/* ---- Sticky bottom CTA on article pages (mobile: readers arriving from search/AI) ---- */
.article-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.article-cta-bar span {
  color: var(--bone-dim); font-size: 12.5px; line-height: 1.35; min-width: 0;
}
.article-cta-bar .btn {
  flex: none; padding: 10px 18px; font-size: 13.5px; text-decoration: none;
}

/* value-green CTA — distinct from the gold "Get the app" in the nav */
.btn-grade {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 600; white-space: nowrap;
  color: #06180d;
  background: linear-gradient(135deg, #2bbf6d 0%, #4fe392 55%, #34d97b 100%);
  box-shadow: 0 4px 18px rgba(52, 217, 123, 0.28);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.btn-grade:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(52, 217, 123, 0.4); }
.btn-grade:active { transform: translateY(0); }
.doc a.btn-grade, .doc a.btn-grade:hover { text-decoration: none; color: #06180d; }

/* eBay sold-listing links under top-10 cards */
.sold-link { font-size: 14px; }
.sold-link a { color: var(--grade); }
.sold-link a:hover { color: #4fe392; }
@media (max-width: 760px) {
  .article-cta-bar { display: flex; }
  body.has-cta-bar { padding-bottom: 72px; }
}