/* Layout of the home page: only grids, widths and vertical rhythm. It exists because the design
   system ships no page layout — its screens solve that with inline style in the JSX. */

/* ---------- Hero ---------- */
/* --mesh-height is the extension point the design system exposes: the layer's default is
   height:100%, which would tint the whole hero instead of its top third. */
.home-hero { --mesh-height: 470px; }

/* The layer cuts dead on reaching --mesh-height and the design system's blur is not enough to hide
   it: the mask fades it over the last 30% so it dies against the page. */
.home-hero .qf-mesh__layer {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* The mesh is extended by 48px and those same 48px are reclaimed with a negative margin (see
   .home-band--overlap). The two values have to stay the same number. */
.home-hero {
  padding-bottom: 48px;
  margin-bottom: -48px;
}

.home-hero__nav { padding-top: var(--space-lg); }

/* The same air above and below. The bottom one is ALL the space up to the next section — which is
   why .home-band--overlap adds no top padding. */
.home-hero__body {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* 700px is the copy block's width in the design; the lead stops earlier, at 560px. */
.home-hero__copy {
  max-width: 700px;
  display: grid;
  gap: 18px;
}

.home-hero__title { text-wrap: pretty; }

.home-hero__lead {
  max-width: 560px;
  color: var(--text-secondary);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-xs);
}

/* ---------- Bands and section headers ---------- */
.home-band {
  background: var(--surface-band);
  padding: var(--space-huge) 0;
}

/* The FIRST section only, the one touching the hero: it rides up over the mesh and paints no
   background of its own, so the gradient's tail is seen fading. The z-index keeps the text above the layer. */
.home-band--overlap {
  position: relative;
  z-index: 1;
  padding-top: 0;
  background: transparent;
}

.home-section__head {
  max-width: 620px;
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xxl);
}

.home-section__lead { color: var(--text-secondary); }

.home-eyebrow { color: var(--text-muted); }

/* ---------- Grids ---------- */
/* auto-fit and not 3 fixed columns: the grid rearranges itself when the number of cards changes. */
.home-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* The design leaves 16px of air below the body; .qf-card__body only carries margin-top. */
.home-tools .qf-card__body { margin-bottom: var(--space-lg); }

/* ---------- FAQ ---------- */
.home-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
}

.home-faq__intro {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

/* The button sits slightly further from the lead than the grid's gap, as in the design. */
.home-faq__cta { margin-top: var(--space-sm); }

.home-faq__list { border-top: 1px solid var(--border-hairline); }

.home-faq__item { border-bottom: 1px solid var(--border-hairline); }

/* The design uses a button with a +/− on the right. A native <details> gives the same behaviour with
   no JS; here the browser's little triangle is removed and the sign is drawn with ::after. */
.home-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--size-heading-md);
  font-weight: var(--weight-thin);
  line-height: var(--lh-heading-md);
  letter-spacing: var(--track-heading-md);
  color: var(--text-body);
  transition: color .15s ease;
}

.home-faq__item > summary::-webkit-details-marker { display: none; }

.home-faq__item > summary:hover { color: var(--text-link); }

.home-faq__item > summary::after {
  content: "+";
  flex: none;
  font-size: var(--size-caption);
  color: var(--text-muted);
}

.home-faq__item[open] > summary::after { content: "\2212"; }

.home-faq__item > p {
  margin: 0;
  padding: 0 48px 18px 0;
  max-width: 560px;
  color: var(--text-secondary);
}