/* NetAnaliza - LATO tools for netanaliza.com (lato.css, build 2026-10-22)
   Styles for the inline Title Checker and the animated explainer (lato.js).
   Every selector starts with the mount attribute, so nothing leaks into the site.
   Fonts and colours come from site.css (Archivo, IBM Plex Mono, :root tokens);
   the fallbacks only matter if this file is used without site.css.
   Extra shades, used only where the site has no token:
     --lato-orange-ink #B84A0A  darker site orange for small text (5.2:1 on white)
     --lato-red / --lato-red-tint  the site's own error pair (.form-msg)          */

[data-lato-checker],
[data-lato-explainer] {
  --lato-ink: var(--ink, #0E2230);
  --lato-night: var(--night, #0A2130);
  --lato-night-2: var(--night-2, #0F2E42);
  --lato-muted: var(--muted, #4A5F6E);
  --lato-muted-dark: var(--muted-on-dark, #B8C9D4);
  --lato-ground: var(--ground, #F2F5F7);
  --lato-line: var(--line, #DCE4EA);
  --lato-field: var(--field, #C5D2DB);
  --lato-chip: var(--chip, #E3EFF6);
  --lato-blue: var(--blue, #06618F);
  --lato-blue-hover: var(--blue-hover, #04476A);
  --lato-orange: var(--orange, #F0651C);
  --lato-orange-hover: var(--orange-hover, #D9570F);
  --lato-orange-ink: #B84A0A;
  --lato-orange-tint: #FFF3EC;
  --lato-red: #8A2A10;
  --lato-red-tint: #FDECE4;
  --lato-white: var(--white, #FFFFFF);
  --lato-radius: var(--radius, 6px);
  --lato-font: var(--font, "Archivo", "Segoe UI", Arial, sans-serif);
  --lato-mono: var(--mono, "IBM Plex Mono", Consolas, "Courier New", monospace);
  display: block;
  max-width: 100%;
  min-width: 0;
  font-family: var(--lato-font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--lato-ink);
  text-align: left;
  overflow-wrap: break-word;
}
[data-lato-checker] *, [data-lato-checker] *::before, [data-lato-checker] *::after,
[data-lato-explainer] *, [data-lato-explainer] *::before, [data-lato-explainer] *::after { box-sizing: border-box; }

/* reset the few site rules that could reach inside (.page p, .card p, .panel ul ...) */
[data-lato-checker] .lato-c p, [data-lato-checker] .lato-c ul, [data-lato-checker] .lato-c li,
[data-lato-explainer] .lato-x p { margin: 0; padding: 0; max-width: none; list-style: none; border: 0; }

/* shared label chip, same look as the site's card chips */
[data-lato-checker] .lato-c .lato-chiplabel,
[data-lato-explainer] .lato-x .lato-chiplabel {
  display: inline-block; margin: 0; background: var(--lato-chip); color: var(--lato-blue);
  font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.3; padding: 6px 10px; border-radius: 4px;
}

/* ===================== Title Checker ===================== */
[data-lato-checker] .lato-c {
  max-width: var(--lato-max, 860px);
  background: var(--lato-white);
  border: 2px solid var(--lato-line);
  border-radius: var(--lato-radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
[data-lato-checker] .lato-c-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
[data-lato-checker] .lato-c .lato-c-h { font-weight: 800; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
[data-lato-checker] .lato-c .lato-c-sub { font-size: 17px; color: var(--lato-muted); }

[data-lato-checker] .lato-c-row { display: flex; flex-wrap: wrap; gap: 14px 16px; }
[data-lato-checker] .lato-c-col { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
[data-lato-checker] .lato-c-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-lato-checker] .lato-c-labelrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
[data-lato-checker] .lato-c-labelgrp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
[data-lato-checker] .lato-c-label { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--lato-ink); }
[data-lato-checker] .lato-c-pill {
  display: inline-block; background: var(--lato-ground); border: 1px solid var(--lato-line); border-radius: 999px;
  padding: 1px 10px; font-size: 13px; font-weight: 700; color: var(--lato-muted); line-height: 1.5;
}
[data-lato-checker] .lato-c-count {
  font-family: var(--lato-mono); font-weight: 600; font-size: 15px; color: var(--lato-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto;
}
[data-lato-checker] .lato-c-count[data-state="ok"] { color: var(--lato-blue); }
[data-lato-checker] .lato-c-count[data-state="bad"] { color: var(--lato-red); }

[data-lato-checker] .lato-c-input {
  display: block; width: 100%; min-width: 0; margin: 0;
  font: inherit; font-size: 17px; line-height: 1.45; color: var(--lato-ink);
  background: var(--lato-white); border: 2px solid var(--lato-field); border-radius: var(--lato-radius);
  padding: 11px 14px; min-height: 48px;
}
[data-lato-checker] .lato-c-input::placeholder { color: #6B7D8A; opacity: 1; }
[data-lato-checker] .lato-c-input:focus { border-color: var(--lato-blue); outline: none; box-shadow: 0 0 0 3px rgba(6, 97, 143, 0.25); }
[data-lato-checker] .lato-c-ta { resize: vertical; min-height: 84px; }
[data-lato-checker] .lato-c-select { cursor: pointer; }
[data-lato-checker] .lato-c-asin { font-family: var(--lato-mono); letter-spacing: 0.04em; max-width: 280px; }

[data-lato-checker] .lato-c-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0;
  font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--lato-ink);
  background: var(--lato-white); border: 2px solid var(--lato-field); border-radius: var(--lato-radius);
  padding: 10px 14px; min-height: 48px;
}
[data-lato-checker] .lato-c-toggle input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--lato-blue); cursor: pointer; }
[data-lato-checker] .lato-c-toggle:focus-within { border-color: var(--lato-blue); box-shadow: 0 0 0 3px rgba(6, 97, 143, 0.25); }

[data-lato-checker] .lato-c .lato-c-note { font-size: 15px; color: var(--lato-muted); }
[data-lato-checker] .lato-c .lato-c-note:empty { display: none; }
[data-lato-checker] .lato-c .lato-c-note[data-state="ok"] { color: var(--lato-blue); }

/* results */
[data-lato-checker] .lato-c-results { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-lato-checker] .lato-c .lato-c-verdict {
  display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; line-height: 1.35;
  padding: 12px 16px; border-radius: var(--lato-radius); border: 2px solid transparent;
}
[data-lato-checker] .lato-c .lato-c-verdict[data-state="ok"] { background: var(--lato-blue); color: var(--lato-white); }
[data-lato-checker] .lato-c .lato-c-verdict[data-state="warn"] { background: var(--lato-orange-tint); color: var(--lato-orange-ink); border-color: rgba(240, 101, 28, 0.45); }
[data-lato-checker] .lato-c .lato-c-verdict[data-state="bad"] { background: var(--lato-red-tint); color: var(--lato-red); border-color: rgba(138, 42, 16, 0.3); }
[data-lato-checker] .lato-c .lato-c-issues { display: flex; flex-direction: column; gap: 10px; }
[data-lato-checker] .lato-c .lato-c-issue {
  background: var(--lato-white); border: 2px solid var(--lato-line); border-left: 6px solid var(--lato-blue);
  border-radius: var(--lato-radius); padding: 12px 14px; min-width: 0;
}
[data-lato-checker] .lato-c .lato-c-issue[data-sev="b"] { border-left-color: var(--lato-red); }
[data-lato-checker] .lato-c .lato-c-issue[data-sev="w"] { border-left-color: var(--lato-orange); }
[data-lato-checker] .lato-c .lato-c-issue[data-sev="i"] { border-left-color: var(--lato-blue); }
[data-lato-checker] .lato-c .lato-c-sev { font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
[data-lato-checker] .lato-c .lato-c-issue[data-sev="b"] .lato-c-sev { color: var(--lato-red); }
[data-lato-checker] .lato-c .lato-c-issue[data-sev="w"] .lato-c-sev { color: var(--lato-orange-ink); }
[data-lato-checker] .lato-c .lato-c-issue[data-sev="i"] .lato-c-sev { color: var(--lato-blue); }
[data-lato-checker] .lato-c .lato-c-what { font-weight: 700; font-size: 17px; line-height: 1.35; margin-top: 3px; }
[data-lato-checker] .lato-c .lato-c-detail { font-size: 16px; line-height: 1.45; color: var(--lato-muted); margin-top: 2px; }
[data-lato-checker] .lato-c .lato-c-fragwrap { margin-top: 8px; }
[data-lato-checker] .lato-c-frag {
  display: inline-block; max-width: 100%; font-family: var(--lato-mono); font-weight: 500; font-size: 15px; line-height: 1.4;
  background: var(--lato-ground); border: 1px solid var(--lato-line); border-radius: 4px; padding: 2px 8px;
  color: var(--lato-ink); overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
}

/* CTA box, styled like the site's dark card */
[data-lato-checker] .lato-c-hook {
  background: var(--lato-night); color: var(--lato-white); border-radius: var(--lato-radius);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
[data-lato-checker] .lato-c .lato-c-hookh { font-weight: 800; font-size: 20px; line-height: 1.25; color: var(--lato-white); }
[data-lato-checker] .lato-c .lato-c-hookp { font-size: 17px; color: var(--lato-muted-dark); }
[data-lato-checker] .lato-c .lato-c-hooknote { font-size: 15px; color: var(--lato-muted-dark); }
[data-lato-checker] .lato-c-cta {
  display: flex; align-items: center; justify-content: center; text-align: center; align-self: flex-start;
  min-height: 52px; margin-top: 4px; padding: 14px 24px; border-radius: var(--lato-radius); border: 2px solid transparent;
  background: var(--lato-orange); color: var(--lato-white); font-family: var(--lato-font);
  font-weight: 800; font-size: 19px; line-height: 1.2; text-decoration: none; cursor: pointer;
}
[data-lato-checker] .lato-c-cta:hover, [data-lato-checker] .lato-c-cta:focus { background: var(--lato-orange-hover); color: var(--lato-white); text-decoration: none; }
[data-lato-checker] .lato-c-cta:visited { color: var(--lato-white); }

[data-lato-checker] .lato-c .lato-c-foot { font-size: 15px; line-height: 1.5; color: var(--lato-muted); }
[data-lato-checker] .lato-c .lato-c-foot b { color: var(--lato-ink); }

@media (max-width: 640px) {
  [data-lato-checker], [data-lato-explainer] { font-size: 16px; }
  [data-lato-checker] .lato-c { padding: 18px 16px; gap: 16px; }
  [data-lato-checker] .lato-c .lato-c-sub { font-size: 16px; }
  [data-lato-checker] .lato-c-hook { padding: 20px 16px; }
  [data-lato-checker] .lato-c-cta { align-self: stretch; width: 100%; }
  [data-lato-checker] .lato-c-asin { max-width: none; }
}

/* ===================== Explainer ===================== */
[data-lato-explainer] .lato-x {
  position: relative;
  max-width: var(--lato-max, 860px);
  background: var(--lato-white);
  border: 2px solid var(--lato-line);
  border-radius: var(--lato-radius);
  padding: clamp(16px, 4vw, 28px);
  overflow: hidden;
  overflow: clip;
}
[data-lato-explainer] .lato-x-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
[data-lato-explainer] .lato-x-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
[data-lato-explainer] .lato-x-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
[data-lato-explainer] .lato-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-family: var(--lato-font); font-weight: 700; font-size: 16px; line-height: 1.2;
  min-height: 44px; padding: 10px 16px; border-radius: var(--lato-radius); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
[data-lato-explainer] .lato-btn-dark { background: var(--lato-night); color: var(--lato-white); }
[data-lato-explainer] .lato-btn-dark:hover { background: var(--lato-night-2); }
[data-lato-explainer] .lato-btn-light { background: var(--lato-white); color: var(--lato-ink); border-color: var(--lato-field); }
[data-lato-explainer] .lato-btn-light:hover { border-color: var(--lato-night); }

[data-lato-explainer] .lato-x-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
[data-lato-explainer] .lato-x-market {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--lato-ground); border: 1px solid var(--lato-line); border-radius: 999px;
  padding: 5px 12px; font-weight: 700; font-size: 14px; line-height: 1.3;
}
[data-lato-explainer] .lato-x-modes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
[data-lato-explainer] .lato-x-seg { display: inline-flex; background: var(--lato-ground); border: 1px solid var(--lato-line); border-radius: 999px; padding: 3px; }
[data-lato-explainer] .lato-x-segbtn {
  margin: 0; border: 0; background: transparent; color: var(--lato-muted); cursor: pointer;
  font-family: var(--lato-font); font-weight: 700; font-size: 15px; line-height: 1.2;
  padding: 9px 15px; min-height: 40px; border-radius: 999px; white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
[data-lato-explainer] .lato-x-segbtn[aria-pressed="true"] { background: var(--lato-white); color: var(--lato-ink); box-shadow: 0 1px 3px rgba(14, 34, 48, 0.2); }
[data-lato-explainer] .lato-x-modenote { font-size: 14px; color: var(--lato-muted); text-align: right; }

[data-lato-explainer] .lato-x-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--lato-night); }
[data-lato-explainer] .lato-x-dot[data-tone="m"], [data-lato-explainer] .lato-x-dot[data-tone="3"] { background: var(--lato-blue); }
[data-lato-explainer] .lato-x-dot[data-tone="2"] { background: var(--lato-orange); }

[data-lato-explainer] .lato-x-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
[data-lato-explainer] .lato-x-pill {
  --tone: var(--lato-night); --tone-tint: rgba(10, 33, 48, 0.08); --tone-line: rgba(10, 33, 48, 0.25);
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid transparent; background: var(--lato-ground); color: var(--lato-muted);
  font-weight: 700; font-size: 14px; line-height: 1.2; transition: all .3s ease;
}
[data-lato-explainer] .lato-x-pill[data-tone="2"] { --tone: var(--lato-orange-ink); --tone-tint: rgba(240, 101, 28, 0.12); --tone-line: rgba(240, 101, 28, 0.4); }
[data-lato-explainer] .lato-x-pill[data-tone="3"] { --tone: var(--lato-blue); --tone-tint: rgba(6, 97, 143, 0.1); --tone-line: rgba(6, 97, 143, 0.3); }
[data-lato-explainer] .lato-x-pill[data-state="active"] { background: var(--tone); color: var(--lato-white); border-color: var(--tone); box-shadow: 0 6px 16px -6px var(--tone); }
[data-lato-explainer] .lato-x-pill[data-state="done"] { background: var(--tone-tint); color: var(--tone); border-color: var(--tone-line); }
[data-lato-explainer] .lato-x-pilln { font-weight: 800; }

[data-lato-explainer] .lato-x-cap { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; min-height: 26px; }
[data-lato-explainer] .lato-x-capdot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 0.55em; transition: background .3s ease, box-shadow .3s ease;
  background: var(--lato-night); box-shadow: 0 0 0 3px rgba(10, 33, 48, 0.12);
}
[data-lato-explainer] .lato-x-capdot[data-tone="2"] { background: var(--lato-orange); box-shadow: 0 0 0 3px rgba(240, 101, 28, 0.18); }
[data-lato-explainer] .lato-x-capdot[data-tone="3"] { background: var(--lato-blue); box-shadow: 0 0 0 3px rgba(6, 97, 143, 0.16); }
[data-lato-explainer] .lato-x-captext { font-size: clamp(16px, 2.4vw, 18px); font-weight: 500; color: var(--lato-muted); }

[data-lato-explainer] .lato-x-stage, [data-lato-explainer] .lato-x-result { position: relative; }
[data-lato-explainer] .lato-x-card { background: var(--lato-white); border: 2px solid var(--lato-line); border-radius: var(--lato-radius); padding: clamp(14px, 3.4vw, 18px); }
[data-lato-explainer] .lato-x-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
[data-lato-explainer] .lato-x-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lato-ink);
}
[data-lato-explainer] .lato-x-kicker-muted { color: var(--lato-muted); }
[data-lato-explainer] .lato-x-kicker-good { color: var(--lato-blue); margin-bottom: 8px; }
[data-lato-explainer] .lato-x-count { font-family: var(--lato-mono); font-weight: 500; font-size: 14px; color: var(--lato-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-lato-explainer] .lato-x-text { font-weight: 500; font-size: clamp(16px, 2.6vw, 19px); line-height: 1.55; color: var(--lato-ink); overflow-wrap: anywhere; word-break: break-word; }
[data-lato-explainer] .lato-x-brand { font-weight: 800; }

[data-lato-explainer] .lato-x-amazon { display: none; position: relative; opacity: 0; margin-top: 12px; }
[data-lato-explainer] .lato-x-kickrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
[data-lato-explainer] .lato-x-cutbadge {
  font-weight: 800; font-size: 12px; letter-spacing: 0.03em; line-height: 1.4; color: var(--lato-orange-ink);
  border: 1px solid rgba(240, 101, 28, 0.5); background: var(--lato-orange-tint); border-radius: 999px; padding: 2px 9px;
}
[data-lato-explainer] .lato-x-amzbox { background: var(--lato-ground); border: 2px solid var(--lato-line); border-radius: var(--lato-radius); padding: clamp(14px, 3.4vw, 18px); }
[data-lato-explainer] .lato-x-amztext { color: var(--lato-muted); }
[data-lato-explainer] .lato-x-scissors { color: var(--lato-orange-ink); margin: 0 2px; transform-origin: center; }
[data-lato-explainer] .lato-x-cutnum { color: var(--lato-orange-ink); font-weight: 800; font-size: 0.6em; margin-left: 1px; }
[data-lato-explainer] .lato-x-ovinline { color: var(--lato-muted); }
[data-lato-explainer] .lato-x-ovinline[data-cut] { color: var(--lato-orange-ink); }
[data-lato-explainer] .lato-x-ovbox {
  display: none; margin-top: 12px; background: var(--lato-ground); border: 2px dashed var(--lato-field);
  border-radius: var(--lato-radius); padding: 12px 14px; opacity: 0; transform: translateY(-8px);
}
[data-lato-explainer] .lato-x-ovlabel { font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lato-muted); margin-bottom: 6px; }
[data-lato-explainer] .lato-x-ovdump { font-size: clamp(15px, 2.4vw, 16px); line-height: 1.5; color: var(--lato-muted); overflow-wrap: anywhere; word-break: break-word; }
[data-lato-explainer] .lato-x-tags { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
[data-lato-explainer] .lato-x-tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid rgba(240, 101, 28, 0.5); background: var(--lato-orange-tint); color: var(--lato-orange-ink);
  font-weight: 700; font-size: 14px; line-height: 1.3; padding: 6px 11px; border-radius: var(--lato-radius);
  opacity: 0; transform: translateY(6px); transition: opacity .34s ease, transform .34s ease;
}
[data-lato-explainer] .lato-x-tagx { font-weight: 800; }

[data-lato-explainer] .lato-x-lato { display: none; position: relative; opacity: 0; margin-top: 12px; }
[data-lato-explainer] .lato-x-flylayer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
[data-lato-explainer] .lato-x-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 2px 16px; }
[data-lato-explainer] .lato-x-chip {
  display: inline-flex; align-items: center; position: relative; max-width: 100%;
  padding: 6px 11px; border-radius: var(--lato-radius); border: 1px solid var(--lato-line);
  background: var(--lato-ground); color: var(--lato-ink);
  font-weight: 600; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.15;
  opacity: 0; transform: translateY(8px);
  transition: opacity .34s ease, transform .34s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .26s ease;
}
[data-lato-explainer] .lato-x-chip.is-scored { border-color: var(--lato-blue); background: var(--lato-chip); box-shadow: 0 4px 12px rgba(6, 97, 143, 0.2); }
[data-lato-explainer] .lato-x-badge {
  position: absolute; left: 50%; top: -24px; transform: translate(-50%, 0);
  background: var(--lato-night); color: var(--lato-white); font-family: var(--lato-font);
  font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(14, 34, 48, 0.25);
  z-index: 9; pointer-events: none; direction: ltr;
}
[data-lato-explainer] .lato-x-fly {
  position: absolute; display: inline-flex; align-items: center; padding: 0 11px; margin: 0;
  border-radius: var(--lato-radius); border: 1px solid var(--lato-blue); background: rgba(6, 97, 143, 0.12); color: var(--lato-blue);
  font-family: var(--lato-font); font-weight: 600; white-space: nowrap; box-shadow: 0 8px 18px rgba(6, 97, 143, 0.24); z-index: 8;
}
[data-lato-explainer] .lato-x-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); gap: 12px; }
[data-lato-explainer] .lato-x-fcard { background: var(--lato-white); border: 2px solid var(--lato-line); border-radius: var(--lato-radius); padding: 14px 15px; min-width: 0; }
[data-lato-explainer] .lato-x-fhead { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 8px; flex-wrap: wrap; }
[data-lato-explainer] .lato-x-flabel { font-weight: 800; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.3; }
[data-lato-explainer] .lato-x-fmax { color: var(--lato-muted); }
[data-lato-explainer] .lato-x-fnum { font-family: var(--lato-mono); font-weight: 600; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--lato-muted); }
[data-lato-explainer] .lato-x-fnum [data-on] { color: var(--lato-blue); }
[data-lato-explainer] .lato-x-fcheck { opacity: 0; color: var(--lato-blue); font-weight: 800; }
[data-lato-explainer] .lato-x-field { font-weight: 600; font-size: clamp(16px, 2.4vw, 17px); line-height: 1.5; color: var(--lato-blue); overflow-wrap: anywhere; word-break: break-word; }
[data-lato-explainer] .lato-x-field-t { min-height: 3.4em; }
[data-lato-explainer] .lato-x-field-h { min-height: 4.6em; }
[data-lato-explainer] .lato-x-chunk { color: var(--lato-blue); border-radius: 3px; }
[data-lato-explainer] .lato-x-imps { display: none; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
[data-lato-explainer] .lato-x-imp {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid rgba(6, 97, 143, 0.35); background: var(--lato-chip); color: var(--lato-blue-hover);
  font-weight: 700; font-size: 14px; line-height: 1.3; padding: 5px 11px; border-radius: var(--lato-radius);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s ease, transform .3s ease;
}
[data-lato-explainer] .lato-x-impok { color: var(--lato-blue); font-weight: 800; }
[data-lato-explainer] .lato-x-imptag { color: var(--lato-blue); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
[data-lato-explainer] .lato-x-kept {
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
  text-align: center; font-weight: 800; font-size: clamp(16px, 2.4vw, 17px); line-height: 1.4; color: var(--lato-blue-hover); margin-top: 14px;
}
[data-lato-explainer] .lato-x-removeddemo { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
[data-lato-explainer] .lato-x-removedlabel { font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lato-muted); }
[data-lato-explainer] .lato-x-removed {
  display: inline-flex; align-items: center; border: 1px solid rgba(138, 42, 16, 0.35); background: var(--lato-red-tint); color: var(--lato-red);
  font-weight: 700; font-size: 13px; line-height: 1.3; padding: 4px 9px; border-radius: var(--lato-radius); text-decoration: line-through; opacity: 0;
}
[data-lato-explainer] .lato-x-compliance {
  opacity: 0; transform: scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px;
}
[data-lato-explainer] .lato-x-okbadge {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; text-align: center;
  background: var(--lato-blue); color: var(--lato-white); font-weight: 800; font-size: clamp(16px, 2.4vw, 17px); line-height: 1.3;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 22px -8px rgba(6, 97, 143, 0.55);
}
[data-lato-explainer] .lato-x-oktext { text-align: center; font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--lato-muted); max-width: 580px; }
[data-lato-explainer] .lato-x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@keyframes lato-badgePop { 0% { transform: translate(-50%, 5px) scale(.4); opacity: 0; } 60% { transform: translate(-50%, -3px) scale(1.14); opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes lato-snip { 0% { transform: rotate(0) scale(.6); } 40% { transform: rotate(-20deg) scale(1.18); } 60% { transform: rotate(9deg) scale(1.04); } 100% { transform: rotate(0) scale(1); } }
@keyframes lato-flash { 0% { box-shadow: 0 0 0 0 rgba(6, 97, 143, 0); } 30% { box-shadow: 0 0 0 4px rgba(6, 97, 143, 0.38); } 100% { box-shadow: 0 0 0 0 rgba(6, 97, 143, 0); } }
@keyframes lato-popbg { 0% { background: rgba(6, 97, 143, 0.22); } 100% { background: rgba(6, 97, 143, 0); } }

@media (max-width: 560px) {
  [data-lato-explainer] .lato-x-btns { width: 100%; margin-left: 0; }
  [data-lato-explainer] .lato-x-btns .lato-btn { flex: 1 1 auto; white-space: normal; }
  [data-lato-explainer] .lato-x-modes { width: 100%; align-items: stretch; }
  [data-lato-explainer] .lato-x-seg { display: flex; }
  [data-lato-explainer] .lato-x-segbtn { flex: 1 1 0; white-space: normal; min-height: 44px; padding: 8px 10px; }
  [data-lato-explainer] .lato-x-modenote { text-align: left; }
  [data-lato-explainer] .lato-x-pill { font-size: 13px; padding: 6px 11px; }
}

/* reduced motion: no transitions or keyframes; lato.js also jumps straight to the end state */
@media (prefers-reduced-motion: reduce) {
  [data-lato-explainer] *, [data-lato-explainer] *::before, [data-lato-explainer] *::after,
  [data-lato-checker] *, [data-lato-checker] *::before, [data-lato-checker] *::after {
    animation: none !important;
    transition: none !important;
  }
}