/* The opening: the headline on the left from the first paint (the curtain draws the same words in the same
   place), the phone on the right with its ring of cards. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-words {
  position: absolute; left: clamp(28px, 6.4vw, 120px); top: 50%; transform: translateY(-50%); width: clamp(380px, 40vw, 860px);
  display: flex; flex-direction: column; gap: clamp(18px, 3vh, 30px); pointer-events: auto;
}
.hero-h1 {
  display: flex; flex-direction: column; font-family: var(--font); font-size: clamp(40px, min(4.25vw, 7.4vh), 96px); font-weight: 830; font-stretch: 118%;
  line-height: 0.96; letter-spacing: -0.038em; color: #10141e;
}
.hero-h1 span { display: block; white-space: nowrap; }
.hero-h1 span:last-child { color: var(--cobalt); }
.hero-sub { max-width: 34ch; font-family: var(--font); font-size: clamp(16px, min(1.25vw, 2.3vh), 22px); line-height: 1.5; color: rgba(16, 20, 30, 0.8); font-weight: 420; text-wrap: pretty; }
.hero-sub b { color: #10141e; font-weight: 680; }
.hero-get { display: flex; align-items: center; gap: 16px; font-family: var(--font); }
.hero-get .badge img { height: clamp(42px, 6vh, 52px); width: auto; }
.hero-get small { font-size: clamp(14px, min(0.95vw, 1.6vh), 16px); color: rgba(16, 20, 30, 0.66); font-weight: 520; }

/* the launch screen on the glass */
.hl-icon { overflow: hidden; box-shadow: 0 10px 24px rgba(31, 60, 140, 0.22); }
.hl-icon img { width: 100%; height: 100%; }
.hl-name { text-align: center; font-size: 15px; font-weight: 700; color: #1f1f24; }

/* things in the air */
.airthing { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; contain: layout paint style; }

/* the icon card: Neuron's icon on its face, Home's session card on its back */
.hl-card { border-radius: 22px; }
.hl-front, .hl-back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.hl-front img { width: 100%; height: 100%; }
.hl-front { box-shadow: 0 18px 40px rgba(31, 60, 140, 0.28); }
.hl-back { opacity: 0; background: linear-gradient(135deg, #2e61d1, #294db8 55%, #1f52b8); box-shadow: 0 18px 40px rgba(31, 60, 140, 0.32); font-family: var(--rounded); }
.hl-sess { position: absolute; left: 0; top: 0; width: 349px; height: 120px; border-radius: 26px; color: #fff; transform-origin: 0 0; }
/* (.nh-sess, Home's own session card, sets its origin to its middle: the miniature is scaled from its corner) */
.hl-back .hl-sess.nh-sess { transform-origin: 0 0; }
.hl-sess .nh-ring .pr { stroke: url(#nh-ringg); }

/* a card on the ring: a real Neuron card, question side up */
.hr-card {
  border-radius: 20px; overflow: hidden; padding: 16px 16px 14px 20px; display: flex; flex-direction: column; font-family: var(--rounded); color: #1f1f24;
  background: #fefefd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 18px 34px rgba(31, 52, 110, 0.18), 0 2px 6px rgba(31, 52, 110, 0.08);
  --acc: #2e61d1; --deep: #294db8;
}
.hr-card .nc-margin { width: 5px; }
.hr-card .nc-top { margin-bottom: 8px; }
.hr-card .nc-top small { font-size: 9.5px; }
.hr-card .nc-badge { width: 11px !important; height: 11px !important; }
.hr-q { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 600; line-height: 1.22; text-wrap: balance; }
.hr-q.big { font-size: 40px; font-weight: 600; }
.hr-set { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #74747e; text-align: center; }
.hr-card .sym { display: block; }
.hr-fog { position: absolute; inset: 0; background: #e9eef7; opacity: 0; pointer-events: none; }