/* Cat age calculator: homepage blush palette with the tool layout from the reference. */
.astra-child-age-calculator { background: #fff; color: #24252b; }
.astra-child-age-calculator #content > .ast-container { display: block; max-width: none; padding: 0; }
.astra-child-age-calculator #content #primary { float: none; width: 100%; margin: 0; padding: 0; border: 0; }
.astra-child-age-calculator .site-header { background: #fff; }
.astra-child-age-calculator .entry-header,
.astra-child-age-calculator .ast-featured-post-content { display: none; }
.astra-child-age-calculator .main-header-menu > .menu-item > .menu-link { letter-spacing: 0; font-size: 16px; font-weight: 500; }
.astra-child-age-calculator .main-header-menu > .current-menu-item > .menu-link { color: #a45e58; }
.cb-age, .cb-age * { box-sizing: border-box; }
.cb-age {
	--cb-blush: #bb847e;
	--cb-blush-dark: #9d5d57;
	--cb-wash: #faf6f5;
	--cb-line: #eee6e2;
	background: #fff;
	color: #24252b;
	font-family: var(--ac-sans);
}
.cb-age .cb-wrap { width: min(1200px, calc(100% - 48px)); }
.cb-age a:focus-visible, .cb-age button:focus-visible, .cb-age input:focus-visible, .cb-age select:focus-visible, .cb-age summary:focus-visible {
	outline: 2px solid #8b4e49;
	outline-offset: 4px;
}

.cb-age-hero { position: relative; isolation: isolate; overflow: hidden; background: #f7f3f0; }
.cb-age-hero-photo { position: absolute; z-index: -2; top: 0; right: 0; width: 70%; height: 100%; object-fit: cover; object-position: center 42%; mask-image: linear-gradient(90deg, transparent, #000 28%); }
.cb-age-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #f7f3f0 8%, rgba(247,243,240,.97) 29%, rgba(247,243,240,.35) 53%, transparent 68%); content: ''; }
.cb-age-hero:not(.has-image)::before {
	position: absolute; z-index: -2; top: 18%; right: 7%; width: 280px; height: 280px; border-radius: 46% 54% 48% 52%;
	background: radial-gradient(circle at 36% 30%, #fff 0 5%, transparent 5.5%), linear-gradient(145deg, #d7aaa4, #9a6862); content: '';
}
.cb-age-hero-inner { display: flex; position: relative; min-height: 420px; align-items: center; }
.cb-age-hero-copy { width: min(520px, 54%); padding: 48px 0; }
.cb-age-kicker { margin: 0 0 12px; color: var(--cb-blush-dark); font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.cb-age-hero h1 { margin: 0 0 16px; color: #151719; font-size: clamp(2.4rem, 4.4vw, 3.7rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.cb-age-hero-copy > p:not(.cb-age-kicker) { max-width: 430px; margin: 0 0 22px; color: #5c5d65; font-size: .95rem; line-height: 1.7; }
.cb-age .cb-button { color: #fff; text-decoration: none; }
.cb-age .cb-button:hover { color: #fff; }
.cb-age-hero-note { position: absolute; top: 72px; right: 8px; color: #7b4f46; font-family: cursive; font-size: 1.15rem; font-style: italic; line-height: 1.45; text-align: center; text-shadow: 0 1px 12px #fff; transform: rotate(-10deg); }
.cb-age-hero-note span { display: block; font-size: 2rem; line-height: 1.1; }

.cb-age-main { padding: 28px 0 8px; }
.cb-age-top, .cb-age-bottom { max-width: 760px; margin: 0 auto 42px; }
.cb-age-panel, .cb-age-chart-panel, .cb-age-faq { padding: 28px 30px 26px; border: 1px solid var(--cb-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(67, 48, 43, .05); }
.cb-age-panel header h2, .cb-age-chart-panel h2, .cb-age-stages h2, .cb-age-faq h2, .cb-age-related h2 {
	margin: 0; color: #202126; font-family: var(--ac-sans); font-weight: 720; letter-spacing: -.02em;
}
.cb-age-panel header h2 { font-size: 1.55rem; }
.cb-age-panel header p, .cb-age-chart-panel header p, .cb-age-stages header p { margin: 6px 0 0; color: #747780; font-size: .86rem; line-height: 1.5; }

.cb-age-form { margin-top: 22px; }
.cb-age-fields { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.cb-age-field label { display: block; margin-bottom: 8px; color: #3d3836; font-size: .78rem; font-weight: 650; }
.cb-age-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-age-field input, .cb-age-field select {
	width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #eadfdb; border-radius: 8px;
	background: #faf7f5; color: #24252b; font: inherit; font-size: .92rem;
}
.cb-age-field input[aria-invalid="true"] { border-color: #c45b4e; background: #fff6f4; }
.cb-age-submit { position: relative; z-index: 2; width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 8px; background: var(--cb-blush); font-size: .92rem; cursor: pointer; }
.cb-age-submit:hover { background: var(--cb-blush-dark); }
.cb-age-note { margin: 12px 0 0; color: #8a8380; font-size: .72rem; text-align: center; }

.cb-age-result { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cb-line); }
.cb-age-result.is-updating { animation: cb-age-fade 420ms ease; }
.cb-age-result-human, .cb-age-result-stage { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.cb-age-avatar, .cb-age-stage-icon {
	display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: #f3e7e4; color: var(--cb-blush-dark);
}
.cb-age-avatar svg, .cb-age-stage-icon svg, .cb-age-stage-grid svg { width: 42px; height: 42px; }
.cb-age-result-label { margin: 0 0 4px; color: #8a8380; font-size: .68rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cb-age-result-value { margin: 0; color: #17191b; font-size: 1.05rem; line-height: 1.2; }
.cb-age-result-value strong { font-size: 2.15rem; font-weight: 750; letter-spacing: -.03em; }
.cb-age-result-copy { margin: 6px 0 0; color: #6e737e; font-size: .78rem; line-height: 1.45; }

.cb-age-stages { margin-bottom: 42px; }
.cb-age-stages header, .cb-age-chart-panel header, .cb-age-faq header {
	display: flex; gap: 12px; align-items: start; margin-bottom: 18px;
}
.cb-age-stages header > span, .cb-age-chart-panel header > span, .cb-age-faq header > span {
	display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: var(--cb-blush-dark);
}
.cb-age-stages header svg, .cb-age-chart-panel header svg, .cb-age-faq header svg { width: 30px; height: 30px; }
.cb-age-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cb-age-stage-grid article {
	padding: 26px 18px 22px; border: 1px solid transparent; border-radius: 14px; background: var(--cb-wash); text-align: center;
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.cb-age-stage-grid article.is-current, .cb-age-stage-grid article:hover { border-color: #e4cfc9; background: #fff8f6; transform: translateY(-2px); }
.cb-age-stage-grid svg { margin-bottom: 10px; color: var(--cb-blush-dark); }
.cb-age-stage-grid h3 { margin: 0; font-size: 1.05rem; }
.cb-age-stage-range { margin: 4px 0 10px; color: var(--cb-blush-dark); font-size: .78rem; font-weight: 650; }
.cb-age-stage-grid p { margin: 0; color: #6d6764; font-size: .8rem; line-height: 1.5; }

.cb-age-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cb-age-tables table { width: 100%; border-collapse: collapse; }
.cb-age-tables th, .cb-age-tables td { padding: 11px 0; border-bottom: 1px solid var(--cb-line); text-align: left; font-size: .88rem; }
.cb-age-tables th { color: #8a8380; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cb-age-tables td:last-child, .cb-age-tables th:last-child { text-align: right; color: #3d3836; }

.cb-age-faq details { border-bottom: 1px solid var(--cb-line); }
.cb-age-faq summary {
	display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 2px;
	color: #202126; font-size: .95rem; font-weight: 600; cursor: pointer; list-style: none;
}
.cb-age-faq summary::-webkit-details-marker { display: none; }
.cb-age-faq summary::after { color: var(--cb-blush-dark); content: '+'; font-size: 1.2rem; font-weight: 400; }
.cb-age-faq details[open] summary::after { content: '–'; }
.cb-age-faq details p { margin: 0 0 16px; max-width: 720px; color: #656570; font-size: .88rem; line-height: 1.65; }

.cb-age-related { margin: 8px 0 54px; }
.cb-age-related header { margin-bottom: 22px; }
.cb-age-related h2 { font-size: 1.7rem; }
.cb-age-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cb-age-related-image { display: block; aspect-ratio: 1.15; overflow: hidden; border-radius: 12px; background: var(--cb-wash); }
.cb-age-related-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms ease; }
.cb-age-related article:hover .cb-age-related-image img { transform: scale(1.04); }
.cb-age-related-image .ac-image-fallback { min-height: 0; height: 100%; }
.cb-age-related h3 { margin: 12px 0 6px; font-size: 1rem; line-height: 1.35; }
.cb-age-related h3 a { color: #202126; text-decoration: none; }
.cb-age-related h3 a:hover { color: var(--cb-blush-dark); }
.cb-age-related time { color: #8a8380; font-size: .72rem; }

.cb-age .cb-home-subscribe { overflow: hidden; background: linear-gradient(105deg, #f8f1ed, #fcfafa 54%, #f6efeb); }
.cb-age .cb-home-subscribe-inner { display: grid; grid-template-columns: 240px minmax(0, 1fr) 160px; gap: 32px; align-items: center; min-height: 185px; }
.cb-age .cb-home-subscribe-inner > img { width: 240px; height: 190px; align-self: end; object-fit: cover; object-position: center; border-radius: 55% 55% 0 0; mix-blend-mode: multiply; }
.cb-age .cb-home-subscribe h2 { margin: 0 0 6px; color: #202126; font-size: 1.55rem; font-weight: 700; }
.cb-age .cb-home-subscribe p { margin: 0 0 14px; color: #707078; font-size: .78rem; line-height: 1.5; }
.cb-age .cb-home-subscribe .mailpoet_form { margin: 0 !important; padding: 0 !important; }
.cb-age .cb-home-subscribe .mailpoet_form input[type="email"] { min-height: 44px; border: 1px solid #eadfdb; border-radius: 6px; background: #fff; font-family: inherit; }
.cb-age .cb-home-subscribe .mailpoet_form input[type="submit"] { min-height: 44px; border: 0; border-radius: 6px; background: #a86d66; color: #fff; font-family: inherit; }
.cb-age .cb-home-subscribe p.cb-home-subscribe-note { color: #a56e64; font-family: cursive; font-size: 1.05rem; font-style: italic; text-align: center; transform: rotate(-12deg); }

@keyframes cb-age-fade {
	from { opacity: .45; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
	.cb-age-hero-copy { width: 58%; }
	.cb-age-hero-note { display: none; }
	.cb-age-stage-grid, .cb-age-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cb-age .cb-home-subscribe-inner { grid-template-columns: 150px minmax(0, 1fr); }
	.cb-age .cb-home-subscribe-inner > img { width: 150px; }
	.cb-age .cb-home-subscribe-note { display: none; }
}
@media (max-width: 680px) {
	.cb-age .cb-wrap { width: calc(100% - 32px); }
	.cb-age-hero-inner { min-height: 390px; }
	.cb-age-hero-photo { width: 100%; object-position: 62% center; }
	.cb-age-hero::after { background: linear-gradient(90deg, rgba(247,243,240,.98), rgba(247,243,240,.9) 42%, rgba(247,243,240,.3)); }
	.cb-age-hero-copy { width: 86%; padding: 36px 0; }
	.cb-age-hero h1 { font-size: 2.35rem; }
	.cb-age-panel, .cb-age-chart-panel, .cb-age-faq { padding: 22px 18px; }
	.cb-age-fields, .cb-age-result, .cb-age-tables { grid-template-columns: 1fr; }
	.cb-age-result-stage { padding-top: 8px; border-top: 1px solid var(--cb-line); }
	.cb-age-stage-grid, .cb-age-related-grid { grid-template-columns: 1fr; }
	.cb-age .cb-home-subscribe-inner { grid-template-columns: 1fr; min-height: 320px; padding-top: 28px; }
	.cb-age .cb-home-subscribe-inner > img { width: 140px; height: 120px; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-age *, .cb-age *::before, .cb-age *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}