/* 27 tools — hype vs output ranking (/resources/27-tools-hype-vs-output/) */
.is-under{color:var(--gx-lime)}
.is-over{color:#ff8a7a}
.is-fair{color:var(--gx-cyan)}

.tl-sort{margin:6px 0 22px}

.tl-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tl-cat h3{margin:18px 0 2px;color:var(--gx-cyan);font:700 15px/1.4 Rubik,Arial,sans-serif;letter-spacing:.06em}
.tl-list.is-sorted .tl-cat{display:none}
.tl-item{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(220px,300px);gap:18px;align-items:center;padding:18px 22px}
.tl-num{font:800 26px/1 Rubik,Arial,sans-serif;color:rgba(255,255,255,.28)}
.tl-main h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 6px;font:700 20px/1.3 Rubik,Arial,sans-serif}
.tl-main h3 a{color:var(--gx-text);text-decoration:none}
.tl-main h3 a:hover{color:var(--gx-lime)}
.tl-main p{margin:0;color:#c9d3ee;font-size:16px;line-height:1.65}
.tl-badge{padding:3px 10px;border:1px solid currentColor;border-radius:999px;font:600 14px/1.4 Rubik,Arial,sans-serif;white-space:nowrap}
.tl-bars{display:grid;gap:8px}
.tl-bar{display:grid;grid-template-columns:56px 1fr 46px;align-items:center;gap:10px;font-size:14px;color:var(--gx-muted)}
.tl-bar i{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.tl-bar i::after{content:"";position:absolute;inset:0 0 0 auto;width:var(--v);border-radius:inherit}
.tl-bar--out i::after{background:linear-gradient(270deg,var(--gx-lime),#3fd36a)}
.tl-bar--hype i::after{background:#7d88a8}
.tl-bar b{color:var(--gx-text);font-weight:700;text-align:left;direction:ltr}

@media (max-width:720px){.tl-item{grid-template-columns:40px minmax(0,1fr)}.tl-bars{grid-column:1/-1}}

/* Link marker next to each tool name */
.tl-main h3 a{display:inline-flex;align-items:center;gap:7px}
.tl-link-icon{flex:none;color:var(--gx-lime);opacity:.8;transition:transform .2s var(--gx-ease,ease),opacity .2s}
.tl-main h3 a:hover .tl-link-icon,.tl-main h3 a:focus-visible .tl-link-icon{opacity:1;transform:translate(2px,-2px)}

/* Slightly larger reading text on this page */
.tools-page .guide-lead{font-size:clamp(19px,1.8vw,22px)}
.tools-page .pb-sub{font-size:20px}
.tools-page .pb-note{font-size:17px}
.tools-page .tl-main h3{font-size:23px}
.tools-page .tl-main p{font-size:18px;line-height:1.7}
.tools-page .tl-badge{font-size:15px}
.tools-page .tl-bar{font-size:15px;grid-template-columns:60px 1fr 50px}
.tools-page .tl-cat h3{font-size:17px}
.tools-page .tl-sort button{font-size:17px}
.tools-page .gx-faq summary{font-size:19px}
.tools-page .gx-faq p{font-size:18px}
.tools-page .pb-contact__head p,.tools-page .guide-cta p{font-size:19px}