/* weekendplan-site.css — huisstijl B "Op pad" (#907).
   One stylesheet for every family page: tokens, fonts, base, header/footer,
   components and the styling of the existing wp2-* / wp-account-* class names. */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-roman.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  --sand: #f6f0e4;
  --sand-d: #ece3d1;
  --card: #fffdf8;
  --ink: #1d2a24;
  --soft: #5a675f;
  --forest: #1f4d3a;
  --deep: #13352a;
  --sun: #f7b733;
  --sun-soft: #fdeec6;
  --clay: #d4613e;
  --clay-text: #b04a2b;
  --sky: #d6e7f5;
  --ok: #276a43;
  --ok-soft: #dcebd9;
  --line: #e4dccb;
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-card: 28px;
  --radius-panel: 18px;
  --radius-field: 14px;
  --shadow-card: 0 30px 60px -36px rgb(29 42 36 / 45%);
  --shadow-button: 0 12px 26px -14px rgb(19 53 42 / 70%);
  --focus-ring: 0 0 0 3px var(--card), 0 0 0 6px var(--forest);  /* two-tone: forest is 9:1 on sand */
  --route-dots: 0.1 11;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--sand); color: var(--ink); font: 500 17px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.site-page main { flex: 1 0 auto; }
.site-page h1, .site-page h2, .site-page h3, .site-page h4 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.08; margin: 0; color: inherit; }
.site-page p { margin: 0 0 0.9em; }
:where(.site-page) a { color: var(--forest); }
.site-page img, .site-page svg, .site-page video { max-width: 100%; }
.site-page em.site-accent { font-style: italic; font-weight: 650; color: var(--clay); }
.site-page :focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.site-hero :focus-visible, .site-footer :focus-visible, .wp-account-inset[aria-labelledby="product-access-heading"] :focus-visible { outline-color: #fff; }
.site-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.site-skip:focus { left: 12px; }
.site-shell { width: min(1200px, 100%); margin-inline: auto; padding-inline: 32px; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 5; background: var(--sand); border-bottom: 1px solid var(--line); }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.site-header-actions { display: flex; align-items: center; gap: 24px; font-weight: 600; }
.site-header-actions > a:not(.site-btn):not(.wp2-button), .site-header-actions > span { color: var(--ink); text-decoration: none; border: 0; }
.site-logo { display: inline-flex; align-items: center; gap: 1px; font: 700 25px/1 var(--font-text); letter-spacing: -0.02em; color: var(--forest); text-decoration: none; }
.site-logo-w { width: 34px; height: 24px; overflow: visible; flex: none; }
.site-logo-w path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.site-logo-w circle { fill: var(--sun); stroke: var(--forest); stroke-width: 1.6; }
.site-logo-dot-rest--animated { opacity: 0; }
.site-logo--light { color: #fff; }
.site-logo--light .site-logo-w circle { stroke: #fff; }

/* ---------- buttons: exactly two kinds ---------- */
.site-btn, .wp2-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; font: 700 17px/1.2 var(--font-text); color: #fff; text-decoration: none; text-align: center; background: var(--forest); padding: 8px 24px 8px 8px; border: 0; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-button); transition: gap 0.2s ease, transform 0.2s ease; }
.wp2-button { padding: 12px 24px; }
.site-btn:hover { gap: 16px; }
.wp2-button:hover { transform: translateY(-1px); }
.site-btn-dot { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--sun); color: var(--forest); display: grid; place-items: center; font-weight: 700; }
.site-btn--small, .wp2-button-small { min-height: 40px; font-size: 15px; padding: 6px 18px 6px 6px; }
.wp2-button-small { padding: 9px 18px; }
.site-btn--small .site-btn-dot { width: 28px; height: 28px; font-size: 13px; }
.site-btn--light, .wp2-button-light { background: var(--sun); color: var(--deep); }
.site-btn--light .site-btn-dot { background: var(--deep); color: var(--sun); }
.site-btn--block { width: 100%; position: relative; padding: 14px 56px; }
.site-btn--block .site-btn-dot { position: absolute; left: 8px; top: 50%; margin-top: -19px; }
.site-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font: 700 16px/1.2 var(--font-text); color: var(--forest); background: transparent; border: 2px dashed var(--forest); border-radius: 999px; padding: 10px 20px; cursor: pointer; text-decoration: none; }
.site-btn-secondary:hover { background: rgb(31 77 58 / 6%); }
.site-link, .wp2-text-link { font-weight: 700; color: var(--forest); text-decoration: none; border-bottom: 2.5px dotted currentColor; padding-bottom: 1px; }
.site-link--danger { color: var(--clay-text); }

/* ---------- labels, cards, pins, stamps ---------- */
.site-label, .wp2-kicker, .wp2-section-label { display: block; font: 700 13px/1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-text); margin: 0 0 14px; }
.site-card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.site-pin { width: 44px; height: 44px; flex: none; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: var(--forest); display: grid; place-items: center; }
.site-pin > span { transform: rotate(45deg); color: var(--sun); font: 700 19px/1 var(--font-display); }
.site-pin--clay { background: var(--clay); }
.site-pin--clay > span { color: #fff; }
.site-pin--sun { background: var(--sun); }
.site-pin--sun > span { color: var(--forest); }
.site-stamp { width: 132px; height: 132px; flex: none; border-radius: 50%; background: var(--sun); color: var(--deep); display: grid; place-items: center; text-align: center; font: 700 13px/1.15 var(--font-text); outline: 3px dashed rgb(19 53 42 / 50%); outline-offset: -11px; box-shadow: 0 18px 30px -16px rgb(0 0 0 / 50%); transform: rotate(10deg); }
.site-stamp b { display: block; font: italic 700 30px/1 var(--font-display); }

/* ---------- footer ---------- */
.site-footer { margin-top: 64px; background: var(--deep); color: #cfe0d6; }
.site-footer-hill { display: block; width: 100%; height: 60px; max-width: none; margin-top: -1px; }
.site-footer-hill path { fill: var(--sand); }
.site-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: 30px 40px; }
.site-footer-tag { margin: 6px 0 0; font: italic 500 18px/1.3 var(--font-display); color: var(--sun); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer-links a { color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline dotted; text-underline-offset: 4px; }

/* ---------- compatibility: old variable names point at B tokens ---------- */
:root {
  --wp2-paper: var(--sand); --wp2-card: var(--card); --wp2-ink: var(--ink); --wp2-ink-soft: var(--soft); --wp2-line: var(--line);
  --wp2-green: var(--forest); --wp2-green-deep: var(--deep); --wp2-green-soft: var(--ok-soft);
  --wp2-yellow: var(--sun); --wp2-yellow-soft: var(--sun-soft);
  --wp2-blue: var(--forest); --wp2-blue-deep: var(--deep); --wp2-blue-soft: var(--sky); --wp2-coral: var(--clay);
  --wp2-font-text: var(--font-text); --wp2-font-voice: var(--font-display);
}

/* ---------- account layout, ported from account.css (#907) ---------- */
.wp-account-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 18%, rgb(255 241 184 / 45%) 0 8rem, transparent 8.1rem),
    radial-gradient(circle at 92% 72%, rgb(223 234 255 / 56%) 0 13rem, transparent 13.1rem),
    var(--wp2-paper);
}

.wp-account-main { min-height: calc(100vh - 4.75rem); }
.wp-account-section { padding-block: clamp(2.5rem, 6vw, 6rem); }
.wp-account-section-private { padding-block-start: clamp(2.2rem, 5vw, 4.5rem); }

.wp-account-split,
.wp-account-register-layout,
.wp-account-private-layout {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.wp-account-intro { max-width: 34rem; padding-block-start: 0.9rem; }
.wp-account-intro h1 { margin-bottom: 1.25rem; font-size: clamp(3.1rem, 7vw, 5.5rem); }
.wp-account-private-title { overflow-wrap: normal; hyphens: none; }
.wp-account-lead { max-width: 32rem; margin-bottom: 1.8rem; color: #385047; font-size: clamp(1.08rem, 2vw, 1.22rem); }
.wp-account-route { display: flex; align-items: center; width: min(19rem, 80%); margin-top: 2.4rem; }
.wp-account-route::before,
.wp-account-route::after { width: 50%; border-top: 2px dashed var(--wp2-green); content: ""; opacity: 0.5; }
.wp-account-route span { width: 0.8rem; height: 0.8rem; flex: 0 0 auto; border: 2px solid var(--wp2-green); border-radius: 50%; background: var(--wp2-yellow); }
.wp-account-route span:first-child { margin-right: -0.4rem; }
.wp-account-route span:nth-child(2) { margin-inline: -0.4rem; }
.wp-account-route span:last-child { margin-left: -0.4rem; }

.wp-account-card {
  width: 100%;
  max-width: 34rem;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border: 1px solid rgb(20 36 31 / 12%);
  border-radius: 1.6rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 1.4rem 4rem rgb(14 64 52 / 10%);
}
.wp-account-card-wide { max-width: 46rem; }
.wp-account-card-heading { margin-bottom: 1.8rem; }
.wp-account-card-heading h2 { max-width: none; margin-bottom: 0.65rem; font-size: clamp(2.35rem, 5vw, 3.35rem); }
.wp-account-card-heading p:last-child { max-width: 37rem; margin-bottom: 0; color: var(--wp2-ink-soft); }
.wp-account-eyebrow { margin-bottom: 0.45rem; color: var(--wp2-green); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }

.wp-account-form { display: grid; gap: 1.35rem; }
.wp-account-field { display: grid; gap: 0.42rem; min-width: 0; }
.wp-account-field > label,
.wp-account-child > legend { color: var(--wp2-ink); font-size: 0.92rem; font-weight: 750; }
.wp-account-field input:not([type="checkbox"]),
.wp-account-field select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.72rem 0.85rem;
  border: 1.5px solid #9eaaa5;
  border-radius: 0.72rem;
  background: #fff;
  color: var(--wp2-ink);
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.wp-account-field input:hover,
.wp-account-field select:hover { border-color: var(--wp2-green); }
.wp-account-field input:focus,
.wp-account-field select:focus { border-color: var(--wp2-blue); outline: 0; box-shadow: 0 0 0 3px rgb(29 95 196 / 16%); }
.wp-account-field input[aria-invalid="true"],
.wp-account-field select[aria-invalid="true"] { border-color: var(--wp2-coral); }

.wp-account-help { color: var(--wp2-ink-soft); font-size: 0.82rem; }
.wp-account-help ul { margin: 0.4rem 0 0; padding-left: 1.15rem; }
.wp-account-help li + li { margin-top: 0.2rem; }
.wp-account-password-feedback ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.wp-account-password-feedback li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.58rem;
  border-radius: 999px;
  background: #f1f3f2;
  color: var(--wp2-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}
.wp-account-password-feedback li[data-met="true"] { background: var(--wp2-green-soft); color: var(--wp2-green); }
.wp-account-password-feedback li[data-met="true"] span { font-weight: 900; }
.wp-account-password-toggle { display: inline-flex; width: fit-content; align-items: center; gap: 0.5rem; color: var(--wp2-ink-soft); cursor: pointer; font-size: 0.84rem; font-weight: 700; }
.wp-account-password-toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--wp2-green); }
.wp-account-password-feedback[hidden],
.wp-account-password-toggle[hidden],
.wp-account-password-feedback li[hidden] { display: none; }
.wp-account-field-note { margin: 0; color: var(--wp2-ink-soft); font-size: 0.84rem; }
.wp-account-field-note[data-matched="true"] { color: var(--wp2-green); font-weight: 750; }
.wp-account-field-note[data-matched="true"]::before { margin-right: 0.35rem; content: "✓"; }

.wp-account-page .errorlist { margin: 0; padding: 0; color: #9e2f20; font-size: 0.84rem; font-weight: 650; list-style: none; }
.wp-account-alert { display: grid; gap: 0.15rem; margin-bottom: 1.25rem; padding: 0.9rem 1rem; border-radius: 0.75rem; background: var(--wp2-blue-soft); color: var(--wp2-blue-deep); font-size: 0.9rem; }
.wp-account-page #billing-start-message[hidden],
.wp-account-page #billing-payment-message[hidden] { display: none; }
.wp-account-alert-error { border-left: 4px solid var(--wp2-coral); background: #fff0ed; color: #7e261a; }
.wp-account-alert-success { border-left: 4px solid var(--wp2-green); background: var(--wp2-green-soft); color: var(--wp2-green-deep); }
.wp-account-alert-warning { border-left: 4px solid #d19a0b; background: var(--wp2-yellow-soft); color: #5a4305; }

.wp-account-form-section { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1.3rem 0 0; border: 0; border-top: 1px solid var(--wp2-line); container-name: account-section; container-type: inline-size; }
.wp-account-form-section > legend { display: flex; align-items: center; gap: 0.55rem; padding: 0 0.25rem 0 0; color: var(--wp2-ink); font-family: var(--wp2-font-voice); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.025em; }
.wp-account-form-section > legend > span { display: inline-grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--wp2-yellow); font-family: var(--wp2-font-text); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; }
.wp-account-section-intro { margin: -0.3rem 0 0; color: var(--wp2-ink-soft); font-size: 0.9rem; }
.wp-account-field-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 0.85rem; }

.wp-account-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; color: var(--wp2-ink); cursor: pointer; font-size: 0.93rem; }
.wp-account-check input { width: 1.15rem; height: 1.15rem; margin: 0.18rem 0 0; accent-color: var(--wp2-green); }
.wp-account-check-remove { margin-top: 0.9rem; color: #8a3023; }

.wp-account-children { display: grid; gap: 0.8rem; }
.wp-account-child { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--wp2-line); border-radius: 0.9rem; background: #faf9f5; }
.wp-account-child-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.wp-account-child-heading legend { padding: 0; font-size: 0.94rem; font-weight: 800; }
.wp-account-remove-child,
.wp-account-text-button { padding: 0; border: 0; background: transparent; color: #8a3023; font: inherit; font-size: 0.82rem; font-weight: 750; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.wp-account-neutral-link,
.wp-account-text-button.wp-account-neutral-link { color: var(--wp2-green); font-size: 0.88rem; font-weight: 750; }
button.wp-account-neutral-link { padding: 0; border: 0; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.wp-account-remove-child[hidden] { display: none; }

.wp-account-secondary-button {
  display: inline-flex;
  width: fit-content;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 0.95rem;
  border: 1.5px solid var(--wp2-green);
  border-radius: 999px;
  background: transparent;
  color: var(--wp2-green);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}
.wp-account-secondary-button:hover { background: var(--wp2-green-soft); }
.wp-account-secondary-button span { font-size: 1.25rem; line-height: 0; }
.wp-account-submit { width: 100%; border: 0; cursor: pointer; font: inherit; }
.wp-account-switch { margin: 1.4rem 0 0; color: var(--wp2-ink-soft); font-size: 0.9rem; text-align: center; }
.wp-account-consent { display: grid; gap: 0.55rem; padding: 1rem; border-radius: 0.85rem; background: var(--wp2-green-soft); }
.wp-account-consent p { margin: 0; color: var(--wp2-ink-soft); font-size: 0.82rem; }

.wp-account-steps { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.wp-account-steps li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: 0.8rem; }
.wp-account-steps li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgb(14 64 52 / 18%); border-radius: 50%; background: #fff; color: var(--wp2-green); font-size: 0.82rem; font-weight: 800; }
.wp-account-steps div { display: grid; }
.wp-account-steps small { color: var(--wp2-ink-soft); font-size: 0.83rem; }

.wp-account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--wp2-line); }
.wp-account-facts > div { padding: 1rem 0; border-bottom: 1px solid var(--wp2-line); }
.wp-account-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.wp-account-facts dt { color: var(--wp2-ink-soft); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.wp-account-facts dd { margin: 0.2rem 0 0; font-weight: 700; }
.wp-account-status { display: inline-flex; align-items: center; gap: 0.4rem; }
.wp-account-status::before { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--wp2-green); content: ""; }
.wp-account-inset { margin-top: 1.4rem; padding: 1.1rem; border-radius: 0.9rem; background: var(--wp2-yellow-soft); }
.wp-account-inset h3 { margin-bottom: 0.3rem; }
.wp-account-inset p { margin-bottom: 0.8rem; color: #5d543b; font-size: 0.88rem; }
.wp-account-pause { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--wp2-blue-soft); }
.wp-account-pause p { margin: 0; color: #40577d; }
.wp-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; margin-top: 1.5rem; }
.wp-account-actions form { margin: 0; }
.wp-account-recipient-card { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--wp2-line); border-radius: 1rem; background: #faf9f5; }
.wp-account-recipient-card > p { margin: 0; color: var(--wp2-ink-soft); font-size: 0.9rem; }
.wp-account-recipient-status { flex: 0 0 auto; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--wp2-yellow-soft); color: #5d543b; font-size: 0.76rem; font-weight: 800; }
.wp-account-recipient-status.is-confirmed { background: var(--wp2-green-soft); color: var(--wp2-green); }
.wp-account-recipient-current { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wp-account-recipient-current p { margin: 0.25rem 0 0; color: var(--wp2-ink-soft); font-size: 0.86rem; }
.wp-account-recipient-actions { display: grid; flex: 0 0 auto; justify-items: end; gap: 0.55rem; }
.wp-account-recipient-actions form { margin: 0; }
.wp-account-recipient-editor { margin-top: 1rem; border-top: 1px solid var(--wp2-line); padding-top: 0.85rem; }
.wp-account-recipient-editor summary { width: fit-content; color: var(--wp2-green); cursor: pointer; font-size: 0.86rem; font-weight: 750; }
.wp-account-recipient-editor summary:focus-visible { border-radius: 0.25rem; outline: 3px solid rgb(29 95 196 / 28%); outline-offset: 0.25rem; }
.wp-account-recipient-editor .wp-account-form { margin-top: 1rem; }
.wp-account-danger-zone { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--wp2-line); color: var(--wp2-ink-soft); }
.wp-account-danger-zone summary { width: fit-content; cursor: pointer; font-size: 0.82rem; font-weight: 750; }
.wp-account-danger-zone summary:hover { color: var(--wp2-ink); }
.wp-account-danger-zone summary:focus-visible { border-radius: 0.25rem; outline: 3px solid rgb(29 95 196 / 28%); outline-offset: 0.25rem; }
.wp-account-danger-zone div { margin-top: 0.8rem; padding: 0.9rem 1rem; border-radius: 0.8rem; background: #fff0ed; }
.wp-account-danger-zone p { margin: 0 0 0.65rem; font-size: 0.86rem; }
.wp-account-back { display: inline-flex; margin-top: 0.4rem; font-weight: 700; }
.wp-account-archive-preview { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--wp2-line); }
.wp-account-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.wp-account-section-heading h3 { margin: 0; font-size: 1.55rem; }
.wp-account-section-heading a { flex: 0 0 auto; font-size: 0.86rem; font-weight: 750; }
.wp-account-edition-list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.wp-account-edition-list li { min-width: 0; }
.wp-account-edition-list a {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1.3fr) auto;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--wp2-line);
  border-radius: 0.85rem;
  background: #faf9f5;
  color: inherit;
  text-decoration: none;
}
.wp-account-edition-list a:hover { border-color: var(--wp2-green); background: var(--wp2-green-soft); }
.wp-account-edition-list span { color: var(--wp2-green); font-size: 0.82rem; font-weight: 800; }
.wp-account-edition-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-account-edition-list small { color: var(--wp2-ink-soft); font-size: 0.78rem; text-align: right; }
.wp-account-edition-list-full { gap: 0.8rem; }
.wp-account-empty-state { padding: 1.15rem; border: 1px dashed #a7b2ad; border-radius: 0.85rem; background: #faf9f5; }
.wp-account-empty-state p { margin: 0.3rem 0 0; color: var(--wp2-ink-soft); font-size: 0.88rem; }
.wp-account-retention-note { margin: 0.85rem 0 0; color: var(--wp2-ink-soft); font-size: 0.76rem; }
.wp-account-edition-detail { display: grid; gap: 1.6rem; }
.wp-account-edition-sidebar { display: grid; min-width: 0; align-content: start; gap: 1.4rem; }
.wp-account-edition-sidebar > * { min-width: 0; }
.wp-account-edition-sidebar .wp-account-back { display: inline; overflow-wrap: anywhere; }
.wp-account-mail-frame-shell { min-width: 0; padding: 0.65rem; border: 1px solid var(--wp2-line); border-radius: 1.25rem; background: #dfe7e3; box-shadow: 0 1.4rem 4rem rgb(14 64 52 / 10%); }
.wp-account-mail-frame { display: block; width: 100%; min-height: 70rem; border: 0; border-radius: 0.8rem; background: #fff; }
.wp-account-feedback-card { padding: 1.25rem; border: 1px solid var(--wp2-line); border-radius: 1rem; background: #fff; }
.wp-account-feedback-card h2 { margin-bottom: 0.35rem; font-size: 1.65rem; }
.wp-account-feedback-card > p { margin-bottom: 1rem; color: var(--wp2-ink-soft); }
.wp-account-feedback-form { display: grid; gap: 1rem; }
.wp-account-feedback-form fieldset { display: grid; gap: 0.55rem; margin: 0; padding: 0; border: 0; }
.wp-account-feedback-option { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--wp2-line); border-radius: 0.7rem; cursor: pointer; }
.wp-account-feedback-option:hover { border-color: var(--wp2-green); background: var(--wp2-green-soft); }
.wp-account-feedback-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--wp2-green); }

@media (min-width: 58rem) {
  .wp-account-split { grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.78fr); align-items: center; }
  .wp-account-register-layout { grid-template-columns: minmax(15rem, 0.42fr) minmax(38rem, 1fr); gap: clamp(2rem, 4vw, 4rem); }
  .wp-account-register-intro { position: sticky; top: 2rem; }
}

@media (min-width: 70rem) {
  .wp-account-private-layout { grid-template-columns: minmax(20rem, 0.7fr) minmax(32rem, 1fr); gap: clamp(2rem, 4vw, 4rem); }
  .wp-account-private-layout .wp-account-intro h1 { font-size: clamp(3rem, 5vw, 4.8rem); }
  .wp-account-edition-detail { grid-template-columns: minmax(18rem, 0.42fr) minmax(36rem, 1fr); }
  .wp-account-edition-sidebar .wp-account-intro h1 { font-size: clamp(3rem, 4vw, 3.5rem); }
}

@media (max-width: 40rem) {
  .wp-account-section { padding-block: 2rem 3.2rem; }
  .wp-account-intro h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .wp-account-register-intro .wp-account-steps { display: none; }
  .wp-account-card { padding: 1.15rem; border-radius: 1.15rem; }
  .wp-account-field-row,
  .wp-account-facts { grid-template-columns: 1fr; }
  .wp-account-facts > div:nth-last-child(2) { border-bottom: 1px solid var(--wp2-line); }
  .wp-account-child-heading { align-items: baseline; }
  .wp-account-pause { align-items: flex-start; flex-direction: column; }
  .wp-account-recipient-current { flex-direction: column; }
  .wp-account-recipient-actions { justify-items: start; }
  .wp-account-edition-list a { grid-template-columns: 1fr; gap: 0.2rem; }
  .wp-account-edition-list small { text-align: left; }
  .wp-account-mail-frame { min-height: 58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-account-field input,
  .wp-account-field select { transition: none; }
}

@media (forced-colors: active) {
  .wp-account-radius-field label:has(input:checked) {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  .wp-account-radius-field label:has(input:focus-visible) {
    outline-color: CanvasText;
  }
}

.wp-account-radius-map {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(14 64 52 / 16%);
  border-radius: 1.15rem;
  background: #e9f0ec;
  box-shadow: 0 1.1rem 2.8rem rgb(14 64 52 / 14%);
}
.wp-account-radius-map[hidden] { display: none; }
.wp-account-radius-map:not([hidden]) { animation: wp-account-map-reveal 320ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.wp-account-radius-map-canvas {
  width: 100%;
  height: clamp(18rem, 42vw, 26rem);
  overflow: hidden;
  background: #e9f0ec;
}
.wp-account-radius-map-badge {
  position: absolute;
  z-index: 2;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.38rem 0.62rem;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: rgb(14 64 52 / 90%);
  box-shadow: 0 0.35rem 1rem rgb(14 64 52 / 18%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.wp-account-radius-map-attribution {
  position: absolute;
  z-index: 2;
  right: 0.35rem;
  bottom: 0.35rem;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border-radius: 0.3rem;
  background: rgb(255 255 255 / 88%);
  color: #34413d;
  font-size: 0.62rem;
  line-height: 1.2;
}
.wp-account-radius-map-attribution a { color: inherit; }

.wp-account-location-grid {
  display: grid;
  gap: 1.2rem;
  align-items: stretch;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid rgb(14 64 52 / 11%);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 10% 0%, rgb(255 241 184 / 40%), transparent 11rem),
    linear-gradient(145deg, #fbfcfa, #f2f7f4);
}
.wp-account-location-controls { display: grid; align-content: center; gap: 1.15rem; min-width: 0; }
.wp-account-cross-border {
  padding: 0.8rem;
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 72%);
}

.wp-account-radius-field > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid rgb(14 64 52 / 12%);
  border-radius: 999px;
  background: #e8efeb;
}
.wp-account-radius-field > div > div { min-width: 0; }
.wp-account-radius-field > div label {
  position: relative;
  display: grid;
  min-height: 46px;
  align-items: center;
  justify-items: center;
  padding: 0.62rem 0.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wp2-ink);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}
.wp-account-radius-field input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.wp-account-radius-field label:has(input:checked) {
  background: var(--wp2-green);
  box-shadow: 0 0.35rem 0.85rem rgb(14 64 52 / 22%);
  color: #fff;
}
.wp-account-radius-field label:has(input:focus-visible) {
  outline: 3px solid rgb(29 95 196 / 24%);
  outline-offset: 2px;
}

@container account-section (min-width: 40rem) {
  .wp-account-location-grid { grid-template-columns: minmax(16rem, 0.82fr) minmax(22rem, 1.18fr); }
  .wp-account-location-grid:has(.wp-account-radius-map[hidden]) { grid-template-columns: minmax(0, 31rem); }
}

@media (max-width: 30rem) {
  .wp-account-radius-map-canvas { height: clamp(17rem, 84vw, 22rem); }
  .wp-account-radius-map-attribution { font-size: 0.58rem; }
}

@media (max-width: 22rem) {
  .wp-account-radius-field > div { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 1rem; }
  .wp-account-radius-field > div label { border-radius: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-account-radius-map:not([hidden]) { animation: none; }
  .wp-account-radius-field > div label { transition: none; }
}

@keyframes wp-account-map-reveal {
  from { opacity: 0; transform: translateY(0.45rem) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* Keep the normal payment choice compact; legal detail has its own pages. */
.wp-account-payment-start { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--wp2-line, #dce2dc); }
.wp-account-payment-start h3 { margin-bottom: 0.6rem; }
.wp-account-payment-start p { margin-bottom: 0.5rem; }
.wp-account-payment-start form { margin-top: 1rem; }
.wp-account-payment-start .wp-account-check { font-size: 0.86rem; line-height: 1.5; }
.wp-account-payment-start button { margin-top: 1rem; }

/* Edition feedback: three equal choices and readable conversation history. */
.wp-feedback-shell { max-width: 780px; }
.wp-feedback-choices { display: grid; gap: 12px; margin: 24px 0; }
.wp-feedback-choice { display: block; padding: 18px 20px; border: 1px solid #c3d0c8; border-radius: 12px; background: #fff; color: #163b2d; text-decoration: none; font-weight: 650; }
.wp-feedback-choice:hover, .wp-feedback-choice-active { background: #e5eee8; border-color: #163b2d; }
.wp-feedback-card { padding: 24px; margin: 24px 0; border: 1px solid #d8dfd8; border-radius: 16px; background: #fff; overflow-wrap: anywhere; }
.wp-feedback-help { font-size: .9rem; color: #53655e; line-height: 1.6; }
.wp-feedback-answer { margin-top: 20px; padding: 16px; border-left: 3px solid #246149; background: #f0f5f0; }
.wp-feedback-text { line-height: 1.7; overflow-wrap: anywhere; }
.wp-feedback-card textarea, .wp-feedback-card input { max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .wp-feedback-card { padding: 18px; } }

.wp-feedback-card textarea { width: 100%; padding: 14px; border: 1px solid #9fb1a7; border-radius: 12px; background: #fff; font: inherit; line-height: 1.6; }

/* Keep the edit action near the facts and mark the default inside the selector. */
.wp-account-profile-action { margin: 0 0 1.25rem; }
@media (max-width: 69.999rem) {
  .wp-account-edition-sidebar { display: contents; }
  .wp-account-edition-detail > .wp-account-mail-frame-shell { order: 2; }
  .wp-account-edition-detail .wp-account-feedback-card { order: 3; }
  .wp-account-edition-detail .wp-account-private-title { font-size: clamp(2.2rem, 8vw, 3rem); }
  .wp-account-edition-detail > .wp-account-mail-frame-shell { padding: .3rem; }
}

.wp-account-radius-field label:has(input[value="30"]) {
  box-shadow: 0 0 0 2px #e8efeb, 0 0 0 5px var(--wp2-green);
}

/* Keep the first free-edition promise and the form together on a phone. */
@media (max-width:600px){.wp-account-register-intro h1{font-size:32px;line-height:1.08;max-width:360px}.wp-account-register-intro .wp-account-lead{font-size:16px;line-height:1.5}.wp-account-register-intro .wp-account-steps{display:none}.wp-account-register-layout{gap:24px}.wp-account-register-intro>p{margin-bottom:12px}}

/* Registration keeps the invitation visible without repeating it below the form. */
.wp-account-register-intro h1 { font-size: clamp(2.8rem, 4vw, 3.65rem); line-height: 1.04; }
.wp-register-offer { position: relative; max-width: 32rem; margin: 1.4rem 0; padding: 1.25rem; border-radius: 1.5rem; background: var(--wp2-yellow-soft); }
.wp-register-free { display: inline-flex; padding: .3rem .7rem; border-radius: 999px; background: var(--wp2-yellow); color: var(--wp2-green); font-size: .78rem; font-weight: 800; }
.wp-register-offer h2 { margin: .8rem 0 .6rem; font-size: 1.85rem; }
.wp-register-offer p { margin: 0; font-size: .9rem; line-height: 1.6; }
.wp-register-friday { display: flex; gap: .85rem; align-items: flex-start; max-width: 32rem; margin-top: 1.5rem; }
.wp-register-mail { display: grid; flex: 0 0 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: var(--wp2-blue-soft); color: var(--wp2-green); font-size: 1.5rem; transform: rotate(-9deg); }
.wp-register-friday h2 { margin-bottom: .45rem; font-size: 1.65rem; }
.wp-register-friday p { margin: 0; color: var(--wp2-ink-soft); font-size: .86rem; line-height: 1.6; }
@media (max-width: 600px) {
 .wp-account-register-intro h1 { font-size: 2.8rem; }
 .wp-account-register-intro .wp-account-lead { margin-bottom: 1rem; }
 .wp-register-offer { margin-block: 1rem; padding: 1rem 1.15rem; }
 .wp-register-offer h2 { margin-top: .65rem; }
 .wp-register-friday { margin-top: 1rem; }
}

/* ---------- huisstijl B layer over the ported account layout ---------- */
.wp2-shell { width: min(1200px, 100%); margin-inline: auto; padding-inline: 32px; }
.wp2-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wp-account-page { background: var(--sand); }
.wp-account-intro h1 { font-weight: 650; }
.wp-account-lead { color: var(--soft); }
.wp-account-eyebrow { color: var(--clay-text); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.wp-account-card { border: 0; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card); }
.wp-account-card-heading h2, .wp-account-section-heading h3, .wp-account-inset h3, .wp-account-feedback-card h2 { font-family: var(--font-display); font-weight: 650; }

/* fields */
.wp-account-field > label, .wp-account-child > legend { font-size: 15px; font-weight: 700; }
.wp-account-field input:not([type="checkbox"]):not([type="radio"]), .wp-account-field select, .wp-feedback-card textarea, .wp-account-feedback-form textarea {
  min-height: 56px; padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--radius-field); background: #fff; color: var(--ink); font: 500 17px/1.4 var(--font-text);
}
.wp-account-field input:hover, .wp-account-field select:hover { border-color: #b9ae96; }
.wp-account-field input:focus, .wp-account-field select:focus, .wp-feedback-card textarea:focus { border-color: var(--forest); outline: 0; box-shadow: var(--focus-ring); }
.wp-account-field input[aria-invalid="true"], .wp-account-field select[aria-invalid="true"] { border-color: var(--clay); }
.wp-account-field select { appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231f4d3a' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center; }
.wp-account-help, .wp-account-field-note, .wp-account-section-intro { color: var(--soft); font-size: 14px; }
.wp-account-page .errorlist { color: var(--clay-text); font-size: 14px; font-weight: 700; }

/* checkboxes and radios: native control stays focusable, drawn in B */
.wp-account-check input[type="checkbox"], .wp-account-password-toggle input[type="checkbox"], .wp-account-feedback-option input, .wp-account-payment-start input[type="checkbox"] {
  appearance: none; flex: none; width: 24px; height: 24px; margin: 1px 0 0; border: 2px solid var(--forest); border-radius: 8px; background: #fff; display: grid; place-items: center; cursor: pointer;
}
.wp-account-feedback-option input[type="radio"] { border-radius: 50%; }
.wp-account-check input[type="checkbox"]:checked, .wp-account-password-toggle input[type="checkbox"]:checked, .wp-account-payment-start input[type="checkbox"]:checked {
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M1.5 5.5l4 4 7-8' fill='none' stroke='%23f7b733' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.wp-account-feedback-option input[type="radio"]:checked { background: var(--forest); box-shadow: inset 0 0 0 4px #fff; }
.wp-account-check input:focus-visible, .wp-account-password-toggle input:focus-visible, .wp-account-feedback-option input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wp-account-check { font-size: 16px; line-height: 1.45; }
.wp-account-consent { padding: 18px 20px; border-radius: var(--radius-panel); background: var(--sun-soft); }
.wp-account-consent p { color: var(--soft); font-size: 13px; }

/* form sections read as a route: numbered markers in the three route colours */
.wp-account-form-section { border-top: 2px dotted var(--line); }
.wp-account-form-section > legend { font-family: var(--font-display); font-size: 26px; font-weight: 650; }
.wp-account-form-section > legend > span { width: 36px; height: 36px; background: var(--forest); color: var(--sun); font: 700 16px/1 var(--font-display); }
.wp-account-form-section:nth-of-type(2) > legend > span { background: var(--clay); color: #fff; }
.wp-account-form-section:nth-of-type(3) > legend > span { background: var(--sun); color: var(--forest); }
.wp-account-child { border: 0; border-radius: var(--radius-panel); background: var(--sand); padding: 16px 18px 18px; }
/* a legend in a borderless, filled fieldset would sit on the top edge: float it into the panel */
.wp-account-child > legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 15px; font-weight: 700; }
.wp-account-child > legend ~ * { clear: both; }
.wp-account-location-grid { border: 0; border-radius: 22px; background: var(--sand); }
.wp-account-cross-border { background: var(--card); }

/* km switch */
.wp-account-radius-field > div { border: 0; background: var(--sand-d); }
.wp-account-radius-field > div label { font-size: 15px; font-weight: 700; color: var(--soft); }
.wp-account-radius-field label:has(input:checked) { background: var(--forest); color: var(--sun); box-shadow: 0 6px 14px -8px rgb(19 53 42 / 80%); }
.wp-account-radius-field label:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
.wp-account-radius-field label:has(input[value="30"]) { box-shadow: 0 0 0 2px var(--sand-d), 0 0 0 4px var(--sun); }
.wp-account-radius-field label:has(input[value="30"]:checked) { box-shadow: 0 0 0 2px var(--sand-d), 0 0 0 4px var(--sun), 0 6px 14px -8px rgb(19 53 42 / 80%); }
.wp-account-radius-map { border: 0; border-radius: 22px; background: var(--sky); box-shadow: var(--shadow-card); }
.wp-account-radius-map-canvas { background: var(--sky); }
.wp-account-radius-map-badge { border: 0; background: var(--forest); color: var(--sun); font-size: 12px; }

/* buttons and links inside account pages */
.wp-account-submit { width: 100%; min-height: 56px; font-size: 17px; }
.wp-account-secondary-button { min-height: 44px; border: 2px dashed var(--forest); color: var(--forest); font-size: 15px; font-weight: 700; }
.wp-account-secondary-button:hover { background: rgb(31 77 58 / 6%); }
.wp-account-neutral-link, .wp-account-text-button.wp-account-neutral-link, button.wp-account-neutral-link { color: var(--forest); font-size: 15px; font-weight: 700; text-decoration: none; border-bottom: 2.5px dotted currentColor; }
.wp-account-remove-child, .wp-account-text-button, .wp-account-check-remove { color: var(--clay-text); }
.wp-account-switch a, .wp-account-back { color: var(--forest); font-weight: 700; text-decoration: none; border-bottom: 2.5px dotted currentColor; }

/* alerts */
.wp-account-alert { border-radius: 14px; background: var(--sky); color: var(--deep); font-size: 15px; }
.wp-account-alert-error { border-left: 4px solid var(--clay); background: #fbe9e2; color: #7e261a; }
.wp-account-alert-success { border-left: 4px solid var(--ok); background: var(--ok-soft); color: var(--ok); }
.wp-account-alert-warning { border-left: 4px solid var(--sun); background: var(--sun-soft); color: #5a4305; }

/* overview pieces */
.wp-account-facts { gap: 12px; border: 0; }
.wp-account-facts > div, .wp-account-facts > div:nth-last-child(-n + 2) { padding: 14px 16px; border: 0; border-radius: 16px; background: var(--sand); }
.wp-account-facts dt { font-size: 12px; letter-spacing: 0.1em; color: var(--soft); }
.wp-account-status { padding: 4px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 14px; }
.wp-account-status::before { background: currentColor; }
.wp-account-inset { border-radius: var(--radius-panel); background: var(--sun-soft); }
.wp-account-inset p { color: #5d4a1c; }
.wp-account-pause { background: var(--sky); }
.wp-account-pause p { color: #2f4a5f; }
.wp-account-recipient-card, .wp-account-feedback-card, .wp-feedback-card { border: 0; border-radius: 22px; background: var(--sand); }
.wp-account-recipient-status { background: var(--sun-soft); color: #7a5200; }
.wp-account-recipient-status.is-confirmed { background: var(--ok-soft); color: var(--ok); }
.wp-account-archive-preview { border-top: 2px dotted var(--line); }
.wp-account-edition-list a { border: 0; border-radius: 16px; background: var(--sand); }
.wp-account-edition-list a:hover { background: var(--sun-soft); }
.wp-account-edition-list span { justify-self: start; padding: 4px 10px; border-radius: 8px; background: var(--sun-soft); color: #7a5200; outline: 2px dotted rgb(122 82 0 / 35%); outline-offset: -4px; font-size: 13px; }
.wp-account-edition-list strong { font: 650 18px/1.25 var(--font-display); }
.wp-account-empty-state { border: 2px dashed var(--line); border-radius: 16px; background: var(--card); }
.wp-account-mail-frame-shell { border: 0; border-radius: 22px; background: var(--sand-d); }
.wp-account-feedback-option { border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.wp-account-feedback-option:hover, .wp-feedback-choice:hover, .wp-feedback-choice-active { border-color: var(--forest); background: var(--ok-soft); }
.wp-feedback-choice { border: 2px solid var(--line); border-radius: 14px; color: var(--ink); }
.wp-feedback-answer { border-left-color: var(--forest); background: var(--ok-soft); }
.wp-account-password-feedback li { background: var(--sand); }
.wp-account-password-feedback li[data-met="true"] { background: var(--ok-soft); color: var(--ok); }
.wp-register-offer { border-radius: 22px; background: var(--sun-soft); }
.wp-register-free { background: var(--sun); color: var(--deep); }
.wp-register-mail { background: var(--sky); }

.wp-account-future-cta { display: grid; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 2px dotted var(--line); }
.wp-account-future-cta strong a { color: var(--forest); text-decoration: none; border-bottom: 2.5px dotted currentColor; }
.wp-account-future-cta p { margin: 0; color: var(--soft); font-size: 14px; }
.wp-account-postal-field { position: relative; min-width: 0; }
.wp-account-section-login { padding-block-end: clamp(3rem, 8vw, 7rem); }

/* primary buttons always carry the sun dot from the logo (decorative, no spoken text) */
.wp2-button { padding: 8px 24px 8px 8px; }
.wp2-button::before { content: "→" / ""; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--sun); color: var(--forest); display: grid; place-items: center; font-weight: 700; }
.wp2-button-small { padding: 5px 16px 5px 5px; }
.wp2-button-small::before { width: 28px; height: 28px; font-size: 13px; }
.wp2-button.wp-account-submit { position: relative; padding: 14px 56px; font: 700 17px/1.2 var(--font-text); }
.wp2-button.wp-account-submit::before { position: absolute; left: 8px; top: 50%; margin-top: -18px; }

/* registration: the three sections are waypoints on a dotted route */
.wp-account-register-layout .wp-account-form-section { position: relative; padding-left: 58px; border-top: 0; }
.wp-account-register-layout .wp-account-form-section::before { content: ""; position: absolute; left: 21px; top: 58px; bottom: -14px; border-left: 3px dotted var(--line); }
.wp-account-register-layout .wp-account-form-section:last-of-type::before { display: none; }
.wp-account-register-layout .wp-account-form-section > legend { margin-left: -58px; gap: 14px; }
.wp-account-form-section > legend > span { position: relative; z-index: 0; background: none !important; width: 44px; height: 44px; }
.wp-account-form-section > legend > span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: var(--forest); }
.wp-account-form-section:nth-of-type(2) > legend > span::before { background: var(--clay); }
.wp-account-form-section:nth-of-type(3) > legend > span::before { background: var(--sun); }
.wp-register-offer { padding-right: 110px; }
.wp-register-free { position: absolute; top: -26px; right: -14px; width: 104px; height: 104px; padding: 18px; border-radius: 50%; display: grid; place-items: center; text-align: center; font: italic 700 17px/1.1 var(--font-display); outline: 2.5px dashed rgb(19 53 42 / 50%); outline-offset: -8px; transform: rotate(10deg); box-shadow: 0 14px 24px -14px rgb(0 0 0 / 50%); }
@media (max-width: 47.99rem) {
  .wp-account-register-layout .wp-account-form-section { padding-left: 0; }
  .wp-account-register-layout .wp-account-form-section::before { display: none; }
  .wp-account-register-layout .wp-account-form-section > legend { margin-left: 0; }
  .wp-register-offer { margin-top: 2.6rem; padding-right: 1.15rem; padding-top: 2.4rem; }
  .wp-register-free { width: 88px; height: 88px; font-size: 15px; right: -6px; top: -40px; }
}

/* account overview: the product status reads as a ticket for the next edition */
.wp-account-inset[aria-labelledby="product-access-heading"] { position: relative; margin: 0 0 32px; padding: 26px 28px 24px; border-radius: 22px; background: var(--deep); color: #dbe7e0; overflow: hidden; box-shadow: 0 24px 50px -30px rgb(19 53 42 / 80%); }
.wp-account-inset[aria-labelledby="product-access-heading"]::before, .wp-account-inset[aria-labelledby="product-access-heading"]::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--card); }
.wp-account-inset[aria-labelledby="product-access-heading"]::before { left: -13px; }
.wp-account-inset[aria-labelledby="product-access-heading"]::after { right: -13px; }
.wp-account-inset[aria-labelledby="product-access-heading"] .wp-account-eyebrow { color: var(--sun); }
.wp-account-inset[aria-labelledby="product-access-heading"] h3 { margin-bottom: 8px; color: #fff; font-size: 30px; }
.wp-account-inset[aria-labelledby="product-access-heading"] p { color: #dbe7e0; font-size: 15px; }
.wp-account-inset[aria-labelledby="product-access-heading"] .wp-account-future-cta { border-top: 3px dashed rgb(255 255 255 / 25%); }
.wp-account-inset[aria-labelledby="product-access-heading"] .wp-account-future-cta strong a, .wp-account-inset[aria-labelledby="product-access-heading"] .wp-account-neutral-link { color: var(--sun); }
.wp-account-inset[aria-labelledby="product-access-heading"] .wp-account-future-cta p { color: #b8cdc2; }

/* ---------- text pages: privacy, terms ---------- */
.site-text-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: clamp(2.5rem, 6vw, 5rem); }
.site-text-layout:has(.site-toc) { grid-template-columns: 260px minmax(0, 1fr); }
.site-toc { position: sticky; top: 24px; align-self: start; padding: 22px 22px 18px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); }
.site-toc ol { position: relative; margin: 0; padding: 0; list-style: none; }
.site-toc ol::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; border-left: 3px dotted var(--line); }
.site-toc li { position: relative; padding: 6px 0 6px 24px; font-size: 15px; line-height: 1.35; }
.site-toc li::before { content: ""; position: absolute; left: 0; top: 11px; width: 15px; height: 15px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--forest); }
.site-toc a { color: var(--ink); text-decoration: none; }
.site-toc a:hover { color: var(--forest); text-decoration: underline dotted; text-underline-offset: 4px; }
.site-prose { max-width: 68ch; }
.site-prose h1 { margin-bottom: 18px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.site-prose h2 { margin: 2.2em 0 0.5em; font-size: 28px; scroll-margin-top: 24px; }
.site-prose p, .site-prose li { color: #3b4a43; }
.site-prose a { font-weight: 700; color: var(--forest); text-decoration: none; border-bottom: 2.5px dotted currentColor; }
@media (max-width: 63.99rem) {
  .site-text-layout:has(.site-toc) { grid-template-columns: minmax(0, 1fr); }
  .site-toc { position: static; }
}

/* ---------- example page ---------- */
.wp2-lead { font-size: 19px; color: var(--soft); }
.wp-example-intro { max-width: 820px; padding-block: clamp(2.5rem, 6vw, 4rem) 1.6rem; text-align: center; }
.wp-example-intro h1 { max-width: 14ch; margin: 18px auto 18px; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.wp-example-intro .wp2-lead { max-width: 40rem; margin: 0 auto 22px; }
.wp-example-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--sun-soft); color: #7a5200; font-size: 14px; font-weight: 700; }
.wp-example-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.wp-example-context { margin: 14px 0 0; color: var(--soft); font-size: 14px; }
.wp-example-document { max-width: 660px; margin: 12px auto 0; padding: 12px; border-radius: 30px; background: var(--sand-d); box-shadow: var(--shadow-card); }
.wp-example-frame { display: block; width: 100%; height: 1800px; border: 0; border-radius: 20px; background: #fff; }
.wp-example-next { max-width: 820px; margin-block: 56px 0; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 28px; background: var(--card); box-shadow: var(--shadow-card); text-align: center; }
.wp-example-next h2 { max-width: 17ch; margin: 0 auto 12px; font-size: clamp(2rem, 5vw, 3rem); }
.wp-example-next > p { max-width: 36rem; margin-inline: auto; color: var(--soft); }
.wp-example-next-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.wp-example-next-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--forest); }
.wp-example-next-dots span:nth-child(2) { background: var(--clay); }
.wp-example-next-dots span:nth-child(3) { background: var(--sun); }
.wp-acquisition-offer { margin: 16px 0 0; color: var(--soft); font-size: 15px; }
.wp-acquisition-offer strong { color: var(--forest); }
.wp-price-nowrap { white-space: nowrap; }

/* long Dutch compounds hyphenate instead of breaking mid-word */
.site-page h1, .site-page h2 { overflow-wrap: normal; hyphens: auto; }
.wp-account-intro h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.site-page main a:not([class]) { color: var(--forest); font-weight: 700; text-decoration: none; border-bottom: 2.5px dotted currentColor; }

/* ---------- error pages ---------- */
.site-error { max-width: 760px; padding-block: clamp(3rem, 9vw, 7rem) clamp(2rem, 6vw, 4rem); }
.site-error-route { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.site-error-route::before { content: ""; width: 120px; border-top: 3px dotted var(--forest); margin-right: 12px; }
.site-error h1 { margin-bottom: 16px; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.site-error-lead { max-width: 44ch; color: var(--soft); font-size: 19px; }
.site-error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }

/* the brand name and accent words never hyphenate; small header buttons stay on one line */
.site-page em.site-accent { hyphens: manual; }
.wp-account-private-title { font-size: clamp(2.3rem, 9.5vw, 4.6rem); }
@media (min-width: 24rem) { .site-btn--small, .wp2-button-small { white-space: nowrap; } }
@media (max-width: 29.99rem) {
  .site-header-row { gap: 10px; }
  .site-header .site-btn--small .site-btn-dot, .site-header .wp2-button-small::before { display: none; }
  .site-header .site-btn--small, .site-header .wp2-button-small { min-height: 38px; padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 23.99rem) {
  .site-logo { font-size: 19px; }
  .site-logo-w { width: 28px; height: 20px; }
  .wp2-button-small { font-size: 14px; padding-right: 12px; }
}

/* registration: returning families find "Meld je aan" before the long form */
.wp-account-switch-top { margin: -6px 0 22px; text-align: left; font-size: 16px; }

/* accordions: no browser triangle, a sun "+" instead */
.wp-account-danger-zone summary, .wp-account-recipient-editor summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; }
.wp-account-danger-zone summary::-webkit-details-marker, .wp-account-recipient-editor summary::-webkit-details-marker { display: none; }
.wp-account-recipient-editor summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--forest); font-weight: 800; }
.wp-account-recipient-editor[open] summary::before { content: "–"; }
.wp-account-danger-zone summary { color: var(--clay-text); font-size: 14px; }
.wp-account-danger-zone summary:focus-visible, .wp-account-recipient-editor summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wp-account-danger-zone div { border-radius: 14px; background: #fbe9e2; }
.wp-account-route::before, .wp-account-route::after { border-top: 3px dotted var(--forest); }

@media (max-width: 47.99rem) {
  .wp2-shell { padding-inline: 20px; }
  .wp-account-card { border-radius: 24px; }
}

@media (max-width: 47.99rem) {
  .site-shell { padding-inline: 20px; }
  .site-header-row { min-height: 64px; }
  .site-header-actions { gap: 14px; }
  .site-header-actions > a:not(.site-btn):not(.wp2-button), .site-header-actions > span { display: none; }
  .site-logo { font-size: 22px; }
  .site-stamp { width: 100px; height: 100px; font-size: 11px; }
  .site-stamp b { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo-dot-moving { display: none; animation: none; }
  .site-logo-dot-rest--animated { opacity: 1; }
  .site-btn, .wp2-button { transition: none; }
}