:root{
  --bg:#181c26;
  --bg-card:#202736;
  --accent:#ffcc66;
  --text:#d8dbe2;
  --radius:8px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
/* Utilities we can opt-in to without breaking existing inline styles */
.r01-container{max-width:1100px;margin:0 auto;padding:0 16px;}
.r01-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);}
.r01-btn{display:inline-block;border-radius:var(--radius);font-weight:700;padding:.8em 2em;text-decoration:none;}
.r01-accent{background:var(--accent);color:#181c26;}
.r01-muted{opacity:.9;color:var(--text);}
/* Optional centered info box (used by short disclaimer) */
.r01-notice{max-width:480px;margin:16px auto 0;border:1px solid #f39c12;background:#fff8e1;padding:10px 12px;border-radius:6px;text-align:center;font-size:.9em;color:#856404;}


/* === Vendor grid / Apple Home callout === */
.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-top: 0.75rem;
}
.vendor-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.vendor-card .logo-img {
  max-width: 120px;
  max-height: 46px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 8px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.vendor-name {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.apple-home-callout {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
}
.apple-home-icon {
  display: grid;
  place-items: center;
  color: #ffb74d; /* neutral warm accent for the icon */
}

@media (max-width: 640px){
  .apple-home-callout {
    grid-template-columns: 1fr;
  }
}


/* === Responsive tweaks === */
img, svg, video { max-width: 100%; height: auto; }
.container, .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (max-width: 640px){
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 1rem; }
  .cards { grid-template-columns: 1fr !important; }
}
/* spacing consistency */
.section { padding-top: 24px; padding-bottom: 24px; }
/* focus styles */
a:focus, button:focus { outline: 2px dashed rgba(255,255,255,.6); outline-offset: 2px; }