/* frontrowtheme.com v2: niche landing pages and the text pages (docs, guide, terms,
   privacy, thanks). Same system as fr.css: off-black, red and white only; Inter Tight,
   Libre Caslon for numerals; solid off-black lines; square corners. */

/* ---------- Niche pages ---------- */
.niche .crumbs { margin: 0 0 2rem; font-size: var(--small); }
.niche .crumbs a { text-decoration: none; font-weight: 500; }
.niche__shots { display: grid; gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); margin: 0; }
@media (min-width: 56rem) { .niche__shots { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; } .niche__shot--main { grid-row: span 2; } }
.niche__shot { overflow: hidden; background: var(--ink); }
.niche__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.niche__shots figcaption { grid-column: 1 / -1; margin: 0.5rem 0 0; }
.niche__answer-inner { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .niche__answer-inner { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.niche__answer p { margin: 0; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.6; max-width: 62ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--line); }
.facts > div { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 var(--label) / 1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.facts dd { margin: 0; font-weight: 500; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 2rem; }
@media (min-width: 48rem) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .points { grid-template-columns: repeat(3, 1fr); } }
.points li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.points__n { display: block; font: 400 2rem / 1 var(--serif); color: var(--red); margin-bottom: 1rem; }
.points h3 { font: 600 var(--title) / 1.15 var(--sans); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.points p { margin: 0; }
.more { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }

/* ---------- Text pages: the hand-written docs, guide and legal text ---------- */
.prose-page .page { max-width: 46rem; }
.prose-page .eyebrow { font: 500 var(--label) / 1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1.25rem; }
.prose-page h1, .prose-page .docs__title { font: 600 var(--display) / 0.98 var(--sans); letter-spacing: -0.035em; margin: 0 0 1.5rem; text-wrap: balance; }
.prose-page .docs__lead, .prose-page .niche__lead { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; margin: 0 0 3rem; max-width: 40ch; }
.prose-page section { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.prose-page h2, .prose-page .niche__question { font: 600 var(--title) / 1.15 var(--sans); letter-spacing: -0.02em; margin: 0 0 1rem; }
.prose-page p, .prose-page li, .prose-page dd { line-height: 1.6; }
.prose-page p { margin: 0 0 1rem; }
.prose-page ul, .prose-page ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose-page li { margin-bottom: 0.4rem; }
.prose-page li::marker { color: var(--red); }
.prose-page a:not(.btn) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.prose-page a:not(.btn):hover { color: var(--red); }
.prose-page code { font: 500 0.92em var(--sans); background: var(--ink); color: var(--white); padding: 0.05rem 0.35rem; }
.prose-page dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0; margin: 0 0 1rem; border-top: 1px solid var(--line); }
.prose-page dt, .prose-page dd { padding: 0.75rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.prose-page dt { font-weight: 600; padding-right: 1rem; }
.prose-page table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.95rem; }
.prose-page th, .prose-page td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--line); }
.prose-page thead th { font: 500 var(--label) / 1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; border-bottom-width: 1px; }
.prose-page .compare, .prose-page .guide__table { overflow-x: auto; aspect-ratio: auto; background: none; }
.prose-page .docs__note { display: block; font-size: var(--small); font-weight: 400; }
.prose-page .badge { display: inline-block; font: 500 var(--label) / 1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 0.3rem 0.45rem; vertical-align: middle; }
.prose-page .niche__crumbs { font-size: var(--small); margin-bottom: 2rem; }
.prose-page .niche__crumbs a { font-weight: 500; text-decoration: none; }
.prose-page .niche__cta .display, .prose-page p.display { font: 600 var(--display) / 1 var(--sans); letter-spacing: -0.035em; margin: 0 0 1.5rem; }
.prose-page .niche__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Docs: the page index sits beside the text on wide screens. */
.prose-page .docs { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .prose-page .docs { grid-template-columns: 14rem minmax(0, 46rem); gap: 4rem; } }
.prose-page .docs__nav { align-self: start; }
@media (min-width: 64rem) { .prose-page .docs__nav { position: sticky; top: 6rem; } }
.prose-page .docs__nav ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.prose-page .docs__nav li { margin: 0; border-bottom: 1px solid var(--line); }
.prose-page .docs__nav a { display: block; padding: 0.6rem 0; text-decoration: none; font-weight: 500; }
.prose-page .docs__nav a:hover { color: var(--red); }
.prose-page .docs .page section:first-of-type { margin-top: 0; }