:root {
  color-scheme: light;
  --ink: #16241d;
  --muted: #66736c;
  --line: #dde4df;
  --panel: #ffffff;
  --soft: #f4f7f3;
  --mint: #dff5e8;
  --mint-strong: #2f8f65;
  --emerald: #1d6b4f;
  --emerald-deep: #123f2f;
  --emerald-night: #0d2c21;
  --gold: #c8a45d;
  --gold-deep: #a8813d;
  --coral: #d96b52;
  --blue: #365c86;
  --shadow: 0 24px 80px rgba(24, 39, 32, 0.14);
  --shadow-soft: 0 10px 34px rgba(24, 39, 32, 0.09), 0 2px 6px rgba(24, 39, 32, 0.05);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

/* hidden-attribuut wint altijd, ook van elementen met een eigen display-regel
   (anders blijft bijv. een verborgen .text-button gewoon zichtbaar). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -6%, rgba(223, 245, 232, 0.9), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(200, 164, 93, 0.12), transparent 26rem),
    linear-gradient(160deg, #fafcf8 0%, #eef4f1 52%, #f8f2e8 100%);
  color: var(--ink);
  font-family: var(--font-ui);
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100vh;
  padding: 1.5rem;
  border-right: 1px solid rgba(13, 44, 33, 0.4);
  background:
    radial-gradient(circle at 20% -10%, rgba(200, 164, 93, 0.14), transparent 18rem),
    linear-gradient(175deg, var(--emerald-deep) 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.brand-mark {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: 0.7rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: rgba(242, 246, 241, 0.62);
  font-size: 0.8rem;
}

.mini-panel p,
.pricing-card p,
.score-card p {
  color: var(--muted);
}

.score-note,
.pricing-note {
  border-top: 1px solid var(--line);
  margin: 0.8rem 0 0;
  padding-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

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

.nav-list {
  display: grid;
  gap: 0.35rem;
}

.nav-item {
  border-radius: 0.6rem;
  border: 1px solid transparent;
  color: rgba(242, 246, 241, 0.68);
  padding: 0.75rem 0.85rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(200, 164, 93, 0.14);
  border-color: rgba(200, 164, 93, 0.35);
  color: #fff;
}

.mini-panel,
.score-card,
.keyword-card,
.pricing-card,
.input-panel,
.document-stage,
.editor-panel,
.document-preview {
  border: 1px solid rgba(219, 227, 222, 0.9);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.mini-panel {
  margin-top: auto;
  padding: 1.1rem;
  border: 1px solid rgba(200, 164, 93, 0.28);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: #f2f6f1;
}

.mini-panel strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.mini-panel p {
  color: rgba(242, 246, 241, 0.66);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.panel-label,
.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--gold-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-label {
  color: var(--gold);
}

.workspace {
  min-width: 0;
  padding: 2rem;
}

.product-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.product-tabs {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid rgba(219, 227, 222, 0.9);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.3rem;
  box-shadow: var(--shadow-soft);
}

.product-tab {
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--muted);
  padding: 0 1rem;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.product-tab:hover {
  color: var(--ink);
}

.product-tab.active {
  background: linear-gradient(160deg, #23543f, var(--emerald-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 63, 47, 0.3);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.trust-row span {
  border: 1px solid rgba(54, 92, 134, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #365c86;
  padding: 0.42rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero-copy {
  max-width: 43rem;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 55rem;
  margin-bottom: 0;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 1.08;
}

.template-strip {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  border: 1px solid rgba(219, 227, 222, 0.9);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 1rem;
  box-shadow: 0 18px 55px rgba(24, 39, 32, 0.09);
}

.template-copy h2 {
  font-size: 1.25rem;
}

.template-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
  max-height: 14rem;
  overflow: auto;
  padding: 0.15rem;
}

.font-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.55rem;
}

.font-card {
  position: relative;
  min-height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.font-card.active,
.font-card:hover {
  border-color: rgba(47, 143, 101, 0.6);
  box-shadow: 0 0 0 4px rgba(47, 143, 101, 0.1);
}

.template-card {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 4.6rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fff;
  color: var(--ink);
  padding: 0.65rem;
  text-align: left;
}

.template-card[data-premium="true"] {
  border-color: color-mix(in srgb, var(--template-secondary) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-secondary) 14%, #fff), #fff 52%),
    #fff;
}

.template-card.active,
.template-card:hover {
  border-color: rgba(47, 143, 101, 0.6);
  box-shadow: 0 0 0 4px rgba(47, 143, 101, 0.1);
}

.template-card[data-premium="true"].active,
.template-card[data-premium="true"]:hover {
  border-color: color-mix(in srgb, var(--template-secondary) 70%, var(--template-primary));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--template-secondary) 18%, transparent),
    0 14px 26px rgba(23, 32, 27, 0.1);
}

.template-card strong,
.template-card small {
  display: block;
}

.template-card small {
  color: var(--muted);
}

.template-card[data-premium="true"] small::after {
  content: " Premium";
  color: var(--template-primary);
  font-weight: 900;
}

.template-thumb {
  grid-row: span 2;
  width: 3.1rem;
  height: 3.65rem;
  border: 1px solid #d7dfda;
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: 0 10px 22px rgba(23, 32, 27, 0.1);
}

/* De miniatuur weerspiegelt de echte lay-out van het template. */

/* Standaard = zijbalk: gekleurde kolom links (primair boven, secundair onder). */
.template-thumb {
  background:
    linear-gradient(var(--template-primary, var(--ink)) 0 62%, var(--template-secondary, #fff) 62%) left top / 34% 100% no-repeat,
    repeating-linear-gradient(#ffffff 0 0.38rem, #e8eee9 0.38rem 0.46rem);
}

/* ATS = één kolom: naamblok linksboven + volle-breedte lijn, geen zijbalk. */
.template-card[data-layout="single"] .template-thumb {
  background:
    linear-gradient(var(--template-primary) 0 100%) 12% 16% / 46% 9% no-repeat,
    linear-gradient(var(--template-primary) 0 100%) left 30% / 100% 3% no-repeat,
    repeating-linear-gradient(#ffffff 0 0.38rem, #e8eee9 0.38rem 0.46rem);
}

/* Kleurenband = gekleurde balk bovenaan over de volle breedte. */
.template-card[data-layout="header"] .template-thumb {
  background:
    linear-gradient(var(--template-primary) 0 28%, transparent 28%) top / 100% 100% no-repeat,
    repeating-linear-gradient(#ffffff 0 0.38rem, #e8eee9 0.38rem 0.46rem);
}

h2 {
  margin-bottom: 0;
  font-size: 1.05rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1rem;
  align-items: start;
}

.input-panel,
.document-stage {
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-heading.compact {
  margin-bottom: 0.75rem;
}

.secure-pill,
.paper-badge,
.keyword-list span {
  border: 1px solid rgba(47, 143, 101, 0.25);
  border-radius: 999px;
  background: var(--mint);
  color: #1f6849;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.photo-field {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 0.85rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fbfdfb;
  padding: 0.75rem;
}

.photo-preview,
.cv-photo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.45rem;
  background:
    linear-gradient(135deg, rgba(54, 92, 134, 0.14), transparent),
    #eef3ef;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.photo-preview {
  width: 5.2rem;
  aspect-ratio: 1;
}

.photo-preview img,
.cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.section-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fbfdfb;
  padding: 0.85rem;
}

.section-toggles legend {
  padding: 0 0.35rem;
  color: #344139;
  font-size: 0.9rem;
  font-weight: 800;
}

.section-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.3rem;
}

.section-toggles input {
  width: auto;
}

label {
  display: grid;
  gap: 0.45rem;
  color: #344139;
  font-size: 0.9rem;
  font-weight: 700;
}

.wide {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #fbfdfb;
  color: var(--ink);
  outline: none;
  padding: 0.78rem 0.85rem;
  resize: vertical;
}

input[type="file"] {
  padding: 0.58rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(47, 143, 101, 0.65);
  box-shadow: 0 0 0 4px rgba(47, 143, 101, 0.12);
}

.entry-group {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fbfdfb;
  padding: 0.85rem;
}

.entry-block {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.entry-block:last-child {
  margin-bottom: 0;
}

.entry-group legend {
  padding: 0 0.35rem;
  color: #344139;
  font-size: 0.9rem;
  font-weight: 800;
}

.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11rem;
  gap: 0.55rem;
}

.entry-row.compact {
  grid-template-columns: minmax(0, 1fr) 10rem;
}

.entry-row.single {
  grid-template-columns: minmax(0, 1fr);
}

.add-entry {
  justify-self: start;
  margin-top: 0.15rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.primary-button,
.secondary-button,
.ghost-button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border-radius: 0.6rem;
  border: 0;
  padding: 0 1.1rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.ghost-button:focus-visible,
.text-button:focus-visible {
  outline: 3px solid rgba(29, 107, 79, 0.45);
  outline-offset: 2px;
}

.primary-button {
  background: linear-gradient(160deg, #23543f, var(--emerald-deep));
  color: #fff;
  box-shadow: 0 14px 30px rgba(18, 63, 47, 0.32);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(18, 63, 47, 0.38);
}

.primary-button:disabled {
  opacity: 0.7;
  cursor: default;
}

.secondary-button {
  border: 1px solid rgba(168, 129, 61, 0.45);
  background: linear-gradient(160deg, #d9b876, var(--gold));
  color: #2c2413;
  box-shadow: 0 10px 24px rgba(168, 129, 61, 0.28);
}

.secondary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(168, 129, 61, 0.34);
}

.secondary-button:disabled {
  opacity: 0.7;
  cursor: default;
}

.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

.ghost-button:hover {
  border-color: rgba(29, 107, 79, 0.45);
  background: #fff;
}

.ghost-button.small,
.primary-button.small {
  min-height: 2.2rem;
  padding: 0 0.75rem;
}

.text-button {
  background: transparent;
  color: var(--muted);
}

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

.insight-column {
  display: grid;
  gap: 1rem;
}

.score-card,
.keyword-card,
.pricing-card {
  padding: 1rem;
}

.score-ring {
  --angle: calc(var(--score) * 3.6deg);
  display: grid;
  width: 9rem;
  height: 9rem;
  margin: 0.8rem auto;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 59%, transparent 60%),
    conic-gradient(var(--mint-strong) var(--angle), #e8ede9 0);
}

.score-ring strong {
  font-size: 2.2rem;
}

.score-ring span {
  color: var(--muted);
  font-size: 0.8rem;
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.document-stage {
  margin-top: 1rem;
}

.tab-group {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #f5f8f6;
  padding: 0.25rem;
}

.tab {
  min-height: 2.15rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--muted);
  padding: 0 0.8rem;
  font-weight: 800;
}

.tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 18px rgba(23, 32, 27, 0.08);
}

.document-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.92fr) minmax(0, 1fr);
  gap: 1rem;
}

.document-grid.cv-only {
  grid-template-columns: 1fr;
}

.document-grid.cv-only .document-preview {
  display: block;
  min-height: auto;
}

.overflow-warning {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e6b800;
  border-left: 4px solid #e6b800;
  border-radius: 0.5rem;
  background: #fff8e1;
  color: #6b5300;
  font-size: 0.86rem;
  line-height: 1.45;
}

.overflow-warning[hidden] {
  display: none;
}

.document-preview {
  display: grid;
  min-height: 39rem;
  place-items: center;
  overflow: hidden;
  padding: 2rem;
  background:
    linear-gradient(135deg, rgba(54, 92, 134, 0.09), transparent 45%),
    linear-gradient(160deg, #ffffff, #f1f5f3);
}

.paper {
  position: relative;
  display: grid;
  grid-template-columns: 13.25rem minmax(0, 1fr);
  align-items: stretch;
  /* Vaste A4-afmeting (210 x 297 mm @ 96dpi) zodat de preview exact gelijk is aan de PDF.
     margin-left centreert het brede papier ook als het uit de container steekt;
     de schaal (via transform) krimpt daarna symmetrisch rond het midden. */
  width: 794px;
  height: 1123px;
  overflow: hidden;
  transform-origin: top center;
  border-radius: 0.35rem;
  background: #fff;
  padding: 0;
  box-shadow: 0 28px 70px rgba(54, 92, 134, 0.18);
  --template-primary: #d71920;
  --template-secondary: #111111;
  --template-primary-text: #ffffff;
  --template-secondary-text: #ffffff;
}

/* Twee pagina's: het papier wordt exact 2x A4 hoog. app.js zet deze klasse
   automatisch zodra de inhoud niet meer op één pagina past. */
.paper.pages-2 {
  height: 2246px;
}

/* Zichtbare paginascheiding in de preview (app.js voegt het element toe).
   In de PDF wordt hij verborgen — daar knipt Puppeteer het papier in tweeën. */
.page-gap {
  position: absolute;
  top: 1123px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transform: translateY(-50%);
  padding: 0 1rem;
  pointer-events: none;
  z-index: 5;
  color: #8a958e;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-gap::before,
.page-gap::after {
  content: "";
  flex: 1;
  border-top: 2px dashed #b9c4bd;
}

.paper.watermark::after {
  content: "VOORBEELD";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.16);
  transform: rotate(-32deg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

/* Bij twee pagina's: één watermerk per pagina (::after boven, ::before onder). */
.paper.watermark.pages-2::after {
  inset: auto 0;
  top: 0;
  height: 1123px;
}

.paper.watermark.pages-2::before {
  content: "VOORBEELD";
  position: absolute;
  top: 1123px;
  left: 0;
  right: 0;
  height: 1123px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.16);
  transform: rotate(-32deg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

.cv-sidebar {
  display: grid;
  /* Vaste px-zones (64%/36% van één A4 van 1123px): bij een tweede pagina
     mogen deze vlakken niet mee oprekken. */
  grid-template-rows: 719px 404px;
  gap: 0;
  /* Kleurstops in px om dezelfde reden; ná pagina 1 loopt de zijbalk door
     in de hoofdkleur (staat netjes op pagina 2 van de PDF). */
  background:
    linear-gradient(180deg, var(--template-primary) 0 719px, var(--template-secondary) 719px 1123px, var(--template-primary) 1123px 100%);
  color: var(--template-primary-text);
}

.cv-sidebar-top,
.skill-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.3rem 1.15rem;
}

.cv-sidebar-top {
  color: var(--template-primary-text);
}

.skill-panel {
  color: var(--template-secondary-text);
}

.cv-photo {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}

.cv-contact {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 0.75rem;
}

.skill-panel {
  margin-top: 0;
  border-top: 0;
}

.cv-contact span {
  display: block;
  margin-bottom: 0.45rem;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cv-contact p {
  margin-bottom: 0.35rem;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sidebar-list {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding-left: 1rem;
}

.sidebar-list li {
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1.35;
}

.cv-main {
  display: grid;
  align-content: start;
  min-width: 0;
  /* Ruime binnenmarge zodat de tekst ook bij het uitprinten niet tegen de rand staat. */
  padding: 2.2rem 2.6rem;
}

/* CV-lettertypes: allemaal zelf gehost (fonts/), zodat de preview op elk
   apparaat exact gelijk is aan de PDF die de server maakt. */
.paper[data-font="modern"] {
  font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.paper[data-font="executive"] {
  font-family: "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.paper[data-font="editorial"] {
  font-family: "Lora", Georgia, "Times New Roman", serif;
}

.paper[data-font="classic"] {
  font-family: "Lora", Georgia, "Times New Roman", serif;
}

.paper[data-font="elegant"] {
  font-family: "Jost", "Trebuchet MS", "Segoe UI", sans-serif;
}

.paper[data-font="compact"] {
  font-family: "Arimo", Arial, Helvetica, sans-serif;
}

.paper[data-font="technical"] {
  font-family: "Cousine", "Courier New", Consolas, monospace;
}

/* Alle tekststijlen delen dezelfde tekstgrootte en regelafstand (uit de basisregels);
   alleen het lettertype verschilt. Zo blijft elk CV even compact en past het
   voorspelbaar op één pagina, ongeacht de gekozen stijl. Editorial houdt als enige
   subtiele karaktertrek een schreefloze kop boven de serif-tekst — zonder maatverschil. */
.paper[data-font="editorial"] .paper-head h3,
.paper[data-font="editorial"] .paper-section > span,
.paper[data-font="editorial"] .cv-contact span,
.paper[data-font="editorial"] .skill-panel > span {
  font-family: "Inter", "Segoe UI", sans-serif;
}

.paper-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
}

.paper-head {
  border-bottom-color: var(--template-primary);
}

.paper-section > span {
  color: var(--template-primary);
}

.paper-head h3 {
  margin-bottom: 0.2rem;
  font-size: 1.65rem;
}

.paper-section {
  border-bottom: 1px solid #e8ece8;
  padding: 0.72rem 0;
}

.paper-section > span {
  display: block;
  margin-bottom: 0.42rem;
  color: var(--template-primary);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ---- Premium templates: verfijnde, hoogwaardige uitstraling ---- */
.paper.is-premium {
  box-shadow:
    0 38px 96px rgba(16, 20, 24, 0.26),
    0 0 0 1px color-mix(in srgb, var(--template-primary) 22%, transparent);
}

/* Dunne accent-keyline binnen de hoofdkolom voor een gedrukt, luxe randje */
.paper.is-premium .cv-main {
  position: relative;
}

.paper.is-premium .cv-main::before {
  content: "";
  position: absolute;
  inset: 0.55rem 0.55rem 0.55rem 0;
  border: 1px solid color-mix(in srgb, var(--template-primary) 16%, transparent);
  pointer-events: none;
}

/* Naam: ruimere tracking + accent-streepje in de tweede kleur */
.paper.is-premium .paper-head {
  border-bottom-width: 3px;
  border-bottom-color: color-mix(in srgb, var(--template-primary) 78%, var(--template-secondary));
}

.paper.is-premium .paper-head h3 {
  letter-spacing: 0.045em;
}

.paper.is-premium .paper-head h3::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-top: 0.55rem;
  background: color-mix(in srgb, var(--template-secondary) 55%, var(--template-primary));
}

/* Sectiekoppen: wijdere tracking + accent-onderlijn */
.paper.is-premium .paper-section > span {
  position: relative;
  padding-bottom: 0.42rem;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--template-primary) 86%, var(--template-secondary));
}

.paper.is-premium .paper-section > span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.7rem;
  height: 2px;
  background: color-mix(in srgb, var(--template-secondary) 55%, var(--template-primary));
}

/* Zijbalk-labels krijgen een accent-streepje in de tweede kleur */
.paper.is-premium .cv-contact span,
.paper.is-premium .skill-panel > span {
  position: relative;
  padding-bottom: 0.32rem;
  letter-spacing: 0.12em;
}

.paper.is-premium .cv-contact span::after,
.paper.is-premium .skill-panel > span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.4rem;
  height: 2px;
  background: var(--template-secondary);
}

/* Foto krijgt een verfijnde accent-rand */
.paper.is-premium .cv-photo {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 4px color-mix(in srgb, var(--template-secondary) 65%, transparent);
}

/* Het PDF-label oogt rustiger en hoogwaardiger */
.paper.is-premium .paper-badge {
  border-color: color-mix(in srgb, var(--template-secondary) 55%, transparent);
  background: color-mix(in srgb, var(--template-secondary) 22%, #fff);
  color: var(--template-primary);
  letter-spacing: 0.18em;
}

.paper[data-template="quiet-gray"] {
  box-shadow:
    0 24px 70px rgba(32, 36, 38, 0.15),
    0 0 0 1px rgba(32, 36, 38, 0.08);
}

.paper[data-template="quiet-gray"] .paper-head {
  border-bottom-color: #2f3437;
}

.paper[data-template="quiet-gray"] .paper-section > span {
  color: #2f3437;
}

.paper-section > p,
.paper-section li {
  color: #344139;
  font-size: 0.84rem;
  line-height: 1.5;
}

.paper-section ul {
  margin: 0;
  padding-left: 1.1rem;
}

.cv-items {
  display: grid;
  gap: 0.58rem;
}

.cv-item {
  display: grid;
  gap: 0.22rem;
}

.cv-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
}

.cv-item-title {
  color: #25332c;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
}

.cv-item-date {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.cv-item-sub {
  color: #45534b;
  font-size: 0.8rem;
  font-weight: 600;
}

.cv-item-detail {
  margin: 0;
  color: #344139;
  font-size: 0.82rem;
  line-height: 1.48;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.editor-panel {
  padding: 1rem;
}

#outputText {
  min-height: 28rem;
  margin-bottom: 0.8rem;
  line-height: 1.55;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  max-width: 22rem;
  transform: translateY(1rem);
  border-radius: 0.5rem;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  padding: 0.85rem 1rem;
  transition: 180ms ease;
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1050px) {
  .app-shell,
  .dashboard-grid,
  .document-grid,
  .template-strip {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .workspace,
  .sidebar {
    padding: 1rem;
  }

  /* Minimaal 16px in invoervelden, anders zoomt iOS automatisch in bij focus. */
  input,
  select,
  textarea {
    font-size: 1rem;
  }

  .product-bar,
  .topbar,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .form-grid,
  .nav-list,
  .template-options,
  .font-options {
    grid-template-columns: 1fr;
  }

  .entry-row {
    grid-template-columns: 1fr;
  }

  .entry-row.compact {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 2.35rem;
  }

  .document-preview {
    min-height: auto;
    padding: 1rem;
  }
}

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

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff;
  }

  body * {
    visibility: hidden;
  }

  #paperPreview,
  #paperPreview *,
  #letterPaper,
  #letterPaper * {
    visibility: visible;
  }

  .toast {
    display: none !important;
  }

  #paperPreview,
  #letterPaper {
    /* absolute i.p.v. fixed: een fixed element fragmenteert niet over
       printpagina's, waardoor pagina 2 van het CV zou wegvallen. */
    position: absolute;
    inset: 0 auto auto 0;
    width: 210mm;
    height: 297mm;
    max-width: none;
    aspect-ratio: auto;
    transform: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #paperPreview.pages-2 {
    height: 594mm;
  }

  .paper-badge {
    display: none;
  }
}

/* ================= Tabbladen ================= */

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ================= Account ================= */

.account-area {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.account-email {
  max-width: 14rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(23, 32, 27, 0.45);
  padding: 1rem;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: min(26rem, 100%);
  border-radius: 0.8rem;
  background: #fff;
  padding: 1.7rem;
  box-shadow: 0 30px 80px rgba(23, 32, 27, 0.3);
}

.modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.8rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-copy {
  margin: 0.35rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-error {
  grid-column: 1 / -1;
  border: 1px solid #f0c4c0;
  border-radius: 0.5rem;
  background: #fdefee;
  color: #9c2b23;
  padding: 0.6rem 0.8rem;
  font-size: 0.86rem;
}

.sub-status {
  border-top: 1px solid var(--line);
  margin: 0.8rem 0 0.6rem;
  padding-top: 0.7rem;
  font-weight: 700;
}

.social-auth {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.social-button:hover {
  border-color: rgba(29, 107, 79, 0.5);
  box-shadow: var(--shadow-soft);
}

.social-button svg {
  flex: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-note {
  grid-column: 1 / -1;
  border: 1px solid rgba(29, 107, 79, 0.3);
  border-radius: 0.5rem;
  background: #e7f4ec;
  color: #1d6b4f;
  padding: 0.6rem 0.8rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-forgot {
  justify-content: flex-start;
  margin-top: 0.2rem;
  padding-left: 0;
  font-weight: 700;
}

.reset-page {
  max-width: 30rem;
}

.reset-card {
  border: 1px solid rgba(200, 164, 93, 0.25);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 1.8rem;
  box-shadow: var(--shadow-soft);
}

.reset-card h1 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.reset-intro {
  grid-column: 1 / -1;
  margin: 0 0 0.4rem;
  color: var(--muted);
}

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

.reset-card .primary-button,
.reset-card .ghost-button {
  margin-top: 0.6rem;
}

/* ================= Templatekaart-badges ================= */

.template-card[data-ats="true"] small::after {
  content: " ATS";
  color: #1d6b4f;
  font-weight: 900;
}

.template-card[data-ats="true"] {
  border-color: rgba(29, 107, 79, 0.35);
}

/* ================= Lay-out: één kolom (ATS) ================= */

.paper[data-layout="single"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.paper[data-layout="single"] .cv-sidebar {
  display: block;
  grid-template-rows: none;
  background: none;
  color: #222;
  padding: 1.6rem 2.6rem 0;
  border-bottom: 2px solid var(--template-primary);
}

.paper[data-layout="single"] .cv-sidebar-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 0;
}

.paper[data-layout="single"] .cv-photo {
  display: none;
}

.paper[data-layout="single"] .cv-contact {
  border-top: 0;
  padding-top: 0;
}

.paper[data-layout="single"] .cv-contact span {
  color: var(--template-primary);
}

.paper[data-layout="single"] .cv-contact p {
  color: #333;
}

.paper[data-layout="single"] .skill-panel {
  display: block;
  color: #222;
  padding: 0.7rem 0 0.8rem;
}

.paper[data-layout="single"] .skill-panel > span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--template-primary);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.paper[data-layout="single"] .sidebar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  padding-left: 1rem;
}

.paper[data-layout="single"] .sidebar-list li {
  color: #333;
}

.paper[data-layout="single"] .cv-main {
  padding-top: 0.9rem;
}

/* ================= Lay-out: kleurenband boven ================= */

.paper[data-layout="header"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.paper[data-layout="header"] .cv-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
  grid-template-rows: none;
  background: var(--template-primary);
  color: var(--template-primary-text);
  padding: 1.4rem 2.6rem;
}

/* Vaardigheden in de band in twee kolommen, anders wordt de band te hoog. */
.paper[data-layout="header"] .skill-panel .sidebar-list {
  display: block;
  columns: 2;
  column-gap: 1.2rem;
  padding-left: 1rem;
}

.paper[data-layout="header"] .skill-panel .sidebar-list li {
  break-inside: avoid;
}

.paper[data-layout="header"] .cv-sidebar-top {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 1.8rem;
  padding: 0;
}

.paper[data-layout="header"] .cv-photo {
  flex: none;
  width: 5.6rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--template-secondary) 65%, transparent);
}

.paper[data-layout="header"] .cv-contact {
  flex: 1;
  border-top: 0;
  padding-top: 0;
}

.paper[data-layout="header"] .skill-panel {
  flex: 1;
  color: var(--template-primary-text);
  padding: 0;
}

.paper[data-layout="header"] .cv-main {
  padding-top: 1.2rem;
}

/* ================= Briefpapier ================= */

.letter-layout {
  display: grid;
  gap: 1rem;
}

.letter-preview-frame {
  display: block;
  min-height: auto;
  overflow: hidden;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 164, 93, 0.08), transparent 22rem),
    linear-gradient(165deg, #ffffff, #eef3ef);
}

.letter-paper {
  position: relative;
  /* Vaste A4-afmeting (zoals het CV) zodat de preview groot en gelijk aan de PDF is. */
  width: 794px;
  height: 1123px;
  overflow: hidden;
  transform-origin: top left;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 28px 70px rgba(54, 92, 134, 0.18);
  padding: 4.6rem 4.2rem;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  color: #1e2622;
  font-size: 0.98rem;
  line-height: 1.65;
}

.letter-paper.watermark::after {
  content: "VOORBEELD";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.14);
  transform: rotate(-32deg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

.letter-head p {
  margin: 0;
}

.letter-head p:first-child {
  font-weight: 700;
  font-size: 1.05rem;
}

.letter-head p + p {
  color: #55605a;
  font-size: 0.84rem;
}

.letter-meta {
  margin: 2.2rem 0 1.6rem;
}

.letter-meta p {
  margin: 0;
}

.letter-subject {
  margin-bottom: 1.4rem;
  font-weight: 700;
}

.letter-body p {
  margin: 0 0 1rem;
}

.letter-closing {
  margin-top: 1.8rem;
}

#letterSignature {
  margin-top: 2.4rem;
  font-weight: 700;
}

/* ================= Vacatures en tracker ================= */

.job-search {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: #fbfdfb;
  padding: 1rem;
}

.job-search label {
  display: grid;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.86rem;
}

.tracker-grid {
  align-items: start;
}

.app-list {
  display: grid;
  gap: 0.8rem;
}

.app-card {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.9rem 1rem;
}

.app-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.app-status {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 800;
  background: #eef1ef;
  color: #45534b;
}

.app-status.status-gesolliciteerd {
  background: #e4edf8;
  color: #1d4f91;
}

.app-status.status-gesprek {
  background: #fdf3dc;
  color: #8a6116;
}

.app-status.status-afgewezen {
  background: #fdefee;
  color: #9c2b23;
}

.app-status.status-aangenomen {
  background: #e7f4ec;
  color: #1d6b4f;
}

.app-meta {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
}

.app-status-select {
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: #fff;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

@media (max-width: 1050px) {
  .tracker-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= Visuele opfrisser ================= */

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(29, 107, 79, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #1f5540;
  padding: 0.42rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-badges span::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gold);
}

/* Donkere premium abonnementskaart */
.pricing-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 164, 93, 0.4);
  background:
    radial-gradient(circle at 85% -20%, rgba(200, 164, 93, 0.22), transparent 12rem),
    linear-gradient(170deg, #1a4736 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
  box-shadow: 0 26px 60px rgba(13, 44, 33, 0.35);
}

.pricing-card .eyebrow {
  color: var(--gold);
}

.pricing-card > strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.pricing-card p {
  color: rgba(242, 246, 241, 0.72);
}

.pricing-card .sub-status {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.pricing-card .pricing-note {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(242, 246, 241, 0.6);
}

.pricing-card .text-button {
  color: rgba(242, 246, 241, 0.7);
}

.pricing-card .text-button:hover {
  color: #fff;
}

.pricing-card button {
  width: 100%;
  margin-bottom: 0.5rem;
}

/* Downloadkaart (na aankoop) — zelfde premium look, alleen de download-actie */
.download-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 164, 93, 0.4);
  border-radius: 0.9rem;
  padding: 1.4rem;
  background:
    radial-gradient(circle at 85% -20%, rgba(200, 164, 93, 0.22), transparent 12rem),
    linear-gradient(170deg, #1a4736 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
  box-shadow: 0 26px 60px rgba(13, 44, 33, 0.35);
}

.download-card[hidden] {
  display: none;
}

.download-card .eyebrow {
  color: var(--gold);
}

.download-card > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.download-card p {
  color: rgba(242, 246, 241, 0.72);
}

.download-card button {
  width: 100%;
  margin-top: 0.6rem;
}

/* Account-omgeving */
.account-modal {
  width: min(30rem, 100%);
  text-align: left;
}

.account-modal-email {
  margin: -0.4rem 0 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.account-block {
  margin-bottom: 1.3rem;
}

.account-block h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.account-cv-list {
  display: grid;
  gap: 0.5rem;
  max-height: 14rem;
  overflow: auto;
}

.account-cv-item {
  display: grid;
  gap: 0.15rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.6rem 0.8rem;
  transition: border-color 120ms ease, background 120ms ease;
}

.account-cv-item:hover {
  border-color: rgba(29, 107, 79, 0.45);
  background: #fbfdfb;
}

.account-cv-item strong {
  font-size: 0.92rem;
}

.account-cv-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.account-empty {
  color: var(--muted);
  font-size: 0.88rem;
}

.account-sub-status {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.account-cancel {
  padding-left: 0;
  color: #c0392b;
  font-weight: 700;
}

.account-cancel:hover {
  color: #a93226;
}

/* ================= Gratis ATS-voorproefje (landing) ================= */
.ats-preview-intro {
  max-width: 46rem;
  margin: 0 0 1.4rem;
  color: var(--muted);
  line-height: 1.65;
}

.ats-preview-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  max-width: 46rem;
}

.ats-preview-card textarea {
  width: 100%;
}

.ats-preview-card .actions {
  margin-top: 0.9rem;
}

.ats-preview-results {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.ats-preview-results[hidden] {
  display: none;
}

.ats-preview-results h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
}

.ats-preview-cta {
  margin-top: 1.3rem;
  padding: 1.1rem 1.2rem;
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 85% -20%, rgba(200, 164, 93, 0.22), transparent 12rem),
    linear-gradient(170deg, #1a4736 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
}

.ats-preview-cta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.ats-preview-cta p {
  margin: 0.3rem 0 0.9rem;
  color: rgba(242, 246, 241, 0.8);
  font-size: 0.92rem;
}

/* Korte toelichting onder een sectiekop (bijv. bij de brief-generator). */
.section-sub {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--muted, #5b6660);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Melding als de gratis AI-daglimiet bereikt is: nodig uit om een account te maken. */
.ats-preview-notice {
  margin-top: 1.2rem;
  padding: 1rem 1.15rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(200, 164, 93, 0.5);
  background: rgba(200, 164, 93, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.ats-preview-notice p {
  margin: 0;
  flex: 1 1 16rem;
  color: var(--emerald-night, #17201b);
  font-size: 0.95rem;
}

/* ================= ATS-check ================= */
.ats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .ats-layout {
    grid-template-columns: 1fr;
  }
}

.ats-intro {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ats-results {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.3rem;
}

.ats-results[hidden] {
  display: none;
}

.ats-score-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.ats-score-ring {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: conic-gradient(rgba(23, 32, 27, 0.08) 0deg, rgba(23, 32, 27, 0.08) 360deg);
}

.ats-score-ring span {
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}

.ats-score-card strong {
  display: block;
  margin-bottom: 0.25rem;
}

.ats-score-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ats-block {
  margin-bottom: 1.2rem;
}

.ats-block:last-child {
  margin-bottom: 0;
}

.ats-block h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.ats-block h3 small {
  color: var(--muted);
  font-weight: 600;
}

.ats-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.ats-dot-ok {
  background: #1d6b4f;
}

.ats-dot-miss {
  background: #c8a45d;
}

.ats-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ats-chip {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(29, 107, 79, 0.09);
  color: var(--ink);
}

.ats-block:last-child .ats-chip {
  background: rgba(200, 164, 93, 0.14);
}

.ats-caveat {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}

.ats-empty {
  margin: 0;
  color: var(--muted);
}

/* Registratie-bevestiging: "check je inbox" */
.auth-confirm {
  text-align: center;
  padding: 0.6rem 0.4rem 0.2rem;
}

.auth-confirm-icon {
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
}

.auth-confirm h3 {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
}

.auth-confirm p {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.auth-confirm-spam {
  border: 1px solid rgba(200, 164, 93, 0.45);
  border-radius: 0.6rem;
  background: rgba(200, 164, 93, 0.1);
  padding: 0.6rem 0.8rem;
}

.auth-confirm .primary-button {
  margin-top: 0.4rem;
}

/* Opzeg-feedback */
.cancel-feedback {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(29, 107, 79, 0.05);
  padding: 0.9rem 1rem;
}

.cancel-feedback-title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-size: 0.92rem;
}

.cancel-feedback-options {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

/* Overschrijf de algemene formulier-labelstijl (grid + vet) expliciet:
   rondje en tekst netjes naast elkaar, links uitgelijnd. */
.cancel-feedback-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.cancel-feedback-options input[type="radio"] {
  flex-shrink: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--emerald);
}

.cancel-feedback textarea {
  width: 100%;
  margin-bottom: 0.7rem;
}

.cancel-feedback-actions {
  display: flex;
  gap: 0.6rem;
}

.account-privacy-note {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.account-privacy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.account-delete {
  padding-left: 0;
  color: #c0392b;
  font-weight: 700;
}

.account-delete:hover {
  color: #a93226;
}

/* ================= Landingspagina ================= */

.landing-body {
  display: block;
}

.landing-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
}

.landing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.landing-nav > a:not(.primary-button):not(.ghost-button) {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.landing-nav > a:not(.primary-button):not(.ghost-button):hover {
  color: var(--emerald);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.landing-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 22rem;
}

.landing-section {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.2rem 1.5rem;
}

.landing-section > h2 {
  margin-bottom: 1.4rem;
  font-size: 1.9rem;
}

/* Echte voorbeeld-CV's: screenshots van volledig ingevulde templates. */
.cv-shot {
  display: block;
  width: 13.5rem;
  height: auto;
  border-radius: 0.4rem;
  box-shadow: 0 24px 60px rgba(24, 39, 32, 0.2), 0 0 0 1px rgba(23, 32, 27, 0.06);
}

.landing-hero-visual .hero-mini-1 {
  position: relative;
  z-index: 2;
  transform: rotate(-4deg);
}

.landing-hero-visual .hero-mini-2 {
  position: absolute;
  right: 4%;
  top: 3.2rem;
  z-index: 1;
  transform: rotate(5deg);
}

.mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
}

.mockup-card {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.4rem 1.2rem 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.mockup-card:hover {
  transform: translateY(-3px);
  border-color: rgba(29, 107, 79, 0.45);
  box-shadow: var(--shadow-soft);
}

.mockup-card .cv-shot {
  margin-bottom: 0.7rem;
}

.mockup-card span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.mockup-note {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.mockup-note a {
  color: var(--emerald);
  font-weight: 700;
}

/* Stappen */
.steps-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.step-card,
.why-card {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.3rem;
}

.step-number {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(160deg, #23543f, var(--emerald-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}

.step-card strong,
.why-card strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
}

.step-card p,
.why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Prijs */
.landing-price-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  border: 1px solid rgba(200, 164, 93, 0.4);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 85% -20%, rgba(200, 164, 93, 0.22), transparent 14rem),
    linear-gradient(170deg, #1a4736 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
  padding: 1.8rem 2rem;
  box-shadow: 0 26px 60px rgba(13, 44, 33, 0.35);
}

.price-intro {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.price-then {
  margin: 0.2rem 0 0.9rem;
  color: rgba(242, 246, 241, 0.72);
}

.price-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(242, 246, 241, 0.85);
  font-size: 0.93rem;
}

.landing-footer {
  max-width: 68rem;
  margin: 1rem auto 0;
  padding: 1.6rem 1.5rem 2rem;
}

/* Eerlijke vergelijkingstabel */
.compare-wrap {
  margin-top: 2rem;
}

.compare-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
  font-size: 0.92rem;
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare-table thead th {
  background: rgba(23, 32, 27, 0.04);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-table tbody th {
  font-weight: 700;
  color: var(--ink);
  width: 32%;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table td:not(.compare-us) {
  color: var(--muted);
}

.compare-table .compare-us {
  background: rgba(29, 107, 79, 0.07);
  color: var(--ink);
}

.compare-table thead .compare-us {
  color: var(--emerald);
}

.compare-note {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.compare-note a {
  color: var(--emerald);
}

@media (max-width: 900px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding-top: 1.5rem;
  }

  .landing-hero-visual {
    min-height: 18rem;
    margin-top: 1rem;
  }
}

/* ================= Sectievolgorde op het CV ================= */

/* "Opleiding eerst": alleen de volgorde in de hoofdkolom verandert.
   De naamkop en profieltekst blijven altijd bovenaan. */
.paper[data-order="education-first"] .cv-main > .paper-head {
  order: 1;
}

.paper[data-order="education-first"] .cv-main > .paper-section {
  order: 2;
}

.paper[data-order="education-first"] #previewEducationSection {
  order: 3;
}

.paper[data-order="education-first"] #previewCertificateSection {
  order: 4;
}

.paper[data-order="education-first"] #previewExperienceSection {
  order: 5;
}

.paper[data-order="education-first"] #previewCustomSection {
  order: 6;
}

.paper[data-order="education-first"] #previewHobbySection {
  order: 7;
}

/* ================= Mobiel: preview vergroten ================= */

.zoom-preview-button {
  display: none;
}

@media (max-width: 680px) {
  .zoom-preview-button {
    display: inline-flex;
  }
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: auto;
  background: rgba(23, 32, 27, 0.85);
  padding: 0.75rem;
}

.zoom-overlay[hidden] {
  display: none;
}

.zoom-overlay .zoom-inner {
  transform-origin: top left;
}

.zoom-close-hint {
  position: sticky;
  top: 0;
  z-index: 81;
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* Kaart-hovers */
.template-card,
.font-card {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.template-card:hover,
.font-card:hover {
  transform: translateY(-2px);
}

.template-options {
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 107, 79, 0.35) transparent;
}

/* Toast met gouden accent */
.toast {
  border-left: 4px solid var(--gold);
  background: var(--emerald-night);
  box-shadow: 0 18px 44px rgba(13, 44, 33, 0.4);
}

/* Modal verfijning */
.modal-overlay {
  backdrop-filter: blur(5px);
}

.modal {
  border: 1px solid rgba(200, 164, 93, 0.25);
  border-radius: 1rem;
}

.modal h2 {
  font-size: 1.5rem;
}

/* Documentzone: subtiel podium voor het CV */
.document-preview {
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 164, 93, 0.08), transparent 22rem),
    linear-gradient(165deg, #ffffff, #eef3ef);
}

/* Sollicitatiekaarten */
.app-card {
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.app-card:hover {
  border-color: rgba(29, 107, 79, 0.35);
  box-shadow: var(--shadow-soft);
}

/* ================= Help-tooltip (ATS-uitleg) ================= */

.help-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.15rem;
  border: 1px solid rgba(29, 107, 79, 0.4);
  border-radius: 50%;
  background: #fff;
  color: var(--emerald);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: 0.1rem;
  cursor: help;
}

.help-tip:hover,
.help-tip:focus-visible {
  background: var(--emerald);
  color: #fff;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 40;
  width: 19rem;
  max-width: 74vw;
  transform: translateX(-50%);
  border-radius: 0.6rem;
  background: var(--emerald-night);
  color: #f2f6f1;
  padding: 0.7rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 16px 40px rgba(13, 44, 33, 0.35);
  pointer-events: none;
  white-space: normal;
}

/* ================= FAQ ================= */

.faq-section {
  margin-top: 1.5rem;
  border: 1px solid rgba(219, 227, 222, 0.9);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
}

.faq-list {
  display: grid;
  gap: 0.5rem;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: #fbfdfb;
  padding: 0;
  overflow: hidden;
  transition: border-color 140ms ease;
}

.faq-list details[open] {
  border-color: rgba(29, 107, 79, 0.4);
  background: #fff;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex: none;
  color: var(--gold-deep);
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 160ms ease;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  margin: 0;
  padding: 0 1.1rem 1rem;
  color: #3c463f;
  font-size: 0.92rem;
  line-height: 1.6;
}

.faq-list a {
  color: var(--emerald);
  font-weight: 700;
}

/* ================= Footer ================= */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding: 1.6rem 0.2rem 0.4rem;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.site-footer-brand img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.55rem;
}

.site-footer-brand strong {
  font-family: var(--font-display);
}

.site-footer-brand p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.site-footer-links a {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--emerald);
}

/* ================= Voortgangsmeter ================= */

.progress-meter {
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: #fbfdfb;
  padding: 0.8rem 0.95rem;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.progress-labels strong {
  color: var(--emerald);
}

.progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: #e6ece7;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald), #2f8f65 70%, var(--gold));
  transition: width 260ms ease;
}

.progress-hint {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ================= Talen op het CV ================= */

.language-heading {
  display: block;
  margin: 0.9rem 0 0.45rem;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.paper[data-layout="single"] .language-heading {
  color: var(--template-primary);
}

/* Bij een gekozen ATS-template is de foto-optie ruis: die komt toch niet op het CV. */
.ats-selected .photo-field {
  display: none;
}

/* CV-beheer: wisselen tussen opgeslagen CV's */
.cv-manager {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(200, 164, 93, 0.35);
  border-radius: 0.65rem;
  background: #fdfaf3;
  padding: 0.8rem 0.95rem;
}

.cv-manager label {
  flex: 1;
  min-width: 12rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.cv-manager select {
  background: #fff;
}

/* ×-knop om een invoerregel te verwijderen */
.entry-block {
  position: relative;
}

.remove-entry {
  position: absolute;
  top: 50%;
  right: -0.4rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}

.entry-block:hover .remove-entry,
.remove-entry:focus-visible {
  opacity: 1;
}

.remove-entry:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* Bij één overgebleven regel is verwijderen zinloos: dan leegt de knop alleen de velden,
   maar visueel verbergen we hem om verwarring te voorkomen. */
[data-entry-list] .entry-block:only-child .remove-entry {
  display: none;
}

/* Ruimte voor de knop rechts van de invoervelden */
.entry-block .entry-row {
  padding-right: 0.75rem;
}

/* ================= ATS-variant: gecentreerde kop ================= */

.paper[data-variant="centered"] .paper-head {
  justify-content: center;
  text-align: center;
}

.paper[data-variant="centered"][data-layout="single"] .cv-sidebar-top {
  justify-content: center;
  text-align: center;
}

.paper[data-variant="centered"][data-layout="single"] .sidebar-list {
  justify-content: center;
}

/* ================= Juridische pagina's ================= */

.legal-body {
  display: block;
}

.legal-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.legal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.legal-brand img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.55rem;
}

.legal-page h1 {
  font-size: 2.3rem;
  margin-bottom: 0.4rem;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 1.8rem;
}

.legal-page h2 {
  font-size: 1.3rem;
  margin: 1.8rem 0 0.6rem;
}

.legal-page p,
.legal-page li {
  color: #2e3a33;
  font-size: 0.96rem;
  line-height: 1.65;
}

.legal-page ul {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.legal-page a {
  color: var(--emerald);
  font-weight: 700;
}

.legal-footer {
  margin-top: 2.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

.legal-footer p {
  color: var(--muted);
  font-size: 0.84rem;
  margin-bottom: 0.3rem;
}

/* ================= SEO-gidspagina's ================= */

.article-page article > section {
  margin-bottom: 1.6rem;
}

.article-page blockquote {
  margin: 1rem 0;
  border-left: 4px solid var(--gold);
  border-radius: 0.4rem;
  background: #f6f3ea;
  padding: 1rem 1.2rem;
  color: #3c463f;
  font-size: 0.95rem;
  line-height: 1.6;
}

.article-page ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.article-page ol li {
  margin-bottom: 0.35rem;
}

.breadcrumb {
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.breadcrumb a {
  color: var(--emerald);
  font-weight: 700;
  text-decoration: none;
}

.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  border: 1px solid rgba(200, 164, 93, 0.4);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 85% -30%, rgba(200, 164, 93, 0.2), transparent 12rem),
    linear-gradient(170deg, #1a4736 0%, var(--emerald-night) 100%);
  color: #f2f6f1;
  padding: 1.3rem 1.5rem;
}

.article-cta strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.article-cta p {
  margin: 0.3rem 0 0;
  color: rgba(242, 246, 241, 0.75);
  font-size: 0.9rem;
  max-width: 32rem;
}

.article-faq {
  margin-top: 2.2rem;
}

.related-block {
  margin-top: 2.2rem;
}

.related-grid,
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.related-card,
.guide-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: #fbfdfb;
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.related-card:hover,
.guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 107, 79, 0.4);
  box-shadow: var(--shadow-soft);
}

.related-card strong,
.guide-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.related-card span {
  color: var(--emerald);
  font-size: 0.85rem;
  font-weight: 700;
}

.guide-card span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.hub-intro {
  max-width: 40rem;
  font-size: 1.02rem;
}