/* ============================================================================
   Website Design & Maintenance — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css, shared with SmartComply
   and SmartBot. Everything here belongs to this page: the client-site shots,
   the three-step integration journey, the help-site preview, the maintenance
   panel with its sample report, and the two project cards.
   ========================================================================= */

/* The banner takes recLite's field rather than the shared white, because this
   banner is a pair of screenshots on a card rather than one full-bleed
   picture — there is no photograph edge for a tint to outline. */

/* --- The banner artwork ---------------------------------------------------------
   The picture carries its own ground as transparency, so nothing frames it and
   the banner's wash shows through around the concept screens. */
.wd-hero__art {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Client site shots ----------------------------------------------------------
   The project photographs run the full width of their card, bleeding into its
   padding and rounding with its top corners.

   Both are square, so fitting them inside a fixed box left them floating in
   the middle of a wide card with empty space either side. They are cropped to
   a banner instead — centred, because the phone sits near the middle of both
   frames — and a shared ratio also keeps the two cards' headings level.   */

.wd-shot {
  margin: 0;
}

.wd-shot--project {
  margin: calc(var(--wd-card-pad) * -1) calc(var(--wd-card-pad) * -1) 0;
}

.wd-shot--project img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

/* --- 3. Custom design ----------------------------------------------------------- */

.wd-design__grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .wd-design__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* On the yellow band, so the copy column takes a white card the way the
   questions and the cards elsewhere on the page do. */
.wd-design__copy {
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.wd-design__body {
  margin: 0 0 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

.wd-design__shots {
  min-width: 0;
}

/* The concepts artwork has an opaque ground, so on the yellow band it takes a
   card — the same one the copy beside it sits on — rather than reading as a
   white rectangle dropped on the field. */
.wd-concepts {
  margin: 0;
  padding: clamp(0.65rem, 0.5rem + 0.5vw, 0.9rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.wd-concepts img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.wd-concepts figcaption {
  margin-top: 0.6rem;
}

/* --- 4. The integration journey --------------------------------------------------
   The owner's artwork carries the three steps. Its ground is opaque and only a
   few levels off the section's field, which would show as a faint rectangle,
   so it takes a card — the same one the concepts artwork uses.             */

.wd-journey {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: clamp(0.65rem, 0.5rem + 0.5vw, 0.9rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.wd-journey__scroll {
  border-radius: var(--r-lg);
}

.wd-journey img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.wd-journey figcaption {
  margin-top: 0.6rem;
}

/* Below this the three screens would be about 110px tall — legible to nobody.
   The picture keeps a readable width and the strip scrolls, which is also why
   the scroller is focusable: a keyboard user has to be able to reach it. */
@media (max-width: 749px) {
  .wd-journey__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wd-journey__scroll img {
    width: 34rem;
    max-width: none;
  }

  .wd-journey__scroll:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
  }
}

/* The "another platform?" line, which the document keeps as an open question
   rather than a claim — so it sits as a note, not as a fourth card. */
.wd-other {
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) auto 0;
  padding: 0.75rem clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: center;
  color: var(--text-secondary);
}

.wd-other__k {
  font-weight: 700;
  color: var(--blue-700);
}

/* --- 5. Everyday use -----------------------------------------------------------------
   The owner's icons and visuals, from this section's mockup. The icons carry
   their own circle, so nothing is drawn behind them. The visuals keep their
   light ground, which on the dark band reads as the card each one is.      */


.sc-out__title .wd-every__icon {
  filter: invert(1) brightness(100);
}

.wd-every__icon {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
}

.wd-every__shot {
  display: block;
  width: 100%;
  max-width: 31.5rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg);
}

/* The phone is tall and narrow; at panel width it would tower over the staff
   tools opposite, so it is held to its own natural size. */
.wd-every__shot--phone {
  max-width: 14.25rem;
}

/* --- 6. The maintenance panel --------------------------------------------------------
   Deliberately its own block below the timeline: the document calls the
   service an add-on with a separately agreed scope, so it should not read as
   the sixth step of the project.                                             */

.wd-maint {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  align-items: center;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

@media (min-width: 900px) {
  .wd-maint {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  }
}

.wd-maint__copy>* {
  min-width: 0;
}

.wd-maint__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
}

.wd-maint__k {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
}

.wd-maint__d {
  margin: 0.75rem 0 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

.wd-maint__copy .sc-note {
  margin-top: 1rem;
}

.wd-report {
  padding: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}

.wd-report__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
}

.wd-report__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

.wd-report__when {
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.wd-report__rows {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-report__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-900);
}

.wd-report__icon {
  flex: none;
  color: var(--blue-600);
}

.wd-report__go {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
}

.wd-report__foot {
  margin: 0.7rem 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* The five-step row is one more than the other pages carry, so it takes a
   narrower minimum before it wraps. */
@media (min-width: 1100px) {
  .wd-proc__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* No tile behind these: the mockup draws them bare on the card, unlike the
   circled sets on the sibling product pages. */
.wd-step__icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0.85rem auto 0;
}

/* --- 7. The project cards -------------------------------------------------------------- */

.wd-work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.wd-project {
  /* Named, because the photograph above cancels it to reach the card edge. */
  --wd-card-pad: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--wd-card-pad);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.wd-project__k {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

.wd-project__line {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--blue-600);
}

.wd-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.wd-tag {
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-700);
}

.wd-project__d {
  margin: 0.85rem 0 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Pushes the link to the foot so the two cards' links line up. */
.wd-project .sc-faq__link {
  margin-top: auto;
  align-self: flex-start;
}

.wd-work__cta {
  flex-wrap: wrap;
  gap: 0.85rem;
}