/* The static copy of a public page (scripts/prerender.mjs) inside #app, for visitors and crawlers
   that don't run JavaScript. In a browser that does, boot.js adds .js to <html> and the copy stays
   hidden until Vue replaces it, so nothing flashes or shifts; if the app hasn't started after a
   few seconds (a blocked bundle), the copy appears. */
.js .pr { visibility: hidden; max-height: 0; overflow: hidden; animation: pr-reveal 0s 4s forwards; }
@keyframes pr-reveal { to { visibility: visible; max-height: none; overflow: visible; } }

html:not(.js) { background: #0B0A0E; }
.pr { max-width: 980px; margin: 0 auto; padding: 0 16px 48px; color: #F4F2F8; background: #0B0A0E;
  font: 16px/1.6 "Archivo", system-ui, sans-serif; }
.pr a { color: #C4A1FB; }
.pr { position: relative; }
.pr-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: #F4F2F8; color: #0B0A0E !important; font-weight: 600; text-decoration: none; }
.pr-skip:focus { top: 12px; }
.pr h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; margin: 8px 0 12px; }
.pr h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.pr h3 { font-size: 1.05rem; margin: 0 0 4px; }
.pr p, .pr dd, .pr td { color: rgba(244, 242, 248, 0.78); }
.pr-header { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pr-header ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.pr-header ul ul { display: none; }
.pr-logo { font-weight: 750; font-size: 1.2rem; color: #F4F2F8 !important; text-decoration: none; }
.pr-logo span { font-size: 0.75rem; color: rgba(244, 242, 248, 0.6); }
.pr-kicker { margin-top: 40px; font: 500 0.75rem/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #C4A1FB !important; }
.pr-lede { font-size: 1.12rem; max-width: 62ch; }
.pr-btn { display: inline-block; padding: 10px 18px; background: #A855F7; color: #0B0A0E !important; font-weight: 650; text-decoration: none; }
.pr-btn--ghost { background: transparent; color: #F4F2F8 !important; border: 1px solid rgba(255, 255, 255, 0.3); }
.pr-points, .pr-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pr-points > li, .pr-plans > li { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1); }
.pr-crumbs ol { display: flex; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; font-size: 0.85rem; }
.pr-faq dt { font-weight: 650; margin-top: 16px; }
.pr-faq dd { margin: 4px 0 0; }
.pr table { width: 100%; border-collapse: collapse; }
.pr th, .pr td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pr-footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; }
.pr-footer ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 12px; padding: 0; }