/* Content surfaces: the reference pages a visitor or a crawler reads rather
   than the product marketing page. Everything here is expressed through the
   existing ClearFrame tokens (m3-tokens.css + site-shell.css), so these pages
   inherit the app's Material palette and both themes without new colours. */

.cf-doc { padding: 28px 0 72px; }
.cf-doc .cf-wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.cf-doc-narrow .cf-wrap { width: min(760px, calc(100% - 40px)); }

/* ── breadcrumb ───────────────────────────────────────────────────────────── */
.cf-crumbs { font-size: var(--cf-type-xs); color: var(--muted); margin: 4px 0 18px; }
.cf-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cf-crumbs li { display: flex; gap: 8px; align-items: center; }
.cf-crumbs li + li::before { content: "/"; color: var(--line); }
.cf-crumbs a { color: var(--muted); text-decoration: none; }
.cf-crumbs a:hover { color: var(--blue); }
.cf-crumbs [aria-current="page"] { color: var(--text); }

/* ── masthead ─────────────────────────────────────────────────────────────── */
.cf-doc-head { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 34px; }
.cf-doc-head .cf-eyebrow {
  font-family: var(--cf-font-mono); font-size: 11px; font-weight: var(--cf-weight-medium);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px;
}
.cf-doc-head h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.1 !important; }
.cf-doc-head .cf-lede { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 68ch; }
.cf-updated { font-size: var(--cf-type-xs); color: var(--muted); margin: 16px 0 0; }

/* ── prose ────────────────────────────────────────────────────────────────── */
.cf-prose { max-width: 72ch; }
.cf-prose h2 { margin: 44px 0 14px; padding-top: 8px; }
.cf-prose-spaced { margin-top: 38px; }
.cf-prose h2:first-child { margin-top: 0; }
.cf-prose h3 { margin: 28px 0 10px; }
.cf-prose p { margin: 0 0 16px; line-height: 1.7; color: var(--muted); }
.cf-prose strong { color: var(--text); font-weight: var(--cf-weight-semibold); }
.cf-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cf-prose ul, .cf-prose ol { margin: 0 0 18px; padding-left: 22px; color: var(--muted); line-height: 1.7; }
.cf-prose li { margin-bottom: 8px; }
.cf-prose li::marker { color: var(--blue); }
.cf-prose code {
  font-family: var(--cf-font-mono); font-size: .88em; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: var(--cf-radius-small); background: var(--surface);
  color: var(--text);
}
.cf-prose pre {
  margin: 0 0 20px; padding: 16px 18px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--cf-radius-control); background: var(--surface);
}
.cf-prose pre code { border: 0; padding: 0; background: none; font-size: 12.5px; line-height: 1.7; }

/* Answer-first callout, used for the direct answer under a question heading. */
.cf-answer {
  margin: 0 0 26px; padding: 18px 20px; border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--cf-radius-control);
  background: var(--cf-accent-soft, var(--surface));
}
.cf-answer p { margin: 0; color: var(--text); line-height: 1.7; }
.cf-answer p + p { margin-top: 12px; }

/* ── cards and grids ──────────────────────────────────────────────────────── */
.cf-grid { display: grid; gap: 18px; margin: 0 0 34px; }
.cf-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cf-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cf-card {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--cf-radius-card);
  background: var(--surface);
}
.cf-card h2, .cf-card h3 { margin: 0 0 10px; font-size: 18px !important; }
.cf-card p { margin: 0; font-size: var(--cf-type-s); line-height: var(--cf-lineheight-l); color: var(--muted); }
.cf-card ul { margin: 12px 0 0; padding-left: 20px; font-size: var(--cf-type-s); line-height: 1.7; color: var(--muted); }
.cf-card .cf-step {
  display: block; font-family: var(--cf-font-mono); font-size: 11px; font-weight: var(--cf-weight-medium);
  letter-spacing: .12em; color: var(--blue); margin-bottom: 12px;
}
.cf-card-featured { border-color: var(--blue); }

/* ── pricing ──────────────────────────────────────────────────────────────── */
.cf-plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 30px; }
.cf-plan {
  display: flex; flex-direction: column; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--cf-radius-card); background: var(--surface);
}
.cf-plan-featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.cf-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cf-plan-top h2, .cf-plan-top h3 { margin: 0; font-size: 20px !important; }
.cf-plan-top span {
  font-family: var(--cf-font-mono); font-size: var(--cf-type-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.cf-price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 6px; font-size: 42px; font-weight: var(--cf-weight-semibold); letter-spacing: -.04em; color: var(--text); }
.cf-price small { font-size: 15px; font-weight: var(--cf-weight-regular); color: var(--muted); }
.cf-plan .cf-allowance { margin: 0 0 18px; font-size: var(--cf-type-s); color: var(--muted); }
.cf-plan ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: var(--cf-type-s); line-height: 1.6; color: var(--muted); }
.cf-plan li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.cf-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: var(--cf-weight-semibold); }
.cf-plan .cf-plan-cta { margin-top: auto; }

/* ── comparison table ─────────────────────────────────────────────────────── */
.cf-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--cf-radius-card); background: var(--surface); margin: 0 0 22px; }
/* `fixed` layout with explicit widths keeps the four vendor columns even and makes
   the cells wrap. Without it the prose in the first column dictates the widths and
   the table runs past the viewport even on a wide screen. */
.cf-table { border-collapse: collapse; width: 100%; min-width: 620px; table-layout: fixed; font-size: 13px; line-height: 1.55; }
.cf-table th:first-child { width: 18%; }
.cf-table thead th:not(:first-child) { width: 20.5%; }
.cf-table caption { text-align: left; padding: 16px 18px 0; font-size: var(--cf-type-xs); color: var(--muted); }
.cf-table th, .cf-table td { padding: 14px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: var(--cf-weight-regular); color: var(--muted); overflow-wrap: break-word; }
.cf-table thead th { font-weight: var(--cf-weight-semibold); color: var(--text); font-size: var(--cf-type-xs); }
.cf-table tbody th { font-weight: var(--cf-weight-medium); color: var(--text); }
.cf-table tbody tr:last-child th, .cf-table tbody tr:last-child td { border-bottom: 0; }
.cf-table .cf-us { background: var(--cf-accent-soft, var(--surface)); color: var(--text); border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.cf-table thead .cf-us { border-top: 2px solid var(--blue); }
.cf-table tbody tr:last-child .cf-us { border-bottom: 2px solid var(--blue); }
.cf-table a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.cf-faq { margin: 0; }
.cf-faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.cf-faq details:first-of-type { border-top: 1px solid var(--line); }
.cf-faq summary {
  cursor: pointer; padding: 18px 32px 18px 0; position: relative;
  font-size: 17px; font-weight: var(--cf-weight-medium); color: var(--text); list-style: none;
}
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: var(--cf-weight-regular); color: var(--blue);
}
.cf-faq details[open] summary::after { content: "−"; }
.cf-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.cf-faq .cf-faq-body { padding: 0 0 22px; max-width: 72ch; }
.cf-faq .cf-faq-body p { margin: 0 0 14px; line-height: 1.7; color: var(--muted); }
.cf-faq .cf-faq-body p:last-child { margin-bottom: 0; }
.cf-faq .cf-faq-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── docs sidebar ─────────────────────────────────────────────────────────── */
.cf-doc-layout { display: grid; gap: 40px; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.cf-toc { position: sticky; top: 84px; font-size: 13px; }
.cf-toc h2 {
  font-family: var(--cf-font-mono); font-size: var(--cf-type-2xs) !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: var(--cf-weight-medium) !important;
}
.cf-toc ol { list-style: none; margin: 0; padding: 0; }
.cf-toc li { margin-bottom: 10px; }
.cf-toc a { color: var(--muted); text-decoration: none; line-height: var(--cf-lineheight-m); display: block; }
.cf-toc a:hover { color: var(--blue); }
@media (max-width: 820px) {
  .cf-doc-layout { grid-template-columns: 1fr; gap: 24px; }
  .cf-toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
}

/* ── callouts ─────────────────────────────────────────────────────────────── */
.cf-note {
  margin: 0 0 26px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--cf-radius-control); background: var(--surface); font-size: var(--cf-type-s); line-height: var(--cf-lineheight-l); color: var(--muted);
}
.cf-note strong { color: var(--text); }
.cf-note-sources { font-size: 11.5px; line-height: 1.7; }
.cf-note-sources a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── closing CTA ──────────────────────────────────────────────────────────── */
.cf-doc-cta {
  margin: 52px 0 0; padding: 32px; border: 1px solid var(--line);
  border-radius: var(--cf-radius-card); background: var(--surface);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.cf-doc-cta h2 { margin: 0 0 8px; font-size: 24px !important; }
.cf-doc-cta p { margin: 0; color: var(--muted); font-size: var(--cf-type-s); max-width: 52ch; }
.cf-doc-cta .cf-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ── footer note list ─────────────────────────────────────────────────────── */
.cf-related { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.cf-related h2 { font-size: var(--cf-type-m) !important; margin: 0 0 14px; }
.cf-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--cf-type-s); }
.cf-related a { color: var(--blue); text-decoration: none; }
.cf-related a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── site footer ──────────────────────────────────────────────────────────── */
/* The shared footer owns its own layout so it can carry a full link set on
   every surface regardless of which page stylesheet that surface also loads. */
.cf-site-footer {
  margin-top: 64px; border-top: 1px solid var(--line); background: var(--surface);
  font-size: var(--cf-type-s);
}
.cf-footer-inner {
  width: min(1080px, calc(100% - 40px)); margin-inline: auto;
  padding: 44px 0 32px; display: grid; gap: 36px;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); align-items: start;
}
.cf-footer-brand .brand {
  display: inline-flex; align-items: center; gap: 9px; font-size: var(--cf-type-l);
  font-weight: var(--cf-weight-semibold); letter-spacing: -.03em; color: var(--text); text-decoration: none;
}
.cf-footer-brand .brand span { color: var(--blue); }
.cf-footer-brand p { margin: 12px 0 0; color: var(--muted); font-size: var(--cf-type-s); }
.cf-footer-brand .cf-footer-note { font-size: 13px; max-width: 30ch; }
.cf-footer-nav { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cf-footer-col h2 {
  font-family: var(--cf-font-mono); font-size: var(--cf-type-2xs) !important; font-weight: var(--cf-weight-medium) !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.cf-footer-col ul { list-style: none; margin: 0; padding: 0; }
.cf-footer-col li { margin-bottom: 10px; }
.cf-footer-col a { color: var(--muted); text-decoration: none; line-height: 1.4; }
.cf-footer-col a:hover { color: var(--blue); }
.cf-footer-base {
  width: min(1080px, calc(100% - 40px)); margin-inline: auto;
  padding: 18px 0 30px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: var(--cf-type-xs); color: var(--muted);
}
@media (max-width: 720px) {
  .cf-footer-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 34px; }
}

/* ── stacking tables ──────────────────────────────────────────────────────── */
/* A two-column list (version → what changed) is unreadable as a squeezed table on
   a phone, so below the breakpoint each row becomes a labelled card. Opt-in per
   table via `.cf-table-stack`, because a genuine side-by-side comparison must
   keep its column alignment. */
@media (max-width: 640px) {
  .cf-table-stack { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .cf-table-stack caption { padding: 0 0 12px; }
  .cf-table-stack table { min-width: 0; table-layout: auto; }
  .cf-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cf-table-stack tbody tr {
    display: block; margin-bottom: 12px; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: var(--cf-radius-card); background: var(--surface);
  }
  .cf-table-stack tbody th,
  .cf-table-stack tbody td { display: block; width: auto; padding: 0; border: 0; }
  .cf-table-stack tbody th { font-size: 15px; margin-bottom: 8px; }
  .cf-table-stack tbody th a { text-decoration: none; }
  /* The column heading is lost with the header row, so it is restated per cell. */
  .cf-table-stack tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--cf-font-mono); font-size: var(--cf-type-2xs); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
  }
}

/* ── blog ─────────────────────────────────────────────────────────────────── */
/* Post meta and standfirst sit above the article body. The standfirst is set
   larger because it is the sentence a reader uses to decide whether to keep
   reading, and the sentence a retrieval system is most likely to lift. */
.cf-post-meta {
  font-family: var(--cf-font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 16px;
}
.cf-post-lede {
  font-size: 18px; line-height: var(--cf-lineheight-l); color: var(--text); margin: 0 0 26px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
/* A card on the index is a link; the heading inside it is not a second link. */
.cf-card h2 a, .cf-card h3 a { color: inherit; text-decoration: none; }
.cf-card h2 a:hover, .cf-card h3 a:hover { color: var(--blue); }
.cf-card h2 + p, .cf-card h3 + p { margin-top: 8px; }
.cf-card p a { color: var(--blue); text-decoration: none; font-size: 13px; }
.cf-card p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── /verify/ ─────────────────────────────────────────────────────────────── */
/* The receipt checker's own surface. Every rule here exists because the page's
   CSP refuses an inline `style` attribute (style-src 'self' with no
   'unsafe-inline'), which is the right default: a page that can style itself
   inline is a page whose styles cannot be reviewed in one place. So the page and
   its script carry classes, and this is where those classes mean something. */
.cf-verify-panel{margin-top:var(--cf-space-6)}
.cf-verify-status[hidden],.cf-verify-output[hidden]{display:none}
.cf-verify-headline{padding-left:var(--cf-space-4);border-left:3px solid var(--cf-outline)}
.cf-verify-headline p{margin:6px 0 0;font-size:var(--cf-type-s);line-height:var(--cf-lineheight-l);color:var(--cf-muted)}
.cf-verify-tone-ok{border-left-color:#146c43}
.cf-verify-tone-ok strong{color:#146c43}
.cf-verify-tone-bad{border-left-color:var(--cf-danger)}
.cf-verify-tone-bad strong{color:var(--cf-danger)}
.cf-verify-tone-skip{border-left-color:#8a5a00}
.cf-verify-tone-skip strong{color:#8a5a00}
.cf-verify-facts{display:flex;flex-wrap:wrap;gap:var(--cf-space-4);margin:var(--cf-space-5) 0 0;padding:0}
.cf-verify-facts div{min-width:140px}
.cf-verify-facts dt{margin:0}
.cf-verify-facts dd{margin:2px 0 0;font-size:var(--cf-type-s);line-height:var(--cf-lineheight-m);color:var(--cf-text)}
.cf-verify-list{list-style:none;margin:var(--cf-space-5) 0 0;padding:0}
.cf-verify-list li{padding:var(--cf-space-3) 0;border-top:1px solid var(--cf-outline)}
.cf-verify-check-head{display:flex;align-items:center;gap:var(--cf-space-3);flex-wrap:wrap}
.cf-verify-mark{font-weight:var(--cf-weight-bold)}
.cf-verify-mark-ok{color:#146c43}
.cf-verify-mark-bad{color:var(--cf-danger)}
.cf-verify-mark-skip{color:var(--cf-muted)}
.cf-verify-gaps{margin-top:var(--cf-space-5)}
.cf-verify-prose{margin-top:var(--cf-space-7)}
.cf-verify-lede{margin-top:var(--cf-space-6)}

/* ── print ────────────────────────────────────────────────────────────────── */
@media print {
  .cf-header, .cf-doc-cta, .cf-toc { display: none; }
  .cf-faq details { break-inside: avoid; }
  .cf-faq .cf-faq-body { display: block !important; }
}