/* MyParcel Dashboard funnel · TheSEO Cloudflare site · 2026-07-28 */

/* Deze pagina's vroegen bij Google twee sneden extra op boven wat v2.css
   meebrengt: Inter 500 (de 450-gewichten hieronder landen daarop) en
   JetBrains Mono 600. Zelf gehost, zodat de typografie gelijk blijft. */
@font-face { font-family: Inter; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  --mp-blue: #4772ff;
  --mp-blue-2: #785dff;
  --mp-cyan: #68e8ff;
  --mp-green: #52e7a2;
  --mp-amber: #ffc66d;
  --mp-red: #ff7a8b;
  --mp-panel: rgba(9, 18, 40, .78);
  --mp-panel-strong: #0a132a;
  --mp-stroke: rgba(147, 164, 218, .16);
  --mp-stroke-strong: rgba(139, 149, 255, .32);
  --mp-max: 1220px;
}

body.mp-page { min-height: 100vh; }
body.mp-page::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(circle at 82% 16%, rgba(69, 95, 238, .14), transparent 30%);
}
.mp-shell { width: min(var(--mp-max), calc(100% - 48px)); margin-inline: auto; }
.mp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px;
  padding: 0 21px; border: 1px solid transparent; border-radius: 6px;
  background: linear-gradient(135deg, var(--mp-blue), var(--mp-blue-2)); color: #fff !important;
  font: 700 .82rem/1 var(--mono); letter-spacing: .03em; text-decoration: none;
  box-shadow: 0 14px 36px rgba(42, 81, 224, .22); transition: transform .25s ease, box-shadow .25s ease;
}
.mp-button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(42, 81, 224, .34); }
.mp-button--ghost { background: rgba(10, 19, 42, .66); border-color: var(--mp-stroke-strong); box-shadow: none; color: #dce4ff !important; }
.mp-button--small { min-height: 40px; padding-inline: 16px; font-size: .72rem; }

/* ============================================================
   PRODUCTHERO · dezelfde anatomie als /jarvis/.
   Boven de hero staat op elke pagina het hoofdregister uit v2.css.
   Daaronder hing tot nu toe een losse productbalk (merkblok, links,
   twee knoppen) en daaronder nog een aparte disclaimerstrook: drie
   balken boven elkaar. Beide zijn weg. Wat ze deden zit nu IN de
   hero, in de volgorde van /jarvis/: vensterbalk, twee annotaties
   op een haarlijn, kop, lead, bewijsregel, knoppen, het paginaeigen
   blok en tot slot de productnavigatie als monotegels. De nuancering
   over het merk MyParcel staat rechts in .ph-top en voluit in de
   voettekst, waar hij ook al stond.
   De maat is de sitemaat: 1180px buitenmaat met een goot van 24px,
   dus een kolom van 1132px. De verticale ruimte boven de hero telt
   op tot wat .v2main plus .prod-hero op /jarvis/ geven: 44 + 72
   boven 700px breed, 44 + 56 daaronder, en 0 + 56 vanaf 640px.
   ============================================================ */
.mp-main > .prod-hero { width: min(1180px, 100%); margin-inline: auto; padding: 116px 24px 26px; }
.prod-hero > .tbar { margin-bottom: 0; }

/* Vensterbalk, blokcursor en tegelnavigatie zijn letterlijk overgenomen
   uit de stijlblokken van de Jarvis-paginas, zodat beide producten
   dezelfde hand houden. */
.tbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); background: rgba(8,14,30,.75); font: 400 11px/1 'JetBrains Mono'; color: var(--mut2); }
.tbar i { width: 9px; height: 9px; border-radius: 999px; background: #31435f; flex: none; }
.tbar i:nth-child(2) { background: #27364e; }
.tbar i:nth-child(3) { background: #233047; }
.tbar .tpath { margin-left: 6px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .tok { margin-left: auto; color: #86efac; flex: none; }
.tbar .twach { margin-left: auto; color: #fbbf24; flex: none; }

.h1cur { display: inline-block; width: .46em; height: .82em; margin-left: .14em; background: var(--cyan); transform: translateY(.06em); animation: h1blink 1.1s steps(1) infinite; }
@keyframes h1blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.ph-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--hair); padding-bottom: 14px; margin: 20px 0 34px; }
.ph-kop .lm { padding-bottom: .14em; margin-bottom: -.14em; }
.ph-kop .h1cur { width: .2em; height: .56em; margin-left: .12em; transform: translateY(-.02em); }
.ph-lede { max-width: 640px; margin: 30px 0 0; color: var(--mut); font-size: 1.06rem; }
.ph-proof { margin-top: 30px; max-width: 470px; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }
.ph-cta-sub { color: var(--mut2); font: 400 12px/1.4 'JetBrains Mono'; }
.ph-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
  background: var(--btn); color: #fff; font: 700 14px/1 'Inter'; letter-spacing: -.01em;
  text-decoration: none; border: none;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.ph-btn:hover { background: #1e5ef7; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,82,240,.3); }
.ph-btn .arr { font-size: 1.1em; transition: transform .3s var(--ease); }
.ph-btn:hover .arr { transform: translateX(3px); }
.ph-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.ph-btn.ghost:hover { border-color: var(--per2); background: rgba(22,82,240,.06); box-shadow: none; }

/* Het paginaeigen blok op plek 7, het equivalent van .jv-status op
   /jarvis/. De amberversie is voor een voorbehoud, de neutrale versie
   voor een mededeling die geen waarschuwing is. */
.mp-hstat { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 26px 0 0; padding: 14px 16px; border: 1px solid rgba(251,191,36,.28); background: rgba(251,191,36,.05); font: 400 11.5px/1.7 'JetBrains Mono'; color: var(--mut2); }
.mp-hstat b { color: #fbbf24; font-weight: 700; }
.mp-hstat a { color: var(--per2); }
.mp-hstat--neu { border-color: var(--line); background: rgba(8,14,30,.6); }
.mp-hstat--neu b { color: var(--per2); }
.prod-hero .mp-hstat { margin-top: 26px; }

.prod-hero .jnav { margin-top: 26px; }
.jnav { display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 0; }
.jnav a { flex: 1 1 auto; text-align: center; padding: 11px 14px; border: 1px solid var(--line); background: rgba(8,14,30,.6); font: 400 11px/1 'JetBrains Mono'; letter-spacing: .08em; text-transform: uppercase; color: #9aa6c6; text-decoration: none; transition: color .3s, border-color .3s, background .3s; }
.jnav a:hover { color: #fff; border-color: rgba(139,149,255,.4); background: rgba(22,82,240,.07); }
.jnav a[aria-current] { color: var(--per2); border-color: rgba(139,149,255,.45); }

@media (max-width: 700px) {
  .mp-main > .prod-hero { padding-top: 100px; padding-bottom: 18px; }
  .ph-top { flex-direction: column; align-items: flex-start; gap: 6px; margin: 20px 0 30px; }
  .ph-lede { margin-top: 24px; }
}
@media (max-width: 640px) { .mp-main > .prod-hero { padding-top: 56px; padding-inline: 18px; } }
@media (max-width: 620px) {
  .ph-cta { flex-direction: column; align-items: stretch; }
  .ph-btn { justify-content: center; }
  .ph-cta-sub { text-align: center; }
}

.mp-main { overflow: hidden; }
/* De schematische dashboardweergave stond naast de kop in de oude
   tweekoloms hero. De hero is nu eenkoloms, dus de weergave staat er
   direct onder op dezelfde sitemaat, en de lichte kanteling vervalt
   omdat er geen tekstkolom meer naast staat om vanaf te wijken. */
.mp-stagerow { width: min(1180px, 100%); margin-inline: auto; padding: 24px 24px 40px; }
.mp-stagerow .mp-stage { width: min(960px, 100%); margin-inline: auto; }
.mp-stagerow .mp-app { transform: none; }
@media (max-width: 640px) { .mp-stagerow { padding: 18px 18px 30px; } }
.mp-proofline { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--hair); }
/* De bewijsregel van deze paginas is de bestaande vinkjesrij; hij staat
   op plek 5 en houdt de maat van de hero in plaats van de smalle
   bewijsregel van /jarvis/. */
.ph-proof.mp-proofline { max-width: none; margin-top: 30px; }
@media (max-width: 700px) { .ph-proof, .ph-proof.mp-proofline { margin-top: 28px; } }
.mp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.mp-proofline span { font: 500 10px/1.5 var(--mono); color: #7785a8; text-transform: uppercase; letter-spacing: .06em; }
.mp-proofline span::before { content: "✓"; color: var(--mp-green); margin-right: 8px; }

.mp-stage { position: relative; perspective: 1500px; }
.mp-stage::before { content: ""; position: absolute; inset: 8% -18% -16%; background: radial-gradient(circle, rgba(79, 95, 255, .22), transparent 66%); filter: blur(20px); }
.mp-app {
  position: relative; overflow: hidden; border: 1px solid rgba(159, 172, 228, .22); border-radius: 11px;
  background: #091126; box-shadow: 0 50px 100px rgba(0, 0, 0, .48), 0 0 0 8px rgba(120, 137, 199, .035);
  transform: rotateY(-4deg) rotateX(1deg); transform-origin: left center;
}
.mp-app-top { min-height: 53px; display: grid; grid-template-columns: 140px 1fr auto; align-items: center; border-bottom: 1px solid #1b2846; background: #0d1730; }
.mp-app-brand { padding-left: 18px; color: #eef3ff; font: 800 13px/1 var(--mono); }
.mp-app-brand i { color: var(--mp-blue); font-style: normal; }
.mp-app-search { width: min(280px, 70%); height: 27px; justify-self: center; display: flex; align-items: center; padding: 0 10px; border: 1px solid #223252; border-radius: 4px; color: #66779c; font: 500 8px/1 var(--mono); }
.mp-app-user { width: 27px; height: 27px; display: grid; place-items: center; margin-right: 14px; border-radius: 50%; background: linear-gradient(135deg, #436bff, #735bfa); color: #fff; font: 700 9px/1 var(--mono); }
.mp-app-body { display: grid; grid-template-columns: 140px 1fr; min-height: 440px; }
.mp-app-side { padding: 17px 11px; border-right: 1px solid #1b2846; background: #0b142a; }
.mp-side-label { margin: 0 5px 12px; color: #536182; font: 600 7px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.mp-side-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 4px; color: #7483a4; font: 600 8px/1 var(--mono); }
.mp-side-item::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 2px; }
.mp-side-item.is-on { background: rgba(74, 103, 255, .15); color: #b7c2ff; }
.mp-app-content { min-width: 0; padding: 22px; }
.mp-app-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.mp-app-title h2 { margin: 0; color: #f0f4ff; font-size: 15px; letter-spacing: -.025em; }
.mp-app-title span { color: #647397; font: 500 7px/1 var(--mono); }
.mp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mp-metric { padding: 13px; border: 1px solid #1e2c49; border-radius: 5px; background: #0d1830; }
.mp-metric small { display: block; color: #7583a4; font: 500 7px/1.2 var(--mono); }
.mp-metric b { display: block; margin-top: 8px; color: #e9efff; font: 750 21px/1 Inter, sans-serif; }
.mp-metric b i { margin-left: 5px; font: 500 7px/1 var(--mono); color: var(--mp-green); font-style: normal; }
.mp-metric--warn b, .mp-metric--warn b i { color: var(--mp-amber); }
.mp-metric--alert b, .mp-metric--alert b i { color: var(--mp-red); }
.mp-chart { height: 118px; margin-top: 9px; padding: 12px; border: 1px solid #1e2c49; border-radius: 5px; background: #0d1830; }
.mp-chart-head { display: flex; justify-content: space-between; color: #7583a4; font: 500 7px/1 var(--mono); }
.mp-chart svg { width: 100%; height: 77px; overflow: visible; }
.mp-chart-grid { stroke: rgba(147,164,218,.11); }
.mp-chart-line { fill: none; stroke: #657dff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(101,125,255,.5)); }
.mp-table { margin-top: 9px; border: 1px solid #1e2c49; border-radius: 5px; background: #0d1830; overflow: hidden; }
.mp-table-row { display: grid; grid-template-columns: 1.2fr 1fr .8fr; min-height: 33px; align-items: center; padding: 0 12px; border-bottom: 1px solid #182642; color: #9aa7c4; font: 500 7.5px/1 var(--mono); }
.mp-table-row:last-child { border: 0; }
.mp-table-row--head { min-height: 28px; color: #596887; text-transform: uppercase; letter-spacing: .05em; }
.mp-badge { justify-self: start; padding: 4px 6px; border: 1px solid rgba(82,231,162,.28); border-radius: 30px; color: var(--mp-green); background: rgba(82,231,162,.07); }
.mp-badge--warn { border-color: rgba(255,198,109,.28); color: var(--mp-amber); background: rgba(255,198,109,.07); }
.mp-float { position: absolute; right: -18px; bottom: 38px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,198,109,.24); border-radius: 6px; background: rgba(12,21,43,.92); box-shadow: 0 18px 40px rgba(0,0,0,.35); color: #bdc7dd; font: 600 8px/1.4 var(--mono); }
.mp-float::before { content: "!"; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,198,109,.12); color: var(--mp-amber); }

.mp-section { padding: 112px 0; }
.mp-section + .mp-section { border-top: 1px solid var(--hair); }
.mp-section-head { display: grid; grid-template-columns: 1fr minmax(280px, 430px); gap: 50px; align-items: end; margin-bottom: 54px; }
.mp-kicker { display: block; margin-bottom: 14px; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; color: #7c89ad; text-transform: uppercase; }
.mp-section h2 { color: #f0f4ff; }
.mp-section h2 { margin: 0; max-width: 720px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.mp-section-head p, .mp-copy { margin: 0; color: #929fbc; line-height: 1.75; }
.mp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mp-card { position: relative; min-height: 250px; padding: 27px; border: 1px solid var(--mp-stroke); border-radius: 8px; background: linear-gradient(145deg, rgba(12, 23, 48, .8), rgba(7, 14, 31, .72)); overflow: hidden; }
.mp-card::after { content: ""; position: absolute; inset: auto -30% -55% 30%; height: 180px; background: radial-gradient(circle, rgba(74, 92, 240, .15), transparent 70%); }
.mp-card-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 52px; border: 1px solid var(--mp-stroke-strong); border-radius: 6px; color: #9eabff; background: rgba(61,80,185,.08); font: 600 13px/1 var(--mono); }
.mp-card h3 { position: relative; z-index: 1; margin: 0 0 10px; font-size: 1.12rem; letter-spacing: -.02em; }
.mp-card p { position: relative; z-index: 1; margin: 0; color: #8794b2; font-size: .93rem; line-height: 1.65; }
.mp-card .mp-status { margin-top: 22px; }

.mp-steps { counter-reset: mpstep; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--mp-stroke); border-radius: 8px; overflow: hidden; }
.mp-step { counter-increment: mpstep; min-height: 255px; padding: 26px; border-right: 1px solid var(--mp-stroke); background: rgba(9,18,39,.64); }
.mp-step:last-child { border-right: 0; }
.mp-step::before { content: "0" counter(mpstep); display: block; margin-bottom: 70px; color: #627096; font: 600 10px/1 var(--mono); }
.mp-step h3 { margin: 0 0 10px; font-size: 1rem; }
.mp-step p { margin: 0; color: #8491af; font-size: .88rem; line-height: 1.65; }

.mp-status { display: inline-flex; align-items: center; gap: 7px; color: #8b98b7; font: 600 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.mp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #66728e; box-shadow: 0 0 0 4px rgba(102,114,142,.08); }
.mp-status--live { color: #91dabb; }
.mp-status--live::before { background: var(--mp-green); box-shadow: 0 0 0 4px rgba(82,231,162,.09); }
.mp-status--work { color: #d3b780; }
.mp-status--work::before { background: var(--mp-amber); box-shadow: 0 0 0 4px rgba(255,198,109,.09); }
.mp-status--gate { color: #d499a2; }
.mp-status--gate::before { background: var(--mp-red); box-shadow: 0 0 0 4px rgba(255,122,139,.09); }

.mp-price-mini { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--mp-stroke); border-radius: 8px; overflow: hidden; }
.mp-price-cell { position: relative; min-height: 210px; padding: 25px; border-right: 1px solid var(--mp-stroke); background: rgba(9,18,39,.66); }
.mp-price-cell:last-child { border-right: 0; }
.mp-price-cell.is-featured { background: linear-gradient(155deg, rgba(45,61,133,.42), rgba(9,18,39,.72)); }
.mp-price-cell .mp-popular { position: absolute; top: 0; right: 0; padding: 6px 8px; background: #4d62db; color: #fff; font: 600 7px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mp-price-name { color: #9aa7c6; font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.mp-price { display: flex; align-items: baseline; gap: 4px; margin-top: 25px; color: #f2f5ff; }
.mp-price b { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.05em; }
.mp-price span { color: #7482a4; font: 500 9px/1 var(--mono); }
.mp-price-cell p { margin: 20px 0 0; color: #7f8dab; font-size: .84rem; line-height: 1.6; }
.mp-price-cell a { position: absolute; left: 25px; bottom: 22px; color: #abb7ff; font: 600 9px/1 var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }

.mp-cta-panel { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 50px; border: 1px solid var(--mp-stroke-strong); border-radius: 10px; background: linear-gradient(135deg, rgba(21,38,81,.92), rgba(12,20,44,.83)); box-shadow: 0 40px 100px rgba(0,0,0,.25); }
.mp-cta-panel h2 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.6rem); }
.mp-cta-panel p { max-width: 650px; margin: 0; color: #9eabc5; }

.mp-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: 60px; }
.mp-prose h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.mp-prose h3 { margin: 42px 0 12px; font-size: 1.2rem; }
.mp-prose p, .mp-prose li { color: #929fbc; line-height: 1.78; }
.mp-prose a { color: #aeb9ff; }
.mp-aside { align-self: start; position: sticky; top: 112px; padding: 24px; border: 1px solid var(--mp-stroke); border-radius: 8px; background: rgba(9,18,39,.76); }
.mp-aside h3 { margin: 0 0 16px; font-size: .95rem; }
.mp-aside a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); color: #99a6c3; font: 500 10px/1.4 var(--mono); text-decoration: none; }
.mp-aside a::after { content: "→"; color: #707dff; }

.mp-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--mp-stroke); border-radius: 10px; overflow: hidden; }
.mp-plan { position: relative; min-height: 490px; display: flex; flex-direction: column; padding: 30px 25px; border-right: 1px solid var(--mp-stroke); background: rgba(9,18,39,.74); }
.mp-plan:last-child { border-right: 0; }
.mp-plan.is-featured { background: linear-gradient(160deg, rgba(44,59,132,.5), rgba(10,20,43,.86)); }
.mp-plan .mp-popular { position: absolute; top: 0; left: 25px; padding: 7px 10px; background: #5368e4; color: #fff; font: 700 8px/1 var(--mono); text-transform: uppercase; }
.mp-plan h2 { margin: 25px 0 0; font: 650 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a6b0cc; }
.mp-plan .mp-price { margin: 27px 0 22px; }
.mp-plan > p { min-height: 68px; margin: 0; color: #8491ae; font-size: .87rem; line-height: 1.6; }
.mp-plan ul { padding: 21px 0 0; margin: 22px 0 28px; border-top: 1px solid var(--hair); list-style: none; }
.mp-plan li { position: relative; padding: 7px 0 7px 19px; color: #9ca8c3; font-size: .82rem; line-height: 1.45; }
.mp-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--mp-green); font: 600 10px/1.5 var(--mono); }
.mp-plan .mp-button { width: 100%; margin-top: auto; }
.mp-fineprint { margin: 22px 0 0; color: #7885a5; font: 500 10px/1.65 var(--mono); }

.mp-compare { width: 100%; border-collapse: collapse; border: 1px solid var(--mp-stroke); background: rgba(9,18,39,.58); }
.mp-compare th, .mp-compare td { padding: 17px 18px; border-bottom: 1px solid var(--mp-stroke); text-align: left; font-size: .86rem; }
.mp-compare th { color: #7684a4; font: 600 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mp-compare td { color: #9ba7c3; }
.mp-compare td:first-child { color: #e0e6f7; font-weight: 650; }

.mp-safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mp-safety-card { padding: 28px; border: 1px solid var(--mp-stroke); border-radius: 8px; background: rgba(9,18,39,.66); }
.mp-safety-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mp-safety-card h2 { margin: 0; font-size: 1.2rem; }
.mp-safety-card p { margin: 18px 0 0; color: #8f9cba; font-size: .9rem; line-height: 1.7; }
.mp-safety-card ul { margin: 18px 0 0; padding-left: 18px; color: #8794b1; font-size: .86rem; }
.mp-callout { padding: 24px; border-left: 2px solid var(--mp-amber); background: rgba(255,198,109,.045); color: #a8b2c9; }
.mp-callout strong { color: #eed09b; }

.mp-docs { border-top: 1px solid var(--mp-stroke); }
.mp-doc-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 150px 130px; gap: 20px; align-items: center; min-height: 88px; padding: 15px 4px; border-bottom: 1px solid var(--mp-stroke); text-decoration: none; }
.mp-doc-row:hover { background: rgba(95,112,255,.04); }
.mp-doc-id { color: #7180a5; font: 600 9px/1 var(--mono); }
.mp-doc-title { color: #e5eaf8; font-weight: 680; }
.mp-doc-title small { display: block; margin-top: 5px; color: #7e8ba8; font-weight: 450; }
.mp-doc-format { color: #7583a3; font: 500 9px/1 var(--mono); text-transform: uppercase; }

.mp-start-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; }
.mp-start-card { padding: 32px; border: 1px solid var(--mp-stroke); border-radius: 9px; background: rgba(9,18,39,.7); }
.mp-start-card h2 { margin: 0 0 10px; font-size: 1.35rem; }
.mp-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 25px; }
.mp-choice button { min-height: 88px; padding: 15px; border: 1px solid var(--mp-stroke); border-radius: 6px; background: rgba(12,23,47,.8); color: #9eaac5; text-align: left; cursor: pointer; }
.mp-choice button b { display: block; color: #e4eafa; font-size: .95rem; }
.mp-choice button span { display: block; margin-top: 7px; font: 500 9px/1 var(--mono); }
.mp-choice button[aria-pressed="true"] { border-color: #6577f0; background: rgba(76,93,199,.2); }
.mp-order { position: sticky; top: 112px; align-self: start; }
.mp-order-line { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: #8c99b7; font-size: .88rem; }
.mp-order-line strong { color: #f0f4ff; }
.mp-order-total { font-size: 1.05rem; }
.mp-order .mp-button { width: 100%; margin-top: 22px; }
.mp-gate-note { margin: 16px 0 0; color: #d5b984; font: 500 9px/1.6 var(--mono); }
.mp-checklist { display: grid; gap: 8px; margin-top: 26px; }
.mp-check { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; min-height: 49px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 5px; color: #95a2bd; font-size: .86rem; }
.mp-check::before { content: "✓"; color: var(--mp-green); }

.mp-faq { display: grid; gap: 8px; }
.mp-faq details { border: 1px solid var(--mp-stroke); border-radius: 7px; background: rgba(9,18,39,.62); }
.mp-faq summary { position: relative; padding: 20px 54px 20px 22px; color: #dfe5f5; font-weight: 650; cursor: pointer; list-style: none; }
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after { content: "+"; position: absolute; right: 22px; color: #8996f2; font: 500 19px/1 var(--mono); }
.mp-faq details[open] summary::after { content: "−"; }
.mp-faq details p { margin: 0; padding: 0 22px 22px; color: #8d9ab7; }

/* De voettekst is de sitevoettekst .v2foot uit v2.css; deze pagina's hadden
   daarvoor een eigen viervoudige voettekst en die is vervallen. */

.mp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mp-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .mp-stagerow .mp-stage { width: min(780px, 100%); }
  .mp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .mp-plan:nth-child(2) { border-right: 0; }
  .mp-plan:nth-child(-n+2) { border-bottom: 1px solid var(--mp-stroke); }
  .mp-price-mini { grid-template-columns: repeat(2, 1fr); }
  .mp-price-cell:nth-child(2) { border-right: 0; }
  .mp-price-cell:nth-child(-n+2) { border-bottom: 1px solid var(--mp-stroke); }
}

@media (max-width: 820px) {
  .mp-shell { width: min(100% - 36px, var(--mp-max)); }
  .mp-section-head, .mp-detail-grid, .mp-start-layout { grid-template-columns: 1fr; }
  .mp-grid-3 { grid-template-columns: 1fr; }
  .mp-card { min-height: 215px; }
  .mp-card-icon { margin-bottom: 34px; }
  .mp-steps { grid-template-columns: repeat(2, 1fr); }
  .mp-step:nth-child(2) { border-right: 0; }
  .mp-step:nth-child(-n+2) { border-bottom: 1px solid var(--mp-stroke); }
  .mp-safety-grid { grid-template-columns: 1fr; }
  .mp-cta-panel { grid-template-columns: 1fr; padding: 36px; }
  .mp-aside, .mp-order { position: static; }
}

@media (max-width: 620px) {
  .mp-app-top { grid-template-columns: 100px 1fr auto; }
  .mp-app-search { width: 78%; }
  .mp-app-body { grid-template-columns: 1fr; min-height: auto; }
  .mp-app-side { display: none; }
  .mp-app-content { padding: 15px; }
  .mp-metrics { gap: 5px; }
  .mp-metric { padding: 10px 8px; }
  .mp-metric b { font-size: 17px; }
  .mp-float { display: none; }
  .mp-section { padding: 80px 0; }
  .mp-section-head { gap: 22px; margin-bottom: 36px; }
  .mp-steps, .mp-pricing-grid, .mp-price-mini { grid-template-columns: 1fr; }
  .mp-step, .mp-price-cell, .mp-plan { border-right: 0; border-bottom: 1px solid var(--mp-stroke); }
  .mp-step:last-child, .mp-price-cell:last-child, .mp-plan:last-child { border-bottom: 0; }
  .mp-price-cell:nth-child(-n+2) { border-bottom: 1px solid var(--mp-stroke); }
  .mp-compare { display: block; overflow-x: auto; white-space: nowrap; }
  .mp-doc-row { grid-template-columns: 56px 1fr auto; min-height: 96px; }
  .mp-doc-format { display: none; }
  .mp-choice { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .mp-shell { width: min(100% - 24px, var(--mp-max)); }
}

/* RAAKMAAT. De doorlink onderaan een prijskaart ("Starter in detail") mat op
   375 negen px hoog. Negen. Dat is de kleinste bediening van de hele MyParcel
   familie en met een duim raak je hem niet.

   Hij staat absoluut geplaatst met bottom: 22px, dus voering onder duwt de
   letters omhoog in plaats van de doos omlaag. Daarom gaat bottom in dezelfde
   beweging van 22 naar 4: 22 min 18 is 4, en de tekst blijft daardoor exact
   staan waar hij stond. Nagemeten: doos 45 px, letters op dezelfde plek.
   Het lettertype blijft 9 px mono, de kleur blijft, de pijl blijft. */
@media (pointer: coarse), (max-width: 560px) {
  .mp-price-cell a { padding-block: 18px; bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .mp-reveal { opacity: 1; transform: none; }
}


/* Inlogknop in de sitekop, links van de indexknop. Alleen op de MyParcel
   paginas, want alleen dit product heeft een applicatie waar een bestaande
   klant op inlogt. Vorm volgt de indexknop: mono, klein kapitaal, rustig.
   Het bolletje zegt dat er iets draait; het is geen statusmelding. */
body.mp-page .v2hdr-in .mp-hdr-login {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #9aa6c6; text-decoration: none;
  transition: color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
body.mp-page .v2hdr-in .mp-hdr-login:hover,
body.mp-page .v2hdr-in .mp-hdr-login:focus-visible {
  color: #fff; border-color: rgba(139,149,255,.45); background: rgba(22,82,240,.07);
}
body.mp-page .v2hdr-in .v2toggle { margin-left: 0; }
.mp-login-slot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #3ddc97; box-shadow: 0 0 0 3px rgba(61,220,151,.14); font-size: 0;
  flex-shrink: 0; }
@media (max-width: 560px) {
  body.mp-page .v2hdr-in .mp-hdr-login { padding: 7px 11px; letter-spacing: .1em; }
  body.mp-page .v2hdr-in { gap: 12px; }

  /* DE KOPBALK LIEP VAN HET SCHERM AF, gezien 25-08 op 375 px, op alle zes de
     MyParcel-paginas. De kop is een rij zonder omloop. Overal staan er drie
     dingen in: logo 101, indexknop 81, taalwisselaar 46. Hier komt de inlogknop
     van 103 erbij, en dan is de rij 36 marge plus 331 aan onderdelen plus 36
     tussenruimte plus 36 marge, samen 439 px op een scherm van 375. Gevolg: de
     pagina schoof 28 px opzij, de NL-knop stond half buiten beeld en het logo
     werd zo geperst dat zijn ondertitel op drie regels brak.
     Met omloop zakt de knoppenrij netjes onder het logo en krijgt het logo zijn
     ondertitel weer op een regel. Alleen op body.mp-page, want alleen deze
     paginas hebben die vierde knop: /voorwaarden/linkloop/ komt op 375 precies
     op 375 uit en zou van een sitebrede omloop juist hoger worden. */
  body.mp-page .v2hdr-in { flex-wrap: wrap; row-gap: 8px; }
}