/* Vesica — the home page.
   The reference's landing page: a very large headline on the light ground, a
   wireframe form to its right, the dashed grid running the full height, then
   the one-vault-per-stock grid, a dark closing band and the footer.
   Everything sits in the 1160px container the header uses. */

.hm-nav-in {
  max-width: var(--wrap-head); margin: 0 auto; padding: 0 24px;
  height: var(--nav); display: flex; align-items: center; gap: 22px;
}
.hm-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.hm-links { margin: 0 auto; display: flex; align-items: center; gap: 2px; }
.hm-links a { padding: 6px 12px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: var(--muted); transition: color .15s, background .15s; }
.hm-links a:hover { color: var(--ink); }
.hm-links a.on { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.hm-nav-right { display: flex; align-items: center; gap: 9px; }

/* ---------- hero ---------- */

.hm-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* the dashed rules run the whole height of the light ground, as they do there */
.hm-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--dash) 0 1px, transparent 1px 128px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px);
  /* quieter than it was: the graph paper behind it now carries the rhythm */
  opacity: .45;
}
/* The form is absolutely placed rather than pushed around with negative
   margins: it has to sit behind the headline's right edge and stay there at
   every width, and a margin of -420px is the kind of thing that breaks the
   first time the copy changes length. */
.hm-hero-in {
  position: relative; max-width: var(--wrap-head); margin: 0 auto; padding: 54px 24px 58px;
  min-height: 620px;
}
.hm-hero h1 {
  position: relative; z-index: 1;
  margin: 0 0 22px;
  font-size: clamp(42px, 8vw, 126px); line-height: 1.02; font-weight: 600; letter-spacing: -.05em;
}
.hm-hero-copy { position: relative; z-index: 1; max-width: 64ch; }
.hm-hero-copy p { margin: 0 0 24px; font-size: 22.8px; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
/* the hero's pair carry the block, so they sit a size above the site default */
.hm-hero-copy .btn { height: 42px; padding: 0 20px; font-size: 15.5px; }
.hm-fine { font-size: 15.6px; line-height: 1.55; color: var(--muted); max-width: 62ch; margin: 0; }
.hm-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }


/* the wireframe form */
.hm-form { position: absolute; right: -6px; top: -34px; width: min(52vw, 800px); color: #C9C8CE; pointer-events: none; }
.hm-form svg { width: 100%; height: auto; }

/* ---------- one vault per stock ---------- */

.hm-strip { text-align: center; padding: 18px 24px; border-bottom: 1px solid var(--line); background: transparent; }
/* the eyebrow reads in ink and carries the accent as a rule under it, which
   is legible on this grey in a way pastel type on pastel grey never was */
.hm-strip .k {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-glow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.hm-stocks {
  max-width: var(--wrap-head); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.hm-stock { display: flex; align-items: center; gap: 13px; padding: 22px 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 18.2px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-stock:nth-child(5n) { border-right: 0; }
.hm-stock span { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.hm-stock svg { width: 15px; height: 15px; fill: currentColor; }
/* a ticker needs the room a glyph does not */
.hm-stock svg.mk-t { width: 26px; height: 26px; }

/* ---------- closing band ---------- */

.hm-cta { background: var(--band); color: var(--on-band); }
.hm-cta-in {
  max-width: var(--wrap-head); margin: 0 auto; padding: 54px 24px 58px;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); gap: 34px; align-items: center;
}
.hm-cta h2 { margin: 0 0 22px; font-size: 34.2px; line-height: 1.18; font-weight: 600; letter-spacing: -.03em; color: var(--yellow); max-width: 20ch; }
.hm-cta .hm-fine { color: var(--on-band-2); }
.hm-cta .hm-fine a { color: var(--on-band); }
.hm-cta-dia { color: var(--band-2); }
/* uncapped, this filled a phone's whole width and left the band mostly air */
.hm-cta-dia svg { width: 100%; max-width: 780px; height: auto; margin: 0 auto; }

.hm-figs {
  margin: 0 0 20px; display: grid; grid-template-columns: repeat(3, auto); gap: 30px;
  justify-content: start;
}
.hm-figs dt { font-size: 11.8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-band-2); }
.hm-figs dd { margin: 6px 0 0; font-size: 25.7px; font-weight: 600; letter-spacing: -.025em; color: var(--on-band); }

/* ---------- footer ---------- */

.hm-foot { border-top: 1px solid var(--line); background: var(--card); }
.hm-foot-in { max-width: var(--wrap-head); margin: 0 auto; padding: 34px 24px 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hm-foot-in .k { margin-bottom: 11px; }
.hm-foot-in a { display: block; padding: 4px 0; font-size: 12.8px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hm-foot-in a:hover { color: var(--accent); }
.hm-fine-foot { max-width: var(--wrap-head); margin: 0 auto; padding: 0 24px 30px; font-size: 12.3px; line-height: 1.6; color: var(--dim); }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hm-links { display: none; }
  .hm-hero-in { min-height: 0; }
  .hm-hero h1 { margin-bottom: 22px; font-size: 59.9px; }
  .hm-hero-copy { padding-top: 0; }
  .hm-form { position: static; width: min(100%, 420px); margin: 26px auto 0; }
  .hm-stocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-stock:nth-child(5n) { border-right: 1px solid var(--line); }
  .hm-stock:nth-child(3n) { border-right: 0; }
  .hm-cta-in { grid-template-columns: minmax(0, 1fr); }
  .hm-figs { gap: 22px; }
  .hm-foot-in { grid-template-columns: 1fr 1fr; }
  }
@media (max-width: 620px) {
  .hm-hero-in, .hm-nav-in, .hm-foot-in, .hm-fine-foot, .hm-cta-in { padding-left: 16px; padding-right: 16px; }
  .hm-hero h1 { font-size: 40.7px; }
  .hm-stocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-stock:nth-child(3n) { border-right: 1px solid var(--line); }
  .hm-stock:nth-child(2n) { border-right: 0; }
}


@media (max-width: 620px) { .hm-figs { grid-template-columns: repeat(2, auto); row-gap: 16px; } }

/* ---------- the fee loop ---------- */

.hm-cta-dia .fg-edges line { stroke: var(--band-2); stroke-dasharray: 3 4; }
.fg-hit { fill: transparent; }
.fg-a { fill: var(--pink); }
.fg-b { fill: var(--accent-lift); }
.fg-t { font-size: 11.2px; font-weight: 600; fill: var(--on-band); }
.fg-s { font-size: 7.3px; fill: var(--on-band-2); }
.fg-c { font-size: 7.7px; letter-spacing: .14em; fill: var(--on-band-2); font-weight: 600; }
.fg-c2 { letter-spacing: 0; font-weight: 400; font-size: 7.3px; fill: var(--band-2); }

.fg-node { cursor: default; }
.fg-node .fg-a, .fg-node .fg-b, .fg-node .fg-t, .fg-node .fg-s { transition: fill .18s, opacity .18s; }
/* Driven by a class rather than :hover — :hover on an SVG <g> does not match
   in Chrome when the pointer is over a child <text>, which is most of the
   node's area. The script sets .on from pointer events on the group. */
.fg-node { opacity: 1; transition: opacity .18s; }
.hm-cta-dia.dim .fg-node { opacity: .34; }
.hm-cta-dia.dim .fg-node.on { opacity: 1; }
.fg-node.on .fg-s { fill: var(--on-band); }
.fg-node.on .fg-a { fill: #FFE3FE; }
.fg-node.on .fg-b { fill: #F8F3C4; }