/* ChalkTalk learning spiral (Oct 9, 2026) -- shared by the homepage and the
   investor page. Teach -> Visualize -> Practice -> Assess -> Diagnose ->
   Target -> Reassess -> (better-informed) Teach. Markup lives in each page;
   this file is the one look for it. */
.ls { --ls-bg:#0d1017; --ls-panel:#121820; --ls-panel2:#161e29; --ls-border:#1e2a3a; --ls-border2:#27364a;
  --ls-gold:#f0b429; --ls-teal:#1abc9c; --ls-text:#f2ede4; --ls-muted:#a9b6c6; color: var(--ls-text); }

/* the four-step summary (the brand card) */
.ls-summary { background:#000; border:1px solid #2a2f37; border-radius:18px; padding:30px 28px 24px; text-align:center; }
.ls-summary h3 { font-family: inherit; font-size: clamp(22px, 3vw, 30px); font-weight:700; letter-spacing:0; margin:0 0 8px; text-transform:none; color:#fff; }
.ls-summary > p { color:#b9c0ca; font-size:16px; margin:0 auto 20px; max-width:640px; }
.ls-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; margin:0; padding:0; list-style:none; }
.ls-cards li { background:#1c1c1e; border:1px solid #2c2c30; border-radius:14px; padding:20px 20px 18px; }
.ls-cards li:nth-child(n+3) { background:#232325; border-color:#3a3a3e; }
.ls-cards svg { width:26px; height:26px; color:#fff; display:block; margin-bottom:10px; }
.ls-cards h4 { font-family: inherit; font-size:18px; font-weight:700; letter-spacing:0; text-transform:none; margin:0 0 6px; color:#fff; }
.ls-cards p { font-size:15px; color:#e3e6ea; margin:0; line-height:1.5; }
.ls-foot { font-size:17px; color:#fff; margin:20px 0 0; font-weight:500; }

/* the full loop: picture + the seven stages */
.ls-loop { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap:28px; align-items:center; margin-top:34px; }
.ls-svg { width:100%; height:auto; display:block; max-width:560px; margin:0 auto; }
.ls-arc { fill:none; stroke:var(--ls-gold); stroke-width:3; }
.ls-return { stroke:var(--ls-teal); stroke-width:3.5; stroke-dasharray:9 6; }
.ls-spiral { fill:none; stroke:var(--ls-border2); stroke-width:2; }
.ls-node circle { fill:var(--ls-panel2); stroke:var(--ls-gold); stroke-width:2.5; }
.ls-node-gold circle { fill:var(--ls-gold); }
.ls-node-gold .ls-num { fill:var(--ls-bg); }
.ls-num { font: 700 24px/1 'Bebas Neue', Impact, Arial, sans-serif; fill:var(--ls-text); }
.ls-label { font: 700 19px/1 'DM Sans', Arial, sans-serif; fill:var(--ls-text); }
.ls-retlabel { font: 600 15px/1 'DM Mono', monospace; fill:var(--ls-teal); }
.ls-center { font: 600 17px/1 'DM Sans', Arial, sans-serif; fill:var(--ls-muted); }
.ls-steps { list-style:none; margin:0; padding:0; counter-reset:ls; display:grid; gap:8px; }
.ls-steps li { counter-increment:ls; display:grid; grid-template-columns:34px 1fr; gap:4px 12px; background:var(--ls-panel); border:1px solid var(--ls-border); border-radius:8px; padding:12px 14px; }
.ls-steps li::before { content:counter(ls); grid-row:1 / span 3; width:30px; height:30px; border-radius:50%; border:2px solid var(--ls-gold); display:flex; align-items:center; justify-content:center; font:700 17px/1 'Bebas Neue', Impact, Arial, sans-serif; color:var(--ls-text); }
.ls-steps li.ls-hot { border-color:rgba(240,180,41,.55); }
.ls-steps li.ls-hot::before { background:var(--ls-gold); color:var(--ls-bg); }
.ls-steps li.ls-back { border-color:rgba(26,188,156,.6); }
.ls-steps li.ls-back::before { border-color:var(--ls-teal); content:"\21BA"; color:var(--ls-teal); font-size:16px; }
.ls-steps b { font-size:15.5px; color:var(--ls-text); }
.ls-steps span { font-size:14px; color:var(--ls-muted); line-height:1.5; }
.ls-tag { display:inline-block; font:700 10px/1 'DM Mono', monospace; letter-spacing:1.2px; text-transform:uppercase; padding:4px 7px; border-radius:3px; margin-left:6px; vertical-align:2px; white-space:nowrap; }
.ls-tag.live { background:var(--ls-teal); color:var(--ls-bg); }
.ls-tag.coach { border:1px solid var(--ls-gold); color:var(--ls-gold); }
.ls-tag.build { border:1px solid var(--ls-border2); color:var(--ls-muted); }

/* the illustrative example */
.ls-example { margin-top:34px; background:var(--ls-panel); border:1px solid var(--ls-border); border-radius:10px; padding:22px; }
.ls-example .ls-ill { display:inline-block; font:700 10px/1 'DM Mono', monospace; letter-spacing:1.4px; text-transform:uppercase; color:var(--ls-bg); background:var(--ls-gold); padding:5px 8px; border-radius:3px; margin-bottom:12px; }
.ls-example h3 { margin:0 0 14px; }
.ls-ex-steps { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.ls-ex-steps li { border-top:3px solid var(--ls-gold); padding-top:10px; font-size:14px; color:var(--ls-muted); line-height:1.5; }
.ls-ex-steps li:last-child { border-top-color:var(--ls-teal); }
.ls-ex-steps b { display:block; color:var(--ls-text); font-size:15px; margin-bottom:4px; }
.ls-example figure { margin:0; }
.ls-example img { width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--ls-border2); }
.ls-example figcaption { font-size:12.5px; color:var(--ls-muted); margin-top:8px; }

/* the timeline comparison */
.ls-time { width:100%; border-collapse:separate; border-spacing:6px; table-layout:fixed; margin-top:8px; }
.ls-time caption { caption-side:bottom; text-align:left; font-size:12.5px; color:var(--ls-muted); padding-top:10px; }
.ls-time th { font:700 10.5px/1.3 'DM Mono', monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--ls-muted); text-align:left; padding:4px 6px; vertical-align:bottom; }
.ls-time th[scope=row] { color:var(--ls-text); font-size:11px; width:17%; vertical-align:middle; }
.ls-time td { background:var(--ls-panel); border:1px solid var(--ls-border); border-radius:6px; padding:10px; font-size:13.5px; color:var(--ls-muted); vertical-align:top; line-height:1.45; }
.ls-time td.on { border-color:rgba(240,180,41,.55); color:var(--ls-text); }
.ls-time td.tl { border-color:rgba(26,188,156,.6); color:var(--ls-text); }
.ls-time td.empty { background:transparent; border-style:dashed; }

@media (max-width: 860px) {
  .ls-loop { grid-template-columns:1fr; }
  .ls-svg { max-width:420px; }
  .ls-ex-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .ls-summary { padding:22px 16px 18px; border-radius:14px; }
  .ls-cards { grid-template-columns:1fr; }
  .ls-svg { max-width:340px; }
  .ls-ex-steps { grid-template-columns:1fr; }
  /* the timeline turns into stacked cards */
  .ls-time, .ls-time tbody, .ls-time tr, .ls-time th, .ls-time td { display:block; width:100%; }
  .ls-time thead { position:absolute; left:-9999px; }
  .ls-time caption { display:block; width:100%; caption-side:top; padding:0 0 12px; }
  .ls-time tr { margin-bottom:14px; }
  .ls-time th[scope=row] { width:100%; padding:6px 0; }
  .ls-time td { margin-top:6px; }
  .ls-time td::before { content:attr(data-when); display:block; font:700 10px/1.2 'DM Mono', monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--ls-gold); margin-bottom:4px; }
}
@media (prefers-reduced-motion: reduce) { .ls * { transition:none !important; animation:none !important; } }