.app-shell { max-width: 1200px; }
.supporting-content { max-width: none; }
.supporting-section { position: relative; z-index: 0; max-width: 960px; padding: 4.5rem 0; margin: 0 auto; }
.supporting-section::before { position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; background: var(--ojt-page); content: ""; transform: translateX(-50%); }
.supporting-section:nth-child(odd)::before { background: #fff; border-top: 1px solid var(--ojt-border); border-bottom: 1px solid var(--ojt-border); }
.qr-text { min-height: 10rem; resize: vertical; }
.color-control { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: center; }
.color-control .form-control-color { width: 3.25rem; height: 2.75rem; padding: .25rem; }
.qr-preview-panel { min-height: 100%; background: #f8f9fa; border: 1px solid var(--ojt-border); border-radius: .75rem; }
.qr-preview { display: grid; width: min(100%, 32rem); aspect-ratio: 1; margin-inline: auto; background: #fff; border-radius: .35rem; place-items: center; overflow: hidden; }
.qr-preview canvas, .qr-preview svg { display: block; width: 100%; height: 100%; }
.qr-placeholder { max-width: 17rem; padding: 2rem; color: var(--ojt-muted); text-align: center; }
.qr-placeholder-icon { display: block; margin-bottom: .75rem; font-size: 3rem; line-height: 1; }
.privacy-note { background: #eaf7f2; border: 1px solid #cceade; border-radius: .65rem; }
.download-actions .btn { flex: 1 1 9rem; }
.info-tooltip {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  color: #fff;
  background: var(--ojt-accent);
  border: 0;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  place-items: center;
}
.info-tooltip:hover { background: var(--ojt-accent-dark); }
.info-tooltip:focus-visible { outline: .2rem solid rgba(3, 173, 231, .35); outline-offset: .15rem; }
@media (max-width: 767.98px) { .supporting-section { padding: 3.5rem 0; } }