/* assets/home.css — the company hub.
 *
 * The homepage sells nothing. It says what ProtoQuiz is and routes you to one of three
 * places; each product page does its own selling. Three full-height lanes rather than a
 * card grid, because cards would make the three products look interchangeable and they
 * are not: two are paid products and one is a free public dataset. */

/* Restraint is the point. An oversized headline on an empty field reads as a
   consumer splash screen; a company front door states itself once, small and
   confident, and lets the three doors below carry the weight. */
/* The mark carries the welcome; the words stay small. An oversized headline on an
   empty field read as a splash screen, so the logo does the announcing instead. */
/* Short page: stretch main between nav and footer and centre the content in it, so a
   tall screen never ends in a blank band under the footer. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
#main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: clamp(8px, 1.5vh, 24px) 0; }
#main > * { width: 100%; box-sizing: border-box; }

.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 4vh, 48px) clamp(16px, 1.8vw, 26px) clamp(22px, 3.4vh, 40px);
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 24px);
}
.hero-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.hero h1 {
  font-size: clamp(24px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -0.026em;
  font-weight: 600; margin: 0 0 6px;
}
.hero p {
  font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.55;
  color: var(--ink-2); margin: 0; max-width: 62ch;
}

.lanes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px; margin: 0 auto; border-bottom: 1px solid var(--line);
}

.lane {
  padding: clamp(26px, 4vh, 44px) clamp(16px, 1.8vw, 26px);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
}
.lane:last-child { border-right: 0; }

/* Each lane carries its own hue via --lane / --lane-soft. Everything inside the lane --
   icon tile, checkmarks, CTA -- reads from those two, so a lane's colour is stated once
   and its parts cannot drift out of agreement. */
.lane-1 { --lane: var(--lane-1); --lane-soft: var(--lane-1-soft); }
.lane-2 { --lane: var(--lane-2); --lane-soft: var(--lane-2-soft); }
.lane-3 { --lane: var(--lane-3); --lane-soft: var(--lane-3-soft); }

.lane-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 13px; background: var(--lane-soft);
}

.lane-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 2px; color: var(--ink-3); margin-bottom: 8px;
}

.lane h2 {
  font-size: clamp(17px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.25; margin: 0 0 10px;
}

.lane > p { font-size: 13.5px; line-height: 1.58; color: var(--ink-2); margin: 0 0 13px; }

.lane ul {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.lane li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.lane li svg { flex-shrink: 0; }

.lane-spacer { flex-grow: 1; }

.lane-note {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}

.lane-cta {
  font-size: 13.5px; font-weight: 500; padding: 10px 16px; border-radius: 7px;
  text-align: center; background: var(--lane); color: var(--paper);
  /* Transparent border, not none: the ghost variant has a real 1px border, and without
     this the solid buttons sit 2px shorter and the row of three stops lining up. */
  border: 1px solid transparent;
  transition: filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.lane-cta:hover { filter: brightness(0.88); color: var(--paper); }
/* The census lane is free and public, not a purchase, so its CTA stays ghosted: the
   paid/free distinction is carried by weight, the three doors by hue. */
.lane-cta.ghost { background: transparent; color: var(--ink); border: 1px solid var(--lane); }
.lane-cta.ghost:hover { background: var(--lane-soft); color: var(--ink); filter: none; }

@media (max-width: 900px) {
  .hero { padding-left: clamp(16px, 5vw, 44px); padding-right: clamp(16px, 5vw, 44px); }
  .lanes { grid-template-columns: 1fr; }
  .lane { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px clamp(16px, 5vw, 44px) 36px; }
  .lane:last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 16px; }
}