.printable-main { overflow: hidden; }
.printable-hero { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0 5.5rem; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.printable-cover { max-width: 450px; margin: 0 auto; padding: .75rem; border-radius: 1.75rem; background: #123f83; box-shadow: 16px 18px 0 var(--yellow), var(--shadow); transform: rotate(-1.5deg); }
.printable-cover img { width: 100%; border-radius: 1.15rem; }
.back-link { display: inline-block; margin-bottom: 1.25rem; color: #4b667b; font-weight: 700; text-underline-offset: 4px; }
.printable-copy h1 { max-width: 760px; font-size: clamp(3rem, 5.8vw, 5.6rem); }
.printable-lead { max-width: 680px; margin: 1.5rem 0; color: #405b70; font-size: clamp(1.08rem, 1.7vw, 1.25rem); }
.printable-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.printable-tags span { padding: .48rem .75rem; border-radius: 999px; color: var(--blue); background: var(--sky); font-size: .82rem; font-weight: 800; }
.printable-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.button-secondary { border: 1px solid var(--line); background: white; }
.button-secondary:hover { border-color: var(--green); }
.download-note { margin: 1rem 0 0; color: #64778a; font-size: .88rem; }
.printable-preview { padding: 5.5rem max(1rem, calc((100vw - 1180px) / 2)); background: var(--sky); }
.printable-section-heading { max-width: 770px; margin: 0 auto 2.5rem; text-align: center; }
.printable-section-heading h2, .printable-info h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4rem); }
.printable-section-heading > p:last-child { margin: 1rem auto 0; color: #49677b; font-size: 1.08rem; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.preview-grid figure { margin: 0; padding: .7rem .7rem 1rem; background: white; border-radius: 1.4rem; box-shadow: var(--shadow); }
.preview-grid img { width: 100%; border: 1px solid rgba(20, 51, 82, .1); border-radius: .95rem; }
.preview-grid figcaption { padding: .8rem .35rem 0; color: #49677b; font-weight: 700; text-align: center; }
.printable-info { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 6rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.printable-info article { padding: clamp(1.6rem, 4vw, 2.6rem); border: 1px solid rgba(20, 51, 82, .1); border-radius: 1.8rem; background: white; box-shadow: var(--shadow); }
.printable-info h2 { font-size: clamp(2rem, 3vw, 3rem); }
.printable-info ul { margin: 1.4rem 0 0; padding-left: 1.2rem; color: #49677b; }
.printable-info li + li { margin-top: .55rem; }
@media (max-width: 820px) { .printable-hero { grid-template-columns: 1fr; padding-top: 2.5rem; } .printable-copy { text-align: center; } .back-link { display: block; } .printable-lead { margin-left: auto; margin-right: auto; } .printable-tags, .printable-actions { justify-content: center; } .printable-cover { width: min(420px, 82%); order: 2; } .preview-grid { grid-template-columns: 1fr 1fr; } .preview-grid figure:last-child { grid-column: 1 / -1; width: calc(50% - .7rem); justify-self: center; } }
@media (max-width: 580px) { .printable-copy h1 { font-size: clamp(2.65rem, 13vw, 4rem); } .printable-cover { width: 88%; } .preview-grid, .printable-info { grid-template-columns: 1fr; } .preview-grid figure:last-child { grid-column: auto; width: auto; } .printable-actions .button { width: 100%; justify-content: center; } }