/* product-usage-by-company figures. This article-local stylesheet loads after resources.css.
   Replaces product-usage-by-company-data-model.svg, product-usage-by-company-processing-flow.svg
   and product-usage-by-company-overview.svg. */

.pc-fig {
  margin: 38px 0;
  padding: 30px 32px 28px;
  border: 1px solid #cfdcf0;
  border-radius: 20px;
  background: #f4f7fb;
  color: #071b3a;
}

h3.pc-h {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #071b3a;
}

p.pc-k {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6a80;
}

/* ---------- figure 1: data model ---------- */

.pc-model {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) 44px minmax(0, 1.05fr);
  align-items: start;
  gap: 0;
}

.pc-event {
  padding: 18px 20px 18px;
  border: 1px solid #d7e2f2;
  border-left: 5px solid #2f6df6;
  border-radius: 16px;
  background: #fff;
}

dl.pc-fields {
  margin: 0;
  display: grid;
  gap: 2px;
}

dl.pc-fields > div {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
}

.pc-fields__hi {
  background: #eaf1fe;
  box-shadow: inset 0 0 0 1px #c6d9fb;
}

dl.pc-fields dt,
dl.pc-fields dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

dl.pc-fields dt { color: #5a6a80; }

dl.pc-fields dd {
  font-weight: 600;
  color: #071b3a;
}

.pc-fields__hi dt,
.pc-fields__hi dd { color: #16408f; }

p.pc-event__note {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid #e6edf7;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

p.pc-event__note b { color: #071b3a; }

.pc-brace {
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

.pc-brace::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 22px;
  height: 2px;
  background: #b0bdcd;
}

.pc-dims {
  display: grid;
  gap: 10px;
}

.pc-dim {
  position: relative;
  padding: 13px 16px 14px;
  border: 1px solid #d7e2f2;
  border-radius: 14px;
  background: #fff;
}

.pc-dim::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: -36px;
  left: -23px;
  width: 15px;
  border-top: 2px solid #b0bdcd;
  border-left: 2px solid #b0bdcd;
}

.pc-dim:last-child::before {
  bottom: auto;
  height: 2px;
  border-left: 0;
}

.pc-dim::after {
  content: "";
  position: absolute;
  top: 21px;
  left: -9px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #b0bdcd;
}

p.pc-dim__t {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
}

p.pc-dim__t em {
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  color: #5a6a80;
}

p.pc-dim__d {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

p.pc-dim__d code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #33465f;
}

p.pc-parent {
  margin: 9px 0 0;
  padding: 8px 12px;
  border-radius: 9px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
  font-size: 13.5px;
  line-height: 1.35;
  color: #4b5b76;
}

p.pc-parent b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #071b3a;
}

.pc-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  margin: 0 0 9px;
}

.pc-chain span {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f8;
  font-size: 13px;
  font-weight: 600;
  color: #33465f;
}

.pc-chain span::after {
  content: "\2192";
  margin-left: 8px;
  color: #5a6a80;
}

.pc-chain__end {
  background: #eaf1fe;
  color: #16408f;
}

.pc-chain span.pc-chain__end::after { content: none; }

/* ---------- figure 2: processing flow ---------- */

.pc-pipe {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}

.pc-stage {
  position: relative;
  display: grid;
  align-content: start;
  padding: 15px 16px 16px;
  border: 1px solid #d7e2f2;
  border-radius: 14px;
  background: #fff;
}

.pc-stage--out {
  border-color: #cfe0d6;
  background: #eef6f1;
}

.pc-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #b0bdcd;
}

.pc-stage:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  width: 8px;
  height: 2px;
  margin-top: -1px;
  background: #b0bdcd;
}

p.pc-stage__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 0 8px;
  border-radius: 50%;
  background: #071b3a;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.pc-stage--out p.pc-stage__n { background: #17693f; }

p.pc-stage__t {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
  text-wrap: pretty;
}

.pc-watch {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
  padding: 14px 18px 15px;
  border: 1px solid #d7e2f2;
  border-radius: 14px;
  background: #fff;
}

p.pc-watch__k {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6a80;
}

.pc-watch__set {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pc-watch__set span {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
  font-size: 13px;
  font-weight: 600;
  color: #33465f;
}

p.pc-pipefoot {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-left: 4px solid #2f6df6;
  border-radius: 0 10px 10px 0;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: #33465f;
  text-wrap: pretty;
}

/* ---------- figure 3: company overview ---------- */

.pc-acct {
  padding: 4px 24px 20px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.pc-acct__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 0 14px;
  border-bottom: 2px solid #071b3a;
}

p.pc-acct__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #071b3a;
}

p.pc-acct__meta {
  margin: 0;
  font-size: 14px;
  color: #5a6a80;
}

.pc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.pc-kpi {
  padding: 13px 16px 14px;
  border-radius: 12px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}

p.pc-kpi__v {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #071b3a;
  font-variant-numeric: tabular-nums;
}

p.pc-kpi__v em {
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
}

p.pc-kpi__k {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.25;
  color: #5a6a80;
}

.pc-diag {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pc-card {
  padding: 14px 16px 15px;
  border: 1px solid #d7e2f2;
  border-radius: 14px;
  background: #fff;
}

.pc-card--wide { grid-column: 1 / -1; }

p.pc-card__k {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6a80;
}

p.pc-card__k b {
  margin-left: 4px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: #071b3a;
}

p.pc-card__d {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

.pc-days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.pc-days i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #eef2f8;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}

.pc-days i.on {
  background: #2f6df6;
  box-shadow: none;
}

.pc-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pc-areas span {
  padding: 9px 13px;
  border: 1px dashed #b0bdcd;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #5a6a80;
}

.pc-areas span.on {
  border: 1px solid #2f6df6;
  background: #eaf1fe;
  color: #16408f;
}

.pc-users {
  display: grid;
  gap: 9px;
}

.pc-user {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

p.pc-user__n {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #071b3a;
}

p.pc-user__n em {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: #5a6a80;
}

.pc-ubar {
  height: 24px;
  border-radius: 5px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #e6edf7;
}

.pc-ubar span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 30px;
  padding-right: 9px;
  border-radius: 5px;
  background: #5a6a80;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pc-user:first-child .pc-ubar span { background: #8a5a06; }

p.pc-acct__read {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-left: 4px solid #2f6df6;
  border-radius: 0 10px 10px 0;
  background: #f4f7fb;
  font-size: 14px;
  line-height: 1.5;
  color: #33465f;
  text-wrap: pretty;
}

p.pc-acct__read b { color: #071b3a; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .pc-pipe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 22px;
  }

  .pc-stage:nth-child(3)::before,
  .pc-stage:nth-child(3)::after { display: none; }

  dl.pc-fields > div { grid-template-columns: 122px minmax(0, 1fr); }

  .pc-user { grid-template-columns: 158px minmax(0, 1fr); }
}

@media (max-width: 940px) {
  .pc-fig { padding: 24px 20px 22px; }

  h3.pc-h { font-size: 22px; }

  .pc-model {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .pc-brace { display: none; }

  .pc-dim::before,
  .pc-dim::after { display: none; }

  .pc-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pc-stage::before,
  .pc-stage::after { display: none; }

  .pc-stage:nth-child(odd)::before,
  .pc-stage:nth-child(odd)::after { display: block; }

  .pc-watch {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pc-diag { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .pc-pipe { grid-template-columns: minmax(0, 1fr); }

  .pc-stage::before,
  .pc-stage::after { display: none !important; }

  dl.pc-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pc-days { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .pc-areas { grid-template-columns: minmax(0, 1fr); }

  .pc-user {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}