/* ═══════════════════════════════════════════════════════════════
   AVA INC. — Blog article styles (LIGHT ONLY)
   Matches the site design system: Satoshi, warm paper, brand orange.
   Used by the 2026 blog post set. No dark-mode block by design.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --art-bg: #ffffff;
    --art-paper: #f5f3ef;            /* site warm paper */
    --art-ink: #14110d;
    --art-ink-2: #4a453d;            /* body copy */
    --art-muted: #756e63;
    --art-border: rgba(20, 16, 12, 0.10);
    --art-border-soft: rgba(20, 16, 12, 0.06);
    --art-accent: #ff5a1f;           /* site --orange */
    --art-accent-2: #ff9d2e;
    --art-link: #c53c05;             /* AA contrast on white */
    --art-gradient: linear-gradient(105deg, #ff5a1f 0%, #ff8a1e 55%, #ffb347 100%);
    --art-warn: #b4341a;
    --art-good: #1c7a4f;
    --art-r: 16px;
    --art-r-lg: 24px;
}

/* ── Article shell ───────────────────────────────────────────── */
.art-body {
    font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
    background: var(--art-bg);
    color: var(--art-ink-2);
    -webkit-font-smoothing: antialiased;
}

.art-prose {
    font-size: 1.1875rem;      /* 19px, comfortable long-form */
    line-height: 1.75;
    max-width: 74ch;           /* measure, not a page-width cage */
}

.art-prose > * + * { margin-top: 1.35em; }

.art-prose p { color: var(--art-ink-2); }

.art-prose strong { color: var(--art-ink); font-weight: 700; }

.art-prose a {
    color: var(--art-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(197, 60, 5, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-prose a:hover {
    color: var(--art-accent);
    text-decoration-color: var(--art-accent);
}

/* ── Headings ────────────────────────────────────────────────── */
.art-prose h2,
.art-prose h3 {
    font-family: 'Satoshi', sans-serif;
    color: var(--art-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    scroll-margin-top: 6rem;   /* sticky nav offset for TOC jumps */
}

.art-prose h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    margin-top: 3.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--art-border-soft);
}
.art-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.art-prose h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    margin-top: 2.25rem;
}

/* ── Lists ───────────────────────────────────────────────────── */
.art-prose ul,
.art-prose ol { padding-left: 0; list-style: none; }

.art-prose li { position: relative; padding-left: 1.85rem; margin-top: 0.85em; }

.art-prose ul > li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--art-gradient);
}

.art-prose ol { counter-reset: art-ol; }
.art-prose ol > li { counter-increment: art-ol; }
.art-prose ol > li::before {
    content: counter(art-ol);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(255, 90, 31, 0.12);
    color: var(--art-accent);
    font-size: 0.78rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* ── Blockquote as a "steal this" callout ────────────────────── */
.art-prose blockquote {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--art-paper);
    border: 1px solid var(--art-border);
    border-radius: var(--art-r);
    color: var(--art-ink);
    font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────────── */
.blog-table-wrap {
    overflow-x: auto;          /* wide tables scroll, page never does */
    border: 1px solid var(--art-border);
    border-radius: var(--art-r);
    margin-top: 2rem;
}
.blog-table-wrap table { border-collapse: collapse; width: 100%; min-width: 460px; }
.blog-table-wrap th,
.blog-table-wrap td {
    padding: 0.9rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid var(--art-border-soft);
    font-size: 1rem;
}
.blog-table-wrap thead th {
    background: var(--art-paper);
    color: var(--art-ink);
    font-weight: 700;
    white-space: nowrap;
}
.blog-table-wrap tbody tr:last-child td { border-bottom: 0; }

/* ── Figures ─────────────────────────────────────────────────── */
.blog-post-image { margin: 2.5rem 0; }
.blog-post-image img {
    width: 100%;
    height: auto;
    border-radius: var(--art-r-lg);
    border: 1px solid var(--art-border);
    display: block;
}
.blog-post-image figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--art-muted);
}

/* ── Inline diagram: crawlable text, not a flat image ────────── */
.ava-diagram {
    margin: 2.75rem 0;
    padding: 1.75rem;
    background: var(--art-paper);
    border: 1px solid var(--art-border);
    border-radius: var(--art-r-lg);
}
.ava-diagram-title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--art-ink);
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}
.ava-diagram-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.ava-diagram-col {
    background: #fff;
    border: 1px solid var(--art-border);
    border-radius: var(--art-r);
    padding: 1.25rem 1.35rem;
}
.ava-diagram-col--warn { background: rgba(180, 52, 26, 0.05); }
.ava-diagram-col--good { background: rgba(28, 122, 79, 0.05); }
.ava-diagram-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--art-muted);
    margin-bottom: 0.85rem;
}
.ava-diagram ol { counter-reset: art-dg; padding-left: 0; list-style: none; margin: 0; }
.ava-diagram ol li {
    counter-increment: art-dg;
    position: relative;
    padding-left: 1.85rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.ava-diagram ol li:first-child { margin-top: 0; }
.ava-diagram ol li::before {
    content: counter(art-dg);
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(20, 16, 12, 0.06);
    color: var(--art-ink);
    font-size: 0.74rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.ava-diagram-out {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--art-border);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--art-ink);
}
.ava-diagram-col--warn .ava-diagram-out { color: var(--art-warn); }
.ava-diagram-col--good .ava-diagram-out { color: var(--art-good); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .art-prose { font-size: 1.0625rem; line-height: 1.7; }
    .ava-diagram { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Article page shell (static blog posts, light only)
   ═══════════════════════════════════════════════════════════════ */
.art-shell{max-width:1220px;margin:0 auto;padding:2.5rem 1.5rem 4rem}
.art-crumb{font-size:.82rem;color:var(--art-muted);margin-bottom:1.75rem}
.art-crumb a{color:var(--art-muted);text-decoration:none}
.art-crumb a:hover{color:var(--art-accent)}
.art-crumb span{margin:0 .45rem;opacity:.5}

.art-head{max-width:74ch;margin-bottom:2.5rem;padding-bottom:1.75rem;
  border-bottom:1px solid var(--art-border)}
.art-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--art-accent);margin-bottom:.9rem}
.art-head h1{font-family:'Satoshi',sans-serif;font-size:clamp(2rem,4.2vw,3.05rem);
  font-weight:900;letter-spacing:-.03em;line-height:1.08;color:var(--art-ink);
  margin:0 0 1rem;text-wrap:balance}
.art-lede{font-size:1.2rem;line-height:1.55;color:var(--art-muted);margin:0 0 1.5rem}
.art-meta{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;
  font-size:.9rem;color:var(--art-muted)}
.art-meta b{color:var(--art-ink);font-weight:700}
.art-meta span{opacity:.45}

/* two column: article + sticky contents */
.art-grid{display:grid;grid-template-columns:minmax(0,74ch) 1fr;gap:3.5rem;align-items:start}
.art-toc{position:sticky;top:6rem;order:2;padding-left:1.5rem;
  border-left:1px solid var(--art-border);max-height:calc(100vh - 8rem);overflow-y:auto}
.art-toc-h{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--art-muted);margin:0 0 .9rem}
.art-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.art-toc li{padding:0;margin:0}
.art-toc li::before{display:none}
.art-toc a{display:block;padding:.4rem 0;font-size:.85rem;line-height:1.35;
  color:var(--art-muted);text-decoration:none;border-left:2px solid transparent;
  padding-left:.75rem;margin-left:-.75rem;transition:all .2s}
.art-toc a:hover{color:var(--art-ink)}
.art-toc a.on{color:var(--art-accent);border-left-color:var(--art-accent);font-weight:600}

/* related guides cluster block */
ul.ava-related{list-style:none;padding:0;display:grid;gap:.55rem;
  background:var(--art-paper);border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);padding:1.35rem 1.5rem}
ul.ava-related li{padding-left:1.4rem;position:relative;margin-top:0}
ul.ava-related li::before{content:"";position:absolute;left:.15rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--art-accent)}
ul.ava-related a{font-weight:600}

/* closing CTA */
.art-cta{max-width:74ch;margin:3.5rem 0 0;padding:2rem 2.25rem;border-radius:var(--art-r-lg);
  background:var(--art-gradient);color:#fff}
.art-cta h2{font-family:'Satoshi',sans-serif;font-size:1.5rem;font-weight:800;
  letter-spacing:-.02em;color:#fff;margin:0 0 .5rem;border:0;padding:0}
.art-cta p{color:rgba(255,255,255,.92);margin:0 0 1.35rem}
.art-cta-btn{display:inline-block;background:#fff;color:#c53c05;font-weight:800;
  padding:.85rem 1.75rem;border-radius:99px;text-decoration:none;font-size:.95rem;
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
.art-cta-btn:hover{transform:translateY(-2px)}

@media (max-width:1000px){
  .art-grid{grid-template-columns:1fr}
  .art-toc{position:static;order:0;border-left:0;padding-left:0;max-height:none;
    border-bottom:1px solid var(--art-border);padding-bottom:1.25rem;margin-bottom:.5rem}
  .art-toc ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
}
@media (max-width:640px){
  .art-shell{padding:1.5rem 1rem 3rem}
  .art-cta{padding:1.5rem}
}

/* The site nav parks its off-canvas mobile menu past the right edge.
   Clip it rather than hide it: overflow:hidden on an ancestor would
   kill position:sticky on the table of contents. */
html { overflow-x: clip; }
body.art-body { overflow-x: clip; }

/* ── In-article table of contents ────────────────────────────── */
.ava-toc{
  margin:2.5rem 0;
  padding:1.5rem 1.75rem;
  background:var(--art-paper);
  border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);
}
.ava-toc-h{
  margin:0 0 .9rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--art-muted);
}
.ava-toc ol{
  counter-reset:ava-toc;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.1rem;
}
.ava-toc li{
  counter-increment:ava-toc;
  position:relative;
  padding-left:2rem;
  margin-top:0;
}
.ava-toc li::before{
  content:counter(ava-toc);
  position:absolute;
  left:0;
  top:.45em;
  width:1.35rem;
  text-align:right;
  font-size:.8rem;
  font-weight:700;
  color:var(--art-muted);
  background:none;
  border-radius:0;
  height:auto;
  display:block;
}
.ava-toc a{
  display:block;
  padding:.4rem 0;
  color:var(--art-ink);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s;
}
.ava-toc a:hover{color:var(--art-accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){ .ava-toc{padding:1.25rem} }

/* ── Mockup table: more breathing room between rows ──────────── */
.ava-mock-table th{padding:1rem 1.35rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.ava-mock-table td{padding:1.05rem 1.35rem;line-height:1.45}
.ava-mock-table tr.is-parent td{padding-top:1.15rem;padding-bottom:1.15rem}
.ava-mock-table td.is-child{padding-left:3rem}
.ava-mock-table td.is-child::before{left:1.75rem}
.ava-mock-table td.is-child::after{left:1.75rem;width:.75rem}
.ava-mock-sheet th,.ava-mock-sheet td{padding:1rem 1.35rem}
.ava-mock-frame{box-shadow:0 1px 2px rgba(20,16,12,.04),0 12px 32px -20px rgba(20,16,12,.18)}

/* ── Inline mid-article CTA ──────────────────────────────────── */
.ava-cta-inline{
  margin:3rem 0;
  padding:1.75rem 2rem;
  background:var(--art-paper);
  border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);
}
.ava-cta-inline-h{
  font-family:'Satoshi',sans-serif;
  font-size:1.15rem;font-weight:800;letter-spacing:-.01em;
  color:var(--art-ink);margin:0 0 .6rem
}
.ava-cta-inline p{margin:0 0 .9rem;color:var(--art-ink-2);font-size:1rem;line-height:1.6}
.ava-cta-inline p:last-child{margin-bottom:0}
.ava-cta-inline-btn{
  display:inline-block;background:var(--art-accent);color:#fff;
  font-weight:700;font-size:.92rem;padding:.7rem 1.4rem;border-radius:99px;
  text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1)
}
.ava-cta-inline-btn:hover{transform:translateY(-2px);color:#fff;text-decoration:none}
@media (max-width:640px){ .ava-cta-inline{padding:1.35rem 1.5rem} }

/* ── Single column: the sidebar TOC was leaving a dead column ── */
.art-grid{grid-template-columns:minmax(0,1fr);max-width:74ch;margin:0 auto;gap:0}
.art-shell{max-width:900px}
.art-head{max-width:none}
.art-cta{max-width:none}
.art-toc{display:none}

/* ── FAQ accordion ───────────────────────────────────────────── */
.ava-faq-list{
  margin-top:1.5rem;border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);overflow:hidden;background:#fff
}
.ava-faq{border-bottom:1px solid var(--art-border-soft)}
.ava-faq:last-child{border-bottom:0}
.ava-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.5rem;
  font-family:'Satoshi',sans-serif;font-weight:700;font-size:1.05rem;
  color:var(--art-ink);position:relative;transition:background .2s;
  line-height:1.4
}
.ava-faq summary::-webkit-details-marker{display:none}
.ava-faq summary::after{
  content:"";position:absolute;right:1.5rem;top:1.55rem;
  width:9px;height:9px;border-right:2px solid var(--art-accent);
  border-bottom:2px solid var(--art-accent);
  transform:rotate(45deg);transition:transform .25s cubic-bezier(.16,1,.3,1)
}
.ava-faq[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.ava-faq summary:hover{background:var(--art-paper)}
.ava-faq summary:focus-visible{outline:2px solid var(--art-accent);outline-offset:-2px}
.ava-faq-a{padding:0 1.5rem 1.35rem;color:var(--art-ink-2);font-size:1.02rem;line-height:1.65}
.ava-faq-a p{margin:0}
.ava-faq-a > * + *{margin-top:.9rem}
@media (prefers-reduced-motion:reduce){
  .ava-faq summary::after{transition:none}
}

/* ── Tighten vertical rhythm, the page read as sparse ────────── */
.art-prose h2{margin-top:2.5rem;padding-top:1.75rem}
.art-prose > * + *{margin-top:1.15em}
.blog-post-image{margin:2rem 0}
.ava-diagram{margin:2rem 0}
.ava-cta-inline{margin:2.25rem 0}
.art-shell{padding-top:2rem}
.art-head{margin-bottom:2rem;padding-bottom:1.5rem}

/* ═══════════════════════════════════════════════════════════════
   READ THIS BEFORE EDITING ANYTHING ABOVE.

   Everything from here down was added in later passes and overrides the
   sections above by source order, not by specificity. Several selectors are
   therefore declared more than once in this file, and only the LAST one
   takes effect. Editing an earlier rule and seeing nothing change is the
   expected failure here, so search the whole file for a selector before
   changing it.

   Two live traps worth knowing:
     - style.css caps every <p> at 700px, which reaches into articles.
     - `.art-prose ol > li::before` outranks `.ava-toc li::before`, because
       one class plus three elements beats one class plus two.

   Worth flattening into a single pass when someone has time to re-verify
   the rendered result against every breakpoint.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Reading layout, second pass
   The column was set in `ch`, a font-relative unit, so it changed
   width with the type size and read as an unstable margin. Fixed
   pixels instead: one measure, one left edge, at every viewport.
   ═══════════════════════════════════════════════════════════════ */
:root{ --art-measure:900px; --art-gutter:1.5rem }

.art-shell{
  max-width:calc(var(--art-measure) + (var(--art-gutter) * 2));
  margin:0 auto;
  padding:2rem var(--art-gutter) 4.5rem;
}
.art-grid{grid-template-columns:minmax(0,1fr);max-width:100%;margin:0;gap:0}
.art-head,.art-cta,.art-prose,.art-crumb{max-width:100%}

/* ── Type: larger body, calmer headings for the narrower column ── */
.art-prose{font-size:1.25rem;line-height:1.7}          /* 20px */
.art-prose h2{font-size:clamp(1.6rem,2.8vw,1.95rem);line-height:1.2}
.art-prose h3{font-size:clamp(1.15rem,1.9vw,1.35rem)}
.art-lede{font-size:1.25rem;line-height:1.6}
.art-head h1{font-size:clamp(1.95rem,4vw,2.75rem)}

/* ── Images: cap the height, never crop ──────────────────────────
   The whiteboard art is 4:5 portrait, so at full column width it
   rendered 1137px tall, a full screen of one image. That was the
   "empty space". Constrain height and let width follow, so nothing
   inside the diagram is cut off. */
.blog-post-image{margin:2.25rem 0;text-align:center}
.blog-post-image img,
.art-prose figure img{
  display:block;margin:0 auto;
  width:auto;height:auto;
  max-width:100%;max-height:560px;
  border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);
  background:var(--art-paper);
}
.blog-post-image figcaption,
.art-prose figure figcaption{
  margin-top:.85rem;font-size:.88rem;line-height:1.5;
  color:var(--art-muted);text-align:center;
}

/* ── Contents: a real navigation panel, not a caption ──────────── */
.ava-toc{
  margin:2.25rem 0;
  padding:1.65rem 1.9rem;
  background:#fff;
  border:1px solid var(--art-border);
  border-radius:var(--art-r-lg);
  box-shadow:0 1px 2px rgba(20,16,12,.03), 0 14px 30px -24px rgba(20,16,12,.20);
}
.ava-toc-h{
  margin:0 0 1rem;
  font-family:'Satoshi',sans-serif;
  font-size:1.02rem;font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--art-ink);
}
.ava-toc ol{gap:0}
.ava-toc li{padding-left:2.6rem}
.ava-toc li::before{
  top:.52em;width:1.9rem;
  font-size:.95rem;font-weight:800;
  color:var(--art-accent);
  font-variant-numeric:tabular-nums;
}
.ava-toc a{
  padding:.5rem 0;font-size:1.06rem;font-weight:600;line-height:1.4;
  color:var(--art-ink);
}
.ava-toc a:hover{color:var(--art-accent);text-decoration:none}
.ava-toc li:hover::before{color:var(--art-ink)}

/* ── Byline: a named person, with a face ───────────────────────── */
.art-meta{gap:.7rem;font-size:.92rem}
.art-byline{display:flex;align-items:center;gap:.7rem}
.art-byline img{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:50%;object-fit:cover;
  border:1px solid var(--art-border);
  background:var(--art-paper);
}
.art-byline-text{display:flex;flex-direction:column;line-height:1.25}
.art-byline-text b{color:var(--art-ink);font-weight:700;font-size:.98rem}
.art-byline-text small{color:var(--art-muted);font-size:.8rem}

@media (max-width:640px){
  .art-shell{padding:1.5rem 1.15rem 3rem}
  .art-prose{font-size:1.125rem;line-height:1.7}
  .ava-toc{padding:1.3rem 1.4rem;border-radius:0 var(--art-r) var(--art-r) 0}
  .ava-toc a{font-size:1rem}
  .ava-toc li{padding-left:2.2rem}
  .blog-post-image img,.art-prose figure img{max-height:420px}
}

/* Numerals: the badge is inherited from the prose list style, but the digit
   sat right-aligned inside a circle. Centre it properly. */
.ava-toc li{padding-left:2.9rem}
.ava-toc li::before{
  top:.3em;left:0;
  width:1.7rem;height:1.7rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,90,31,.12);
  color:var(--art-accent);
  border-radius:50%;
  font-size:.82rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:center;
  line-height:1;
}
@media (max-width:640px){ .ava-toc li{padding-left:2.6rem} }

/* style.css line 4868 puts an orange glow on every h1 with !important. On a dark
   hero that reads as a highlight; on a white article page it just reads as
   blurry type. Off, inside the article only. */
.art-body h1,
.art-body h2,
.art-body h3,
.art-body .art-head h1,
.art-body h1 strong, .art-body h1 span,
.art-body h2 strong, .art-body h2 span{
  text-shadow:none !important;
}

/* On a narrow screen the meta row wrapped mid-list and left a separator dot
   hanging at the end of a line. Give the byline its own row instead. */
@media (max-width:520px){
  .art-meta{row-gap:.5rem}
  .art-byline{flex:0 0 100%}
  .art-byline + span{display:none}
}

/* ── Contrast repairs found in the polish pass ───────────────────
   All three were measured on the rendered page, not guessed. */

/* The inline CTA is the only conversion point inside an article, and it was
   rendering as #c53c05 on #ff5a1f, a ratio of 1.67:1, because `.art-prose a`
   is more specific than the button's own class and won the colour. Deep
   orange behind white clears 5.22:1 and keeps the button in the brand family. */
.art-prose a.ava-cta-inline-btn,
.ava-cta-inline-btn{
  background:var(--art-link);
  color:#fff;
  font-size:.98rem;
}
.art-prose a.ava-cta-inline-btn:hover,
.ava-cta-inline-btn:hover{
  background:#a83204;
  color:#fff;
  text-decoration:none;
}

/* Contents numerals were brand orange on a 12% orange tint: 3.12:1. The deeper
   orange on the same tint clears 4.54:1 and reads as the same accent. */
.ava-toc li::before{ color:var(--art-link); }
.ava-toc li:hover::before{ color:var(--art-ink); }

/* style.css caps every <p> at 700px. Inside an article that silently pinned the
   body copy to a 51ch measure while headings, contents, callouts and the FAQ
   filled the column, so the text sat narrower than everything around it. The
   column is the measure here. */
.art-prose p,
.art-prose li,
.art-prose blockquote{ max-width:none; }

/* `.art-prose ol > li::before` is more specific than `.ava-toc li::before`, so
   the contents numerals kept the brand orange and its 2.71:1 on the tint.
   Two classes beat one class plus three elements. */
.art-prose .ava-toc li::before{ color:var(--art-link); }
.art-prose .ava-toc li:hover::before{ color:var(--art-ink); }

/* The lede is a <p>, so the global 700px cap reached it too and it sat 200px
   short of the heading above it on a shared left edge, which reads as a bug
   rather than a choice. */
.art-lede{ max-width:none; }

/* ── Contents and inline CTA, rewritten ──────────────────────────
   Both were leaning on a 4px orange left rule, which is the stock way to
   make a block look considered without deciding anything. Removed. They now
   earn their difference from surface and role instead: the contents is a
   quiet white index the reader scans, the CTA is a warm panel the reader
   acts on. Two different jobs, two different surfaces, one accent doing the
   work in each. */

.ava-toc{
  background:#fff;
  padding:1.75rem 2rem 1.85rem;
  box-shadow:0 1px 2px rgba(20,16,12,.03), 0 18px 36px -30px rgba(20,16,12,.28);
}
.ava-toc-h{
  display:flex; align-items:baseline; gap:.75rem;
  margin:0 0 1.15rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--art-border-soft);
}
.ava-toc-h::after{
  content:""; flex:1 1 auto;
}

.ava-cta-inline{
  background:var(--art-paper);
  padding:1.85rem 2rem;
}
@media (max-width:640px){
  .ava-toc{padding:1.4rem 1.5rem}
  .ava-cta-inline{padding:1.5rem 1.5rem;border-radius:var(--art-r)}
}