/* Tutorial / blog article template — structural (dark placeholder) layer.
   Light "8a" theme overrides live in pages-redesign.css. */

.tutorial-hero { text-align:center; padding-top:20px; }
.tutorial-hero .info-kicker { justify-content:center; display:flex; }
.tutorial-hero h1 { max-width:820px; margin:12px auto 16px; color:#f3f6ef; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.04em; }
.tutorial-hero__subtitle { max-width:640px; margin:0 auto; color:#a1a89d; font-size:1rem; line-height:1.65; font-style:italic; }
.tutorial-hero__image { width:100%; max-width:900px; margin:32px auto 0; overflow:hidden; border-radius:22px; }
.tutorial-hero__image img { display:block; width:100%; height:auto; }

.tutorial-article { width:min(820px,calc(100% - 40px)); margin:40px auto 0; padding:clamp(28px,5vw,52px); border-radius:24px; background:rgba(255,255,255,.03); color:#c7cec0; font-size:1.02rem; line-height:1.75; }
.tutorial-article h2 { margin:44px 0 14px; color:#f0f3ed; font-size:1.55rem; line-height:1.3; letter-spacing:-.02em; }
.tutorial-article h2:first-child { margin-top:0; }
.tutorial-article h3 { margin:28px 0 10px; color:#dce1d7; font-size:1.18rem; letter-spacing:-.015em; }
.tutorial-article p { margin:0 0 16px; }
.tutorial-article ul,.tutorial-article ol { margin:0 0 16px; padding-left:22px; }
.tutorial-article li { margin-bottom:7px; }
.tutorial-article strong { color:#eef2ea; font-weight:750; }
.tutorial-article a { color:#b7dc69; }
.tutorial-article hr { margin:36px 0; border:0; border-top:1px solid rgba(255,255,255,.08); }
.tutorial-article figure { margin:24px 0; }
.tutorial-article img { display:block; width:100%; height:auto; border-radius:16px; }
.tutorial-article figcaption { margin-top:8px; color:#7b8377; font-size:.7rem; text-align:center; }
.tutorial-article iframe { width:100%; aspect-ratio:16/9; height:auto; margin:24px 0; border:0; border-radius:16px; }

.tutorial-toc { margin:28px 0 36px; padding:22px 24px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.022); }
.tutorial-toc p { margin:0 0 12px; color:#7d8377; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.tutorial-toc ol { margin:0; padding:0; list-style:none; counter-reset:toc; display:grid; gap:8px; }
.tutorial-toc li { counter-increment:toc; margin:0; }
.tutorial-toc li::before { content:counter(toc) '.'; margin-right:8px; color:#b7dc69; font-weight:800; }
.tutorial-toc a { color:#dce1d7; text-decoration:none; }
.tutorial-toc a:hover { color:#b7dc69; }

.tutorial-callout { margin:24px 0; padding:18px 22px; border-radius:0 12px 12px 0; border-left:4px solid #b7dc69; background:rgba(183,220,105,.06); font-size:.92rem; }
.tutorial-callout p:last-child { margin-bottom:0; }
.tutorial-callout--caution { border-left-color:#d9a76c; background:rgba(217,167,108,.07); }
.tutorial-callout--tip { border-left-color:#8fb0df; background:rgba(143,176,223,.06); }
.tutorial-callout--takeaway { border-left:0; border-radius:12px; padding:22px 24px; background:rgba(255,255,255,.028); box-shadow:0 4px 14px rgba(0,0,0,.14); }
.tutorial-callout--takeaway h3 { margin:0 0 10px; color:#b7dc69; font-size:1rem; }
.tutorial-callout--takeaway ol,.tutorial-callout--takeaway ul { margin-bottom:0; }

.tutorial-myth-fact { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.tutorial-myth-fact > div { padding:16px 18px; border-radius:10px; font-size:.88rem; }
.tutorial-myth-fact > div > b { display:block; margin-bottom:6px; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tutorial-myth-fact .is-myth { background:rgba(211,115,93,.08); }
.tutorial-myth-fact .is-myth > b { color:#cf8b73; }
.tutorial-myth-fact .is-fact { background:rgba(183,220,105,.08); }
.tutorial-myth-fact .is-fact > b { color:#b7dc69; }

.tutorial-faq-item { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.tutorial-faq-item:last-child { border-bottom:0; }
.tutorial-faq-q { margin:0 0 6px; color:#eef2ea; font-size:.96rem; font-weight:750; }
.tutorial-faq-a { color:#a1a89d; font-size:.85rem; line-height:1.65; }
.tutorial-faq-a p { margin:0; }

.tutorial-back-cta { margin:40px auto 0; width:min(740px,calc(100% - 40px)); padding:26px; border-radius:18px; text-align:center; background:rgba(183,220,105,.06); }
.tutorial-back-cta p { margin:0 0 14px; color:#a1a89d; font-size:.85rem; }

@media(max-width:600px) {
  .tutorial-myth-fact { grid-template-columns:1fr; }
  .tutorial-article h2 { font-size:1.32rem; }
}