/* Calm typography and spacing for the website (loaded last, after site.css and site-visual.css).
   One brand colour (the logo blue), moderate headings, lighter weights, smaller buttons, even image frames. */
:root { --brand: #0b4f9c; --brand-dark: #083d79; --ink: #14202e; --text: #3a4656; --muted: #66727f; --line: #e4e8ee; --soft: #f6f8fb; }

body { font-size: 15.5px; line-height: 1.65; color: var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.015em; }

/* headings: smaller and lighter everywhere */
.hero h1, .hero2 h1 { font-size: clamp(28px, 3.1vw, 40px) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -.02em !important; margin: 14px 0 14px !important; }
.page-hero h1, .page-h h1, .su-hero h1, .hbody h1 { font-size: clamp(25px, 2.5vw, 34px) !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: -.018em !important; }
.sec-h h2, .row h2, .own-wrap h2, .split h2, .ind2 h2 { font-size: clamp(21px, 2vw, 27px) !important; font-weight: 700 !important; line-height: 1.28 !important; }
.pain h2 { font-size: clamp(19px, 1.8vw, 23px) !important; font-weight: 700 !important; }
.band h2, .band.photo h2 { font-size: clamp(19px, 1.8vw, 23px) !important; font-weight: 700 !important; }
h3, .chap h3, .scard h3, .feat h3, .plan h3 { font-size: 16.5px; font-weight: 650; }
.su-form legend { font-size: 17px !important; font-weight: 700 !important; }

/* one brand colour instead of the blue-green gradient */
.grad { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--brand) !important; }

/* body copy */
.lead, .hero2 .lead, .page-hero .lead { font-size: 16.5px !important; line-height: 1.7 !important; color: var(--muted) !important; font-weight: 400; max-width: 600px; }
.sec-h p, .row p, .page-h p, .su-hero p { font-size: 15.5px !important; color: var(--muted) !important; line-height: 1.7; }
.sec-h { max-width: 720px; margin-left: auto; margin-right: auto; }
.sec-h .k, .k { font-size: 11.5px !important; letter-spacing: .08em; font-weight: 600 !important; }
.eyebrow { font-size: 12.5px !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.eyebrow { padding: 5px 12px !important; }

/* header: slimmer, calmer */
header.s-head, .s-head { box-shadow: none; border-bottom: 1px solid var(--line); }
.s-nav a { font-size: 14px; font-weight: 500; color: #3a4656; }
.s-nav a:hover, .s-nav a.on { color: var(--brand); }
.s-brand, .brand { font-size: 19px !important; }

/* buttons: smaller, quieter */
.s-btn { font-size: 14px !important; font-weight: 600 !important; height: 38px !important; padding: 0 16px !important; border-radius: 8px !important; box-shadow: none !important; }
.s-btn.lg { font-size: 14.5px !important; height: 44px !important; padding: 0 20px !important; }
.s-btn.pri { background: var(--brand) !important; border-color: var(--brand) !important; }
.s-btn.pri:hover { background: var(--brand-dark) !important; }

/* sections: even rhythm */
.sec { padding-top: 64px; padding-bottom: 64px; }
.page-hero { padding-top: 44px !important; padding-bottom: 36px !important; }

/* images: one frame style, softer shadows */
.pic img, .chap .im img, .scard .im img, .pain .pic img, .h-visual img { border-radius: 14px; }
.pic, .chap, .scard, .plan, .feat, .fcard, .ind2, .pain { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12) !important; }
.chap, .scard, .plan, .fcard { border-color: var(--line) !important; border-radius: 14px !important; }

/* numbers and prices */
.plan .pr b { font-size: 30px !important; font-weight: 700 !important; }
.calc .res b { font-size: 22px !important; font-weight: 700 !important; }

/* lighter weight where 800 was used */
.cmp thead .us, .fix .fh, .pp-b .pr { font-weight: 700 !important; }

@media (max-width: 760px) {
    body { font-size: 15px; }
    .sec { padding-top: 44px; padding-bottom: 44px; }
    .hero h1, .hero2 h1 { font-size: 27px !important; }
    .page-hero h1, .page-h h1 { font-size: 24px !important; }
    .sec-h h2, .row h2 { font-size: 21px !important; }
}

/* highlighted words in headings: the logo blue, no gradient */
h1 em, h2 em, h1 .grad, h2 .grad { font-style: normal !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
    -webkit-text-fill-color: var(--brand) !important; color: var(--brand) !important; }

/* long button labels wrap on phones instead of pushing the page sideways */
@media (max-width: 640px) {
    .s-btn, .s-btn.lg { white-space: normal !important; height: auto !important; min-height: 42px; padding: 9px 16px !important; text-align: center; max-width: 100%; line-height: 1.3; }
}