/* ============================================================
   NOX "what you get" — scroll-driven device reveal.

   Adapted from container-scroll-animation. That component is framer-motion:
   useScroll drives rotateX 20deg -> 0, a scale, and a translate on the heading.
   Same three transforms here, driven by a scroll listener, because this page has
   no build step and framer-motion is not worth a bundler for one section.

   The device is Veer's own MacBook mockup. Its screen is a TRANSPARENT cutout,
   measured out of the PNG rather than eyeballed:
     left 12.30%  top 15.82%  width 75.40%  height 65.04%   (aspect 1.5465)
   so the content sits BEHIND the image and shows through the hole, and the
   bezel, notch and base overlay it for free.

   What is on that screen is the REAL table that was already in this section,
   rendered live. Not a screenshot: the rows are real companies from a real run
   with the contact details still masked, exactly as the copy below claims, and
   a picture would have frozen that and put the claim out of sync with the data.
   ============================================================ */

/* The stage is tall on purpose: it is the scroll distance the animation is
   driven over. Too short and the whole reveal happens in a flick. */
.get-scroll .scroll-stage{
  position:relative;
  min-height:150vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1000px;
}
@media (max-width:860px){ .get-scroll .scroll-stage{min-height:96vh} }

/* The head sits UNDER the device in paint order: as the reveal finishes the
   laptop rises over it and occludes the strapline, which is the whole point of
   the effect. The 26px resting gap below is read back by the JS at runtime and
   added to the climb, so changing it here cannot desync the two. */
.get-scroll .scroll-head{
  position:relative;z-index:1;
  max-width:860px;margin:0 auto 26px;text-align:center;
  will-change:transform;
}
.get-scroll .scroll-head h2{
  font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.028em;
  margin:14px 0 16px;
}
.get-scroll .scroll-head p{
  color:var(--fg-muted);margin:0 auto;max-width:620px;
  font-size:clamp(15px,1.35vw,19px);line-height:1.55;
}

/* ---- the device ---- */
.scroll-device{
  position:relative;z-index:2;width:min(100%,1040px);margin:0 auto;
  transform-style:preserve-3d;will-change:transform;
}
.scroll-device .device-shell{
  position:relative;z-index:2;display:block;width:100%;height:auto;
  pointer-events:none;user-select:none;
  /* the mockup ships with no shadow of its own */
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.4));
}

/* Geometry measured from the PNG. If the mockup is ever swapped, re-measure:
   guessing these four numbers is how content ends up sitting on the bezel. */
.scroll-device .device-screen{
  position:absolute;z-index:1;overflow:hidden;
  left:12.30%;top:15.82%;width:75.40%;height:65.04%;
  background:var(--bg);
}

/* The inner surface is laid out at a fixed design width and then scaled to fit
   the screen box, so the table renders at its natural size and shrinks as a
   whole. Laying it out at the real screen width would reflow it into something
   that looks nothing like the product. */
.scroll-device .screen-inner{
  position:absolute;top:0;left:0;width:1180px;
  transform-origin:top left;
  background:var(--bg);
}

/* ---- the portal surface on the screen ----
   Mirrors the real portal.html: header with the live pill, "Your leads", the
   four stat cards it actually renders (Total / Tier A / Tier B / Reachable),
   then the ranked table. The stat numbers are counted off the five rows shown,
   so nothing here claims more than the table does.
   Top padding clears the mockup's notch, measured at 3.3% of screen height. */
.portal-mini{
  height:100%;background:var(--bg);
  display:flex;flex-direction:column;
  padding-top:30px;                 /* notch clearance at design scale */
}
.portal-mini .pm-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px;border-bottom:1px solid var(--line-soft);
  background:var(--bg-raised);
}
.portal-mini .pm-logo{font-family:var(--display);font-size:19px;letter-spacing:-.01em;color:var(--fg-muted)}
.portal-mini .pm-logo b{color:var(--red);font-weight:400}
.portal-mini .pm-live{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-muted);
}
.portal-mini .pm-live i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--red);display:block}

.portal-mini .pm-body{padding:26px 30px 0;flex:1;min-height:0}
.portal-mini .pm-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.portal-mini h4{
  font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;
  margin:10px 0 6px;color:var(--fg);
}
.portal-mini .pm-sub{margin:0 0 22px;color:var(--fg-muted);font-size:15px}

.portal-mini .pm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.portal-mini .pm-stat{
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--bg-raised);
}
.portal-mini .pm-stat b{
  display:block;font-family:var(--mono);font-size:30px;font-weight:600;color:var(--fg);margin-bottom:5px;
}
.portal-mini .pm-stat.hot b{color:var(--red)}
.portal-mini .pm-stat span{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint);
}

.portal-mini .pm-panel{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg-raised)}
.portal-mini .pm-panelbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
}
.portal-mini table{width:100%;border-collapse:collapse;font-size:14.5px}
.portal-mini th{
  text-align:left;padding:12px 18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:500;
  border-bottom:1px solid var(--line-soft);
}
.portal-mini td{padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--fg-muted)}
.portal-mini tbody tr:last-child td{border-bottom:0}
.portal-mini td b{color:var(--fg);font-weight:600}
.portal-mini .tier{
  display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;
}
.portal-mini .tier.a{background:var(--red)}
.portal-mini .tier.b{background:var(--red-deep);color:var(--red)}
.portal-mini .gap{
  display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid rgba(255,42,42,.34);color:var(--red);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
}

/* Screen glass: a faint diagonal sheen so it does not read as a flat rectangle
   pasted into a photo. */
.scroll-device .device-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.055) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.025) 100%);
}

@media (prefers-reduced-motion:reduce){
  .get-scroll .scroll-stage{min-height:0;padding:20px 0}
  .scroll-device,.get-scroll .scroll-head{transform:none !important}
}

/* ============================================================
   Sector 02 variant: an outreach console on the same device.

   Deliberately a THREAD view and not a dashboard of counters. A dashboard
   would need open rates, reply rates and booking counts, and NOX has none to
   show yet — the numbers would have to be invented, which this site does not
   do anywhere else. The sequence itself is the product, and it can be shown
   truthfully. The messages are the same illustrative thread the section already
   carries below the device, so the two cannot drift apart.
   ============================================================ */
.outreach-mini{
  height:100%;background:var(--bg);
  display:flex;flex-direction:column;
  padding-top:30px;                 /* notch clearance at design scale */
}
.outreach-mini .om-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px;border-bottom:1px solid var(--line-soft);
  background:var(--bg-raised);
}
.outreach-mini .om-logo{font-family:var(--display);font-size:19px;letter-spacing:-.01em;color:var(--fg-muted)}
.outreach-mini .om-logo b{color:var(--red);font-weight:400}
.outreach-mini .om-live{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-muted);
}
.outreach-mini .om-live i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--red);display:block}

.outreach-mini .om-body{padding:24px 30px 0;flex:1;min-height:0;display:flex;flex-direction:column}
.outreach-mini .om-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.outreach-mini h4{
  font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;
  margin:10px 0 6px;color:var(--fg);
}
.outreach-mini .om-sub{margin:0 0 20px;color:var(--fg-muted);font-size:15px}

.outreach-mini .om-panel{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-raised);flex:1;min-height:0;
}
.outreach-mini .om-panelbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
}
.outreach-mini .om-msg{padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.outreach-mini .om-msg:last-child{border-bottom:0}
/* the inbound one, so the eye lands on the moment the sequence stops */
.outreach-mini .om-msg.in{border-left:2px solid var(--red);background:rgba(255,42,42,.045)}
.outreach-mini .om-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg-faint);
}
.outreach-mini .om-meta .om-when{margin-left:auto}
.outreach-mini .om-tag{
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.13);text-transform:uppercase;letter-spacing:.09em;font-size:10px;
}
.outreach-mini .om-tag.hot{border-color:rgba(255,42,42,.34);color:var(--red)}
.outreach-mini .om-subject{color:var(--fg);font-size:15.5px;font-weight:600;margin-bottom:5px}
.outreach-mini .om-subject .re{color:var(--fg-faint);font-weight:400}
.outreach-mini .om-line{color:var(--fg-muted);font-size:14px;line-height:1.5;margin:0}