/**
 * How It Works — the guest banner.
 *
 * Six strips, one per VestMind product, alternating the landing's amber and
 * sky. Each is one of the landing's white windows: a white outline, rounded at
 * the head and open at the foot, standing on the banner's floor. They are set
 * in the order an investor meets the products — what they read, what they
 * might buy, what they own, what they should own, what they watch, what it is
 * all for — and their heads rise left to right, so the row reads as a journey,
 * and as growth, before any of it is read.
 *
 * Flat colour throughout, like the product banners: no washes, glows or fades.
 * The pill, the lede and the buttons are the product banner's own
 * (styles/product-banner.css), so this page opens in the same voice as
 * VestFolio, VestCall, VestFire and Lens.
 */

.hw-banner {
  --hw-sky: var(--pb-sky, #a9dcf6);
  --hw-sky-strip: #d3ecfb;
  --hw-amber: var(--pb-band, #e9a23b);
  --hw-ink: var(--pb-ink, #080b1a);
  --hw-text: var(--pb-text, #344260);
  /* How far each strip's head stands below the next one's. */
  --hw-rise: 18px;

  background: var(--hw-sky);
  box-sizing: border-box;
  color: var(--hw-ink);
  display: flex;
  flex-direction: column;
  margin: 0 calc(50% - 50vw);
  min-height: max(760px, 100vh);
  overflow: hidden;
  /* The sticky menu overlaps the top of the page here (how-it-works.css); the
     banner starts underneath it. */
  padding: 88px max(24px, var(--public-hero-copy-left, 7vw)) 0;
  position: relative;
}

body:has(.hw-banner) { overflow-x: clip; }

/* ── The head ─────────────────────────────────────────────────────────── */

.hw-head {
  align-items: end;
  display: grid;
  gap: 24px clamp(32px, 6vw, 96px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  padding: clamp(20px, 4vh, 44px) 0 0;
}

.hw-head .pb-kicker { margin-bottom: 20px; }

.hw-banner h1 {
  color: var(--hw-ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 4.4vw, 66px);
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0;
}
.hw-banner h1 mark { background: none; color: var(--pb-amber-text, #e0a13a); padding: 0; }

.hw-head__aside .pb-lede { max-width: none; }
.hw-head__aside .pb-actions { margin-top: 20px; }
.hw-head__aside .pb-cta { border: 0; cursor: pointer; }

/* A hairline under the head: where the journey starts on the left, where it
   leads on the right. */
.hw-axis {
  align-items: center;
  color: var(--hw-ink);
  display: flex;
  font-family: var(--font-body);
  font-size: 11px;
  gap: 14px;
  letter-spacing: .16em;
  margin: clamp(20px, 3vh, 32px) 0 clamp(14px, 2.4vh, 22px);
  text-transform: uppercase;
}
.hw-axis i { background: #fff; flex: 1; height: 2px; position: relative; }
.hw-axis i::after {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  content: '';
  height: 8px;
  position: absolute;
  right: 0;
  top: -4px;
  transform: rotate(45deg);
  width: 8px;
}

/* ── The strips ───────────────────────────────────────────────────────── */

.hw-strips {
  align-items: stretch;
  display: grid;
  flex: 1;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  min-height: 430px;
  padding: 0;
}

.hw-strip {
  background: var(--hw-amber);
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-sizing: border-box;
  display: flex;
  /* The rise: the first strip stands lowest, the sixth highest. */
  margin-top: calc((6 - var(--hw-n)) * var(--hw-rise));
  transition: translate .35s cubic-bezier(.2, .8, .2, 1);
}
.hw-strip--sky { background: var(--hw-sky-strip); }
.hw-strip:nth-child(1) { --hw-n: 1; }
.hw-strip:nth-child(2) { --hw-n: 2; }
.hw-strip:nth-child(3) { --hw-n: 3; }
.hw-strip:nth-child(4) { --hw-n: 4; }
.hw-strip:nth-child(5) { --hw-n: 5; }
.hw-strip:nth-child(6) { --hw-n: 6; }

.hw-strip > a {
  color: inherit;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px clamp(14px, 1.4vw, 22px) 28px;
}
.hw-strip > a:focus-visible { outline: 3px solid var(--hw-ink); outline-offset: -8px; border-radius: 22px 22px 0 0; }
.hw-strip:hover { translate: 0 -8px; }

.hw-strip__top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 6px; }
.hw-strip__num {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 40px);
  letter-spacing: -.04em;
  line-height: 1;
}
.hw-strip__icon {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--hw-ink);
  display: inline-flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.hw-strip__icon svg {
  fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  stroke-width: 2; width: 20px;
}

.hw-strip__stage {
  color: var(--hw-ink);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hw-strip h2 {
  color: var(--hw-ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
}
/* Each strip takes the other strip's colour for its accent: white on amber,
   amber on sky, so the two colours interlock along the row. */
.hw-strip--amber h2 em { color: #fff; font-style: normal; }
.hw-strip--sky h2 em { color: var(--pb-amber-small, #c58c35); font-style: normal; }

.hw-strip__what { color: var(--hw-ink); font-size: 13px; line-height: 1.5; margin: 0; }

/* Where the product sits in the investor's world, set off by a white rule. */
.hw-strip__fit {
  border-top: 2px solid #fff;
  color: var(--hw-text);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 4px 0 0;
  padding-top: 12px;
}
.hw-strip--amber .hw-strip__fit { color: var(--hw-ink); }
.hw-strip__fit b {
  color: var(--hw-ink);
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.hw-strip__more {
  align-items: center;
  color: var(--hw-ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.hw-strip__more span { transition: transform .25s ease; }
.hw-strip:hover .hw-strip__more span { transform: translateX(4px); }

/* The strips rise into place one after another. CSS alone runs it, so a
   visitor without JavaScript sees the finished row. */
@media (prefers-reduced-motion: no-preference) {
  .hw-strip { animation: hw-rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--hw-n) * 90ms + 150ms); }
  .hw-head > * { animation: hw-fade .7s ease-out both; }
  .hw-head > :nth-child(2) { animation-delay: .12s; }
}
@keyframes hw-rise { from { transform: translateY(60%); } to { transform: translateY(0); } }
@keyframes hw-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Smaller screens ──────────────────────────────────────────────────── */

/* Six columns stop fitting their words below this width, so the row becomes
   a swipeable shelf: the strips keep their shape and their order. */
@media (max-width: 1180px) {
  .hw-head { grid-template-columns: minmax(0, 1fr); }
  .hw-head__aside { max-width: 640px; }
  .hw-strips {
    display: flex;
    flex: none;
    margin: 0 calc(max(24px, var(--public-hero-copy-left, 7vw)) * -1);
    min-height: 0;
    overflow-x: auto;
    padding: 12px max(24px, var(--public-hero-copy-left, 7vw)) 0;
    scroll-padding-inline: max(24px, var(--public-hero-copy-left, 7vw));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hw-strips::-webkit-scrollbar { display: none; }
  .hw-strip { flex: 0 0 min(280px, 74vw); min-height: 400px; scroll-snap-align: start; }
  .hw-banner { --hw-rise: 6px; min-height: 0; }
}

@media (max-width: 900px) {
  .hw-banner { padding-top: 72px; }
  .hw-banner h1 { font-size: clamp(38px, 10vw, 52px); }
}

@media (max-width: 480px) {
  .hw-head__aside .pb-actions > * { flex: 1 1 auto; justify-content: center; }
}