/* Kidstic — UI под макет screenshot.png */
:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background: var(--wp--preset--color--bg, #F7FBFF);
	color: var(--wp--preset--color--text, #0F172A);
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-underline-offset: 3px; color: inherit; }

.k-wrap {
	width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
}

/* ——— Header ——— */
.k-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #E8EEF5;
}
.k-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
	padding: 10px 0;
}
.k-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}
.k-logo__text {
	display: grid;
	gap: 1px;
	line-height: 1.15;
}
.k-logo__text strong {
	font-family: var(--wp--preset--font-family--display, Manrope, sans-serif);
	font-size: 22px;
	font-weight: 800;
	color: #0D47A1;
}
.k-logo__text small {
	font-size: 11px;
	color: #64748B;
	font-weight: 500;
	max-width: 200px;
}
.k-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-inline: auto;
}
.k-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #334155;
}
.k-nav a:hover { color: #1E88E5; }
.k-header__aside {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}
.k-search {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: #475569;
	text-decoration: none;
}
.k-search:hover { background: #F1F5F9; color: #1E88E5; }
.k-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #E8F5E9;
	color: #1B5E20;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* ——— Hero ——— */
.k-home > .k-hero,
.k-hero {
	background: linear-gradient(135deg, #E3F2FD 0%, #F7FBFF 55%, #FFF7F7 100%);
	padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
	overflow: hidden;
}
.k-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.k-hero__title {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--display, Manrope, sans-serif);
	font-weight: 800;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.12;
	color: #0D47A1;
	letter-spacing: -0.02em;
}
.k-hero__lead {
	margin: 0 0 22px;
	font-size: clamp(16px, 1.4vw, 18px);
	color: #475569;
	max-width: 38ch;
}
.k-hero__feats {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.k-hero__feats li {
	display: grid;
	gap: 4px;
	justify-items: start;
}
.k-hero__feats strong { font-size: 14px; color: #0F172A; }
.k-hero__feats span:last-child { font-size: 12px; color: #64748B; line-height: 1.35; }

.k-ico {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(15,23,42,.08);
	display: grid;
	place-items: center;
	position: relative;
}
.k-ico::before {
	content: "";
	width: 18px;
	height: 18px;
	background: #1E88E5;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}
.k-ico--shield::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3z'/%3E%3C/svg%3E");
}
.k-ico--book::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h8a4 4 0 014 4v12H8a4 4 0 00-4 4V4zm16 0h-6v16h2a4 4 0 004-4V4z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h8a4 4 0 014 4v12H8a4 4 0 00-4 4V4zm16 0h-6v16h2a4 4 0 004-4V4z'/%3E%3C/svg%3E");
}
.k-ico--kids::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a3 3 0 110-6 3 3 0 010 6zm6 0a3 3 0 110-6 3 3 0 010 6zM4 20v-1a5 5 0 015-5h1a5 5 0 015 5v1H4zm11 0v-1a6.9 6.9 0 012.2-5H17a5 5 0 015 5v1h-7z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a3 3 0 110-6 3 3 0 010 6zm6 0a3 3 0 110-6 3 3 0 010 6zM4 20v-1a5 5 0 015-5h1a5 5 0 015 5v1H4zm11 0v-1a6.9 6.9 0 012.2-5H17a5 5 0 015 5v1h-7z'/%3E%3C/svg%3E");
}
.k-ico--check::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.2L6.5 11.9l1.4-1.4 2.9 2.9 5.3-5.3 1.4 1.4-6.7 6.7z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.2L6.5 11.9l1.4-1.4 2.9 2.9 5.3-5.3 1.4 1.4-6.7 6.7z'/%3E%3C/svg%3E");
}

.k-hero__media {
	margin: 0;
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(13,71,161,.18);
	aspect-ratio: 4 / 3;
	background: #dbeafe;
}
.k-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ——— Calculator (hero) ——— */
.kidstic-calc--hero {
	position: relative;
	z-index: 2;
	max-width: 460px;
	margin: 0;
	padding: 22px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(15,23,42,.14);
}
.kidstic-calc--hero .kc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}
.kidstic-calc--hero .kc-head__ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #E3F2FD;
	position: relative;
	flex-shrink: 0;
}
.kidstic-calc--hero .kc-head__ico::before {
	content: "";
	position: absolute;
	inset: 10px;
	background: #1E88E5;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v4H7V2zm-2 6h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V10a2 2 0 012-2zm3 3v2h2v-2H8zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2zM8 15v2h2v-2H8zm4 0v2h2v-2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v4H7V2zm-2 6h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V10a2 2 0 012-2zm3 3v2h2v-2H8zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2zM8 15v2h2v-2H8zm4 0v2h2v-2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kidstic-calc--hero .kc-title { margin: 0; font-size: 18px; }
.kidstic-calc--hero .kc-sub { margin: 2px 0 0; font-size: 13px; color: #64748B; }
.kidstic-calc--hero .kc-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.kidstic-calc--hero .kc-note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #E3F2FD;
	color: #0D47A1;
	font-size: 13px;
	line-height: 1.4;
}
.kidstic-calc--hero .kc-cta {
	grid-column: 1 / -1;
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 14px;
	background: #1E88E5;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}
.kidstic-calc--hero .kc-cta:hover {
	filter: brightness(1.05);
	box-shadow: 0 10px 28px rgba(30,136,229,.35);
}
.kidstic-calc--hero .kc-field span {
	font-size: 13px;
	color: #64748B;
	font-weight: 600;
}
.kidstic-calc--hero .kc-field input[type=number] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	font-size: 18px;
	font-weight: 700;
}
.kidstic-calc--hero .kc-out--float {
	margin-top: 14px;
	padding: 14px;
	border-radius: 16px;
	background: #F8FBFF;
	border: 1px solid #Dbeafe;
	box-shadow: 0 12px 32px rgba(15,23,42,.1);
}
.kidstic-calc--hero .kc-out__label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: #0D47A1;
}
.kidstic-calc--hero .kc-out__row {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 0;
	background: transparent;
}
.kidstic-calc--hero .kc-disclaimer { margin: 10px 0 0; font-size: 12px; }

/* default calc (non-hero) kept usable */
.kidstic-calc:not(.kidstic-calc--hero) {
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 6px 24px rgba(15,23,42,.08);
	padding: clamp(20px, 3vw, 36px);
	display: grid;
	gap: 20px;
	max-width: 720px;
	margin-inline: auto;
}
.kidstic-calc:not(.kidstic-calc--hero) .kc-form {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 12px;
	align-items: end;
}

/* ——— Popular ——— */
.k-section { padding: clamp(36px, 5vw, 64px) 0; }
.k-section__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
.k-section__head h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Manrope, sans-serif);
	font-size: clamp(24px, 3vw, 34px);
	color: #0F172A;
}
.k-link-all {
	color: #1E88E5;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.k-link-all:hover { text-decoration: underline; }

.kidstic-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.kg-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(15,23,42,.07);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.kg-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.kg-card__link {
	display: grid;
	gap: 8px;
	padding: 14px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.kg-card__art {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	background: var(--kg-bg, #E3F2FD);
	display: grid;
	place-items: center;
}
.kg-card__art span {
	font-family: var(--wp--preset--font-family--display, Manrope, sans-serif);
	font-size: 42px;
	font-weight: 800;
	color: #0D47A1;
	opacity: .55;
}
.kg-card__title {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.3;
	color: #0D47A1;
}
.kg-card__meta {
	margin: 0;
	font-size: 13px;
	color: #64748B;
	line-height: 1.4;
}
.kg-card__cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #1E88E5;
}

/* ——— Warn + trust ——— */
.k-banner-warn {
	background: #FFF8E1;
	border-block: 1px solid #FFE082;
	padding: 18px 0;
}
.k-banner-warn .k-wrap {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.k-banner-warn__ico {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #FFB300;
	color: #fff;
	font-weight: 800;
	display: grid;
	place-items: center;
}
.k-banner-warn p { margin: 0; color: #5D4037; font-size: 14px; line-height: 1.5; }

.k-trust { padding: 36px 0 48px; background: #fff; }
.k-trust__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.k-trust__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.k-trust__item p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #334155;
	line-height: 1.4;
}

/* ——— Footer ——— */
.k-footer {
	background: #0F172A;
	color: #CBD5E1;
	padding: 28px 0;
}
.k-footer__inner {
	display: grid;
	gap: 16px;
}
.k-footer .k-logo strong { color: #fff; }
.k-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
}
.k-footer__nav a {
	color: #94A3B8;
	text-decoration: none;
	font-size: 14px;
}
.k-footer__nav a:hover { color: #fff; }
.k-footer__copy {
	margin: 0;
	font-size: 13px;
	color: #64748B;
}

/* ——— Misc ——— */
.kidstic-toc {
	background: #F1F5F9;
	border-radius: 14px;
	padding: 16px 18px;
	margin: 18px 0;
}
.kidstic-toc ol { margin: 8px 0 0 20px; padding: 0; }
.kidstic-related .krg {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.kidstic-related .krg-card {
	background: #fff;
	padding: 14px;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(15,23,42,.06);
	display: grid;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	transition: transform .15s;
}
.kidstic-related .krg-card:hover { transform: translateY(-2px); }
.kidstic-related .krg-card b { color: #0D47A1; }
.kidstic-related .krg-card span { color: #64748B; font-size: 14px; }

@media (max-width: 960px) {
	.k-hero__grid { grid-template-columns: 1fr; }
	.k-hero__media { order: -1; max-height: 320px; }
	.kidstic-calc--hero { max-width: none; }
	.kidstic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k-trust__grid { grid-template-columns: 1fr; }
	.k-nav { display: none; }
	.k-badge { display: none; }
}
@media (max-width: 560px) {
	.k-hero__feats { grid-template-columns: 1fr; }
	.kidstic-calc--hero .kc-form { grid-template-columns: 1fr; }
	.kidstic-grid { grid-template-columns: 1fr; }
	.k-section__head { flex-direction: column; align-items: flex-start; }
}