/* dealership.armohub.ch: on top of /noir-champagne.css. The illustrations (all fictional data). */

/* Hero: the Schedule page and the email report on a phone. */
.dl-hero-fig,
.dl-sheet-fig,
.dl-week-fig {
  margin: 0;
}

.dl-hero-fig figcaption,
.dl-sheet-fig figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
}

.dl-hero {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.55));
}

.dl-hero .win {
  fill: #0d0f13;
  stroke: var(--line);
}

.dl-hero .dot3 {
  fill: #262a33;
}

.dl-hero .hair {
  stroke: #1f232b;
}

.dl-hero .lbl {
  fill: var(--muted);
  font: 500 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dl-hero .big {
  fill: var(--ivory);
  font: 600 18px var(--sans);
}

.dl-hero .u {
  fill: var(--text);
  font: 400 12.5px var(--sans);
}

.dl-hero .m {
  fill: var(--muted);
}

.dl-hero .time {
  fill: var(--gold-hi);
  font: 600 15px var(--mono);
}

.dl-hero .pill {
  fill: rgb(212 178 106 / 0.08);
  stroke: rgb(212 178 106 / 0.5);
}

.dl-hero .chip-g {
  fill: rgb(212 178 106 / 0.1);
  stroke: var(--gold);
  stroke-width: 1.4;
}

.dl-hero .chip-q {
  fill: none;
  stroke: var(--line);
}

.dl-hero .phone {
  fill: #07080b;
  stroke: #3a3f4b;
  stroke-width: 2;
}

.dl-hero .mail {
  fill: #111318;
  stroke: rgb(71 215 255 / 0.4);
}

/* The week in the results. */
.dl-week-fig {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.015);
}

.dl-week .grid {
  stroke: #1f232b;
}

.dl-week .sink {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.dl-week .stay {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.dl-week .tick {
  fill: var(--gold-hi);
}

.dl-week .e,
.dl-arch .e {
  fill: var(--text);
  font: 500 12px var(--sans);
}

.dl-week-fig figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.dl-week-fig figcaption .mono {
  color: var(--muted);
  font-size: 0.68rem;
}

.dl-mail-card {
  padding: 10px 16px;
  border: 1px solid rgb(71 215 255 / 0.45);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.92rem;
}

.dl-mail-card b {
  color: var(--signal);
  font-weight: 600;
}

/* The architecture. */
.dl-arch-wrap {
  margin-top: 48px;
  padding: clamp(18px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow-x: auto;
}

.dl-arch {
  min-width: 760px;
}

.dl-arch .e {
  font-size: 13px;
}

.dl-arch .s {
  font-size: 10.5px;
}

.dl-small {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin-top: 30px;
  padding-left: 1.1em;
  color: var(--text);
}

.dl-small li::marker {
  color: var(--gold);
}

/* The info sheet: a sheet of paper, slightly turned. */
.dl-sheet-grid {
  align-items: center;
}

.dl-sheet-fig {
  justify-self: center;
  width: min(380px, 86%);
}

.dl-sheet {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.6));
}

.dl-sheet .brand {
  fill: var(--ivory);
  font: 400 26px var(--serif);
}

.dl-sheet .addr {
  fill: #a9a59c;
  font: 500 9.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dl-sheet .car {
  fill: #111318;
  font: 400 34px var(--serif);
}

.dl-sheet .price {
  fill: #9c7a37;
  font: 700 36px var(--sans);
}

.dl-sheet .k {
  fill: #6f6a60;
  font: 500 11px var(--sans);
}

.dl-sheet .v {
  fill: #111318;
  font: 600 16px var(--sans);
}

/* The roles diagram (supplied): scrolls sideways on phones rather than shrinking to unreadable. */
.roles-wrap {
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow-x: auto;
  background: #07080b;
}

.roles-svg {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
}

@media (max-width: 760px) {
  .dl-small {
    grid-template-columns: 1fr;
  }
}

/* Seven steps: four, then three. */
@media (min-width: 1000px) {
  .steps-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}