:root {
  --bg: #12161c;
  --text: #ECEDEE;
  --muted: #8B95A1;
  --amber: #F0C077;
  --amber-dark: #E3A857;
  --card-from: #212832;
  --card-to: #171b21;
  --border: #2a323e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

.lang-switch {
  text-align: right;
  padding: 16px 20px 0;
  max-width: 480px;
  margin: 0 auto;
}
.lang-switch a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
}
.lang-switch a.active {
  color: var(--amber);
  font-weight: 600;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 28px 0 8px;
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.brand span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

h1 {
  text-align: center;
  font-size: 26px;
  line-height: 1.25;
  margin: 18px 0 10px;
}

.sub {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 28px;
  padding: 0 8px;
}

.hero-shot {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}

.cta-row {
  text-align: center;
  margin: 28px 0 6px;
}

.cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--amber), var(--amber-dark));
  color: #1a1207;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(240,192,119,0.25);
}

.cta.soon {
  cursor: default;
  background: transparent;
  color: var(--amber);
  border: 1.5px solid var(--amber);
  box-shadow: none;
}

.cta-note {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin: 10px 0 0;
}

.features {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature {
  background: linear-gradient(160deg, var(--card-from), var(--card-to));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.feature .icon {
  font-size: 20px;
  line-height: 1.4;
}

.feature h2 {
  margin: 0 0 3px;
  font-size: 15px;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.pricing {
  margin: 32px 0 0;
  text-align: center;
  background: linear-gradient(160deg, var(--card-from), var(--card-to));
  border: 1px solid var(--amber-dark);
  border-radius: 12px;
  padding: 20px;
}

.pricing .headline {
  color: var(--amber);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
}

.pricing p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

footer {
  text-align: center;
  margin-top: 48px;
  color: var(--muted);
  font-size: 12.5px;
}

footer a {
  color: var(--muted);
}

footer .sep {
  margin: 0 6px;
}

.lang-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 240px;
  margin: 36px auto 0;
}
.lang-choice a {
  display: block;
  text-align: center;
  background: linear-gradient(160deg, var(--card-from), var(--card-to));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* Gidsen en hulpmiddelen (tools/build-guides.mjs, 2026-09-30): breder en links uitgelijnd om
   te lezen; de startpagina blijft gecentreerd. */
.wrap.guide { max-width: 680px; }
.lang-switch:has(+ .wrap.guide) { max-width: 680px; }
.guide .brand { justify-content: flex-start; text-decoration: none; color: var(--text); }
.guide h1 { text-align: left; font-size: 30px; }
.guide .sub { text-align: left; padding: 0; color: #C9CED4; }
.guide h2 { font-size: 19px; margin: 32px 0 8px; }
.guide p, .guide li { color: #C9CED4; }
.guide ul { padding-left: 22px; }
.guide li { margin-bottom: 6px; }
.guide a { color: var(--amber); }
.guide .download { margin: 8px 0 6px; }
.guide .download .cta, .guide .appbox .cta:not(.soon) { color: #1a1207; text-decoration: none; }
.guide .cta-row { text-align: left; margin: 14px 0 0; }
.guide .cta-note { text-align: left; }
.guide footer { text-align: left; line-height: 2; }
.guide footer a { color: var(--muted); }
.honest { color: var(--muted); font-size: 13.5px; margin-top: 28px; }
.table-wrap { overflow-x: auto; }
.guide table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.guide th, .guide td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.guide th { color: var(--muted); font-weight: 600; font-size: 13px; }
.guide td:nth-child(2) { color: var(--amber); font-weight: 700; white-space: nowrap; }
.appbox { margin: 36px 0 0; padding: 22px; border-radius: 14px; background: linear-gradient(160deg, var(--card-from), var(--card-to)); border: 1px solid var(--amber-dark); }
.appbox h2 { margin: 0 0 6px; }
.appbox p { margin: 0; }
.calc { margin: 8px 0 8px; padding: 18px; border-radius: 14px; background: linear-gradient(160deg, var(--card-from), var(--card-to)); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.calc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calc label { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.calc-weight { display: flex; gap: 8px; }
.calc input, .calc select { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0; }
.calc-weight select { width: auto; min-width: 76px; flex-shrink: 0; }
.calc-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc-result div { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.calc-result b { display: block; font-size: 20px; color: var(--amber); }
.calc-result span { font-size: 13px; color: var(--muted); }
.tools-home { margin: 32px 0 0; text-align: center; }
.tools-home h2 { font-size: 16px; margin: 0 0 10px; }
.tools-home ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tools-home a { display: block; padding: 11px 14px; border-radius: 12px; background: linear-gradient(160deg, var(--card-from), var(--card-to)); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
@media (max-width: 520px) {
  .guide h1 { font-size: 26px; }
  .calc-row { grid-template-columns: 1fr; }
}