/**
 * Sitewide offer box (inline, after the timer / mid-article) and the
 * dismissible bottom bar for The ADHD Focus System. Loaded on every page.
 * Same light blue palette as the rest of the site.
 */
.kit-offer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #EAF3FC;
  border: 2px solid #CFE0F5;
  border-radius: 20px;
  padding: 16px;
  margin: 24px auto;
  max-width: 640px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.kit-offer-thumb { flex: 0 0 auto; width: 66px; height: auto; border-radius: 6px; box-shadow: 0 4px 10px rgba(30,60,100,.2); background: #fff; }
.kit-offer-body { min-width: 0; }
.kit-offer-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A90E2; margin: 0 0 4px; }
.kit-offer-line { font-size: .96rem; color: #222; margin: 0 0 10px; line-height: 1.5; }
.kit-offer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kit-offer .btn-buy { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #4A90E2 0%, #FDBD2C 100%); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .6rem 1.1rem; border-radius: 32px; box-shadow: 0 3px 10px rgba(74,144,226,.28); }
.kit-offer .btn-buy:hover { box-shadow: 0 6px 16px rgba(74,144,226,.36); }
.kit-offer-look { font-size: .88rem; font-weight: 600; color: #5A7FA7; text-decoration: underline; }
.kit-offer-fine { font-size: .76rem; color: #5A7FA7; margin: 8px 0 0; }
@media (max-width: 480px) {
  .kit-offer { flex-direction: column; align-items: stretch; }
  .kit-offer-thumb { display: none; }
}

.kit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  background: rgba(255,255,255,.98);
  border-top: 2px solid #4A90E2;
  box-shadow: 0 -4px 16px rgba(30,60,100,.14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.kit-bar[hidden] { display: none; }
.kit-bar-in { max-width: 40rem; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.kit-bar-sub { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #5A7FA7; }
.kit-bar .btn-buy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #4A90E2 0%, #FDBD2C 100%); color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; padding: .55rem 1rem; border-radius: 32px; }
.kit-bar-close { flex: 0 0 auto; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: #5A7FA7; cursor: pointer; padding: 4px 6px; }
.kit-bar-close:hover { color: #4A90E2; }

/* A bare content table can overflow a 360px viewport with no scroll
   affordance. Scope this to the pages that load this stylesheet, not a
   sitewide change. */
@media (max-width: 767px) {
  main table, article table, .content-section table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phones: let the header links wrap (they must stay visible; see ADSENSE_FIX_REPORT.md)
   and let wide comparison tables scroll inside themselves instead of widening the page. */
@media (max-width: 767px) {
  .nav-container { flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; row-gap: 0.25rem; }
  .container table, article table, main table { display: block; max-width: 100%; overflow-x: auto; }
}