/* Visual Network free tools (shared by every page). System fonts only: nothing is fetched from another site. */
/* Colours: the site's own tokens where it has them (site.css: --bg, --ink, --line, --accent), so the tool follows
   Visual Network's light and dark themes and its theme switch; the finding tags keep their own accessible colours. */
:root {
  --t-bg: var(--bg, #f7f7f5); --t-card: var(--bg, #ffffff); --t-text: var(--ink, #1a1d21); --t-muted: #464e5b;
  --t-border: #868e9a; --t-rule: var(--line, #d9dce1); --t-accent: var(--accent, #1d55b3); --t-accent-text: #ffffff; --t-focus: var(--accent, #1d55b3);
  --t-opp-bg: #e3f3e8; --t-opp-fg: #0d5527; --t-opp-edge: #2e7d46;
  --t-cau-bg: #fdf0d5; --t-cau-fg: #6b4300; --t-cau-edge: #a36a00;
  --t-ctx-bg: #eceef1; --t-ctx-fg: #3a4049; --t-ctx-edge: #6b7380;
  --t-error-bg: #fde8e8; --t-error-fg: #8a1414; --t-bar-yours: var(--accent, #1d55b3); --t-bar-typical: var(--ink, #1a1d21);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t-muted: #b6bdc7; --t-border: #7a838f; --t-accent-text: #0b1a33;
  --t-opp-bg: #12351f; --t-opp-fg: #b9edc9; --t-opp-edge: #5fbf80;
  --t-cau-bg: #3d2c07; --t-cau-fg: #f7d796; --t-cau-edge: #d9a640;
  --t-ctx-bg: #2a2e35; --t-ctx-fg: #d5d9df; --t-ctx-edge: #8a929e;
  --t-error-bg: #3f1414; --t-error-fg: #ffc9c9;
} }
:root[data-theme="dark"] {
  --t-muted: #b6bdc7; --t-border: #7a838f; --t-accent-text: #0b1a33;
  --t-opp-bg: #12351f; --t-opp-fg: #b9edc9; --t-opp-edge: #5fbf80;
  --t-cau-bg: #3d2c07; --t-cau-fg: #f7d796; --t-cau-edge: #d9a640;
  --t-ctx-bg: #2a2e35; --t-ctx-fg: #d5d9df; --t-ctx-edge: #8a929e;
  --t-error-bg: #3f1414; --t-error-fg: #ffc9c9;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.tool, .tool-offer { overflow-wrap: anywhere; }
.tool.wrap, .tool-offer.wrap { max-width: 50rem; }
.tool h1, .tool h2, .tool h3, .tool h4 { line-height: 1.25; margin: 1.5em 0 0.5em; }
.tool h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); margin-top: 1rem; }
.tool h2 { font-size: 1.35rem; }
.tool h3 { font-size: 1.15rem; }
.tool h4 { font-size: 1.05rem; margin-top: 0.4rem; }
.tool a, .tool-offer a { color: var(--t-accent); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--t-focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--t-card); color: var(--t-accent); padding: 0.5rem 0.75rem; z-index: 2; }
.skip:focus { left: 0.5rem; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.lead { font-size: 1.1rem; }
.privacy { border-left: 4px solid var(--t-opp-edge); padding: 0.25rem 0 0.25rem 0.75rem; }

.card { background: var(--t-card); border: 1px solid var(--t-rule); border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0.2rem; }
/* The site styles .steps as a numbered grid (number, then text); each step's words sit in one <span> so bold words
   stay in the text column (16 October 2026: "Performance" and "Search results" fell into the number column). */
.tool .steps { margin: 0; padding: 0; }
.hint { color: var(--t-muted); font-size: 0.93rem; }

.drop {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed var(--t-border); border-radius: 10px; padding: 2rem 1rem;
}
.drop:hover, .drop.dragover { border-style: solid; border-color: var(--t-accent); }
.drop:focus-within { outline: 3px solid var(--t-focus); outline-offset: 2px; }
.drop-title { display: block; font-weight: 650; font-size: 1.1rem; }
.drop-hint { display: block; color: var(--t-muted); margin-top: 0.25rem; }

.field { margin-top: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.optional { font-weight: 400; color: var(--t-muted); }
input[type="text"] {
  width: 100%; font: inherit; color: var(--t-text); background: var(--t-card);
  border: 1px solid var(--t-border); border-radius: 6px; padding: 0.55rem 0.65rem;
}
.field .hint { margin: 0.3rem 0 0; }

/* Not .status: the site styles that as a pill with a green dot (16 October 2026). */
.tool-status { font-weight: 600; min-height: 1.5em; margin-bottom: 0; }
.tool-status:empty { min-height: 0; margin: 0; }
.error { background: var(--t-error-bg); color: var(--t-error-fg); padding: 0.6rem 0.8rem; border-radius: 6px; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; margin: 0; }
.figure { border: 1px solid var(--t-rule); border-radius: 8px; padding: 0.5rem 0.7rem; }
.figure dt { color: var(--t-muted); font-size: 0.9rem; }
.figure dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.notes { color: var(--t-muted); padding-left: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.copy-status { color: var(--t-muted); }

.button {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
  background: var(--t-accent); color: var(--t-accent-text); border: 2px solid var(--t-accent); border-radius: 6px; padding: 0.45rem 0.9rem;
}
.button.secondary { background: transparent; color: var(--t-accent); }
.button.small { min-height: 36px; font-size: 0.93rem; padding: 0.3rem 0.7rem; }

.estimate { color: var(--t-muted); font-size: 0.93rem; }
.findings { list-style: none; padding: 0; margin: 0; }
.finding { border-left-width: 6px; }
.finding.tag-opportunity { border-left-color: var(--t-opp-edge); }
.finding.tag-caution { border-left-color: var(--t-cau-edge); }
.finding.tag-context { border-left-color: var(--t-ctx-edge); }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.tag { display: inline-block; font-size: 0.85rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; }
.tag.tag-opportunity { background: var(--t-opp-bg); color: var(--t-opp-fg); }
.tag.tag-caution { background: var(--t-cau-bg); color: var(--t-cau-fg); }
.tag.tag-context { background: var(--t-ctx-bg); color: var(--t-ctx-fg); }
.kind { color: var(--t-muted); font-size: 0.9rem; }
.label { font-weight: 700; margin: 0.8rem 0 0.2rem; }
.evidence, .todo { margin-top: 0; padding-left: 1.3rem; }
.caveat { border-left: 3px solid var(--t-cau-edge); padding-left: 0.6rem; }

.chart { margin: 0.5rem 0 1rem; }
.chart-row { padding: 0.5rem 0; border-top: 1px solid var(--t-rule); }
.chart-row:first-child { border-top: 0; }
.chart-label { margin: 0 0 0.25rem; font-weight: 600; }
.chart-line { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0; }
.bar { flex: 1 1 auto; width: 100%; min-width: 0; height: 14px; display: block; }
.chart-value { flex: 0 0 7.5rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bar-yours { fill: var(--t-bar-yours); }
.bar-typical { fill: none; stroke: var(--t-bar-typical); stroke-width: 2px; }

.table-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
caption { text-align: left; font-weight: 700; padding-bottom: 0.4rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--t-rule); vertical-align: top; }
thead th { border-bottom: 2px solid var(--t-border); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody th { font-weight: 500; min-width: 9rem; }

.tool-offer { border-top: 1px solid var(--t-rule); margin-top: 2.5rem; padding: 1rem 0 0; }
.offer { font-size: 1.05rem; font-weight: 600; }

@media (max-width: 30rem) {
  .chart-value { flex-basis: 6.5rem; }
  .card { padding: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Inline styles on the site, as classes here (the tool's policy allows no inline styles). */
.vn-sprite { position: absolute; }
.vn-foot-note { margin-top: var(--s3, 0.75rem); }

/* The site's "Book a consultation" button keeps its words on one line when the header is tight (16 October 2026: seen
   squeezed to one letter per line). */
.site-header .btn { white-space: nowrap; flex-shrink: 0; }

/* ---- Added for the other free tools (16 October 2026). Every rule below is scoped under .tool or .tool-offer, so
   the site's own classes (.card, .steps, .status, .lead, .hint) elsewhere on the page are not touched. ---- */
.tool textarea, .tool select, .tool input[type="url"], .tool input[type="email"], .tool input[type="tel"], .tool input[type="time"] {
  width: 100%; max-width: 100%; font: inherit; color: var(--t-text); background: var(--t-card);
  border: 1px solid var(--t-border); border-radius: 6px; padding: 0.55rem 0.65rem;
}
.tool textarea { resize: vertical; min-height: 6rem; }
.tool input[type="time"] { width: auto; min-width: 7.5rem; }
.tool code, .tool kbd, .tool .output { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.tool kbd { border: 1px solid var(--t-border); border-radius: 4px; padding: 0 0.25em; }
.tool .output { min-height: 14rem; }
.tool .output-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.tool form > .actions, .tool .card .actions { margin-top: 1rem; }
.tool fieldset { min-width: 0; }
.tool fieldset.group { display: block; }
.tool fieldset.group > legend, .tool .page-row > legend { font-weight: 700; font-size: 1.1rem; padding: 0 0.3rem; }
.tool .page-row { border: 1px solid var(--t-rule); border-radius: 8px; padding: 0.4rem 0.8rem 0.8rem; margin: 0 0 1rem; }
.tool .page-row .field:first-of-type { margin-top: 0.3rem; }
.tool .error ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.tool .error a { color: inherit; }
.tool .day-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--t-rule); }
.tool .day-row:first-child { border-top: 0; }
.tool .day-name { flex: 0 0 6.5rem; font-weight: 600; }
.tool .day-row label { font-weight: 400; }
.tool #copy-monday { margin-top: 0.6rem; }
.tool .count { font-variant-numeric: tabular-nums; font-weight: 600; }

.tool .advice { list-style: none; padding: 0; margin: 0.5rem 0; }
.tool .advice li { border-left: 4px solid var(--t-ctx-edge); padding: 0.3rem 0 0.3rem 0.7rem; margin: 0.5rem 0; }
.tool .advice li.advice-problem { border-left-color: var(--t-cau-edge); }
.tool .advice li.advice-good { border-left-color: var(--t-opp-edge); }

.tool .crawler-table { min-width: 40rem; }
.tool .bot-name { display: block; font-weight: 700; }
.tool .bot-operator, .tool .rule { display: block; color: var(--t-muted); font-size: 0.88rem; }
.tool .bot-what { display: block; margin-top: 0.2rem; }
.tool .kind-tag { display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 0 0.5rem; border-radius: 999px; border: 1px solid currentColor; }
.tool .kind-search { background: var(--t-opp-bg); color: var(--t-opp-fg); }
.tool .kind-training { background: var(--t-ctx-bg); color: var(--t-ctx-fg); }
.tool .verdict { display: block; font-weight: 700; }
.tool .verdict-yes { color: var(--t-opp-fg); }
.tool .verdict-no { color: var(--t-error-fg); }

.tool .tool-cards { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tool .tool-card { border: 1px solid var(--t-rule); border-radius: 10px; padding: 1rem 1.1rem; background: var(--t-card); }
.tool .tool-card h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.tool .tool-card p { margin: 0; }

/* The result preview: Visual Network's own design, not a copy of Google's page. Arial, as the width estimates use. */
.tool .serp { max-width: 40rem; font-family: Arial, Helvetica, sans-serif; }
.tool .serp-site { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.tool .serp-icon { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--t-ctx-bg); color: var(--t-ctx-fg); font-weight: 700; font-size: 0.85rem; border: 1px solid var(--t-rule); }
.tool .serp-where { display: flex; flex-direction: column; min-width: 0; }
.tool .serp-name { font-size: 0.875rem; color: var(--t-text); }
.tool .serp-url { font-size: 0.8rem; color: var(--t-muted); overflow-wrap: anywhere; }
.tool .serp-title { font-size: 1.25rem; line-height: 1.3; color: var(--t-accent); margin: 0.45rem 0 0.2rem; }
.tool .serp-desc { font-size: 0.875rem; line-height: 1.55; color: var(--t-muted); margin: 0; }

.tool-offer .tool-back { margin-top: 0.5rem; font-weight: 600; }

/* The Google review toolkit (16 October 2026). The QR code and the card are black on white in both themes, so phones
   read the code and the card looks as it will print. */
.tool .review-link { font-weight: 600; }
.tool .qr-box { width: min(100%, 16rem); margin: 0.5rem 0; }
.tool .qr-box svg, .tool .a6-qr svg { display: block; width: 100%; height: auto; }
.tool .reply-actions { margin-top: 0.4rem; }
.tool .a6-card {
  width: 105mm; max-width: 100%; aspect-ratio: 105 / 148; margin: 0.5rem 0 1rem; padding: 8mm 9mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2mm;
  background: #ffffff; color: #1a1d21; border: 1px dashed #9aa1ab; border-radius: 2px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.tool .a6-card p { margin: 0; }
.tool .a6-heading { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.tool .a6-qr { width: 62%; }
.tool .a6-prompt { font-size: 0.85rem; }
.tool .a6-business { font-size: 1.1rem; font-weight: 700; }
.tool .a6-link { font-size: 0.75rem; overflow-wrap: anywhere; color: #3a4049; }

/* Printing the card only: the page adds .vn-print-card to <body> for "Print the card" and removes it afterwards, so
   printing the page any other way is unchanged. */
@media print {
  body.vn-print-card > *:not(main), body.vn-print-card main.tool > *:not(#results),
  body.vn-print-card #results > *:not(#card-area), body.vn-print-card #card-area > *:not(#a6-card) { display: none !important; }
  body.vn-print-card, body.vn-print-card main.tool, body.vn-print-card #results, body.vn-print-card #card-area {
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: #ffffff !important; max-width: none !important;
  }
  body.vn-print-card #a6-card {
    width: 105mm; height: 148mm; max-width: none; aspect-ratio: auto; margin: 0; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.vn-print-card .a6-heading { font-size: 20pt; }
  body.vn-print-card .a6-prompt { font-size: 10pt; }
  body.vn-print-card .a6-business { font-size: 15pt; }
  body.vn-print-card .a6-link { font-size: 9pt; }
}

/* The service page planner (16 October 2026): radio and tick choices, and the plan. */
.tool .choices { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.tool .choice { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.tool .choice input { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; accent-color: var(--t-accent); }
.tool .choice label { font-weight: 400; margin: 0; cursor: pointer; }
.tool .plan-line { font-weight: 600; margin: 0 0 0.2rem; }
.tool .plan-section { border-top: 1px solid var(--t-rule); padding-top: 0.4rem; margin-top: 0.8rem; }
.tool .plan-section:first-of-type { border-top: 0; margin-top: 0; }
.tool .plan-order, .tool .plan-faqs { padding-left: 1.4rem; }
.tool .plan-faqs li { margin: 0.5rem 0; }
.tool .faq-hint { display: block; }
.tool .checklist { list-style: none; padding-left: 0; }
.tool .checklist li { position: relative; padding-left: 1.6rem; margin: 0.25rem 0; }
.tool .checklist li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 0.95em; height: 0.95em; border: 2px solid var(--t-border); border-radius: 3px; }
.tool .plan-fields { margin: 0; }
.tool .plan-fields dt { font-weight: 600; margin-top: 0.5rem; }
.tool .plan-fields dd { margin: 0.1rem 0 0; }

/* The email health check (16 October 2026): good / needs attention / risk tags, and the records read. */
.tool .tag.tag-good { background: var(--t-opp-bg); color: var(--t-opp-fg); }
.tool .tag.tag-attention { background: var(--t-cau-bg); color: var(--t-cau-fg); }
.tool .tag.tag-risk { background: var(--t-error-bg); color: var(--t-error-fg); }
.tool .tag.tag-optional { background: var(--t-ctx-bg); color: var(--t-ctx-fg); }
.tool .finding-good { border-left: 6px solid var(--t-opp-edge); }
.tool .finding-attention { border-left: 6px solid var(--t-cau-edge); }
.tool .finding-risk { border-left: 6px solid var(--t-error-fg); }
.tool .finding-optional { border-left: 6px solid var(--t-ctx-edge); }
.tool .finding h3 { margin-top: 0.4rem; }
.tool .eh-record { display: block; overflow-wrap: anywhere; margin: 0.15rem 0; }
.tool button:disabled { opacity: 0.6; cursor: progress; }