/* * Base — reset + default element styling built on tokens.css. * Loaded after tokens.css, before components.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--text-dark); background: var(--background); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--text-dark); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } @media (min-width: 768px) { h1 { font-size: var(--font-size-5xl); } } p { margin: 0 0 var(--space-4); color: var(--text-muted); } /* * Justified body copy sitewide, per request. Scoped to prose text * (paragraphs, list items, FAQ answers) rather than the whole * — headings, buttons, badges, and nav links are usually short/ * single-line, where justify has no visible effect anyway, but a * two-word wrapped heading justified full-width looks broken (huge * gaps), so headings are deliberately left out. `hyphens: auto` keeps * justified text from getting large, ugly gaps on narrower columns. */ p, li, .accordion-body { text-align: justify; hyphens: auto; } a { color: var(--visa-blue-secondary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--visa-blue-dark); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } hr { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; } /* Accessible focus ring — never remove focus outlines without replacing them. */ :focus-visible { outline: 2px solid var(--visa-blue-secondary); outline-offset: 2px; } /* Skip-to-content link for keyboard/screen-reader users, visible only on focus. */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--visa-blue); color: var(--white); padding: var(--space-2) var(--space-4); z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } ::selection { background: var(--visa-gold-light); color: var(--text-dark); } .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }