/* ==========================================================================
   Point.me v2 (draft) — sections unique to this page's redesign.

   Reuses tokens.css/base.css/chrome.css/case-study.css/results.css/
   lightbox.css as-is: header, at-a-glance/editorial row, context-single,
   the Results stat-box grid, and made-this-work/principles are all shared
   markup+classes. This file only covers the new "work-section" narrative
   stream (native app-mockup screens exported as flat images, per the same
   call made on calendly2.html), plus the v2 hero illustration.
   ========================================================================== */

/* ---- Hero illustration ---- */
/* Same 1178x1694 ratio as the v1 Point.me hero asset -- see
   .pointme-hero-image in case-study.css. New artwork, same shape,
   contain not cover so the composed illustration isn't cropped. */
.pointme2-hero-image {
  background: var(--bg) url("../assets/pointme2-hero.webp") center / contain no-repeat;
  --hero-ratio: 1178 / 1694;
  aspect-ratio: var(--hero-ratio);
}

/* ---- Work section ---- */
.work-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 60px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* Rhythm applied on Calendly's equivalent redesign: 120px between every
   section from the first work stream down through Results. */
.work-section + .upgrade-band-section,
.upgrade-band-section + .work-section,
.work-section + .results { margin-top: 120px; }

.work-stream-head h3,
.upgrade-band-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  margin: 10px 0 12px;
}

.work-stream-head p,
.upgrade-band-head p {
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 0 12px;
}

.work-shots {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.work-shots img,
.work-shots video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.work-shots--3 img { flex: 1; min-width: 0; }

.work-shots--wide { max-width: 900px; margin-inline: auto; }

/* Side-by-side stream: copy and one screenshot in a row. Figma node
   513:127489 -- same pattern as Calendly's .work-stream--side. */
.work-stream--side {
  display: flex;
  align-items: center;
  gap: 48px;
}
.work-stream--side .work-stream-head { flex: 0 0 392px; }
.work-stream--side .work-shots { flex: 1; margin-top: 0; }

/* ---- Free-tier full-bleed dot grid ----
   Figma node 513:132765: the map/deal-browsing screenshot floats over a
   full-bleed dot grid instead of a plain background, same technique as
   Calendly's admin-center-dots. The shipped screenshot already carries its
   own rounded corners and shadow (transparent corners), so no extra frame
   styling here. */
.freetier-dots {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
  background-size: 18px 18px;
  display: flex;
  justify-content: center;
  padding: 40px 0;
  margin-top: 24px;
}
.freetier-dots img {
  display: block;
  max-width: 1250px;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .work-section { gap: 48px; padding: 40px var(--gutter) 0; }
  .work-shots--3 { flex-direction: column; }
  .work-stream--side { flex-direction: column; align-items: stretch; }
  .work-stream--side .work-stream-head { flex: none; }
  .freetier-dots { padding: 24px 0; }
}

/* ---- Upgrade band ----
   Figma node 513:132370: like Calendly's Admin Center, this stream sits on
   its own full-bleed iso-grid band (the same tile .context-single paints
   behind its card) instead of the plain background the other work streams
   use. */
.upgrade-band-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px var(--gutter);
}
.upgrade-band-head {
  padding: 32px;
  max-width: 760px;
}
.upgrade-band-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--paper) url("../assets/iso-grid.webp") repeat;
  background-size: 312px 180px;
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
.upgrade-band-grid img,
.upgrade-band-grid video {
  display: block;
  max-width: 1150px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .upgrade-band-head { padding: 0 0 24px; }
  .upgrade-band-grid { padding: 32px 20px; }
}