/* ============================================================
   Learning Success — shared EDITORIAL / article style (ls-art-*)
   For the long-form, Grant-substantial educational landing pages
   (reading-help, auditory-processing, homework-help, hub, child-
   emotions). LS look via the .ls-pattern wrapper. Reuses .ls-btn
   from components.css for CTAs.
   ============================================================ */
.ls-art-hero { background: linear-gradient(180deg, var(--blue-50), var(--surface-card)); padding: 84px 32px 60px; text-align: center; }
.ls-art-hero__in { max-width: 780px; margin: 0 auto; }
.ls-art-eyebrow { font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--orange-500); margin: 0 0 12px; }
.ls-art-h1 { font: var(--font-hero); font-size: 3rem; line-height: 1.06; color: var(--text-strong); margin: 0 0 18px; }
.ls-art-lead { font: var(--font-body-md); font-size: var(--text-lg); color: var(--text-body); margin: 0 auto 26px; max-width: 40rem; }
.ls-art-hero .ls-btn { margin: 4px; }
.ls-art-hero__alt { display: block; font: var(--font-label); color: var(--text-muted); margin-top: 16px; }
.ls-art-hero__alt a { color: var(--blue-600); }

.ls-art-sec { padding: 42px 32px; }
.ls-art-sec--tint { background: var(--surface-page); }
.ls-art-in { max-width: 720px; margin: 0 auto; }
.ls-art-h2 { font: var(--font-h1); font-size: 2rem; color: var(--text-strong); margin: 0 0 14px; }
.ls-art-sec p { font: var(--font-body-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 1.1em; }
.ls-art-in a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }

/* checklist / signs box */
.ls-art-box { background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--blue-500); border-radius: var(--radius-lg); padding: 24px 28px; margin: 22px 0; box-shadow: var(--shadow-sm); }
.ls-art-box h3 { font: var(--font-h3); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 12px; }
.ls-art-box h3:not(:first-child) { margin-top: 20px; }
.ls-art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-art-list li { position: relative; padding-left: 30px; font: var(--font-body-md); color: var(--text-body); }
.ls-art-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }

.ls-art-pull { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.35; color: var(--blue-700); border-left: 4px solid var(--blue-200); padding-left: 22px; margin: 26px 0; }

/* CTA band */
.ls-art-cta { background: linear-gradient(155deg, var(--blue-900), var(--blue-700)); color: #fff; text-align: center; padding: 64px 32px; }
.ls-art-cta__in { max-width: 640px; margin: 0 auto; }
.ls-art-cta h2 { font: var(--font-h1); color: #fff; margin: 0 0 12px; }
.ls-art-cta p { font: var(--font-body-md); color: var(--blue-100); margin: 0 0 24px; }
.ls-art-cta__sub { font: var(--font-label); margin: 16px 0 0; color: var(--blue-200); }
.ls-art-cta__sub a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* FAQ */
.ls-art-faq { padding: 56px 32px; background: var(--surface-card); }
.ls-art-faq__in { max-width: 760px; margin: 0 auto; }
.ls-art-faq h2 { font: var(--font-h1); font-size: 2rem; text-align: center; color: var(--text-strong); margin: 0 0 24px; }
.ls-art-faq details { border-bottom: 1px solid var(--border-subtle); }
.ls-art-faq summary { cursor: pointer; list-style: none; padding: 18px 42px 18px 0; position: relative; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); }
.ls-art-faq summary::-webkit-details-marker { display: none; }
.ls-art-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.6rem; line-height: 1; color: var(--blue-500); }
.ls-art-faq details[open] summary::after { content: "\2013"; }
.ls-art-faq details p { font: var(--font-body-md); color: var(--text-body); margin: 0 0 18px; }

/* related links */
.ls-art-related { padding: 48px 32px 72px; background: var(--surface-page); }
.ls-art-related__in { max-width: var(--container-lg); margin: 0 auto; text-align: center; }
.ls-art-related h2 { font: var(--font-h2); font-size: 1.5rem; color: var(--text-strong); margin: 0 0 22px; }
.ls-art-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ls-art-related__grid a { display: block; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out); }
.ls-art-related__grid a:hover { transform: translateY(-3px); }
.ls-art-related__grid span { display: block; font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }

/* ---- B2B / affiliate extras (mtss, tutors) ---- */
/* numbered step row */
.ls-art-steps { list-style: none; counter-reset: step; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.ls-art-steps li { position: relative; padding-left: 58px; min-height: 40px; font: var(--font-body-md); color: var(--text-body); }
.ls-art-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-600); color: #fff; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.15rem; display: grid; place-items: center; }
.ls-art-steps li strong { display: block; color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: 2px; }

/* non-link info cards (partnership models, tutor benefits, "for your teams") */
.ls-art-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 0; }
.ls-art-cards--2 { grid-template-columns: repeat(2, 1fr); }
.ls-art-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 4px solid var(--blue-500); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.ls-art-card h3 { font: var(--font-h3); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 8px; }
.ls-art-card p { font: var(--font-body-md); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }

/* lead-form slot */
.ls-art-formslot { max-width: 720px; margin: 26px auto 0; background: var(--surface-card); border: 1px dashed var(--border-strong, var(--border-subtle)); border-radius: var(--radius-lg); padding: 28px; color: var(--text-muted); text-align: center; }
.ls-art-formslot strong { color: var(--text-strong); }

@media (max-width: 760px) {
  .ls-art-h1 { font-size: 2.2rem; }
  .ls-art-related__grid,
  .ls-art-cards,
  .ls-art-cards--2 { grid-template-columns: 1fr; }
}