/* =============================================================================
   v2-buy-conversion-v20260508c.css — buy-page conversion layer
   Loaded LAST in /buy/index.html, AFTER v2-buy-v20260508b.css. Additive only.
   Adds four conversion sections without redefining existing class semantics:
       A. Anchor trust block (above kit grid)
       B. "Which kit is for you?" comparison matrix (table → mobile cards)
       C. "What's inside" preview tiles
       D. Honest FAQ (native <details> accordion)
   Tokens consumed: --accent, --ink, --bg, --rule-gray, --muted from theme.css
   No banned words, no new accents, no JS dependency.
   ============================================================================= */


/* ─── A. ANCHOR TRUST BLOCK ───────────────────────────────────────────────────
   Goes ABOVE the kit grid. First thing readers see after the hero so the rest
   of the page feels safer. Quiet ribbon, single accent, no pictograms heavier
   than thin SVG strokes.
   ============================================================================= */
.dr-anchor-trust {
  margin: 0;
  padding: 18px 24px;
  background: var(--bg, #faf9f5);
  border-top: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.08));
  border-bottom: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.08));
}
[data-theme="dark"] .dr-anchor-trust {
  background: var(--bg, #14140e);
  border-color: rgba(250, 249, 245, 0.08);
}
.dr-anchor-trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-anchor-trust-inner {
  color: var(--ink, #faf9f5);
}
.dr-anchor-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.dr-anchor-trust-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--accent, #c9613f);
}
.dr-anchor-trust-item strong {
  font-weight: 600;
}
@media (max-width: 640px) {
  .dr-anchor-trust { padding: 14px 16px; }
  .dr-anchor-trust-inner {
    gap: 10px 16px;
    font-size: 0.86rem;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Drop nowrap so the long "5 ADHD adults' work · …" item doesn't push viewport.
     Each trust item now flows naturally as a single-line item; if any item is
     wider than viewport, it wraps inside its own line instead of overflowing. */
  .dr-anchor-trust-item {
    white-space: normal;
    flex-wrap: wrap;
    max-width: 100%;
  }
}


/* ─── B. COMPARISON MATRIX ────────────────────────────────────────────────────
   Five kits × five columns: Best for / Includes / Time to first win /
   Difficulty / Price. Real <table> for desktop, stacked .dr-kit-card list on
   mobile. The table is keyboard-navigable; rows link via the "Buy" cell.
   ============================================================================= */
.dr-compare {
  padding: 56px 24px;
  background: var(--bg, #faf9f5);
}
[data-theme="dark"] .dr-compare { background: var(--bg, #14140e); }
.dr-compare-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.dr-compare h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-compare h2 { color: var(--ink, #faf9f5); }
.dr-compare-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted, rgba(20, 20, 14, 0.72));
  max-width: 60ch;
  margin: 0 0 28px;
}
[data-theme="dark"] .dr-compare-lede { color: var(--muted, rgba(250, 249, 245, 0.72)); }

/* Table — desktop ≥ 720px */
.dr-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-compare-table { color: var(--ink, #faf9f5); }
.dr-compare-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, rgba(20, 20, 14, 0.6));
  padding: 12px 14px;
  border-bottom: 2px solid var(--rule-gray, rgba(20, 20, 14, 0.12));
  white-space: nowrap;
}
[data-theme="dark"] .dr-compare-table thead th {
  color: var(--muted, rgba(250, 249, 245, 0.65));
  border-bottom-color: rgba(250, 249, 245, 0.16);
}
.dr-compare-table tbody td,
.dr-compare-table tbody th {
  padding: 16px 14px;
  border-bottom: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.08));
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
[data-theme="dark"] .dr-compare-table tbody td,
[data-theme="dark"] .dr-compare-table tbody th {
  border-bottom-color: rgba(250, 249, 245, 0.08);
}
.dr-compare-table tbody th {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.02rem;
  width: 26%;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-compare-table tbody th { color: var(--ink, #faf9f5); }
.dr-compare-table tbody tr:hover {
  background: rgba(201, 97, 63, 0.04);
}
[data-theme="dark"] .dr-compare-table tbody tr:hover {
  background: rgba(201, 97, 63, 0.08);
}
.dr-compare-price {
  font-weight: 600;
  white-space: nowrap;
}
.dr-compare-price-was {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted, rgba(20, 20, 14, 0.6));
  text-decoration: line-through;
  margin-top: 2px;
}
[data-theme="dark"] .dr-compare-price-was { color: var(--muted, rgba(250, 249, 245, 0.6)); }
.dr-compare-buy {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #faf9f5;
  background: var(--accent, #c9613f);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.dr-compare-buy:hover { background: #b8552f; }
.dr-compare-buy:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 2px;
}

/* Mobile cards — < 720px */
.dr-compare-cards {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.dr-kit-card {
  border: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.12));
  border-radius: 8px;
  padding: 18px;
  background: var(--bg, #faf9f5);
}
[data-theme="dark"] .dr-kit-card {
  border-color: rgba(250, 249, 245, 0.14);
  background: rgba(250, 249, 245, 0.03);
}
.dr-kit-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  margin: 0 0 12px;
  line-height: 1.25;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-kit-card h3 { color: var(--ink, #faf9f5); }
.dr-kit-card dl {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
}
.dr-kit-card dt {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, rgba(20, 20, 14, 0.6));
  align-self: start;
  padding-top: 2px;
}
[data-theme="dark"] .dr-kit-card dt { color: var(--muted, rgba(250, 249, 245, 0.62)); }
.dr-kit-card dd {
  margin: 0;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-kit-card dd { color: var(--ink, #faf9f5); }
@media (max-width: 720px) {
  .dr-compare-table { display: none; }
  .dr-compare-cards { display: flex; }
}


/* ─── C. PREVIEW TILES ────────────────────────────────────────────────────────
   Five tiles, each with: glyph, kit name, three bullets, sample link (where
   one exists), buy CTA. Cover images would 404 today, so we use a quiet
   square glyph as the visual anchor. Replace .dr-preview-glyph with <img>
   when /assets/covers/ kit thumbnails exist.
   ============================================================================= */
.dr-preview {
  padding: 56px 24px;
  background: rgba(201, 97, 63, 0.03);
  border-top: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.06));
  border-bottom: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.06));
}
[data-theme="dark"] .dr-preview {
  background: rgba(201, 97, 63, 0.06);
  border-color: rgba(250, 249, 245, 0.06);
}
.dr-preview-inner { max-width: 1100px; margin: 0 auto; }
.dr-preview h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 8px;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-preview h2 { color: var(--ink, #faf9f5); }
.dr-preview-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.98rem;
  color: var(--muted, rgba(20, 20, 14, 0.72));
  max-width: 60ch;
  margin: 0 0 28px;
}
[data-theme="dark"] .dr-preview-lede { color: var(--muted, rgba(250, 249, 245, 0.72)); }
.dr-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.dr-preview-tile {
  background: var(--bg, #faf9f5);
  border: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.1));
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .dr-preview-tile {
  background: rgba(250, 249, 245, 0.03);
  border-color: rgba(250, 249, 245, 0.12);
}
.dr-preview-glyph {
  width: 56px;
  height: 56px;
  border: 2px solid var(--accent, #c9613f);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--accent, #c9613f);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
}
.dr-preview-tile h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-preview-tile h3 { color: var(--ink, #faf9f5); }
.dr-preview-tile ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink, #14140e);
  flex: 1;
}
[data-theme="dark"] .dr-preview-tile ul { color: var(--ink, #faf9f5); }
.dr-preview-tile li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.dr-preview-tile li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent, #c9613f);
}
.dr-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.dr-preview-buy {
  display: inline-block;
  padding: 9px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #faf9f5;
  background: var(--accent, #c9613f);
  border-radius: 4px;
  text-decoration: none;
}
.dr-preview-buy:hover { background: #b8552f; }
.dr-preview-buy:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 2px;
}
.dr-preview-sample {
  display: inline-block;
  padding: 9px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink, #14140e);
  border: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.18));
  border-radius: 4px;
  text-decoration: none;
}
[data-theme="dark"] .dr-preview-sample {
  color: var(--ink, #faf9f5);
  border-color: rgba(250, 249, 245, 0.22);
}
.dr-preview-sample:hover { border-color: var(--accent, #c9613f); }
.dr-preview-sample:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 2px;
}


/* ─── D. FAQ ACCORDION ────────────────────────────────────────────────────────
   Native <details>/<summary>. No JS. Each summary has a quiet rotating chevron.
   FAQPage schema is in /buy/index.html as JSON-LD.
   ============================================================================= */
.dr-faq {
  padding: 56px 24px 72px;
  background: var(--bg, #faf9f5);
}
[data-theme="dark"] .dr-faq { background: var(--bg, #14140e); }
.dr-faq-inner { max-width: 760px; margin: 0 auto; }
.dr-faq h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 8px;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-faq h2 { color: var(--ink, #faf9f5); }
.dr-faq-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.98rem;
  color: var(--muted, rgba(20, 20, 14, 0.72));
  margin: 0 0 24px;
}
[data-theme="dark"] .dr-faq-lede { color: var(--muted, rgba(250, 249, 245, 0.72)); }
.dr-faq-list {
  border-top: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.12));
}
[data-theme="dark"] .dr-faq-list { border-top-color: rgba(250, 249, 245, 0.14); }
.dr-faq-item {
  border-bottom: 1px solid var(--rule-gray, rgba(20, 20, 14, 0.12));
}
[data-theme="dark"] .dr-faq-item { border-bottom-color: rgba(250, 249, 245, 0.14); }
.dr-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 36px 18px 0;
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-faq-item summary { color: var(--ink, #faf9f5); }
.dr-faq-item summary::-webkit-details-marker { display: none; }
.dr-faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent, #c9613f);
  border-bottom: 2px solid var(--accent, #c9613f);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.dr-faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.dr-faq-item summary:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 2px;
  border-radius: 2px;
}
.dr-faq-answer {
  padding: 0 36px 22px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink, #14140e);
}
[data-theme="dark"] .dr-faq-answer { color: var(--ink, #faf9f5); }
.dr-faq-answer p { margin: 0 0 10px; }
.dr-faq-answer p:last-child { margin-bottom: 0; }
.dr-faq-answer ul {
  margin: 8px 0 10px 18px;
  padding: 0;
}
.dr-faq-answer li { margin-bottom: 4px; }
.dr-faq-answer a { color: var(--accent, #c9613f); }
@media (prefers-reduced-motion: reduce) {
  .dr-faq-item summary::after { transition: none; }
}


/* ─── PRINT ──────────────────────────────────────────────────────────────────
   Hide buy CTAs and accordion chevrons on print; expand all <details>.
   ============================================================================= */
@media print {
  .dr-compare-buy, .dr-preview-buy, .dr-preview-sample { display: none; }
  .dr-faq-item summary::after { display: none; }
  .dr-faq-item[open] .dr-faq-answer,
  .dr-faq-item .dr-faq-answer { display: block !important; }
}