* { font-family: "Cantarell", sans-serif; }

html { background: #10131c; color-scheme: dark; }
body { isolation: isolate; box-sizing: border-box; min-height: 100vh; margin: 0; background: #10131c; color: darkgrey; border: 15px solid #00b388; }
.page-content { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 30px); min-height: calc(100dvh - 30px); padding: 1rem; text-align: center; }
.page-header { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 1rem; margin-bottom: 1rem; }
.page-brand { flex-shrink: 0; }
.page-brand img { display: block; width: 40px; height: 40px; }
.page-menu { position: relative; margin-left: auto; }
.page-menu summary { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid darkgrey; border-radius: 0.25rem; cursor: pointer; list-style: none; }
.page-menu summary::-webkit-details-marker { display: none; }
.page-menu summary:focus-visible, .page-navigation a:focus-visible { outline: 2px solid #00b388; outline-offset: 3px; }
.page-menu-icon, .page-menu-icon::before, .page-menu-icon::after { display: block; width: 1.25rem; height: 2px; background: currentColor; }
.page-menu-icon { position: relative; transition: background 0.15s ease; }
.page-menu-icon::before, .page-menu-icon::after { position: absolute; left: 0; content: ""; transition: transform 0.15s ease; }
.page-menu-icon::before { transform: translateY(-0.4rem); }
.page-menu-icon::after { transform: translateY(0.4rem); }
.page-menu[open] .page-menu-icon { background: transparent; }
.page-menu[open] .page-menu-icon::before { transform: rotate(45deg); }
.page-menu[open] .page-menu-icon::after { transform: rotate(-45deg); }
.page-navigation { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 5; display: flex; min-width: 13rem; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 0.75rem; border: 1px solid #333842; border-radius: 0.25rem; background: #10131c; box-shadow: 0 0.5rem 1rem #0008; text-align: left; }
.page-navigation a { padding: 0.5rem 0.75rem; text-decoration: none; }
.page-navigation a:hover { background: #262a33; }
.page-navigation form { margin: 0; }
.page-navigation form button { width: 100%; padding: 0.5rem 0.75rem; border: 0; background: transparent; color: inherit; text-align: left; }
.page-navigation form button:hover { background: #262a33; }
.page-body { width: min(100%, 60rem); margin-block: auto; }
a { color: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"] { text-align: center; width: 300px; }
textarea, input, button { background: #10131c; color: inherit; border: 1px solid darkgrey; }
textarea { text-align: center; }
button, input[type="button"], input[type="submit"] { padding: 5px; background: #00b388; color: black; cursor: pointer; }
main { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; }
.site-header a, .site-header span { margin-left: 1rem; }
.site-header .brand { font-weight: bold; font-size: 1.25rem; margin-left: 0; text-decoration: none; }
.site-header nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.5rem; }
form.inline { display: inline; margin-left: 1rem; }
.field { margin-bottom: 0.75rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input { padding: 0.4rem; max-width: 360px; }
input[type="checkbox"] { width: auto; }
fieldset { margin-bottom: 1rem; border: 1px solid #ccc; }
.flash { padding: 0.75rem; margin-bottom: 1rem; border-radius: 4px; }
.flash.alert, .errors { border: 1px solid #9b1c1c; padding: 0.75rem; }
.flash.notice { border: 1px solid #1e6b34; }
.pending-message { font-size: 1.25rem; font-weight: 600; }
.engagement-error { color: #ff6b6b; font-weight: 700; }
#engagement-response { box-sizing: border-box; width: 100%; padding: 0.75rem; resize: vertical; background: #10131c; color: inherit; border: 1px solid darkgrey; font: inherit; }
.admin-table { border-collapse: collapse; width: 100%; }
.admin-table-container { overflow-x: auto; }
.admin-table th, .admin-table td { border-bottom: 1px solid #ddd; padding: 0.5rem; text-align: left; }
.audit-background { position: fixed; inset: 15px; z-index: 0; overflow: hidden; padding: 1rem 2rem; color: #262a33; font-size: 0.9rem; line-height: 1.6; pointer-events: none; user-select: none; }
.audit-background p { margin: 0 0 0.5rem; }
.site-header, main { position: relative; z-index: 1; }
textarea { width: 95%; height: 150px; }
.stage-intro .spinner, .stage-loading .spinner { display: block; width: 2.5rem; height: 2.5rem; margin: 1.5rem 0; border: 4px solid #262a33; border-top-color: #00b388; border-radius: 50%; animation: spin 0.8s linear infinite; }
.stage-intro .spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stage-intro .spinner, .stage-loading .spinner { animation: none; border-color: #00b388; } }
.stage-one { display: flex; flex-direction: column; width: min(100%, 48rem); height: 100%; text-align: center; }
.page-body > .stage-one { margin-inline: auto; }
.stage-one [data-stage-step][hidden] { display: none; }
.experience-details { margin: 0.75rem 0 0; padding: 0; list-style: none; color: #aeb2bb; font-size: 0.85rem; line-height: 1.5; }
.experience-details-note { margin: 0.25rem 0 0.75rem; color: #777d88; font-size: 0.75rem; }
.stage-loading { display: grid; justify-items: center; align-content: center; min-height: 12rem; }
.stage-loading[hidden] { display: none; }
.stage-one:fullscreen { box-sizing: border-box; width: 100vw; height: 100vh; padding: 1rem; justify-content: center; background: #10131c; }
.stage-one:fullscreen [data-stage-step]:not([hidden]):has(.stage-video:not([hidden])) { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.stage-one:fullscreen .stage-video { flex: 1; min-height: 0; width: 100%; }
.stage-one:fullscreen .stage-video iframe { height: 100%; aspect-ratio: auto; }
.stage-video iframe { background: black; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.stage-video:fullscreen { box-sizing: border-box; width: 100vw; height: 100vh; margin: 0; background: black; }
.stage-video:fullscreen iframe { width: 100%; height: 100%; aspect-ratio: auto; }
.stage-content { flex: 1; min-height: 0; overflow-y: auto; align-content: safe center; }
.stage-one .spinner { margin: 1.5rem auto; }
.stage-completion { position: fixed; inset: 15px; z-index: 3; display: grid; place-items: center; padding: 1rem; background: #10131c; text-align: center; }
.stage-completion[hidden] { display: none; }
.stage-completion p, .stage-completion .spinner { margin: 0; }
.stage-one .field input, .stage-one textarea { box-sizing: border-box; display: block; margin-inline: auto; }
body:has(.stage-one) .site-header { position: absolute; inset: 15px 15px auto; }
body:has(.stage-one) main { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: calc(100vh - 30px); height: calc(100dvh - 30px); margin: 0; padding: 1rem 1rem 0; }
.stage-reading-text { text-align: left; line-height: 1.6; margin-bottom: 1.5rem; }
.stage-video { width: min(100%, 48rem); margin-inline: auto; }
.stage-intro-title { font-size: 2em; font-weight: bold; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.camera-setup { background: #10131c; border: 1px solid #00b388; border-radius: 0.5rem; padding: 1rem; margin-block: 1rem; }
.camera-preview { display: block; width: min(100%, 20rem); max-height: 15rem; margin: 1rem auto; border-radius: 0.5rem; transform: scaleX(-1); }
.camera-preview[hidden] { display: none; }
.camera-setup progress { display: block; width: min(100%, 20rem); margin: 1rem auto; accent-color: #00b388; }
.camera-setup progress[hidden] { display: none; }
.gaze-status { position: fixed; bottom: max(15px, env(safe-area-inset-bottom)); left: 50%; z-index: 2; box-sizing: border-box; width: min(calc(100% - 2rem), 48rem); margin: 0; padding: 0.75rem; transform: translateX(-50%); border: 1px solid #00b388; border-radius: 0.25rem; background: #10131c; font-size: 0.9rem; }
.stage-check-in, .stage-check-in-notice { background: #10131c; box-sizing: border-box; width: min(100%, 48rem); margin: 1rem auto; padding: 1rem; border: 1px solid #00b388; border-radius: 0.5rem; text-align: left; }
.self-assessment { max-width: 48rem; margin-inline: auto; line-height: 1.6; }
.assessment-remember { display: flex; align-items: center; gap: 0.5rem; }
.self-assessment input { accent-color: #00b388; }
.assessment-progress { position: sticky; top: 0; z-index: 2; background: #10131c; padding-block: 0.75rem; border-bottom: 1px solid #00b388; margin-bottom: 1.5rem; }
.assessment-progress progress { display: block; width: 100%; accent-color: #00b388; }
.assessment-question { padding: 0.75rem 1rem; margin: 0 0 1.25rem; border-color: darkgrey; min-width: 0; }
.assessment-question legend { padding-inline: 0.25rem; }
.assessment-question label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding-inline: 0.75rem; cursor: pointer; }
.assessment-question label:has(input:checked) { color: #00b388; }
.self-assessment :focus-visible { outline: 2px solid #00b388; outline-offset: 3px; }
.assessment-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1.5rem; }
.assessment-actions button { min-height: 44px; padding: 0.5rem 1rem; }
.assessment-actions .assessment-reset { background: transparent; color: inherit; }
.assessment-results { padding: 1rem; border: 1px solid #00b388; }
.assessment-results h2 { margin-top: 0; }
.assessment-profile dt { font-weight: bold; }
.assessment-profile dd { margin: 0 0 0.75rem; }
.assessment-profile meter { width: min(75%, 24rem); accent-color: #00b388; }
.assessment-profile meter::-webkit-meter-optimum-value { background: #00b388; }
.assessment-profile meter::-moz-meter-bar { background: #00b388; }
.site-header .public-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #00b388; }
.site-header .public-brand span { margin: 0; }
.public-brand img, .public-logo { display: block; max-width: 100%; height: auto; }
.home-img { padding: 20px; margin: 0 auto; text-align: center; }
.public-page { max-width: 44rem; margin: 3rem auto; line-height: 1.7; overflow-wrap: anywhere; }
.public-page h1 { color: #00b388; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.15; margin-block: 0.5rem 1.5rem; }
.public-page h2 { font-size: 1.25rem; }
.public-eyebrow { color: #00b388; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }
.public-lead { font-size: 1.2rem; }
.contact-form .field input, .contact-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0.4rem; font: inherit; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.public-logo { margin-bottom: 2rem; }
.public-section { border-top: 1px solid #333842; margin-top: 2rem; padding-top: 1rem; }
.public-actions { text-align: center; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-block: 2rem; }
.public-button { display: inline-block; padding: 0.65rem 1rem; background: #00b388; color: #10131c; text-decoration: none; }
.public-page a:focus-visible, .site-header:has(.public-brand) a:focus-visible { outline: 2px solid #00b388; outline-offset: 4px; }
@media (max-width: 760px) {
	  .site-header:has(.public-brand) { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0.75rem 1rem; }
	    .site-header:has(.public-brand) nav { justify-content: flex-start; gap: 0.75rem 1rem; }
	      .site-header:has(.public-brand) nav a { margin: 0; }
	        .public-page { margin-block: 2rem; }
	}
	@media (max-width: 560px) {
		  body:has(.self-assessment) .site-header { padding: 0.75rem 0.5rem; }
		    body:has(.self-assessment) .site-header nav { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
		      body:has(.self-assessment) .site-header a { margin-left: 0.5rem; }
	      }
audio { display: none; }
.habits-feedback { font-style: italic; }