/* GENERATED — DO NOT HAND-EDIT. Source: marketing/content/academy/assets/article-components.css (copied by generate.py). */
/* CRO Academy — article content components.
   Extends the brand prose styles (brand/templates/academy-article.html) with richer
   long-form elements: table of contents, SVG figures, tables, step flows, do/don't
   comparisons, FAQ accordions, key-takeaways. On-brand via the :root tokens already
   defined by the brand template. Source file; inlined into each page by generate.py. */

/* lead-in paragraph */
.prose p.lead{font-size:1.22rem;color:var(--ink);}

/* buttons inside prose (the promo CTA): the generic .prose a{color:teal} rule out-specifies
   .btn-accent and washes the label out — restate the design-library button ink here. */
.prose a.btn{color:var(--navy-900);text-decoration:none;}
.prose a.btn:hover{color:var(--navy-950);text-decoration:none;}

/* breathing room between the "Keep reading" rail and the footer */
.related{padding-bottom:80px;}

/* anchored headings (jump links + offset under the sticky nav) */
.prose h2{scroll-margin-top:90px;}
.prose h2 .anchor{opacity:0;text-decoration:none;color:var(--teal-600);margin-left:.3em;font-weight:600;transition:.15s;}
.prose h2:hover .anchor{opacity:1;}

/* table of contents */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 24px;margin:2rem 0;box-shadow:var(--sh-sm);}
.toc .toc-h{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:36px;}
.toc li{margin:.32rem 0;font-size:.96rem;}
.toc a{color:var(--ink-soft);}
.toc a:hover{color:var(--teal-700);text-decoration:underline;}
@media(max-width:620px){.toc ol{columns:1;}}

/* figures / diagrams */
figure.fig{margin:2.2rem 0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--sh-sm);}
figure.fig svg{width:100%;height:auto;display:block;}
figure.fig figcaption{margin-top:16px;font-size:.9rem;color:var(--muted);text-align:center;}

/* tables */
.prose .table-wrap{overflow-x:auto;margin:1.8rem 0;border-radius:12px;}
.prose table{width:100%;border-collapse:collapse;font-size:1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.prose th,.prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-soft);}
.prose th{background:var(--navy-50);font-family:var(--display);font-weight:700;color:var(--navy-900);font-size:.9rem;}
.prose tr:last-child td{border-bottom:none;}
.prose tbody tr:hover{background:var(--navy-50);}

/* step flow */
.steps{margin:2rem 0;}
.steps ol{list-style:none;counter-reset:step;margin:0;padding:0;}
.steps>ol>li{position:relative;counter-increment:step;padding:2px 0 1.3rem 30px;border-left:2px solid var(--border);margin-left:18px;}
.steps>ol>li:last-child{border-left-color:transparent;padding-bottom:0;}
.steps>ol>li::before{content:counter(step);position:absolute;left:-19px;top:-4px;width:36px;height:36px;border-radius:50%;background:var(--grad-facet);color:#fff;font-family:var(--display);font-weight:700;display:grid;place-content:center;font-size:.95rem;}
.steps>ol>li strong{color:var(--navy-900);}

/* do / don't comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:2rem 0;}
@media(max-width:620px){.compare{grid-template-columns:1fr;}}
.compare .col{border:1px solid var(--border);border-radius:14px;padding:18px 22px;background:var(--surface);box-shadow:var(--sh-sm);}
.compare .col>h3,.compare .col>h4{margin-top:0;font-size:1.02rem;display:flex;align-items:center;gap:.45em;}
.compare .col-do{border-top:3px solid var(--teal-500);}
.compare .col-dont{border-top:3px solid #e8718a;}
.compare .col-do>h3::before,.compare .col-do>h4::before{content:"\2713";color:var(--teal-700);font-weight:800;}
.compare .col-dont>h3::before,.compare .col-dont>h4::before{content:"\2715";color:#d8506e;font-weight:800;}
.compare ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:1rem;}
.compare li{margin:.3rem 0;}
.compare p{font-size:1rem;margin:.5rem 0 0;}

/* key takeaways */
.takeaways{background:linear-gradient(180deg,#eafaf6,#f5f9fb);border:1px solid #bfeee4;border-radius:16px;padding:22px 26px;margin:2.2rem 0;box-shadow:var(--sh-sm);}
.takeaways h3{font-size:1.05rem;margin:0 0 12px;display:flex;align-items:center;gap:.5em;color:var(--navy-900);}
.takeaways h3::before{content:"";width:20px;height:20px;border-radius:6px;background:var(--grad-teal);display:inline-block;flex:none;}
.takeaways ul{margin:0;padding-left:1.2rem;}
.takeaways li{margin:.4rem 0;color:var(--ink-soft);}

/* FAQ accordion */
.faq{margin:2.6rem 0 0;}
.faq-item{border:1px solid var(--border);border-radius:12px;margin:.6rem 0;background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden;}
.faq-item summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:600;color:var(--navy-900);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--teal-600);font-size:1.5rem;font-weight:300;line-height:1;flex:none;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item .faq-a{padding:0 20px 4px;color:var(--ink-soft);}
.faq-item .faq-a p{font-size:1rem;margin:.2rem 0 1rem;}