/* Poster design (Watch Don't Read): white typographic poster, heavy black rules, "Read." struck through, big numbered steps. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=IBM+Plex+Sans:wght@400;600&display=swap');

body.design {
    background: #ffffff;
    color: #111111;
    font: normal 16px/1.5 'IBM Plex Sans', Arial, sans-serif;
    padding: 0;
    border-top: 12px solid #111111;
}
.design #page { margin: 24px auto 40px; border-top: 4px solid #111111; }
.design-home #page { width: auto; padding: 0; margin: 0; background: transparent; border: 0; }
.design-home #affiliate-links { max-width: 1160px; margin: 0 auto 24px; padding: 0 32px; list-style: none; }
.design-home #affiliate-links li:first-child { display: none; }

.ps-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* Header */
.ps-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 16px; border-bottom: 4px solid #111111; }
.ps-brand img { display: block; max-height: 64px; max-width: 300px; border: 0; }
.ps-call { font-weight: 600; font-size: 18px; color: #111111; }
.ps-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 12px 0; border-bottom: 1px solid #111111; }
.ps-nav li { margin: 0; }
.ps-nav a { color: #111111; font-weight: 600; font-size: 15px; text-decoration: none; }
.ps-nav a:hover { color: #D6114F; }

/* Hero */
.ps-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; padding: 40px 0 32px; border-bottom: 4px solid #111111; }
.ps-intro { flex: 1 1 480px; }
.ps-intro h1 { font: 800 150px/.86 'Bricolage Grotesque', Arial, sans-serif; letter-spacing: -.04em; color: #111111; margin: 0 0 24px; text-shadow: none; }
.ps-intro h1 span { display: block; }
.ps-struck { color: #D6114F; text-decoration: line-through; text-decoration-thickness: 14px; }
p.ps-lead { font: normal 21px/1.5 'IBM Plex Sans', Arial, sans-serif; color: #111111; margin: 0 0 26px; max-width: 560px; }
.ps-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.ps-btn { display: inline-block; padding: 15px 26px; font-weight: 600; font-size: 19px; text-decoration: none; border: 2px solid #111111; }
.ps-btn-main { background: #111111; color: #ffffff !important; }
.ps-btn-outline { color: #111111 !important; }
.ps-btn:hover { opacity: .85; }
.ps-price { box-sizing: border-box; flex: 1 1 320px; max-width: 420px; border: 4px solid #111111; padding: 22px 24px; }
.price-box-title { font: 800 28px/1 'Bricolage Grotesque', Arial, sans-serif; text-transform: none; color: #111111; margin: 0 0 12px; }
p.ps-price-note { font: normal 15px/1.4 'IBM Plex Sans', Arial, sans-serif; color: #111111; margin: 12px 0 0; }

/* Steps */
.ps-steps { display: flex; flex-wrap: wrap; }
.ps-step { box-sizing: border-box; flex: 1 1 260px; display: flex; gap: 18px; padding: 26px 26px 26px 0; }
.ps-step + .ps-step { border-left: 1px solid #111111; padding-left: 26px; }
.ps-step-num { font: 800 72px/.8 'Bricolage Grotesque', Arial, sans-serif; color: #D6114F; }
.ps-step h3 { font: 600 20px/1.3 'IBM Plex Sans', Arial, sans-serif; color: #111111; margin: 0 0 6px; }
.ps-step p { font: normal 16px/1.5 'IBM Plex Sans', Arial, sans-serif; color: #111111; margin: 0; }

/* Footer */
.ps-footer { border-top: 4px solid #111111; padding: 20px 0; font-size: 14px; color: #111111; }
.ps-footer a { color: #111111; }
.ps-footer .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0 0 8px; }
.ps-footer .footer-details { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0; font: inherit; color: inherit; }

/* Narrow screens: a smaller poster headline. */
@media (max-width: 700px) {
    .ps-intro h1 { font-size: 96px; }
    .ps-step + .ps-step { border-left: 0; padding-left: 0; border-top: 1px solid #111111; }
}