/* The opening: product first. A calm, unpinned hero: the promise on the left, one large phone playing a real take on the
   right, with two notes that say what you're looking at. "You know the look" is one line of copy. --hp (tp.js) is how
   far the hero has scrolled away; the phone drifts up a little slower than the page. */
.hb { position: relative; min-height: 100svh; display: grid; }
.hb__stage { position: relative; background: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center;
  gap: var(--sc-8); padding: clamp(6rem, 14vh, 9rem) var(--sc-gutter) clamp(4rem, 10vh, 7rem); max-width: 92rem; width: 100%;
  margin-inline: auto; }
.hb::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 60% at 72% 50%, rgb(255 176 32 / 0.10), transparent 70%),
              radial-gradient(80% 60% at 20% 0%, rgb(120 150 190 / 0.05), transparent 70%); }
.hb__brand { position: absolute; z-index: 3; left: var(--sc-gutter); top: clamp(1.25rem, 4vh, 2.5rem); }
.hb__brand img { height: clamp(28px, 2.6vw, 38px); width: auto; }

.hb__copy { position: relative; z-index: 1; max-width: 36rem; }
.hb h1 { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.2rem, 1.2rem + 5.6vw, 7.2rem); line-height: 0.95;
  letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.hb__lede { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: #D6D3CD; max-width: 24em; text-wrap: pretty; }
.hb__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); margin-top: var(--sc-7); }
.hb__ctas .cta { margin: 0; }
.hb__link { color: var(--sc-ink); font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; }
.hb__link::after { content: "\2193"; color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .hb__link:hover { color: var(--sc-accent); } }
.hb__aside { margin: var(--sc-8) 0 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); max-width: 30em;
  color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; }
.hb__aside b { color: var(--sc-ink); font-weight: 600; }

.hb__art { position: relative; margin: 0; justify-self: center; display: grid; place-items: center;
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px + var(--hp, 0) * -60px), 0); }
.hb__art .phone { --w: clamp(240px, min(26vw, 36vh), 380px); }  /* the phone is 2.17x as tall as wide: keep it inside the window */
/* a soft lens ring behind the phone */
.hb__art::before { content: ""; position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 60px rgb(255 255 255 / 0.012); }

.hb__note { position: absolute; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font: 600 var(--sc-t-sm)/1.2 var(--sc-font-text); color: var(--sc-ink); }
.hb__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); flex: none;
  box-shadow: 0 0 0 4px rgb(255 176 32 / 0.2); }
.hb__note span { color: var(--sc-ink-soft); font-weight: 500; display: block; margin-top: 3px; }
.hb__note i { display: block; height: 1px; width: clamp(30px, 4vw, 70px); background: linear-gradient(90deg, var(--sc-accent), rgb(255 176 32 / 0.2)); }
/* script: left of the phone, level with the script box */
.hb__note--script { right: calc(100% - 4%); top: 19%; flex-direction: row-reverse; text-align: right; }
.hb__note--script i { background: linear-gradient(270deg, var(--sc-accent), rgb(255 176 32 / 0.2)); }
/* eyes: also on the left, level with her eyes, so neither note runs off the window */
.hb__note--eyes { right: calc(100% - 4%); top: 45%; flex-direction: row-reverse; text-align: right; }
.hb__note--eyes i { background: linear-gradient(270deg, var(--sc-accent), rgb(255 176 32 / 0.2)); }

@media (max-width: 1100px) { .hb__note { display: none; } }
@media (max-width: 860px) {
  .hb__stage { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); padding-top: calc(var(--sc-8) + 10px); }
  .hb h1 { font-size: clamp(2.6rem, 1.2rem + 6vw, 4rem); }
  .hb__lede { font-size: var(--sc-t-lg); }
  .hb__art .phone { --w: min(66vw, 300px); }
  /* the phone comes straight after the buttons; "You know the look" moves under it */
  .hb__copy { display: contents; }
  .hb__stage { gap: 0; }
  .hb__stage > * { order: 0; }
  .hb__art { order: 1; margin-top: var(--sc-7); }
  .hb__aside { order: 2; margin-top: var(--sc-7); }
  .hb .label { margin-bottom: var(--sc-3); }
  .hb__lede { margin-top: var(--sc-4); }
  .hb__ctas { margin-top: var(--sc-5); }
  .hb__brand { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hb__art { transform: none; } }