.md-landing-shell { max-width: 1120px; } .md-landing-skip { position: fixed; top: -100px; left: 12px; z-index: 10; padding: 12px; border: 2px solid var(--navy); background: var(--white); } .md-landing-skip:focus { top: 12px; } .md-landing-header { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; padding: 24px 32px; text-align: left; } .md-landing-header .logo-tile { grid-row: 1 / 3; width: 80px; height: 80px; margin: 0; } .md-landing-header .brand-wordmark { align-self: end; margin: 0; padding: 4px 8px; font-size: 30px; } .md-landing-header .tag { margin: 0; align-self: start; padding: 4px 8px; font-size: 9px; letter-spacing: 1px; color: var(--cream); } .md-breadcrumbs { padding: 20px 32px 0; } .md-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; font: 15px/1.5 var(--font-code); } .md-breadcrumbs li + li::before { content: '/'; margin-right: 8px; } .md-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 36px 32px 44px; border-bottom: 3px solid var(--navy); } .md-eyebrow { margin-bottom: 12px; font: 10px/1.7 var(--font-display); text-transform: uppercase; letter-spacing: 1px; } .md-hero h1 { margin: 12px 0 20px; font-size: clamp(26px, 3.5vw, 42px); line-height: 1.35; letter-spacing: 0; text-transform: none; } .md-hero-copy { max-width: 560px; margin-bottom: 24px; font-size: 27px; line-height: 1.4; } .md-landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 12px 20px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font: 11px/1.5 var(--font-display); text-decoration: none; } .md-landing-primary { color: var(--white); background: var(--navy); box-shadow: 4px 4px 0 var(--blue); } .md-landing-button:hover { background: var(--blue); color: var(--white); } .md-entry-note { margin-top: 16px; font-size: 21px; line-height: 1.3; } .md-workflow { padding: 24px; border: 3px solid var(--navy); background: var(--white); box-shadow: 4px 4px 0 var(--blue); } .md-workflow ol { margin: 0; padding: 0; list-style: none; } .md-workflow li { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--cream); } .md-workflow b { display: block; margin-bottom: 8px; font: 10px/1.5 var(--font-display); } .md-workflow li p { font-size: 24px; line-height: 1.3; } .md-feature-section, .md-faq { padding: 32px; border-bottom: 2px solid var(--cream); } .md-section-heading h2, .md-file-section h2, .md-faq > h2, .md-bottom-cta h2 { display: block; margin: 0 0 16px; font-size: 21px; line-height: 1.5; letter-spacing: 0; text-transform: none; } .md-section-heading > p:last-child { margin-bottom: 28px; font-size: 25px; line-height: 1.35; } .md-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .md-feature { min-width: 0; padding: 24px; border: 2px solid var(--navy); background: var(--white); box-shadow: 3px 3px 0 var(--blue); } .md-feature h3 { margin-bottom: 16px; font-size: 13px; line-height: 1.6; text-transform: none; } .md-feature p { font-size: 24px; line-height: 1.4; } .md-file-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding: 32px; border-bottom: 2px solid var(--cream); background: var(--white); } .md-file-section p { font-size: 24px; line-height: 1.4; } .md-file-section p + p { margin-top: 16px; } .md-faq > h2 { margin-bottom: 24px; } .md-faq details { border-top: 1px solid var(--cream); } .md-faq summary { min-height: 48px; padding: 16px 24px 16px 0; font-size: 24px; line-height: 1.3; cursor: pointer; } .md-faq details p { padding: 0 0 20px; font-size: 23px; line-height: 1.4; } .md-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; } .md-bottom-cta p { font-size: 24px; line-height: 1.3; } .md-notices { padding: 0 32px 24px; font: 13px/1.6 var(--font-code); } @media (max-width: 700px) { .md-landing-header { padding: 20px; gap: 0 16px; } .md-landing-header .logo-tile { width: 64px; height: 64px; } .md-landing-header .brand-wordmark { font-size: clamp(18px, 4vw, 26px); letter-spacing: 1px; } .md-landing-header .tag { font-size: 8px; line-height: 1.8; } .md-breadcrumbs { padding: 16px 20px 0; } .md-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 20px 32px; } .md-hero h1 { font-size: clamp(24px, 6vw, 36px); } .md-hero-copy { font-size: 25px; } .md-feature-section, .md-faq, .md-file-section, .md-bottom-cta { padding: 28px 20px; } .md-feature-grid, .md-file-section { grid-template-columns: minmax(0, 1fr); } .md-feature { padding: 20px; } .md-bottom-cta { align-items: flex-start; flex-direction: column; } .md-notices { padding-inline: 20px; } } @media (max-width: 360px) { .md-landing-header .brand-wordmark { font-size: 16px; } }