/* FleetCare Phase 3: illustrative product screens, with no interactive UI. */
.p3-section {
  padding-block: var(--p2-section-space, clamp(4.5rem, 8vw, 8rem));
  background: var(--p2-bg, #F5F7F5);
  color: var(--p2-ink, #051A2D);
}

.p3-container,
.p3-section-head,
.p3-gallery,
.p3-figure,
.p3-stage,
.p3-phone,
.p3-workstation,
.p3-dashboard-body,
.p3-dashboard-main {
  min-inline-size: 0;
}

.p3-section-head {
  display: grid;
  gap: 1.25rem 3rem;
  align-items: end;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.p3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-end: 0.75rem;
  color: var(--p2-accent-text, #805106);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.p3-eyebrow::before {
  content: '';
  inline-size: 0.45rem;
  block-size: 0.45rem;
  flex: 0 0 auto;
  background: var(--p2-accent, #D5AA43);
  transform: rotate(45deg);
}

.p3-section h2 {
  max-inline-size: 19ch;
  margin: 0;
  color: var(--p2-ink, #051A2D);
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
}

:lang(ar) .p3-section h2 {
  line-height: 1.4;
  letter-spacing: 0;
}

.p3-introduction p {
  max-inline-size: 34rem;
  margin: 0;
  color: var(--p2-muted, #405e5a);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.p3-introduction .p3-notice {
  display: inline-block;
  margin-block-start: 1rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--p2-border, #627d70);
  border-radius: 0.4rem;
  background: var(--p2-surface, #FFFFFF);
  color: var(--p2-ink, #051A2D);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.55;
}

.p3-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 1rem;
}

.p3-figure {
  margin: 0;
}

.p3-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 32rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--p2-border, #627d70);
  border-radius: var(--p2-radius-large, 1.25rem);
  background: var(--p2-surface-alt, #E8F0EB);
}

/* A quiet, abstract geometric weave; no emblems or flags. */
.p3-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.11;
  background-image: repeating-linear-gradient(45deg, transparent 0 27px, #6c8a7d 27px 28px, transparent 28px 56px), repeating-linear-gradient(-45deg, transparent 0 27px, #6c8a7d 27px 28px, transparent 28px 56px);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  pointer-events: none;
}

.p3-stage-company {
  min-block-size: 23rem;
}

.p3-caption {
  display: grid;
  gap: 0.3rem;
  padding-block-start: 1.1rem;
  line-height: 1.7;
}

.p3-caption strong {
  color: var(--p2-ink, #051A2D);
  font-size: 1.2rem;
  line-height: 1.5;
}

.p3-caption > span {
  max-inline-size: 48rem;
  color: var(--p2-muted, #405e5a);
  font-size: 0.9375rem;
}

/* The screen interiors are intentionally light in either page theme, like a
   physical device showing a conceptual interface. All colors have fixed pairs. */
.p3-phone,
.p3-laptop {
  background: #102e32;
  color: #051A2D;
  box-shadow: 0 16px 35px rgba(5, 42, 43, 0.22), 0 3px 8px rgba(5, 42, 43, 0.15);
}

.p3-phone {
  inline-size: min(100%, 17rem);
  padding: 0.3rem;
  border: 1px solid #48635f;
  border-radius: 1.9rem;
}

.p3-phone-screen {
  overflow: hidden;
  border-radius: 1.55rem;
  background: #FFFFFF;
  color: #051A2D;
}

.p3-phone-top {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 1.15rem;
  background: #FFFFFF;
}

.p3-phone-speaker {
  inline-size: 2.8rem;
  block-size: 0.28rem;
  border-radius: 1rem;
  background: #102e32;
}

.p3-phone-body {
  padding: 0.35rem 0.9rem 0.8rem;
}

.p3-screen-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-inline-size: 0;
  margin-block-end: 1rem;
}

.p3-screen-brand img:first-child {
  flex: 0 0 1.9rem;
  inline-size: 1.9rem;
  block-size: 1.9rem;
}

.p3-screen-brand .p3-wordmark {
  inline-size: auto;
  max-inline-size: 6rem;
  block-size: 1rem;
}

.p3-screen-kicker {
  color: #805106;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.5;
}

.p3-screen-title {
  margin-block: 0.2rem 0.85rem;
  color: #051A2D;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

:lang(ar) .p3-screen-title {
  line-height: 1.55;
}

.p3-scan-tile,
.p3-location {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-inline-size: 0;
  padding: 0.65rem;
  border: 1px solid #b2c8ba;
  border-radius: 0.65rem;
  background: #edf3ec;
}

.p3-scan-tile strong,
.p3-location strong,
.p3-offer strong {
  display: block;
  color: #051A2D;
  font-size: 0.875rem;
  line-height: 1.45;
}

.p3-scan-tile small,
.p3-location small {
  display: block;
  color: #405e5a;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.p3-scan-mark {
  display: grid;
  place-items: center;
  flex: 0 0 2.5rem;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 2px solid #034633;
  border-radius: 0.45rem;
  background: #FFFFFF;
  color: #034633;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.p3-screen-label {
  margin-block: 0.9rem 0.45rem;
  color: #051A2D;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.p3-service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.p3-service {
  padding: 0.25rem 0.5rem;
  border: 1px solid #a2bbae;
  border-radius: 0.4rem;
  background: #FFFFFF;
  color: #051A2D;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.p3-service:first-child {
  border-color: #034633;
  background: #034633;
  color: #FFFFFF;
}

.p3-location {
  margin-block-start: 0.85rem;
  background: #FFFFFF;
}

.p3-location-mark {
  position: relative;
  flex: 0 0 1.5rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 2px solid #034633;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) scale(0.75);
}

.p3-location-mark::after {
  content: '';
  position: absolute;
  inset: 0.3rem;
  border: 2px solid #034633;
  border-radius: 50%;
}

.p3-screen-action {
  margin-block-start: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #034633;
  border-radius: 0.5rem;
  background: #034633;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.p3-phone-home {
  inline-size: 4.2rem;
  block-size: 0.25rem;
  margin: 0.25rem auto 0.5rem;
  border-radius: 1rem;
  background: #102e32;
}

.p3-offer {
  padding: 0.8rem;
  border: 1px solid #b2c8ba;
  border-radius: 0.7rem;
  background: #edf3ec;
}

.p3-offer-tag {
  display: inline-block;
  margin-block-end: 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  background: #D5AA43;
  color: #051A2D;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.p3-offer-action {
  margin-block-start: 0.7rem;
}

.p3-tech-steps {
  border-block-start: 1px solid #ccdcd1;
}

.p3-tech-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-inline-size: 0;
  padding-block: 0.5rem;
  border-block-end: 1px solid #ccdcd1;
  color: #051A2D;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.p3-step-mark {
  flex: 0 0 0.8rem;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border: 2px solid #034633;
  border-radius: 50%;
  background: #FFFFFF;
}

/* Laptop and dashboard: responsive contents rather than a scaled screenshot. */
.p3-workstation {
  container: p3-workstation / inline-size;
  inline-size: min(100%, 38rem);
}

.p3-laptop {
  padding: 0.3rem 0.35rem 0.4rem;
  border: 1px solid #48635f;
  border-radius: 0.85rem 0.85rem 0.25rem 0.25rem;
}

.p3-laptop-camera {
  inline-size: 0.25rem;
  block-size: 0.25rem;
  margin: 0.05rem auto 0.3rem;
  border-radius: 50%;
  background: #b2c8ba;
}

.p3-laptop-screen {
  overflow: hidden;
  border-radius: 0.35rem;
  background: #FFFFFF;
  color: #051A2D;
}

.p3-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: 2rem;
  padding: 0.35rem 0.65rem;
  border-block-end: 1px solid #cddbd1;
  background: #edf3ec;
}

.p3-browser-dots {
  display: flex;
  gap: 0.25rem;
}

.p3-browser-dots i {
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: #627d70;
}

.p3-browser-label {
  color: #405e5a;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.p3-dashboard-body {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 2.2fr);
  min-block-size: 20rem;
}

.p3-dashboard-sidebar {
  padding: 0.8rem 0.6rem;
  border-inline-end: 1px solid #cddbd1;
  background: #f3f7f0;
}

.p3-dashboard-sidebar .p3-screen-brand {
  gap: 0.2rem;
  margin-block-end: 1.2rem;
}

.p3-dashboard-sidebar .p3-screen-brand img:first-child {
  flex-basis: 1.5rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.p3-dashboard-sidebar .p3-wordmark {
  max-inline-size: 4.5rem;
  block-size: 0.8rem;
}

.p3-dashboard-nav {
  display: grid;
  gap: 0.25rem;
}

.p3-dashboard-nav span {
  padding: 0.35rem 0.45rem;
  border-radius: 0.3rem;
  color: #405e5a;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.p3-dashboard-nav span:first-child {
  background: #dcebe0;
  color: #051A2D;
}

.p3-dashboard-main {
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

.p3-web-title {
  margin-block: 0.15rem 0.1rem;
  color: #051A2D;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.p3-web-hint {
  color: #405e5a;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.p3-dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-block-start: 0.85rem;
}

.p3-dashboard-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-inline-size: 0;
  min-block-size: 4.7rem;
  padding: 0.6rem;
  border: 1px solid #c4d5c8;
  border-radius: 0.45rem;
  background: #FFFFFF;
  color: #051A2D;
}

.p3-dashboard-tile strong {
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.p3-dashboard-symbol {
  display: block;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 2px solid #034633;
  border-radius: 0.25rem;
  box-shadow: inset 0 -0.25rem #e0eade;
}

.p3-symbol-1 { border-radius: 50%; }
.p3-symbol-2 { transform: rotate(45deg) scale(0.8); }
.p3-symbol-3 { border-block-end-width: 4px; }

.p3-finance {
  margin-block-start: 0.7rem;
  padding: 0.65rem;
  border: 1px solid #c4d5c8;
  border-radius: 0.45rem;
  background: #f3f7f0;
  color: #051A2D;
}

.p3-finance > strong {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.p3-finance > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-block-start: 0.45rem;
}

.p3-finance span {
  padding: 0.2rem 0.4rem;
  border: 1px solid #b2c8ba;
  border-radius: 0.3rem;
  background: #FFFFFF;
  color: #051A2D;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.p3-laptop-base {
  position: relative;
  block-size: 0.65rem;
  margin-inline: -0.35rem;
  border: 1px solid #627d70;
  border-radius: 0 0 50% 50%;
  background: #bcc9bf;
}

.p3-laptop-base span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 42%;
  inline-size: 16%;
  block-size: 0.22rem;
  border-radius: 0 0 0.3rem 0.3rem;
  background: #627d70;
}

@container p3-workstation (max-width: 30rem) {
  .p3-dashboard-body {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
  }

  .p3-dashboard-sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    padding: 0.55rem;
    border-inline-end: 0;
    border-block-end: 1px solid #cddbd1;
  }

  .p3-dashboard-sidebar .p3-screen-brand { margin: 0; }
  .p3-dashboard-nav { display: flex; flex-wrap: wrap; gap: 0.2rem; }
  .p3-dashboard-nav span { padding: 0.2rem 0.3rem; }
}

@media (min-width: 760px) {
  .p3-section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }

  .p3-home .p3-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .p3-home .p3-figure-company {
    grid-column: 1 / -1;
  }

  .p3-context .p3-gallery {
    max-inline-size: 60rem;
    margin-inline: auto;
  }

  .p3-context .p3-figure {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .p3-context .p3-figure-company {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  }

  .p3-context .p3-caption { padding: 0; }
}

@media (min-width: 1100px) {
  .p3-home .p3-gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.85fr);
  }

  .p3-home .p3-figure-company { grid-column: auto; }
  .p3-home .p3-stage { min-block-size: 36rem; }
}

@media (max-width: 400px) {
  .p3-stage { padding: 0.8rem; }
  .p3-stage-company { min-block-size: 0; padding-block: 1.5rem; }
  .p3-phone-body { padding-inline: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .p3-section *, .p3-section *::before, .p3-section *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .p3-stage,
  .p3-phone,
  .p3-laptop,
  .p3-laptop-base,
  .p3-scan-tile,
  .p3-location,
  .p3-offer,
  .p3-service,
  .p3-screen-action,
  .p3-dashboard-tile,
  .p3-finance,
  .p3-finance span,
  .p3-notice {
    border: 1px solid CanvasText;
  }

  .p3-section * { box-shadow: none; }
  .p3-stage::before { display: none; }
}