:root { --ink: #182338; --blue: #1267a8; --navy: #10263d; --paper: #f7f8fa; --line: #d9e0e8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #dbeaf5; font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-shell { max-width: 1040px; min-height: 100vh; margin: auto; background: var(--paper); box-shadow: 0 0 36px rgba(22, 48, 72, .14); }
.hero { color: #fff; background: linear-gradient(135deg, #123553, #146da8); }
.hero-inner, .content { max-width: 900px; margin: auto; padding-left: 2rem; padding-right: 2rem; }
.hero-inner { position: relative; padding-top: 1.8rem; padding-bottom: 1.5rem; }
.brand { display: inline-block; line-height: 0; }
.brand img { display: block; width: 170px; height: 42px; }
.tagline { margin: .3rem 0 0; color: #cfe9fa; }
.site-nav { position: absolute; top: 2.25rem; right: 2rem; display: flex; gap: 1.1rem; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 600; }
.site-nav a:hover, .site-nav a:focus-visible { color: #bfeeff; text-decoration: underline; }
.menu-button { display: none; }
.content { padding-top: 2rem; padding-bottom: 3rem; }
.breadcrumb { margin: 0 0 .5rem; color: #627487; font-size: .9rem; }
.breadcrumb a { color: inherit; }
h1 { margin: 0 0 1.5rem; color: var(--navy); font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.12; }
h2, h3, h4 { color: #164f7b; line-height: 1.25; }
h2 { margin-top: 2.5rem; }
a { color: var(--blue); }
img { max-width: 100%; height: auto; }
img[src$="availableontheappstore_med.jpeg"] { width: 176px; height: auto; }
.legacy-content { overflow: hidden; }
.legacy-content .article, .legacy-content .pagelet, .legacy-content .callout, .legacy-content .graphic { margin: 1.5rem 0; }
.legacy-content .article { padding-bottom: 1.5rem; border-bottom: 2px solid #aebdcb; }
.legacy-content .article-summary, .legacy-content .RichTextElement { max-width: 72ch; }
.legacy-content .index-title { margin-bottom: .35rem; }
.legacy-content .index-title a { text-decoration: none; }
.legacy-content .continue-reading-link { font-weight: 650; }
.product-icon { display: block; border-radius: 22%; box-shadow: 0 3px 10px rgba(16, 38, 61, .2); }
.skrollan-product::after, .skrollan-product .article-summary::after { content: ""; display: block; clear: both; }
.skrollan-product > .product-icon { float: left; width: 180px; margin: .15rem 1.5rem .75rem 0; }
.article-summary .product-icon-link { float: left; display: block; margin: .15rem 1rem .6rem 0; }
.article-summary .product-icon { width: 104px; }
.legacy-content table { border-collapse: collapse; }
.legacy-content td { padding: .35rem .75rem .35rem 0; vertical-align: top; }
.legacy-content ul { padding-left: 1.25rem; }
footer { padding: 1.25rem 2rem; color: #d8e9f8; background: var(--navy); text-align: center; font-size: .9rem; }
footer p { margin: 0; }
@media (max-width: 700px) { .hero-inner, .content { padding-left: 1.15rem; padding-right: 1.15rem; } .hero-inner { padding-top: 1rem; padding-bottom: 1rem; } .brand img { width: 145px; height: auto; } .menu-button { display: block; position: absolute; top: 1.25rem; right: 1.15rem; color: #fff; background: transparent; border: 1px solid #a8d6f2; border-radius: .25rem; padding: .35rem .55rem; } .site-nav { position: static; display: none; margin-top: .75rem; flex-direction: column; gap: .35rem; } .site-nav.open { display: flex; } .tagline { margin-top: .8rem; } .content { padding-top: 1.4rem; } }