/* New contents live inside the established StudyCore onboarding shell. */
.sc-guided [hidden] { display: none !important; }
.sc-guided .sc-onboarding__panel { min-width: 0; overflow: clip; }
.sc-guided .sc-onboarding__screen h1 { max-width: 18ch; }
.sc-guided .sc-onboarding__screen { animation: sc-guided-enter 240ms ease-out; }
.sc-guided .sc-onboarding__description { max-width: 54ch; }
/* Keep the route in view while the document or lesson scrolls. */
.sc-guided .sc-onboarding__context { align-self: start; position: sticky; top: 24px; min-height: 0; padding: clamp(28px, 3.2vw, 44px); }
.sc-guided .sc-onboarding__context h2 { max-width: 15ch; font-size: clamp(1.9rem, 2.6vw, 2.7rem); line-height: 1.06; }
.sc-guided .sc-onboarding__context > p:not(.sc-onboarding__context-label) { font-size: .85rem; }
.sc-guided__route { display: grid; gap: 17px; list-style: none; margin: 32px 0 0; padding: 0; color: #B9BDCA; font: 500 .8rem/1.4 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__route li { display: flex; align-items: center; gap: 12px; }
.sc-guided__route small { display: block; margin-top: 3px; color: #969DAA; font-size: .66rem; font-weight: 400; }
.sc-guided__route li[aria-current="step"] { color: #FFFFFF; font-weight: 650; }
.sc-guided__route li[aria-current="step"] small { color: #C5D6CB; }
.sc-guided__route-mark { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #FFFFFF21; border-radius: 50%; }
.sc-guided__route-mark svg { width: 20px; height: 20px; }
.sc-guided__route-dot { width: 6px; height: 6px; border-radius: 50%; background: #737B8B; }
.sc-guided__route [data-status="completed"] .sc-guided__route-mark { color: #85D5AD; background: #279A6429; border-color: #279A6466; }
.sc-guided__route [data-status="current"] .sc-guided__route-mark { border-color: #62C99466; }
.sc-guided__route [data-status="current"] .sc-guided__route-dot { width: 8px; height: 8px; background: #62C994; }
.sc-guided__route [data-status="current"] .sc-guided__route-mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #62C994; animation: sc-guided-breathe 2.8s ease-in-out infinite; }
.sc-guided__route [data-status="skipped"] .sc-guided__route-mark { color: #929AAA; }
.sc-guided .sc-onboarding--v2 .sc-onboarding__tour-progress { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sc-guided .sc-onboarding__progress { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 10px; }
.sc-guided .sc-onboarding__progress > span[data-status="completed"]::after { transform: scaleX(1); background: #279A64; }
.sc-guided .sc-onboarding__progress > span[data-status="skipped"]::after { transform: scaleX(1); background: #B1B5BD; }
.sc-guided__step-tools { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 23px; gap: 12px; }
.sc-guided__step-tools > span { color: #6A6F78; font: 500 .72rem/1.4 var(--sc-font-body, Inter, sans-serif); }
.sc-guided .sc-guided__step-tools .sc-onboarding__back { padding: 10px 0 10px 12px; color: #636A75; font-size: .78rem; }
.sc-guided__completion { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 19px 20px; background: #EDF6EF; border-radius: 17px; color: #245F42; animation: sc-guided-enter 200ms ease-out; }
.sc-guided__completion strong { display: block; font: 650 .9rem/1.4 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__completion p { margin: 5px 0 0; font: 450 .82rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__completion-mark, .sc-guided__outcome-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #279A641A; color: #237E53; }
.sc-guided__completion-mark svg, .sc-guided__outcome-mark svg { width: 22px; height: 22px; }
.sc-guided__outcomes [data-status="skipped"] .sc-guided__outcome-mark { color: #7F8792; background: #E9E8E3; }
@keyframes sc-guided-breathe { 0%, 100% { opacity: .08; transform: scale(.8); } 50% { opacity: .2; transform: scale(1.35); } }
.sc-guided__choices { display: grid; gap: 10px; margin: 25px 0 0; padding: 0; border: 0; min-width: 0; }
.sc-guided__choice { display: flex; align-items: center; gap: 13px; padding: 16px 18px; min-height: 60px; border: 1px solid #E8E5DE; border-radius: 15px; background: #FAF9F5; color: var(--sc-ink, #171A1F); font: 550 .92rem/1.45 var(--sc-font-body, Inter, sans-serif); cursor: pointer; }
.sc-guided__choice:has(input:checked) { border-color: #2E5BFF; background: #EEF1FF; }
.sc-guided__choice input { appearance: auto; width: 19px; height: 19px; flex: 0 0 19px; margin: 0; accent-color: #2E5BFF; cursor: pointer; }
.sc-guided__choice:focus-within { outline: 2px solid #2E5BFF; outline-offset: 3px; }
.sc-guided__other { margin-top: 16px; }
.sc-guided__other label { display: block; margin-bottom: 8px; font: 600 .8rem/1.5 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__other label span { margin-left: 8px; color: #6A6F78; font-weight: 400; }
.sc-guided__other textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 100px; padding: 14px; border: 1px solid #DDDAD3; border-radius: 13px; background: #FFFFFF; color: #171A1F; font: 400 .9rem/1.55 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.sc-guided__actions > .sc-onboarding__continue { margin-left: auto; }
.sc-guided__note { margin-top: 28px; padding: 19px 21px; border-radius: 17px; background: #EEF1FF; color: #374A8A; font: 450 .93rem/1.65 var(--sc-font-body, Inter, sans-serif); }
.sc-guided .sc-guided__demo-status { margin: 18px 0 0; color: #3E6550; font: 500 .84rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-guided .sc-guided__demo-status:empty { display: none; }
.sc-guided .sc-guided__example { min-width: 0; margin-top: 22px; }
.sc-guided .sc-guided__example-error { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: #FFF5E4; color: #79521D; font: 450 .86rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-guided .sc-guided__example-error p { margin: 0 0 9px; }
.sc-guided .sc-guided__document-back { margin-top: 20px; padding-left: 0; }
.sc-guided__wish { margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid #8AA1FF; overflow-wrap: anywhere; }
.sc-guided__wish > span { color: #6A6F78; font-size: .75rem; }
.sc-guided__wish p { margin: 7px 0 0; font: 500 1rem/1.65 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__document { margin-top: 22px; padding: clamp(20px, 3vw, 30px); border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px #171A1F05, 0 12px 30px #171A1F07; }
.sc-guided__document-meta { display: grid; gap: 5px; padding-bottom: 19px; border-bottom: 1px solid #ECE9E2; }
.sc-guided__document-meta strong { font: 650 .9rem/1.4 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__document-meta span, .sc-guided__document small { color: #6A6F78; font: 400 .73rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__document h2 { margin: 23px 0 15px; font: 650 clamp(1.3rem, 2vw, 1.65rem)/1.15 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.025em; }
.sc-guided__document p { margin: 14px 0; color: #4B515B; font: 400 .89rem/1.8 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__document mark { color: #29447D; background: #EDF1FF; border-radius: 3px; }
/* Live demo: the prepared PDF and the real StudyCore page in a phone-width frame. */
.sc-guided__pdf { margin-top: 22px; padding: 20px 22px 18px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 1px 2px #171A1F0A, 0 16px 36px -20px #171A1F38; }
.sc-guided__pdf-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-guided__pdf-head > div { min-width: 0; }
.sc-guided__pdf-head strong { display: block; color: #171A1F; font: 650 .95rem/1.35 var(--sc-font-body, Inter, sans-serif); overflow-wrap: anywhere; }
.sc-guided__pdf-head span:not(.sc-guided__pdf-icon) { color: #6A6F78; font: 400 .75rem/1.5 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__pdf-icon { position: relative; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 54px; border-radius: 13px; background: #EEF1FF; color: #2E5BFF; }
.sc-guided__pdf-icon svg { width: 26px; height: 26px; margin-top: -8px; }
.sc-guided__pdf-icon b { position: absolute; bottom: 7px; font: 700 .55rem/1 var(--sc-font-body, Inter, sans-serif); letter-spacing: .06em; }
.sc-guided__pdf-preview { max-height: 5.6em; margin-top: 17px; overflow: hidden; color: #4B515B; font: 400 .86rem/1.85 var(--sc-font-body, Inter, sans-serif); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.sc-guided__pdf-preview p { margin: 0; }
.sc-guided__pdf-ready { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; color: #245F42; font: 550 .82rem/1.5 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__pdf-ready-mark { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #279A641A; color: #237E53; }
.sc-guided__pdf-ready-mark svg { width: 16px; height: 16px; }
/* Preview cards: what each live example opens with (Studiegids = the PDF). */
.sc-guided__preview-topic { display: flex; align-items: center; gap: 10px; margin: 17px 0 0; padding: 13px 15px; border-radius: 14px; background: #F6F4EF; color: #171A1F; font: 400 .84rem/1.4 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__preview-topic strong { font-weight: 650; }
.sc-guided__preview-topic span:last-child { margin-left: auto; color: #6A6F78; font-size: .76rem; }
.sc-guided__preview-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.sc-guided__preview-dot--amber { background: #DE9A26; }
.sc-guided__preview-dot--red { background: #DE5B4E; }
.sc-guided__anchor { margin-top: 22px; }
.sc-guided__anchor > .sc-guided__pdf, .sc-guided__anchor > .sc-guided__completion { margin-top: 0; }

/* Full-screen live example: slim bars, the real page fills the rest. */
html.sc-guided-staged, html.sc-guided-staged body { overflow: hidden !important; }
.sc-guided.is-staging { overflow: hidden; }
/* The card rect measured before staging stays valid when the host stops scrolling. */
.sc-guided { scrollbar-gutter: stable; }
.sc-guided.is-staged .sc-onboarding > :not(.sc-guided__stage):not(.sc-guided__dark) { visibility: hidden; }
.sc-guided__stage { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: calc(56px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(72px + env(safe-area-inset-bottom, 0px)); background: #F6F4EF; color: #171A1F; }
.sc-guided__stage-top { display: flex; align-items: center; gap: 12px; min-width: 0; padding: env(safe-area-inset-top, 0px) max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-left, 0px)); background: #FFFFFF; box-shadow: 0 1px 0 #171A1F0D, 0 6px 18px -16px #171A1F40; position: relative; z-index: 1; }
.sc-guided__stage-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 28px; border-radius: 9px; background: #171A1F; }
.sc-guided__stage-mark svg { width: 26px; height: 16px; }
.sc-guided__stage-mark .back { fill: rgba(174, 187, 255, .2); }
.sc-guided__stage-mark .layer { fill: #8AA1FF; }
.sc-guided__stage-mark .core { fill: #FFFFFF; }
.sc-guided__stage-part { min-width: 0; margin: 0; overflow: hidden; color: #6A6F78; font: 500 .8rem/1.3 var(--sc-font-body, Inter, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.sc-guided__stage-part strong { color: #171A1F; font-weight: 650; }
.sc-guided__stage-skip { flex: none; min-height: 44px; margin-left: auto; padding: 0 4px 0 12px; border: 0; background: transparent; color: #636A75; font: 550 .8rem/1 var(--sc-font-body, Inter, sans-serif); cursor: pointer; }
.sc-guided__stage .sc-guided__live { position: relative; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; overflow: hidden; background: #F6F4EF; animation: none; }
.sc-guided__stage .sc-guided__live iframe[data-leaving] { position: absolute; inset: 0; pointer-events: none; }
/* Entry: only the middle grows out of the dark card; around it the reflection stays until covered. */
.sc-guided__stage.is-entering { background: transparent; }
.sc-guided__stage-veil { position: absolute; inset: 0; z-index: 1; background: #171A1F; opacity: 0; pointer-events: none; }
.sc-guided__stage-pill { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #F3F1EC; color: #2346C4; font: 600 .68rem/1.2 var(--sc-font-body, Inter, sans-serif); white-space: nowrap; }
.sc-guided__stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E5BFF; }
.sc-guided__stage .sc-guided__live iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sc-guided .sc-guided__stage-bottom { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; padding: 0 max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-left, 0px)); background: #FFFFFF; box-shadow: 0 -1px 0 #171A1F0D, 0 -6px 18px -16px #171A1F40; position: relative; z-index: 1; }
.sc-guided .sc-guided__stage-bottom .sc-guided__demo-status { display: -webkit-box; flex: 1; min-width: 0; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: #3E6550; font: 500 .8rem/1.4 var(--sc-font-body, Inter, sans-serif); text-align: center; }
.sc-guided .sc-guided__stage-bottom > .sc-onboarding__continue { min-width: 0; line-height: 1.2; text-align: center; }
.sc-guided .sc-guided__stage-bottom > .sc-onboarding__back { flex: none; }
.sc-guided .sc-guided__stage-bottom > .sc-onboarding__continue { flex: none; margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .sc-guided__stage-skip:hover { color: #171A1F; } }
@media (max-width: 480px) {
  .sc-guided__stage { grid-template-rows: calc(52px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(68px + env(safe-area-inset-bottom, 0px)); }
  .sc-guided__stage-part > span { display: none; }
  .sc-guided__stage-pill-more { display: none; }
  .sc-guided .sc-guided__stage-bottom { gap: 10px; }
  /* No room between the buttons: the status floats as a calm pill just above the bar. */
  .sc-guided .sc-guided__stage-bottom .sc-guided__demo-status { position: absolute; left: 50%; bottom: calc(100% + 10px); flex: none; width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 16px; background: #EDF6EF; box-shadow: 0 8px 22px -14px #171A1F59; font-size: .76rem; transform: translateX(-50%); pointer-events: none; }
  .sc-guided .sc-guided__stage-bottom .sc-guided__demo-status:empty { display: none; }
  .sc-guided .sc-guided__stage-bottom > .sc-onboarding__continue { padding-inline: 14px; }
}
.sc-guided__result-line { margin: 24px 0 0; padding: 17px 20px; border-radius: 17px; background: #EEF1FF; color: #243A86; font: 550 .95rem/1.55 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__answers { display: grid; gap: 11px; margin-top: 26px; }
.sc-guided__answer { display: flex; gap: 13px; align-items: center; width: 100%; min-height: 68px; padding: 15px 17px; text-align: left; border: 1px solid #E4E1DA; border-radius: 15px; background: #FAF9F5; color: #171A1F; font: 500 .92rem/1.55 var(--sc-font-body, Inter, sans-serif); cursor: pointer; }
.sc-guided__answer[aria-pressed="true"] { border-color: #2E5BFF; background: #EEF1FF; }
.sc-guided__letter { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 9px; background: #EEECE6; color: #616773; font-size: .72rem; font-weight: 650; }
.sc-guided__answer.is-correct { border-color: #279A64; background: #EFF8F3; }
.sc-guided__answer.is-incorrect { border-color: #DE9A26; background: #FFF7E9; }
.sc-guided__answer:disabled { cursor: default; opacity: 1; }
.sc-guided__feedback { margin-top: 21px; padding: 19px 21px; border-radius: 17px; background: #EFF8F3; color: #215D40; font: 450 .9rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__feedback.is-review { background: #FFF5E4; color: #79521D; }
.sc-guided__feedback strong { font-weight: 650; }
.sc-guided__feedback p { margin: 8px 0 0; }
.sc-guided__feedback button { margin-top: 12px; color: inherit; }
.sc-guided__source-toggle { margin-top: 20px; min-height: 44px; padding: 5px 0; border: 0; background: transparent; color: #4A5886; text-align: left; font: 550 .8rem/1.5 var(--sc-font-body, Inter, sans-serif); cursor: pointer; }
.sc-guided__source { margin: 8px 0 0; padding: 14px 18px; border-left: 2px solid #8AA1FF; color: #58616D; font: 400 .86rem/1.65 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__outcomes { list-style: none; margin: 25px 0 0; padding: 0; }
.sc-guided__outcomes li { display: flex; align-items: flex-start; gap: 14px; padding: 19px 0; border-bottom: 1px solid #E5E2DC; }
.sc-guided__outcomes li:last-child { border: 0; }
.sc-guided__outcomes strong { font: 650 .96rem/1.45 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__outcomes p { margin: 7px 0 0; color: #636A75; font: 400 .87rem/1.65 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__error { margin: 18px 0 0; color: #B94035; font: 500 .85rem/1.5 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sc-guided button:focus-visible, .sc-guided textarea:focus-visible { outline: 2px solid #2E5BFF; outline-offset: 4px; }
/* The start after signup mirrors welcome screen 1: light text on the same dark
   canvas, so the introduction starts and ends alike. Two classes on the host,
   because onboarding.html loads this sheet before components.css. */
.sc-onboarding-host.sc-guided--welcome {
  background:
    radial-gradient(circle at 50% 40%, rgba(75, 104, 230, .25), transparent 34%),
    linear-gradient(155deg, #151820 4%, #19203A 60%, #223A80 120%) #151820;
  color: #FFFFFF;
}
.sc-onboarding-host.sc-guided--welcome::before, .sc-onboarding-host.sc-guided--welcome::after { opacity: 0; }
.sc-guided--welcome .sc-onboarding { color: #FFFFFF; }
.sc-guided--welcome .sc-onboarding__top { border-bottom-color: rgba(255, 255, 255, .08); background: transparent; }
.sc-guided--welcome .sc-onboarding__brand { color: #FFFFFF; }
.sc-guided--welcome .sc-onboarding__brand-mark .back { fill: rgba(255, 255, 255, .14); }
.sc-guided--welcome .sc-onboarding__brand-mark .layer { fill: #8AA1FF; }
.sc-guided--welcome .sc-onboarding__brand-mark .core { fill: #FFFFFF; }
.sc-guided .sc-guided__welcome { position: relative; inset: auto; display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: center; min-height: calc(100dvh - 160px); padding: 45px 24px; box-sizing: border-box; background: transparent; color: #FFFFFF; }
.sc-guided__welcome .sc-onboarding__brand-lockup { position: static; transform: none; }
.sc-guided__welcome .sc-onboarding__brand-lockup > strong > span, .sc-guided__welcome .sc-onboarding__brand-reveal-mark { opacity: 1; transform: none; }
.sc-guided__welcome .sc-onboarding__brand-reveal-mark .core { fill: #FFFFFF; }
.sc-guided__welcome-copy { width: min(100%, 600px); text-align: center; animation: sc-guided-enter 400ms ease-out; }
.sc-guided__welcome-copy .sc-onboarding__kicker { color: #AEBBFF; }
.sc-guided__welcome-copy h1 { margin: 15px 0 14px; color: #FFFFFF; font: 650 clamp(2rem, 4vw, 3.2rem)/1.05 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.035em; outline: none; }
.sc-guided__welcome-copy .sc-onboarding__description { margin-inline: auto; color: rgba(255, 255, 255, .72); }
.sc-guided__welcome-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 0; margin: 24px 0 0; }
.sc-guided__welcome-chips li { padding: 10px 15px; border-radius: 999px; background: #FFFFFF0D; color: #DBE2FF; font: 500 .78rem/1.5 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__welcome-copy .sc-guided__wish { text-align: left; color: #EBEDFA; }
.sc-guided__welcome-copy .sc-guided__wish > span { color: #AEBBFF; }
.sc-guided__welcome-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: min(100%, 350px); margin: 32px auto 0; }
.sc-guided__welcome-actions .sc-onboarding__back { color: #C7CBD7; }
.sc-guided__welcome-copy .sc-guided__error { color: #FFB2A8; }
/* Context questions after signup (B2C): one column with the old dark
   "Jouw route ontstaat" panel above the question. */
.sc-guided .sc-onboarding__live-preview--mobile { display: none; }
.sc-guided--context .sc-onboarding__context { display: none; }
.sc-guided--context .sc-onboarding__layout { display: block; }
.sc-guided--context .sc-onboarding__panel { max-width: 780px; margin-inline: auto; }
.sc-guided--context .sc-onboarding__progress { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; margin: 0 auto 22px; }
.sc-guided--context .sc-onboarding__live-preview--mobile { display: block; max-width: 620px; margin: 0 auto 30px; padding: 16px; background: var(--sc-ink, #171A1F); box-shadow: 0 20px 42px -32px rgba(23, 26, 31, .8); }
.sc-guided__ctx-options { margin-top: 24px; }
.sc-guided__ctx-fields { margin-top: 22px; }
.sc-guided__ctx-fields .sc-onboarding__field > label { color: var(--sc-ink-soft, #4B515B); font: 700 .72rem/1.35 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__optional { color: var(--sc-ink-soft, #4B5563); font-weight: 500; }
.sc-guided__ctx-fields .sc-date-control, .sc-guided__ctx-fields .sc-date-trigger { width: 100%; }
.sc-guided .sc-guided__minutes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-guided__minutes button[aria-pressed="true"] { border-color: var(--sc-accent, #2E5BFF); background: var(--sc-accent-soft, #EEF1FF); color: var(--sc-accent-deep, #1E3FCC); }
@media (max-width: 560px) {
  .sc-guided--context .sc-onboarding__live-preview--mobile { margin-bottom: 24px; padding: 14px; }
  .sc-guided__ctx-options .sc-onboarding__option { min-height: 0; padding: 14px 15px; }
  /* The one way forward stays in reach below the longer questions; a focused
     field scrolls clear of it (the host is the scroll container). */
  .sc-guided--context { scroll-padding-bottom: 120px; }
  .sc-guided--context .sc-guided__actions { position: sticky; bottom: 0; z-index: 2; margin: 26px -20px 0; padding: 20px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--sc-surface, #FFFFFF) 32%); }
}
/* Terugkoppeling (REFLECT): the problem cards of "Herkenbaar?" come together
   in the StudyCore mark and leave as one calm first step. Rest state is the
   base style; [data-motion="play"] only adds entrance keyframes (fill: backwards),
   so reduced motion and re-renders show the finished picture. */
.sc-guided { --reflect-ease: cubic-bezier(.2, .8, .2, 1); }
.sc-guided-reflect { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 6%, 44px); min-height: 208px; margin: 2px 0 30px; padding: 26px clamp(16px, 4.5%, 30px); border-radius: var(--sc-r-card, 22px); background: radial-gradient(circle at 50% 50%, rgba(46, 91, 255, .09), transparent 40%), #F0EDE6; overflow: hidden; }
.sc-guided-reflect__orbit { position: absolute; z-index: -1; left: 50%; top: 50%; width: 44%; height: 92%; border: 1px solid rgba(46, 91, 255, .14); border-radius: 50%; transform: translate(-50%, -50%) rotate(14deg); pointer-events: none; }
.sc-guided-reflect__orbit--two { width: 28%; height: 128%; border-color: rgba(46, 91, 255, .1); transform: translate(-50%, -50%) rotate(-26deg); }
.sc-guided-reflect__lines { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sc-guided-reflect__line { fill: none; stroke: var(--sc-accent, #2E5BFF); stroke-opacity: .5; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sc-guided-reflect__line--out { stroke-opacity: .85; }
.sc-guided-reflect__cards { position: relative; z-index: 1; display: grid; gap: 9px; justify-items: start; margin: 0; padding: 0; list-style: none; }
.sc-guided-reflect__slot { max-width: 172px; min-width: 0; }
/* Own card: the look of the "Herkenbaar?" cards, without depending on that scene's classes. */
.sc-guided-reflect__card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 15px; background: var(--sc-surface, #FFFFFF); color: var(--sc-ink, #171A1F); box-shadow: 0 1px 2px rgba(23, 26, 31, .06), 0 16px 30px -20px rgba(23, 26, 31, .5); transform: rotate(-1.5deg); }
.sc-guided-reflect__slot:nth-child(even) .sc-guided-reflect__card { transform: rotate(2deg); }
.sc-guided-reflect__card small { color: var(--sc-accent-deep, #1F44CC); font: 750 .6rem/1 var(--sc-font-body, Inter, sans-serif); letter-spacing: .055em; text-transform: uppercase; }
.sc-guided-reflect__card strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; font: 650 clamp(.76rem, 1.4vw, .88rem)/1.18 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.015em; }
.sc-guided-reflect__hub { position: relative; z-index: 1; width: 64px; height: 64px; }
.sc-guided-reflect__hub::before { content: ""; position: absolute; z-index: -1; inset: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 91, 255, .5) 0, rgba(46, 91, 255, .16) 42%, rgba(46, 91, 255, 0) 70%); opacity: .5; pointer-events: none; }
.sc-guided-reflect__mark { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 18px; background: var(--sc-inverse, #171A1F); box-shadow: 0 0 0 1px rgba(46, 91, 255, .32), 0 18px 32px -18px rgba(23, 26, 31, .75); }
.sc-guided-reflect__mark svg { width: 44px; height: 27px; }
.sc-guided-reflect__mark .back { fill: rgba(174, 187, 255, .2); }
.sc-guided-reflect__mark .layer { fill: #8AA1FF; }
.sc-guided-reflect__mark .core { fill: #FFFFFF; }
.sc-guided-reflect__slot--step { position: relative; z-index: 1; justify-self: end; width: 100%; }
.sc-guided-reflect__step { display: grid; gap: 6px; padding: 14px 15px; border-radius: 16px; background: var(--sc-inverse, #171A1F); color: #FFFFFF; box-shadow: 0 1px 2px rgba(23, 26, 31, .12), 0 20px 34px -20px rgba(23, 26, 31, .8); }
.sc-guided-reflect__step strong { display: block; font: 650 .9rem/1.2 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.01em; }
.sc-guided-reflect__step > span { color: #BFC4D0; font: 500 .7rem/1.35 var(--sc-font-body, Inter, sans-serif); }
.sc-guided-reflect__step-check, .sc-guided-reflect__check { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--sc-green, #279A64); color: #FFFFFF; }
.sc-guided-reflect__step-check { display: inline-grid; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; }
.sc-guided-reflect__step-check svg { width: 13px; height: 13px; }
.sc-guided-reflect__list { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
.sc-guided-reflect__list li { display: flex; align-items: flex-start; gap: 13px; color: var(--sc-ink, #171A1F); font: 450 .95rem/1.5 var(--sc-font-body, Inter, sans-serif); overflow-wrap: anywhere; }
.sc-guided-reflect__check { width: 24px; height: 24px; margin-top: -1px; }
.sc-guided-reflect__check svg { width: 16px; height: 16px; }
/* 1: cards float in · 2: lines draw · 3: the mark lights up once · 4: the step
   arrives along the outgoing line · 5: the rows follow. Then everything is still. */
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__card { animation: sc-reflect-card 380ms var(--reflect-ease) calc(var(--i) * 70ms) backwards; }
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__line { animation: sc-reflect-draw 500ms var(--reflect-ease) 450ms backwards; }
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__line--out { animation: sc-reflect-draw 300ms var(--reflect-ease) 1150ms backwards; }
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__mark { animation: sc-reflect-pulse 300ms var(--reflect-ease) 950ms backwards; }
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__hub::before { animation: sc-reflect-glow 300ms var(--reflect-ease) 950ms backwards; }
.sc-guided-reflect[data-motion="play"] .sc-guided-reflect__step { animation: sc-reflect-step 350ms var(--reflect-ease) 1250ms backwards; }
/* On the host: the check list is a sibling of the panel, not a descendant. */
.sc-guided-reflect[data-motion="play"] ~ .sc-guided-reflect__list li { animation: sc-reflect-row 300ms var(--reflect-ease) calc(1600ms + var(--i) * 90ms) backwards; }
@keyframes sc-reflect-card { from { opacity: 0; transform: translate(-10px, 6px) rotate(-3deg); } }
@keyframes sc-reflect-draw { from { stroke-dashoffset: 1; } }
@keyframes sc-reflect-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }
@keyframes sc-reflect-glow { 0% { opacity: .4; } 45% { opacity: .9; } 100% { opacity: .5; } }
@keyframes sc-reflect-step { from { opacity: 0; transform: translateX(-12px); } }
@keyframes sc-reflect-row { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 420px) {
  .sc-guided-reflect { column-gap: 16px; min-height: 184px; padding: 20px 14px; }
  .sc-guided-reflect__cards { gap: 7px; }
  .sc-guided-reflect__card { padding: 10px 11px; border-radius: 13px; }
  .sc-guided-reflect__card small { font-size: .6rem; }
  .sc-guided-reflect__card strong { font-size: .76rem; }
  .sc-guided-reflect__hub { width: 52px; height: 52px; }
  .sc-guided-reflect__hub::before { inset: -20px; }
  .sc-guided-reflect__mark { border-radius: 15px; }
  .sc-guided-reflect__mark svg { width: 36px; height: 22px; }
  .sc-guided-reflect__step { padding: 11px 12px; border-radius: 14px; }
  .sc-guided-reflect__step strong { font-size: .8rem; }
  .sc-guided-reflect__step > span { font-size: .64rem; }
  .sc-guided-reflect__list li { font-size: .9rem; }
  /* Four or five cards become a loose pile so the panel stays compact. */
  .sc-guided-reflect:is([data-count="4"], [data-count="5"]) .sc-guided-reflect__cards { gap: 0; }
  .sc-guided-reflect:is([data-count="4"], [data-count="5"]) .sc-guided-reflect__slot + .sc-guided-reflect__slot { margin-top: -4px; }
  .sc-guided-reflect:is([data-count="4"], [data-count="5"]) .sc-guided-reflect__card strong { -webkit-line-clamp: 2; }
}
@keyframes sc-guided-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .sc-guided .sc-onboarding__context { display: none; }
  .sc-guided .sc-onboarding__layout { display: block; }
  .sc-guided__choice { font-size: .87rem; padding: 14px; }
  .sc-guided__answer { font-size: .88rem; padding: 13px; }
  .sc-guided__actions { gap: 8px; }
  .sc-guided__actions > .sc-onboarding__continue { min-width: 0; padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-guided, .sc-guided::before, .sc-guided::after, .sc-guided *, .sc-guided *::before, .sc-guided *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ================= Entry: the worries fly into "Jouw eerste stap" ================= */
.sc-guided-flight { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
/* Same look as the Herkenbaar? cards (v2-problem scene), solid instead of frosted. */
.sc-guided-flight__card { position: absolute; display: grid; gap: 5px; box-sizing: border-box; padding: 14px 16px; border-radius: 15px; background: #FFFFFF; color: var(--sc-ink, #171A1F); box-shadow: 0 1px 2px rgba(23, 26, 31, .06), 0 22px 46px -30px rgba(23, 26, 31, .56); transform-origin: 50% 50%; }
.sc-guided-flight__card small { color: var(--sc-accent-deep, #1F44CC); font: 750 .57rem/1 var(--sc-font-body, Inter, sans-serif); letter-spacing: .055em; text-transform: uppercase; }
.sc-guided-flight__card strong { font: 650 clamp(.76rem, 1.5vw, .9rem)/1.18 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.015em; }
.sc-guided-flight__caption { position: absolute; box-sizing: border-box; width: max-content; margin: 0; color: #4B515B; font: 500 .95rem/1.45 var(--sc-font-body, Inter, sans-serif); text-align: center; }
.sc-guided-reflect__step { position: relative; box-sizing: border-box; }
.sc-guided-reflect__step-next { position: absolute; inset: 0; display: grid; align-content: center; gap: 2px; padding: 8px 15px; }
.sc-guided-reflect__step-next small { color: #AEBBFF; font: 750 .55rem/1.1 var(--sc-font-body, Inter, sans-serif); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sc-guided-reflect__step-next strong { overflow: hidden; font: 650 .84rem/1.2 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.sc-guided-reflect__step-next > span { overflow: hidden; color: #BFC4D0; font: 500 .66rem/1.3 var(--sc-font-body, Inter, sans-serif); text-overflow: ellipsis; white-space: nowrap; }

/* ================= Dark surfaces around the example environment =================
   Arrival ("Welkom in StudyCore.") and wrap-up ("Voorbeeld afgerond"): the same
   canvas and faint orbits as welcome screen 1 and the start after signup. */
.sc-guided__dark { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; overflow: hidden auto; box-sizing: border-box; padding: max(28px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); color: #FFFFFF;
  background: radial-gradient(circle at 50% 40%, rgba(75, 104, 230, .25), transparent 34%), linear-gradient(155deg, #151820 4%, #19203A 60%, #223A80 120%) #151820; }
.sc-guided__dark[data-leaving] { pointer-events: none; }
.sc-guided__dark-ring { position: absolute; left: 50%; top: 46%; border: 1px solid rgba(174, 187, 255, .2); border-radius: 50%; pointer-events: none; }
.sc-guided__dark-ring--one { width: min(86vw, 760px); height: min(48vw, 420px); transform: translate(-50%, -50%) rotate(-11deg); }
.sc-guided__dark-ring--two { width: min(62vw, 540px); height: min(80vw, 640px); transform: translate(-50%, -50%) rotate(26deg); opacity: .55; }
.sc-guided__dark-card { position: relative; z-index: 1; width: min(100%, 580px); text-align: center; }
.sc-guided__dark-mark { display: inline-grid; place-items: center; width: 64px; height: 46px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.sc-guided__dark-mark svg { width: 44px; height: 28px; }
.sc-guided__dark-mark .back { fill: rgba(255, 255, 255, .14); }
.sc-guided__dark-mark .layer { fill: #8AA1FF; }
.sc-guided__dark-mark .core { fill: #FFFFFF; }
.sc-guided .sc-guided__dark .sc-onboarding__kicker { margin: 22px 0 0; color: #AEBBFF; }
.sc-guided__dark h2 { margin: 12px 0 0; color: #FFFFFF; font: 650 clamp(1.9rem, 4.6vw, 3.1rem)/1.05 var(--sc-font-display, 'Bricolage Grotesque', sans-serif); letter-spacing: -.035em; outline: none; text-wrap: balance; }
.sc-guided__dark-copy { max-width: 38ch; margin: 14px auto 0; color: rgba(255, 255, 255, .74); font: 450 1rem/1.55 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__dark-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.sc-guided__dark-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #DBE2FF; font: 600 .8rem/1.2 var(--sc-font-body, Inter, sans-serif); }
.sc-guided__dark-pill[data-status="current"] { background: rgba(46, 91, 255, .24); color: #FFFFFF; }
.sc-guided__dark-dot { width: 7px; height: 7px; border-radius: 50%; background: #7D97FF; animation: sc-guided-dot-breathe 2.4s ease-in-out infinite; }
@keyframes sc-guided-dot-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.78); } }
.sc-guided__dark-pill-mark { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; background: #279A64; color: #FFFFFF; }
.sc-guided__dark-pill-mark svg { width: 15px; height: 15px; }
.sc-guided__dark-pill[data-status="completed"] { background: rgba(39, 154, 100, .2); color: #C9F0DA; }
.sc-guided__dark-pill[data-status="skipped"] { color: #B4B9C6; }
.sc-guided__dark-pill[data-status="skipped"] .sc-guided__dark-pill-mark { background: rgba(255, 255, 255, .14); color: #D5D8E0; }
.sc-guided__dark-pill-note { font-weight: 450; }
.sc-guided__dark-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.sc-guided__dark-actions .sc-onboarding__continue { min-width: 170px; }
.sc-guided .sc-guided__dark-actions .sc-onboarding__back { color: #C7CBD7; }
@media (max-width: 480px) {
  .sc-guided__dark-pill { padding: 7px 12px; font-size: .76rem; }
  .sc-guided__dark-actions { flex-direction: column-reverse; align-items: stretch; }
}