:root {
  --bg1:#fff5eb;
  --bg2:#fff5eb;
  --card:#ffffff;
  --text:#102027;
  --muted:#5b6b73;
  --stroke:#e9e3d9;
  --shadow:0 10px 30px rgba(16,32,39,.08);
  --radius:26px;
}
* {
  box-sizing:border-box
}
html, body { 
  width:100%; 
}
body {
  margin:0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% -100px, #fff 0%, var(--bg1) 45%, var(--bg2) 100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
      font-size: 16px;
}
.wrap {
  width:min(920px, 100%);
  padding: 28px 12px 44px;
  margin: 0 auto;
}
.brand {
  display:flex;
  justify-content:center;
  margin: 12px 0 12px;
}
.brand img {
  display:block;
  width: min(256px, 86vw);
  height: auto;
}
.subtitle {
  text-align:center;
  margin: 0 auto 32px;
  max-width: 800px;
  font-size: clamp(17px, 2.2vw, 30px);
  color: #20323a;
  line-height:1.5;
  letter-spacing:-0.01em;
}
.grid {
  display:grid;
  gap:24px;
  grid-template-columns: 1fr;
}
.resultInner {
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px;
}
.card {
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pad { 
  padding: 22px; 
}
.tog-big-label {
  display: inline-block;
  padding: 0.1em 0.3em;
  border-radius: 0.4em;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  vertical-align: baseline;
  white-space: nowrap;
  background-color: #f3f4f6; /* licht neutraal */
  color: #1f2933;
}
.tog-label {
  display: inline-block;
  padding: 0.0em 0.4em;
  margin-left: 0.1em;
  border-radius: 0.5em;
  background-color: #f3f4f6; /* licht neutraal */
  color: #1f2933;
  font-weight: 600;
  font-size: 16px;
  vertical-align: middle;
}
.input {
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background:#fff;
  font-size: 16px;
  outline:none;
  min-width:0;
}
.togImageWrap {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.togImageWrap img {
  max-width:100%;
  width: 300px;
  height:auto;
  border-radius:22px;
  box-shadow: 0 14px 28px rgba(16,32,39,.12);
  background:#fff;
}
.cardImageWrap {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 24px;
}
.cardImageWrap img {
  max-width:100%;
  height:auto;
  border-radius:16px;
  box-shadow: 0 14px 28px rgba(16,32,39,.12);
  background:#fff;
}
.btn {
  appearance:none;
  border:1px solid var(--stroke);
  background:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight:600; 
  cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease;
  flex:0 0 auto;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.primary {
  background:#102027;
  color:#fff;
  border-color:#102027;
}
.h2 {
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing:-0.03em;
  margin:0 0 10px;
  line-height:1.05;
  font-weight:900;
}
.advice {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 900;
  letter-spacing:-0.04em;
  margin: 0 0 6px;
}
@media (min-width: 860px) {
  .resultInner { 
    grid-template-columns: 1.3fr .7fr; 
    align-items:center; 
  }
}