/* ======================================================================
   SEO content blocks - TL;DR key-takeaways + FAQ accordion.
   Used across methodology and procurement guides. Brand tokens from styles.css.
   ====================================================================== */

/* ---- TL;DR / key takeaways ---- */
.tldr{ margin:22px 0 26px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg, color-mix(in srgb, var(--green) 7%, #fff), #fff); box-shadow:0 1px 2px rgba(8,39,57,.04), 0 26px 52px -42px rgba(8,39,57,.3); padding:clamp(20px,3vw,28px); }
.tldr-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tldr-head .tldr-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--grad-bright); color:#fff; box-shadow:0 10px 20px -12px rgba(28,101,71,.6); }
.tldr-head .tldr-ic svg{ width:18px; height:18px; }
.tldr-head h2{ margin:0 !important; font-size:1.04rem !important; font-family:'Plus Jakarta Sans',sans-serif !important; letter-spacing:.04em; text-transform:uppercase; color:var(--green-deep) !important; }
.tldr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.tldr li{ display:flex; gap:12px; align-items:flex-start; line-height:1.6; color:var(--ink); }
.tldr li .tldr-tick{ flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; margin-top:1px; background:#E4F4EA; color:var(--green-deep); }
.tldr li .tldr-tick svg{ width:13px; height:13px; }
.tldr li strong{ font-weight:700; }

/* ---- FAQ accordion ---- */
.faq{ margin:14px 0 6px; display:grid; gap:10px; }
.faq-item{ border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:#CFE6D7; box-shadow:0 14px 30px -24px rgba(8,39,57,.45); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:17px 20px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.35; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-q{ flex:1; }
.faq-item summary .faq-chev{ flex:none; width:20px; height:20px; color:var(--green-deep); transition:transform .25s; }
.faq-item[open] summary .faq-chev{ transform:rotate(45deg); }
.faq-item .faq-a{ padding:0 20px 18px; color:var(--ink-soft); line-height:1.68; }
.faq-item .faq-a p{ margin:0; }
.faq-item .faq-a a{ color:var(--green-deep); font-weight:600; }

/* ---- Inline "practise this live" CTA (guide → training bot) ---- */
.practise-cta{ display:flex; align-items:center; gap:16px; margin:22px 0 26px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,#0B3D2E,#12533B); color:#fff; text-decoration:none; box-shadow:0 20px 44px -28px rgba(7,44,40,.6); transition:transform .25s, box-shadow .25s; }
.practise-cta:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -26px rgba(7,44,40,.7); }
.practise-cta .pc-ic{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#5FE0A0,#36C98A); color:#0B3D2E; }
.practise-cta .pc-ic svg{ width:24px; height:24px; }
.practise-cta .pc-tx{ flex:1; }
.practise-cta .pc-tx strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.08rem; line-height:1.25; }
.practise-cta .pc-tx span{ display:block; font-size:.9rem; color:rgba(255,255,255,.82); margin-top:2px; }
.practise-cta .pc-go{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.85rem; color:#5FE0A0; }
.practise-cta .pc-badge{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(94,224,160,.2); color:#7DEBB3; border-radius:999px; padding:3px 7px; margin-left:7px; }
.practise-cta .pc-go svg{ width:15px; height:15px; transition:transform .2s; }
.practise-cta:hover .pc-go svg{ transform:translateX(4px); }
@media(max-width:620px){ .practise-cta{ flex-wrap:wrap; } .practise-cta .pc-go{ width:100%; } }