/* Home page only. Loaded after app.css, which owns the design tokens; nothing here redefines
   one. The transactional pages are a centred card on a short page and app.css sets `body` up
   for exactly that, so every layout rule below is scoped to `body:has(.home)` the way
   `body:has(.card-document)` already is. */

body:has(.home) {
  display: block;
  padding: 0;
  gap: 0;
}

.home {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* --- Header ------------------------------------------------------------------------------ */

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 4rem;
}

/* The wordmark carries its own light/dark fills (assets/brand/wordmark.svg), so it can stay an
   <img> and out of the markup. */
.home-wordmark {
  display: block;
  width: 9.5rem;
  height: auto;
}

.home-header-link {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.home-header-link:hover {
  color: var(--accent);
}

/* --- Hero -------------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  max-width: 34rem;
}

.home-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.home-lede {
  margin: 0 0 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-lede strong {
  color: var(--text-primary);
  font-weight: 600;
}

.home-instrument {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  /* --surface first, so the pill is still legible against --background if color-mix is not
     understood. */
  background: var(--surface);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 999px;
}

/* The headstock sits behind the hero on wide screens and is decorative — it carries no
   information the copy does not, so it is aria-hidden and the first thing to go when there is
   no room for it. */
.home-mark {
  position: absolute;
  top: -1.5rem;
  right: -14rem;
  width: 10rem;
  height: auto;
  opacity: 0.09;
  pointer-events: none;
}

@media (max-width: 62rem) {
  .home-mark { display: none; }
}

/* --- Store badge ------------------------------------------------------------------------- */

.home-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Apple's badge, unaltered. 3rem keeps it well above the 40px on-screen minimum, and the
   .home-cta gap (1rem) is more than the quarter-height clear space it asks for. */
.home-badge {
  display: inline-block;
  line-height: 0;
}

.home-badge img {
  display: block;
  width: auto;
  height: 3rem;
}

.home-cta-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* --- Sections ---------------------------------------------------------------------------- */

.home-section {
  margin-top: 4rem;
}

.home-section > h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.home-section-lede {
  max-width: 34rem;
  margin: 0 0 2rem;
  color: var(--text-secondary);
}

/* --- Steps ------------------------------------------------------------------------------- */

.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.home-step {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.home-step h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  color: var(--text-primary);
}

.home-step h3::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.8125rem;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
}

.home-step p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* --- Screenshots ------------------------------------------------------------------------- */

.home-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-shot {
  margin: 0;
}

/* The captures are not all the same height. Rather than crop them to a common ratio, let each
   keep its own and have the figures share the grid's rows, so the captions line up whatever the
   image above them does. Without subgrid each figure just stacks, which is the same layout a few
   pixels out of true — not worth a fallback. */
@supports (grid-template-rows: subgrid) {
  .home-shots {
    grid-template-rows: auto auto;
  }

  .home-shot {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.home-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.home-shot figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.home-shot figcaption strong {
  display: block;
  color: var(--text-primary);
}

/* --- Scored on ---------------------------------------------------------------------------- */

.home-measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-measure {
  padding-top: 0.85rem;
  border-top: 2px solid var(--accent);
}

.home-measure strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.home-measure span {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* --- Footer ------------------------------------------------------------------------------- */

.home-footer {
  max-width: 64rem;
  margin: 4rem auto 0;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.home-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-bottom: 1rem;
}

.home-footer-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.home-footer-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.home-footer p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.home-footer p:last-child {
  margin-bottom: 0;
}