/* Public landing page. Shares the palette in styles.css; everything here is
   specific to a marketing page and never loaded by the application itself. */

body.landing { background: var(--panel); }

.site-head {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: 68rem; margin: 0 auto; padding: 1.1rem 1.5rem;
}
.site-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.site-brand img { width: 3.2rem; height: 3.2rem; object-fit: contain; }
.site-brand span { display: flex; flex-direction: column; }
.site-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .92rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav .btn { color: #fff; }
@media (max-width: 40rem) {
  .site-nav a:not(.btn) { display: none; }
  .site-brand img { width: 2.6rem; height: 2.6rem; }
}

.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

/* Hero: dark, so the mark and the gold read the way the logo intends. */
.hero { background: var(--noir); color: var(--cream); padding: 4.5rem 1.5rem 4rem; }
.hero-inner { max-width: 46rem; margin: 0 auto; }
.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 1.2rem; color: #fff;
}
.hero-lead { font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.65; color: #cfc9bd; max-width: 40rem; }
.hero-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero .btn-primary { background: var(--gold-bright); border-color: var(--gold-bright); color: #12151b; }
.hero .btn-primary:hover { background: #edc074; border-color: #edc074; }
.hero-note { font-size: .85rem; color: #9a948a; }

.strip { background: var(--bg); border-bottom: 1px solid var(--rule); }
.strip-inner {
  max-width: 68rem; margin: 0 auto; padding: 1.6rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
@media (max-width: 46rem) { .strip-inner { grid-template-columns: 1fr; gap: 1rem; } }
.strip-inner b { display: block; font-size: .95rem; }
.strip-inner span { display: block; font-size: .86rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }

.band { padding: 3.4rem 1.5rem; }
.band.alt { background: var(--bg); }
.band-inner { max-width: 68rem; margin: 0 auto; }
.band-inner.narrow { max-width: 46rem; }
.band h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 1.5rem;
  padding-bottom: .5rem; border-bottom: 3px solid var(--gold); display: inline-block;
}

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0;
         display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.4rem; }
@media (max-width: 46rem) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--noir); color: var(--gold-bright);
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
}
.steps b { display: block; font-size: 1.02rem; margin-bottom: .3rem; }
.steps p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

.grid-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.2rem; }
@media (max-width: 40rem) { .grid-two { grid-template-columns: 1fr; } }
.grid-two b { display: block; margin-bottom: .25rem; }
.grid-two p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* The honesty section earns its own treatment: it is the most persuasive
   thing on the page, and hiding it would defeat the point. */
.band.honest { background: #fdfaf3; border-top: 1px solid var(--warn-rule); border-bottom: 1px solid var(--warn-rule); }
.honest-lead { font-size: 1.05rem; color: var(--ink); margin-bottom: 1.2rem; }
.honest-list li { margin-bottom: .9rem; line-height: 1.65; color: var(--muted); }
.honest-list b { color: var(--ink); }

.cta { background: var(--noir); color: var(--cream); padding: 3.6rem 1.5rem; text-align: center; }
.cta h2 { border: 0; color: #fff; display: block; margin-bottom: .4rem; }
.cta p { color: #b8b2a7; margin-bottom: 1.5rem; }
.cta .btn-primary { background: var(--gold-bright); border-color: var(--gold-bright); color: #12151b; }

.site-foot { padding: 1.6rem 1.5rem; border-top: 1px solid var(--rule); }
.site-foot .band-inner { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.site-foot .sub { color: var(--faint); font-size: .84rem; margin-left: auto; }