/* ============================================================
   show.css: the "show, don't tell" pieces shared across pages.
   Real screens of the Montar CRM in browser and phone frames, and
   one site we built. Loaded after agency.css (or landing.css).
   Device frames stay night in both themes, like the frames on /crm.
   ============================================================ */

:root {
  --show-frame: var(--night-2);
  --show-frame-line: var(--gold-faint);
  --show-dot: var(--night-line-2);
  --show-shadow: 0 40px 70px -36px rgba(10, 14, 19, 0.55), 0 14px 28px -20px rgba(10, 14, 19, 0.4);
}

/* ---------------------------------------------------------- device frames */
.dev-frame {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--show-frame-line);
  background: var(--show-frame);
  box-shadow: var(--show-shadow);
  overflow: hidden;
}
.dev-frame-bar {
  display: flex; align-items: center; gap: 5px;
  height: 24px; padding-inline: 10px;
  border-bottom: 1px solid var(--show-frame-line);
}
.dev-frame-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--show-dot); }
.dev-frame-bar span {
  margin-left: 8px; padding: 2px 10px; border-radius: 6px;
  font-size: 0.64rem; color: var(--ivory-2); background: var(--night-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dev-frame picture, .dev-phone picture { display: block; }
.dev-frame img, .dev-phone img { display: block; width: 100%; height: auto; }

.dev-phone {
  position: relative;
  padding: 6px;
  border-radius: 30px;
  background: var(--night);
  border: 1px solid var(--show-frame-line);
  box-shadow: var(--show-shadow);
}
.dev-phone > picture { border-radius: 24px; overflow: hidden; }

/* Captions under real screens: caps label, led by a ring. */
.show-cap {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.show-cap::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1.25px solid var(--sig);
}

/* ---------------------------------------------------------- hero phone */
.ag-phone { position: absolute; left: 0; bottom: 1.5rem; width: clamp(150px, 34%, 210px); z-index: 2; }

/* ---------------------------------------------------------- home: services beside the CRM */
.svc-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.svc-proof { position: sticky; top: var(--sticky-top); margin: 0; display: grid; gap: 0.9rem; }
.svc-proof .dev-frame + .dev-frame { margin-left: 10%; }
@media (max-height: 760px) { .svc-proof { position: static; } }

/* ---------------------------------------------------------- the path, as CRM screens */
.path {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
}
.path li { display: grid; align-content: start; gap: 0.8rem; }
.path-shot {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  border: 1px solid var(--hair);
  background: var(--paper-2);
  overflow: hidden;
}
.path-shot picture, .path-shot img { display: block; width: 100%; height: 100%; }
.path-shot img { object-fit: cover; object-position: top center; }
.path-shot--mid img { object-position: center; }
.path-k {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; font-weight: var(--w-medium); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft);
}
.path-k b {
  display: grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.25px solid var(--sig); color: var(--trust);
  font-family: var(--font-display); font-weight: var(--w-display); font-size: 0.78rem; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.path p { margin-top: -0.4rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------------------------------------------------------- chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.chip-row li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-chip);
  border: 1px solid var(--hair-2); background: var(--card);
  font-size: 0.88rem; font-weight: var(--w-medium);
}
.chip-row li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.25px solid var(--sig); }

/* ---------------------------------------------------------- a desktop screen with a phone over its corner */
.ag-platform:has(.show-pair) { grid-template-columns: 1.15fr 0.85fr; }
.show-pair { position: relative; padding: 0 12% 3rem 0; }
.show-pair .dev-phone { position: absolute; right: 0; bottom: 0; width: 30%; }
.lp-crm { margin: 0; }

/* Wide real screen with a caption, used for report crops. */
.show-wide { display: grid; gap: 0.8rem; }

/* ---------------------------------------------------------- What we do: a real screen under each service */
.svc-show { margin: 1.6rem 0 0; display: grid; gap: 0.7rem; }
.svc-show--plain .dev-frame { max-width: 720px; }
.work-media {
  position: relative; overflow: hidden;
  height: clamp(280px, 26vw, 380px);
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--paper-2);
}
.work-site { position: absolute; inset: 1.6rem 1.4rem auto 1.4rem; }
.work-site .dev-frame { width: 88%; }
.work-site .dev-phone { position: absolute; right: 0; top: 2.2rem; width: 27%; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .svc-split { grid-template-columns: 1fr; }
  .svc-proof { position: static; }
  .path { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-proof .dev-frame + .dev-frame { margin-left: 0; }
  .path {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem;
    margin-inline: calc(-1 * var(--shell-pad)); padding-inline: var(--shell-pad);
    scroll-padding-inline: var(--shell-pad);
  }
  .path li { scroll-snap-align: start; }
  .show-pair { padding-right: 18%; }
  .show-pair .dev-phone { width: 36%; }
  .ag-phone { width: 34%; bottom: 0.5rem; }
  .work-media { height: 250px; }
}

@media print {
  .work-media, .path-shot { background: transparent; }
}

/* Under the path: what else the CRM does, and the way to see it. */
.path-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.path-foot .chip-row { margin-top: 0; }
@media (max-width: 640px) { .path-foot .chip-row { display: none; } }