:root {
	--ses-blue: #1b4fa8;
	--ses-blue-dark: #0b2f6a;
	--ses-blue-soft: #eef3ff;
	--ses-indigo: #163a8a;
	--ses-bg: #f6f8fc;          /* main-area background */
	--ses-text: #102044;
	--ses-muted: #6b768e;
	--ses-border-subtle: #d6ddf1;
	--ses-pill: #e2e7fb;
	--ses-btn-blue: #0052ff;
	--ses-btn-blue-hover: #003fcb;
	--ses-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, sans-serif;
}

* {
	box-sizing: border-box;
}

/* Big section/page headers (e.g. dialog titles) */
.pageHeader {
	font-family: var(--ses-font);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
  }
  
  /* Tiny header text in the top bar (e.g. app name / greeting) */
  .appHeader {
	font-family: var(--ses-font);
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
  }
  
  /* Medium titles inside cards / widgets */
  .pageTitle {
	font-family: var(--ses-font);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
  }
  
  /* Labels next to inputs */
  .guiLabel {
	font-family: var(--ses-font);
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
  }
  
  /* Normal body copy in dialogs / pages */
  .pageText {
	font-family: var(--ses-font);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
  }
  
  /* Text inside <input>, <select>, etc. */
  .inputBox {
	font-family: var(--ses-font);
	font-size: 14px;
  }
  
  /* Bold labels / emphasis inline */
  .labelText {
	font-family: var(--ses-font);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
  }

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	color: var(--ses-text);
	background: #ffffff;           /* 🔹 page background is white */
}

a {
	color: inherit;
	text-decoration: none;
}

/* ========== SHELL LAYOUT ========== */

.ses-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 🔹 only the main band gets the soft background color */
.ses-shell-main {
	flex: 1 0 auto;
	padding: 16px 0 32px;
	background: var(--ses-bg);
}

.ses-shell-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ========== HEADER ========== */

header.ses-header {
	background: linear-gradient(90deg, var(--ses-blue) 0%, #5a86e9 60%, #7ba0f2 100%);
	color: #ffffff;
	box-shadow: 0 3px 8px rgba(3, 16, 54, 0.35);
}

/* Make top header and nav more mobile-friendly */
.ses-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8px;
  box-sizing: border-box;
}

/* Primary nav: allow wrapping and avoid overflow */
.ses-nav {
  display: flex;
  flex-wrap: wrap;              /* <-- key: wrap onto multiple lines on small screens */
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 4px 8px 6px;
  box-sizing: border-box;
  max-width: 100%;
}

/* Nav items: shrink a bit on small screens */
.ses-nav-item {
  padding: 4px 10px;
  font-size: 0.9rem;
  white-space: normal;          /* allow wrapping within each item if needed */
  text-align: center;
}

/* Optional: tighten layout on very small devices */
@media (max-width: 480px) {
  .ses-nav-item {
    flex: 1 1 45%;              /* two columns of buttons */
  }
}

.ses-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 6px;
}

.ses-brand {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
}

.ses-header-meta {
	font-size: 12px;
	opacity: 0.9;
	white-space: nowrap;
}

.ses-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	white-space: nowrap;
}

.ses-pill {
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.6);
	background: rgba(8, 40, 110, 0.4);
	padding: 4px 10px;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ses-pill-icon {
	font-size: 12px;
}

.ses-header-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 999px;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.ses-header-link:hover {
	background: rgba(0,0,0,0.12);
	opacity: 1;
}

.ses-header-link span.icon {
	font-size: 14px;
}

/* Nav row */
nav.ses-nav {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	border-top: 1px solid rgba(255,255,255,0.15);
	padding: 6px 0 8px;
	font-size: 13px;
}

.ses-nav-item {
	position: relative;
	padding: 4px 2px;
	opacity: 0.9;
}

.ses-nav-item:hover {
	opacity: 1;
}

.ses-nav-item--active {
	font-weight: 600;
}

.ses-nav-item--active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	border-radius: 999px;
	background: #ffffff;
}

/* ========== HERO + LANDING CONTENT ========== */

.ses-landing {
	max-width: 960px;
	margin: 24px auto 0;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 18px 46px rgba(10, 30, 80, 0.26);
	overflow: hidden;
}

/* HERO */
.ses-hero {
	position: relative;
	height: 260px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Replace with your camera + skyline image */
	background-image: url("/path/to/your/camera-skyline-hero.jpg");
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.ses-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 25% 15%, rgba(255,255,255,0.16), transparent 52%),
		linear-gradient(to bottom, rgba(5,20,60,0.45), rgba(0,10,40,0.9));
	mix-blend-mode: multiply;
}

.ses-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.ses-hero-title {
	font-size: clamp(32px, 4vw, 40px);
	font-weight: 750;
	letter-spacing: 0.04em;
	margin: 0 0 8px 0;
}

.ses-hero-subtitle {
	font-size: clamp(16px, 2.3vw, 20px);
	font-weight: 500;
}

/* BODY BELOW HERO */
.ses-body {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 24px;
	padding: 26px 30px 30px;
	background: linear-gradient(to bottom, #ffffff 0%, var(--ses-blue-soft) 90%);
}

.ses-eyes-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--ses-blue-dark);
	margin: 0 0 10px;
}

.ses-eyes-body {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ses-muted);
	margin-bottom: 12px;
}

.ses-bullets {
	margin: 0 0 18px 0;
	padding-left: 18px;
	font-size: 13px;
	color: var(--ses-text);
}

.ses-bullets li {
	margin-bottom: 6px;
}

.ses-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.ses-btn {
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 22px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.18s ease;
	white-space: nowrap;
}

.ses-btn-primary {
	background: var(--ses-btn-blue);
	color: #ffffff;
	box-shadow: 0 9px 20px rgba(0, 82, 255, 0.32);
}

.ses-btn-primary:hover {
	background: var(--ses-btn-blue-hover);
	box-shadow: 0 11px 26px rgba(0, 70, 220, 0.4);
	transform: translateY(-1px);
}

.ses-btn-ghost {
	background: #ffffff;
	color: var(--ses-btn-blue);
	border-color: rgba(0, 82, 255, 0.36);
}

.ses-btn-ghost:hover {
	background: #f6f8ff;
	border-color: rgba(0, 82, 255, 0.65);
}

.ses-btn-icon {
	font-size: 18px;
	margin-right: 6px;
	margin-top: -1px;
}

/* RIGHT COLUMN: COUNTER */
.ses-counter-card {
	background: #f3f6ff;
	border-radius: 18px;
	padding: 18px 20px 20px;
	text-align: center;
	color: var(--ses-text);
	box-shadow: 0 6px 14px rgba(10, 30, 90, 0.12);
	border: 1px solid rgba(203,211,236,0.8);
}

.ses-counter-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ses-muted);
	margin-bottom: 10px;
}

.ses-counter-value {
	font-size: 40px;
	font-weight: 750;
	color: var(--ses-indigo);
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}

.ses-counter-sub {
	font-size: 13px;
	color: var(--ses-muted);
	line-height: 1.6;
}

.ses-footnote {
	margin-top: 16px;
	font-size: 12px;
	color: var(--ses-muted);
	text-align: left;
}

/* ========== FOOTER ========== */

footer.ses-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--ses-border-subtle);
	background: #ffffff;   /* footer stays white */
	margin-top: 0px;
}

.ses-footer-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 10px 16px 14px;
	font-size: 11px;
	color: var(--ses-muted);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 18px;
}

.ses-footer-links a {
	margin-right: 10px;
	color: var(--ses-muted);
}

.ses-footer-links a:hover {
	color: var(--ses-blue-dark);
	text-decoration: underline;
}

.field-error {
	display: block;
	color: #CC0000;
	font-size: 11px;
	margin-top: 2px;
}

.input-error {
	border-color: #CC0000 !important;
}

.password-wrapper {
	position: relative;
}

.password-wrapper input {
	padding-right: 2.5rem; /* room for the eye icon */
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 0.9rem;
	color: #666;
	user-select: none;
}

.password-toggle:hover {
	color: #000;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 860px) {
	.ses-header-top {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.ses-header-meta {
		order: 3;
	}
}

@media (max-width: 768px) {
	.ses-landing {
		margin: 20px 16px 0;
		border-radius: 16px;
	}
	.ses-body {
		grid-template-columns: 1fr;
		padding: 20px 18px 24px;
	}
	.ses-counter-card {
		margin-top: 6px;
	}
	.ses-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.ses-btn {
		width: 100%;
		justify-content: center;
	}
	nav.ses-nav {
		overflow-x: auto;
	}
}

@media (max-width: 480px) {
	.ses-hero {
		height: 220px;
		padding: 18px;
	}
	.ses-header-top {
		align-items: flex-start;
	}
}