/* Reading pages: the FAQ, privacy, terms and 404 (and the blog, later).
   Loaded after css/site.css, which brings the tokens, header, footer and the
   FAQ accordion. The jkr look: Bricolage Grotesque headings on the cream page,
   a yellow rule, charcoal text. Every line of text 16px or more. */

.article { max-width: var(--w-text); margin: 0 auto; padding: 28px var(--gutter) 72px; }

/* Breadcrumb: 48px taps, 16px text. */
.article .trail { font-size: 1rem; margin: 0 0 12px; }
.article .trail ol { margin: 0; padding: 0; }
.article .trail a { display: inline-flex; align-items: center; min-height: 48px; color: var(--dtan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* The round 9 trail (scripts/lib/crumbs.mjs, .crumbs) on a reading page, first on Before we come:
   the same look as the trail above, its list kept clear of the article's list spacing. */
.article .crumbs { font-size: 1rem; margin: 0 0 12px; }
.article .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.article .crumbs li { display: inline-flex; align-items: center; margin: 0; font-size: 1rem; line-height: 1.4; color: var(--txm); }
.article .crumbs li a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; color: var(--dtan); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article .crumbs-sep { margin: 0 10px; color: var(--txd); }
.article .crumbs [aria-current] { font-weight: 600; color: var(--rg); }

.article h1 {
  font-family: var(--font); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1; color: var(--rg); margin-bottom: 16px; text-wrap: balance;
}
.article h1 span { display: block; color: var(--dtan); }
.a-lede { font-size: 1.125rem; line-height: 1.7; color: var(--txm); padding-bottom: 24px; margin-bottom: 8px; border-bottom: 3px solid var(--tan); }
.updated { font-size: 1rem; font-weight: 700; color: var(--dtan); margin-bottom: 16px; }

.article h2 {
  font-family: var(--font); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 3.4vw, 1.7rem); line-height: 1.25; color: var(--rg); margin: 40px 0 12px; text-wrap: balance;
}
.article h3 { font-size: 1.125rem; font-weight: 700; color: var(--rg); margin: 26px 0 8px; }
.article p, .article li { font-size: 1.0625rem; line-height: 1.8; color: var(--txm); }
.article p { margin-bottom: 16px; }
.article ul, .article ol { margin: 0 0 18px 22px; }
.article li { margin-bottom: 8px; }
.article strong { color: var(--rg); }
.article p a, .article li a, .article .faq-answer a {
  color: var(--rg); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan);
  text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.article p a:hover, .article li a:hover { color: var(--dtan); }

/* The FAQ: groups of questions, each an accordion from css/site.css. */
.faq-group { margin-top: 36px; }
.faq-group > h2 { margin-top: 0; scroll-margin-top: 120px; }   /* a topic jump clears the sticky header */

/* Round 9, the help center: the topics as buttons, and a person to ask beside them
   (under them on a phone). */
.help-top { display: grid; gap: 16px; }
@media (min-width: 720px) { .help-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.help-topics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.help-topics li { margin: 0; }
.help-topics a {
  display: flex; align-items: center; min-height: 56px; height: 100%; padding: 10px 14px;
  background: var(--card); border: 1.5px solid var(--bdr); border-radius: 14px;
  color: var(--rg); font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none;
  transition: border-color .2s;
}
.help-topics a:hover { border-color: var(--rg); color: var(--rg); }
.help-topics a:focus-visible { outline: 3px solid var(--rg); outline-offset: 2px; }
.help-contact { background: var(--rg); color: #FBF8F2; border-radius: var(--r-md); padding: 20px 24px; }
.help-contact h2 { margin: 0 0 4px; font-size: 1.15rem; color: #FBF9F5; }
.help-contact ul { list-style: none; margin: 0; padding: 0; }
.help-contact li { margin: 0; }
.help-contact a { display: flex; align-items: center; min-height: 48px; color: #FBF8F2; font-weight: 600; font-size: 1rem; text-decoration: underline; text-decoration-color: rgba(251,249,245,.4); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.help-contact a:hover { color: #fff; }
.article .faq-list details { background: var(--card); }
.article .faq-answer p { margin-bottom: 12px; }
.article .faq-answer p:last-child { margin-bottom: 0; }

/* The help page in the homepage's look (founder 2026-10-15: "faq is weird size"): each group
   of questions laid out like the homepage's questions (css/home.css .faq-split and .faq). */
.help-hero .h-hero-top { margin-bottom: 0; }
.help-group + .help-group { margin-top: clamp(48px, 6vw, 88px); }
.help-group .section-title { margin: 0; scroll-margin-top: 120px; }   /* a topic jump clears the sticky header */
.help-group .faq-answer { padding: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Ask us / get a price block at the foot of a page. */
.a-cta { margin-top: 44px; padding: 26px 24px; border-radius: var(--r-md); background: var(--rg); color: var(--on-dark); }
.a-cta h2 { color: #fff; margin: 0 0 8px; }
.a-cta p { color: var(--on-dark-m); }
.a-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.a-cta a.btn-primary, .a-cta a.btn-ghost { min-height: 48px; display: inline-flex; align-items: center; }
.a-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }

/* 404 */
.not-found { text-align: left; }
.not-found ul { list-style: none; margin: 18px 0 0; display: grid; gap: 8px; }
.not-found li a { display: inline-flex; align-items: center; min-height: 48px; }

/* The blog: post meta line, the index list, the way back. */
.post-meta { font-size: 1rem; font-weight: 600; color: var(--txm); margin: -4px 0 20px; padding-bottom: 18px; border-bottom: 3px solid var(--tan); }
.post-list, .article .post-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.post-list li { margin: 0; }
.article .post-list a { display: grid; gap: 4px; min-height: 48px; padding: 18px 20px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--bdr); text-decoration: none; font-weight: 400; }
.article .post-list a:hover { border-color: var(--rg); box-shadow: 0 6px 0 var(--rg); }
.pl-title { font: 600 1.2rem/1.3 var(--font); color: var(--rg); letter-spacing: -.01em; }
.pl-sum { font-size: 1rem; line-height: 1.6; color: var(--txm); }
.post-back { margin-top: 28px; }
.post-back a { display: inline-flex; align-items: center; min-height: 48px; }