/* The landing page.
   Loads on top of app.css, so it inherits the same brand tokens, buttons and
   masthead rather than redefining any of it. */

.site main { display:flex; flex-direction:column; }

.masthead-home { text-decoration:none; color:inherit; }
.masthead-home:hover .brand-text strong { color:var(--maroon); }

.masthead-nav { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.masthead-nav a {
  color:var(--ink-2); text-decoration:none; font-size:.88rem; font-weight:600;
}
.masthead-nav a:hover { color:var(--maroon); }
.btn-nav { color:#fff !important; }
.btn-nav:hover { color:#fff !important; }
@media (max-width:640px) {
  .masthead-nav a:not(.btn-nav) { display:none; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2rem 3rem; align-items:center; padding:4rem 0 3.5rem;
}
.eyebrow {
  margin:0 0 .9rem; font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--maroon);
}
.hero h1 {
  margin:0; font-size:clamp(2.4rem, 5.5vw, 3.6rem); line-height:1.06;
  font-weight:700; letter-spacing:-.01em;
}
.hero-lede {
  margin:1.15rem 0 0; font-size:1.08rem; line-height:1.62;
  color:var(--ink-2); max-width:52ch;
}
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.7rem; }
.hero-note { margin:1.1rem 0 0; font-size:.84rem; color:var(--ink-3); font-style:italic; }

.hero-mark { display:grid; place-items:center; }
.hero-mark img { width:min(100%, 17rem); height:auto; opacity:.92; }
@media (max-width:820px) {
  .hero { grid-template-columns:minmax(0,1fr); padding:2.75rem 0 2.5rem; }
  .hero-mark { display:none; }
}

/* ------------------------------------------------------------------ bands */
.band { padding:3.25rem 0; border-top:1px solid var(--hair); }
.band-head { max-width:62ch; margin-bottom:1.9rem; }
.band-head h2 { margin:0; font-size:clamp(1.6rem, 3.2vw, 2.1rem); font-weight:700; line-height:1.2; }
.band-head p { margin:.65rem 0 0; color:var(--ink-2); font-size:.98rem; line-height:1.6; }

/* --------------------------------------------------------------- features */
.feature-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15.5rem,1fr)); gap:1rem;
}
.feature {
  background:var(--surface); border:1px solid var(--hair); border-top:4px solid var(--maroon);
  border-radius:var(--radius); padding:1.35rem 1.4rem 1.5rem;
  box-shadow:var(--shadow);
}
.feature-sub {
  margin:0 0 .3rem; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--maroon);
}
.feature h3 { margin:0 0 .55rem; font-size:1.3rem; font-weight:700; line-height:1.2; }
.feature p { margin:0; font-size:.9rem; line-height:1.58; color:var(--ink-2); }

/* the same four brand tones the tool uses for these documents */
.feature-two { border-top-color:var(--ink); }
.feature-two .feature-sub { color:var(--ink-2); }
.feature-three { border-top-color:var(--silver); }
.feature-three .feature-sub { color:var(--ink-3); }
.feature-four { border-top-color:var(--maroon-deep); }
.feature-four .feature-sub { color:var(--maroon-deep); }

/* ------------------------------------------------------------------ steps */
.steps {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem,1fr)); gap:1.6rem 2rem;
  counter-reset:step;
}
.steps li { display:flex; flex-direction:column; gap:.5rem; }
.step-n {
  width:2.3rem; height:2.3rem; border-radius:50%; display:grid; place-items:center;
  background:var(--maroon); color:#fff; font-family:var(--serif);
  font-size:1.15rem; font-weight:700;
}
.steps h3 { margin:.2rem 0 0; font-size:1.15rem; font-weight:700; }
.steps p { margin:0; font-size:.92rem; line-height:1.58; color:var(--ink-2); }

/* ---------------------------------------------------------------- privacy */
.privacy {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem 3rem;
  background:var(--surface); border:1px solid var(--hair); border-left:4px solid var(--maroon);
  border-radius:var(--radius); padding:1.9rem 2rem; box-shadow:var(--shadow);
}
.privacy-text h2 { margin:0 0 .7rem; font-size:1.65rem; font-weight:700; line-height:1.2; }
.privacy-text p { margin:0 0 .8rem; font-size:.96rem; line-height:1.62; color:var(--ink-2); }
.privacy-text p:last-child { margin-bottom:0; }
.privacy-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.privacy-list li {
  position:relative; padding-left:1.7rem; font-size:.92rem; line-height:1.5; color:var(--ink);
}
.privacy-list li::before {
  content:"✓"; position:absolute; left:0; top:-.05em;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--maroon-wash); color:var(--maroon);
  display:grid; place-items:center; font-size:.68rem; font-weight:700;
}
@media (max-width:760px) {
  .privacy { grid-template-columns:minmax(0,1fr); padding:1.5rem 1.4rem; }
}

/* -------------------------------------------------------------------- cta */
.cta {
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
  flex-wrap:wrap; background:var(--maroon-wash);
  border-radius:var(--radius); padding:1.9rem 2rem;
}
.cta h2 { margin:0 0 .3rem; font-size:1.6rem; font-weight:700; }
.cta p { margin:0; color:var(--ink-2); font-size:.95rem; }

@media (prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} }