/* Middelkamp Development: one stylesheet for the whole site.
   Colors come from the MD logo. The system font keeps the site free of
   requests to other servers, and every animation is CSS only (the site's
   Content-Security-Policy allows no scripts). */

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  --paper-raised: #f2f7fb;
  --ink: #0b2440;
  --muted: #4f6478;
  --line: #dbe6ef;
  --link: #02559a;
  --brand-name: #02559a;
  --brand-sub: #0073ae;

  /* The logo's three blues: the folds of the D. */
  --fold-dark: #02559a;
  --fold-mid: #16b9fd;
  --fold-light: #39cefd;

  --button-bg: #02559a;
  --button-ink: #ffffff;
  --button-bg-hover: #013f73;

  --header-bg: rgb(255 255 255 / 0.78);
  --product-bg: #0b1724;

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 0.875rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

/* Dark tokens: used when the device asks for dark and the visitor has not
   picked light, or when the visitor picked dark (assets/theme.js sets
   data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #07121e;
    --paper-raised: #0d1b2b;
    --ink: #e9f1f8;
    --muted: #a3b4c4;
    --line: #1d2d3e;
    --link: #7cc8ff;
    --brand-name: #e9f1f8;
    --brand-sub: #5ccdfd;
    --fold-dark: #1f6fbd;
    --button-bg: #39cefd;
    --button-ink: #04182b;
    --button-bg-hover: #7fdcff;
    --header-bg: rgb(7 18 30 / 0.78);
    --product-bg: #040b14;
  }
}

:root[data-theme="dark"] {
  --paper: #07121e;
  --paper-raised: #0d1b2b;
  --ink: #e9f1f8;
  --muted: #a3b4c4;
  --line: #1d2d3e;
  --link: #7cc8ff;
  --brand-name: #e9f1f8;
  --brand-sub: #5ccdfd;
  --fold-dark: #1f6fbd;
  --button-bg: #39cefd;
  --button-ink: #04182b;
  --button-bg-hover: #7fdcff;
  --header-bg: rgb(7 18 30 / 0.78);
  --product-bg: #040b14;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 150ms ease, color 150ms ease;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--fold-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Header: sticks to the top, with the page blurred behind it ─────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 3rem;
  height: auto;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name strong {
  color: var(--brand-name);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand-name span {
  color: var(--brand-sub);
  font-size: 0.875rem;
  font-weight: 700;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* On a phone the header holds the mark, two links and the appearance menu:
   the company name moves out (the link keeps it as its label). */
@media (max-width: 30rem) {
  .brand-name {
    display: none;
  }

  .site-nav a {
    padding: 0.4rem 0.6rem;
  }
}

.site-nav a {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--paper-raised);
}

/* Appearance menu in the header: System, Light or Dark. Hidden until
   assets/theme.js runs. */
.theme-switch {
  position: relative;
  margin-left: 0.25rem;
}

.theme-switch[hidden] {
  display: none;
}

.theme-button {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.theme-button:hover,
.theme-button[aria-expanded="true"] {
  background: var(--paper-raised);
  border-color: var(--muted);
}

.theme-button .icon {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
}

/* The button shows the mode in use, also when it comes from the device. */
:root[data-theme="light"] .theme-button .icon-light,
:root[data-theme="dark"] .theme-button .icon-dark {
  display: block;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1rem 2.5rem rgb(4 18 32 / 0.18);
  transform-origin: top right;
}

.theme-menu[hidden] {
  display: none;
}

.theme-menu button {
  display: grid;
  grid-template-columns: 1.15rem 1fr 1rem;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.theme-menu button:hover,
.theme-menu button:focus-visible {
  background: var(--paper-raised);
}

.theme-menu button:focus-visible {
  outline-offset: -2px;
}

.theme-menu .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.theme-menu .check {
  width: 1rem;
  height: 1rem;
  color: var(--link);
  visibility: hidden;
}

.theme-menu [aria-checked="true"] .check {
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-menu:not([hidden]) {
    animation: menu-in 160ms var(--ease-out);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.96);
  }
}

/* While switching, colors fade instead of jumping. */
.theme-changing,
.theme-changing *,
.theme-changing *::before,
.theme-changing *::after {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, box-shadow 350ms ease !important;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button-primary {
  background: var(--button-bg);
  color: var(--button-ink);
}

.button-primary:hover {
  background: var(--button-bg-hover);
}

.button-secondary {
  border-color: var(--line);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--ink);
}

/* ── Home hero: the folding D ───────────────────────────────────────── */

.hero .wrap {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-top: clamp(3rem, 9vw, 7rem);
  padding-bottom: clamp(3rem, 9vw, 7rem);
}

@media (min-width: 52rem) {
  .hero .wrap {
    grid-template-columns: 1.35fr 1fr;
  }
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.hero .lede {
  max-width: 36rem;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
}

/* The D of the logo: a dark band down to a point, a light band back from
   it, and a mid-blue crease where they meet. */
.fold {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 3 / 4;
  justify-self: center;
}

.fold span {
  position: absolute;
  inset: 0;
}

.fold .band-dark {
  background: var(--fold-dark);
  clip-path: polygon(0 0, 30% 0, 100% 50%, 70% 50%);
}

.fold .band-light {
  background: var(--fold-light);
  clip-path: polygon(70% 50%, 100% 50%, 30% 100%, 0 100%);
}

.fold .crease {
  background: var(--fold-mid);
  clip-path: polygon(70% 50%, 100% 50%, 85% 60.7%);
}

@media (max-width: 51.99rem) {
  .fold {
    width: 9rem;
    justify-self: start;
    order: -1;
  }
}

/* Product page: the app is dark, so its hero is too. */
.product-hero {
  background: var(--product-bg);
  color: #eef4fa;
  overflow: hidden;
}

.product-hero .wrap {
  display: grid;
  gap: 3rem;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 60rem) {
  .product-hero .wrap {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }
}

.product-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.product-hero .lede {
  max-width: 32rem;
  margin: 0 0 2rem;
  color: #b7c6d4;
  font-size: 1.25rem;
}

.product-hero .button-primary {
  background: #39cefd;
  color: #04182b;
}

.product-hero .button-primary:hover {
  background: #7fdcff;
}

.product-hero .button-secondary {
  border-color: #2d3b4a;
  color: #eef4fa;
}

.product-hero .button-secondary:hover {
  border-color: #eef4fa;
}

.store-note {
  margin: 1.25rem 0 0;
  color: #8fa1b3;
  font-size: 0.9375rem;
}

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  margin: 0;
}

.phones .iphone {
  width: min(31%, 15.5rem);
}

.phones .iphone:nth-child(2) {
  margin-top: 2.5rem;
}

/* ── iPhone frame around a screenshot ───────────────────────────────
   Drawn in CSS so it stays sharp at any size. The outer element is a size
   container: every length inside is a share of the phone's width (cqi), so
   the bezel, corners and buttons scale with the phone. The screenshots
   already contain the Dynamic Island and status bar. */

.iphone {
  display: block;
  container-type: inline-size;
}

.iphone-body {
  position: relative;
  display: block;
  padding: 3.6cqi;
  border-radius: 16.4cqi;
  background: #050506;
  box-shadow:
    0 0 0 0.9cqi #4b5059,
    0 0 0 1.25cqi #16181c,
    0 2rem 3.5rem rgb(0 0 0 / 0.35);
}

.iphone-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12.8cqi;
}

/* Side button on the right; action button and volume buttons on the left. */
.iphone-body::before,
.iphone-body::after {
  content: "";
  position: absolute;
  width: 1.1cqi;
  background: #3b4048;
}

.iphone-body::before {
  right: -2.2cqi;
  top: 52cqi;
  height: 22cqi;
  border-radius: 0 0.8cqi 0.8cqi 0;
}

/* The short action button. */
.iphone-body::after {
  left: -2.2cqi;
  top: 38cqi;
  height: 10cqi;
  border-radius: 0.8cqi 0 0 0.8cqi;
}

/* Volume up, and volume down as its shadow below it. */
.iphone-body .volume {
  position: absolute;
  left: -2.2cqi;
  top: 54cqi;
  width: 1.1cqi;
  height: 16cqi;
  border-radius: 0.8cqi 0 0 0.8cqi;
  background: #3b4048;
  box-shadow: 0 21cqi 0 0 #3b4048;
}

/* ── Sections ───────────────────────────────────────────────────────── */

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-raised {
  background: var(--paper-raised);
}

/* Section headings carry a small D, the logo's mark, instead of a label. */
.section h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 2rem;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.section h2::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.9em;
  background: var(--fold-dark);
  clip-path: polygon(0 0, 30% 0, 100% 50%, 30% 100%, 0 100%, 70% 50%);
}

.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 1rem;
}

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

/* About: the portrait beside the text. */
.about {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 48rem) {
  .about {
    grid-template-columns: 13rem 1fr;
    gap: 3.5rem;
  }
}

.portrait {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px var(--fold-mid);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.stack li {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Products: Ergates with one phone. */
.product {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .product {
    grid-template-columns: 15rem 1fr;
    gap: 4rem;
  }
}

.product-shot {
  width: 15rem;
  max-width: 70%;
  justify-self: center;
  transform: rotate(-3deg);
  transition: transform 300ms var(--ease-out);
}

.product:hover .product-shot {
  transform: rotate(0deg) translateY(-4px);
}

.product h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.product p {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 1.1875rem;
}

/* GitHub accounts: two rows, each with the logo's D at the start. */
.accounts {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .accounts {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.accounts a {
  display: block;
  height: 100%;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.accounts a:hover {
  border-color: var(--fold-mid);
  background: var(--paper-raised);
}

.accounts strong {
  display: block;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.accounts .handle {
  display: block;
  margin-top: 0.15rem;
  color: var(--link);
  font-weight: 700;
}

.accounts .about-account {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
}

/* Contact: one big line. */
.contact-line {
  max-width: 44rem;
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Product page features. */
.features {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 4rem;
  }
}

@media (min-width: 64rem) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.features h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.features p {
  margin: 0;
  color: var(--muted);
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

/* ── Long-form pages: privacy policy and support ────────────────────── */

.doc {
  max-width: var(--measure);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}

.doc h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.doc .updated {
  margin: 0 0 2.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.doc ul,
.doc ol {
  padding-left: 1.25rem;
}

.doc li + li {
  margin-top: 0.4rem;
}

.doc code {
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  background: var(--paper-raised);
  font-size: 0.9em;
}

/* ── Footer: the company details Dutch law asks for ─────────────────── */

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2.25rem;
  padding-bottom: 2.75rem;
}

.footer p {
  margin: 0;
}

.footer strong {
  color: var(--ink);
}

/* ── Motion ─────────────────────────────────────────────────────────────
   One sequence per page, on load: the D folds together on the home page,
   the phones rise on the product page. Nothing moves for anyone who asks
   for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .lede,
  .hero .actions {
    animation: rise 700ms var(--ease-out) both;
  }

  .hero .lede {
    animation-delay: 90ms;
  }

  .hero .actions {
    animation-delay: 180ms;
  }

  .fold .band-dark {
    animation: fold-dark 650ms var(--ease-out) 150ms both;
  }

  .fold .band-light {
    animation: fold-light 650ms var(--ease-out) 600ms both;
  }

  .fold .crease {
    animation: crease 420ms var(--ease-out) 1050ms both;
  }

  .phones .iphone {
    animation: rise-far 900ms var(--ease-out) both;
  }

  .phones .iphone:nth-child(1) {
    animation-delay: 120ms;
  }

  .phones .iphone:nth-child(2) {
    animation-delay: 0ms;
  }

  .phones .iphone:nth-child(3) {
    animation-delay: 240ms;
  }

  .product-hero h1,
  .product-hero .lede,
  .product-hero .actions {
    animation: rise 700ms var(--ease-out) both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes rise-far {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
}

/* The dark band grows down from the top edge to the point. */
@keyframes fold-dark {
  from {
    clip-path: polygon(0 0, 30% 0, 30% 0, 0 0);
  }
}

/* The light band folds back from the point to the bottom edge. */
@keyframes fold-light {
  from {
    clip-path: polygon(70% 50%, 100% 50%, 100% 50%, 70% 50%);
  }
}

@keyframes crease {
  from {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: 85% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .product-shot {
    transform: none;
  }
}