/* #top: hero content (owner P1). CALL-E P01 "Dialing hero" (webuiexample/css/site.css .lh-text/.lh-verb/.lh-eye/
   .lh-h/.lh-cta/.lh-card, L1192-1290 + mobile L1795-1833). The wrapper header.lh#top, its blobs, nav and .lh-in flex row
   come from base.css; this file only lays out what sits inside .lh-in. Semantic variables only (dark mode = swap). */

#top .lh-in {
  --hgap: 64px;                                  /* text | visual gap (CALL-E 64) */
  --vis: clamp(360px, 38vw, 560px);              /* visual column: one large certificate sheet */
  --fit: 6.9;                                    /* longest word (11 mono chars at -.04em) + cursor, in em */
  gap: var(--hgap);
}

/* ---------- text column (.lh-text) ---------- */
#top .hero-text { flex: 1 1 0; min-width: 0; display: grid; gap: 22px; justify-items: start; }
#top .hero-badge { display: grid; gap: 12px; justify-items: start; margin: 0; }
#top .hero-eye { display: block; }
/* giant mono display word, sized so the longest profession + cursor always fits the column */
#top .hero-rot {
  display: block; height: 0.9em; white-space: nowrap;
  font-size: min(120px, 13vh, 8.4vw, calc((min(100vw, 1440px) - 2 * var(--gut) - var(--hgap) - var(--vis) - 24px) / var(--fit)));
}
#top .hero-rot .cursor { animation: none; }                       /* no JS / reduced motion: cursor stands still */
@media (prefers-reduced-motion: no-preference) {
  #top .hero-rot.on .cursor { animation: blink 1.1s step-end infinite; }
  #top .hero-rot.on.busy .cursor { animation: none; opacity: 1; }  /* solid while typing */
}
#top .hero-h { max-width: 15em; }
#top .hero-h .mk { white-space: nowrap; }                          /* keep "Your Job" on one line */
#top .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
#top .hero-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; line-height: 1.3; }
#top .hero-rate b { font-weight: 600; font-variant-numeric: tabular-nums; }
#top .hero-tp { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
#top .hero-tp svg { flex: none; width: 17px; height: 17px; }

/* ---------- visual column (.lh-card slot): certificate prints + tool bubbles ---------- */
#top .hero-vis { position: relative; flex: 0 0 var(--vis); min-width: 0; }
#top .hero-prints { position: relative; aspect-ratio: 1.3 / 1; }
/* photo print (blueprint 2.7): cream paper frame, radius 10, CALL-E card shadow */
#top .print { display: block; margin: 0; padding: 9px; border-radius: 10px; background: var(--paper); box-shadow: var(--sh-card); }
#top .print img { display: block; width: 100%; height: auto; border-radius: 4px; }
/* the certificate sheet brings its own paper, frame and shadow; its image has a transparent 64/1562 margin for
   the shadow, so the image bleeds out by that much and the visible sheet fills the box exactly */
#top .print.sheet { padding: 0; border-radius: 0; background: none; box-shadow: none; }
#top .print.sheet img { width: 108.2%; max-width: none; margin: -4.1%; border-radius: 0; }
#top .hero-prints .print { position: absolute; }
#top .print.front { left: 0; top: 9%; z-index: 1; width: 100%; transform: rotate(2.5deg); }
#top .bub {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--sh-tile);
}
#top .bub img { display: block; width: 28px; height: 28px; filter: var(--logo-filter); }
#top .bub.b1 { top: -3%; right: 10%; animation-delay: -0.7s; }
#top .bub.b2 { top: 30%; left: -10%; animation-delay: -2.1s; }
#top .bub.b3 { top: 42%; right: -7%; animation-delay: -3.2s; }
#top .bub.b4 { bottom: -2%; left: 52%; animation-delay: -1.6s; }
#top .hero-m { display: none; }

/* desktop: content starts right under the nav, as on CALL-E (no tall empty band above the text);
   the hero is as tall as its content, so the tool strip peeks in at the bottom of the first screen */
@media (width >= 992px) {
  #top { min-height: 0; }
  #top .lh-in { flex: none; align-items: flex-start; padding-top: clamp(28px, 4.5vh, 56px); padding-bottom: 112px; }
  #top .hero-text { padding-top: 8px; }
}

@media (width <= 1199px) {
  #top .lh-in { --hgap: 48px; }
  #top .bub { display: none; }                    /* bubbles only >=1200 (the original showed them >=1080) */
}

/* ---------- <=991: single column, visual under the CTA row (cert print + caption) ---------- */
@media (width <= 991px) {
  #top .lh-in { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 72px; }
  #top .hero-text { flex: none; align-content: start; }   /* column flex: never stretch the rows apart */
  #top .hero-rot { font-size: min(120px, 13vh, 8.4vw, calc((100vw - 2 * var(--gut) - 24px) / var(--fit))); }
  #top .hero-vis { flex: none; }
  #top .hero-prints { display: none; }
  #top .hero-m { display: grid; justify-items: center; gap: 24px; width: min(100%, 520px); margin: 64px auto 0; }
  #top .hero-m .print { width: 100%; transform: rotate(-2deg); }
  #top .hero-cap { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 400 13px/1.3 var(--mono); text-transform: uppercase; text-align: left; }
  #top .medal { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--fg); }
  #top .medal svg { width: 15px; height: 15px; }
}

/* ---------- phones (CALL-E mobile hero: gap 16, 52 px CTA, 14 px button text) ---------- */
@media (width <= 767px) {
  #top .lh-in { padding-bottom: 0; }
  #top .hero-text { gap: 16px; }
  #top .hero-badge { gap: 8px; }
  #top .hero-rot { font-size: min(15vw, 64px, calc((100vw - 2 * var(--gut) - 16px) / var(--fit))); }
  #top .hero-cta { gap: 14px 16px; margin-top: 4px; }
  #top .hero-cta .btn { min-height: 52px; padding: 14px 22px; font-size: 14px; }
  #top .hero-m { margin-top: 48px; width: min(100%, 400px); }
}