:root {
  --ink: #0b1e34;
  /* Accessible rose: 4.94:1 against the paper background. */
  --rose: #ab4d57;
  --paper: #f7f6f3;
  --muted: #647080;
  --rule: rgba(11, 30, 52, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 1260px; margin: auto; padding: 24px 42px 0; }
nav { display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); font-weight: 900; font-size: 1.45rem; letter-spacing: -.08em; text-decoration: none; }
.brand span { color: var(--rose); }
.login { color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; }
.login span, .button span { margin-left: .25rem; }

.hero { min-height: 660px; padding: 150px 0 110px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { color: var(--rose); font-size: .73rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 25px; text-transform: uppercase; }
h1, h2 { font-weight: 700; letter-spacing: -.065em; line-height: .94; margin: 0; }
h1 { font-size: clamp(3.7rem, 8.8vw, 8rem); max-width: 940px; }
h1 em { color: var(--rose); font-family: Georgia, serif; font-weight: 400; }
.lede { color: #48576a; font-size: 1.1rem; line-height: 1.65; margin: 42px 0 35px; max-width: 570px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.button { display: inline-block; font-size: .9rem; font-weight: 800; text-decoration: none; }
.primary { background: var(--ink); color: white; padding: 15px 21px; transition: background .2s ease, transform .2s ease; }
.primary:hover { background: var(--rose); transform: translateY(-2px); }
.text { color: var(--ink); padding: 15px 0; }

.principles { border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); }
.principles article { min-height: 305px; padding: 32px 32px 35px 0; }
.principles article + article { border-left: 1px solid var(--rule); padding-left: 32px; }
.number { color: var(--rose); font-size: .75rem; font-weight: 800; margin: 0 0 72px; }
.principles h2 { font-size: 1.65rem; letter-spacing: -.045em; line-height: 1.05; }
.principles article > p:last-child { color: #526174; font-size: .94rem; line-height: 1.55; margin: 17px 0 0; max-width: 310px; }

.closing { border-top: 1px solid var(--rule); padding: 130px 0 150px; }
.closing h2 { font-size: clamp(3rem, 6vw, 5.7rem); margin-bottom: 42px; }
footer { border-top: 1px solid var(--rule); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1176px; padding: 24px 0 32px; color: var(--muted); font-size: .78rem; }
footer a { color: inherit; text-decoration: none; }

.not-found { min-height: 100vh; display: grid; place-items: center; padding: 40px; }
.not-found main { max-width: 650px; }
.not-found h1 { font-size: clamp(3rem, 8vw, 6rem); }
.not-found main > p:not(.eyebrow) { color: var(--muted); margin: 24px 0 32px; }

@media (max-width: 720px) {
  .shell { padding: 22px 22px 0; }
  .hero { min-height: 590px; padding: 118px 0 78px; }
  .lede { font-size: 1rem; margin-top: 32px; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: auto; padding: 30px 0; }
  .principles article + article { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .number { margin-bottom: 45px; }
  .closing { padding: 85px 0 95px; }
  footer { margin: 0 22px; }
}