:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #193c45; background: #fafbf8; font-synthesis: none; }
* { box-sizing: border-box; } body { margin: 0; } a { color: #155f59; text-underline-offset: 4px; } header, footer, main { max-width: 1200px; margin: auto; padding: 24px; } header { display: flex; align-items: center; gap: 32px; border-bottom: 1px solid #dce4df; } nav { display: flex; gap: 20px; flex-wrap: wrap; } header nav { flex: 1; } nav a { font-size: 14px; padding: 12px 0; } .brand { display: flex; align-items: center; text-decoration: none; font-size: 29px; font-weight: 700; letter-spacing: -.04em; } .brand img { object-fit: contain; margin-right: 8px; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border-radius: 9px; background: #184f45; color: white; text-decoration: none; font-size: 15px; font-weight: 600; } .button:hover { background: #236959; } .hero { max-width: 840px; padding: 80px 0 64px; } .eyebrow { color: #4a6d60; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } h1 { font-size: clamp(42px, 7vw, 78px); letter-spacing: -.06em; line-height: 1.05; margin: 20px 0 24px; } .hero > p:not(.eyebrow):not(.note) { font-size: 21px; line-height: 1.65; max-width: 740px; margin-bottom: 32px; color: #456067; } .note { font-size: 14px; color: #456067; } .reading { max-width: 760px; border-top: 1px solid #dce4df; padding: 24px 0 64px; } .reading section { margin: 32px 0; } h2 { font-size: 27px; line-height: 1.25; letter-spacing: -.025em; } .reading p, .price p { font-size: 17px; line-height: 1.8; color: #456067; } .prices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0 0 56px; } .price { padding: 24px; border: 1px solid #cdded4; border-radius: 18px; display: flex; flex-direction: column; background: white; } .price strong { font-size: 36px; } .price strong small { font-size: 14px; font-weight: normal; } .price p { flex: 1; font-size: 15px; } footer { border-top: 1px solid #dce4df; padding-bottom: 40px; font-size: 14px; } :focus-visible { outline: 3px solid #267faf; outline-offset: 4px; } .skip { position: absolute; left: 20px; top: -100px; background: white; padding: 14px; } .skip:focus { top: 12px; } @media (max-width: 900px) { header { flex-wrap: wrap; gap: 16px; } header nav { order: 3; flex-basis: 100%; gap: 16px; } header > .button { margin-left: auto; } .prices { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 550px) { header, footer, main { padding: 20px; } .hero { padding: 42px 0; } .hero > p:not(.eyebrow):not(.note) { font-size: 18px; } .prices { grid-template-columns: 1fr; } }