/* Shared by the Halo homepage and the SEO landings (light canvas).
   Trust lines under pricing, the clickable demo lesson, the changelog. */

/* ── Trust lines ── */
.l-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; max-width: 56rem; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(0, 0, 0, 0.08); list-style: none; }
.l-trust li { display: flex; gap: 0.65rem; align-items: flex-start; color: rgba(0, 0, 0, 0.6); font-size: 0.875rem; line-height: 1.5; }
.l-trust svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; color: #5D51B4; }
.l-trust b { color: rgba(0, 0, 0, 0.85); font-weight: 600; }
@media (max-width: 760px) { .l-trust { grid-template-columns: minmax(0, 1fr); } }

/* ── Clickable demo lesson (student view mockup) ── */
.dl {
  --dl-ink: #1a1a2e; --dl-slate: #525866; --dl-quiet: #6b7080; --dl-line: #e1e4e8; --dl-soft: #eef0f2;
  --dl-canvas: #fafbfc; --dl-indigo: #4f46e5; --dl-indigo-soft: #eef2ff; --dl-ok: #047857; --dl-ok-soft: #ecfdf5; --dl-bad: #b42318; --dl-bad-soft: #fef3f2;
  overflow: hidden; border-radius: 1rem; background: #fff; color: var(--dl-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 32px 64px -40px rgba(43, 38, 68, 0.35);
  font-family: "Golos Text", system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.5; text-align: left;
}
.dl * { font-family: inherit; box-sizing: border-box; }
.dl button { font: inherit; color: inherit; cursor: pointer; }
.dl-chrome { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.dl-dots { display: flex; gap: 0.375rem; }
.dl-dots i { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.08); }
.dl-url { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(0, 0, 0, 0.55); font-size: 0.8125rem; white-space: nowrap; }
.dl-app { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 34rem; }
.dl-side { padding: 1.25rem 1.1rem; border-right: 1px solid var(--dl-soft); background: var(--dl-canvas); }
.dl-course { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.dl-progress-label { margin-top: 0.6rem; color: var(--dl-slate); font-size: 0.75rem; }
.dl-progress { height: 4px; margin-top: 0.35rem; overflow: hidden; border-radius: 9999px; background: var(--dl-soft); }
.dl-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--dl-indigo); transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.dl-mod { margin-top: 1.1rem; color: var(--dl-quiet); font-size: 0.75rem; font-weight: 600; }
.dl-lessons { margin: 0.35rem 0 0; padding: 0; list-style: none; }
.dl-lesson { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.35rem 0.5rem; border-radius: 0.5rem; color: var(--dl-slate); font-size: 0.8125rem; line-height: 1.35; }
.dl-lesson.is-current { background: #fff; color: var(--dl-ink); font-weight: 500; box-shadow: 0 0 0 1px var(--dl-line); }
.dl-mark { flex-shrink: 0; width: 0.9rem; height: 0.9rem; margin-top: 0.1rem; border: 1.5px solid #cdd1d9; border-radius: 9999px; transition: background-color 300ms ease, border-color 300ms ease; }
.dl-lesson.is-done .dl-mark { border-color: var(--dl-ok); background: var(--dl-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.dl-lesson.is-current .dl-mark { border-color: var(--dl-indigo); }
.dl-lesson.is-next { color: var(--dl-ink); }
.dl-main { display: flex; min-width: 0; flex-direction: column; padding: 1.5rem 1.75rem 1.25rem; }
.dl-crumb { color: var(--dl-quiet); font-size: 0.8125rem; }
.dl-title { margin: 0.15rem 0 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.dl-meta { margin-top: 0.3rem; color: var(--dl-slate); font-size: 0.8125rem; }
.dl-video { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 16 / 9; max-height: 19rem; margin-top: 1.1rem; padding: 1rem 1.1rem 0.9rem; border-radius: 0.75rem; background: radial-gradient(120% 90% at 30% 20%, #3b3561 0%, #1a1a2e 70%); color: #fff; }
.dl-video-title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.dl-video-note { display: flex; align-items: center; gap: 0.6rem; align-self: center; color: rgba(255, 255, 255, 0.78); font-size: 0.8125rem; }
.dl-play { display: grid; flex-shrink: 0; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); }
.dl-play svg { width: 1rem; height: 1rem; }
.dl-video-bar { display: flex; align-items: center; gap: 0.85rem; }
.dl-track { position: relative; flex: 1; height: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.25); }
.dl-track-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #a5b4fc; transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.dl-marker { position: absolute; top: 50%; width: 0.85rem; height: 0.85rem; margin: -0.425rem 0 0 -0.425rem; padding: 0; border: 2px solid #1a1a2e; border-radius: 9999px; background: #fff; transition: transform 160ms ease; }
.dl-marker:first-of-type { margin-left: 0; }
.dl-marker:hover, .dl-marker.is-on { transform: scale(1.3); background: #a5b4fc; }
.dl-time { flex-shrink: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.dl-tabs { display: flex; gap: 0.25rem; margin-top: 1.1rem; border-bottom: 1px solid var(--dl-soft); }
.dl-tab { padding: 0.55rem 0.85rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dl-slate) !important; font-size: 0.875rem; font-weight: 500; }
.dl-tab.is-on { border-bottom-color: var(--dl-indigo); color: var(--dl-ink) !important; }
.dl-badge { margin-left: 0.25rem; padding: 0 0.4rem; border-radius: 9999px; background: var(--dl-indigo-soft); color: #3730a3; font-size: 0.6875rem; }
.dl-panels { flex: 1; min-height: 23rem; padding-top: 1rem; }
.dl.is-js .dl-panel:not(.is-on) { display: none; }
.dl:not(.is-js) .dl-panel + .dl-panel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dl-soft); }
.dl-section { padding: 0.5rem 0.75rem; margin: 0 -0.75rem; border-radius: 0.6rem; transition: background-color 400ms ease; }
.dl-section + .dl-section { margin-top: 0.25rem; }
.dl-section.is-target { background: var(--dl-indigo-soft); }
.dl-section h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.dl-section p { margin: 0.3rem 0 0; color: #2d3142; }
.dl-chapters { margin: 0; padding: 0; list-style: none; }
.dl-chapters button { display: flex; gap: 0.9rem; width: 100%; padding: 0.6rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; text-align: left; font-size: 0.9375rem; }
.dl-chapters button:hover { background: var(--dl-canvas); }
.dl-chapters span { min-width: 2.75rem; color: var(--dl-indigo); font-variant-numeric: tabular-nums; font-weight: 600; }
.dl.is-js .dl-q:not(.is-on) { display: none; }
.dl:not(.is-js) .dl-result { display: none; }
.dl:not(.is-js) .dl-q + .dl-q { margin-top: 1.25rem; }
.dl-q-count { color: var(--dl-quiet); font-size: 0.75rem; }
.dl-q-text { margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.dl-opts { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.dl-opt { padding: 0.65rem 0.85rem; border: 1px solid var(--dl-line); border-radius: 0.6rem; background: #fff; text-align: left; transition: border-color 160ms ease, background-color 160ms ease; }
.dl-opt:hover:not(:disabled) { border-color: #a5b4fc; background: var(--dl-indigo-soft); }
.dl-opt:disabled { cursor: default; }
.dl-opt.is-right { border-color: #6ee7b7; background: var(--dl-ok-soft); color: var(--dl-ok); }
.dl-opt.is-wrong { border-color: #fecdca; background: var(--dl-bad-soft); color: var(--dl-bad); }
.dl-explain { margin-top: 0.7rem; color: var(--dl-slate); font-size: 0.875rem; }
.dl.is-js .dl-explain:not(.is-on), .dl.is-js .dl-next:not(.is-on) { display: none; }
.dl:not(.is-js) .dl-next { display: none; }
.dl-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.8rem; padding: 0.55rem 1rem; border: 0; border-radius: 0.5rem; background: var(--dl-ink); color: #fff !important; font-size: 0.875rem; font-weight: 500; }
.dl-btn:hover { background: #2d2d4a; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dl-soft); }
.dl-complete { margin-top: 0; background: var(--dl-indigo); }
.dl-complete:hover { background: #4338ca; }
.dl-complete:disabled { opacity: 0.45; cursor: default; }
.dl-done-note { color: var(--dl-ok); font-size: 0.875rem; font-weight: 500; }
.dl:not(.is-complete) .dl-done-note { display: none; }
.dl.is-complete .dl-complete { display: none; }
.dl button:focus-visible { outline: 2px solid var(--dl-indigo); outline-offset: 2px; }
@media (max-width: 760px) {
  .dl-app { grid-template-columns: minmax(0, 1fr); }
  .dl-side { display: none; }
  .dl-main { padding: 1.1rem; }
  .dl-title { font-size: 1.25rem; }
  .dl-url { position: static; min-width: 0; margin-left: 0.75rem; overflow: hidden; transform: none; text-overflow: ellipsis; }
}

/* ── Changelog («Что нового») ── */
.cl-h1 { color: #000; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; }
.cl-list { margin: 3rem 0 0; padding: 0; list-style: none; }
.cl-item { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.cl-date { color: rgba(0, 0, 0, 0.5); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cl-tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); font-size: 0.75rem; font-weight: 500; }
.cl-tag.is-new { background: #eeecf9; color: #5D51B4; }
.cl-title { margin-top: 0.5rem; color: #000; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.cl-text { margin-top: 0.5rem; color: rgba(0, 0, 0, 0.65); font-size: 1rem; line-height: 1.6; }
.cl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.7); }
@media (max-width: 640px) { .cl-item { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }