/* The printed A4 offer sheet (angebot.html). Same look as the site: white, Barlow, one accent. */
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #111315;
  --muted: #6a6e75;
  --line: #dfe2e6;
  --soft: #f5f6f7;
  --paper: #ffffff;
  --accent: #2f5bff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #e9ebee;
  color: var(--ink);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Print the soft band and the blue circles as they are on screen. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Small headings above each block */
h2 {
  color: var(--muted);
  font-size: 9pt;
  font-weight: 500;
  letter-spacing: 0;
}

/* Shown on screen only */
.a4__print {
  width: 210mm;
  max-width: 100%;
  margin: 1rem auto 0;
  padding-inline: 1rem;
  font-size: 1rem;
}

.a4__print button {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.a4__print a {
  margin-left: 1rem;
  color: inherit;
}

/* The page */
.sheet {
  display: flex;
  flex-direction: column;
  width: 210mm;
  max-width: 100%;
  min-height: 296mm;
  margin: 1rem auto 2rem;
  padding: 13mm 18mm 11mm;
  background: var(--paper);
  box-shadow: 0 2rem 3rem -2rem rgba(17, 19, 21, 0.35);
}

.sheet__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--muted);
}

.sheet__name {
  color: var(--ink);
  font-size: 12pt;
  font-weight: 600;
}

/* Patrick's mark, as on the site */
.dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: var(--accent);
}

h1 {
  margin-top: 10mm;
  font-size: 26pt;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h1 span {
  display: block;
}

.soft {
  color: var(--muted);
}

/* The price band */
.price {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8mm;
  margin-top: 7.5mm;
  padding: 6mm 9mm;
  border-radius: 5mm;
  background: var(--soft);
}

.price__figure {
  font-size: 60pt;
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.price__once {
  margin-top: 3mm;
  color: var(--muted);
  font-size: 11pt;
}

.price__promise {
  max-width: 52mm;
  margin-top: 5mm;
  font-size: 12.5pt;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.price ul {
  margin-top: 2mm;
  border-bottom: 0.2mm solid var(--line);
}

.price li {
  padding-block: 1.6mm;
  border-top: 0.2mm solid var(--line);
  font-size: 11pt;
  font-weight: 500;
}

/* Extras, each with a box to tick by hand */
.extras {
  margin-top: 5.5mm;
}

.extras ul {
  margin-top: 2mm;
  border-bottom: 0.2mm solid var(--line);
}

.extras li {
  display: grid;
  grid-template-columns: 5mm 1fr;
  gap: 4mm;
  padding-block: 2mm;
  border-top: 0.2mm solid var(--line);
}

.box {
  width: 5mm;
  height: 5mm;
  margin-top: 0.4mm;
  border: 0.4mm solid var(--ink);
  border-radius: 1mm;
}

.extras h3 {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  font-size: 12pt;
  letter-spacing: -0.01em;
}

.extras b {
  font-weight: 600;
  white-space: nowrap;
}

.extras p {
  max-width: 150mm;
  margin-top: 1mm;
  color: var(--muted);
  font-size: 9.5pt;
}

/* Steps on a line, as on the site */
.steps {
  margin-top: 5.5mm;
  margin-bottom: 5mm;
}

.steps ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8mm;
  margin-top: 3mm;
  padding-top: 10mm;
  counter-reset: step;
}

.steps ol::before {
  content: "";
  position: absolute;
  top: 3mm;
  right: 0;
  left: 0;
  height: 0.5mm;
  background: var(--accent);
}

.steps li {
  position: relative;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -10mm;
  left: 0;
  display: grid;
  place-items: center;
  width: 6.4mm;
  height: 6.4mm;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 9pt;
  font-weight: 600;
}

.steps h3 {
  font-size: 12pt;
  letter-spacing: -0.01em;
}

.steps p {
  margin-top: 1mm;
  color: var(--muted);
  font-size: 9.5pt;
}

/* Bottom of the page: the order to sign, and how to reach him */
.sheet__bottom {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12mm;
  margin-top: auto;
  padding-top: 5mm;
  border-top: 0.4mm solid var(--ink);
}

.order > p {
  margin-top: 1.5mm;
}

.order dl {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0 6mm;
  margin-top: 2mm;
}

.line:last-child {
  grid-column: 1 / -1;
}

/* The label sits under its line, the way forms are signed. */
.line {
  display: flex;
  flex-direction: column-reverse;
}

.line dt {
  margin-top: 1mm;
  color: var(--muted);
  font-size: 8pt;
}

.line dd {
  height: 8mm;
  border-bottom: 0.2mm solid var(--ink);
}

.reach__mail {
  margin-top: 1.5mm;
  font-size: 13pt;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.reach p:last-child {
  margin-top: 3mm;
  color: var(--muted);
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  body {
    background: none;
  }

  .a4__print {
    display: none;
  }

  .sheet {
    margin: 0;
    box-shadow: none;
  }
}