/* Round 1: the public pages, in the new palette.

   The first pass applied rule 10 ("no marketing furniture") to every page, so
   the home and business pages lost their margins, their heading sizes and the
   one solid button that says where to start. Rule 10 is about a working screen:
   a console does not need a hero. A page whose whole job is to explain the
   product does (owner, 2026-09-23).

   So these pages keep a column, a real headline and a primary button, and take
   the navy and blue of the rest of the round. */

.hero {
  padding: 2rem 0 1.4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-size: 1.9rem;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  max-width: 34ch;
}
.hero .lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #45505e;
  max-width: 58ch;
  margin: 0 0 1.1rem;
}

/* The way in is one solid button. Everything beside it is an outline. */
.hero .btn,
.hero .btn-lg {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: .92rem;
  padding: .5rem 1rem;
  border-radius: .3rem;
}
.hero .btn:hover, .hero .btn-lg:hover { background: var(--accent-deep); color: #fff; }
.hero .btn-outline {
  display: inline-block;
  font-size: .92rem;
  padding: .5rem 1rem;
  border: 1px solid #c8cdd4;
  border-radius: .3rem;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.hero .btn-outline:hover { background: #f3f5f7; }

/* Product cards: white panels on white, so they are drawn, not floated. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.8rem;
}
.product-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.product-card h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .55rem; }
.product-card p { margin: 0 0 .6rem; line-height: 1.55; }
.product-card p:last-child { margin-bottom: 0; }
.product-soon {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  background: #eceff2; color: #4b5563; border-radius: 999px; padding: .1rem .45rem;
  vertical-align: .12em; margin-left: .35rem;
}

/* A numbered list of steps, and the trust block, keep their air. */
.steps, .trust { padding-top: 1.4rem; border-top: 1px solid var(--border); margin-top: 1.6rem; }
.steps h2, .trust h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .7rem; }
.steps ol, .steps ul { line-height: 1.65; }
.steps li { margin-bottom: .35rem; }

/* The sign-in button is a product mark and keeps its own size, but it is never
   the width of a window. */
.blindid-btn--block { max-width: 26rem; }
form.stack-form, .console-form { max-width: 34rem; }

/* The test sign-in row, local only. */
.dev-quick-signin { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                    margin: .6rem 0 0; font-size: var(--fs-label); }