/* ===== Landing-page tweaks, layered over Third_files/styles.css ===== */

/* Header: brand glyph placeholder + primary nav (#1, #2) */
.brand-glyph { display: inline-grid; place-items: center; width: 34px; height: 34px; }
.brand-glyph svg { width: 34px; height: 34px; display: block; }

.header-right { display: flex; align-items: center; gap: 30px; }
.site-links { display: flex; gap: 26px; }
.site-links a {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  transition: color 140ms ease;
}
.site-links a:hover { color: var(--green-2); }

.login-link {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--green);
  transition: color 140ms ease;
}
.login-link:hover { color: var(--green-2); }

/* Hero: balance the two columns — headline fits one line per sentence,
   body copy sized down to the example's proportion, both top-aligned */
.hero {
  grid-template-columns: 1.1fr 0.9fr;
  gap: 52px;
  padding: 56px 72px 52px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.05rem);
  max-width: none;
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.hero .hero-copy { align-self: start; }
.hero .lead {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}
.hero .lead.compact {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  margin-top: 18px;
}

/* Hero: rule under headline + italic third line (#3, #4) */
.hero-rule {
  width: 54px;
  height: 2px;
  margin-top: 30px;
  background: var(--green-2);
  border-radius: 2px;
}
.hero h1 em { font-style: italic; }

/* Imagine: line icons in tinted circles + bold serif lead (#7, #8, #9) */
.imagine .icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green-2);
  background: rgba(40, 91, 59, 0.12);
  background: color-mix(in srgb, var(--green-2) 16%, transparent);
  font-size: 0;
}
.imagine .icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.imagine-lead {
  display: block;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--ink);
}

/* Closing: heading left, CTA right, italic second line (#14, #15, #16) */
.closing {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}
.closing h2 em { font-style: italic; }
.closing-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.button-large { width: 100%; min-height: 64px; font-size: 19px; border-radius: 14px; }
.closing-cta p { margin: 0; color: var(--muted); }

/* Footer: glyph chip + tagline (#17, #18) */
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2ebde;
  display: grid;
  place-items: center;
  flex: none;
}
.footer-chip svg { width: 26px; height: 26px; display: block; }
.footer-tagline { font-size: 14px; }

@media (max-width: 900px) {
  .closing { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .site-links { display: none; }
}