/* /chart guest landing - Phase 18 additions (tools grid, steps, comparison).
   Markup: Views/Chart/Landing.cshtml. Scoped to cl-*. */
.cl-sec { margin-top: clamp(4rem, 9vw, 7rem); }
.cl-sec svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-head { text-align: center; max-width: 46rem; margin: 0 auto 2.25rem; }
.cl-kicker { display: inline-block; font-size: .75rem; font-weight: 800; color: hsl(199 89% 40%); background: hsl(199 89% 48% / .1); border: 1px solid hsl(199 89% 48% / .22); padding: .25rem .8rem; border-radius: var(--ds-r-pill); margin-bottom: .9rem; }
html.dark-theme .cl-kicker { color: hsl(199 89% 65%); }
.cl-title { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 1000; line-height: 1.35; color: var(--ds-text); }
.cl-lead { margin: 0; color: var(--ds-text-2); font-size: .95rem; line-height: 1.9; }

/* tools bento */
.cl-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cl-tool { --c: 199 89% 48%; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem; border-radius: var(--ds-r-xl);
  background: var(--ds-surface-1); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); transition: transform .2s, border-color .2s, box-shadow .2s; }
.cl-tool::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, hsl(var(--c) / .16), transparent); pointer-events: none; }
.cl-tool:hover { transform: translateY(-3px); border-color: hsl(var(--c) / .45); box-shadow: 0 18px 36px -22px hsl(var(--c) / .7); }
.cl-tool.is-sky { --c: 199 89% 48%; } .cl-tool.is-violet { --c: 262 83% 62%; } .cl-tool.is-amber { --c: 38 92% 50%; }
.cl-tool__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--ds-r-lg); color: hsl(var(--c)); background: hsl(var(--c) / .12); border: 1px solid hsl(var(--c) / .25); }
.cl-tool__ic svg { width: 22px; height: 22px; }
.cl-tool h3 { margin: .2rem 0 0; font-size: 1rem; font-weight: 900; color: var(--ds-text); }
.cl-tool p { margin: 0; font-size: .82rem; line-height: 1.9; color: var(--ds-text-2); }

/* comparison */
.cl-cmp-wrap { max-width: 52rem; margin: 0 auto; overflow-x: auto; border-radius: var(--ds-r-xl); border: 1px solid var(--ds-line); background: var(--ds-surface-1); box-shadow: var(--ds-shadow-1); }
.cl-cmp { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cl-cmp th, .cl-cmp td { padding: .85rem 1rem; border-bottom: 1px solid var(--ds-line); text-align: center; }
.cl-cmp tbody tr:last-child th, .cl-cmp tbody tr:last-child td { border-bottom: 0; }
.cl-cmp thead th { font-size: .8rem; font-weight: 900; color: var(--ds-text-2); background: var(--ds-surface-2); }
.cl-cmp thead th:first-child, .cl-cmp tbody th { text-align: start; }
.cl-cmp tbody th { font-weight: 800; color: var(--ds-text); }
.cl-cmp .is-tf { background: hsl(199 89% 48% / .07); }
.cl-cmp thead .is-tf { color: hsl(199 89% 40%); background: hsl(199 89% 48% / .14); }
html.dark-theme .cl-cmp thead .is-tf { color: hsl(199 89% 65%); }
.cl-cmp small { display: block; font-size: .68rem; color: var(--ds-text-3); margin-top: .15rem; font-weight: 700; }
.cl-y, .cl-n { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 14px; }
.cl-y { background-color: hsl(152 60% 42% / .15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.cl-n { background-color: hsl(0 72% 56% / .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }

html.dark-theme .cl-tool, html.dark-theme .cl-cmp-wrap { background-color: hsl(222 30% 9%); border-color: hsl(0 0% 100% / .07); }
html.dark-theme .cl-cmp thead th { background: hsl(222 24% 13%); }

@media (max-width: 1024px) { .cl-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cl-tools { grid-template-columns: 1fr; gap: .75rem; }
  .cl-tool { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 1rem; }
  .cl-tool h3 { flex: 1; margin: 0; }
  .cl-tool p { flex-basis: 100%; }
  .cl-cmp th, .cl-cmp td { padding: .7rem .6rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .cl-tool { transition: none; } }

/* phase27: shorter guest landing - three tools + link to /features */
.cl-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 22px 0 0; }
.cl-more__a { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: var(--ds-fs-sm, .9rem); color: var(--ds-link, hsl(199 89% 42%)); text-decoration: none; }
.cl-more__a .icon { width: 16px; height: 16px; transition: transform .2s; }
.cl-more__a:hover .icon { transform: translateX(-3px); }
@media (max-width: 1024px) and (min-width: 641px) { .cl-tools--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }