/* ==========================================================================
   Deets — guide template (guides/_template.html, guides/*.html, /about,
   guides/index.html)

   Reuses tokens.css's variables verbatim. Deliberately does NOT assume
   landing.css is loaded for its guide-specific components below — every
   class in this file is self-contained. In practice these pages currently
   ALSO load landing.css (same choice already shipped on rates/*.html) for
   the shared site primitives (.lnav, .lfoot, .btn, .chip, .eyebrow,
   .callout, .sr-only, .skip-link, .grid-3/.step-card) rather than
   duplicating ~900 lines of nav/footer/button CSS a second time — see the
   commit note for WR-9 if that trade-off ever needs revisiting. Nothing
   here redefines a landing.css primitive; component names below are all
   `g-`-prefixed and new.
   ========================================================================== */

/* ---- page shell ---------------------------------------------------------- */

.g-crumb {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 32px 0;
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: 600;
}
.g-crumb a { color: var(--muted); }
.g-crumb a:hover { color: var(--primary-d); }
.g-crumb b { color: var(--ink-soft); }

.g-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 32px 70px;
}
.g-main-wide { max-width: 1080px; }

.g-h1 {
  font-size: clamp(24px, 4vw, 32px);
  color: var(--ink);
  margin: 12px 0 10px;
  max-width: 760px;
}
.g-standfirst {
  font-size: var(--fs-title);
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 6px;
}
.g-checked {
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-bottom: 22px;
}
.g-checked a { color: var(--muted); text-decoration: underline; }

/* ---- answer box (the d: colon pattern) ------------------------------------ */

.g-answerbox {
  background: var(--primary-l);
  border: 1px solid #d9d4fb;
  border-radius: var(--r);
  padding: 18px 22px;
  margin: 0 0 26px;
  max-width: 640px;
}
.g-aline {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid rgba(91, 79, 240, 0.12);
  font-size: var(--fs-body);
}
.g-aline:first-child { border-top: none; padding-top: 0; }
.g-aline .g-lbl { font-weight: 800; color: var(--ink); flex: none; }
.g-aline .g-colon { color: var(--primary-d); font-weight: 800; flex: none; }
.g-aline .g-val { font-weight: 700; color: var(--ink-soft); }
.g-aline .g-val a { color: var(--primary-d); }

/* ---- mini table-of-contents (chip row, anchors) --------------------------- */

.g-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.g-toc a {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.g-toc a:hover { border-color: var(--primary); color: var(--primary-d); }

/* ---- body sections --------------------------------------------------------- */

.g-section { margin-bottom: 32px; max-width: 720px; scroll-margin-top: 20px; }
.g-section h2 { font-size: var(--fs-d1); color: var(--ink); margin-bottom: 10px; }
.g-section h3 { font-size: var(--fs-head); color: var(--ink); margin: 16px 0 6px; }
.g-section p { font-size: var(--fs-body); color: var(--ink-soft); margin-bottom: 8px; line-height: 1.65; }

/* R31 (Wave E, 21 Aug 2026, UXP-1/UXP-10): .g-fact-table's own first
   column is `white-space: nowrap` (below) — on a narrow viewport that
   forced the WHOLE PAGE to scroll sideways, since nothing contained the
   table's own overflow. Wrapping it in its own scrollable box (guide
   pages' HTML, below) keeps that overflow local to the table instead. */
.g-table-wrap { overflow-x: auto; margin: 6px 0 8px; }
.g-table-wrap .g-fact-table { margin: 0; }
/* Audit fix (finding 14, Wave E audit): the note only describes a real
   affordance on the narrow viewport where a .g-fact-table can actually
   outgrow .g-section's own 720px max-width and need the .g-table-wrap
   scroll — on a wide viewport the table already fits, nothing to scroll,
   and the note was just a stray sentence under every table on desktop.
   Hidden by default, shown only ≤900px (see this file's own breakpoint
   below, same one every other guide-page rule collapses at). */
.g-table-note { display: none; font-size: var(--fs-micro); color: var(--muted); margin: 0 0 16px; }

.g-fact-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); margin: 6px 0 8px; }
.g-fact-table th {
  text-align: left;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.g-fact-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.g-fact-table td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.g-fact-table .g-src { font-size: var(--fs-micro); color: var(--muted); }

.g-check-list { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 0; list-style: none; padding: 0; }
.g-check-list li { display: flex; gap: 8px; font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.55; }
.g-check-list li span { flex: none; color: var(--green); font-weight: 800; }

.g-source { font-size: var(--fs-micro); color: var(--muted); margin: -2px 0 18px; }

/* ---- in-content product card (max one per guide) --------------------------- */

.g-product-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 22px 24px;
  margin: 10px 0 8px;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.g-product-card h3 { font-size: var(--fs-title); margin-bottom: 4px; color: #fff; }
.g-product-card p { font-size: var(--fs-label); color: rgba(255, 255, 255, 0.72); max-width: 400px; margin: 0; }
.g-product-card .btn { flex: none; }
.g-product-card .chip { flex: none; }

/* ---- FAQ block -------------------------------------------------------------- */

.g-faq { max-width: 720px; margin-bottom: 32px; }
.g-faq details {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.g-faq summary {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::before { content: "+ "; color: var(--primary-d); font-weight: 800; }
.g-faq details[open] summary::before { content: "\2212 "; }
.g-faq p { font-size: var(--fs-body); color: var(--ink-soft); margin: 8px 0 0; line-height: 1.65; }

/* ---- end-of-guide conversion block ------------------------------------------ */

.g-end-cta {
  background: var(--soft);
  border-radius: var(--r);
  padding: 26px 26px 22px;
  margin: 8px 0 30px;
  max-width: 720px;
}
.g-end-cta h3 { font-size: var(--fs-head); color: var(--ink); margin-bottom: 6px; }
.g-end-cta p { font-size: var(--fs-body); color: var(--ink-soft); margin-bottom: 16px; max-width: 520px; }
.g-end-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-end-cta-account { font-size: var(--fs-label); color: var(--ink-soft); }
.g-end-cta-account a { color: var(--primary-d); font-weight: 700; }

/* ---- related guides / more-from-deets --------------------------------------- */

.g-related-title {
  font-size: var(--fs-label);
  font-weight: 800;
  color: var(--ink-soft);
  margin: 4px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.g-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; max-width: 780px; }
.g-related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  color: inherit;
}
.g-related-card:hover { border-color: var(--primary); }
.g-related-card b { display: block; font-size: var(--fs-body); color: var(--ink); margin-bottom: 3px; }
.g-related-card span { font-size: var(--fs-micro); color: var(--muted); }

/* ---- honesty callout --------------------------------------------------------- */

.g-honesty {
  background: #fff;
  border: 1px dashed #cfc9ec;
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 22px;
  line-height: 1.6;
}
.g-honesty a { font-weight: 700; }

/* ---- HUB: grouped guide index ------------------------------------------------ */

.g-hub-group { margin-bottom: 30px; }
.g-hub-group-title {
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-d);
  margin-bottom: 10px;
}
.g-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.g-hub-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  color: inherit;
  box-shadow: var(--shadow-xs);
}
.g-hub-card:hover { border-color: var(--primary); }
.g-hub-card b { display: block; font-size: var(--fs-title); color: var(--ink); margin-bottom: 5px; }
.g-hub-card p { font-size: var(--fs-body); color: var(--ink-soft); margin: 0; line-height: 1.5; }
.g-hub-card .chip { margin-top: 10px; }

@media (max-width: 900px) {
  .g-crumb, .g-main { padding-left: 18px; padding-right: 18px; }
  .g-h1 { font-size: 22px; }
  .g-product-card { flex-direction: column; align-items: flex-start; }
  .g-related-grid { grid-template-columns: 1fr; }
  .g-hub-grid { grid-template-columns: 1fr; }
  /* Finding 14: the "Scroll the table sideways" note earns its place at
     this width — restored here, still hidden above it. */
  .g-table-note { display: block; }
}