/* Site shell. Shared primitives and tokens live in system.css. */
.header { background: #ffffff; border-bottom: 1px solid #dcebe8; padding: 24px 0; }
.header .wrap:after { content: ""; display: table; clear: both; }
.brand { display: inline-block; color: #1c2734; font-size: 24px; font-weight: bold; line-height: 1.3; text-decoration: none; }
.brand small { display: block; font-size: 12px; letter-spacing: .16em; font-weight: normal; }
.nav { clear: both; padding-top: 16px; }
.nav a { display: inline-block; min-height: 44px; padding: 10px 0; margin-right: 24px; color: #1c2734; font-size: 14px; text-decoration: none; }
.nav a:hover { color: #176d70; text-decoration: underline; }
.menu-toggle { display: none; float: right; min-height: 44px; background: #d9f5f1; color: #1c2734; border: 1px solid #176d70; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #1c2734; color: #ffffff; }
.js .menu-toggle { display: block; }
.js .nav { display: none; }
.js .nav.is-open { display: block; }
.hero { position: relative; overflow: hidden; background: #d9f5f1; border-radius: 24px; padding: 48px 24px; margin-top: 32px; }
.hero h1 { font-size: 44px; margin: 24px 0 16px; line-height: 1.3; }
.hero-copy { position: relative; z-index: 1; }
.hero p { max-width: 370px; }
.hero .button { margin: 8px 0 16px; }
.hero-art { display: block; width: 240px; height: auto; margin: 24px auto 0; }
.notice { padding: 24px 0; border-bottom: 1px solid #dcebe8; }
.notice strong { display: inline-block; margin-right: 24px; }
.split { background: #f5eff4; padding: 24px; border-radius: 16px; }
.footer { padding: 32px 0 96px; font-size: 12px; color: #546a70; }
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid #dcebe8; text-align: center; z-index: 5; }
.bottom-nav a { display: inline-block; width: 31%; min-height: 48px; padding: 12px 0; font-size: 12px; text-decoration: none; }
.bottom-nav a:hover { background: #d9f5f1; }
.guide-intro { padding: 48px 0 32px; }
.guide-intro h1 { margin-bottom: 16px; }
.guide-nav a { display: inline-block; min-height: 44px; padding: 8px 0; margin-right: 24px; }
.swatch { height: 80px; border: 1px solid #7b9296; border-radius: 8px; margin-bottom: 16px; }
.swatch--mint { background: #48c5c3; }
.swatch--light { background: #d9f5f1; }
.swatch--navy { background: #1c2734; }
.swatch--gold { background: #ffc978; }
.swatch--orange { background: #ffab45; }
.swatch--pink { background: #ebc3da; }
.swatch--white { background: #ffffff; }
.specimen { margin: 24px 0; }
.specimen > .alert { margin-bottom: 16px; }
.type-sample { margin-bottom: 16px; }
.guide-form { max-width: 640px; margin-top: 24px; }
@media (min-width: 640px) { .hero h1 { font-size: 64px; } }
@media (min-width: 920px) {
 .nav, .js .nav { display: block; clear: none; float: right; padding: 0; }
 .js .menu-toggle { display: none; }
 .nav a { margin: 0 0 0 24px; }
 .hero { padding: 64px 48px; min-height: 420px; }
 .hero-copy { width: 57%; }
 .hero-art { position: absolute; right: 24px; top: 32px; width: 34%; max-width: 350px; margin: 0; }
 .hero h1 { font-size: 72px; }
 .bottom-nav { display: none; }
 .footer { padding-bottom: 32px; }
}
@media print { .nav, .menu-toggle, .bottom-nav { display: none !important; } .hero { background: #ffffff; } .footer { padding-bottom: 0; } }