/* ============================================================================
   AVENLEO — HOME
   ----------------------------------------------------------------------------
   The signed-in landing screen: what this account is, what it earns, and the
   four places it can go next.

   What went, and why
   ------------------
   • THE BOOT SCREEN. A full-page overlay with a floating logo and a progress
     bar that was counting nothing. It delayed the first useful paint by half a
     second on every visit in order to look busy. A product that is ready shows
     you the product.

   • THE MARKETING HERO. A 48px headline with a rotating word in it, a pulsing
     ring around the logo and three "proof" chips. This page is behind a login —
     everybody reading it has already signed up. It now opens on the account's
     own figures, which is what somebody who has arrived actually wants.

   • THE GRADIENT CTA PANEL. Replaced by an ordinary card with one button in it.

   Layout only. Every surface below is a card / badge / button / summary from
   the component library, so the page reads as part of the same product.
   Media queries at the bottom.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   MASTHEAD — greeting, level, and the single primary action
   --------------------------------------------------------------------------- */
.home-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.home-head__id { min-width: 0; }
.home-head__greet {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}
.home-head__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  max-width: 56ch;
}
.home-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- the welcome bonus ---------------------------------------------------
   A strip above the figures, for the three days a new account has to deposit.
   Gold on the border rather than the fill: this page already has a gold reward
   figure directly underneath it, and two filled gold panels stacked would
   make neither of them mean anything. Removes itself the moment the bonus is
   released, expired, or was never granted — see home/index.js paintBonus. */
.home-bonus {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-accent-border);
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
}
.home-bonus[hidden] { display: none; }
.home-bonus__mark { flex: none; display: grid; place-items: center; color: var(--color-accent-strong); }
.home-bonus__mark .icon { width: 18px; height: 18px; }
.home-bonus__id { flex: 1; min-width: 0; }
.home-bonus__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-strong);
  letter-spacing: var(--tracking-tight);
}
.home-bonus__text { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); margin-top: 2px; }
.home-bonus__cta { flex: none; }

/* ---------------------------------------------------------------------------
   FIGURES — the account's own numbers, at the top, before anything else
   --------------------------------------------------------------------------- */
.home-figures {
  display: grid;
  /* Three, since the Locked figure was removed. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.home-figure {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--edge-highlight);
}
/* The balance is the one figure that gets emphasis, and it gets it with a
   left rule rather than a coloured panel. */
.home-figure--lead { border-left: 2px solid var(--color-primary); }
.home-figure__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.home-figure__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
}
.home-figure__value--earn { color: var(--color-accent-strong); }
.home-figure__foot { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: auto; }

/* ---------------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------------- */
.home-section { margin-top: var(--space-7); }
.home-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.home-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.home-section__sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }

/* --- how it works: four steps, as a list rather than four large cards ----- */
.home-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-1);
}
.home-step {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.home-step:last-child { border-right: none; }
.home-step__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}
.home-step__t { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.home-step__d { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }

/* --- what's inside: a compact link grid ---------------------------------- */
.home-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.home-feature {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.home-feature:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-2); }
.home-feature__ico {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-subtle);
}
.home-feature__ico .icon { width: 15px; height: 15px; }
.home-feature__body { min-width: 0; flex: 1; }
.home-feature__t { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.home-feature__d { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-snug); }
.home-feature__go { color: var(--color-text-faint); flex: none; margin-top: 7px; transition: color var(--dur-fast) var(--ease-out); }
.home-feature:hover .home-feature__go { color: var(--color-text-muted); }

/* --- the worked example -------------------------------------------------- */
.home-demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.home-demo__thread { display: flex; flex-direction: column; gap: var(--space-4); min-height: 220px; }
.home-demo__meter {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.home-demo__meter-title {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: var(--space-3);
}
.home-demo__hint {
  font-size: var(--text-xs); color: var(--color-text-faint);
  line-height: var(--leading-snug);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* --- closing ------------------------------------------------------------- */
.home-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.home-cta__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.home-cta__sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; max-width: 52ch; }
.home-cta__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  /* Two columns for three figures leaves a hole, and it leaves it here rather
     than only on a phone — this is the breakpoint that creates the two-column
     grid, so it is the breakpoint that has to say what happens to the odd one
     out. The lead figure takes the whole first row and the other two share the
     second: the same emphasis this grid already gives it at every width, spent
     on filling the row instead of leaving a gap beside it. */
  .home-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-figure--lead { grid-column: 1 / -1; }
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-step:nth-child(2) { border-right: none; }
  .home-step:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
  .home-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home-demo__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-head { gap: var(--space-4); }
  .home-head__actions { width: 100%; }
  .home-head__actions .btn { flex: 1; }
  /* The bonus strip stacks: two sentences and a button do not fit across a
     360px phone, and squeezing them turns the deadline into three words a
     line. The button goes full width under the text, where it is the obvious
     next thing rather than a cramped afterthought on the right. */
  .home-bonus { flex-wrap: wrap; }
  .home-bonus__id { flex: 1 1 100%; order: 2; }
  .home-bonus__cta { flex: 1 1 100%; order: 3; }
  /* The row arrangement is set at 1024 above and inherited here — this block
     only tightens it. Three across was the other option for a phone and it is
     wrong: the values are display-face at --text-2xl, and "$0.00" in a third of
     a 360px screen wraps or shrinks to something nobody reads. */
  .home-figures { gap: var(--space-2); }
  .home-figure { padding: var(--space-3); }
  .home-figure__value { font-size: var(--text-2xl); }
  /* The lead has a full row to itself, so its label, figure and footnote sit on
     one line each with room to spare — but the two beneath it are half-width and
     their footnotes are the longest text in the group. Left to wrap freely,
     "Free prompts left today" ran to three lines and pushed one card taller than
     its neighbour. */
  .home-figure__foot { font-size: var(--text-2xs); line-height: var(--leading-snug); }
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-step { border-right: none; border-bottom: 1px solid var(--color-border); }
  .home-step:last-child { border-bottom: none; }
  .home-step:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
  .home-features { grid-template-columns: minmax(0, 1fr); }
  .home-demo__thread { min-height: 0; }
  .home-cta__row { width: 100%; }
  .home-cta__row .btn { flex: 1; }
}