/* Energie Data App — marketing site. Shared by index.html and error.html;
   mobile-first, dark mode follows the system preference. */

body {
  --color-1: rgb(250 250 250);
  --color-2: rgb(235 235 235);
  /* The .nl grey reads by area; a 1px line of it nearly vanishes, so
     hairlines take a darker grey with the same optical weight. */
  --color-line: rgb(205 205 205);
  --font-color: rgb(25 25 25);
  --color-muted: rgb(120 120 120);
  --color-accent: royalblue;
  --gutter: max(1.5rem, calc((100% - 66rem) / 2));
  /* The page's one text measure: the what-sections' 60% track minus the
     3rem they pad off the figure; every capped text block aligns to it. */
  --measure: calc(60% - 3rem);
  margin: 0;
  background-color: var(--color-1);
  color: var(--font-color);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  body {
    --color-1: rgb(20 20 20);
    --color-2: rgb(30 30 30);
    --color-line: rgb(65 65 65);
    --font-color: rgb(225 225 225);
  }
}

h1, h2, h3 {
  line-height: 1.15;
  margin: 0;
  /* Not balance: Dutch compounds are too long to balance between, so it
     degrades into ragged two-word lines; pretty only prevents orphans. */
  text-wrap: pretty;
}

p {
  margin: 0;
}

a {
  color: var(--color-accent);
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Hero: badge on top at the column's left edge, .nl top whitespace. */
.hero {
  padding: 3rem var(--gutter);
}

.badge {
  margin-bottom: 1.5rem;
  width: 4.5rem;
}

.badge svg {
  display: block;
  width: 100%;
  height: auto;
}

.intro h1 {
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.intro .lead {
  font-size: 1.25rem;
  margin-top: 1.25rem;
}

.intro p + p {
  margin-top: 1.25rem;
}

/* The what: hairline runs to the screen edges, content stays in column. */
/* The gutter is a grid track rather than padding so the figure column
   can run to the viewport edge while the text stays in the column. */
.what {
  border-top: 1px solid var(--color-line);
  display: grid;
  align-items: start;
  /* Text stays at 60% of the 66rem content column; the figure track is
     the remaining 40% plus the right gutter, running to the edge. */
  grid-template-columns: var(--gutter) calc((100% - 2 * var(--gutter)) * 0.6) 1fr;
  padding: 3rem 0 0;
}

.what > div {
  grid-column: 2;
  padding-bottom: 3rem;
  padding-right: 3rem;
}

.what h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  letter-spacing: -0.01em;
}

.what p {
  margin-top: 1rem;
}

.why-link {
  color: var(--color-accent);
  font-weight: 600;
}

.pilot {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Bottom-anchored: the screenshot's lower edge sits on the next
   section's hairline, and the viewport edge cuts it off at the right —
   literally: below its fixed display width the image clips instead of
   shrinking, so it never renders small. */
.what figure {
  align-self: end;
  /* On the figure, not the img: a border or radius composited onto a
     scaled bitmap seams at fractional device-pixel ratios. The radius
     clips the grey arcs the screenshots carry in their own rounded
     corners, letting the page ground show through instead. */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  grid-column: 3;
  margin: 0;
  overflow: hidden;
}

.what img {
  display: block;
  height: auto;
  /* The floor sits above the figure track's width on common desktop
     viewports, so the image renders at a constant size and only the
     right-edge crop varies; 100% takes over solely on very wide screens
     so the card still reaches the viewport edge there. */
  width: max(100%, 42rem);
}

/* The why: three royalblue blocks, background shows through as white lines. */
.why {
  border-top: 1px solid var(--color-line);
  padding: 3rem var(--gutter);
}

.why ul {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.why li {
  background-color: var(--color-accent);
  color: white;
  padding: 2rem;
}

.why h3 {
  font-size: 1.125rem;
}

.why li p {
  font-size: 0.9375rem;
  margin-top: 0.75rem;
  opacity: 0.85;
}

/* The numbers: blockless, between why and cta. */
.stats {
  border-top: 1px solid var(--color-line);
  padding: 3rem var(--gutter);
}

.stats dl {
  align-items: start;
  display: grid;
  /* Column gap mirrors the why-blocks' 1px so the three stats sit on
     exactly the outline of the three blocks above. */
  gap: 2rem 1px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  /* Matches the why-blocks' padding so the numbers align with the
     blocks' text rather than their outline. */
  padding-inline: 2rem;
}

.stats dd {
  color: var(--color-accent);
  font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.stats dt {
  color: var(--color-muted);
  font-size: 0.9375rem;
  max-width: 20rem;
}

/* Call to action: unfilled, typographic, one outlined button. */
.cta {
  border-top: 1px solid var(--color-line);
  padding: 3rem var(--gutter);
}

.cta h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  max-width: var(--measure);
}

.cta p {
  color: var(--color-muted);
  margin-top: 1rem;
  max-width: var(--measure);
}

.button {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: inline-block;
  font-weight: 600;
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
}

.button:hover {
  background-color: var(--color-accent);
  color: white;
  text-decoration: none;
}

footer {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.875rem;
  padding: 1.5rem var(--gutter);
}

footer p {
  max-width: var(--measure);
}

footer a {
  color: var(--color-muted);
  font-weight: normal;
  text-decoration: underline;
}

footer a:hover {
  text-decoration: none;
}

@media (max-width: 60rem) {

  .hero,
  .why,
  .stats,
  .cta {
    padding-block: 2rem;
  }

  .what {
    padding-top: 2rem;
  }

  .what,
  .why ul,
  .stats dl {
    grid-template-columns: 1fr;
  }

  .what > div {
    grid-column: 1;
    padding: 0 1.5rem;
  }

  /* Stacked below the text the figure is a normal padded block again:
     gutters on both sides, clear of the hairline, full rounding, and
     spaced off the text like a next paragraph. */
  .what figure {
    border: 1px solid var(--color-line);
    border-radius: 12px;
    grid-column: 1;
    margin: 1rem 1.5rem 2rem;
  }

  .what img {
    width: 100%;
  }

  .cta h2,
  .cta p,
  footer p {
    max-width: none;
  }
}