/* MyNurse marketing site layout (M0). Tokens only; no inline styles anywhere
   (CSP is style-src 'self' with no 'unsafe-inline'). */

body.site { padding-bottom: var(--space-16); }

.site-header {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--size-appbar); max-width: 1080px; margin-inline: auto;
}
.site-header .brand { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-h3); color: var(--color-text); text-decoration: none; }
.site-header .brand .logo { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.site-nav { display: none; gap: var(--space-4); }
.site-nav a { color: var(--color-text-2); text-decoration: none; font: var(--text-label); }
.site-nav a:hover { color: var(--color-text); }
@media (min-width: 840px) { .site-nav { display: inline-flex; } }

.hero { padding: var(--space-16) 0 var(--space-10); text-align: center; }
.hero .lead { max-width: 640px; margin-inline: auto; margin-top: var(--space-4); }
.hero .cta-row { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }

.section { padding: var(--space-10) 0; }
.section-tint { background: var(--color-surface); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-6); }

.trust-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.trust-block h2 { margin-top: 0; }
.trust-block .source { margin: var(--space-4) 0; }
.trust-block .source .label { font: var(--text-label); color: var(--color-text); }

.not-block { background: var(--color-surface-3); border-radius: var(--radius-lg); padding: var(--space-8); }
.not-block p { color: var(--color-text-2); }
.not-block strong { color: var(--color-text); }

.site-footer { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.site-footer .links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer .links a { color: var(--color-text-2); text-decoration: none; font: var(--text-body-sm); }
.site-footer .tagline { margin-top: var(--space-4); color: var(--color-text-3); font: var(--text-caption); }

.legal ol { padding-left: var(--space-6); }
.legal li { margin-bottom: var(--space-4); color: var(--color-text-2); }
.legal li strong { color: var(--color-text); }

.form-card { max-width: 440px; margin: var(--space-12) auto; }
.form-card .alt { margin-top: var(--space-4); text-align: center; }
/* The mark above a form card. These four pages are the only ones a person can
   land on straight from a link with no idea what MyNurse is, and the 28px mark
   in the header is small enough to read as decoration. At 48px it is the first
   thing on the page. Decorative: alt="" and aria-hidden, because the <h1>
   directly under it already names the page, and a screen reader announcing
   "MyNurse graphic, Sign in" twice is noise. */
.form-mark { display: block; margin: 0 auto var(--space-5); }

/* Phone pass (2026-09-24). These pages are the first thing a classmate opens,
   from a link, on a phone — so their links are thumb-sized too. Each rule
   only adds height around text that is already there. */
.site-header .brand { min-height: var(--size-hit); }
.form-card .alt {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--space-2);
}
.form-card .alt a { display: inline-flex; align-items: center; min-height: var(--size-hit); }
.site-footer .links { row-gap: 0; }
.site-footer .links a { display: inline-flex; align-items: center; min-height: var(--size-hit); }
/* The terms checkbox was the browser's 13px box; the label is its target too
   (for=), and the row is now a full 44px line. */
.checkbox-row { align-items: center; min-height: var(--size-hit); }
.checkbox-row input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); }
.checkbox-row > label { padding-block: var(--space-2); }
.checkbox-row > label a { display: inline-block; padding-block: var(--space-1); }
/* The 48px hero set "Everything for this semester, on one screen." in five
   lines on a 375px phone; the display size keeps it to three. */
@media (max-width: 599px) {
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .hero .hero-title { font: var(--text-display); letter-spacing: var(--track-display); }
}
.site-footer .links a { padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); }
/* Below 840 the header nav was hidden entirely, so a phone that landed on
   /install or /privacy had no way to sign in but the logo. Keep that one link. */
@media (max-width: 839px) {
  .site-nav { display: inline-flex; }
  .site-nav a:not([href="/signin"]) { display: none; }
  .site-nav a { display: inline-flex; align-items: center; min-height: var(--size-hit); padding-inline: var(--space-2); }
}