/* Calendar subscriptions, using the shared secondary sales-page layout. */
/* Same purple palette as “Plannen & boeken” in the navigation dropdown. */
.sync-page { --sy-accent:#6650ca; --sy-accent-hover:#513ba8; --sy-tint:#eee9fc; --sy-soft:#f6f3fe; --sy-line:#e5def6; }
.sync-page h1 span,.sync-page .bk-kicker,.sync-page .bk-feature .bk-kicker,.sync-page .bk-textlink,.sync-page .bk-benefits .sv-icon,.sync-page .bk-questions summary>span { color:var(--sy-accent); }
.sync-page .bk-textlink:hover,.sync-page .bk-breadcrumb a:hover { color:var(--sy-accent-hover); }
.sync-page .sv-button { background:var(--sy-accent); border-color:var(--sy-accent); }
.sync-page .sv-button:hover { background:var(--sy-accent-hover); border-color:var(--sy-accent-hover); }
.sync-page .bk-agenda,.sync-page .bk-booking-visual,.sync-page .bk-feature { background:var(--sy-tint); }
.sync-page .bk-feature.bk-visit,.sync-page .bk-final { background:var(--sy-soft); }
.sync-page .bk-booking-steps li>span { color:var(--sy-accent); background:var(--sy-tint); }
.sync-page .bk-included,.sync-page .bk-price,.sync-page .bk-questions details { border-color:var(--sy-line); }

.sync-page .sy-app-frame { position:relative; width:100%; height:430px; overflow:hidden; border:1px solid var(--sy-line); border-radius:15px; background:#fff; box-shadow:0 18px 40px -20px #30285230; }
.sync-page .sy-app-frame iframe { position:absolute; top:0; left:0; display:block; width:1100px; height:430px; border:0; transform-origin:top left; pointer-events:none; user-select:none; }
.sync-page .sy-flow { padding:38px 32px 22px; }
.sync-page .sy-source { display:flex; align-items:center; gap:12px; padding:22px; border:1px solid #e5e8ed; border-radius:15px; background:#fff; }
.sync-page .sy-source img { flex:0 0 32px; }
.sync-page .sy-source strong,.sync-page .sy-destination header strong { display:block; font-size:15px; }
.sync-page .sy-source div>span,.sync-page .sy-destination header span { display:block; margin-top:4px; color:#7a8192; font-size:10px; }
.sync-page .sy-source .sy-source-badge { margin-left:auto; padding:5px 8px; border-radius:6px; background:var(--sy-tint); color:var(--sy-accent); font-size:9px; white-space:nowrap; }
.sync-page .sy-flow-arrow { display:grid; place-items:center; height:56px; color:#a699d4; }
.sync-page .sy-flow-arrow .sv-icon { width:26px; height:26px; transform:rotate(90deg); }
.sync-page .sy-destination { padding:24px; border:1px solid #e5e8ed; border-radius:15px; background:#fff; }
.sync-page .sy-destination header { display:flex; align-items:center; gap:12px; }
.sync-page .sy-destination header>.sv-icon { width:28px; height:28px; color:var(--sy-accent); }
.sync-page .sy-app-names { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; }
.sync-page .sy-app-names span { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; background:#f6f7fa; color:#727b91; font-size:9px; }
.sync-page .sy-event { padding:14px; border-left:3px solid #a699d4; border-radius:0 8px 8px 0; background:var(--sy-soft); color:var(--sy-accent); }
.sync-page .sy-event time,.sync-page .sy-event small { display:block; font-size:10px; }
.sync-page .sy-event strong { display:block; margin:4px 0; font-size:13px; }
.sync-page .sy-scope-visual { margin-top:auto; padding:8px 22px; border-radius:15px; background:#fff; }
.sync-page .sy-scope-visual>div { display:flex; align-items:center; gap:15px; padding:20px 0; }
.sync-page .sy-scope-visual>div+div { border-top:1px solid #eff0f5; }
.sync-page .sy-scope-visual .sv-icon { width:23px; height:23px; color:var(--sy-accent); }
.sync-page .sy-scope-visual b { display:block; font-size:13px; font-weight:650; }
.sync-page .sy-scope-visual small { display:block; margin-top:4px; color:#7b8294; font-size:10px; }
.sync-page .sy-manage-visual { margin-top:auto; padding:25px; border-radius:15px; background:#fff; }
.sync-page .sy-manage-visual>small { display:block; color:#727b90; font-size:11px; }
.sync-page .sy-manage-visual>div { display:flex; align-items:center; gap:18px; margin:18px 0; font-size:28px; }
.sync-page .sy-manage-visual>div>span { color:#a5aabc; text-decoration:line-through; }
.sync-page .sy-manage-visual>div>.sv-icon { width:20px; height:20px; color:#a5aabc; }
.sync-page .sy-manage-visual>div>strong { color:var(--sy-accent); }
.sync-page .sy-manage-visual p { display:flex; align-items:center; gap:8px; margin:0; color:#7b8294; font-size:10px; }
.sync-page .sy-manage-visual p>.sv-icon { width:15px; height:15px; }
.sync-page .sy-link-note { display:flex; align-items:flex-start; gap:16px; margin-top:28px; padding:24px 28px; border-radius:18px; background:var(--sy-soft); }
.sync-page .sy-link-note>.sv-icon { width:22px; height:22px; color:var(--sy-accent); margin-top:2px; }
.sync-page .sy-link-note strong { display:block; font-size:14px; font-weight:650; }
.sync-page .sy-link-note p { margin:7px 0 0; font-size:12px; line-height:1.8; }
@media(max-width:1000px) {
  .sync-page .sy-source { flex-wrap:wrap; }
  .sync-page .sy-source .sy-source-badge { margin-left:44px; }
}
@media(max-width:760px) {
  .sync-page .sy-app-frame { border-radius:12px; }
  .sync-page .sy-flow { padding:24px 18px 18px; }
  .sync-page .sy-source,.sync-page .sy-destination { padding:20px 16px; }
  .sync-page .sy-scope-visual { padding-inline:18px; }
  .sync-page .sy-link-note { padding:22px 20px; }
}

.sync-page .sy-supported { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:30px; }
.sync-page .sy-supported>span { display:inline-flex; align-items:center; gap:10px; color:#697185; font-size:12px; font-weight:550; }
.sync-page .sy-supported img { flex:0 0 26px; width:26px; height:26px; }
.sync-page .sy-app-names img { flex:0 0 18px; width:18px; height:18px; }
@media(max-width:760px) { .sync-page .sy-supported { gap:14px 20px; margin-top:26px; } }