/* FAQ and comparison pages (ADR-082 A2), generated by tools/citable/build.py.
   Hand-written rather than Tailwind so these pages never change site.css (and with it the
   ?v= stamp on every course page). Colours are the site's own: tailwind.site.config.js. */
:root {
  --ct-card: #ffffff; --ct-line: #e8e3d9; --ct-text: #1f2937; --ct-muted: #4b5563; --ct-soft: #fff4e8;
  --ct-chip: #f3efe6; --ct-accent: #ff9f43; --ct-link: #9a3412; --ct-page: #f9f7f2;
}
.dark {
  --ct-card: #2c243b; --ct-line: rgba(255, 255, 255, .1); --ct-text: #ffffff; --ct-muted: #d1d5db;
  --ct-soft: rgba(255, 159, 67, .12); --ct-chip: #3d3450; --ct-link: #ffb469; --ct-page: #1a1625;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ct-crumbs { font-size: .875rem; color: var(--ct-muted); margin-bottom: 1.5rem; }
.ct-crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ct-crumbs li { display: flex; align-items: center; gap: .5rem; }
.ct-crumbs a:hover { color: var(--ct-link); text-decoration: underline; text-underline-offset: 2px; }
.ct-crumbs [aria-current] { color: var(--ct-text); font-weight: 700; }

.ct-head { max-width: 48rem; margin-bottom: 2.5rem; }
.ct-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; font-weight: 800; text-wrap: balance; margin: 0 0 1rem; overflow-wrap: break-word; hyphens: auto; }
.ct-lede { font-size: 1.15rem; line-height: 1.65; color: var(--ct-muted); margin: 0; }
.ct-stamp { display: inline-flex; align-items: center; gap: .5rem; margin: 1.1rem 0 0; font-size: .875rem; font-weight: 700; color: var(--ct-muted); background: var(--ct-chip); border-radius: 9999px; padding: .35rem .85rem; }
.ct-disclose { margin: .9rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--ct-muted); }
.ct-disclose a, .ct-qa a, .ct-cta a:not(.ct-store), .ct-note a, .ct-two a { color: var(--ct-link); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* FAQ: sticky topic index beside the questions; a scrolling chip row on phones. */
.ct-faq { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.ct-toc { position: sticky; top: 6.5rem; }
.ct-toc-h { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ct-muted); margin: 0 0 .75rem; }
.ct-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ct-toc a { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .75rem; border-radius: .6rem; font-weight: 700; }
.ct-toc a:hover { background: var(--ct-chip); }
.ct-toc a.is-on { background: var(--ct-soft); color: var(--ct-link); }
.ct-n { color: var(--ct-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .ct-faq { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ct-toc { top: 4.6rem; z-index: 20; background: var(--ct-page); margin: 0 -1.5rem; padding: .5rem 1.5rem; border-bottom: 1px solid var(--ct-line); }
  .ct-toc-h, .ct-n { display: none; }
  .ct-toc ol { display: flex; overflow-x: auto; gap: .4rem; scrollbar-width: none; }
  .ct-toc a { white-space: nowrap; border: 1px solid var(--ct-line); border-radius: 9999px; }
}
.ct-topic { padding-bottom: 1.5rem; scroll-margin-top: 7rem; }
.ct-topic > h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.6rem; font-weight: 800; margin: 0 0 .5rem; }
.ct-topic > h2 i { color: var(--ct-accent); font-size: 1.2rem; }
.ct-qa { border-top: 1px solid var(--ct-line); padding: 1.25rem 0; scroll-margin-top: 7rem; }
.ct-qa h3 { display: flex; align-items: baseline; gap: .5rem; font-size: 1.15rem; font-weight: 800; margin: 0 0 .5rem; }
.ct-anchor { opacity: 0; color: var(--ct-muted) !important; text-decoration: none !important; font-size: .9rem; }
.ct-qa:hover .ct-anchor, .ct-anchor:focus { opacity: 1; }
.ct-qa p, .ct-qa li { line-height: 1.65; color: var(--ct-muted); max-width: 44rem; }
.ct-qa p { margin: 0 0 .6rem; }
.ct-qa p:first-of-type { color: var(--ct-text); }
.ct-qa ul { margin: 0 0 .6rem; padding-left: 1.2rem; list-style: disc; }

/* Free vs Pro table inside an answer, and the comparison table. */
.ct-table-wrap { overflow-x: auto; border: 1px solid var(--ct-line); border-radius: 1.25rem; background: var(--ct-card); margin: .25rem 0 .9rem; }
.ct-plan, .ct-cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ct-qa .ct-table-wrap { max-width: 36rem; }
.ct-plan th, .ct-plan td, .ct-cmp th, .ct-cmp td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--ct-line); line-height: 1.5; }
.ct-plan tr:last-child > *, .ct-cmp tr:last-child > * { border-bottom: 0; }
.ct-plan thead th, .ct-cmp thead th { font-weight: 800; background: var(--ct-chip); }
.ct-plan td { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ct-text); white-space: nowrap; }
.ct-plan td .fa-check { color: #15803d; }
.dark .ct-plan td .fa-check { color: #4ade80; }
.ct-plan td .fa-xmark { color: var(--ct-muted); }
.ct-plan tbody th, .ct-cmp tbody th { font-weight: 800; color: var(--ct-text); }
.ct-plan small { display: block; font-weight: 600; color: var(--ct-muted); font-size: .8rem; }
.ct-cmp { min-width: 46rem; }
.ct-cmp tbody th { width: 12rem; }
.ct-cmp td { color: var(--ct-muted); }
.ct-cmp thead th.ct-ours { background: var(--ct-soft); color: var(--ct-link); }
.ct-cmp td.ct-ours { background: color-mix(in srgb, var(--ct-soft) 60%, transparent); color: var(--ct-text); }
.ct-cmp sup a { color: var(--ct-link); font-weight: 800; padding: 0 .1rem; }
@media (max-width: 900px) {
  .ct-cmp tbody th, .ct-cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ct-card); width: 8.5rem; min-width: 8.5rem; }
  .ct-cmp thead th:first-child { background: var(--ct-chip); }
}
.ct-note { font-size: .875rem; color: var(--ct-muted); margin: 0 0 3rem; }

/* Comparison: short-answer cards. */
.ct-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 3rem; }
@media (max-width: 900px) { .ct-picks { grid-template-columns: minmax(0, 1fr); } }
.ct-pick { background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 1.25rem; padding: 1.25rem 1.35rem; }
.ct-pick-ours { border: 2px solid var(--ct-accent); background: var(--ct-soft); }
.ct-who { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-muted); margin: 0 0 .4rem; }
.ct-pick h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; font-weight: 800; margin: 0 0 .6rem; }
.ct-pick ul { margin: 0; padding-left: 1.1rem; list-style: disc; color: var(--ct-muted); line-height: 1.6; }
.ct-logo { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; background: var(--ct-chip); }
.ct-logo img { width: 28px; height: 28px; border-radius: 8px; }
.ct-h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 1rem; }
.ct-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 900px) { .ct-two { grid-template-columns: minmax(0, 1fr); } }
.ct-two h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .5rem; }
.ct-two p, .ct-two li { line-height: 1.65; color: var(--ct-muted); }
.ct-two ul { padding-left: 1.2rem; list-style: disc; margin: 0; }
.ct-sources { margin-top: 3rem; font-size: .9rem; color: var(--ct-muted); }
.ct-sources ol { padding-left: 1.4rem; list-style: decimal; line-height: 1.7; }
.ct-sources li { scroll-margin-top: 7rem; }
.ct-sources li:target { background: var(--ct-soft); border-radius: .4rem; }
.ct-sources a { color: var(--ct-link); font-weight: 700; word-break: break-word; }

/* Closing call to action with both store buttons. */
.ct-cta { margin-top: 3rem; padding: 2rem; border-radius: 1.5rem; background: var(--ct-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.ct-cta h2 { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 800; }
.ct-cta p { margin: 0; color: var(--ct-muted); line-height: 1.6; }
.ct-stores { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct-store { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.25rem; border-radius: 1rem; font-weight: 800; }
.ct-store-ios { background: var(--ct-accent); color: #1f2937; }
.ct-store-android { background: #1f2937; color: #fff; }
.dark .ct-store-android { background: #fff; color: #1a1625; }
.ct-store:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ct-store:hover { transform: none; } }

/* Theme toggle in the nav, as on the course pages (course.css). */
.theme-toggle { position: relative; width: 50px; height: 26px; background: #cbd5e1; border-radius: 9999px; cursor: pointer; }
.dark .theme-toggle { background: #3d3450; }
.toggle-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #f59e0b; transition: transform .3s; }
.dark .toggle-dot { transform: translateX(24px); background: #1a1625; color: #9b59b6; }