/* Free SEO tools (2026-09-08). Sits on marketing.css and the directory hero. */
.tl-section { padding-top: clamp(28px, 3.5vw, 44px) !important; padding-bottom: clamp(24px, 3vw, 40px) !important; }
body.mk-page .mk-dir + .tl-section { padding-top: clamp(28px, 3.5vw, 44px); }
body.tl-has-result .mk-dir .mk-hero-card { min-height: clamp(360px, 42vh, 460px); }
.tl-two { align-items: start; }
.tl-what { display: grid; gap: 16px; }
.tl-form-card h3 { margin-top: 14px; }
.tl-form { margin-top: 16px; }
.tl-form .field { margin-bottom: 14px; }
.tl-form .label .meta { font-weight: 400; }
.tl-textarea { min-height: 200px; font-size: 15px; line-height: 1.55; resize: vertical; }
.tl-form-note { margin-top: 12px; }
.tl-form-note a { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.tl-err-box { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #FBEDEA; color: #8C2B1D; font-size: 14px; line-height: 1.5; border-left: 4px solid #B3261E; }
.tl-err { margin: 0 0 8px; color: #8C2B1D; font-size: 14px; }
.tl-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tl-sec-head { margin-bottom: 22px; }
.tl-sec-head h2 { margin: 10px 0 0; font-size: clamp(24px, 2.6vw, 34px); }

/* marketing.css paints every anchor brand green (.mk a), which turns a dark
   pill link the same colour as its background; buttons that are links keep
   their own text colour here. */
.mk a.btn-deep, .mk a.btn-deep:hover, .mk a.btn-primary, .mk a.btn-primary:hover { color: #fff; }
.mk a.btn-ghost { color: var(--deep); }

/* Tool cards on the hub and the related row */
.tl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tl-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; text-decoration: none; color: var(--ink); min-height: 168px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(7,35,26,.09); border-color: rgba(12,58,42,.22); color: var(--ink); }
.tl-card-cat { font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tl-card b { font-size: 17px; letter-spacing: -.01em; color: var(--deep); margin-top: 2px; }
.tl-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.tl-card-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--deep); margin-top: 8px; }
.tl-card-go svg { transition: transform .16s ease; }
.tl-card:hover .tl-card-go svg { transform: translateX(3px); }

/* The result */
.tl-result { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 36px); }
.tl-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.tl-result-title h2 { margin: 12px 0 8px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.tl-for { margin: 0; color: var(--ink-2); font-size: 14.5px; word-break: break-word; }
.tl-ring { position: relative; width: 104px; height: 104px; flex: 0 0 auto; display: grid; place-items: center; }
.tl-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tl-ring circle { fill: none; stroke-width: 9; }
.tl-ring-bg { stroke: var(--surface-2, #EEF3F0); }
.tl-ring-fg { stroke: var(--neon, #1FA85C); stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.tl-ring-mid .tl-ring-fg { stroke: #E0A100; }
.tl-ring-bad .tl-ring-fg { stroke: #C8402E; }
.tl-ring b { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--deep); position: relative; }
.tl-ring small { position: absolute; bottom: 20px; font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.tl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 22px; }
.tl-fact { background: var(--surface-2, #F5F8F6); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.tl-fact small { display: block; font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 4px; }
.tl-fact b { font-size: 18px; font-weight: 700; color: var(--deep); letter-spacing: -.01em; word-break: break-word; font-variant-numeric: tabular-nums; }
.tl-fact-locked { display: flex; align-items: center; justify-content: space-between; border: 1px dashed var(--line); background: transparent; }
.tl-fact-locked b { color: var(--ink-3); }
.tl-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.tl-sec h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.tl-intro { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.tl-empty { margin: 0; color: var(--ink-3); font-size: 14px; }
.tl-items { display: grid; gap: 10px; }
.tl-item { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2, #F5F8F6); border-left: 4px solid var(--line); }
.tl-item.tl-high { border-left-color: #B3261E; }
.tl-item.tl-medium { border-left-color: #B45309; }
.tl-item.tl-low { border-left-color: #8B988F; }
.tl-item.tl-pass { border-left-color: #1FA85C; }
.tl-sev { font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.tl-high .tl-sev { color: #B3261E; }
.tl-medium .tl-sev { color: #B45309; }
.tl-pass .tl-sev { color: #157F4F; }
.tl-item b { display: block; font-size: 15px; color: var(--deep); word-break: break-word; }
.tl-item p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); word-break: break-word; }
.tl-item .tl-fix { color: #157F4F; }
.tl-item .tl-fix a { color: #157F4F; }
.tl-rows { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tl-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.tl-row:last-child { border-bottom: 0; }
.tl-row span { color: var(--ink-2); }
.tl-row b { color: var(--deep); font-weight: 600; word-break: break-word; }
.tl-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.tl-table th { text-align: left; font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2, #F5F8F6); white-space: nowrap; }
.tl-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); max-width: 360px; overflow-wrap: anywhere; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-url { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.tl-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.tl-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.tl-text { font-size: 15px; line-height: 1.65; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.tl-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); margin-left: auto; }

/* The lock box */
.tl-unlock { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-top: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 18px; background: var(--deep, #0C3A2A); color: #fff; }
.tl-unlock .mk-kicker { color: rgba(255,255,255,.78); }
.tl-unlock-copy h3 { margin: 12px 0 8px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.tl-unlock-copy p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.tl-unlock-form { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 18px; position: relative; }
.tl-unlock-form .label { color: #fff; }
.tl-unlock-row { display: flex; gap: 10px; }
.tl-unlock-row .input { flex: 1; min-width: 0; }
.tl-unlock-form .meta { color: rgba(255,255,255,.62); margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
.tl-unlock-form .tl-err { color: #FFC9BF; }

/* Pending verification */
.tl-pending-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mk a.btn-ghost.tl-ghost-light,.tl-ghost-light{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.mk a.btn-ghost.tl-ghost-light:hover,.tl-ghost-light:hover{color:#fff;background:rgba(255,255,255,.18)}
.tl-note{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:13.5px}

/* The email popup, inside the form */
.tl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,35,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tl-modal[hidden]{display:none}
.tl-modal-card{position:relative;width:min(580px,100%);background:var(--deep,#0C3A2A);color:#fff;border-radius:20px;padding:clamp(22px,3vw,34px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.tl-modal-card .mk-kicker{color:rgba(255,255,255,.78)}
.tl-modal-card h3{margin:12px 0 8px;font-size:clamp(20px,2.2vw,26px);color:#fff;letter-spacing:-.02em;line-height:1.2}
.tl-modal-card p{margin:0 0 14px;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55}
.tl-modal-card .label{color:#fff}
.tl-modal-card .meta{color:rgba(255,255,255,.62);margin:10px 0 0;font-size:12.5px;line-height:1.5}
.tl-modal-card .tl-err{color:#FFC9BF}
.tl-modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.tl-modal-x:hover{background:rgba(255,255,255,.2)}
body.tl-modal-open{overflow:hidden}
@media(max-width:560px){.tl-modal{align-items:flex-end;padding:0}.tl-modal-card{border-radius:20px 20px 0 0;width:100%}}

/* The popup's own colours: the card is deep green, so the kicker pill and the
   main button take the white treatment the hero uses. */
.tl-modal-card .mk-kicker,.tl-pending .mk-kicker{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);padding:7px 9px;border-radius:7px}
.tl-modal-card .btn-deep,.tl-pending .btn-deep{background:#fff;color:var(--deep,#0C3A2A);border-color:#fff;box-shadow:none}
.tl-modal-card .btn-deep:hover,.tl-pending .btn-deep:hover{background:#EEF5F1;color:var(--deep,#0C3A2A)}
.tl-modal-card .label,.tl-pending .label{color:#fff}
.tl-modal-card .tl-err{margin:0 0 10px}
.tl-step2 h3,.tl-step1 h3{color:#fff}
.tl-step2-email{color:#fff}
.tl-step2-links{display:flex;gap:10px;align-items:center;margin-top:14px;color:rgba(255,255,255,.5)}
.tl-link{background:none;border:0;padding:0;color:#fff;font:600 14px/1.4 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tl-link:hover{color:var(--neon,#35E27A)}
.tl-step2-busy{display:flex;align-items:center;gap:10px;margin:12px 0 0;color:#fff;font-weight:600}
.tl-spin-sm{width:22px;height:22px;border-width:3px}

/* Five digit boxes */
.tl-code{display:flex;gap:8px;margin:6px 0 0}
.tl-code input{width:52px;height:60px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:#fff;color:var(--deep,#0C3A2A);font:700 26px/1 var(--font-display);text-align:center;letter-spacing:0;caret-color:var(--deep,#0C3A2A);transition:border-color .15s ease,box-shadow .15s ease}
.tl-code input:focus{outline:0;border-color:var(--neon,#35E27A);box-shadow:0 0 0 4px rgba(53,226,122,.25)}
.tl-code.is-bad input{animation:tl-shake .35s ease}
.tl-code.is-bad input{border-color:#FFA08C}
@keyframes tl-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:400px){.tl-code{gap:6px}.tl-code input{width:44px;height:54px;font-size:22px}}

/* Building and failed */
.tl-building { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.tl-building h2 { margin: 10px 0 6px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tl-building p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.tl-spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--surface-2, #EEF3F0); border-top-color: var(--neon, #1FA85C); animation: tl-spin .9s linear infinite; flex: 0 0 auto; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-failed { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.tl-failed h2 { margin: 10px 0 8px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; }
.tl-failed p { margin: 0 0 16px; color: var(--ink-2); }

@media (max-width: 1000px) { .tl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .tl-unlock { grid-template-columns: 1fr; }
  .tl-unlock-row { flex-direction: column; }
  .tl-result-head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .tl-row { grid-template-columns: 1fr; gap: 2px; }
  .tl-sent { margin-left: 0; }
  .tl-building { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) { .tl-grid { grid-template-columns: 1fr; } .tl-facts { grid-template-columns: 1fr 1fr; } }