/* Free tools. Builds on seo-checker.css (cards, buttons, inputs, check rows) and
   landing.css (page hero, sections, FAQ); this file only adds what the tools need. */

.tl-wrap { max-width: 1100px; }
.tl { padding: 26px; }
.tl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.tl-form, .tl-out { min-width: 0; }
.tl-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 7px; font: 600 13.5px 'Inter', sans-serif; color: #111827; }
.tl-form > .tl-label:first-child, .tl-form > :first-child.tl-label { margin-top: 0; }
.tl-label small { font-weight: 400; color: #6b7280; }
.tl-label small a { color: #d02838; text-decoration: underline; }
.tl-count { font: 500 12px 'Inter', sans-serif; color: #6b7280; }
.tl-in { height: 46px; font-size: 14.5px; }
.tl-ta { height: auto; min-height: 90px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
select.tl-in { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center; padding-right: 36px; }
.tl-meter { height: 5px; border-radius: 99px; background: #eceef2; margin-top: 8px; overflow: hidden; }
.tl-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: #10b981; transition: width .15s ease, background .15s ease; }
.tl-meter i.warn { background: #f59e0b; } .tl-meter i.fail { background: #ef4444; }
.tl-load { display: flex; gap: 8px; margin-top: 20px; }
.tl-load.first { margin-top: 0; }
.tl-load .tl-in { flex: 1; min-width: 0; }
.tl-load .sc-btn { height: 46px; }
.tl-err { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b91c1c; font-size: 13.5px; }
.tl-fine { margin: 12px 0 0; font-size: 12.5px; color: #6b7280; }
.tl-fine a { color: #d02838; text-decoration: underline; }
.tl-big { width: 100%; height: 48px; margin-top: 18px; font-size: 15px; }
.tl-sm { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 10px; }
.tl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; border: 1.5px dashed #dcdfe5; border-radius: 16px; color: #6b7280; font-size: 14px; text-align: center; padding: 20px; }
.tl-nojs { color: #6b7280; }

/* Desktop / mobile switch, and tabs */
.tl-seg { display: inline-flex; gap: 4px; padding: 4px; background: #f1f2f5; border-radius: 12px; margin-bottom: 16px; }
.tl-seg button { padding: 7px 16px; border: 0; border-radius: 9px; background: none; font: 600 13px 'Inter', sans-serif; color: #6b7280; cursor: pointer; }
.tl-seg button.on { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.tl-tabs { margin-bottom: 22px; }
.tl-serp { margin-top: 0; background: #fff; }
.tl-serp.mobile { max-width: 380px; }
.tl-checks { margin-top: 14px; }
.tl-out > .sc-check:first-child { border-top: 0; padding-top: 4px; }

/* Output panes */
.tl-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tl-out-head b { font-family: 'Outfit', sans-serif; font-size: 16px; }
.tl-out-head span { display: inline-flex; gap: 8px; }
.tl-pre { margin: 0; padding: 16px 18px; background: #0f1117; color: #e6e8ee; border-radius: 14px; font: 12.5px/1.65 'JetBrains Mono', ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 460px; overflow: auto; }
.tl-more { margin-top: 12px; }
.tl-more summary { cursor: pointer; font: 600 13px 'Inter', sans-serif; color: #d02838; }
.tl-more .tl-pre { margin-top: 10px; }

/* Rows that can be added and removed */
.tl-prow { display: grid; grid-template-columns: 1fr 1.4fr 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.tl-prow .wide { grid-column: 1 / 3; }
.tl-prow.two { grid-template-columns: 1fr 1.4fr 34px; }
.tl-qa { position: relative; display: grid; gap: 8px; margin-bottom: 14px; padding-right: 40px; }
.tl-qa .tl-x { position: absolute; right: 0; top: 6px; }
.tl-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f1f2f5; color: #6b7280; font-size: 18px; line-height: 1; cursor: pointer; }
.tl-x:hover { background: #fdecec; color: #dc2626; }
.tl-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 14px; }
.tl-radios label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.tl-checks2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13.5px; }
.tl-checks2 label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tl-checks2 small { color: #6b7280; }
.tl-radios input, .tl-checks2 input { accent-color: #ff4d43; }

/* Generated options */
.tl-opt { border: 1px solid #e8eaee; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.tl-opt-head b { font: 600 12px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #d02838; }
.tl-field { margin-top: 12px; }
.tl-field-top { display: flex; align-items: center; justify-content: space-between; font: 600 12.5px 'Inter', sans-serif; color: #6b7280; }
.tl-field p { margin: 5px 0 9px; font-size: 15px; line-height: 1.5; color: #111827; }
.tl-badge { padding: 2px 9px; border-radius: 999px; font: 600 11px 'Inter', sans-serif; }
.tl-badge.ok { background: #e7f8f0; color: #067a55; } .tl-badge.warn { background: #fef3c7; color: #92400e; }

/* Heading counts */
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.tl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e8eaee; border-radius: 12px; background: #fff; font-size: 13px; }
.tl-chip i { font: 700 11px 'JetBrains Mono', monospace; font-style: normal; color: #6b7280; }
.tl-chip b { font-family: 'Outfit', sans-serif; font-size: 16px; }
.tl-chip.zero { opacity: .5; } .tl-chip.total { background: #111114; border-color: #111114; color: #fff; } .tl-chip.total i { color: #c9cad3; }

/* Call to action inside results */
.tl-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #fff3f1, #fff); border: 1px solid #ffdcd8; }
.tl-cta b { display: block; font-size: 14.5px; }
.tl-cta span { font-size: 12.5px; color: #6b7280; }

/* Info and hub */
.tl-info { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tl-steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; color: #3f3f46; font-size: 14.5px; }
.tl-card { display: block; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #ffc9c2; }
.tl-go { display: inline-flex; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 14px; color: #d02838; }
.tl-go i { font-style: normal; transition: transform .18s ease; }
.tl-card:hover .tl-go i { transform: translateX(3px); }
.tl-grid-hub { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .tl-two, .tl-info { grid-template-columns: 1fr; }
  .tl-grid-hub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tl { padding: 18px 16px; }
  .tl-grid-hub { grid-template-columns: 1fr; }
  .tl-pair, .tl-checks2 { grid-template-columns: 1fr; }
  .tl-load { flex-direction: column; }
  .tl-load .sc-btn { width: 100%; }
  .tl-prow, .tl-prow.two { grid-template-columns: 1fr 34px; }
  .tl-prow .tl-in:nth-child(2) { grid-column: 1; }
  .tl-prow .wide { grid-column: 1; }
}

/* A section hidden by a tab must stay hidden even where a class sets display */
.tl [hidden], .tl-wrap [hidden] { display: none !important; }

/* Google Rank Checker */
.tl-rank-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .9fr) auto; gap: 14px; align-items: end; }
.tl-rank-form .sc-btn { height: 46px; }
.tl-rank-hero { display: flex; gap: 22px; align-items: center; margin-top: 26px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, #fff4ef, #fff0f5); border: 1px solid #ffd9d2; font-size: 16px; line-height: 1.5; }
.tl-rank-hero.none { background: #f7f8fa; border-color: #e8eaee; }
.tl-rank-num { flex: none; min-width: 92px; text-align: center; font: 700 56px/1 'Outfit', sans-serif; background: linear-gradient(135deg, #ff6132, #ff2461); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-rank-num i { font-style: normal; font-size: 28px; opacity: .7; margin-right: 2px; }
.tl-rank-hero.none .tl-rank-num { background: none; color: #9aa0ab; }
.tl-rank-list { margin-top: 22px; }
.tl-rank-row { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-top: 1px solid #eef0f3; }
.tl-rank-row:first-of-type { border-top: 0; }
.tl-rank-row .n { flex: none; width: 30px; text-align: right; font: 700 14px 'JetBrains Mono', monospace; color: #6b7280; }
.tl-rank-row a { font-weight: 600; overflow-wrap: anywhere; }
.tl-rank-row.mine { background: #fff4ef; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.tl-rank-all { margin-top: 16px; }
.tl-rank-all summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
/* Rank result */
.rv { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.rv-verdict { display: grid; grid-template-columns: 230px 1fr; border-radius: 22px; background: #15171d; color: #f4f5f7; position: relative; overflow: hidden; }
.rv-verdict::after { content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,97,50,.32), rgba(255,36,97,0) 70%); pointer-events: none; }
.rv-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 16px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); position: relative; z-index: 1; }
.rv-score > span { font-size: 13px; color: #aeb2bb; letter-spacing: .04em; }
.rv-score > b { font-size: 14px; color: #fff; }
.rv-pos { font: 700 70px/1 'Outfit', sans-serif; letter-spacing: -2px; background: linear-gradient(135deg, #ff7a45, #ff2461); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-pos i { font-style: normal; font-size: 38px; opacity: .8; margin: 0 1px; }
.rv-verdict.none .rv-pos { background: none; color: #ff6b6b; }
.rv-text { padding: 26px 30px; position: relative; z-index: 1; min-width: 0; }
.rv-text h3 { margin: 0 0 6px; font: 700 25px/1.2 'Outfit', sans-serif; color: #fff; }
.rv-text p { margin: 0 0 16px; color: #c9ccd3; line-height: 1.6; }
.rv-text a { color: #fff; text-decoration: underline; text-decoration-color: #ff6132; text-underline-offset: 3px; }
.rv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rv-stats div { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.rv-stats span { display: block; font-size: 12px; color: #aeb2bb; }
.rv-stats b { display: block; margin-top: 2px; font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-sec { min-width: 0; }
.rv-sec h4 { margin: 0 0 4px; font: 700 20px/1.3 'Outfit', sans-serif; }
.rv-sec .tl-fine { margin: 0 0 4px; }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* one track, five zones, a pin */
.rv-track { position: relative; margin-top: 46px; }
.rv-segs { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, #5fd48a 0%, #5fd48a 20%, #b7e87a 20%, #b7e87a 40%, #ffd166 40%, #ffd166 60%, #ffb18a 60%, #ffb18a 80%, #ff7b7b 80%, #ff7b7b 100%); }
.rv-segs i { flex: 1; border-right: 3px solid #fff; }
.rv-segs i:last-child { border-right: 0; }
.rv-pin { position: absolute; top: -38px; transform: translateX(-50%); }
.rv-pin span { display: block; padding: 6px 12px; border-radius: 10px; background: #15171d; color: #fff; font: 700 12.5px/1 'Inter', sans-serif; white-space: nowrap; position: relative; }
.rv-pin span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #15171d; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.rv-pin.none { transform: translateX(-70%); }
.rv-zl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 10px; text-align: center; }
.rv-zl b { display: block; font-size: 13.5px; color: #1f2430; }
.rv-zl span { font-size: 12px; color: #9aa0ab; }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px; }
.rv-ctr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.rv-ctr > div { display: grid; grid-template-columns: 34px 1fr 52px; gap: 10px; align-items: center; font-size: 13.5px; }
.rv-ctr b { color: #6b7280; font-weight: 600; text-align: right; }
.rv-ctr .t { height: 12px; border-radius: 999px; background: #f1f2f5; overflow: hidden; }
.rv-ctr .t i { display: block; height: 100%; border-radius: 999px; background: #ffd9cc; }
.rv-ctr .on .t i { background: linear-gradient(90deg, #ff6132, #ff2461); }
.rv-ctr .on b, .rv-ctr .on span { color: #ff2461; font-weight: 700; }
.rv-ctr span { font-weight: 600; color: #374151; }
.rv-note { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid #ff6132; border-radius: 4px 12px 12px 4px; background: #fff7f4; color: #374151; line-height: 1.5; }
.rv-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.rv-feats div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e8eaee; border-radius: 14px; font-weight: 600; font-size: 14px; }
.rv-feats span { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #ff6132, #ff2461); }
.rv-serp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.rv-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; }
.rv-row .n { flex: none; width: 26px; text-align: right; font: 700 13px 'JetBrains Mono', monospace; color: #9aa0ab; }
.rv-row div { min-width: 0; flex: 1; }
.rv-row a { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row small { display: block; color: #8a909c; font-size: 12.5px; }
.rv-row em { flex: none; font: 700 12px/1 'Inter', sans-serif; font-style: normal; color: #fff; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, #ff6132, #ff2461); }
.rv-row.me { background: #fff4ef; border-color: #ffb9a4; }
.rv-row.me .n { color: #ff3f4f; }
.rv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rv-steps div { padding: 16px 18px; border-radius: 16px; background: #f6f7f9; }
.rv-steps span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #15171d; color: #fff; font: 700 13px 'Outfit', sans-serif; margin-bottom: 10px; }
.rv-steps b { display: block; margin-bottom: 4px; }
.rv-steps p { margin: 0 0 6px; color: #4b5563; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) { .rv-verdict { grid-template-columns: minmax(0, 1fr); } .rv-score { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); } .rv-stats, .rv-steps, .rv-cols, .rv-feats { grid-template-columns: minmax(0, 1fr); } .rv-cols { gap: 34px; } .rv-zl b { font-size: 11px; } .rv-zl span { font-size: 10.5px; } }
@media (max-width: 860px) { .tl-rank-form { grid-template-columns: 1fr; } .tl-rank-hero { flex-direction: column; text-align: center; } }