/* Landing page. Shares the brand tokens and logical-property discipline of the
   portal (UX principle 5): direction is a document attribute, never a stylesheet. */
body.landing main { max-width: 62rem; }

.hero { padding-block: 3rem 2rem; text-align: center; }
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.2; color: var(--deep-teal); margin-block-end: 0.75rem;
}
.lede { font-size: 1.12rem; color: #40514e; max-width: 42rem; margin-inline: auto; }
.btn { display: inline-block; text-decoration: none; }
.btn.big { padding: 0.8rem 1.6rem; font-size: 1.05rem; margin-block-start: 1rem; }
.fineprint { font-size: 0.85rem; color: #6b7772; margin-block-start: 1rem; }

.services { padding-block: 1rem 2rem; }
.services h2, .trust h2 { color: var(--deep-teal); }
.grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.svc {
  background: #fff; border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 1.1rem;
}
.svc h3 { margin-block-start: 0; color: var(--teal); font-size: 1rem; }
.svc p { margin-block-end: 0; font-size: 0.93rem; color: #40514e; }

.trust { padding-block: 1rem 2rem; }
.trust ul { padding-inline-start: 1.2rem; }
.trust li { margin-block: 0.5rem; color: #40514e; }

footer {
  border-block-start: 1px solid var(--stone);
  padding: 1.25rem; text-align: center; color: #6b7772; font-size: 0.88rem;
}