/* Request-access landing page. Uses the brand colours from Style/sass/_variables.scss. */
.landing { background: #fff; color: #3b3b3b; font-family: "Source Sans Pro", sans-serif; }
.landing h1, .landing h2, .landing h3 { font-family: "Source Serif Pro", serif; color: #607729; }
.landing-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #fff; border-bottom: 1px solid #e9efe1; }
.landing-header img { height: 44px; }
.landing-header a.login-link { color: #607729; font-weight: 600; text-decoration: none; }
.landing-form { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
.landing-form h2 { font-size: 1.5rem; margin-bottom: 4px; }
.landing-form .form-group { margin-bottom: 12px; }
.landing-form label { font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
.landing-form .form-check label { font-weight: 400; font-size: .9rem; }
.landing-section { padding: 56px 0; }
.landing-section.alt { background: #e9efe1; }
.landing-section h2 { font-size: 2rem; margin-bottom: 8px; }
.landing-section .intro { font-size: 1.1rem; max-width: 46rem; margin-bottom: 32px; }
.feature-card { background: #fff; border-radius: 16px; overflow: hidden; height: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.feature-card img { width: 70%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 22px auto 0; border-radius: 50%; max-width: 200px; }
.feature-card .body { padding: 16px 20px 22px; text-align: center; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.trial-list { list-style: none; padding: 0; margin: 0; }
.trial-list li { display: flex; gap: 14px; margin-bottom: 18px; }
.trial-list .icon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: #d0ebfb; color: #607729; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.trial-list strong { display: block; font-size: 1.05rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding: 0 0 22px 56px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: #607729; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps li strong { display: block; font-size: 1.05rem; }
.landing-note { background: #fdebd6; border-radius: 12px; padding: 16px 20px; }
.landing-footer { padding: 24px 0; text-align: center; font-size: .9rem; border-top: 1px solid #e9efe1; }
.landing-footer a { color: #607729; margin: 0 8px; }
/* The site stylesheet centres form labels and stacks checkboxes; keep this form left-aligned. */
.landing-form form, .landing-form label { text-align: left; }
.landing-form .form-group > label { display: block; }
.landing-form .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; }
.landing-form .form-check-input { flex: 0 0 auto; float: none; margin: 3px 0 0; }
.landing-form .form-check-label { display: block; }
.landing-header img { height: 56px; }
.landing-form .form-group { display: block; text-align: left; align-items: stretch; }
.landing-form .form-group.form-check { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; }
/* Compact hero: a slim photo band, not a full-screen image. */
/* Compact form */
.landing-form { padding: 20px 22px; }
.landing-form h2 { font-size: 1.3rem; }
.landing-form .form-group { margin-bottom: 0; }
.landing-form .row { margin-bottom: 10px; }
.landing-form .form-control { padding: 6px 10px; }
.landing-form .form-check { margin: 0 0 6px; }
.landing-form .form-check-label { font-size: .8rem; line-height: 1.35; }
.landing-form .btn { padding-top: 6px; padding-bottom: 6px; }

/* Hero. The photo has the children in the middle third and clear greenery either side,
   so on wide screens the headline sits left, the faces show in the middle and the form sits right.
   Narrower screens show the whole photo as a band, with the headline and form underneath. */
.landing-hero { position: relative; background: #607729; }
.hero-photo { background: url('/Image/landing-hero.jpg') center 30% / cover no-repeat; height: 33vw; max-height: 340px; }
.hero-grid { padding: 24px 16px 28px; }
.hero-text { color: #fff; margin-bottom: 20px; }
.hero-text h1 { color: #fff; font-size: 1.9rem; line-height: 1.15; margin-bottom: 10px; }
.hero-text .lead { color: #fff; font-size: 1.05rem; margin-bottom: 0; }
.hero-text ul { list-style: none; padding: 0; margin: 16px 0 0; color: #fff; font-size: 1rem; }
.hero-text li { padding-left: 30px; position: relative; margin-bottom: 6px; }
.hero-text li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #b2d092; color: #2d3a12; font-size: 13px; font-weight: 700; text-align: center; line-height: 22px; }
.hero-gap { display: none; }
@media (min-width: 768px) {
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px 32px; align-items: start; }
  .hero-text { margin-bottom: 0; }
}
@media (min-width: 1200px) {
  .landing-hero { background: #2d3a12; min-height: 380px; }
  .hero-photo { position: absolute; inset: 0; height: auto; max-height: none; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 35, 10, .8) 0%, rgba(20, 35, 10, .55) 22%, rgba(20, 35, 10, 0) 34%); }
  .hero-grid { position: relative; grid-template-columns: minmax(300px, 27%) 1fr minmax(380px, 29%); align-items: center; min-height: 380px; }
  .hero-gap { display: block; }
}