/* ============================================================
   ASTA — Answers (article) layer. Loads on top of asta.css.
   Brings the /answers/* pages to homepage-craft parity.
   ============================================================ */
.article{padding:0 0 128px}

/* breadcrumb */
.crumb{padding:24px 0;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--asta-slate-500)}
.crumb a{color:var(--asta-slate-500);text-decoration:none;transition:color .25s var(--ease)}
.crumb a:hover{color:var(--asta-emerald)}

/* dark article header */
.art-head{position:relative;overflow:hidden;background:var(--asta-canvas-deep);color:#fff;padding:56px 0 74px}
.art-head .shell{position:relative;z-index:1}
.art-head .crumb,.art-head .crumb a{color:var(--asta-slate-400)}
.art-head .crumb a:hover{color:var(--asta-emerald-lit)}
.art-head h1{font-size:clamp(2.4rem,5vw,4rem);max-width:19ch;letter-spacing:-.022em;line-height:1.05}
.art-head .lede{margin-top:24px;max-width:60ch;color:var(--asta-slate-400)}
.art-meta{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-dark);display:flex;gap:12px;flex-wrap:wrap}
.art-meta .readout{padding:6px 14px;border:1px solid var(--rule-dark);border-radius:999px;color:var(--asta-slate-400)}

/* two-column body: prose + sticky rail */
.body-grid,.body{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:76px;padding-top:66px;align-items:start}
.prose{max-width:68ch}
.prose>h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:60px 0 18px;letter-spacing:-.018em;scroll-margin-top:96px;color:var(--asta-canvas)}
.prose>h2:first-child{margin-top:0}
.prose h3{margin:36px 0 12px;font-size:1.18rem;color:var(--asta-canvas)}
.prose p{margin-bottom:18px;color:#475569;font-size:1.02rem;line-height:1.72}
.prose>p:first-of-type{font-size:1.16rem;line-height:1.62;color:var(--asta-canvas)}
.prose a{color:var(--asta-emerald);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(16,185,129,.4);transition:box-shadow .25s var(--ease)}
.prose a:hover{box-shadow:inset 0 -2px 0 var(--asta-emerald)}
.prose ul{margin:0 0 22px;padding-left:2px;list-style:none}
.prose li{margin-bottom:11px;padding-left:26px;position:relative;color:#475569;line-height:1.65}
.prose li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--asta-emerald);transform:rotate(45deg)}
.prose b,.prose strong{color:var(--asta-canvas);font-weight:600}

/* comparison tables — Asta cells highlighted (matches homepage) */
.prose table{width:100%;margin:28px 0;border-collapse:separate;border-spacing:0;font-size:.92rem;
  overflow:hidden;border-radius:14px;border:1px solid var(--rule-light)}
.prose th,.prose td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--rule-light);vertical-align:top}
.prose thead th{font-family:var(--font-mono);font-size:.58rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--asta-slate-500);background:var(--asta-paper-2)}
.prose tbody tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:500;color:var(--asta-canvas)}
.prose td.mine,.prose th.mine{background:rgba(16,185,129,.08);color:var(--asta-canvas);font-weight:500}

/* pull quote */
.pull{margin:36px 0;padding:24px 30px;border-left:2px solid var(--asta-emerald);
  background:linear-gradient(90deg,rgba(16,185,129,.06),transparent);border-radius:0 12px 12px 0}
.pull p{margin:0;font-family:var(--font-display);font-size:1.26rem;line-height:1.45;color:var(--asta-canvas)}

/* note / disclosure */
.note{margin:30px 0;padding:16px 20px;border:1px solid var(--rule-light);border-radius:12px;background:var(--asta-paper-2);font-size:.92rem;color:#475569}
.note b{color:var(--asta-canvas)}

/* FAQ */
.art-faq{margin-top:64px;padding-top:6px;border-top:1px solid var(--rule-light)}
.art-faq details{border-bottom:1px solid var(--rule-light)}
.art-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;
  padding:20px 0;font-family:var(--font-display);font-size:1.1rem;color:var(--asta-canvas)}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";font-family:var(--font-mono);font-size:22px;line-height:1;color:var(--asta-emerald);transition:transform .25s var(--ease);flex-shrink:0}
.art-faq details[open] summary::after{transform:rotate(45deg)}
.art-faq details>p{margin:0 0 20px;color:#475569;max-width:70ch;line-height:1.68}

/* sticky rail */
.toc{position:sticky;top:96px;align-self:start}
.toc h5{margin:0 0 12px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--asta-slate-500);font-weight:400}
.toc a{display:block;padding:9px 0;font-size:.86rem;color:var(--asta-slate-500);text-decoration:none;border-top:1px solid var(--rule-light);transition:color .25s var(--ease),padding-left .25s var(--ease)}
.toc a:hover{color:var(--asta-emerald);padding-left:6px}
.cta-box{margin-top:32px;padding:24px;border-radius:16px;background:var(--asta-canvas);color:#fff;box-shadow:var(--shadow-md)}
.cta-box h4{color:#fff;font-size:1rem}
.cta-box p{font-size:.88rem;color:var(--asta-slate-400);margin:8px 0 18px}

/* related cards */
.related{background:var(--asta-paper-2);border-top:1px solid var(--rule-light);padding:72px 0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-grid a{display:block;padding:26px;border-radius:16px;border:1px solid var(--rule-light);background:#fff;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--spring),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.rel-grid a:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(16,185,129,.4)}
.rel-grid .k{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--asta-emerald)}
.rel-grid h3{margin:14px 0 0;font-size:1.12rem;color:var(--asta-canvas)}

@media(max-width:960px){
  .body-grid,.body{grid-template-columns:1fr;gap:0;padding-top:40px}
  .toc{display:none}
  .rel-grid{grid-template-columns:1fr}
  .art-head{padding:44px 0 52px}
}