/* The four search pages (guides and "Is AskOjo right for my store?"). Loaded only by those pages, so with them off, site.css and the old pages are untouched.
   Site tokens only: --ink, --grey, --line, --mist, --accent, the page font. No new colours. */
.art .narrow { max-width: 760px; }
.art { padding-top: clamp(40px, 6vw, 80px); }
.art-h1 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -0.04em; max-width: none; margin-bottom: 18px; text-wrap: balance; }
.art .lede { font-size: 21px; line-height: 1.5; color: var(--ink); margin: 6px 0 14px; }
.art .byline { color: var(--grey); font-size: 15px; margin: 0 0 24px; }
.art p, .art li { line-height: 1.6; }
.art .legal h2, .art h2 { font-size: clamp(23px, 2.6vw, 29px); line-height: 1.15; letter-spacing: -0.03em; margin: 44px 0 10px; }
.art h3 { font-size: 19px; letter-spacing: -0.01em; margin: 22px 0 4px; }
.art ul, .art ol { padding-left: 24px; margin: 10px 0; }
.art li { margin: 8px 0; padding-left: 4px; }
.art a { text-underline-offset: 3px; }
.art b { color: var(--ink); }
.art .short { background: var(--mist); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 14px; padding: 18px 22px; margin: 6px 0 26px; }
.art .short p { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.5; }
.art ul.checks { list-style: none; padding-left: 0; }
.art ul.checks li { position: relative; padding-left: 36px; }
.art ul.checks li::before { content: ""; position: absolute; left: 4px; top: 0.3em; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; }
.art .tbl { margin: 16px 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.art table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.art th { text-align: left; background: var(--mist); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.art td { padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.art tbody tr:first-child td { border-top: 0; }
.art .qa { border-top: 1px solid var(--line); padding: 4px 0 10px; }
.art .qa p { margin: 4px 0 0; }
.art-cta { margin: 30px 0 8px; }
.art-cta .btn { width: auto; }
.art .contact { color: var(--grey); margin-top: 22px; }
.art-cta + .contact { margin-top: 16px; }
.about-more { margin-top: 18px; }
.about-more a { color: var(--grey); text-underline-offset: 4px; }
.about-more a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .art { font-size: 18px; }
  .art .lede, .art .short p { font-size: 19px; }
  .art .short { padding: 16px 18px; border-left-width: 5px; }
  .art table { font-size: 15.5px; }
  .art th, .art td { padding: 10px 12px; }
  .art-cta .btn { width: 100%; }
}