/* heyJengo closing, revision 04. Intentionally isolated from legacy footer rules. */
.hj-v4-closing,
footer.hj-v4-footer {
  --hj-v4-bg: #071327;
  --hj-v4-ink: #f6f9ff;
  --hj-v4-muted: #a9b8ce;
  --hj-v4-blue: #007bff;
  --hj-v4-light-blue: #83b9ff;
  --hj-v4-coral: #ff9a88;
  --hj-v4-rule: #29384c;
  background: var(--hj-v4-bg);
  color: var(--hj-v4-ink);
}
.hj-v4-wrap {
  width: min(1000px, calc(100% - 48px));
  margin-inline: auto;
}
.hj-v4-closing {
  padding: 88px 0 72px;
  border-radius: 40px 40px 0 0;
  overflow: clip;
}
.hj-v4-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.hj-v4-kicker {
  margin: 0 0 24px;
  color: var(--hj-v4-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.6px;
  line-height: 1.5;
}
.hj-v4-closing h2 {
  margin: 0;
  font-size: clamp(48px, 5.2vw, 68px);
  font-weight: 700;
  letter-spacing: -2.6px;
  line-height: 1.06;
}
.hj-v4-closing h2 span { color: var(--hj-v4-light-blue); }
.hj-v4-intro {
  max-width: 420px;
  margin: 24px 0 28px;
  color: var(--hj-v4-muted);
  font-size: 16px;
  line-height: 1.65;
}
.hj-v4-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hj-v4-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.hj-v4-button-primary { background: var(--hj-v4-ink); color: var(--hj-v4-bg); }
.hj-v4-button-primary:hover { background: #d9e8ff; }
.hj-v4-button-secondary { background: transparent; border-color: #53647c; color: var(--hj-v4-ink); }
.hj-v4-button-secondary:hover { background: #172940; border-color: #8eabc9; }
.hj-v4-button .icon { width: 17px; height: 17px; }
.hj-v4-conversation { position: relative; height: 320px; min-width: 0; }
.hj-v4-app-tile {
  position: absolute;
  top: 0;
  right: 28px;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  transform: rotate(9deg);
  box-shadow: 0 12px 32px #0003;
}
.hj-v4-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -3px;
}
.hj-v4-hello {
  top: 66px;
  left: 0;
  width: 258px;
  height: 136px;
  border-radius: 48px 48px 48px 12px;
  background: var(--hj-v4-blue);
  color: white;
  font-size: 66px;
  transform: rotate(-7deg);
}
.hj-v4-hey {
  right: 0;
  bottom: 0;
  width: 174px;
  height: 108px;
  border-radius: 40px 40px 12px 40px;
  background: var(--hj-v4-coral);
  color: #2d1924;
  font-size: 56px;
  transform: rotate(7deg);
}
.hj-v4-conversation-dot {
  position: absolute;
  left: 64px;
  bottom: 24px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--hj-v4-light-blue);
  border-radius: 50%;
}
footer.hj-v4-footer { padding: 0 0 24px; }
.hj-v4-footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 48px;
  padding: 44px 0 32px;
  border-top: 1px solid var(--hj-v4-rule);
}
.hj-v4-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hj-v4-ink);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.8px;
}
.hj-v4-brand img { width: 48px; height: 48px; border-radius: 13px; }
.hj-v4-brand-block p {
  margin: 18px 0 0;
  color: var(--hj-v4-muted);
  font-size: 13px;
  line-height: 1.7;
}
.hj-v4-nav h2 {
  margin: 0 0 16px;
  color: var(--hj-v4-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}
.hj-v4-nav ul { margin: 0; padding: 0; list-style: none; }
.hj-v4-nav a,
.hj-v4-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #e0e8f4;
  font-size: 13px;
  font-weight: 450;
  text-align: left;
  line-height: 1.5;
  text-underline-offset: 5px;
}
.hj-v4-nav a:hover,
.hj-v4-nav button:hover { color: white; text-decoration: underline; }
.hj-v4-nav .icon { width: 14px; height: 14px; }
.hj-v4-signature {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0 24px;
  color: #a8c3e9;
  font-size: clamp(72px, 12.4vw, 156px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.065em;
  user-select: none;
}
.hj-v4-signature-dot {
  width: .13em;
  height: .13em;
  flex: 0 0 .13em;
  background: var(--hj-v4-coral);
  border-radius: 50% 50% 50% 14%;
}
.hj-v4-baseline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hj-v4-rule);
  color: var(--hj-v4-muted);
  font-size: 12px;
  line-height: 1.5;
}
.hj-v4-baseline p { margin: 0; }
.hj-v4-baseline a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; white-space: nowrap; }
.hj-v4-baseline a:hover { color: white; }
.hj-v4-baseline .icon { width: 14px; height: 14px; transform: rotate(-90deg); }
.hj-v4-closing :is(a, button):focus-visible,
.hj-v4-footer :is(a, button):focus-visible { outline: 3px solid var(--hj-v4-coral); outline-offset: 5px; }
@media (max-width: 1000px) {
  .hj-v4-closing-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .hj-v4-closing h2 { letter-spacing: -1.8px; }
  .hj-v4-hello { width: 224px; height: 124px; font-size: 60px; }
  .hj-v4-hey { width: 152px; height: 100px; font-size: 52px; }
  .hj-v4-conversation { height: 300px; }
  .hj-v4-app-tile { right: 12px; width: 80px; height: 80px; border-radius: 21px; }
  .hj-v4-footer-grid { gap: 32px; }
}
@media (max-width: 700px) {
  .hj-v4-closing { padding: 56px 0 36px; border-radius: 28px 28px 0 0; }
  .hj-v4-closing-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hj-v4-kicker { margin-bottom: 20px; font-size: 10px; }
  .hj-v4-closing h2 { font-size: clamp(38px, 8.8vw, 58px); letter-spacing: -1.6px; }
  .hj-v4-intro { max-width: 400px; margin: 22px 0 24px; font-size: 15px; }
  .hj-v4-actions { gap: 10px; }
  .hj-v4-button { padding-inline: 16px; }
  .hj-v4-conversation { width: 300px; max-width: 100%; height: 148px; justify-self: end; margin-top: 8px; }
  .hj-v4-app-tile { width: 60px; height: 60px; top: 0; right: 0; border-radius: 16px; }
  .hj-v4-hello { top: 8px; left: 0; width: 170px; height: 88px; border-radius: 30px 30px 30px 8px; font-size: 46px; letter-spacing: -2px; }
  .hj-v4-hey { width: 120px; height: 76px; bottom: 0; right: 20px; border-radius: 28px 28px 8px 28px; font-size: 40px; letter-spacing: -2px; }
  .hj-v4-conversation-dot { left: 80px; bottom: 10px; width: 10px; height: 10px; border-width: 2px; }
  .hj-v4-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 0 24px; gap: 28px 24px; }
  .hj-v4-brand-block { grid-column: 1 / -1; }
  .hj-v4-brand { font-size: 23px; }
  .hj-v4-brand img { width: 40px; height: 40px; border-radius: 11px; }
  .hj-v4-brand-block p { margin-top: 12px; }
  .hj-v4-nav h2 { margin-bottom: 10px; }
  .hj-v4-nav a, .hj-v4-nav button { min-height: 44px; font-size: 12px; }
  .hj-v4-signature { font-size: clamp(60px, 13.6vw, 94px); gap: 8px; padding: 8px 0 24px; }
  .hj-v4-baseline { gap: 12px; font-size: 12px; padding-top: 16px; }
}
@media (max-width: 380px) {
  .hj-v4-wrap { width: calc(100% - 32px); }
  .hj-v4-closing { padding-top: 44px; }
  .hj-v4-closing h2 { font-size: 37px; letter-spacing: -1.3px; }
  .hj-v4-intro { font-size: 14px; }
  .hj-v4-actions { flex-direction: column; align-items: stretch; }
  .hj-v4-footer-grid { column-gap: 16px; }
  .hj-v4-nav a, .hj-v4-nav button { font-size: 12px; gap: 5px; }
  .hj-v4-nav .icon { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hj-v4-button { transition: none; }
}