/* =====================================================================
   2026 Tools page (/resources/tools/). Builds on home-2026.css (tokens, buttons, eyebrow, reveal, CTA).
   Everything is scoped to main.tl26. Category colors: paid green, SEO blue, measurement gold, CRO purple.
   ===================================================================== */
.tl26 .c-paid { --c: var(--green); --ct: var(--green-tint); }
.tl26 .c-seo { --c: var(--blue); --ct: var(--blue-tint); }
.tl26 .c-measure { --c: #D9A35F; --ct: var(--gold-tint); }
.tl26 .c-cro { --c: var(--purple); --ct: var(--purple-tint); }

/* ---------- hero ---------- */
.tl26 .tl-hero { position: relative; overflow: hidden; padding: calc(68px + 14px + clamp(40px,5vw,72px)) 0 clamp(28px,4vw,44px); }
.tl26 .tl-hero > .wrap { position: relative; z-index: 1; }
.tl26 .tl-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 24px 64px; align-items: end; }
.tl26 .tl-hero h1 { font-size: clamp(2.4rem,5.4vw,4.5rem); line-height: 1.02; max-width: 12ch; }
.tl26 .tl-hero .lede { max-width: 40ch; }
@media (max-width: 1080px) { .tl26 .tl-hero { padding-top: calc(64px + 10px + clamp(32px,5vw,56px)); } }
@media (max-width: 900px) { .tl26 .tl-hero-grid { grid-template-columns: 1fr; } }

/* ---------- toolbar: search + category chips (sticks under the header) ---------- */
.tl26 .tl-list { padding-top: clamp(12px,2vw,20px); padding-bottom: clamp(56px,7vw,96px); }
.tl26 .tl-toolbar { position: sticky; top: calc(var(--nav-height-top) + 8px); z-index: 5; display: flex; align-items: center; gap: 8px; margin-bottom: clamp(24px,3vw,36px); padding: 6px; background: color-mix(in srgb, var(--neutral-100) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--neutral-300); border-radius: 16px; }
.tl26 .tl-search { position: relative; flex: 1 1 280px; min-width: 0; display: flex; align-items: center; margin: 0; }
.tl26 .tl-search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--neutral-500); pointer-events: none; }
.tl26 .tl-search input { width: 100%; height: 44px; margin: 0; padding: 0 40px 0 42px; border: 1px solid transparent; border-radius: 11px; background: var(--paper); color: var(--neutral-900); font: 400 1rem/1 var(--font); letter-spacing: -.01em; outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.tl26 .tl-search input::placeholder { color: var(--neutral-500); }
.tl26 .tl-search input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.tl26 .tl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tl26 .tl-search kbd { position: absolute; right: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--neutral-300); border-radius: 6px; background: var(--neutral-100); color: var(--neutral-500); font: 500 .75rem/1 var(--font); pointer-events: none; }
.tl26 .tl-search input:focus ~ kbd, .tl26 .tl-search.has-q kbd { display: none; }
.tl26 .tl-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tl26 .tl-chips::-webkit-scrollbar { display: none; }
.tl26 .tl-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; color: var(--neutral-700); font: 500 .9375rem/1 var(--font); letter-spacing: -.01em; cursor: pointer; transition: background-color .2s, color .2s; }
.tl26 .tl-chip span { font-size: .75rem; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.tl26 .tl-chip:hover { background: var(--neutral-200); }
.tl26 .tl-chip[aria-pressed="true"] { background: var(--neutral-900); color: var(--neutral-100); }
.tl26 .tl-chip[aria-pressed="true"] span { color: var(--neutral-300); }
.tl26 .tl-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tl26 .tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
@media (max-width: 760px) {
  .tl26 .tl-toolbar { flex-direction: column; align-items: stretch; top: calc(var(--nav-height-top) + 4px); }
  .tl26 .tl-search { flex: none; }
  .tl26 .tl-search kbd { display: none; }
  .tl26 .tl-chip { height: 38px; padding: 0 12px; font-size: .875rem; }
}

/* ---------- tool cards ---------- */
.tl26 .tl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(14px,1.6vw,20px); }
@media (max-width: 980px) { .tl26 .tl-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .tl26 .tl-grid { grid-template-columns: 1fr; gap: 12px; } }
.tl26 .tl-item { margin: 0; padding: 0; display: flex; }
.tl26 .tl-item[hidden] { display: none; }
.tl26 .tl-item.pop { animation: tl-pop .45s var(--ease-out) both; animation-delay: var(--pd,0s); }
@keyframes tl-pop { from { opacity: 0; transform: translateY(10px); } }
.tl26 .tl-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 22px 22px 20px; background: var(--paper); border: 1px solid var(--neutral-300); border-radius: var(--radius-card); color: inherit; text-decoration: none; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.tl26 .tl-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.tl26 .tl-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(7,7,15,.08); border-color: color-mix(in srgb, var(--neutral-300) 60%, var(--neutral-500)); color: inherit; }
.tl26 .tl-card:hover::before { transform: none; }
.tl26 .tl-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
body.dark-theme .tl26 .tl-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.tl26 .tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tl26 .tl-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ct); color: var(--c); transition: transform .5s var(--ease-spring); }
.tl26 .tl-ico svg { width: 24px; height: 24px; }
.tl26 .tl-card:hover .tl-ico { transform: rotate(-6deg) scale(1.06); }
.tl26 .tl-cat { font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.tl26 .tl-name { margin-top: 18px; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.03em; }
.tl26 .tl-desc { margin: 6px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--neutral-700); }
.tl26 .tl-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: .875rem; font-weight: 500; color: var(--neutral-900); }
.tl26 .tl-go svg { width: 16px; height: 16px; color: var(--c); transition: transform .35s var(--ease-spring); }
.tl26 .tl-card:hover .tl-go svg { transform: translateX(4px); }

/* phones: compact rows (icon, name and description, arrow); the chips already show the category */
@media (max-width: 600px) {
  .tl26 .tl-card { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 14px; align-items: start; padding: 16px 44px 16px 16px; }
  .tl26 .tl-top { display: contents; }
  .tl26 .tl-ico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; }
  .tl26 .tl-ico svg { width: 22px; height: 22px; }
  .tl26 .tl-cat { display: none; }
  .tl26 .tl-name { grid-column: 2; margin-top: 0; font-size: 1.0625rem; }
  .tl26 .tl-desc { grid-column: 2; margin-top: 4px; font-size: .875rem; line-height: 1.5; }
  .tl26 .tl-go { position: absolute; right: 16px; top: 50%; margin: 0; padding: 0; transform: translateY(-50%); font-size: 0; gap: 0; }
  .tl26 .tl-go svg { width: 18px; height: 18px; }
  .tl26 .tl-card:hover { transform: none; }
  .tl26 .tl-chips { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 24px; }
}

.tl26 .tl-empty { padding: 40px 24px; text-align: center; border: 1px dashed var(--neutral-300); border-radius: var(--radius-card); }
.tl26 .tl-empty[hidden] { display: none; }
.tl26 .tl-empty p { max-width: 46ch; margin: 0 auto 16px; color: var(--neutral-700); }
.tl26 .tl-empty b { color: var(--neutral-900); font-weight: 600; }

/* ---------- DataPulse feature ---------- */
.tl26 .tl-feature { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px 28px; margin-top: clamp(28px,4vw,44px); padding: clamp(22px,3vw,32px); border-radius: var(--radius-card); background: #07070F; color: #E1DED6; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.tl26 .tl-feature::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 340px; height: 260px; background: rgba(25,199,152,.22); clip-path: polygon(18% 0, 100% 10%, 86% 100%, 0 72%); filter: blur(2px); transition: transform 1s var(--ease-out); }
.tl26 .tl-feature:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(7,7,15,.18); color: #E1DED6; }
.tl26 .tl-feature:hover::before { transform: translate(-24px, 12px) rotate(-4deg); }
.tl26 .tl-feature:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
body.dark-theme .tl26 .tl-feature { background: #14141B; border: 1px solid #303030; }
.tl26 .tl-feature-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(25,199,152,.16); color: var(--green); }
.tl26 .tl-feature-ico svg { width: 28px; height: 28px; }
.tl26 .tl-feature-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl26 .tl-feature-kicker { font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #8E8C8E; }
.tl26 .tl-feature-name { font-size: 1.5rem; font-weight: 600; letter-spacing: -.035em; color: #F4F1E6; }
.tl26 .tl-feature-desc { font-size: .9375rem; line-height: 1.55; color: #CFC7C0; max-width: 56ch; }
.tl26 .tl-feature-cta { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--radius-button); background: var(--green); color: #07070F; font-weight: 500; white-space: nowrap; transition: background-color .2s; }
.tl26 .tl-feature-cta svg { width: 18px; height: 18px; transition: transform .35s var(--ease-spring); }
.tl26 .tl-feature:hover .tl-feature-cta { background: #15b889; }
.tl26 .tl-feature:hover .tl-feature-cta svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .tl26 .tl-feature { grid-template-columns: auto minmax(0,1fr); align-items: start; }
  .tl26 .tl-feature-cta { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- blog strip ---------- */
.tl26 .tl-blog { padding-top: 0; padding-bottom: clamp(24px,4vw,48px); }
.tl26 .tl-blog-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px,3vw,36px); }
.tl26 .tl-blog-head h2 { font-size: clamp(1.75rem,3.2vw,2.5rem); }
.tl26 .tl-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(14px,1.6vw,20px); }
@media (max-width: 900px) { .tl26 .tl-posts { grid-template-columns: 1fr; } }
.tl26 .tl-posts li { display: flex; margin: 0; }
.tl26 .tl-post { display: flex; flex-direction: column; width: 100%; min-height: 200px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--neutral-300); border-radius: var(--radius-card); color: inherit; text-decoration: none; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.tl26 .tl-post:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(7,7,15,.08); border-color: color-mix(in srgb, var(--neutral-300) 60%, var(--neutral-500)); color: inherit; }
.tl26 .tl-post:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
body.dark-theme .tl26 .tl-post:hover { box-shadow: 0 18px 36px rgba(0,0,0,.45); }
.tl26 .tl-post-cats { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.tl26 .tl-post-cats span { padding: 3px 8px; border-radius: 6px; background: var(--green-tint); color: var(--neutral-900); font-size: .75rem; font-weight: 500; }
.tl26 .tl-post-title { margin-top: 14px; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; color: var(--neutral-900); }
.tl26 .tl-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; font-size: .8125rem; color: var(--neutral-500); }
.tl26 .tl-post-foot svg { width: 18px; height: 18px; color: var(--green); transition: transform .35s var(--ease-spring); }
.tl26 .tl-post:hover .tl-post-foot svg { transform: translateX(4px); }
@media (max-width: 900px) { .tl26 .tl-post { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tl26 .tl-item.pop { animation: none; }
}