html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { overflow-wrap: break-word; }
button, input, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #ad842d; outline-offset: 5px; }
button { min-height: 44px; }
input[type="range"] { min-height: 32px; cursor: pointer; }
input[type="email"]::placeholder { color: #aaa8a2; opacity: 1; }
.vault-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.country-flag { width: 30px; height: 20px; flex: 0 0 30px; object-fit: contain; }
.selected-vault-photo { position: relative; min-height: 300px; align-self: stretch; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ticker-currency { margin-left: auto; color: oklch(0.72 0.01 85); }
.quote-status { color: oklch(0.85 0.01 85); font-size: 14px; line-height: 1.6; margin: 0; }
.quote-status:empty { display: none; }
.download-request { color: oklch(0.82 0.12 82); padding: 8px 0; }
header > div { flex-wrap: wrap; }
section, form, section div { min-width: 0; }
@media (max-width: 760px) {
  header { position: relative !important; }
  header > div { gap: 18px !important; }
  header nav { order: 3; width: 100%; margin: 0 !important; gap: 12px 20px !important; }
  header > div > div:last-child { margin-left: auto !important; }
  header a[href="#open"] { padding: 11px 12px !important; font-size: 12px !important; }
  section > div[style*="grid"] { gap: 30px !important; }
  #how div[style*="position: sticky"] { position: static !important; }
  .ticker-currency { margin-left: 0; }
  #vaults button { flex-wrap: wrap; }
  #vaults button > span { font-size: 9px !important; }
  #pricing div[style*="align-items: baseline"] { flex-wrap: wrap; }
  #quote-form { padding: 26px 20px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mobile refinements: safe areas, compact navigation and readable comparisons. */
.landing-page { padding-top: env(safe-area-inset-top, 0px); }
.comparison-row > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  header nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  .landing-page > div:first-child > div { padding-left: 18px !important; padding-right: 18px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 16px !important; }
  .landing-page > div:first-child > div::-webkit-scrollbar { display: none; }
  .ticker-item, .ticker-currency { flex: 0 0 auto; font-size: 9px !important; }
  .ticker-currency { margin-left: 0; }
  .partner-strip { align-items: flex-start !important; flex-direction: column; gap: 13px !important; padding: 20px 18px !important; }
  .partner-list { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px !important; font-size: 16px !important; line-height: 1.2; }
  .partner-list span { min-width: 0; overflow-wrap: anywhere; }
  .comparison-wrap { overflow: visible !important; border: 0 !important; }
  .comparison-table { min-width: 0 !important; width: 100%; }
  .comparison-head { display: none !important; }
  .comparison-row { grid-template-columns: minmax(0, 1fr) !important; border: 1px solid oklch(0.88 0.008 85); margin-bottom: 12px; font-size: 14px !important; }
  .comparison-row > div { padding: 10px 13px !important; }
  .comparison-label { background: oklch(0.93 0.01 85); font-weight: 600 !important; }
  .comparison-vr::before, .comparison-safe::before, .comparison-etf::before { display: block; margin-bottom: 3px; font: 9px/1.5 'IBM Plex Mono', monospace; letter-spacing: .1em; color: oklch(0.47 0.03 78); }
  .comparison-vr::before { content: 'VAULT REPUBLIC'; }
  .comparison-safe::before { content: 'HOME SAFE'; }
  .comparison-etf::before { content: 'GOLD ETF'; }
}