/* Image balance refinement: image two is intentionally more prominent. */
@media (min-width: 801px) {
  .feature-image img { width: 330px; }
  .showcase-image img { width: 320px; max-width: 100%; height: auto; margin-inline: auto; }
  .plans img { width: 320px; max-width: 100%; height: auto; margin-inline: auto; }
}

@media (max-width: 800px) {
  .feature-image img { width: 250px; }
  .showcase-image img { width: 250px; max-width: 100%; height: auto; margin-inline: auto; }
  .plans img { width: 250px; max-width: 100%; height: auto; margin-inline: auto; }
}

.showcase-image::before { display: none; }

/* A compact white-paper banner with a smaller illustration and tighter spacing. */
.whitepaper {
  min-height: 0;
  width: 100%;
  padding: 22px 28px;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 24px;
  border-radius: 0;
}
.whitepaper .paper-art { height: 115px; }
.whitepaper .paper-art::before { inset: 18px; }
.whitepaper .paper-lines { left: 27px; right: 22px; top: 62px; height: 30px; }
.whitepaper .paper-label { left: 20px; top: 23px; width: 30px; height: 30px; }
.whitepaper .paper-dot { width: 70px; height: 70px; right: -18px; bottom: -18px; }
.whitepaper .eyebrow { margin-bottom: 10px; }
.whitepaper .paper-copy h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.whitepaper .paper-copy > p:not(.eyebrow) { margin: 12px 0; font-size: .9rem; line-height: 1.55; }
.whitepaper .paper-points { gap: 6px; margin: 10px 0 12px; }
.whitepaper .paper-points span { padding: 6px 9px; font-size: .67rem; }
.whitepaper .button { padding: 12px 17px; font-size: .82rem; }
.whitepaper::before { display: none; }
.plans { padding-block: 60px; }
@media (max-width: 600px) {
  .whitepaper { padding: 20px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .whitepaper .paper-art { display: none; }
  .whitepaper .paper-copy h2 { font-size: 1.4rem; }
}

/* Center the popup in the viewport, in the browser's top layer. */
body.modal-open { overflow: hidden; }
dialog.modal { position: fixed; inset: 0; margin: auto; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; border: 0; padding: 20px; color: inherit; background: transparent; backdrop-filter: none; overflow: auto; }
dialog.modal:not([open]) { display: none; }
dialog.modal[open] { display: flex; align-items: center; justify-content: center; }
dialog.modal::backdrop { background: rgba(2,7,25,.78); backdrop-filter: blur(9px); }
dialog.modal .modal-card { flex: 0 1 430px; margin: auto; max-height: calc(100dvh - 40px); overflow-y: auto; }
.store-button .store-icon { width: 24px; height: 27px; display: block; object-fit: contain; flex-shrink: 0; }
.modal-close { min-width: 44px; min-height: 44px; }
.store-button:focus-visible, .modal-close:focus-visible, .modal-action:focus-visible { outline: 3px solid #4ce4ff; outline-offset: 4px; }
@media(max-width: 480px) { dialog.modal { padding: 16px; } dialog.modal .modal-card { padding: 42px 22px 28px; max-height: calc(100dvh - 32px); } .modal-card h2 { font-size: 1.5rem; } }