/* XOtavo shared additions (utilities + V27 components) — loaded by every page */
/* ---- V28 canonical palette: tavo-base.css loads after page CSS, so these win ---- */
:root{
  /* grounds */
  --white:#FFFFFF; --light:#FAFAFA; --line:#E8EAEE;
  --black:#0A0A0A; --dark:#111111;
  /* text on light ground */
  --ink:#0A0A0A; --text:#0A0A0A; --text2:#4B5563; --muted-ink:#6B7280;
  /* text on dark ground */
  --on-dark:#FFFFFF; --on-dark-2:#C9D5DC; --dim:#9FB0BA; --dim-2:#7F909B;
  /* accents */
  --cyan:#00C2FF; --cyan-dark:#00A6DE; --cyan-ink:#0E7490; --cyan-deep:#00171E;
  --red:#EF4444; --red-cta:#DC2626; --red-cta-hover:#B91C1C;
  --green:#22C55E; --yellow:#EAB308; --orange:#F97316;
  --green-ink:#15803D;
  --field:#FFFFFF; --field-line:#D7DBE0;
  --focus:#0E7490;
}

/* utility classes extracted from inline style attributes (CSP: no 'unsafe-inline') */
.u1{color:inherit;text-decoration:none}
.u2{width:240px;grid-template-columns:1fr}
.u3{color:#fff}
.u4{color:var(--cyan)}
.u5{color:var(--cyan);font-weight:700}
.u6{display:inline-block;margin-top:.9rem;color:var(--cyan-ink);font-weight:700;text-decoration:none;font-size:.92rem}
.u7{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.u8{color:var(--cyan)}
.u9{color:var(--cyan);font-weight:600}
.u10{color:var(--dim-2);font-size:1rem;margin:-0.4rem 0 1.2rem;letter-spacing:.5px}
.u11{color:var(--dim-2)}
.u12{color:var(--dim)}
.u13{color:var(--dim);font-style:normal}
.u14{color:#fff;text-align:left}
.u15{color:var(--cyan);font-size:1.3rem;font-weight:700}
.u16{color:var(--dim);font-size:1.1rem;margin-bottom:2rem}
.u17{text-align:left}
.u18{margin-top:1.6rem;font-size:.8rem;color:var(--muted-ink);text-align:center}
.u19{text-align:center}
.u20{max-width:900px;margin:0 auto 1rem;font-size:.82rem;line-height:2}
.u21{color:var(--red)}
.u22{color:var(--red);font-weight:700}
.u23{color:var(--dim-2);font-size:.78rem}
.u24{margin-top:1rem}
.u25{margin-top:.8rem;font-size:.85rem;color:var(--dim)}

/* ---- added in V27: a11y, FAQ, contact form states ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--cyan);color:var(--cyan-deep);
  padding:.7rem 1.2rem;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.faq-sec{padding:5rem 0;background:var(--light)}
.faq-sec .container{max-width:900px;margin:0 auto;padding:0 1.5rem}
.faq-sec h2{text-align:center;margin-bottom:2.5rem}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.6rem;margin-bottom:1rem}
.faq-item h3{font-size:1.05rem;margin-bottom:.5rem;color:var(--ink)}
.faq-item p{font-size:.95rem;color:var(--text2);margin:0}
.cf-msg{margin-top:.9rem;font-size:.92rem;line-height:1.5;min-height:1px}
.cf-msg:empty{margin:0}
.cf-ok{color:var(--green-ink);font-weight:600}
.cf-err{color:var(--red-cta);font-weight:600}
.cf-fine{margin-top:.8rem;font-size:.78rem;color:var(--muted-ink)}
.cf-fine a{color:inherit;text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .fade-up{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.legal-wrap{max-width:820px;margin:0 auto;padding:8rem 1.5rem 5rem}
.legal-wrap h1{font-size:2.1rem;line-height:1.2;margin-bottom:1rem;color:var(--ink)}
.legal-wrap h2{font-size:1.15rem;margin:2rem 0 .6rem;color:var(--ink)}
.legal-wrap p,.legal-wrap li{font-size:.96rem;color:var(--text2);margin-bottom:.8rem}
.legal-wrap ul{padding-left:1.3rem}
.legal-wrap .updated{font-size:.82rem;color:var(--muted-ink)}

/* V28 fix: the copyright line's Privacy Policy link had no colour rule and was
   rendering as the browser default blue on the black footer (2.2:1). */
footer a{color:var(--cyan);text-decoration:none}
footer a:hover{text-decoration:underline}

/* V28: no image may force a horizontal scrollbar. */
img{max-width:100%}

/* V28 fix: the scanner input + nowrap button could not fit side by side under
   ~520px, forcing ~33px of horizontal overflow on the whole homepage. */
@media (max-width:560px){
  .tavo-copy{min-width:0}
  .scan-bar{flex-direction:column;gap:.6rem}
  .scan-bar .btn{white-space:normal;width:100%}
}

/* V28: compact link index — replaces the long card grids on the homepage so the
   menu leads to real pages instead of scrolling one very long page. */
.svc-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.7rem;margin-top:.5rem}
.svc-index a{display:block;padding:.85rem 1.1rem;background:var(--white);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.96rem;
  transition:border-color .2s,transform .2s}
.svc-index a:hover,.svc-index a:focus-visible{border-color:var(--cyan-ink);transform:translateY(-2px)}
.svc-index a span{display:block;font-weight:400;font-size:.83rem;color:var(--text2);margin-top:.15rem}
.sec-more{text-align:center;margin-top:1.8rem}
.sec-more a{color:var(--cyan-ink);font-weight:700;text-decoration:none;font-size:.98rem}
.sec-more a:hover{text-decoration:underline}