.email-integration-page {
  --mail-ink: #2d4352;
  --mail-deep: #20323d;
  --mail-blue: #557f99;
  --mail-sky: #b8d1da;
  --mail-rose: #a64d72;
  --mail-rose-deep: #77364f;
  --mail-gold: #c99a4e;
  --mail-green: #3b5141;
  --mail-alert: #b64d55;
  --mail-ivory: #fbf7ef;
  --mail-paper: #fffdf8;
  background:
    radial-gradient(circle at 91% 3%, rgba(85,127,153,.15), transparent 34rem),
    radial-gradient(circle at 7% 6%, rgba(166,77,114,.11), transparent 30rem),
    linear-gradient(180deg, #fcfaf6, #f7f0e9 54%, #fbf8f3);
}

.email-integration-page .ss-breadcrumb strong,
.email-integration-page .eyebrow { color: var(--mail-rose-deep); }
.email-integration-page .ss-hero h1 em,
.email-integration-page .ss-section-heading h2 em,
.email-integration-page .ss-closing h2 em { color: var(--mail-rose); }
.email-integration-page .ss-button-primary { border-color: #375d73; background: linear-gradient(135deg,#638ba2,#365c72); box-shadow: 0 13px 29px rgba(45,76,93,.24); }
.email-integration-page .ss-assurances b { color: var(--mail-blue); }
.email-integration-page .ss-hero::before { border-color: rgba(85,127,153,.16); }
.email-integration-page .ss-hero-lead { max-width: 730px; }
.email-integration-page .eyebrow { font-size: 10.5px; }
.mail-wide-heading { max-width: 1010px; }
.mail-wide-heading > p { max-width: 810px; }

/* Hero — de postkamer pulse */
.mail-hero { min-height: 820px; grid-template-columns: minmax(0,1.08fr) minmax(425px,.92fr); gap: clamp(44px,6vw,88px); }
.mail-partner-lockup { --partner-accent: var(--mail-blue); }
.mail-partner-logo { display: flex; width: 142px; justify-content: center; grid-template-columns: none; gap: 9px; color: var(--mail-ink); }
.mail-partner-logo svg { width: 27px; height: 21px; fill: none; stroke: var(--mail-blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mail-partner-logo b { font-size: 10px; letter-spacing: 1.6px; }
.mail-pulse { position: relative; overflow: hidden; padding: 27px; border: 1px solid rgba(184,209,218,.28); border-radius: 31px; background: radial-gradient(circle at 100% 0,rgba(166,77,114,.3),transparent 39%),radial-gradient(circle at 0 100%,rgba(201,154,78,.15),transparent 36%),linear-gradient(145deg,#304d5d,#20323d 66%,#493741 125%); color: #fff; box-shadow: 0 38px 90px rgba(32,50,61,.31); }
.mail-pulse::before { position: absolute; right: -125px; bottom: -155px; width: 330px; height: 330px; border: 1px solid rgba(184,209,218,.11); border-radius: 50%; box-shadow: 0 0 0 48px rgba(184,209,218,.025),0 0 0 96px rgba(184,209,218,.015); content: ""; }
.mail-pulse > * { position: relative; z-index: 1; }
.mail-pulse-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.13); color: #d0dce1; font-size: 10.5px; font-weight: 850; letter-spacing: .7px; }
.mail-pulse-top span { display: flex; align-items: center; gap: 9px; text-transform: uppercase; }
.mail-pulse-top i { width: 8px; height: 8px; border-radius: 50%; background: #ddad61; box-shadow: 0 0 0 5px rgba(221,173,97,.13); }
.mail-pulse-top b { color: #f0c5d3; font-size: 9.5px; }
.mail-pulse-brand { display: grid; grid-template-columns: 55px minmax(0,1fr) auto; align-items: center; gap: 15px; margin: 23px 0 19px; }
.mail-pulse-brand > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; background: linear-gradient(145deg,#6f98ae,#466e85); box-shadow: 0 13px 28px rgba(15,25,31,.28); }
.mail-pulse-brand svg { width: 28px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mail-pulse-brand div { display: grid; gap: 4px; }
.mail-pulse-brand small { color: #d2e3e9; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.mail-pulse-brand strong { font: 500 28px/1.1 Georgia,serif; }
.mail-pulse-brand em { padding: 8px 10px; border: 1px solid rgba(238,207,153,.24); border-radius: 999px; background: rgba(201,154,78,.12); color: #efd094; font-size: 9.5px; font-style: normal; font-weight: 900; white-space: nowrap; }
.mail-pulse-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.mail-pulse-kpis article { display: grid; min-height: 107px; align-content: start; gap: 7px; padding: 13px 11px; border: 1px solid rgba(184,209,218,.15); border-radius: 15px; background: rgba(255,255,255,.055); }
.mail-pulse-kpis span { color: #c8d8dd; font-size: 10px; line-height: 1.3; }
.mail-pulse-kpis strong { color: #fffdf8; font: 500 28px/1 Georgia,serif; }
.mail-pulse-kpis small { color: #b8c9ce; font-size: 9px; line-height: 1.3; }
.mail-pulse-kpis .is-review { border-color: rgba(235,197,209,.27); background: rgba(166,77,114,.14); }
.mail-pulse-kpis .is-blocked { border-color: rgba(232,142,147,.25); background: rgba(182,77,85,.15); }
.mail-pulse-feed { display: grid; margin: 19px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.13); list-style: none; }
.mail-pulse-feed li { display: grid; min-height: 57px; grid-template-columns: 38px 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px dashed rgba(184,209,218,.14); }
.mail-pulse-feed time { color: #d9b56f; font-size: 9.5px; }
.mail-feed-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(85,127,153,.32); color: #d9e9ed; font-size: 8px; font-weight: 900; }
.mail-feed-icon.is-invoice { background: rgba(166,77,114,.3); color: #f3c9d6; }
.mail-feed-icon.is-price { background: rgba(201,154,78,.24); color: #efd39e; }
.mail-feed-icon.is-report { background: rgba(105,138,94,.28); color: #d9e8d3; }
.mail-pulse-feed div { display: grid; gap: 3px; min-width: 0; }
.mail-pulse-feed strong { overflow: hidden; color: #f5f8f5; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.mail-pulse-feed small { color: #b8c8cc; font-size: 9.5px; }
.mail-pulse-feed em { color: #e8c77e; font-size: 9px; font-style: normal; font-weight: 900; }
.mail-pulse-feed .is-danger .mail-feed-icon { background: rgba(182,77,85,.32); color: #ffdce0; }
.mail-pulse-feed .is-danger em { color: #f3b8be; }
.mail-pulse-note { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; color: #cad5d8; font-size: 10px; line-height: 1.45; }
.mail-pulse-note span { color: #efc986; }

/* Rol en route */
.mail-role-section { padding: 108px 0 127px; border-top: 1px solid var(--ss-line); }
.mail-role-map { display: grid; grid-template-columns: minmax(220px,.9fr) 30px minmax(250px,1.05fr) 30px minmax(290px,1.15fr); align-items: center; gap: 12px; margin-top: 57px; }
.mail-role-inbox,.mail-role-more { position: relative; overflow: hidden; display: flex; min-height: 206px; flex-direction: column; justify-content: center; gap: 18px; padding: 27px; border: 1px solid rgba(85,127,153,.25); border-radius: 26px; box-shadow: 0 20px 50px rgba(48,58,58,.08); }
.mail-role-inbox::after,.mail-role-more::after { position: absolute; right: -85px; bottom: -95px; width: 200px; height: 200px; border: 1px solid currentColor; border-radius: 50%; opacity: .1; content: ""; }
.mail-role-inbox { background: linear-gradient(145deg,#f3f8f9,#dfedf1); color: #335367; }
.mail-role-more { border-color: rgba(233,204,151,.23); background: radial-gradient(circle at 100% 0,rgba(166,77,114,.27),transparent 39%),linear-gradient(145deg,#324d5b,#21343e); color: #fff; box-shadow: 0 24px 60px rgba(32,50,61,.22); }
.mail-role-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: linear-gradient(145deg,#6b96ad,#416b82); color: #fff; font: 700 19px/1 Georgia,serif; }
.mail-role-more .mail-role-mark { background: linear-gradient(145deg,#d4a258,#af7935); color: #253944; }
.mail-role-inbox div,.mail-role-more div { position: relative; z-index: 1; display: grid; gap: 6px; }
.mail-role-inbox small,.mail-role-more small { color: #52768a; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.mail-role-more small { color: #efc4d2; }
.mail-role-inbox strong,.mail-role-more strong { font: 500 27px/1.1 Georgia,serif; }
.mail-role-inbox p,.mail-role-more p { margin: 0; font-size: 11.5px; line-height: 1.55; }
.mail-role-more p { color: #cad7da; }
.mail-route-arrow { color: var(--mail-gold); font: 500 24px/1 Georgia,serif; text-align: center; }
.mail-destinations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.mail-destinations article { display: grid; min-height: 98px; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; padding: 14px; border: 1px solid rgba(164,126,67,.24); border-radius: 18px; background: rgba(255,253,249,.78); box-shadow: 0 14px 36px rgba(64,48,31,.055); }
.mail-destinations b { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 13px; background: #f2e3d9; color: #994b33; font-size: 10px; }
.mail-destinations article:nth-child(2) b { background: #e7eddc; color: #627448; }
.mail-destinations article:nth-child(3) b { background: #f5e4ed; color: #944363; }
.mail-destinations article:nth-child(4) b { background: #e2eef2; color: #486e82; }
.mail-destinations span { display: grid; gap: 4px; }
.mail-destinations strong { color: #3b493f; font-size: 12px; }
.mail-destinations small { color: #756c63; font-size: 9.5px; line-height: 1.35; }
.mail-role-summary { display: flex; align-items: center; gap: 15px; margin: 34px 0 0; padding: 19px 23px; border: 1px solid rgba(85,127,153,.24); border-left: 4px solid var(--mail-blue); border-radius: 0 17px 17px 0; background: rgba(255,253,249,.72); color: #746b62; font-size: 12px; }
.mail-role-summary span { color: #395b6f; font: 500 18px/1.3 Georgia,serif; }
.mail-category-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.mail-category-rail article { display: grid; min-height: 91px; grid-template-columns: 37px minmax(0,1fr); align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(85,127,153,.18); border-radius: 16px; background: rgba(255,253,249,.55); }
.mail-category-rail article > b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #e2edf1; color: #4b7185; font-size: 7.5px; letter-spacing: .4px; }
.mail-category-rail article:nth-child(2) > b { background: #e5ebdc; color: #5e724d; }
.mail-category-rail article:nth-child(3) > b { background: #f1dfe6; color: #91445f; }
.mail-category-rail article:nth-child(4) > b { background: #f1e6d2; color: #946e34; }
.mail-category-rail div { display: grid; gap: 4px; }
.mail-category-rail strong { color: #3e5158; font-size: 10.5px; }
.mail-category-rail span { color: #7a726a; font-size: 9px; line-height: 1.4; }

/* Interactieve postkamer */
.mail-sort-section { position: relative; overflow: hidden; padding: 120px 0 124px; background: radial-gradient(circle at 91% 8%,rgba(166,77,114,.27),transparent 31rem),radial-gradient(circle at 6% 90%,rgba(201,154,78,.12),transparent 28rem),linear-gradient(145deg,#2d4a59,#1f313b 72%); color: #fff; }
.mail-sort-section::before { position: absolute; top: -220px; left: -190px; width: 540px; height: 540px; border: 1px solid rgba(184,209,218,.1); border-radius: 50%; box-shadow: 0 0 0 60px rgba(184,209,218,.018); content: ""; }
.mail-sort-section .ss-container { position: relative; z-index: 1; }
.mail-sort-section .eyebrow { color: #eac47f; }
.mail-sort-console { overflow: hidden; margin-top: 55px; border: 1px solid rgba(184,209,218,.19); border-radius: 29px; background: rgba(255,255,255,.055); box-shadow: 0 30px 80px rgba(10,25,33,.27); }
.mail-case-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-bottom: 1px solid rgba(184,209,218,.16); }
.mail-case-tabs button { display: grid; min-height: 105px; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; gap: 4px 13px; padding: 19px 22px; border: 0; border-right: 1px solid rgba(184,209,218,.14); background: transparent; color: #c5d4d8; cursor: pointer; font: inherit; text-align: left; transition: background .2s ease,color .2s ease; }
.mail-case-tabs button:last-child { border-right: 0; }
.mail-case-tabs button > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(184,209,218,.26); border-radius: 12px; color: #d9bd84; font-size: 9px; font-weight: 900; }
.mail-case-tabs b { color: #eef3f3; font-size: 12.5px; }
.mail-case-tabs small { color: #aabec4; font-size: 10px; }
.mail-case-tabs button.is-active { background: linear-gradient(135deg,rgba(85,127,153,.23),rgba(166,77,114,.12)); }
.mail-case-tabs button.is-active > span { border-color: rgba(237,200,137,.43); background: rgba(201,154,78,.14); color: #f0ce91; }
.mail-case-tabs button:focus-visible { position: relative; z-index: 2; outline: 3px solid rgba(234,194,125,.55); outline-offset: -4px; }
.mail-case-panel { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); gap: 18px; padding: 18px; }
.mail-message-card { overflow: hidden; border: 1px solid rgba(184,209,218,.16); border-radius: 21px; background: #fffdf8; color: #2d3b42; box-shadow: 0 20px 48px rgba(10,22,29,.16); }
.mail-message-card > header { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 18px 19px; border-bottom: 1px solid #e9e1d7; }
.mail-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#b85b7d,#88405d); color: #fff; font: 500 19px/1 Georgia,serif; }
.mail-message-card header div { display: grid; gap: 4px; min-width: 0; }
.mail-message-card header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-card header small { color: #81776e; font-size: 9.5px; }
.mail-message-card header button { border: 0; background: none; color: #8b8179; font-size: 14px; }
.mail-message-body { display: grid; gap: 11px; min-height: 283px; align-content: start; padding: 24px; }
.mail-message-body > small { color: #8f5367; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.mail-message-body h3 { margin: 0; color: #2b3d46; font: 500 24px/1.2 Georgia,serif; }
.mail-message-body > p { margin: 3px 0 7px; color: #6e665e; font-size: 11.5px; line-height: 1.65; }
.mail-attachment { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid #dfd4c8; border-radius: 14px; background: #faf5ee; }
.mail-attachment > b { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: #f0dce5; color: #8a405e; font-size: 9px; }
.mail-attachment > span { display: grid; gap: 4px; min-width: 0; }
.mail-attachment strong { overflow: hidden; color: #4a4540; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.mail-attachment small { color: #8b8177; font-size: 9px; }
.mail-message-card > footer { display: flex; justify-content: space-between; gap: 13px; padding: 14px 19px; border-top: 1px solid #e9e1d7; color: #7c736b; font-size: 9px; }
.mail-message-card > footer b { color: #4e725b; font-weight: 850; }
.mail-analysis-card { display: flex; flex-direction: column; padding: 23px; border: 1px solid rgba(184,209,218,.16); border-radius: 21px; background: rgba(255,255,255,.07); }
.mail-analysis-card > header { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-bottom: 17px; border-bottom: 1px solid rgba(184,209,218,.15); }
.mail-analysis-card header span { padding: 7px 9px; border-radius: 999px; background: rgba(166,77,114,.22); color: #efc2d0; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.mail-analysis-card header b { color: #e8ca91; font-size: 10px; }
.mail-analysis-route { display: grid; gap: 7px; margin: 20px 0; }
.mail-analysis-route small { color: #a9c4ce; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.mail-analysis-route h3 { margin: 0; color: #fffdf8; font: 500 24px/1.18 Georgia,serif; }
.mail-analysis-route p { margin: 0; color: #c2d0d3; font-size: 11px; line-height: 1.6; }
.mail-analysis-card ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.mail-analysis-card li { display: grid; min-height: 43px; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(184,209,218,.11); border-radius: 12px; color: #c0ced2; font-size: 10.5px; }
.mail-analysis-card li b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: rgba(85,127,153,.22); color: #c7dce3; font-size: 9px; }
.mail-analysis-card li.is-done b { background: rgba(99,139,91,.26); color: #dcebd8; }
.mail-analysis-card li.is-current { border-color: rgba(232,196,132,.25); background: rgba(201,154,78,.1); color: #f0dec0; }
.mail-analysis-card li.is-current b { background: #c99a4e; color: #263944; }
.mail-analysis-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.mail-analysis-actions button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(239,202,137,.35); border-radius: 11px; background: rgba(201,154,78,.13); color: #eed09a; font: inherit; font-size: 10px; font-weight: 850; }
.mail-analysis-actions small { color: #9fb4ba; font-size: 9px; text-align: right; }
.mail-case-panel[data-mail-tone="price"] .mail-avatar,.mail-case-panel[data-mail-tone="price"] .mail-attachment > b { background: linear-gradient(145deg,#d0a358,#a77936); color: #263944; }
.mail-case-panel[data-mail-tone="price"] .mail-analysis-card header span { background: rgba(201,154,78,.2); color: #eed09a; }
.mail-case-panel[data-mail-tone="risk"] .mail-avatar,.mail-case-panel[data-mail-tone="risk"] .mail-attachment > b { background: linear-gradient(145deg,#c35e65,#913b43); color: #fff; }
.mail-case-panel[data-mail-tone="risk"] .mail-analysis-card header span { background: rgba(182,77,85,.26); color: #ffd5d9; }
.mail-case-panel[data-mail-tone="risk"] .mail-analysis-card { border-color: rgba(232,138,145,.23); background: rgba(182,77,85,.1); }
.mail-sort-note { display: flex; align-items: center; gap: 14px; margin: 23px 0 0; padding: 17px 20px; border-left: 3px solid #c99a4e; border-radius: 0 14px 14px 0; background: rgba(255,255,255,.055); color: #b9c9cd; font-size: 11px; }
.mail-sort-note span { color: #f0d39e; font-weight: 850; }

/* HANOS workbench */
.mail-hanos-section { padding: 118px 0 127px; }
.mail-hanos-heading { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(280px,.78fr); align-items: end; gap: 70px; }
.mail-hanos-heading > aside { display: grid; gap: 10px; padding: 21px 23px; border: 1px solid rgba(85,127,153,.23); border-radius: 20px; background: rgba(255,253,249,.72); }
.mail-hanos-heading aside > span { color: #557f99; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.mail-hanos-heading aside strong { display: flex; align-items: center; gap: 9px; color: #344c5b; font: 500 20px/1.1 Georgia,serif; }
.mail-hanos-heading aside i { width: 9px; height: 9px; border-radius: 50%; background: #c99a4e; box-shadow: 0 0 0 5px rgba(201,154,78,.13); }
.mail-hanos-heading aside small { color: #756c64; font-size: 11.5px; line-height: 1.4; }
.mail-hanos-workbench { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); align-items: stretch; gap: 20px; margin-top: 55px; }
.mail-invoice-sheet { position: relative; display: flex; flex-direction: column; padding: 27px; background: var(--mail-paper); color: #333b3d; box-shadow: 0 28px 70px rgba(58,44,32,.13); transform: rotate(-.45deg); }
.mail-invoice-sheet::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 9px; background: radial-gradient(circle at 5px -2px,transparent 6px,#fffdf8 6.5px) 0 0/12px 9px repeat-x; content: ""; }
.mail-invoice-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 17px; padding-bottom: 18px; border-bottom: 2px solid var(--mail-ink); }
.mail-invoice-sheet header div { display: grid; gap: 5px; }
.mail-invoice-sheet header small { color: #9b4a69; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.mail-invoice-sheet header strong { color: var(--mail-ink); font: 500 29px/1 Georgia,serif; }
.mail-invoice-sheet header > span { color: #6c655e; font-size: 10px; }
.mail-invoice-sheet dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 18px; margin: 23px 0; }
.mail-invoice-sheet dl div { display: grid; gap: 4px; }
.mail-invoice-sheet dt { color: #8a8178; font-size: 9px; }
.mail-invoice-sheet dd { margin: 0; color: #45433f; font-size: 10.5px; font-weight: 800; }
.mail-invoice-sheet table { width: 100%; border-collapse: collapse; font-size: 10px; }
.mail-invoice-sheet th,.mail-invoice-sheet td { padding: 10px 7px; border-bottom: 1px solid #e6ddd3; text-align: right; }
.mail-invoice-sheet th:first-child,.mail-invoice-sheet td:first-child { text-align: left; }
.mail-invoice-sheet thead th { color: #786f66; font-size: 8.5px; letter-spacing: .5px; }
.mail-invoice-sheet tfoot th { padding-top: 15px; border-bottom: 0; color: var(--mail-ink); font-size: 11px; }
.mail-invoice-sheet > footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 21px; border-top: 2px solid var(--mail-ink); color: #8a435f; font-size: 8.5px; font-weight: 900; letter-spacing: .6px; }
.mail-checklist-card { overflow: hidden; border: 1px solid rgba(85,127,153,.24); border-radius: 26px; background: linear-gradient(145deg,#f7fbfb,#edf3f3); box-shadow: 0 25px 65px rgba(42,64,73,.1); }
.mail-checklist-card > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 23px 25px; border-bottom: 1px solid rgba(85,127,153,.18); }
.mail-checklist-card header div { display: grid; gap: 6px; }
.mail-checklist-card header small { color: #826176; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; }
.mail-checklist-card h3 { margin: 0; color: var(--mail-ink); font: 500 25px/1.15 Georgia,serif; }
.mail-checklist-card header > span { padding: 7px 9px; border-radius: 999px; background: #e2edf1; color: #486d81; font-size: 9px; font-weight: 900; }
.mail-checklist-card ul { display: grid; margin: 0; padding: 0 25px; list-style: none; }
.mail-checklist-card li { display: grid; min-height: 65px; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid rgba(85,127,153,.13); }
.mail-checklist-card li > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #dce9ed; color: #50778d; font-size: 10px; }
.mail-checklist-card li div { display: grid; gap: 4px; }
.mail-checklist-card li strong { color: #354952; font-size: 11.5px; }
.mail-checklist-card li span { color: #7a736b; font-size: 10px; }
.mail-checklist-card li em { color: #54758a; font-size: 8.5px; font-style: normal; font-weight: 900; }
.mail-checklist-card li.is-good > b { background: #dfead9; color: #526d46; }
.mail-checklist-card li.is-good em { color: #5a754d; }
.mail-checklist-card li.is-review { background: linear-gradient(90deg,rgba(166,77,114,.07),transparent); }
.mail-checklist-card li.is-review > b { background: #f3dce5; color: #984a68; }
.mail-checklist-card li.is-review em { color: #9a4665; }
.mail-confidence { display: grid; grid-template-columns: auto minmax(80px,1fr); align-items: center; gap: 9px 17px; margin: 20px 25px 25px; padding: 16px; border: 1px solid rgba(85,127,153,.19); border-radius: 17px; background: rgba(255,255,255,.62); }
.mail-confidence > span { display: flex; align-items: baseline; gap: 9px; }
.mail-confidence small { color: #7a6f68; font-size: 8.5px; font-weight: 900; letter-spacing: .6px; }
.mail-confidence strong { color: var(--mail-rose-deep); font: 500 23px/1 Georgia,serif; }
.mail-confidence > i { overflow: hidden; height: 8px; border-radius: 999px; background: #dce5e6; }
.mail-confidence > i b { display: block; width: 94%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mail-blue),var(--mail-rose)); }
.mail-confidence p { grid-column: 1 / -1; margin: 0; color: #766e66; font-size: 9.5px; }
.mail-route-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 21px; }
.mail-route-choice article { display: grid; min-height: 145px; grid-template-columns: 51px minmax(0,1fr); align-items: start; gap: 16px; padding: 24px; border: 1px solid #c7d8de; border-radius: 21px; background: linear-gradient(145deg,#f5fafb,#e4eff2); }
.mail-route-choice article > span { display: grid; width: 49px; height: 49px; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#6d95aa,#466f85); color: #fff; font: 500 18px/1 Georgia,serif; }
.mail-route-choice article div { display: grid; gap: 6px; }
.mail-route-choice small { color: #4e7287; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.mail-route-choice h3 { margin: 0; color: #304653; font: 500 21px/1.15 Georgia,serif; }
.mail-route-choice p { margin: 0; color: #6f6962; font-size: 10.5px; line-height: 1.55; }
.mail-route-choice .is-review { border-color: #e6c4d1; background: linear-gradient(145deg,#fff7fa,#f3e0e7); }
.mail-route-choice .is-review > span { background: linear-gradient(145deg,#b85a7b,#88405c); }
.mail-route-choice .is-review small { color: #98506a; }
.mail-route-choice .is-review h3 { color: #6d3e50; }

/* Vier mails, vier routes */
.mail-workday-section { position: relative; overflow: hidden; padding: 117px 0 126px; border-block: 1px solid rgba(164,126,67,.19); background: radial-gradient(circle at 92% 7%,rgba(166,77,114,.11),transparent 29rem),radial-gradient(circle at 5% 93%,rgba(85,127,153,.12),transparent 31rem),linear-gradient(135deg,#f7efe8,#fbf7f1 55%,#f2ece7); }
.mail-workday-section::before { position: absolute; top: -260px; right: -210px; width: 560px; height: 560px; border: 1px solid rgba(166,77,114,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(166,77,114,.02); content: ""; }
.mail-workday-section .ss-container { position: relative; z-index: 1; }
.mail-workday-intro { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(290px,.7fr); align-items: end; gap: 70px; }
.mail-workday-quote { margin: 0 0 7px; padding: 22px 25px; border: 1px solid rgba(166,77,114,.24); border-left: 4px solid var(--mail-rose); border-radius: 0 19px 19px 0; background: rgba(255,253,249,.68); color: #6d3c50; font: 500 20px/1.45 Georgia,serif; }
.mail-story-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 55px; }
.mail-story-grid article { position: relative; overflow: hidden; display: flex; min-height: 375px; flex-direction: column; padding: 23px; border: 1px solid rgba(164,126,67,.23); border-radius: 23px; background: rgba(255,253,249,.8); box-shadow: 0 20px 48px rgba(69,51,36,.07); }
.mail-story-grid article::after { position: absolute; right: -76px; bottom: -92px; width: 185px; height: 185px; border: 1px solid currentColor; border-radius: 50%; opacity: .08; content: ""; }
.mail-story-number { position: absolute; top: 19px; right: 20px; color: #b3a79b; font-size: 8.5px; font-weight: 900; letter-spacing: .7px; }
.mail-story-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 27px; border-radius: 16px; background: #f0dce5; color: #934563; font: 500 18px/1 Georgia,serif; }
.mail-story-grid small { color: #8e4661; font-size: 9px; font-weight: 900; letter-spacing: .9px; }
.mail-story-grid h3 { margin: 11px 0 13px; color: #35454a; font: 500 24px/1.12 Georgia,serif; }
.mail-story-grid p { margin: 0; color: #6f6861; font-size: 11px; line-height: 1.65; }
.mail-story-grid footer { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(164,126,67,.2); }
.mail-story-grid footer b { color: #a08559; font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; }
.mail-story-grid footer span { color: #495a5b; font-size: 10px; font-weight: 800; }
.mail-story-grid .is-missing .mail-story-icon { background: #e1edf1; color: #4d7488; }
.mail-story-grid .is-missing small { color: #4d7488; }
.mail-story-grid .is-credit .mail-story-icon { background: #e7eddc; color: #61774e; }
.mail-story-grid .is-credit small { color: #61774e; }
.mail-story-grid .is-people .mail-story-icon { background: #f3e5cc; color: #9b7131; }
.mail-story-grid .is-people small { color: #9b7131; }

/* Dashboard voorbeeld */
.mail-dashboard-section { padding: 119px 0 128px; }
.mail-dashboard-heading { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); align-items: end; gap: 55px; }
.mail-dashboard-heading > div:last-child { display: grid; gap: 15px; padding-bottom: 7px; }
.mail-dashboard-heading > div:last-child p { margin: 0; color: #716a63; font-size: 11.5px; line-height: 1.55; }
.mail-dashboard-heading > div:last-child a { color: var(--mail-rose-deep); font-size: 11px; font-weight: 900; text-decoration: none; }
.mail-dashboard-frame { overflow: hidden; margin-top: 55px; border: 1px solid rgba(85,127,153,.27); border-radius: 29px; background: #f7faf9; box-shadow: 0 31px 85px rgba(43,62,69,.14); }
.mail-dashboard-frame > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; border-bottom: 1px solid rgba(85,127,153,.17); background: linear-gradient(135deg,#e9f2f4,#f6f1f0); }
.mail-dashboard-frame > header > div { display: flex; align-items: center; gap: 14px; }
.mail-frame-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#668fa5,#416a80); color: #fff; font: 500 18px/1 Georgia,serif; }
.mail-dashboard-frame > header div div { display: grid; gap: 4px; }
.mail-dashboard-frame header small { color: #8d4963; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.mail-dashboard-frame h3 { margin: 0; color: #2f4652; font: 500 24px/1.1 Georgia,serif; }
.mail-dashboard-frame > header > span { color: #756d65; font-size: 10px; }
.mail-dashboard-body { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 15px; padding: 17px; }
.mail-dashboard-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.mail-dashboard-kpis article { display: grid; min-height: 124px; align-content: start; gap: 8px; padding: 18px; border: 1px solid rgba(85,127,153,.17); border-radius: 17px; background: #fff; }
.mail-dashboard-kpis span { color: #69747a; font-size: 10.5px; }
.mail-dashboard-kpis strong { color: #2f4c5c; font: 500 29px/1 Georgia,serif; }
.mail-dashboard-kpis small { margin-top: auto; color: #7d766f; font-size: 9.5px; }
.mail-dashboard-kpis .is-review { border-color: #e5c5d1; background: #fff9fb; }
.mail-dashboard-kpis .is-review strong { color: #934561; }
.mail-dashboard-kpis .is-danger { border-color: #e8bec1; background: #fff7f7; }
.mail-dashboard-kpis .is-danger strong { color: var(--mail-alert); }
.mail-dashboard-list,.mail-ai-panel { border: 1px solid rgba(85,127,153,.17); border-radius: 19px; background: #fff; }
.mail-dashboard-list { overflow: hidden; }
.mail-dashboard-list > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid rgba(85,127,153,.14); }
.mail-dashboard-list > header strong { color: #344b57; font-size: 12px; }
.mail-dashboard-list > header span { color: #827971; font-size: 9.5px; }
.mail-dashboard-list ol { display: grid; margin: 0; padding: 0; list-style: none; }
.mail-dashboard-list li { display: grid; min-height: 68px; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid rgba(85,127,153,.11); }
.mail-dashboard-list li:last-child { border-bottom: 0; }
.mail-dashboard-list li > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #e4eef1; color: #51778b; font-size: 10px; }
.mail-dashboard-list li div { display: grid; gap: 4px; }
.mail-dashboard-list li strong { color: #364951; font-size: 10.5px; }
.mail-dashboard-list li span { color: #7d766f; font-size: 9.5px; }
.mail-dashboard-list li em { padding: 6px 8px; border-radius: 999px; background: #edf3f4; color: #567488; font-size: 8px; font-style: normal; font-weight: 900; }
.mail-dashboard-list li.is-review > b { background: #f2dee6; color: #944563; }
.mail-dashboard-list li.is-danger > b { background: #f5dfe1; color: #a8434c; }
.mail-dashboard-list li.is-danger em { background: #f4dfe1; color: #a4424a; }
.mail-ai-panel { display: flex; flex-direction: column; padding: 21px; background: radial-gradient(circle at 100% 0,rgba(166,77,114,.25),transparent 42%),linear-gradient(145deg,#304b59,#20333d); color: #fff; }
.mail-ai-panel > span { color: #efc68a; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.mail-ai-panel h3 { margin: 9px 0 19px; color: #fffdf8; font-size: 25px; }
.mail-ai-panel > div { display: grid; gap: 7px; }
.mail-ai-panel button { min-height: 41px; padding: 0 12px; border: 1px solid rgba(184,209,218,.18); border-radius: 11px; background: rgba(255,255,255,.055); color: #d9e3e5; font: inherit; font-size: 9.5px; text-align: left; }
.mail-ai-panel p { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 18px; color: #b9c9cd; font-size: 9.5px; line-height: 1.45; }
.mail-ai-panel p b { color: #efc47f; }

/* Bewijsketen — bewust licht tussen twee donkere hoofdstukken */
.mail-proof-section { position: relative; overflow: hidden; padding: 118px 0 126px; border-block: 1px solid rgba(164,126,67,.18); background: radial-gradient(circle at 93% 8%,rgba(85,127,153,.14),transparent 31rem),radial-gradient(circle at 7% 93%,rgba(166,77,114,.09),transparent 27rem),linear-gradient(145deg,#f7f1eb,#fcfaf6 73%); color: #3d494d; }
.mail-proof-section .ss-container { position: relative; z-index: 1; }
.mail-proof-section .eyebrow { color: var(--mail-rose-deep); }
.mail-proof-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(350px,.88fr); gap: 18px; margin-top: 54px; }
.mail-evidence-chain { display: grid; margin: 0; padding: 0; border: 1px solid rgba(85,127,153,.22); border-radius: 22px; background: rgba(255,253,249,.78); box-shadow: 0 22px 55px rgba(55,48,40,.07); list-style: none; }
.mail-evidence-chain li { position: relative; display: grid; min-height: 83px; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 13px 19px; border-bottom: 1px solid rgba(85,127,153,.13); }
.mail-evidence-chain li:last-child { border-bottom: 0; }
.mail-evidence-chain li > b { display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid rgba(85,127,153,.27); border-radius: 13px; background: #e5eff2; color: #4e7488; font-size: 9px; }
.mail-evidence-chain li div { display: grid; gap: 5px; }
.mail-evidence-chain strong { color: #354c57; font-size: 11.5px; }
.mail-evidence-chain span { color: #736c65; font-size: 10px; }
.mail-evidence-chain em { padding: 6px 8px; border-radius: 999px; background: #e5eff2; color: #4d7286; font-size: 8px; font-style: normal; font-weight: 900; }
.mail-draft-card { overflow: hidden; align-self: stretch; border: 1px solid rgba(184,209,218,.18); border-radius: 22px; background: #fffdf8; color: #33434a; box-shadow: 0 23px 58px rgba(8,20,26,.21); }
.mail-draft-card > header { display: grid; gap: 6px; padding: 19px 21px; border-bottom: 1px solid #e6ddd4; background: #f7eee8; }
.mail-draft-card header span { color: #a14c6a; font-size: 8.5px; font-weight: 900; letter-spacing: 1px; }
.mail-draft-card header b { color: #394d56; font: 500 20px/1.2 Georgia,serif; }
.mail-draft-card > div { display: grid; gap: 7px; padding: 22px; }
.mail-draft-card div small { margin-top: 7px; color: #966079; font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.mail-draft-card div strong { font-size: 10.5px; }
.mail-draft-card div p { margin: 13px 0 0; padding: 16px; border-left: 3px solid var(--mail-blue); background: #f1f6f7; color: #625e59; font-size: 10.5px; line-height: 1.6; }
.mail-draft-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 15px 20px; border-top: 1px solid #e6ddd4; }
.mail-draft-card footer span { display: flex; align-items: center; gap: 8px; color: #8c4c64; font-size: 9px; font-weight: 850; }
.mail-draft-card footer i { width: 8px; height: 8px; border-radius: 50%; background: #c99a4e; box-shadow: 0 0 0 4px rgba(201,154,78,.13); }
.mail-draft-card footer button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 10px; background: #e6ddd3; color: #7d746a; font: inherit; font-size: 8.5px; font-weight: 850; }
.mail-status-note { margin: 20px 0 0; padding: 17px 20px; border-left: 3px solid var(--mail-rose); border-radius: 0 14px 14px 0; background: rgba(166,77,114,.09); color: #706861; font-size: 10.5px; line-height: 1.55; }
.mail-status-note strong { color: var(--mail-rose-deep); }

/* Beveiligingsgrens */
.mail-security-section { position: relative; overflow: hidden; padding: 120px 0 127px; background: radial-gradient(circle at 9% 94%,rgba(201,154,78,.12),transparent 27rem),radial-gradient(circle at 91% 7%,rgba(182,77,85,.25),transparent 32rem),linear-gradient(145deg,#49333b,#24353c 68%); color: #fff; }
.mail-security-section::before { position: absolute; top: -255px; right: -200px; width: 570px; height: 570px; border: 1px solid rgba(239,185,202,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(239,185,202,.018); content: ""; }
.mail-security-section .ss-container { position: relative; z-index: 1; }
.mail-security-section .eyebrow { color: #efbdcd; }
.mail-security-intro { display: grid; grid-template-columns: minmax(0,1fr) 220px; align-items: end; gap: 75px; }
.mail-security-seal { position: relative; display: grid; min-height: 215px; place-items: center; align-content: center; gap: 11px; border: 1px solid rgba(239,185,202,.25); border-radius: 50%; background: radial-gradient(circle,rgba(182,77,85,.2),rgba(255,255,255,.035) 68%); text-align: center; }
.mail-security-seal::before { position: absolute; inset: 12px; border: 1px dashed rgba(239,185,202,.25); border-radius: inherit; content: ""; }
.mail-security-seal > * { position: relative; z-index: 1; }
.mail-security-seal > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--mail-alert); font: 700 20px/1 Georgia,serif; }
.mail-security-seal strong { color: #fff8f8; font-size: 11px; letter-spacing: 1px; line-height: 1.35; }
.mail-security-seal small { max-width: 150px; color: #d8bdc4; font-size: 9px; line-height: 1.4; }
.mail-security-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 16px; margin-top: 55px; }
.mail-stop-card,.mail-fraud-example { overflow: hidden; border: 1px solid rgba(239,185,202,.2); border-radius: 24px; background: rgba(255,255,255,.06); }
.mail-stop-card > header,.mail-fraud-example > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 23px; border-bottom: 1px solid rgba(239,185,202,.15); }
.mail-stop-card header span,.mail-fraud-example header small { color: #efbdcd; font-size: 9px; font-weight: 900; letter-spacing: .9px; }
.mail-stop-card header strong { color: #fffdf8; font: 500 22px/1.2 Georgia,serif; }
.mail-stop-card ul { display: grid; margin: 0; padding: 0 22px; list-style: none; }
.mail-stop-card li { display: grid; min-height: 62px; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid rgba(239,185,202,.1); }
.mail-stop-card li:last-child { border-bottom: 0; }
.mail-stop-card li b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(182,77,85,.27); color: #ffd6da; font-size: 8.5px; }
.mail-stop-card li span { color: #e8e3e3; font-size: 10.5px; }
.mail-stop-card li em { color: #eec0ce; font-size: 8.5px; font-style: normal; font-weight: 850; text-align: right; }
.mail-fraud-example header div { display: grid; gap: 6px; }
.mail-fraud-example h3 { margin: 0; color: #fffdf8; font: 500 24px/1.15 Georgia,serif; }
.mail-fraud-example header > span { padding: 7px 9px; border-radius: 999px; background: rgba(182,77,85,.3); color: #ffd7da; font-size: 8.5px; font-weight: 900; }
.mail-fraud-message { display: grid; gap: 9px; margin: 21px; padding: 19px; border: 1px solid rgba(255,194,198,.2); border-left: 4px solid var(--mail-alert); border-radius: 0 17px 17px 0; background: rgba(182,77,85,.15); }
.mail-fraud-message span { color: #e4bbc1; font-size: 9px; }
.mail-fraud-message strong { color: #fff8f8; font: 500 18px/1.35 Georgia,serif; }
.mail-fraud-message p { margin: 0; color: #d8cdd0; font-size: 10px; line-height: 1.55; }
.mail-fraud-example ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0 21px 20px; list-style: none; }
.mail-fraud-example ol li { display: grid; min-height: 58px; grid-template-columns: 29px minmax(0,1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid rgba(239,185,202,.13); border-radius: 13px; background: rgba(255,255,255,.04); }
.mail-fraud-example ol b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: rgba(201,154,78,.2); color: #efd09a; font-size: 9px; }
.mail-fraud-example ol span { color: #d9dede; font-size: 9.5px; line-height: 1.4; }
.mail-fraud-example > footer { padding: 16px 21px; border-top: 1px solid rgba(239,185,202,.13); color: #f0c8d3; font-size: 9.5px; line-height: 1.5; }
.mail-security-principles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.mail-security-principles article { display: grid; min-height: 138px; grid-template-columns: 41px minmax(0,1fr); align-content: center; gap: 13px; padding: 17px; border: 1px solid rgba(237,207,152,.16); border-radius: 18px; background: rgba(255,255,255,.045); }
.mail-security-principles article > b { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(237,207,152,.27); border-radius: 13px; color: #efca8c; font-size: 8.5px; }
.mail-security-principles div { display: grid; gap: 6px; }
.mail-security-principles strong { color: #fffaf6; font-size: 10.5px; }
.mail-security-principles span { color: #c6cece; font-size: 9.5px; line-height: 1.45; }

/* Veilige inrichting */
.mail-setup-section { padding: 119px 0 128px; }
.mail-setup-heading { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(330px,.84fr); align-items: end; gap: 65px; }
.mail-provider-note { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 16px; padding: 20px; border: 1px solid rgba(85,127,153,.23); border-radius: 20px; background: linear-gradient(145deg,#f2f8f9,#e5eef1); }
.mail-provider-note > span { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 17px; background: linear-gradient(145deg,#678fa5,#426a80); }
.mail-provider-note svg { width: 29px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.mail-provider-note div { display: grid; gap: 5px; }
.mail-provider-note small { color: #5a798a; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.mail-provider-note strong { color: #324b58; font: 500 19px/1.2 Georgia,serif; }
.mail-provider-note p { margin: 0; color: #716a63; font-size: 9.5px; line-height: 1.45; }
.mail-setup-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 55px; }
.mail-setup-grid article { position: relative; overflow: hidden; min-height: 340px; padding: 24px; border: 1px solid rgba(85,127,153,.22); border-radius: 23px; background: rgba(255,253,249,.74); box-shadow: 0 19px 48px rgba(48,60,60,.065); }
.mail-setup-grid article::before { position: absolute; top: -90px; right: -85px; width: 190px; height: 190px; border: 1px solid var(--mail-blue); border-radius: 50%; opacity: .08; content: ""; }
.mail-setup-grid article > span { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 27px; border-radius: 15px; background: #e2edf1; color: #4b7287; font-size: 9px; font-weight: 900; }
.mail-setup-grid article:nth-child(2) > span { background: #f1dfe6; color: #91435f; }
.mail-setup-grid article:nth-child(3) > span { background: #f2e6ce; color: #976f33; }
.mail-setup-grid article:nth-child(4) > span { background: #e4eadc; color: #5b704c; }
.mail-setup-grid small { color: #806277; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.mail-setup-grid h3 { margin: 10px 0 12px; color: #334a55; font: 500 23px/1.15 Georgia,serif; }
.mail-setup-grid p { margin: 0; color: #716a63; font-size: 10.5px; line-height: 1.6; }
.mail-setup-grid ul { display: grid; gap: 8px; margin: 21px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(85,127,153,.14); list-style: none; }
.mail-setup-grid li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 8px; color: #5f6666; font-size: 9.5px; }
.mail-setup-grid li::before { color: var(--mail-gold); content: "✓"; font-weight: 900; }

/* Pilot roadmap */
.mail-pilot-section { position: relative; overflow: hidden; padding: 117px 0 126px; border-block: 1px solid rgba(164,126,67,.19); background: radial-gradient(circle at 91% 8%,rgba(85,127,153,.13),transparent 31rem),radial-gradient(circle at 6% 90%,rgba(166,77,114,.11),transparent 29rem),linear-gradient(135deg,#f7f0e9,#fbf8f3); }
.mail-pilot-roadmap { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin: 55px 0 0; padding: 0; list-style: none; }
.mail-pilot-roadmap > li { position: relative; display: grid; min-height: 440px; grid-template-rows: auto 1fr auto; gap: 24px; padding: 28px; border: 1px solid rgba(85,127,153,.22); border-radius: 25px; background: rgba(255,253,249,.82); box-shadow: 0 21px 53px rgba(56,48,39,.07); }
.mail-pilot-roadmap > li:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -14px; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #d7bd91; border-radius: 50%; background: #fbf7ef; color: #aa7b39; content: "›"; font: 900 18px/1 Arial,sans-serif; }
.mail-pilot-roadmap > li > span { display: grid; width: 62px; height: 62px; place-items: center; align-content: center; gap: 3px; border-radius: 19px; background: #e2edf1; color: #4c7286; font: 500 20px/1 Georgia,serif; }
.mail-pilot-roadmap > li > span b { font: 900 7px/1 Arial,sans-serif; letter-spacing: .8px; }
.mail-pilot-roadmap li.is-first { border-color: rgba(166,77,114,.31); background: linear-gradient(145deg,#fff9fb,#f6e9ee); }
.mail-pilot-roadmap li.is-first > span { background: linear-gradient(145deg,#b65a79,#88405c); color: #fff; }
.mail-pilot-roadmap li:nth-child(3) > span { background: #e5eadc; color: #5e724e; }
.mail-pilot-roadmap li > div { display: flex; flex-direction: column; }
.mail-pilot-roadmap small { color: #8d4761; font-size: 9px; font-weight: 900; letter-spacing: .9px; }
.mail-pilot-roadmap h3 { margin: 11px 0 13px; color: #324a56; font: 500 25px/1.15 Georgia,serif; }
.mail-pilot-roadmap p { margin: 0; color: #6f6861; font-size: 11px; line-height: 1.62; }
.mail-pilot-roadmap ul { display: grid; gap: 9px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(85,127,153,.14); list-style: none; }
.mail-pilot-roadmap ul li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 8px; color: #5f6665; font-size: 9.5px; }
.mail-pilot-roadmap ul li::before { color: var(--mail-gold); content: "✓"; font-weight: 900; }
.mail-pilot-roadmap > li > em { justify-self: start; padding: 7px 10px; border-radius: 999px; background: #e8f0f2; color: #557485; font-size: 8.5px; font-style: normal; font-weight: 900; }
.mail-pilot-roadmap .is-first > em { background: #f0dbe3; color: #8f405d; }

/* Video, afsluiting en bronnen */
.mail-video-section { background: radial-gradient(circle at 91% 13%,rgba(85,127,153,.18),transparent 30rem),radial-gradient(circle at 7% 90%,rgba(166,77,114,.12),transparent 27rem),linear-gradient(135deg,#f7f0ea,#eee8e8 53%,#f6f1ec); }
.mail-video-section .video-poster { background: radial-gradient(circle at 82% 17%,rgba(166,77,114,.39),transparent 30%),radial-gradient(circle at 16% 85%,rgba(201,154,78,.14),transparent 28%),linear-gradient(140deg,#345565,#213640 63%,#503946); }
.mail-video-section .video-play { background: linear-gradient(145deg,#678fa5,#3d657b); }
.mail-transparency { border-left-color: var(--mail-blue); }
.mail-transparency > span { color: var(--mail-rose-deep); }
.mail-transparency > div { display: grid; gap: 11px; }
.mail-source-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mail-source-links a { color: #486e82; font-size: 10px; font-weight: 850; text-decoration: none; }
.mail-source-links a:hover { color: var(--mail-rose-deep); text-decoration: underline; }

/* Leesbaarheid: informatieve microtekst blijft ook op iPad goed leesbaar. */
.email-integration-page small { font-size: 11px; }
.mail-category-rail span,
.mail-dashboard-list li span,
.mail-evidence-chain span,
.mail-security-principles span,
.mail-fraud-example ol span { font-size: 11px; }
.mail-ai-panel button,
.mail-draft-card footer span,
.mail-stop-card li em,
.mail-checklist-card li em { font-size: 10.5px; }
.mail-route-choice p,
.mail-provider-note p,
.mail-setup-grid li,
.mail-pilot-roadmap ul li,
.mail-draft-card div p,
.mail-fraud-message p { font-size: 11.5px; }
.mail-source-links a { font-size: 11px; }

@media (max-width: 1180px) {
  .mail-hero { grid-template-columns: minmax(0,1fr) 405px; gap: 43px; }
  .mail-pulse { padding: 23px; }
  .mail-pulse-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-pulse-kpis article { min-height: 88px; }
  .mail-role-map { grid-template-columns: minmax(190px,.8fr) 24px minmax(220px,.9fr) 24px minmax(270px,1.1fr); }
  .mail-story-grid,.mail-setup-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-story-grid article { min-height: 330px; }
  .mail-security-principles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1060px) {
  .email-integration-page .proposal-label { display: none; }
  .mail-hero { grid-template-columns: 1fr; min-height: 0; gap: 52px; padding-block: 70px 95px; }
  .mail-pulse { max-width: 720px; }
  .mail-role-map { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .mail-role-inbox,.mail-role-more { min-height: 170px; }
  .mail-route-arrow { transform: rotate(90deg); }
  .mail-destinations { width: 100%; }
  .mail-category-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-case-panel { grid-template-columns: 1fr; }
  .mail-message-card { max-width: 720px; }
  .mail-analysis-card { min-height: 0; }
  .mail-hanos-heading,.mail-workday-intro,.mail-dashboard-heading,.mail-setup-heading { grid-template-columns: 1fr; gap: 30px; }
  .mail-hanos-heading > aside,.mail-provider-note { max-width: 660px; }
  .mail-hanos-workbench { grid-template-columns: 1fr; }
  .mail-invoice-sheet { max-width: 650px; }
  .mail-dashboard-body { grid-template-columns: 1fr; }
  .mail-dashboard-kpis { grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-proof-layout { grid-template-columns: 1fr; }
  .mail-draft-card { max-width: 720px; }
  .mail-security-intro { grid-template-columns: 1fr; gap: 40px; }
  .mail-security-seal { width: 210px; min-height: 210px; }
  .mail-security-grid { grid-template-columns: 1fr; }
  .mail-pilot-roadmap { grid-template-columns: 1fr; }
  .mail-pilot-roadmap > li { min-height: 0; grid-template-columns: 76px minmax(0,1fr) auto; grid-template-rows: auto; align-items: center; }
  .mail-pilot-roadmap > li:not(:last-child)::after { top: auto; right: 50%; bottom: -14px; transform: translateX(50%) rotate(90deg); }
}

@media (max-width: 760px) {
  .mail-hero { padding-block: 62px 79px; }
  .mail-partner-logo { width: 122px; }
  .mail-partner-logo svg { width: 24px; }
  .mail-pulse { padding: 21px; border-radius: 24px; }
  .mail-pulse-brand { grid-template-columns: 49px minmax(0,1fr); }
  .mail-pulse-brand > span { width: 48px; height: 48px; }
  .mail-pulse-brand em { grid-column: 1 / -1; justify-self: start; }
  .mail-role-section,.mail-hanos-section,.mail-dashboard-section,.mail-setup-section { padding-block: 82px 89px; }
  .mail-sort-section,.mail-workday-section,.mail-proof-section,.mail-security-section,.mail-pilot-section { padding-block: 82px 88px; }
  .mail-destinations { grid-template-columns: 1fr; }
  .mail-category-rail { grid-template-columns: 1fr; }
  .mail-role-summary,.mail-sort-note { align-items: flex-start; flex-direction: column; gap: 7px; }
  .mail-case-tabs { grid-template-columns: 1fr; }
  .mail-case-tabs button { min-height: 80px; border-right: 0; border-bottom: 1px solid rgba(184,209,218,.14); }
  .mail-case-tabs button:last-child { border-bottom: 0; }
  .mail-sort-console { margin-top: 39px; border-radius: 22px; }
  .mail-case-panel { padding: 12px; }
  .mail-analysis-card { min-height: 0; }
  .mail-message-card > footer { align-items: flex-start; flex-direction: column; }
  .mail-hanos-workbench,.mail-story-grid,.mail-dashboard-frame,.mail-proof-layout,.mail-security-grid,.mail-setup-grid,.mail-pilot-roadmap { margin-top: 39px; }
  .mail-route-choice,.mail-story-grid,.mail-setup-grid { grid-template-columns: 1fr; }
  .mail-story-grid article,.mail-setup-grid article { min-height: 0; }
  .mail-dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-dashboard-frame { border-radius: 22px; }
  .mail-dashboard-frame > header { align-items: flex-start; flex-direction: column; }
  .mail-dashboard-body { padding: 12px; }
  .mail-dashboard-list > header { align-items: flex-start; flex-direction: column; }
  .mail-evidence-chain li { grid-template-columns: 41px minmax(0,1fr); }
  .mail-evidence-chain em { grid-column: 2; justify-self: start; }
  .mail-security-seal { width: 190px; min-height: 190px; }
  .mail-stop-card li { grid-template-columns: 34px minmax(0,1fr); padding-block: 9px; }
  .mail-stop-card li em { grid-column: 2; justify-self: start; text-align: left; }
  .mail-security-principles { grid-template-columns: 1fr; }
  .mail-fraud-example ol { grid-template-columns: 1fr; }
  .mail-pilot-roadmap > li { grid-template-columns: 62px minmax(0,1fr); align-items: start; padding: 23px; }
  .mail-pilot-roadmap > li > span { width: 57px; height: 57px; }
  .mail-pilot-roadmap > li > em { grid-column: 2; }
  .mail-source-links { display: grid; }
}

@media (max-width: 480px) {
  .mail-pulse-top { align-items: flex-start; flex-direction: column; gap: 6px; }
  .mail-pulse-kpis { grid-template-columns: 1fr 1fr; }
  .mail-pulse-feed li { grid-template-columns: 33px 30px minmax(0,1fr); padding-block: 7px; }
  .mail-pulse-feed em { grid-column: 3; justify-self: start; }
  .mail-role-inbox,.mail-role-more { padding: 22px; }
  .mail-message-card > header { grid-template-columns: 43px minmax(0,1fr); }
  .mail-message-card header button { display: none; }
  .mail-message-body { min-height: 0; padding: 20px; }
  .mail-message-body h3 { font-size: 21px; }
  .mail-analysis-card { padding: 19px; }
  .mail-analysis-card > header { align-items: flex-start; flex-direction: column; }
  .mail-analysis-actions { align-items: flex-start; flex-direction: column; }
  .mail-analysis-actions small { text-align: left; }
  .mail-invoice-sheet { padding: 22px; }
  .mail-invoice-sheet dl { grid-template-columns: 1fr; }
  .mail-invoice-sheet th,.mail-invoice-sheet td { padding-inline: 4px; font-size: 9px; }
  .mail-checklist-card > header { align-items: flex-start; flex-direction: column; }
  .mail-checklist-card ul { padding-inline: 18px; }
  .mail-checklist-card li { grid-template-columns: 32px minmax(0,1fr); padding-block: 9px; }
  .mail-checklist-card li em { grid-column: 2; justify-self: start; }
  .mail-confidence { grid-template-columns: 1fr; margin-inline: 18px; }
  .mail-confidence p { grid-column: auto; }
  .mail-route-choice article { grid-template-columns: 1fr; }
  .mail-dashboard-kpis { grid-template-columns: 1fr; }
  .mail-dashboard-list li { grid-template-columns: 34px minmax(0,1fr); padding-block: 11px; }
  .mail-dashboard-list li em { grid-column: 2; justify-self: start; }
  .mail-draft-card > footer { align-items: flex-start; flex-direction: column; }
  .mail-security-intro h2 br { display: none; }
  .mail-stop-card > header,.mail-fraud-example > header { align-items: flex-start; flex-direction: column; }
  .mail-fraud-example ol { padding-inline: 17px; }
  .mail-security-principles article { grid-template-columns: 41px minmax(0,1fr); }
  .mail-provider-note { grid-template-columns: 1fr; }
  .mail-pilot-roadmap > li { grid-template-columns: 1fr; }
  .mail-pilot-roadmap > li > em { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mail-case-tabs button { transition: none; }
}