/* Hero product windows: a white mail client behind a translucent dark terminal. */
.hw-stage {
  --hw-term-bg: rgba(13, 17, 23, .82);
  --hw-term-line: rgba(255, 255, 255, .09);
  --hw-term-fg: #e6edf3;
  --hw-term-dim: #7d8590;
  --hw-blue: rgb(111, 143, 208);
  position: relative; min-width: 0; min-height: 960px; margin-top: -20px;
}
.hw-dots { display: inline-flex; gap: 7px; }
.hw-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.hw-dots i:nth-child(2) { background: #febc2e; }
.hw-dots i:nth-child(3) { background: #28c840; }

/* Mail window: the email at 1:1, top part only */
.hw-mail {
  position: absolute; top: 0; left: 0; width: 660px; border-radius: 12px; overflow: hidden;
  background: #fff; color: #1f2328; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 30px 70px -25px rgba(0, 25, 22, .6), 0 0 0 1px rgba(0, 0, 0, .06);
}
.hw-mail-bar { display: flex; align-items: center; height: 36px; padding: 0 14px; background: #eef0f3; border-bottom: 1px solid #dde0e4; font-size: 12px; color: #57606a; }
.hw-mail-title { flex: 1; text-align: center; margin-right: 50px; font-weight: 600; }
.hw-mail-head { display: flex; gap: 8px; align-items: baseline; padding: 10px 18px; border-bottom: 1px solid #eceef1; font-size: 13px; }
.hw-mail-head span { color: #6e7781; font-size: 12px; }
.hw-mail-time { margin-left: auto; }
.hw-mail-view { position: relative; height: 330px; overflow: hidden; background: #F0F1F3; }
.hw-mail-scale { width: 660px; transform-origin: 0 0; }
.hw-mail-view iframe { display: block; width: 660px; height: 560px; border: 0; pointer-events: none; }

/* Terminal: large, translucent, in front */
.hw-term {
  position: absolute; top: 360px; left: -20px; width: 620px; z-index: 2; border-radius: 12px; overflow: hidden;
  background: var(--hw-term-bg); color: var(--hw-term-fg);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hw-term-bar { display: flex; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--hw-term-line); background: rgba(255, 255, 255, .03); font: 12px/1 var(--mono); color: var(--hw-term-dim); }
.hw-term-title { flex: 1; text-align: center; margin-right: 50px; }
.hw-term-body { padding: 18px 20px 16px; }
.hw-home { display: flex; align-items: center; gap: 22px; }
.hw-whale { flex: none; width: 168px; height: 144px; filter: drop-shadow(0 0 22px rgba(111, 160, 230, .28)); }
.hw-term pre { margin: 0; font: 12px/1.4 var(--mono); white-space: pre; color: var(--hw-term-fg); background: none; }
.hw-info b { font-weight: 700; }
.hw-title { color: var(--hw-blue); font-size: 13px; }
.hw-sel { color: var(--hw-blue); font-weight: 700; }
.hw-dim { color: var(--hw-term-dim); }
.hw-rule { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.hw-log { height: 176px; margin-top: 10px !important; padding-top: 12px; border-top: 1px solid var(--hw-term-line); overflow: hidden; white-space: pre-wrap !important; word-break: break-word; }
.k-prompt { color: #3ecf8e; }
.k-arrow { color: var(--hw-term-dim); }
.k-typed { color: #fff; font-weight: 600; }
.k-ok, .k-money { color: #3ecf8e; }
.k-warn { color: #f2cc60; }
.k-fail { color: #ff7b72; }
.k-dim { color: var(--hw-term-dim); }
.k-cmd { color: #79c0ff; }
.k-var { color: #ffa657; }
.k-date { color: #d2a8ff; }
.k-buy { color: #7ee787; font-weight: 600; }
.k-head { color: var(--hw-blue); }
.hw-caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #e6edf3; animation: hw-blink 1s steps(1) infinite; }
@keyframes hw-blink { 50% { opacity: 0; } }
.hw-note { position: absolute; top: 930px; left: -20px; margin: 0; max-width: 600px; font: 11px/16px var(--mono); opacity: .8; }
.hw-note code { font: inherit; }

@media (max-width: 1100px) {
  .hw-mail { left: 0; width: 100%; }
  .hw-term { left: -20px; width: calc(100% + 40px); }
  .hw-note { left: 0; }
}
@media (max-width: 860px) {
  .hw-stage { min-height: 0; margin-top: 0; display: flex; flex-direction: column; }
  .hw-mail, .hw-term, .hw-note { position: relative; top: auto; left: auto; width: 100%; }
  .hw-mail { order: 2; margin-top: -24px; }
  .hw-term { order: 1; }
  .hw-note { order: 3; margin-top: 14px; }
  .hw-mail-view { height: auto; }
  .hw-home { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hw-whale { width: 126px; height: 108px; }
  .hw-term-body { padding: 14px; }
  .hw-term pre { font-size: 11px; }
  .hw-info { white-space: pre-wrap !important; }
  .hw-log { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-caret { animation: none; }
  .hw-log { height: auto; }
}

/* Four-line headline: keep every line inside the hero column. */
.hero h1 { text-wrap: balance; }
@media (min-width: 1100px) { .hero h1 { font-size: 88px; } }