:root {
	--ks-blue: #0B63E5;
	--ks-blue-dark: #064CB2;
	--ks-green: #43B02A;
	--ks-heading: #071B3A;
	--ks-body: #24364B;
	--ks-muted: #617187;
	--ks-bg: #F4F8FC;
	--ks-border: #E6EDF5;
	--ks-white: #FFFFFF;
	--ks-shadow: 0 22px 60px rgba(7, 27, 58, 0.12);
	--ks-soft-shadow: 0 12px 34px rgba(7, 27, 58, 0.08);
}

html {
	scroll-behavior: smooth;
}

body.kinstatus-landing {
	margin: 0;
	background: var(--ks-white);
	color: var(--ks-body);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

.kinstatus-landing * {
	box-sizing: border-box;
}

.kinstatus-landing a {
	color: inherit;
	text-decoration: none;
}

.ks-container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

.ks-skip-link {
	position: absolute;
	left: 16px;
	top: -80px;
	z-index: 20;
	padding: 10px 14px;
	background: var(--ks-heading);
	color: var(--ks-white);
	border-radius: 8px;
}

.ks-skip-link:focus {
	top: 16px;
}

.ks-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid rgba(230, 237, 245, 0.8);
	backdrop-filter: blur(18px);
}

.ks-header__inner {
	min-height: 78px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
}

.ks-brand {
	display: inline-flex;
	align-items: center;
	min-width: 192.3px;
	font-weight: 800;
	color: var(--ks-heading);
	white-space: nowrap;
}

.ks-brand__logo {
	display: block;
	width: auto;
	height: 44px;
	max-width: 192px;
	object-fit: contain;
}

.ks-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2.2vw, 30px);
	font-weight: 700;
	font-size: 15px;
	color: var(--ks-heading);
}

.ks-nav a {
	padding: 10px 0;
}

.ks-nav a:hover,
.ks-nav a:focus {
	color: var(--ks-blue);
}

.ks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 22px;
	border-radius: 10px;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid transparent;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ks-button:hover,
.ks-button:focus {
	transform: translateY(-1px);
}

.ks-button--primary {
	background: linear-gradient(135deg, var(--ks-blue), var(--ks-blue-dark));
	color: var(--ks-white);
	box-shadow: 0 12px 24px rgba(11, 99, 229, 0.26);
}

.ks-button--secondary {
	background: var(--ks-white);
	color: var(--ks-heading);
	border-color: rgba(7, 27, 58, 0.22);
	box-shadow: 0 10px 24px rgba(7, 27, 58, 0.06);
}

.ks-button__icon {
	width: 22px;
	height: 22px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

.ks-button--secondary .ks-button__icon {
	background: var(--ks-bg);
	color: var(--ks-blue);
}

.ks-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 74% 18%, rgba(67, 176, 42, 0.14), transparent 28%),
		radial-gradient(circle at 15% 8%, rgba(11, 99, 229, 0.13), transparent 32%),
		linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
}

.ks-hero__grid {
	min-height: 640px;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
	gap: 56px;
	align-items: center;
	padding: 46px 0 58px;
}

.ks-eyebrow {
	margin: 0 0 12px;
	color: var(--ks-blue);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ks-hero h1,
.ks-section h2,
.ks-cta h2 {
	margin: 0;
	color: var(--ks-heading);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0;
}

.ks-hero h1 {
	max-width: 650px;
	font-size: clamp(48px, 6vw, 76px);
}

.ks-hero__lead {
	max-width: 690px;
	margin: 24px 0 0;
	color: var(--ks-body);
	font-size: 19px;
	line-height: 1.65;
}

.ks-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 30px 0 0;
}

.ks-trust-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 46px 0 0;
	padding: 0;
	list-style: none;
}

.ks-trust-list li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 12px;
	align-items: start;
}

.ks-trust-list strong {
	color: var(--ks-heading);
	font-size: 13px;
	line-height: 1.25;
}

.ks-trust-list span:not(.ks-line-icon) {
	grid-column: 2;
	color: var(--ks-muted);
	font-size: 12px;
	line-height: 1.45;
}

.ks-line-icon,
.ks-mini-icon {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
}

.ks-line-icon {
	width: 34px;
	height: 34px;
	color: var(--ks-heading);
}

.ks-line-icon::before,
.ks-line-icon::after,
.ks-mini-icon::before,
.ks-mini-icon::after {
	content: "";
	position: absolute;
	display: block;
}

.ks-line-icon--shield::before {
	inset: 3px 6px 4px;
	border: 2px solid currentColor;
	border-radius: 12px 12px 14px 14px;
	transform: perspective(30px) rotateX(-8deg);
}

.ks-line-icon--shield::after {
	left: 12px;
	top: 14px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--ks-blue);
	border-bottom: 2px solid var(--ks-blue);
	transform: rotate(-45deg);
}

.ks-line-icon--lock::before {
	left: 7px;
	right: 7px;
	bottom: 4px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 5px;
}

.ks-line-icon--lock::after {
	left: 11px;
	top: 3px;
	width: 12px;
	height: 15px;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
}

.ks-line-icon--bell::before {
	left: 8px;
	top: 6px;
	width: 18px;
	height: 21px;
	border: 2px solid currentColor;
	border-radius: 14px 14px 7px 7px;
}

.ks-line-icon--bell::after {
	left: 12px;
	bottom: 3px;
	width: 10px;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
}

.ks-line-icon--heart::before {
	left: 7px;
	top: 7px;
	width: 20px;
	height: 20px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 0 0 8px 0;
	transform: rotate(45deg);
}

.ks-line-icon--heart::after {
	left: 7px;
	top: 7px;
	width: 20px;
	height: 20px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	border-radius: 13px 0 0 0;
}

.ks-line-icon--people::before {
	left: 4px;
	top: 7px;
	width: 9px;
	height: 9px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-shadow: 17px 0 0 -2px var(--ks-white), 17px 0 0 0 currentColor;
}

.ks-line-icon--people::after {
	left: 2px;
	bottom: 5px;
	width: 30px;
	height: 13px;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
}

.ks-line-icon--check::before {
	inset: 4px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.ks-line-icon--check::after {
	left: 11px;
	top: 15px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--ks-blue);
	border-bottom: 2px solid var(--ks-blue);
	transform: rotate(-45deg);
}

.ks-line-icon--home::before {
	left: 5px;
	top: 14px;
	width: 24px;
	height: 16px;
	border: 2px solid currentColor;
	border-top: 0;
	border-radius: 0 0 4px 4px;
}

.ks-line-icon--home::after {
	left: 6px;
	top: 5px;
	width: 21px;
	height: 21px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	border-radius: 3px 0 0 0;
}

.ks-hero__visual {
	position: relative;
	min-height: 560px;
	display: grid;
	place-items: center;
}

.ks-hero__visual::before {
	content: "";
	position: absolute;
	inset: 22px -18px 42px;
	background: linear-gradient(135deg, rgba(221, 241, 255, 0.95), rgba(232, 247, 230, 0.78));
	border-radius: 36px;
	box-shadow: inset 0 0 0 1px rgba(230, 237, 245, 0.8);
}

.ks-family-visual {
	position: absolute;
	inset: 0;
}

.ks-family-card {
	position: absolute;
	z-index: 1;
	display: grid;
	gap: 2px;
	min-width: 188px;
	padding: 18px 18px 18px 62px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(230, 237, 245, 0.9);
	border-radius: 18px;
	box-shadow: var(--ks-soft-shadow);
	backdrop-filter: blur(12px);
}

.ks-family-card span {
	position: absolute;
	left: 18px;
	top: 18px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ks-blue), var(--ks-green));
}

.ks-family-card strong {
	color: var(--ks-heading);
	font-size: 14px;
}

.ks-family-card small {
	color: var(--ks-muted);
}

.ks-family-card--one {
	left: 8px;
	top: 82px;
}

.ks-family-card--two {
	right: 0;
	bottom: 96px;
	background: rgba(7, 27, 58, 0.88);
	color: var(--ks-white);
}

.ks-family-card--two strong,
.ks-family-card--two small {
	color: var(--ks-white);
}

.ks-phone {
	position: relative;
	z-index: 2;
	width: 272px;
	min-height: 552px;
	padding: 14px;
	background: #10141B;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 38px;
	box-shadow: 0 28px 65px rgba(7, 27, 58, 0.34);
}

.ks-phone__speaker {
	position: absolute;
	top: 18px;
	left: 50%;
	z-index: 4;
	width: 86px;
	height: 22px;
	background: #10141B;
	border-radius: 0 0 14px 14px;
	transform: translateX(-50%);
}

.ks-phone__screen {
	min-height: 522px;
	overflow: hidden;
	padding: 22px 16px 16px;
	background: #FBFCFE;
	border-radius: 29px;
}

.ks-statusbar,
.ks-tabbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--ks-heading);
	font-size: 10px;
	font-weight: 800;
}

.ks-app-head {
	margin: 22px 0 16px;
}

.ks-app-head h2 {
	margin: 0;
	font-size: 20px;
	color: var(--ks-heading);
	line-height: 1.2;
}

.ks-app-head p {
	margin: 2px 0 0;
	color: var(--ks-muted);
	font-size: 11px;
}

.ks-ok-card {
	display: grid;
	grid-template-columns: 52px 1fr 32px;
	gap: 12px;
	align-items: center;
	padding: 13px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(7, 27, 58, 0.08);
}

.ks-avatar {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #F1E6DA, #C8DBE7);
	color: var(--ks-heading);
	font-weight: 900;
}

.ks-ok-card strong,
.ks-ok-card span,
.ks-ok-card small {
	display: block;
}

.ks-ok-card strong {
	color: var(--ks-heading);
	font-size: 15px;
	line-height: 1.2;
}

.ks-ok-card span {
	color: var(--ks-green);
	font-weight: 900;
	font-size: 12px;
}

.ks-ok-card small {
	color: var(--ks-muted);
	font-size: 10px;
}

.ks-check {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ks-green);
}

.ks-check::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 8px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--ks-white);
	border-bottom: 2px solid var(--ks-white);
	transform: rotate(-45deg);
}

.ks-info-list {
	display: grid;
	gap: 10px;
	margin-top: 15px;
}

.ks-info-row {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 11px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 13px;
}

.ks-info-row strong,
.ks-info-row small {
	display: block;
}

.ks-info-row strong {
	color: var(--ks-heading);
	font-size: 11px;
}

.ks-info-row small {
	color: var(--ks-muted);
	font-size: 10px;
}

.ks-info-row b {
	color: var(--ks-heading);
	font-size: 11px;
}

.ks-mini-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ks-bg);
	color: var(--ks-blue);
}

.ks-mini-icon--pin::before {
	left: 12px;
	top: 7px;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.ks-mini-icon--pin::after {
	left: 15px;
	top: 10px;
	width: 4px;
	height: 4px;
	background: currentColor;
	border-radius: 50%;
}

.ks-mini-icon--battery::before {
	left: 9px;
	top: 10px;
	width: 14px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 3px;
}

.ks-mini-icon--battery::after {
	left: 12px;
	top: 15px;
	width: 8px;
	height: 10px;
	background: var(--ks-green);
	border-radius: 2px;
}

.ks-mini-icon--clock::before {
	inset: 8px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.ks-mini-icon--clock::after {
	left: 17px;
	top: 12px;
	width: 6px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.ks-mini-icon--check::before {
	left: 10px;
	top: 16px;
	width: 12px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.ks-mini-icon--bell::before {
	left: 10px;
	top: 8px;
	width: 14px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 11px 11px 6px 6px;
}

.ks-mini-icon--bell::after {
	left: 13px;
	bottom: 7px;
	width: 8px;
	height: 2px;
	background: currentColor;
}

.ks-tabbar {
	margin-top: 22px;
	padding: 12px 18px 2px;
}

.ks-tabbar span {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: #D9E4F1;
}

.ks-tabbar .is-active {
	background: var(--ks-blue);
}

.ks-section {
	padding: 74px 0;
}

.ks-section__head {
	max-width: 720px;
	margin: 0 auto 38px;
	text-align: center;
}

.ks-section__head--left {
	margin-left: 0;
	text-align: left;
}

.ks-section h2,
.ks-cta h2 {
	font-size: clamp(32px, 4vw, 44px);
}

.ks-section__copy {
	max-width: 560px;
	margin: 18px 0 0;
	font-size: 18px;
	color: var(--ks-body);
}

.ks-how {
	background: var(--ks-white);
}

.ks-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.ks-step,
.ks-feature-cards article,
.ks-audience-grid article {
	position: relative;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 18px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-step {
	padding: 30px;
}

.ks-step__icon {
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	background: var(--ks-bg);
	border-radius: 50%;
}

.ks-step__number {
	position: absolute;
	right: 24px;
	top: 28px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: var(--ks-green);
	color: var(--ks-white);
	border-radius: 999px;
	font-weight: 900;
	font-size: 13px;
}

.ks-step h3,
.ks-feature-cards h3,
.ks-audience-grid h3 {
	margin: 0 0 8px;
	color: var(--ks-heading);
	font-size: 19px;
	line-height: 1.25;
}

.ks-step p,
.ks-feature-cards p,
.ks-audience-grid p,
.ks-privacy p,
.ks-cta p {
	margin: 0;
	color: var(--ks-body);
}

.ks-features,
.ks-audience {
	background: var(--ks-bg);
}

.ks-feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 52px;
	align-items: center;
}

.ks-feature-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ks-feature-cards article {
	padding: 22px;
}

.ks-feature-cards article:last-child {
	grid-column: 1 / -1;
}

.ks-feature-cards .ks-mini-icon {
	margin-bottom: 14px;
}

.ks-mini-map {
	position: relative;
	min-height: 330px;
	margin-top: 36px;
}

.ks-map-phone {
	position: absolute;
	left: 50%;
	top: 18px;
	width: 180px;
	height: 300px;
	padding: 22px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
		linear-gradient(135deg, #DDEBF7 25%, transparent 25%) 0 0 / 46px 46px,
		linear-gradient(45deg, #E7F4E5 25%, transparent 25%) 0 0 / 54px 54px;
	border: 8px solid #111722;
	border-radius: 28px;
	box-shadow: var(--ks-shadow);
	transform: translateX(-50%);
}

.ks-map-phone strong,
.ks-map-phone span {
	position: relative;
	z-index: 1;
	display: block;
}

.ks-map-phone strong {
	color: var(--ks-heading);
	font-size: 13px;
}

.ks-map-phone span {
	color: var(--ks-muted);
	font-size: 11px;
}

.ks-map-pin {
	position: absolute;
	left: 50%;
	top: 55%;
	width: 68px;
	height: 68px;
	background: rgba(67, 176, 42, 0.16);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.ks-map-pin::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 28px;
	background: var(--ks-blue);
	border: 6px solid var(--ks-white);
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 8px 22px rgba(11, 99, 229, 0.24);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ks-orbit {
	position: absolute;
	width: 72px;
	height: 72px;
	border: 3px solid rgba(67, 176, 42, 0.4);
	border-radius: 50%;
	background: var(--ks-white);
	box-shadow: var(--ks-soft-shadow);
}

.ks-orbit::before {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E8F2FF, #F3F8EE);
}

.ks-orbit--one {
	left: 7%;
	top: 38px;
}

.ks-orbit--two {
	right: 8%;
	top: 72px;
}

.ks-orbit--three {
	left: 18%;
	bottom: 28px;
}

.ks-privacy {
	background: linear-gradient(135deg, #FFFFFF, #F5FAFF);
}

.ks-privacy__card,
.ks-cta__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
	padding: 38px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 22px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-privacy__icon {
	width: 76px;
	height: 76px;
	background: var(--ks-bg);
	border-radius: 50%;
}

.ks-privacy p {
	max-width: 780px;
	margin-top: 14px;
	font-size: 18px;
}

.ks-audience-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.ks-audience-grid article {
	padding: 28px;
}

.ks-audience-grid .ks-line-icon {
	margin-bottom: 20px;
}

.ks-cta {
	background: var(--ks-white);
}

.ks-cta__card {
	grid-template-columns: 1fr auto;
	background:
		radial-gradient(circle at 95% 10%, rgba(67, 176, 42, 0.15), transparent 28%),
		linear-gradient(135deg, #F7FBFF, #FFFFFF);
}

.ks-cta p {
	max-width: 720px;
	margin-top: 12px;
	font-size: 18px;
}

.ks-footer {
	padding: 38px 0;
	background: #071B3A;
	color: rgba(255, 255, 255, 0.76);
}

.ks-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: start;
}

.ks-footer__disclaimer {
	max-width: 720px;
	margin: 22px 0 8px;
}

.ks-footer__copyright {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.58);
}

.ks-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 14px 22px;
	font-weight: 700;
}

.ks-footer__links a:hover,
.ks-footer__links a:focus {
	color: var(--ks-white);
}

@media (max-width: 1040px) {
	.ks-header__inner {
		grid-template-columns: 1fr auto;
		gap: 18px;
		padding: 14px 0;
	}

	.ks-nav {
		grid-column: 1 / -1;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 2px;
	}

	.ks-hero__grid,
	.ks-feature-grid {
		grid-template-columns: 1fr;
	}

	.ks-hero__grid {
		padding-top: 54px;
	}

	.ks-hero__visual {
		min-height: 520px;
	}

	.ks-trust-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.ks-container {
		width: min(100% - 28px, 1180px);
	}

	.ks-header {
		position: static;
	}

	.ks-header__inner {
		grid-template-columns: 1fr;
	}

	.ks-header__cta {
		width: 100%;
	}

	.ks-nav {
		gap: 18px;
		font-size: 14px;
	}

	.ks-hero h1 {
		font-size: 44px;
	}

	.ks-hero__lead {
		font-size: 17px;
	}

	.ks-actions,
	.ks-actions .ks-button,
	.ks-cta__card .ks-button {
		width: 100%;
	}

	.ks-trust-list,
	.ks-steps,
	.ks-feature-cards,
	.ks-audience-grid,
	.ks-privacy__card,
	.ks-cta__card,
	.ks-footer__inner {
		grid-template-columns: 1fr;
	}

	.ks-section {
		padding: 58px 0;
	}

	.ks-step,
	.ks-feature-cards article,
	.ks-audience-grid article,
	.ks-privacy__card,
	.ks-cta__card {
		border-radius: 16px;
		padding: 24px;
	}

	.ks-hero__visual {
		min-height: 500px;
	}

	.ks-hero__visual::before {
		inset: 30px -6px;
	}

	.ks-family-card {
		display: none;
	}

	.ks-phone {
		width: 250px;
		min-height: 520px;
	}

	.ks-phone__screen {
		min-height: 490px;
	}

	.ks-footer__links {
		justify-content: flex-start;
	}
}

@media (max-width: 420px) {
	.ks-hero h1 {
		font-size: 38px;
	}

	.ks-phone {
		width: 230px;
		padding: 11px;
		border-radius: 32px;
	}

	.ks-phone__screen {
		padding: 20px 12px 14px;
		border-radius: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ks-button {
		transition: none;
	}
}

/* KinStatus v1.0.1 refinements: shared pages + mobile header fixes. */
.kinstatus-landing .ks-button--primary,
.kinstatus-landing .ks-button--primary:visited,
.kinstatus-landing .ks-button--primary:hover,
.kinstatus-landing .ks-button--primary:focus {
	color: var(--ks-white) !important;
}

.kinstatus-landing .ks-button--secondary,
.kinstatus-landing .ks-button--secondary:visited {
	color: var(--ks-heading) !important;
}

.ks-nav a,
.ks-footer__links a {
	cursor: pointer;
}

.ks-page-main {
	background:
		radial-gradient(circle at 12% 4%, rgba(11, 99, 229, 0.11), transparent 34%),
		radial-gradient(circle at 88% 0%, rgba(67, 176, 42, 0.12), transparent 28%),
		linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%);
}

.ks-page-hero {
	padding: 74px 0 36px;
}

.ks-page-hero h1 {
	max-width: 880px;
	margin: 0;
	color: var(--ks-heading);
	font-size: clamp(42px, 6vw, 70px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.ks-page-section {
	padding: 0 0 90px;
}

.ks-page-card {
	max-width: 960px;
	padding: clamp(28px, 5vw, 58px);
	background: var(--ks-white);
	border: 1px solid rgba(230, 237, 245, 0.95);
	border-radius: 26px;
	box-shadow: var(--ks-soft-shadow);
	color: var(--ks-body);
	font-size: 18px;
	line-height: 1.75;
}

body.page-id-51 .ks-page-card {
	max-width: 1180px;
	width: 100%;
	padding: clamp(32px, 4vw, 56px);
}

body:not(.home):not(.page-id-51) .ks-page-card {
	max-width: 1100px;
	width: 100%;
}

body:not(.home):not(.page-id-51) .ks-page-card > * {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

.ks-page-card h1,
.ks-page-card h2,
.ks-page-card h3,
.ks-page-card h4 {
	color: var(--ks-heading);
	line-height: 1.2;
}

.ks-page-card h2 {
	margin-top: 2em;
	font-size: 28px;
}

.ks-page-card p,
.ks-page-card ul,
.ks-page-card ol {
	margin-bottom: 1.2em;
}

.ks-page-card a {
	color: var(--ks-blue);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.ks-header {
		position: static;
	}

	.ks-header__inner {
		grid-template-columns: 1fr;
		gap: 14px;
		min-height: 0;
		padding: 18px 0 20px;
	}

	.ks-brand {
		justify-content: center;
	}

	.ks-brand__logo {
		height: 40px;
	}

	.ks-nav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 0;
		overflow: visible;
		font-size: 13px;
		line-height: 1.2;
	}

	.ks-nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 9px 10px;
		border: 1px solid rgba(230, 237, 245, 0.95);
		border-radius: 999px;
		background: rgba(244, 248, 252, 0.9);
		text-align: center;
	}

	.ks-nav a:last-child {
		grid-column: 1 / -1;
	}

	.ks-header__cta {
		width: 100%;
		min-height: 48px;
	}

	.ks-hero__grid {
		min-height: auto;
		gap: 34px;
		padding: 48px 0 54px;
	}

	.ks-hero h1 {
		font-size: clamp(40px, 11vw, 58px);
		letter-spacing: -0.04em;
	}

	.ks-hero__lead {
		font-size: 18px;
		line-height: 1.65;
	}

	.ks-actions {
		gap: 12px;
	}

	.ks-actions .ks-button {
		min-height: 54px;
	}

	.ks-trust-list {
		margin-top: 32px;
	}
}

@media (max-width: 560px) {
	.ks-container {
		width: min(100% - 28px, 1180px);
	}

	.ks-brand {
		justify-content: flex-start;
	}

	.ks-nav {
		grid-template-columns: 1fr 1fr;
	}

	.ks-nav a {
		font-size: 12px;
		min-height: 40px;
		padding: 8px 9px;
	}

	.ks-header__cta {
		font-size: 15px;
	}

	.ks-hero h1 {
		font-size: 40px;
	}

	.ks-eyebrow {
		font-size: 12px;
		letter-spacing: 0.07em;
	}

	.ks-hero__visual {
		min-height: 430px;
	}

	.ks-phone {
		width: 218px;
		min-height: 480px;
	}

	.ks-phone__screen {
		min-height: 452px;
	}

	.ks-page-hero {
		padding: 48px 0 26px;
	}

	.ks-page-hero h1 {
		font-size: 40px;
	}

.ks-page-card {
	padding: 24px;
	border-radius: 18px;
	font-size: 16px;
}
}

.ks-pricing {
	display: grid;
	gap: 52px;
}

.ks-pricing-hero {
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
}

.ks-pricing-hero h2,
.ks-pricing-section h2,
.ks-pricing-cta h2 {
	margin: 0;
	color: var(--ks-heading);
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.08;
	letter-spacing: 0;
}

.ks-pricing-hero p,
.ks-pricing-section__lead,
.ks-pricing-cta p {
	margin: 18px auto 0;
	color: var(--ks-body);
	font-size: 18px;
	line-height: 1.7;
}

.ks-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.ks-price-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 30px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 24px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-price-card--featured {
	border-color: rgba(11, 99, 229, 0.32);
	box-shadow: var(--ks-shadow);
}

.ks-price-card--recommended {
	position: relative;
	border-color: rgba(67, 176, 42, 0.46);
	box-shadow: 0 24px 70px rgba(67, 176, 42, 0.16);
}

.ks-price-card--muted {
	background: #F8FBFF;
	box-shadow: none;
}

.ks-plan-badge {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(11, 99, 229, 0.1);
	color: var(--ks-blue-dark);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ks-price-card--recommended .ks-plan-badge {
	background: rgba(67, 176, 42, 0.14);
	color: #237014;
}

.ks-price-card__head {
	display: grid;
	gap: 8px;
}

.ks-price-card h3 {
	margin: 0;
	color: var(--ks-heading);
	font-size: 26px;
	line-height: 1.2;
}

.ks-price-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	color: var(--ks-heading);
	font-weight: 900;
}

.ks-price-card__price strong {
	font-size: 44px;
	line-height: 1;
}

.ks-price-card__price span {
	color: var(--ks-muted);
	font-size: 16px;
	font-weight: 800;
}

.ks-price-card__sub {
	margin: 0;
	color: var(--ks-muted);
	font-weight: 800;
}

.ks-price-list,
.ks-included-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-price-list li,
.ks-included-list li {
	position: relative;
	padding-left: 30px;
	color: var(--ks-body);
}

.ks-price-list li::before,
.ks-included-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(67, 176, 42, 0.14);
	box-shadow: inset 0 0 0 2px var(--ks-green);
}

.ks-price-list li::after,
.ks-included-list li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: calc(0.42em + 4px);
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--ks-green);
	border-bottom: 2px solid var(--ks-green);
	transform: rotate(-45deg);
}

.ks-price-card__note {
	margin: auto 0 0;
	padding-top: 4px;
	color: var(--ks-muted);
	font-size: 14px;
	line-height: 1.55;
}

.ks-button--muted {
	background: var(--ks-bg);
	color: var(--ks-heading);
	border-color: rgba(7, 27, 58, 0.14);
}

.ks-pricing-section {
	display: grid;
	gap: 22px;
}

.ks-pricing-notice,
.ks-free-basic {
	padding: 24px;
	background: #F8FBFF;
	border: 1px solid var(--ks-border);
	border-radius: 20px;
}

.ks-pricing-notice p,
.ks-free-basic p {
	margin: 0;
	color: var(--ks-body);
}

.ks-free-basic {
	display: grid;
	gap: 16px;
}

.ks-free-basic h2 {
	margin: 0;
	color: var(--ks-heading);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.12;
}

.ks-included-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
}

.ks-pricing-faq {
	display: grid;
	gap: 14px;
}

.ks-pricing-faq details {
	padding: 20px 22px;
	background: #F8FBFF;
	border: 1px solid var(--ks-border);
	border-radius: 18px;
}

.ks-pricing-faq summary {
	cursor: pointer;
	color: var(--ks-heading);
	font-weight: 900;
}

.ks-pricing-faq p {
	margin: 12px 0 0;
	color: var(--ks-body);
}

.ks-pricing-cta {
	display: grid;
	gap: 22px;
	justify-items: start;
	padding: 34px;
	background: linear-gradient(135deg, rgba(11, 99, 229, 0.08), rgba(67, 176, 42, 0.09));
	border: 1px solid var(--ks-border);
	border-radius: 24px;
}

.ks-pricing-cta p {
	margin-left: 0;
}


/* KinStatus v1.0.2: real page navigation + mobile hamburger menu. */
.ks-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid rgba(230, 237, 245, 0.95);
	border-radius: 999px;
	background: rgba(244, 248, 252, 0.95);
	color: var(--ks-heading);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

@media (max-width: 760px) {
	.ks-pricing {
		gap: 38px;
	}

	.ks-pricing-grid,
	.ks-included-list {
		grid-template-columns: 1fr;
	}

	.ks-price-card,
	.ks-pricing-cta {
		padding: 24px;
		border-radius: 18px;
	}

	.ks-price-card__price strong {
		font-size: 38px;
	}
}

@media (min-width: 761px) and (max-width: 1100px) {
	.ks-pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ks-menu-toggle__bars {
	display: grid;
	gap: 4px;
	width: 18px;
}

.ks-menu-toggle__bars span {
	display: block;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.ks-menu-toggle__label {
	font-size: 14px;
}

@media (min-width: 901px) {
	.ks-menu-toggle {
		display: none !important;
	}
}

@media (max-width: 900px) {
	.ks-header {
		position: static;
	}

	.ks-header__inner {
		grid-template-columns: 1fr auto;
		gap: 14px;
		min-height: 0;
		padding: 18px 0;
	}

	.ks-brand {
		justify-content: flex-start;
	}

	.ks-brand__logo {
		height: 42px;
	}

	.ks-menu-toggle {
		display: inline-flex;
		justify-self: end;
	}

	.ks-nav {
		display: none;
		grid-column: 1 / -1;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 4px 0 0;
		overflow: visible;
		font-size: 14px;
		line-height: 1.2;
	}

	.ks-header.is-menu-open .ks-nav {
		display: grid;
	}

	.ks-nav a,
	.ks-nav a:last-child {
		grid-column: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 44px;
		padding: 11px 14px;
		border: 1px solid rgba(230, 237, 245, 0.95);
		border-radius: 14px;
		background: rgba(244, 248, 252, 0.96);
		text-align: left;
		color: var(--ks-heading);
	}

	.ks-header__cta {
		display: none;
		grid-column: 1 / -1;
		width: 100%;
		min-height: 50px;
		font-size: 15px;
	}

	.ks-header.is-menu-open .ks-header__cta {
		display: inline-flex;
	}
}

@media (max-width: 560px) {
	.ks-header__inner {
		padding: 16px 0;
	}

	.ks-brand {
		min-width: 169.5px;
	}

	.ks-brand__logo {
		height: 40px;
	}

	.ks-menu-toggle {
		min-height: 42px;
		padding: 9px 12px;
	}

	.ks-menu-toggle__label {
		display: none;
	}
}

/* Hero floating cards - phone overlap correction (2026-08-15).
   .ks-hero__visual is a fixed ~551px grid track; the centred 272px .ks-phone
   leaves only ~139px of gutter per side, so the 188px .ks-family-card cannot
   clear it and the phone (z-index 2) painted over the card (z-index 1).
   Wide desktop: shift both cards outward into the container margin so only the
   blank card edge tucks behind the phone - icon and labels stay fully visible.
   Narrow two-column desktop (just over 1040px up to 1280px): .ks-container is calc(100% - 40px)
   there, so only 20px of side margin exists and no outward shift fits; the
   decorative cards are hidden in that range instead.
   <=1040px (single column) and <=760px (already hidden) are unchanged. */
@media (min-width: 1040.02px) and (max-width: 1279.98px) {
	.ks-family-card {
		display: none;
	}
}

@media (min-width: 1280px) {
	.ks-family-card--one {
		left: -32px;
	}

	.ks-family-card--two {
		right: -30px;
	}
}

/* Google Play badge placements (2026-08-18) */

.ks-hero__playstore,
.ks-cta__playstore,
.ks-how__playstore a,
.ks-footer__playstore a {
	display: inline-block;
	line-height: 0;
}

.ks-hero .ks-actions {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.ks-hero__microcopy {
	margin: 0;
	color: var(--ks-muted);
	font-size: 14px;
}

.ks-how__playstore {
	margin-top: 32px;
	text-align: center;
}

.ks-how__playstore p {
	margin: 12px 0 0;
	color: var(--ks-muted);
	font-size: 15px;
}

.ks-cta__secondary-contact {
	margin-top: 12px;
	color: var(--ks-muted);
	font-size: 14px;
}

.ks-cta__secondary-contact a {
	text-decoration: underline;
}

.ks-footer__playstore {
	margin-top: 16px;
}

.ks-price-card__secondary-contact {
	margin: 8px 0 0;
	color: var(--ks-muted);
	font-size: 13px;
}

.ks-price-card__secondary-contact a {
	text-decoration: underline;
}

/* Mobile sticky Google Play CTA bar - shown only up to the theme's 760px breakpoint */

.ks-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: var(--ks-white);
	border-top: 1px solid var(--ks-border);
	box-shadow: 0 -8px 24px rgba(7, 27, 58, 0.12);
}

.ks-sticky-cta[hidden] {
	display: none;
}

.ks-sticky-cta__close {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--ks-muted);
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}

@media (min-width: 761px) {
	.ks-sticky-cta {
		display: none !important;
	}
}

/* ===================================================================
   Sales pass (2026-08-19): hero CTA + real screenshots, Attention
   section, distance section, trust promises, pricing/CTA polish.
   =================================================================== */

/* --- Buttons ------------------------------------------------------ */

.ks-button--lg {
	min-height: 56px;
	padding: 16px 30px;
	font-size: 17px;
}

/* --- Hero: CTA stack, store row, QR ------------------------------- */

.ks-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 30px;
}

.ks-hero__microcopy {
	margin: 0;
	color: var(--ks-muted);
	font-size: 14px;
	font-weight: 600;
}

.ks-hero__store {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.ks-hero__playstore {
	display: inline-block;
	line-height: 0;
}

.ks-hero__qr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 14px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-hero__qr img {
	display: block;
	width: 96px;
	height: 96px;
}

.ks-hero__qr span {
	max-width: 120px;
	color: var(--ks-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

/* --- Hero: real two-phone story ----------------------------------- */

.ks-hero__phones {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 26px;
	width: 100%;
}

.ks-hero__phone {
	position: relative;
	flex: 0 1 auto;
	width: min(232px, 42%);
	margin: 0;
	text-align: center;
}

.ks-hero__phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid var(--ks-border);
	box-shadow: var(--ks-shadow);
}

.ks-hero__phone figcaption {
	margin-top: 14px;
	color: var(--ks-muted);
	font-size: 14px;
	line-height: 1.4;
}

.ks-hero__phone figcaption strong {
	display: block;
	color: var(--ks-heading);
	font-size: 15px;
	font-weight: 800;
}

.ks-hero__phone--caregiver {
	margin-top: 46px;
}

.ks-hero__phones-link {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ks-green);
	box-shadow: 0 10px 22px rgba(67, 176, 42, 0.34);
	z-index: 2;
}

.ks-hero__phones-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 7px;
	margin: -5px 0 0 -7px;
	border-left: 2.5px solid #FFFFFF;
	border-bottom: 2.5px solid #FFFFFF;
	transform: rotate(-45deg);
}

/* --- Attention / missed check-in ---------------------------------- */

.ks-attention {
	background: var(--ks-bg);
}

.ks-attention .ks-section__copy {
	max-width: 640px;
	margin-inline: auto;
}

.ks-attention__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.ks-attention__card {
	position: relative;
	padding: 30px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 18px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-attention__step {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	background: var(--ks-bg);
	border-radius: 50%;
	color: var(--ks-blue);
	font-size: 14px;
	font-weight: 900;
}

.ks-attention__card h3 {
	margin: 0 0 8px;
	color: var(--ks-heading);
	font-size: 19px;
	font-weight: 800;
}

.ks-attention__card p {
	margin: 0;
	color: var(--ks-body);
}

.ks-context-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.ks-context-chips li {
	padding: 6px 12px;
	background: var(--ks-bg);
	border: 1px solid var(--ks-border);
	border-radius: 999px;
	color: var(--ks-body);
	font-size: 13px;
	font-weight: 600;
}

.ks-attention__note {
	max-width: 760px;
	margin: 32px auto 0;
	padding: 18px 22px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-left: 4px solid var(--ks-green);
	border-radius: 14px;
	color: var(--ks-body);
	text-align: left;
}

.ks-smallprint {
	max-width: 760px;
	margin: 14px auto 0;
	color: var(--ks-muted);
	font-size: 14px;
	text-align: center;
}

/* --- Caring from a distance --------------------------------------- */

.ks-distance {
	background:
		radial-gradient(circle at 88% 20%, rgba(67, 176, 42, 0.10), transparent 34%),
		var(--ks-white);
}

.ks-distance__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 52px;
	align-items: center;
}

.ks-distance__lead {
	max-width: 560px;
	margin: 18px 0 0;
	color: var(--ks-body);
	font-size: 18px;
	line-height: 1.65;
}

.ks-distance__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.ks-distance__tags li {
	padding: 8px 16px;
	background: var(--ks-bg);
	border: 1px solid var(--ks-border);
	border-radius: 999px;
	color: var(--ks-heading);
	font-size: 14px;
	font-weight: 700;
}

.ks-distance__visual {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 34px 26px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 22px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-distance__node {
	display: grid;
	justify-items: center;
	gap: 10px;
	text-align: center;
}

.ks-distance__node strong {
	color: var(--ks-heading);
	font-size: 14px;
	font-weight: 800;
}

.ks-distance__avatar {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	background: var(--ks-bg);
	border: 1px solid var(--ks-border);
	border-radius: 50%;
	color: var(--ks-heading);
	font-size: 15px;
	font-weight: 900;
}

.ks-distance__avatar--ok {
	background: rgba(67, 176, 42, 0.12);
	border-color: rgba(67, 176, 42, 0.34);
	color: #2F7D1E;
}

.ks-distance__line {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 58px;
}

.ks-distance__line::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0;
	border-top: 2px dashed var(--ks-border);
}

.ks-distance__pulse {
	position: relative;
	z-index: 1;
	padding: 7px 14px;
	background: rgba(67, 176, 42, 0.12);
	border: 1px solid rgba(67, 176, 42, 0.34);
	border-radius: 999px;
	color: #2F7D1E;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

/* --- Trust promises ------------------------------------------------ */

.ks-promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-promises li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 4px 14px;
	align-items: start;
	padding: 24px 26px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: 18px;
	box-shadow: var(--ks-soft-shadow);
}

.ks-promises li .ks-line-icon {
	grid-row: span 2;
}

.ks-promises strong {
	color: var(--ks-heading);
	font-size: 17px;
	font-weight: 800;
}

.ks-promises span:not(.ks-line-icon) {
	color: var(--ks-body);
	font-size: 15px;
	line-height: 1.6;
}

.ks-privacy__links {
	margin: 26px 0 0;
	color: var(--ks-muted);
	font-size: 15px;
	text-align: center;
}

.ks-privacy__links a {
	color: var(--ks-blue);
	font-weight: 700;
	text-decoration: underline;
}

.ks-privacy__links span {
	margin: 0 8px;
}

/* --- Final CTA ----------------------------------------------------- */

.ks-cta__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 24px 0 0 !important;
}

.ks-cta__pricing-link {
	color: var(--ks-blue);
	font-weight: 800;
	text-decoration: underline;
}

.ks-cta__aside {
	display: grid;
	justify-items: center;
	gap: 10px;
}

/* --- Pricing: trial banner, plan CTAs, Premium/Free Basic strips ---- */

.ks-trial-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 22px 26px;
	background: linear-gradient(135deg, rgba(11, 99, 229, 0.08), rgba(67, 176, 42, 0.10));
	border: 1px solid var(--ks-border);
	border-radius: 18px;
}

.ks-trial-banner h3 {
	margin: 0 0 4px;
	color: var(--ks-heading);
	font-size: 20px;
	font-weight: 900;
}

.ks-trial-banner p {
	margin: 0;
	color: var(--ks-body);
	font-size: 15px;
}

.ks-pricing-grid--duo {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 880px;
	margin-inline: auto;
}

.ks-price-card__cta {
	align-self: stretch;
	margin-top: auto;
}

.ks-plan-note-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 26px;
}

.ks-plan-note {
	padding: 22px 24px;
	background: var(--ks-bg);
	border: 1px solid var(--ks-border);
	border-radius: 16px;
}

.ks-plan-note h3 {
	margin: 0 0 6px;
	color: var(--ks-heading);
	font-size: 17px;
	font-weight: 800;
}

.ks-plan-note p {
	margin: 0 0 8px;
	color: var(--ks-body);
	font-size: 15px;
}

.ks-plan-note ul {
	margin: 0;
	padding-left: 18px;
	color: var(--ks-body);
	font-size: 14px;
}

.ks-plan-note--muted h3,
.ks-plan-note--muted p,
.ks-plan-note--muted ul {
	color: var(--ks-muted);
}

/* --- Responsive ---------------------------------------------------- */

@media (max-width: 1040px) {
	.ks-promises {
		grid-template-columns: 1fr;
	}

	.ks-distance__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 900px) {
	.ks-attention__grid {
		grid-template-columns: 1fr;
	}

	.ks-pricing-grid--duo {
		grid-template-columns: 1fr;
		max-width: 520px;
	}

	.ks-hero__qr {
		display: none;
	}

	.ks-plan-note-strip {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.ks-hero__cta {
		align-items: stretch;
		margin-top: 24px;
	}

	.ks-hero__cta .ks-button--lg {
		width: 100%;
	}

	.ks-hero__microcopy {
		text-align: center;
	}

	.ks-hero__store {
		justify-content: center;
		gap: 14px;
	}

	.ks-hero__phones {
		gap: 14px;
	}

	.ks-hero__phone {
		width: min(168px, 46%);
	}

	.ks-hero__phone--caregiver {
		margin-top: 28px;
	}

	.ks-hero__phones-link {
		width: 28px;
		height: 28px;
	}

	.ks-attention__note {
		text-align: left;
	}

	.ks-distance__visual {
		padding: 26px 16px;
		gap: 8px;
	}

	.ks-distance__avatar {
		width: 48px;
		height: 48px;
		font-size: 13px;
	}

	.ks-distance__pulse {
		padding: 6px 10px;
		font-size: 11px;
	}

	.ks-cta__actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.ks-cta__actions .ks-button--lg {
		width: 100%;
	}

	.ks-trial-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 420px) {
	.ks-distance__pulse {
		font-size: 10px;
		padding: 5px 8px;
	}

	.ks-hero__phone figcaption {
		font-size: 12px;
	}
}

/* Keep the two plan CTAs on the same baseline when the closing note
   under them wraps to a different number of lines. */
@media (min-width: 901px) {
	.ks-pricing-grid--duo .ks-price-card__note {
		min-height: 44px;
	}
}

/* wpautop wraps the plan CTA anchor in a <p>, so margin-top:auto on the
   anchor never applies. Let the feature list absorb the spare height
   instead, which lands both plan CTAs on the same baseline. */
.ks-pricing-grid--duo .ks-price-list {
	flex: 1 1 auto;
}

/* ===================================================================
   Corrections (2026-08-19): Premium removed from the public pricing
   page, and the loved-one actions stated as text on How It Works.
   =================================================================== */

/* Free Basic is now the only strip, so let it use the full width of the
   pricing grid instead of sitting in a half-width column. */
.ks-plan-note-strip--single {
	grid-template-columns: 1fr;
	max-width: 880px;
	margin-inline: auto;
}

/* The three loved-one actions, stated as text rather than shown in a
   screenshot. */
.ks-page-card .ks-action-list {
	display: grid;
	gap: 10px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.ks-page-card .ks-action-list li {
	padding: 14px 18px;
	background: var(--ks-bg);
	border: 1px solid var(--ks-border);
	border-radius: 14px;
	color: var(--ks-body);
}

.ks-page-card .ks-action-list strong {
	color: var(--ks-heading);
	font-weight: 800;
}

/* ===================================================================
   Final polish (2026-08-20)
   1. Hero captions read as one compact line.
   2. The green hero panel wraps the captions instead of cutting them off.
   3. On stacked (mobile/tablet) layouts the two-phone product visual is
      shown before the trust chips.
   =================================================================== */

/* 1. "They tap “I’m OK”" on a single line rather than stacking the action
   onto its own row. */
.ks-hero__phone figcaption strong {
	display: inline;
}

/* 2. The green panel geometry was inherited from the old CSS phone mockup
   (a fixed .ks-hero__visual min-height with the panel inset 42px from the
   bottom). The real screenshots plus their captions are taller than that
   mockup, so the content filled the whole box and the last caption landed
   in the dead zone below the panel. Size the visual from its actual
   content and paint the panel across the entire padded box instead, so
   the captions are always enclosed. */
.ks-hero__visual {
	min-height: 0;
	padding: 26px 0 30px;
}

.ks-hero__visual::before {
	inset: 0 -18px;
}

/* 3. Stacked hero ordering. The trust chips live inside .ks-hero__content,
   so that wrapper is flattened with display:contents and its children are
   ordered directly inside the hero container: eyebrow / H1 / lead / CTA
   block, then the product visual, then the chips. The gap is zeroed here
   because the children now carry their own margins; the two-column
   desktop grid above 1040px is untouched. */
@media (max-width: 1040px) {
	.ks-hero__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ks-hero__content {
		display: contents;
	}

	.ks-hero__visual {
		order: 2;
		margin-top: 34px;
	}

	.ks-trust-list {
		order: 3;
	}
}

/* Keep the panel from bleeding too far sideways on narrow screens. */
@media (max-width: 760px) {
	.ks-hero__visual::before {
		inset: 0 -6px;
	}
}

/* ===================================================================
   App Store integration (2026-08-21): App Store + Google Play badge
   pairs, the compact hero install cluster, and the platform-aware
   mobile sticky bar.
   =================================================================== */

/* --- Shared badge pair -------------------------------------------- */

/* Apple's guidelines put the App Store badge first when badges for other
   platforms appear beside it; the markup emits it first and these
   containers follow DOM order. Google's guidelines require the Google Play
   badge to be at least as large as the badges shown with it, so every pair
   below keeps the Play artwork height at or above the App Store height
   while the App Store badge never drops under 40px. */
.ks-store-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.ks-store-badge {
	display: inline-block;
	flex: 0 0 auto;
	line-height: 0;
}

.ks-store-badge img {
	display: block;
}

/* google-play-badge.png carries 16.4% transparent clear space on every side
   and Apple's SVG carries none, so the Play badge is driven by its box width
   and the App Store badge by its own height. width:auto keeps Apple's exact
   119.66407:40 ratio, so the artwork is never stretched. */
.ks-store-badge--play img {
	height: auto;
}

.ks-store-badge--apple img {
	width: auto;
}

.ks-store-badges--hero .ks-store-badge--play img {
	width: 180px;
}

.ks-store-badges--hero .ks-store-badge--apple img {
	height: 46px;
}

.ks-store-badges--howitworks .ks-store-badge--play img {
	width: 165px;
}

.ks-store-badges--howitworks .ks-store-badge--apple img {
	height: 42px;
}

.ks-store-badges--getstartedbadge .ks-store-badge--play img {
	width: 207px;
}

.ks-store-badges--getstartedbadge .ks-store-badge--apple img {
	height: 53px;
}

.ks-store-badges--footer .ks-store-badge--play img {
	width: 181px;
}

.ks-store-badges--footer .ks-store-badge--apple img {
	height: 46px;
}

.ks-how__playstore .ks-store-badges {
	justify-content: center;
}

/* --- Hero: compact two-platform install cluster -------------------- */

/* One horizontal band, as before: the badge column sits beside the QR card
   rather than above it, so adding a second store and a second code costs
   the hero almost no height. */
.ks-hero__store {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 6px;
	scroll-margin-top: 90px;
}

.ks-store-badges--hero {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.ks-hero__qr {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 12px;
}

/* The QR pair stays desktop-only, and the badges fall back to a single row
   once the codes are gone. This repeats the theme's existing <=900px rule
   because the block above sits later in the cascade. */
@media (max-width: 900px) {
	.ks-hero__qr {
		display: none;
	}

	.ks-store-badges--hero {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
}

.ks-hero__qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.ks-hero__qr-item img {
	display: block;
	width: 96px;
	height: 96px;
}

.ks-hero__qr-item figcaption {
	color: var(--ks-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.ks-platform-note {
	margin: 0;
	color: var(--ks-muted);
	font-size: 13px;
	line-height: 1.45;
}

.ks-how__playstore .ks-platform-note {
	margin-top: 10px;
	font-size: 13px;
}

/* --- Mobile sticky bar: one platform, one action ------------------- */

/* Every option is rendered; exactly one is revealed from the platform that
   kinstatus_platform_router() stamps on <html>. With scripting off the
   attribute is never set, no option is revealed, and the bar itself stays
   hidden - which is the behaviour it already had. */
.ks-sticky-cta__option {
	display: none;
}

.ks-sticky-cta__option img {
	display: block;
}

.ks-sticky-cta__option--apple img {
	width: auto;
	height: 40px;
}

.ks-sticky-cta__option--play img {
	width: 155px;
	height: auto;
}

:root[data-ks-platform="ios"] .ks-sticky-cta__option--apple,
:root[data-ks-platform="android"] .ks-sticky-cta__option--play {
	display: inline-block;
	line-height: 0;
}

:root[data-ks-platform="unknown"] .ks-sticky-cta__option--generic {
	display: inline-flex;
}

/* --- Phones -------------------------------------------------------- */

@media (max-width: 760px) {
	.ks-hero__store {
		justify-content: center;
		width: 100%;
	}

	/* One shared phone size for the in-page badge pairs, so each pair stays
	   on a single row inside the narrower mobile containers. Play artwork is
	   40.3px against the App Store badge's 40px floor. The footer pair
	   already fits at its desktop size and is left alone. */
	.ks-store-badges--hero,
	.ks-store-badges--howitworks,
	.ks-store-badges--getstartedbadge {
		justify-content: center;
		gap: 12px;
	}

	.ks-store-badges--hero .ks-store-badge--play img,
	.ks-store-badges--howitworks .ks-store-badge--play img,
	.ks-store-badges--getstartedbadge .ks-store-badge--play img {
		width: 155px;
	}

	.ks-store-badges--hero .ks-store-badge--apple img,
	.ks-store-badges--howitworks .ks-store-badge--apple img,
	.ks-store-badges--getstartedbadge .ks-store-badge--apple img {
		height: 40px;
	}

	.ks-platform-note {
		text-align: center;
	}
}

/* ===================================================================
   Hero install cluster alignment correction (2026-08-21)
   =================================================================== */

/* Both official badges sit in one 180px column - the width the Google Play
   artwork box already sets. Centring the column's items lines up the two
   pieces of artwork on a shared vertical axis without resizing, stretching
   or cropping either badge. */
.ks-store-badges--hero {
	align-items: center;
}

/* google-play-badge.png carries 16.4% transparent clear space top and bottom,
   so the flex gap is not the visible gap. 4px here reads as roughly 16px of
   visible separation, and the Play badge's required clear space is untouched
   because nothing enters that transparent band. */
.ks-store-badges--hero {
	gap: 4px;
}

/* The platform sentence centres under the whole cluster by sharing its width:
   the wrapper is sized by its widest child, which is the badge column plus
   the QR card plus the gap between them. No fixed width is involved. */
.ks-hero__install {
	display: flex;
	flex-direction: column;
	width: max-content;
	max-width: 100%;
	gap: 12px;
}

.ks-hero__install .ks-platform-note {
	text-align: center;
}

@media (max-width: 760px) {
	/* Phones keep the existing full-width, centred treatment. */
	.ks-hero__install {
		width: 100%;
	}
}

/* ===================================================================
   Footer social link (2026-08-21)
   =================================================================== */

/* Shares the footer's store/utility row rather than the navigation column:
   that column is auto-sized, so an extra item there would take width from the
   disclaimer block and push it onto more lines. The link still inherits the
   footer link colour, weight and hover state. */
.ks-footer__playstore {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
}

/* .ks-footer__playstore a sets line-height:0 for the badge artwork; this link
   carries text, so it needs its own line box back. */
.ks-footer__playstore .ks-footer__social {
	line-height: 1.4;
}

.ks-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
}

.ks-footer__social svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: currentColor;
	opacity: 0.8;
}

.ks-footer__social:hover svg,
.ks-footer__social:focus svg {
	opacity: 1;
}

/* ===================================================================
   Homepage explainer video (2026-08-23)
   =================================================================== */

/* The section sits between the hero and "How KinStatus works". Both of those
   are white, so the existing tinted surface token separates it from them
   without introducing a new colour. */
.ks-video {
	background: var(--ks-bg);
}

/* Copy left, phone-sized vertical player right. The player column is capped so
   the 9:16 frame never becomes a full-width block on desktop; the gutter is
   the hero's. */
.ks-video__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 56px;
	align-items: center;
}

.ks-video__intro {
	max-width: 560px;
}

.ks-video__player {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

/* Complianz turns this element into its blocked-content container and, while
   the embed is blocked, applies its own white background, 3px radius, no
   border and its own shadow to it. The second selector re-asserts the
   KinStatus card in that state, so the section looks identical before and
   after consent. aspect-ratio reserves the whole 9:16 box either way, so
   releasing the embed shifts nothing. height:auto overrides Complianz's
   height:inherit. */
.ks-video__frame,
.ks-video__frame.cmplz-blocked-content-container {
	position: relative;
	aspect-ratio: 9 / 16;
	height: auto;
	overflow: hidden;
	border: 1px solid var(--ks-border);
	border-radius: 20px;
	box-shadow: var(--ks-shadow);
	background:
		radial-gradient(circle at 50% 24%, rgba(11, 99, 229, 0.16), transparent 58%),
		radial-gradient(circle at 50% 88%, rgba(67, 176, 42, 0.14), transparent 55%),
		linear-gradient(180deg, var(--ks-white) 0%, var(--ks-bg) 100%);
}

@supports not (aspect-ratio: 9 / 16) {
	.ks-video__frame,
	.ks-video__frame.cmplz-blocked-content-container {
		height: 0;
		padding-top: 177.78%;
	}
}

/* The blocked iframe and the released one occupy exactly the same box. */
.ks-video__frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Complianz's own consent button, restyled with the site's primary-button
   treatment so it reads as part of the page rather than as a plugin overlay.
   Everything about its behaviour stays Complianz's: this block only changes
   how it looks. The selector is deliberately more specific than Complianz's
   own .cmplz-blocked-content-container .cmplz-blocked-content-notice. */
.ks-video .ks-video__frame .cmplz-blocked-content-notice,
.ks-setup-video .ks-video__frame .cmplz-blocked-content-notice {
	max-width: min(280px, calc(100% - 40px));
	padding: 14px 18px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--ks-blue), var(--ks-blue-dark));
	box-shadow: 0 12px 24px rgba(11, 99, 229, 0.26);
	color: var(--ks-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
	cursor: pointer;
}

.ks-video .ks-video__frame .cmplz-blocked-content-notice:focus-visible,
.ks-setup-video .ks-video__frame .cmplz-blocked-content-notice:focus-visible {
	outline: 3px solid var(--ks-heading);
	outline-offset: 3px;
}

/* Without JavaScript Complianz can never release the embed, so the frame would
   stay empty. This link is the no-script way to reach the video; it costs no
   third-party request until the visitor follows it. */
.ks-video__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--ks-heading);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.ks-video__grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 34px;
		text-align: center;
	}

	.ks-video__intro .ks-section__copy {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-video__frame.cmplz-blocked-content-container {
		animation: none;
	}
}

/* The setup guide reuses the homepage's consent-aware 9:16 player inside its
   text card. .ks-video__player (the 380px cap and centring), .ks-video__frame
   (the 9:16 box, radius, border and blocked-state background), the frame's
   iframe rule and .ks-video__fallback are all unscoped above, so they already
   apply here; the restyled Complianz notice is reached by adding this wrapper
   to those two selectors rather than by duplicating the rule. All this block
   adds is the wrapper's own rhythm: .ks-page-card gives the heading its 2em
   top margin and the paragraph its spacing, so only the closing gap is new. */
.ks-setup-video {
	margin-bottom: 1.2em;
}