/* Printable A4 poster */
.qr-page { background: var(--bg-2); }
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--outline); }
.toolbar-hint { margin: 0 auto; color: var(--text-3); font-size: 14px; text-align: center; }
@media (max-width: 600px) { .toolbar-hint { display: none; } .toolbar { justify-content: space-between; } }
.sheet-wrap { padding: 32px 16px 64px; display: flex; justify-content: center; }

.poster {
  --ink: #17112F;
  width: 210mm; height: 297mm; max-width: 100%;
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  border-radius: 6mm; overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 11, 94, .22);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (max-width: 830px) {
  .poster { height: auto; aspect-ratio: 210 / 297; }
}
.poster-head { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 16mm 12mm 13mm; background: radial-gradient(70% 90% at 0% 0%, rgba(255,79,216,.5), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(0,229,255,.4), transparent 60%), linear-gradient(160deg, #1A0B5E, #2F6BFF); }
.ph-blob { position: absolute; border-radius: 50%; border: 1.2mm dashed rgba(255,255,255,.18); }
.ph-blob.a { width: 120mm; height: 120mm; left: -40mm; top: -60mm; }
.ph-blob.b { width: 90mm; height: 90mm; right: -30mm; bottom: -50mm; border-style: solid; border-color: rgba(255,209,102,.25); }
.poster-logo { position: relative; width: 44mm; height: 44mm; border-radius: 12mm; box-shadow: 0 6mm 16mm rgba(0,0,0,.35); }
.poster-head h1 { position: relative; font-size: 24mm; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 7mm 0 2mm; }
.tagline { position: relative; font-size: 9.5mm; font-weight: 600; letter-spacing: -.02em; margin: 0; opacity: .95; }

.poster-body { flex: 1; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 10mm; padding: 10mm 14mm 6mm; }
.qr-box { display: flex; flex-direction: column; align-items: center; padding: 7mm 7mm 5mm; border-radius: 9mm; background: #F3F0FF; box-shadow: inset 0 0 0 .6mm #DCD6F4; }
.qr { width: 84mm; height: 84mm; background: #fff; border-radius: 4mm; padding: 4mm; display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr .qr-fallback { font-size: 5mm; text-align: center; color: var(--ink); }
.scan { display: flex; align-items: center; gap: 2.5mm; margin: 5mm 0 0; font-size: 8mm; font-weight: 800; letter-spacing: -.02em; }
.scan .ms { font-size: 9mm; color: #3446F5; }
.url { margin: 1mm 0 0; font-size: 4.6mm; font-weight: 600; color: #5E5780; letter-spacing: .02em; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; width: 100%; }
.benefits li { display: flex; flex-direction: column; gap: 3mm; padding: 5mm; border-radius: 6mm; background: #fff; box-shadow: inset 0 0 0 .5mm #E6E1FA; font-size: 4.2mm; line-height: 1.35; color: #4C4570; }
.benefits b { display: block; font-size: 4.9mm; color: var(--ink); margin-bottom: 1mm; letter-spacing: -.01em; }
.b-ico { width: 12mm; height: 12mm; border-radius: 4mm; display: grid; place-items: center; }
.b-ico .ms { font-size: 7mm; }
.i1 { background: #DFE3FF; color: #0E1A72; }
.i2 { background: #FFEFC9; color: #5A3B00; }
.i3 { background: #FFDDF4; color: #5E0F4C; }
.poster-foot { display: flex; justify-content: space-between; align-items: center; padding: 5mm 14mm 7mm; font-size: 4mm; color: #736B94; font-weight: 600; }
.poster-foot span { display: inline-flex; align-items: center; gap: 2mm; }
.poster-foot .ms { font-size: 5mm; color: #3DDC84; }

/* Fluid scaling on small screens: size everything relative to the poster width */
@media (max-width: 830px) {
  .poster { font-size: 2.4vw; }
  .poster-head { padding: 7vw 5vw 6vw; }
  .poster-logo { width: 20vw; height: 20vw; border-radius: 5.5vw; }
  .poster-head h1 { font-size: 11vw; margin: 3vw 0 1vw; }
  .tagline { font-size: 4.3vw; }
  .poster-body { gap: 4vw; padding: 4.5vw 5vw 2vw; }
  .qr-box { padding: 3vw 3vw 2.4vw; border-radius: 4vw; }
  .qr { width: 38vw; height: 38vw; padding: 1.8vw; border-radius: 2vw; }
  .scan { font-size: 3.6vw; margin-top: 2.2vw; }
  .scan .ms { font-size: 4vw; }
  .url { font-size: 2.1vw; }
  .benefits { gap: 2vw; }
  .benefits li { padding: 2.2vw; font-size: 1.9vw; border-radius: 2.6vw; gap: 1.4vw; }
  .benefits b { font-size: 2.2vw; }
  .b-ico { width: 5.4vw; height: 5.4vw; border-radius: 1.8vw; }
  .b-ico .ms { font-size: 3.2vw; }
  .poster-foot { padding: 2vw 5vw 3vw; font-size: 1.8vw; }
  .poster-foot .ms { font-size: 2.3vw; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .toolbar, .site-footer { display: none !important; }
  .sheet-wrap { padding: 0; display: block; }
  .poster { width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; page-break-after: avoid; break-after: avoid; }
}