/* ============================================================
   LINDY HERO — Granola-style "call → board" demo
   Layout: copy on the LEFT, the demo component seats on the RIGHT.
   The demo = a printed COLLAGE (grain + halftone + scratched panels)
   that ZOOMS on scroll, with the board window at its centre and the
   people (call) within it. The board animation autoplays on a loop.
   Namespaced .lh-*  (AstroLabs DS tokens).
   ============================================================ */
.jhero{overflow:clip}

/* side-by-side hero grid (used by the prototype; index.html reuses .jhero-inner) */
.lh-hero-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center}

/* index.html hero: LEFT column (copy + the new focus section) and RIGHT column
   (the sticky component). The component pins and the LEFT content scrolls from the
   hero copy down to the focus section, so the component "travels" between them. */
/* DESKTOP: copy (col1/row1) + focus (col1/row2) on the left; the component spans
   both rows in col2 so it pins and "travels" between them. DOM order is
   copy -> component -> focus so MOBILE stacks correctly (see the mobile block). */
.jhero-inner{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.jhero-copy{position:relative;grid-column:1;grid-row:1}
.jfocus{grid-column:1;grid-row:2}
.jhero-stage{grid-column:2;grid-row:1 / span 2}

/* ---- new "Effortless meetings" section (below the hero copy, same left column).
   Large top gap = the scroll distance the pinned component "travels" while the
   collage disappears; the copy scrolls away before this arrives. ---- */
/* Focus section: a second full-height block, vertically CENTRED just like the hero
   copy, so when the pinned component "lands" here the text reads middle-aligned. The
   bottom margin keeps the component pinned THROUGH the centred frame before it lets go. */
.jfocus{margin-top:6vh;min-height:84vh;display:flex;flex-direction:column;justify-content:center;margin-bottom:24vh;max-width:520px}
.jfocus-eyebrow{display:inline-block;font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--al-blue);margin-bottom:14px}
/* .jfocus prefix beats `.lp h2{margin:0}` (landing.css) so the gap actually applies. */
.jfocus .jfocus-title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--al-navy);margin:0 0 44px}
.jfocus-usp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.jfocus-usp li{display:flex;align-items:center;gap:16px;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.4;color:var(--al-navy)}
.doodle{flex:none;width:44px;height:44px;color:var(--al-navy);overflow:visible}
.jfocus-usp li:nth-child(1) .doodle{transform:rotate(-4deg);color:#335CFF}
.jfocus-usp li:nth-child(2) .doodle{transform:rotate(3deg);color:#1F8A5B}
.jfocus-usp li:nth-child(3) .doodle{transform:rotate(-2deg);color:#C77A00}
/* Hero copy is vertically centred so the headline + form sit level with the middle
   of the pinned component on the right (the window seats at top:9vh, height:82vh). */
.jhero-copy{max-width:520px;min-height:84vh;display:flex;flex-direction:column;justify-content:center}
/* compact the copy so headline + form + the 3 USP lines all fit in one view */
.jhero-copy h1{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin-top:0}
.jhero-copy .jhero-sub{margin-top:15px;font-size:16px;line-height:1.45}
/* left-align the form with the headline/subtext above (landing-jira-v4 right-aligns
   it with margin-left:auto, which we don't want for this left-aligned hero). */
.jhero-copy .jhero-form-wrap{margin-top:20px;max-width:420px;margin-left:0}
/* 3 USP lines — the component slides down toward these as you scroll */
.jhero-usp{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:460px}
.jhero-usp li{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-display);font-weight:600;font-size:15.5px;line-height:1.4;color:var(--al-navy)}
.jhero-usp li i{flex:none;width:28px;height:28px;border-radius:8px;background:var(--al-blue-50);color:var(--al-blue);display:inline-flex;align-items:center;justify-content:center;font-size:15px;margin-top:1px}
@media(max-width:960px){
  /* MOBILE: single column, natural DOM order — copy -> component -> focus. */
  .jhero-inner{display:flex;flex-direction:column}
  .jhero-copy,.jfocus,.jhero-stage{grid-column:auto;grid-row:auto}
  .jhero-copy{max-width:640px;min-height:auto;display:block}
}

/* ---- the demo component (right side) — EXPANDED: tall scroll region with the
   component PINNED (sticky). As you scroll, the component stays put and the 3
   collage images slide behind it (see .lh-art transforms). ---- */
.jhero-stage{margin-top:0;overflow:visible}
.lh-scroll{position:relative;height:320vh}
.lh-sticky{position:sticky;top:9vh;height:82vh;display:flex;align-items:center;justify-content:center}
.lh-stage{position:relative;width:100%;height:min(694px,78vh);
  --z:0; /* scroll progress 0..1 through the pinned region, set by JS */
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.lh-stage.in{opacity:1;transform:none}

/* ============================================================
   COLLAGE — tactile printed panels, bleeds off the right edge
   ============================================================ */
.lh-bg{position:absolute;top:-2%;bottom:-3%;left:-2%;right:-3%;z-index:0;pointer-events:none}
/* THREE SEPARATE images (Lindy-owned SVGs). As you scroll the pinned component,
   they CONVERGE toward the centre and slide BEHIND the window (z:4 occludes them)
   — driven by --z (0..1). No fade; the window hides them, exactly like Granola. */
.lh-art{position:absolute;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;
  transform-origin:center;box-shadow:0 20px 44px -22px rgba(11,14,40,.45);will-change:transform}
/* As you scroll (--z 0->1) every panel SHRINKS toward the window centre and slides
   behind it until it fully disappears. */
/* STRAIGHT VERTICAL panels. All panels are TOP-ALIGNED (the grey one is the only
   bottom piece). As you scroll (--z 0->1) each one moves BEHIND the window (toward
   its centre) and SHRINKS in size until it fully disappears behind the component. */
/* FUTURISTIC / EXPLOSION — the widest panel, sits at the TOP behind the window's
   right, bleeding off the top-right edge. */
.lh-art.burst{left:62%;right:auto;top:-3%;width:33%;height:64%;background-image:url("/assets/hero-bg/burst.svg");background-position:center top;
  transform:translate(calc(var(--z)*-120px),calc(var(--z)*40px)) scale(calc(1 - var(--z)*.8))}
/* GREEN + BLUE — ONE collage (lime top, navy bottom) as a single tall strip on the
   window's LEFT. Seated slightly LOWER than the main component so it tucks behind the
   window's left edge, with the navy halftone peeking below the window's bottom-left. */
.lh-art.stack{left:8%;top:7%;width:38%;height:92%;background-image:url("/assets/hero-bg/greenblue.jpg");background-position:center top;
  transform:translate(calc(var(--z)*130px),calc(var(--z)*40px)) scale(calc(1 - var(--z)*.82))}
/* GREY / PAPER — the only bottom piece, faint, centred low behind the window. */
.lh-art.light{left:31%;right:auto;bottom:-3%;width:40%;height:22%;background-image:url("/assets/hero-bg/light.svg");box-shadow:none;
  transform:translate(calc(var(--z)*20px),calc(var(--z)*-56px)) scale(calc(1 - var(--z)*.82))}

/* ============================================================
   APP WINDOW — the board (centre of the collage)
   ============================================================ */
.lh-win{position:absolute;z-index:4;left:18.5%;top:2%;width:min(524px,63%);height:min(664px,93%);
  background:var(--al-white);border:1px solid var(--al-line);border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(11,14,40,.5),0 10px 26px -14px rgba(20,23,87,.24);
  display:flex;flex-direction:column;overflow:hidden}
.lh-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-bottom:1px solid var(--al-line);background:var(--al-white);flex:none}
.lh-bar .tl{width:11px;height:11px;border-radius:50%}
.lh-bar .tl.r{background:#ff5f57}.lh-bar .tl.y{background:#febc2e}.lh-bar .tl.g{background:#28c840}

.lh-body{flex:1;display:flex;flex-direction:column;min-height:0;padding:18px 22px 0}
/* notepad header: serif title (echoes the reference), then a compact meta row */
.lh-bhead{display:flex;align-items:center;flex:none;padding-bottom:12px}
.lh-btitle{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--al-navy)}
.lh-bmeta{display:flex;align-items:center;gap:8px;flex:none;padding-bottom:16px}
.lh-chipm{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--al-text-2);background:var(--al-white);border:1px solid var(--al-line);border-radius:var(--radius-pill);padding:4px 10px}
.lh-chipm i{font-size:12px;color:var(--al-text-3)}
.lh-addbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;border-radius:8px;border:1px solid var(--al-line);color:var(--al-text-3);font-size:15px;background:var(--al-white)}

/* the two views (notepad + board) share the same box and cross-fade at the scan */
.lh-views{position:relative;flex:1;min-height:0}
.lh-notes,.lh-board{position:absolute;inset:0;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.lh-notes{display:flex;flex-direction:column;gap:16px;overflow:hidden}
.lh-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0;padding-bottom:14px}
.lh-views:not(.board) .lh-board{opacity:0;transform:translateY(12px);pointer-events:none}
.lh-views.board .lh-notes{opacity:0;transform:translateY(-12px);pointer-events:none}

/* notepad lines: who said what / what they committed to (types in live) */
.lh-note{font-family:var(--font-display);font-size:14px;line-height:1.5;color:var(--al-text-2);
  opacity:0;transform:translateY(7px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.lh-note.in{opacity:1;transform:none}
.lh-note .who{font-weight:800}
.lh-note .sep{color:var(--al-text-3);font-weight:600}
.lh-note .said{color:var(--al-text-2)}
.lh-col{background:var(--al-paper);border:1px solid var(--al-line);border-radius:11px;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:0}
.lh-colh{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--al-navy);flex:none}
.lh-colh .dot{width:7px;height:7px;border-radius:50%}
.lh-colh .n{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--al-text-3);background:var(--al-white);border:1px solid var(--al-line);border-radius:var(--radius-pill);min-width:18px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.lh-cards{display:flex;flex-direction:column;gap:8px;overflow:hidden}

.lh-card{background:var(--al-white);border:1px solid var(--al-line);border-radius:9px;padding:8px 9px;box-shadow:var(--shadow-xs);
  opacity:0;transform:translateY(12px) scale(.97);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.lh-card.in{opacity:1;transform:none;animation:lh-reveal .7s var(--ease-out)}
@keyframes lh-reveal{0%{box-shadow:0 0 0 0 rgba(51,92,255,0)}28%{box-shadow:0 0 0 3px rgba(51,92,255,.22)}100%{box-shadow:var(--shadow-xs)}}
.lh-card .sum{font-family:var(--font-display);font-weight:700;font-size:12.5px;line-height:1.3;color:var(--al-navy)}
.lh-card .src{margin-top:5px;display:flex;align-items:center;gap:5px;font-size:10px;line-height:1.3;color:var(--al-text-3)}
.lh-card .src i{font-size:10.5px;color:var(--al-blue);flex:none}
.lh-card .foot{display:flex;align-items:center;gap:6px;margin-top:8px}
.lh-pri{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;letter-spacing:.02em;border-radius:5px;padding:2px 5px}
.lh-pri.hi{color:#B42318;background:#FEF3F2}.lh-pri.hi i{color:#F04438}
.lh-pri.me{color:#B54708;background:#FFFAEB}.lh-pri.me i{color:#F79009}
.lh-pri.lo{color:#3538CD;background:#EEF4FF}.lh-pri.lo i{color:#6172F3}
.lh-cx{display:inline-flex;align-items:center;gap:2px}
.lh-cx i{width:4.5px;height:4.5px;border-radius:50%;background:var(--al-line-2)}
.lh-cx i.on{background:var(--al-blue)}
.lh-card .foot .sp{flex:1}
.lh-due{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--al-text-3)}
.lh-due i{font-size:10.5px}
.lh-cav{width:19px;height:19px;border-radius:50%;font-size:8.5px;font-weight:800;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}

.lh-scan{position:absolute;left:0;right:0;height:100px;top:0;pointer-events:none;opacity:0;z-index:5;
  background:linear-gradient(180deg,rgba(51,92,255,0) 0%,rgba(51,92,255,.08) 55%,rgba(51,92,255,.16) 82%,rgba(51,92,255,0) 100%)}
.lh-scan::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;background:linear-gradient(90deg,transparent,var(--al-blue),transparent);box-shadow:0 0 14px 2px rgba(51,92,255,.55)}

.lh-foot{flex:none;display:flex;align-items:center;justify-content:center;padding:9px 0 12px}
.lh-status{display:inline-flex;align-items:center;gap:8px;background:var(--al-white);border:1px solid var(--al-line);border-radius:var(--radius-pill);
  padding:7px 14px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--al-navy);box-shadow:var(--shadow-sm)}
.lh-status .bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.lh-status .bars i{width:2.5px;background:var(--al-blue);border-radius:2px;animation:lh-eq 1s ease-in-out infinite}
.lh-status .bars i:nth-child(1){height:5px}.lh-status .bars i:nth-child(2){height:9px;animation-delay:.15s}
.lh-status .bars i:nth-child(3){height:6px;animation-delay:.3s}.lh-status .bars i:nth-child(4){height:11px;animation-delay:.45s}
@keyframes lh-eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.lh-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--al-blue-100);border-top-color:var(--al-blue);animation:lh-sp .7s linear infinite}
@keyframes lh-sp{to{transform:rotate(360deg)}}
.lh-status .ok{color:var(--al-success)}

.lh-tick{position:absolute;left:0;right:0;bottom:58px;z-index:6;display:flex;justify-content:center;pointer-events:none;transition:opacity .35s;padding:0 18px}
.lh-tick .b{max-width:80%;background:rgba(13,16,34,.92);color:#eef1f8;border-radius:10px;padding:7px 12px;font-size:11.5px;line-height:1.35;box-shadow:0 12px 26px rgba(11,14,40,.32)}
.lh-tick .b .spk{color:#9db6ff;font-weight:700}
.lh-caret{display:inline-block;width:2px;height:1em;background:#9db6ff;margin-left:2px;vertical-align:-2px;animation:lh-cbl .9s step-end infinite}
@keyframes lh-cbl{0%,100%{opacity:1}50%{opacity:0}}

/* ============================================================
   VIDEO CALL — within the section, overlapping the window's right
   ============================================================ */
.lh-call{position:absolute;z-index:6;left:64%;bottom:6%;top:auto;width:150px;
  display:flex;flex-direction:column;gap:7px;padding:5px;background:#0f1115;border-radius:15px;border:1px solid #23262e;box-shadow:0 26px 54px -18px rgba(0,0,0,.6)}
.lh-tile{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1/1;background:#1a1c22;isolation:isolate}
.lh-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;animation:lh-breathe 7s ease-in-out infinite}
/* live call videos (muted autoplay loop) fill the tile exactly like the avatar img did */
.lh-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#1a1c22}
.lh-tile:not(.speaking) video{filter:brightness(.9) saturate(.95)}
.lh-tile[data-who="b"] img{animation-duration:8s;animation-delay:-2s}
@keyframes lh-breathe{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.055) translateY(-2px)}}
.lh-tile .grain{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 30%,transparent 60%,rgba(0,0,0,.28));mix-blend-mode:multiply}
.lh-tile .nm{position:absolute;left:5px;bottom:5px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:9.5px;font-weight:700;color:#fff;background:rgba(15,17,21,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:6px;padding:2px 6px}
.lh-tile .nm i{font-size:9.5px}
.lh-tile .wave{position:absolute;right:5px;bottom:6px;z-index:2;display:none;align-items:flex-end;gap:1.5px;height:11px}
.lh-tile .wave i{width:2px;background:#5b8cff;border-radius:2px;animation:lh-eq .8s ease-in-out infinite}
.lh-tile .wave i:nth-child(2){animation-delay:.12s}.lh-tile .wave i:nth-child(3){animation-delay:.24s}.lh-tile .wave i:nth-child(4){animation-delay:.36s}
.lh-tile.speaking{box-shadow:inset 0 0 0 2px #4d7dff}
.lh-tile.speaking .wave{display:flex}
.lh-tile:not(.speaking) img{filter:brightness(.9) saturate(.95)}
.lh-ctrls{display:flex;align-items:center;justify-content:center;gap:5px;padding:2px}
.lh-cbtn{width:24px;height:24px;border-radius:50%;background:#2a2d36;color:#e7e9ef;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.lh-cbtn.hang{background:#e5484d;color:#fff}
.lh-rec{position:absolute;left:7px;top:7px;z-index:7;display:inline-flex;align-items:center;gap:4px;background:rgba(15,17,21,.72);border-radius:var(--radius-pill);padding:2px 7px 2px 5px;font-size:9px;font-weight:800;color:#fff;letter-spacing:.03em}
.lh-rec .rd{width:6px;height:6px;border-radius:50%;background:#ff5f57;animation:lh-blink 1.4s ease-in-out infinite}
@keyframes lh-blink{0%,100%{opacity:1}50%{opacity:.25}}

@media(max-width:960px){
  .lh-hero-grid{grid-template-columns:1fr;gap:24px}
  .jhero-copy{position:static}
  /* focus section stacks BELOW the component (same land-on-next-section behaviour,
     just vertical) — centred text like the hero, with a comfortable gap. */
  .jfocus{margin:5vh auto 6vh;min-height:auto;display:block;max-width:640px}
  /* the component PINS on mobile (like desktop) so the animation plays WHILE it's held,
     not after you've scrolled past it. The runway is the scroll room that keeps it
     pinned; it was 135vh — trimmed ~25% (to 118vh) to cut the dead space below it while
     keeping the pin. */
  .jhero-stage{position:relative;height:118vh;margin-top:28px}
  .lh-sticky{position:sticky;top:8vh;height:auto;display:block}
  .lh-stage{height:min(560px,80vh);opacity:1;transform:none}
  .lh-bg{display:block}
  .lh-win{position:absolute;left:10%;top:3%;width:80%;height:92%;transform:none;max-height:none}
  /* tighter, rounded collage peeking around the window — the --z scroll transform
     (shrink + travel behind the window) still applies, same as desktop. */
  .lh-art.stack{left:3%;top:0%;width:29%;height:61%}
  .lh-art.burst{left:75%;top:-3%;width:33%;height:46%}
  .lh-art.light{left:54%;bottom:-3%;width:44%;height:16%}
  .lh-bhead{flex-wrap:wrap}
  .lh-board{grid-template-columns:1fr 1fr}
  /* call tiles overlap the window's RIGHT edge (partly outside), like the reference,
     so they sit over whitespace rather than the notes */
  /* call tiles on the SIDE (window's bottom-right), same as desktop */
  .lh-call{left:auto;right:2%;top:auto;bottom:7%;width:118px}
  .lh-notes{padding-right:24%}
  .lh-tick{display:none}
}
@media(max-width:520px){
  .lh-btitle{font-size:20px}
  .lh-win{left:8%;width:84%}
  .lh-call{right:2%;bottom:7%;width:98px}
  .lh-notes{padding-right:30%}
  .lh-note{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .lh-tile img{animation:none}
  .lh-card,.lh-stage,.lh-art{transition:none}
  .lh-card.in{animation:none}
}