/*
Theme Name: Yaffle
Theme URI: https://yafflehire.com
Author: Yaffle Limited
Description: The yafflehire.com marketing site, drawn from the "Yaffle Hire website concept" design canvas.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.2.0
License: Proprietary
Text Domain: yaffle
*/

/* ------------------------------------------------------------------
   Values from the concept. theme.json carries the same palette for the
   editor; these names keep the section rules below readable.
   ------------------------------------------------------------------ */
:root {
	--yh-teal: #0B625D;
	--yh-teal-bright: #168C84;
	--yh-glow: #2BC2B4;
	--yh-ice: #BDF8FF;
	--yh-aqua: #DDF8FA;
	--yh-aqua-pale: #F2FCFD;
	--yh-aqua-line: #D5EEF0;
	--yh-mist: #F5F7F8;
	--yh-line: #E1E8EA;
	--yh-ink: #071018;
	--yh-ink-soft: #1E3340;
	--yh-slate: #34424E;
	--yh-grey: #4A5A64;
	--yh-grey-light: #5B6B76;
	--yh-track: #CFE3E4;
	--yh-white: #FFFFFF;
}

body { margin: 0; background: var(--yh-white); color: var(--yh-ink); }
.wp-site-blocks { min-height: 100vh; }
/* Zero specificity, so every section rule below wins without !important. */
:where(body) :where(h1, h2, h3, p, ul, ol, figure){ margin: 0; }
body mark { background: transparent; color: inherit; }
body img { max-width: 100%; }
body a { color: var(--yh-teal); }
body a:hover { color: var(--yh-ink); }

/* Focus: the concept draws none; keyboard users still need one. */
body a:focus-visible, body button:focus-visible, body .yh-form input:focus-visible,
body .yh-form select:focus-visible, body .yh-form textarea:focus-visible{
	outline: 3px solid var(--yh-teal-bright);
	outline-offset: 2px;
}

body .yh-skip{
	position: absolute; left: 16px; top: -60px; z-index: 10;
	background: var(--yh-teal); color: var(--yh-white);
	padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
body .yh-skip:focus{ top: 16px; }

/* ------------------------------------------------------------------
   Shared pieces
   ------------------------------------------------------------------ */
body .yh-section{ padding-left: 24px; padding-right: 24px; }
body .yh-wrap{ box-sizing: content-box; max-width: 1280px; margin-left: auto; margin-right: auto; }

body .yh-eyebrow{
	font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--yh-teal); font-weight: 600;
}
body .yh-eyebrow--ice{ color: var(--yh-ice); }
body .yh-step-label{ font-size: 15px; color: var(--yh-teal); font-weight: 600; }

body .yh-h2{ font-weight: 600; }
body .yh-h2--xl{ font-size: clamp(36px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
body .yh-h2--lg{ font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
body .yh-h2--md{ font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }

/* Buttons: core/button blocks carrying one of these classes. */
body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
body .wp-block-button__link {
	display: inline-block; box-sizing: border-box; border-radius: 999px;
	font-family: inherit; font-weight: 600; font-size: 17px; line-height: normal;
	padding: 18px 30px; text-decoration: none; text-align: center; border: 0;
}
body .yh-btn--primary .wp-block-button__link { background: var(--yh-teal); color: var(--yh-white); }
body .yh-btn--primary .wp-block-button__link:hover { background: var(--yh-ink); color: var(--yh-white); }
body .yh-btn--outline .wp-block-button__link {
	background: transparent; color: var(--yh-ink); border: 1.5px solid var(--yh-ink);
}
body .yh-btn--outline .wp-block-button__link:hover { background: var(--yh-ink); color: var(--yh-white); }
body .yh-btn--white .wp-block-button__link {
	background: var(--yh-white); color: var(--yh-teal); font-weight: 700; padding: 18px 34px;
}
body .yh-btn--white .wp-block-button__link:hover { background: var(--yh-ice); color: var(--yh-teal); }
body .yh-btn--compact .wp-block-button__link { padding: 16px 28px; }

/* ------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------ */
body .yh-nav{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; padding: 22px 24px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
body .yh-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--yh-ink); }
body .yh-brand img{ height: 32px; width: auto; }
body .yh-brand__word{ font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
body .yh-brand__word span, body .yh-footer__word span{ color: var(--yh-teal-bright); font-weight: 500; }
body .yh-nav__links{
	display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
	font-size: 16px; font-weight: 500; margin: 0; padding: 0; list-style: none;
}
body .yh-nav__links a{ display: inline-block; position: relative; color: var(--yh-slate); text-decoration: none; }
/* A 44px-tall tap area around each text link, without moving anything the concept draws. */
body .yh-nav__links a:not(.yh-nav__cta)::before{ content: ""; position: absolute; inset: -12px -8px; }
body .yh-nav__links a:hover{ color: var(--yh-ink); }
body .yh-nav__links a[aria-current="page"]{
	color: var(--yh-ink); font-weight: 700; border-bottom: 2px solid var(--yh-teal-bright); padding-bottom: 4px;
}
body .yh-nav__links a.yh-nav__cta{
	background: var(--yh-teal); color: var(--yh-white); padding: 13px 22px; border-radius: 999px; font-weight: 600;
	border: 0;
}
body .yh-nav__links a.yh-nav__cta:hover{ background: var(--yh-ink); color: var(--yh-white); }

body .yh-footer{ padding: 32px 24px 48px; border-top: 1px solid #E6ECEE; }
body .yh-footer__row{
	max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;
	justify-content: space-between; align-items: center; font-size: 14px; color: var(--yh-grey-light);
}
body .yh-footer__brand{ display: flex; align-items: center; gap: 8px; }
body .yh-footer__brand img{ height: 20px; width: auto; }
body .yh-footer__word{ color: var(--yh-ink); font-weight: 600; }
body .yh-footer__links{ display: flex; flex-wrap: wrap; gap: 24px; }
body .yh-footer__links a { color: var(--yh-grey-light); }
body .yh-footer__links a:hover { color: var(--yh-ink); }

/* ------------------------------------------------------------------
   Homepage
   ------------------------------------------------------------------ */
body .yh-hero{ padding: 24px 24px 0; }
body .yh-hero__panel{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; border-radius: 32px;
	padding: clamp(32px, 5vw, 72px); background: var(--yh-aqua); overflow: hidden;
}
body .yh-hero__row{ display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
body .yh-hero__copy{ box-sizing: content-box; flex: 1 1 560px; min-width: 0; }
body .yh-badge{
	display: inline-flex; align-items: center; gap: 10px; background: var(--yh-white);
	border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--yh-teal);
	letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
body .yh-badge::before{
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yh-teal-bright); flex: 0 0 8px;
}
body .yh-hero__title{
	margin-top: 28px; font-size: clamp(52px, 7vw, 96px); line-height: 0.95;
	letter-spacing: -0.045em; font-weight: 600; max-width: 610px;
}
body .yh-hero__lead{ margin-top: 32px; font-size: 21px; line-height: 1.55; color: var(--yh-ink-soft); max-width: 580px; }
body .yh-hero .wp-block-buttons{ margin-top: 40px; }
/* The Requisition view: a tilted product panel with three floating cards, drawn at
   540x490 and scaled down below 1100px and 640px, as the design does. */
body .yh-hero__vis-col{ flex: 1 1 480px; min-width: 0; display: flex; justify-content: center; }
body .yh-hero__vis{ position: relative; width: 540px; flex: 0 0 540px; height: 490px; }
body .yh-hero__glow{
	position: absolute; left: 20px; top: 90px; width: 500px; height: 300px; border-radius: 50%;
	background: radial-gradient(circle, rgba(43,194,180,0.45), rgba(43,194,180,0) 70%); filter: blur(10px);
}
body .yh-rv{
	position: absolute; left: 30px; top: 50px; width: 470px; border-radius: 22px; overflow: hidden; transform: rotate(-3deg);
	background: var(--yh-white); box-shadow: 0 0 0 10px rgba(255,255,255,0.6), 0 40px 90px rgba(11,98,93,0.28);
}
body .yh-rv__bar{ background: var(--yh-teal); padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
body .yh-rv__bar img{ width: 22px; height: auto; }
body .yh-rv__brand{ color: var(--yh-white); font-size: 14px; font-weight: 600; }
body .yh-rv__view{ margin-left: auto; font-size: 11px; color: var(--yh-ice); }
body .yh-rv__body{ padding: 16px 18px 12px; }
body .yh-rv__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body .yh-rv__role{ font-size: 17px; font-weight: 600; }
body .yh-rv__meta{ font-size: 12px; color: var(--yh-grey); margin-top: 2px; }
body .yh-rv__status{ font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #E3F6EF; color: #1D6B4F; }
body .yh-rv__stages{ display: flex; gap: 8px; margin-top: 14px; }
body .yh-rv__stages > div{ flex: 1; background: var(--yh-aqua-pale); border-radius: 10px; padding: 8px 10px; }
body .yh-rv__stages > div > div{ font-size: 11px; color: var(--yh-grey); }
body .yh-rv__stages b{ display: block; font-size: 18px; font-weight: 700; color: var(--yh-ink); }
body .yh-rv__stages > .yh-rv__stage--interview{ background: var(--yh-aqua); }
body .yh-rv__stages > .yh-rv__stage--interview > div, body .yh-rv__stages > .yh-rv__stage--interview b{ color: var(--yh-teal); }
body .yh-rv__stages > .yh-rv__stage--offer{ background: var(--yh-teal); }
body .yh-rv__stages > .yh-rv__stage--offer > div{ color: var(--yh-ice); }
body .yh-rv__stages > .yh-rv__stage--offer b{ color: var(--yh-white); }
body .yh-rv__people{ margin-top: 12px; }
body .yh-rv__person{ display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #EEF2F3; }
body .yh-rv__avatar{
	width: 28px; height: 28px; border-radius: 50%; color: var(--yh-teal); font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
body .yh-rv__name{ flex: 1; font-size: 13px; font-weight: 600; }
body .yh-rv__stage{ font-size: 11px; color: var(--yh-grey); }
body .yh-rv__score{ font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #E3F6EF; color: #1D6B4F; }
body .yh-rv__score--good{ background: #EAF4F6; color: var(--yh-teal); }
body .yh-float{
	position: absolute; background: var(--yh-white); border-radius: 16px; padding: 12px 16px 12px 12px; display: flex;
	align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(11,98,93,0.18); white-space: nowrap; z-index: 3;
}
body .yh-float--offer{ left: 300px; top: 10px; transform: rotate(2deg); }
body .yh-float--interview{ left: -20px; top: 405px; transform: rotate(-2deg); }
body .yh-float--approval{ left: 285px; top: 420px; transform: rotate(1deg); }
body .yh-float__icon{ width: 38px; height: 38px; border-radius: 12px; background: var(--yh-teal); display: flex; align-items: center; justify-content: center; }
body .yh-float__title{ display: block; font-size: 15px; font-weight: 600; color: var(--yh-ink); }
body .yh-float__meta{ display: block; font-size: 13px; color: var(--yh-grey); margin-top: 1px; }
@media (max-width: 1100px) {
	body .yh-hero__vis-col{ height: 400px; overflow: visible; }
	body .yh-hero__vis{ transform: scale(.8); transform-origin: top center; }
}
@media (max-width: 640px) {
	body .yh-hero__vis-col{ height: 250px; justify-content: flex-start; }
	body .yh-hero__vis{ transform: scale(.5); transform-origin: top left; }
}
@media (max-width: 380px) {
	/* The design's half scale is 270px wide; a 320px phone leaves the panel about 210px. */
	body .yh-hero__vis-col{ height: 190px; }
	body .yh-hero__vis{ transform: scale(.38); }
}

body .yh-journey{ margin-top: 72px; padding-top: 40px; border-top: 1px solid #B5E3E3; }
body .yh-journey .yh-eyebrow{ margin-bottom: 28px; }
body .yh-journey__track{ position: relative; }
body .yh-journey__line{
	position: absolute; left: 10%; right: 10%; top: 26px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, #A9DCD8 0%, #168C84 55%, #2BC2B4 100%);
}
body .yh-journey__steps{
	position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px; text-align: center; margin: 0; padding: 0; list-style: none;
}
body .yh-journey__steps a{ display: flow-root; text-decoration: none; }
body .yh-journey__icon{
	width: 56px; height: 56px; margin: 0 auto; border-radius: 14px; background: var(--yh-white);
	border: 1.5px solid #8CCBC6; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px rgba(11,98,93,0.08);
}
body .yh-journey__name{
	margin-top: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--yh-ink-soft); font-weight: 600;
}
body .yh-journey__step--now .yh-journey__icon{
	width: 64px; height: 64px; margin: -4px auto 0; border-radius: 16px; background: var(--yh-teal); border: 0;
	box-shadow: 0 0 0 8px rgba(43,194,180,0.18), 0 0 36px 8px rgba(43,194,180,0.45), 0 12px 30px rgba(11,98,93,0.35);
}
body .yh-journey__step--now .yh-journey__name{ margin-top: 10px; color: var(--yh-teal); font-weight: 700; }
@media (max-width: 560px) {
	/* Five steps don't fit across a phone ("REQUISITION" alone is wider than a fifth of
	   the panel), so the journey turns into a list running down, its line on the left. */
	body .yh-journey__steps{ grid-template-columns: 1fr; gap: 14px; text-align: left; }
	body .yh-journey__steps a{ display: flex; align-items: center; gap: 16px; }
	body .yh-journey__icon{ width: 44px; height: 44px; border-radius: 12px; margin: 0; flex: 0 0 auto; }
	body .yh-journey__icon svg{ width: 20px; height: 20px; }
	body .yh-journey__name{ margin-top: 0; }
	/* The last step is drawn larger at full width; on a phone it sits in the list like the others. */
	body .yh-journey__step--now .yh-journey__icon{
		width: 44px; height: 44px; margin: 0; border-radius: 12px; border: 1.5px solid var(--yh-teal);
		box-shadow: 0 0 0 6px rgba(43,194,180,0.18);
	}
	body .yh-journey__step--now .yh-journey__icon svg{ width: 20px; height: 20px; }
	body .yh-journey__step--now .yh-journey__name{ margin-top: 0; }
	body .yh-journey__line{
		left: 22px; right: auto; top: 22px; bottom: 22px; width: 4px; height: auto; margin-left: -1px;
		background: linear-gradient(180deg, #A9DCD8 0%, #168C84 55%, #2BC2B4 100%);
	}
}


body .yh-problem{ padding-top: 112px; text-align: center; }
body .yh-problem__grid{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px; margin-top: 32px; text-align: left;
}
body .yh-problem__card{ box-sizing: content-box; background: var(--yh-mist); border-radius: 20px; padding: 28px; display: flex; gap: 18px; align-items: center; }
body .yh-problem__disc{
	flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--yh-white); display: flex;
	align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--yh-line), 0 8px 20px rgba(11,98,93,0.08);
}
body .yh-problem__card p:not([class*="yh-"]){ font-size: 20px; line-height: 1.4; font-weight: 500; }
body .yh-problem__title{
	margin: 56px auto 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08;
	letter-spacing: -0.03em; font-weight: 600; max-width: 820px;
}

body .yh-view{ padding-top: 56px; }
body .yh-view__frame{ border-radius: 20px; box-shadow: 0 40px 100px rgba(11,98,93,0.18); line-height: 0; }
body .yh-view__frame img{ width: 100%; height: auto; display: block; border-radius: 20px; }
body .yh-view__caption{ margin-top: 14px; font-size: 13px; color: var(--yh-grey); text-align: center; }

body .yh-day{ padding-top: 112px; padding-bottom: 112px; }
body .yh-day .yh-h2{ margin-top: 16px; max-width: 860px; }
body .yh-day__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 56px; }
body .yh-day__card{ box-sizing: content-box; border: 1.5px solid var(--yh-ink); border-radius: 24px; padding: 32px; }
body .yh-day__top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body .yh-clock{ flex: 0 0 48px; }
body .yh-day__time{ font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--yh-teal); }
body .yh-day__card h3{ margin-top: 16px; font-size: 22px; font-weight: 600; }
body .yh-day__card p:not([class*="yh-"]){ margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--yh-slate); }
body .yh-day__card--home{ background: var(--yh-teal); color: var(--yh-white); border: 0; }
body .yh-day__card--home .yh-day__time{ color: var(--yh-glow); }
body .yh-day__card--home p:not([class*="yh-"]){ color: var(--yh-aqua); }

body .yh-platform{ padding-bottom: 48px; }
body .yh-platform .yh-h2{ margin-top: 16px; max-width: 860px; }
body .yh-platform__grid{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; margin-top: 56px;
}
body .yh-feature{ box-sizing: content-box; background: var(--yh-white); border: 1px solid var(--yh-line); border-radius: 24px; padding: 24px 24px 32px; }
body .yh-feature .yh-step-label{ margin-top: 24px; }
body .yh-feature h3{ margin-top: 10px; font-size: 23px; font-weight: 600; }
body .yh-feature p:not([class*="yh-"]){ margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--yh-slate); }

/* The little product illustrations inside the feature cards. */
body .yh-mini{
	background: var(--yh-aqua-pale); border: 1px solid var(--yh-aqua-line); border-radius: 16px;
	height: 150px; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; justify-content: center;
}
body .yh-mini--gap10{ gap: 10px; }
body .yh-mini--gap12{ gap: 12px; }
body .yh-mini--gap8{ gap: 8px; }
body .yh-mini--centre{ flex-direction: row; align-items: center; justify-content: center; }
body .yh-tick-row{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--yh-slate); }
body .yh-tick{
	width: 22px; height: 22px; border-radius: 50%; background: var(--yh-teal); color: var(--yh-white);
	display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 22px; box-sizing: border-box;
}
body .yh-tick--open{ background: var(--yh-white); border: 2px solid var(--yh-teal); }
body .yh-tick-row--open{ color: var(--yh-ink); font-weight: 600; }
body .yh-job{
	width: 100%; max-width: 260px; background: var(--yh-white); color: var(--yh-ink); border-radius: 12px;
	padding: 14px 16px; box-shadow: 0 8px 24px rgba(11,98,93,0.12);
}
body .yh-job__title{ font-size: 15px; font-weight: 700; }
body .yh-job__meta{ font-size: 12px; color: var(--yh-grey); margin-top: 2px; }
body .yh-job__foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
body .yh-chip{ font-size: 11px; color: var(--yh-teal); background: var(--yh-aqua); padding: 4px 8px; border-radius: 999px; font-weight: 600; }
body .yh-chip--solid{ font-size: 12px; background: var(--yh-teal); color: var(--yh-white); padding: 6px 12px; }
body .yh-chip--outline{ background: var(--yh-white); border: 1px solid #A9D8D6; font-weight: 400; padding: 3px 8px; }
body .yh-score{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--yh-slate); }
body .yh-score__head{ font-size: 14px; font-weight: 600; color: var(--yh-ink); }
body .yh-dots{ display: flex; gap: 4px; }
body .yh-dots i{ width: 14px; height: 6px; border-radius: 3px; background: var(--yh-teal-bright); }
body .yh-dots i.off{ background: var(--yh-track); }
body .yh-offer__label{ font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yh-grey); font-weight: 600; }
body .yh-offer__sig{ margin-top: 6px; }
body .yh-offer__foot{
	border-top: 1px solid #C6E3E4; padding-top: 10px; display: flex; justify-content: space-between;
	align-items: center; font-size: 12px; color: var(--yh-slate);
}
body .yh-offer__foot b{ color: var(--yh-white); background: var(--yh-teal); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
body .yh-drift__head{ display: flex; justify-content: space-between; font-size: 13px; }
body .yh-drift__head span:first-child{ font-weight: 600; }
body .yh-drift__head span:last-child{ color: var(--yh-teal); font-weight: 600; }
body .yh-drift__bar{ position: relative; height: 10px; border-radius: 5px; background: var(--yh-track); }
body .yh-drift__fill{ width: 100%; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #0B625D 0%, #168C84 50%, #7FD3CC 100%); }
body .yh-drift__target{ position: absolute; left: 50%; top: -6px; width: 2px; height: 22px; background: var(--yh-ink); }
body .yh-drift__note{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--yh-slate); margin-top: 4px; }
body .yh-funnel-row{ display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--yh-slate); }
body .yh-funnel-row > span:first-child{ width: 70px; flex: 0 0 70px; }
body .yh-funnel-row > i{ height: 12px; border-radius: 4px; width: 100%; }

body .yh-platform-links{ padding-bottom: 112px; }
body .yh-platform-links .wp-block-buttons{ justify-content: center; }

body .yh-who{ padding-bottom: 112px; }
body .yh-who__panel{ box-sizing: border-box;
	max-width: 1280px; margin: 0 auto; background: var(--yh-mist); border-radius: 32px;
	padding: clamp(28px, 4vw, 48px);
}
body .yh-who__panel h2{
	margin-top: 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600;
}

body .yh-ai__panel{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
	background: var(--yh-teal); color: var(--yh-white); border-radius: 32px; padding: clamp(28px, 4vw, 56px);
}
body .yh-ai__copy{ box-sizing: content-box; flex: 1 1 400px; min-width: 0; }
body .yh-ai__copy h2{ margin-top: 16px; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
body .yh-ai__copy p:not([class*="yh-"]){ margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--yh-aqua); }
body .yh-chat{ box-sizing: content-box;
	flex: 1 1 480px; min-width: 0; background: var(--yh-white); border-radius: 20px; padding: 28px;
	box-shadow: 0 24px 60px rgba(7,16,24,0.25);
}
body .yh-chat__dots{ display: flex; gap: 8px; }
body .yh-chat__dots i{ width: 10px; height: 10px; border-radius: 50%; background: #D3DCDF; }
body .yh-chat__q{
	margin-top: 24px; margin-left: auto; max-width: 80%; background: #EEF2F3; color: var(--yh-ink);
	border-radius: 14px 14px 4px 14px; padding: 14px 18px; font-size: 16px;
}
body .yh-chat__a{
	margin-top: 14px; max-width: 88%; background: var(--yh-aqua); color: var(--yh-ink);
	border-radius: 14px 14px 14px 4px; padding: 14px 18px; font-size: 16px; line-height: 1.55;
}
body .yh-chat__note{ margin-top: 20px; font-size: 13px; color: var(--yh-grey); }

body .yh-connected{ padding-top: 112px; }
body .yh-connected__panel{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
	background: var(--yh-aqua); border-radius: 32px; padding: clamp(28px, 4vw, 56px);
}
body .yh-connected__copy{ box-sizing: content-box; flex: 1 1 420px; min-width: 0; }
body .yh-connected__copy h2{ margin-top: 16px; }
body .yh-connected__copy p:not([class*="yh-"]){ margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--yh-ink-soft); }
body .yh-tools{ flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
body .yh-tools li{
	display: inline-flex; align-items: center; gap: 10px; background: var(--yh-white); border-radius: 999px;
	padding: 12px 20px; font-size: 16px; font-weight: 500;
}
body .yh-tools li.dot::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yh-teal-bright); }

body .yh-cta{ padding-top: 112px; padding-bottom: 96px; }
body .yh-cta__panel{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; background: var(--yh-teal); border-radius: 32px;
	padding: 88px 48px; text-align: center;
}
body .yh-cta__panel--plain{ padding: 80px 48px; }
body .yh-cta__orb{
	width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; background: var(--yh-white);
	display: flex; align-items: center; justify-content: center;
}
body .yh-cta__orb img{ width: 56px; height: auto; }
body .yh-cta__panel h2{
	margin: 28px auto 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.02;
	letter-spacing: -0.035em; font-weight: 600; color: var(--yh-white); max-width: 860px;
}
body .yh-cta__panel--plain h2{ margin-top: 0; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.04; max-width: 820px; }
body .yh-cta__panel > p:not([class*="yh-"]){ margin: 18px auto 0; font-size: 19px; color: var(--yh-aqua); max-width: 600px; line-height: 1.55; }
body .yh-cta__panel--plain > p:not([class*="yh-"]){ max-width: 560px; }
body .yh-cta__panel .wp-block-buttons{ justify-content: center; margin-top: 36px; }
body .yh-ticks{
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 40px 0 0; padding: 0;
	list-style: none; font-size: 16px; color: var(--yh-white);
}
body .yh-ticks li{ display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------
   Solution page
   ------------------------------------------------------------------ */
body .yh-sol-hero{ padding: 24px 24px 0; }
body .yh-sol-hero__panel{ box-sizing: content-box;
	max-width: 1280px; margin: 0 auto; border-radius: 32px; padding: clamp(32px, 5vw, 72px);
	background: var(--yh-aqua);
}
body .yh-sol-hero__panel h1{
	margin-top: 20px; font-size: clamp(44px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.04em;
	font-weight: 600; max-width: 900px;
}
body .yh-sol-hero__panel > p:not([class*="yh-"]){ margin-top: 28px; font-size: 21px; line-height: 1.55; color: var(--yh-ink-soft); max-width: 640px; }
body .yh-jump{ display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
body .yh-jump a {
	display: inline-block; background: var(--yh-white); color: var(--yh-ink); text-decoration: none;
	padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 600;
}
body .yh-jump a:hover { background: var(--yh-teal); color: var(--yh-white); }

body .yh-stage{ padding-top: 112px; scroll-margin-top: 24px; }
body .yh-stage__row{ box-sizing: content-box; max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
body .yh-stage--flip .yh-stage__row{ flex-direction: row-reverse; }
body .yh-stage__copy{ box-sizing: content-box; flex: 1 1 460px; min-width: 0; }
body .yh-stage__copy h2{ margin-top: 14px; }
body .yh-stage__copy ul{
	margin: 24px 0 0; padding: 0 0 0 20px; font-size: 18px; line-height: 1.6;
	color: var(--yh-slate); display: flex; flex-direction: column; gap: 10px;
}
body .yh-stage__art{
	flex: 1 1 460px; min-width: 0; background: var(--yh-aqua-pale); border: 1px solid var(--yh-aqua-line);
	border-radius: 28px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column;
}
body .yh-stage__art--gap16{ gap: 16px; }
body .yh-stage__art--gap14{ gap: 14px; }
body .yh-card{ background: var(--yh-white); border-radius: 16px; padding: 24px; }
body .yh-card--20{ padding: 20px; }
body .yh-card--28{ padding: 28px; }
body .yh-card--lift{ box-shadow: 0 8px 24px rgba(11,98,93,0.10); }
body .yh-card--stack{ display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 480px) {
	/* The illustrations' 40px padding leaves the scorecards no room on a small phone. */
	body .yh-stage__art{ padding: 20px; }
	body .yh-stage__art .yh-card{ padding: 16px; }
	body .yh-score--lg{ gap: 12px; }
	body .yh-score--lg > span:first-child{ min-width: 0; }
	body .yh-score--lg .yh-dots{ gap: 4px; flex: 0 0 auto; }
	body .yh-score--lg .yh-dots i{ width: 14px; }
}
body .yh-stage__art svg{ max-width: 100%; height: auto; }
body .yh-card--stack12{ display: flex; flex-direction: column; gap: 12px; }
body .yh-approval{ display: flex; align-items: center; gap: 14px; background: var(--yh-white); border-radius: 14px; padding: 16px; }
body .yh-approval--open{ border: 1.5px solid var(--yh-teal); }
body .yh-approval .yh-tick{ width: 28px; height: 28px; flex-basis: 28px; }
body .yh-approval__name{ font-weight: 600; }
body .yh-approval__when{ font-size: 13px; color: var(--yh-grey); }
body .yh-art-label{ font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yh-grey); font-weight: 600; }
body .yh-listing__title{ font-size: 18px; font-weight: 700; }
/* The faded cards dim their grey meta below 4.5:1; darker text keeps it readable at the same look. */
body .yh-card[style*="opacity:0.85"] .yh-listing__meta{ color: var(--yh-slate); }
body .yh-card[style*="opacity:0.7"] .yh-listing__meta{ color: var(--yh-ink-soft); }
body .yh-listing__meta{ font-size: 14px; color: var(--yh-grey); margin-top: 4px; }
body .yh-listing__foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 8px; }
body .yh-listing__foot .yh-chip{ font-size: 12px; padding: 5px 10px; }
body .yh-listing__foot .yh-chip--solid{ font-size: 14px; padding: 8px 16px; }
body .yh-progress{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body .yh-progress i{ height: 6px; border-radius: 3px; background: var(--yh-teal); }
body .yh-progress i.off{ background: var(--yh-track); }
body .yh-field-label{ margin-top: 18px; font-size: 13px; font-weight: 600; }
body .yh-field-label + .yh-field-box{ margin-top: 6px; }
body .yh-field-box{ border: 1px solid #CFDADD; border-radius: 10px; padding: 12px 14px; font-size: 15px; }
body .yh-field-box + .yh-field-label{ margin-top: 14px; }
body .yh-saved{ display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--yh-teal); font-weight: 600; }
body .yh-score--lg{ font-size: 15px; }
body .yh-score--lg .yh-dots{ gap: 5px; }
body .yh-score--lg .yh-dots i{ width: 22px; height: 8px; border-radius: 4px; }
body .yh-rec{ border-top: 1px solid #EEF2F3; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; }
body .yh-rec span:first-child{ font-size: 14px; color: var(--yh-grey); }
body .yh-rec .yh-chip--solid{ font-size: 14px; padding: 6px 14px; }
body .yh-pipe-row{ display: flex; align-items: center; gap: 12px; font-size: 14px; }
body .yh-pipe-row > span:first-child{ width: 90px; flex: 0 0 90px; color: var(--yh-slate); }
body .yh-pipe-row > span:nth-child(2){ flex: 1; }
body .yh-pipe-row i{ display: block; height: 14px; border-radius: 4px; }
body .yh-pipe-row > span:last-child{ width: 28px; text-align: right; font-weight: 600; }
body .yh-alert{
	margin-top: 6px; background: var(--yh-aqua); border-radius: 12px; padding: 12px 14px; font-size: 14px;
	color: var(--yh-ink-soft); display: flex; gap: 10px; align-items: center;
}

body .yh-comms{ padding-top: 112px; }
body .yh-comms__panel{ box-sizing: content-box; max-width: 1280px; margin: 0 auto; background: var(--yh-mist); border-radius: 32px; padding: clamp(28px, 4vw, 56px); }
body .yh-four{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; margin-top: 36px; }
body .yh-four h3{ font-size: 19px; font-weight: 600; }
body .yh-four p:not([class*="yh-"]){ margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--yh-slate); }

body .yh-sol-ai{ padding-top: 112px; }
body .yh-sol-ai .yh-h2{ margin-top: 16px; }
body .yh-sol-ai .yh-four{ gap: 32px; margin-top: 48px; }
body .yh-sol-ai .yh-four h3{ margin-top: 16px; font-size: 20px; }
body .yh-icon-disc{ width: 44px; height: 44px; border-radius: 50%; background: var(--yh-aqua); display: flex; align-items: center; justify-content: center; }

body .yh-fit{ padding-top: 112px; }
body .yh-fit__grid{ box-sizing: content-box; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
body .yh-fit__card{ box-sizing: content-box; border-radius: 32px; padding: clamp(32px, 4vw, 56px); background: var(--yh-mist); }
body .yh-fit__card--teal{ background: var(--yh-teal); color: var(--yh-mist); }
body .yh-fit__card h3{ margin-top: 18px; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
body .yh-fit__card p:not([class*="yh-"]){ margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--yh-slate); }
body .yh-fit__card--teal p:not([class*="yh-"]){ color: var(--yh-aqua); }

/* ------------------------------------------------------------------
   Book a call
   ------------------------------------------------------------------ */
body .yh-book{ padding: 24px 24px 96px; }
body .yh-book__row{ box-sizing: content-box; max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
body .yh-book__intro{
	flex: 1 1 440px; min-width: 0; background: var(--yh-aqua); border-radius: 32px;
	padding: clamp(28px, 4vw, 56px); box-sizing: border-box;
}
body .yh-book__intro h1{ margin-top: 18px; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
body .yh-book__intro > p:not([class*="yh-"]){ margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--yh-ink-soft); }
body .yh-book__intro .yh-eyebrow--next{ margin-top: 40px; letter-spacing: 0.14em; }
body .yh-next{ display: flex; flex-direction: column; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: yh-next; }
body .yh-next li{ display: flex; gap: 16px; align-items: flex-start; counter-increment: yh-next; }
body .yh-next li::before{
	content: counter(yh-next); flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--yh-teal);
	color: var(--yh-white); display: flex; align-items: center; justify-content: center; font-weight: 700;
}
body .yh-next h2{ font-size: 18px; font-weight: 600; }
body .yh-next p:not([class*="yh-"]){ font-size: 16px; color: var(--yh-slate); line-height: 1.5; margin-top: 2px; }
body .yh-book__team{ margin-top: 40px; background: var(--yh-white); border-radius: 20px; padding: 24px; }
body .yh-book__team h2{ font-size: 16px; font-weight: 600; }
body .yh-book__team p:not([class*="yh-"]){ margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--yh-slate); }
body .yh-book__form{
	flex: 1 1 520px; min-width: 0; background: var(--yh-white); border: 1px solid var(--yh-line); border-radius: 32px;
	padding: clamp(24px, 3.5vw, 48px); box-sizing: border-box; box-shadow: 0 30px 80px rgba(11,98,93,0.10);
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* ------------------------------------------------------------------
   Plain pages (privacy, cookies, terms)
   ------------------------------------------------------------------ */
body .yh-prose{ max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; box-sizing: border-box; }
body .yh-prose .wp-block-post-title{ font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 32px; }
body .yh-prose h2{ font-size: 26px; letter-spacing: -0.02em; font-weight: 600; margin: 40px 0 0; }
body .yh-prose h3{ font-size: 20px; font-weight: 600; margin: 28px 0 0; }
body .yh-prose p:not([class*="yh-"]), body .yh-prose ul, body .yh-prose ol{ font-size: 17px; line-height: 1.65; color: var(--yh-slate); margin: 14px 0 0; }
body .yh-prose li + li{ margin-top: 6px; }

/* The Book a call form (markup from the Yaffle: Book a call plugin). */
body .yh-form{ display: flex; flex-direction: column; gap: 20px; }
body .yh-form__head h2{ font-size: 28px; letter-spacing: -0.02em; font-weight: 600; }
body .yh-form__head p{ margin-top: 6px; font-size: 15px; color: var(--yh-grey); }
body .yh-form__problem{
	background: #FFF4E5; color: #6B3A00; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5;
}
body .yh-form__pair{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
body .yh-field{ display: flex; flex-direction: column; gap: 6px; }
body .yh-field label, body .yh-form__interests legend{ font-size: 15px; font-weight: 600; }
body .yh-field input, body .yh-field select, body .yh-field textarea{
	font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #CBD6DA; border-radius: 12px;
	background: var(--yh-white); color: var(--yh-ink);
}
body .yh-field textarea{ resize: vertical; }
body .yh-form input:focus, body .yh-form select:focus, body .yh-form textarea:focus{
	outline: 3px solid var(--yh-teal-bright); outline-offset: 1px; border-color: var(--yh-teal);
}
body .yh-form__interests{ border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body .yh-form__interests legend{ padding: 0; margin-bottom: 10px; }
body .yh-pills{ display: flex; flex-wrap: wrap; gap: 10px; }
body .yh-pill{
	display: inline-flex; align-items: center; gap: 10px; border: 1px solid #CBD6DA; border-radius: 999px;
	padding: 11px 16px; font-size: 15px; cursor: pointer;
}
body .yh-pill:has(input:checked){ border-color: var(--yh-teal); background: var(--yh-aqua-pale); }
body .yh-pill input{ width: 18px; height: 18px; accent-color: var(--yh-teal); margin: 0; }
body .yh-form__optin{
	display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--yh-slate); cursor: pointer;
}
body .yh-form__optin input{ width: 20px; height: 20px; accent-color: var(--yh-teal); margin: 2px 0 0; flex: 0 0 20px; }
body .yh-form__trap{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body .yh-form__submit{
	font: inherit; font-size: 17px; font-weight: 700; background: var(--yh-teal); color: var(--yh-white);
	border: 0; border-radius: 999px; padding: 18px 28px; cursor: pointer;
}
body .yh-form__submit:hover{ background: var(--yh-ink); }
body .yh-form__small{ font-size: 14px; line-height: 1.55; color: var(--yh-grey); }

body .yh-thanks{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0; outline: none; }
body .yh-thanks__tick{ width: 64px; height: 64px; border-radius: 50%; background: var(--yh-aqua); display: flex; align-items: center; justify-content: center; }
body .yh-thanks h2{ font-size: 34px; letter-spacing: -0.03em; font-weight: 600; }
body .yh-thanks > p{ font-size: 18px; line-height: 1.6; color: var(--yh-slate); max-width: 520px; }
body .yh-thanks__book{ width: 100%; background: var(--yh-mist); border-radius: 20px; padding: 24px; box-sizing: border-box; margin-top: 8px; }
body .yh-thanks__book h3{ font-size: 17px; font-weight: 600; }
body .yh-thanks__book p{ margin: 6px 0 16px; font-size: 16px; color: var(--yh-slate); line-height: 1.5; }
body .yh-thanks__book a{
	display: inline-block; background: var(--yh-teal); color: var(--yh-white); text-decoration: none;
	padding: 14px 24px; border-radius: 999px; font-weight: 600;
}
body .yh-thanks__book a:hover{ background: var(--yh-ink); color: var(--yh-white); }
body .yh-thanks__links{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------------------
   Solution: how it fits together, and the mid-page call to action
   ------------------------------------------------------------------ */
body .yh-connected-view{ padding-top: 112px; }
body .yh-connected-view .yh-h2{ margin-top: 16px; max-width: 900px; }
body .yh-connected-view__intro{ margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--yh-slate); max-width: 680px; }
/* The diagram is drawn with inline styles from the design; these rules lay it out. */
body .yh-flow{ display: grid; grid-template-columns: 34fr 32fr 34fr; position: relative; }
body .yh-flow-lines{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 900px) {
	body .yh-flow{ grid-template-columns: 1fr; gap: 28px; }
	body .yh-flow-lines{ display: none; }
	body .yh-flow-hub{ order: -1; }
	body .yh-flow-head{ display: none !important; }
	body .yh-flow-item{ height: auto !important; min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; }
}

body .yh-midcta{ padding-top: 96px; }
body .yh-midcta__panel{
	box-sizing: content-box; max-width: 1280px; margin: 0 auto; background: var(--yh-aqua); border-radius: 24px;
	padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 20px 32px;
}
body .yh-midcta__copy{ flex: 1 1 420px; min-width: 0; }
body .yh-midcta__title{ font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
body .yh-midcta__copy p:not([class*="yh-"]){ margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--yh-slate); }
body .yh-midcta .wp-block-buttons{ gap: 12px; }
body .yh-btn--mid .wp-block-button__link{ padding: 16px 26px; }

/* The closing panel's faint journey line behind the words. */
body .yh-cta__panel{ position: relative; overflow: hidden; }
body .yh-cta__art{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; pointer-events: none; }
body .yh-cta__panel > :not(.yh-cta__art){ position: relative; }

/* ------------------------------------------------------------------
   Pricing, FAQs and About us: drawn with inline styles from the design
   (reference/pack_to_patterns.py); only the design's page-level rules live here.
   ------------------------------------------------------------------ */
body details > summary{ list-style: none; cursor: pointer; }
body details > summary::-webkit-details-marker{ display: none; }
body details[open] .faq-plus{ transform: rotate(45deg); }
@media (max-width: 640px) {
	body .yh-people{ max-width: none !important; zoom: .62; }
}
@media (max-width: 360px) {
	body .yh-people{ zoom: .56; }
}

/* ------------------------------------------------------------------
   Hiring Health Check (/hiring-health-check/ and its results page)
   From the "Hiring Health Check page concept" canvas; the form and the
   results markup come from the Yaffle: Hiring Health Check plugin.
   ------------------------------------------------------------------ */
body .hc-landing, body .hc-results{ background: var(--yh-aqua-pale); }
body .hc-wrap{ max-width: 1200px; margin: 0 auto; }
body .hc-eyebrow{ font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yh-teal); margin: 0 0 14px; }
body .hc-eyebrow--ice{ color: var(--yh-ice); }

body .hc-landing{ padding: 48px 24px 64px; }
body .hc-grid{ max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "extras"; gap: 28px; }
body .hc-intro{ grid-area: intro; }
body .hc-form-card{ grid-area: form; }
body .hc-extras{ grid-area: extras; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 980px) {
	body .hc-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro form" "extras form"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 28px; align-items: start; }
}
body .hc-title{ font-size: clamp(40px, 5vw, 52px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; color: var(--yh-ink); }
body .hc-lead{ margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--yh-slate); }
body .hc-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
body .hc-chips li{ background: var(--yh-aqua); color: var(--yh-teal); font-size: 14px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
body .hc-extras__title{ margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--yh-ink); }
body .hc-gets{ display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
body .hc-gets li{ display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--yh-slate); }
body .hc-gets svg{ flex: 0 0 20px; margin-top: 2px; }
body .hc-gets strong{ font-weight: 600; color: var(--yh-ink); }
body .hc-example{ background: var(--yh-white); border: 1px solid var(--yh-aqua-line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
body .hc-example__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
body .hc-example__head p{ margin: 0; font-size: 15px; font-weight: 600; color: var(--yh-ink); }
body .hc-example__head .hc-example__note{ font-size: 12px; font-weight: 400; color: var(--yh-grey); }
body .hc-example__row{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--yh-slate); }
body .hc-example__row > span:first-child{ flex: 0 0 150px; }
body .hc-example__row > span:last-child{ flex: 0 0 30px; text-align: right; font-size: 12px; color: var(--yh-grey); }
body .hc-example__bar{ flex: 1 1 auto; height: 8px; background: #E1F3F4; border-radius: 999px; overflow: hidden; }
body .hc-example__bar i{ display: block; height: 8px; border-radius: 999px; background: var(--yh-teal-bright); }
body .hc-talk{ margin: 0; font-size: 15px; line-height: 1.5; }
body .hc-talk strong{ font-weight: 600; color: var(--yh-ink); }
body .hc-talk a{ font-weight: 600; }
body .hc-privacy{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--yh-grey); }

body .hc-know{ padding: 56px 24px; background: var(--yh-white); border-top: 1px solid var(--yh-line); }
body .hc-know__title{ margin: 0 0 24px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--yh-ink); }
body .hc-know__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
body .hc-know__grid > div{ background: var(--yh-aqua-pale); border: 1px solid var(--yh-aqua-line); border-radius: 16px; padding: 18px 20px; }
body .hc-know__grid h3{ margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--yh-ink); }
body .hc-know__grid p{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--yh-slate); }

/* The form card and its steps. */
body .hc-form-card{ background: var(--yh-white); border: 1px solid var(--yh-aqua-line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 18px 40px rgba(11, 98, 93, 0.08); }
body .hc-form{ scroll-margin-top: 24px; }
body .hc-problem{ background: #FFF4E5; color: #6B3A00; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
body .hc-progress-head{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
body .hc-progress-label{ margin: 0; font-size: 14px; font-weight: 600; color: var(--yh-teal); }
body .hc-progress-count{ margin: 0; font-size: 13px; color: var(--yh-grey); }
body .hc-progress{ height: 6px; background: #E1F3F4; border-radius: 999px; overflow: hidden; margin-bottom: 28px; }
body .hc-progress__bar{ height: 6px; background: var(--yh-teal-bright); border-radius: 999px; transition: width .2s; }
body .hc-step{ display: flex; flex-direction: column; gap: 26px; }
body .hc-step[hidden]{ display: none; }
body .hc-step + .hc-step{ margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--yh-line); }
body .hc-form--stepped .hc-step + .hc-step{ margin-top: 0; padding-top: 0; border-top: 0; }
body .hc-step__eyebrow{ margin: 0 0 -18px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yh-teal); }
body .hc-step__title{ margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--yh-ink); outline: none; }
body .hc-step__lead{ margin: -14px 0 0; font-size: 15px; line-height: 1.5; color: var(--yh-slate); }
body .hc-optional{ margin: 4px 0 -8px; padding-top: 18px; border-top: 1px dashed #CFE3E4; font-size: 15px; line-height: 1.5; color: var(--yh-grey); }
body .hc-q{ border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body .hc-q legend{ padding: 0; margin-bottom: 12px; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--yh-ink); }
body .hc-hint{ margin: -8px 0 0; font-size: 14px; color: var(--yh-grey); }
body .hc-req{ color: var(--yh-teal); }
body .hc-options{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
body .hc-step[data-step="1"] .hc-options{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body .hc-option, body .hc-check{
	display: flex; align-items: center; gap: 10px; border: 1px solid #CFE3E4; border-radius: 12px; padding: 12px 14px;
	font-size: 15px; line-height: 1.4; color: var(--yh-slate); min-height: 44px; box-sizing: border-box; cursor: pointer;
}
body .hc-option:has(input:checked), body .hc-check:has(input:checked){ border-color: var(--yh-teal); background: var(--yh-aqua-pale); color: var(--yh-ink); }
body .hc-option input, body .hc-check input{ flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--yh-teal-bright); }
body .hc-check{ align-items: flex-start; }
body .hc-check input{ margin-top: 1px; }
body .hc-pair{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
body .hc-field{ display: flex; flex-direction: column; gap: 6px; }
body .hc-field label{ font-size: 15px; font-weight: 600; color: var(--yh-ink); }
body .hc-field input, body .hc-field select, body .hc-field textarea{
	font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #CBD6DA; border-radius: 12px; background: var(--yh-white); color: var(--yh-ink);
}
body .hc-form input:focus-visible, body .hc-form select:focus-visible, body .hc-form textarea:focus-visible{ outline: 3px solid var(--yh-teal-bright); outline-offset: 1px; border-color: var(--yh-teal); }
body .hc-trap{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body .hc-small{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--yh-grey); }
body .hc-nav{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body .hc-nav button{ font: inherit; font-size: 17px; font-weight: 600; border-radius: 999px; padding: 15px 28px; cursor: pointer; }
body .hc-next, body .hc-submit{ background: var(--yh-teal); color: var(--yh-white); border: 0; }
body .hc-next:hover, body .hc-submit:hover{ background: var(--yh-ink); }
body .hc-back{ background: var(--yh-white); color: var(--yh-teal); border: 1px solid #CFE3E4; }
body .hc-nav [hidden]{ display: none; }
body .hc-submit:disabled{ opacity: .7; cursor: progress; }

/* Results. */
body .hc-btn{ display: inline-block; text-decoration: none; font-weight: 600; font-size: 17px; padding: 16px 28px; border-radius: 999px; }
body .hc-btn--primary{ background: var(--yh-teal); color: var(--yh-white); }
body .hc-btn--primary:hover{ background: var(--yh-ink); color: var(--yh-white); }
body .hc-btn--quiet{ background: var(--yh-white); color: var(--yh-teal); border: 1px solid #CFE3E4; padding: 15px 27px; }
body .hc-btn--white{ background: var(--yh-white); color: var(--yh-teal); font-size: 15px; padding: 12px 22px; align-self: flex-start; }
body .hc-btn--white:hover{ background: var(--yh-ice); color: var(--yh-teal); }
body .hc-r-hero{ padding: 72px 24px 56px; }
body .hc-r-hero__row{ display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
body .hc-r-hero__copy{ flex: 999 1 560px; min-width: 0; }
body .hc-r-hero__score{ flex: 1 1 320px; min-width: 0; display: flex; justify-content: center; }
body .hc-r-title{ margin: 0; font-size: clamp(42px, 5vw, 60px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; color: var(--yh-ink); }
body .hc-r-title span, body .hc-r-h2 span{ color: var(--yh-teal-bright); }
body .hc-r-lead{ margin: 22px 0 0; font-size: 20px; line-height: 1.55; max-width: 580px; color: var(--yh-slate); }
body .hc-r-note{ margin: 18px 0 0; font-size: 15px; color: var(--yh-grey); }
body .hc-r-buttons{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
body .hc-donut{ width: min(300px, 80vw); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body .hc-donut__inner{ width: 78.6%; aspect-ratio: 1; border-radius: 50%; background: var(--yh-white); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(11, 98, 93, 0.08); }
body .hc-donut__total{ font-size: 76px; font-weight: 600; letter-spacing: -0.04em; color: var(--yh-ink); line-height: 1; }
body .hc-donut__of{ font-size: 17px; color: var(--yh-grey); margin-top: 6px; }
body .hc-donut__level{ margin-top: 14px; background: var(--yh-aqua); color: var(--yh-teal); font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
body .hc-r-matrix{ padding: 64px 24px; background: var(--yh-white); }
body .hc-r-h2{ margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--yh-ink); }
body .hc-r-sub{ margin: 0 0 32px; font-size: 17px; line-height: 1.55; max-width: 720px; color: var(--yh-slate); }
body .hc-matrix{ overflow-x: auto; border: 1px solid var(--yh-aqua-line); border-radius: 20px; }
body .hc-matrix table{ min-width: 860px; width: 100%; border-collapse: collapse; }
body .hc-matrix thead th{ background: #E1F3F4; padding: 14px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yh-teal); text-align: left; }
body .hc-matrix thead th:first-child{ padding-left: 20px; width: 260px; }
body .hc-matrix tbody th{ padding: 16px 20px; font-size: 16px; font-weight: 500; color: var(--yh-ink); text-align: left; }
body .hc-matrix tbody tr{ border-top: 1px solid var(--yh-line); }
body .hc-matrix td{ padding: 10px 12px; }
body .hc-matrix__you{ display: block; background: var(--yh-teal); color: var(--yh-white); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; text-align: center; }
body .hc-matrix__empty{ display: block; background: var(--yh-aqua-pale); border-radius: 12px; height: 40px; }
body .hc-r-key{ margin: 14px 0 0; font-size: 14px; color: var(--yh-grey); }
body .hc-r-areas{ padding: 72px 24px; }
body .hc-cards{ display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { body .hc-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { body .hc-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body .hc-card{ background: var(--yh-white); border: 1px solid var(--yh-aqua-line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
body .hc-card__top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
body .hc-card__icon{ width: 48px; height: 48px; border-radius: 50%; background: var(--yh-aqua); display: flex; align-items: center; justify-content: center; flex: 0 0 48px; }
body .hc-card__score{ background: #E1F3F4; color: var(--yh-teal); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
body .hc-card h3{ margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--yh-ink); }
body .hc-card__level{ margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--yh-teal); }
body .hc-bar{ height: 8px; background: #E1F3F4; border-radius: 999px; overflow: hidden; }
body .hc-bar div{ height: 8px; background: var(--yh-teal-bright); border-radius: 999px; }
body .hc-card__tip{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--yh-slate); flex: 1 1 auto; }
body .hc-card__helps{ margin: 0; padding-top: 14px; border-top: 1px solid var(--yh-line); font-size: 13px; line-height: 1.55; color: var(--yh-grey); }
body .hc-card__helps span{ font-weight: 600; color: var(--yh-teal); }
body .hc-card--opportunity{ background: var(--yh-teal); border: 0; color: var(--yh-white); }
body .hc-card__eyebrow{ margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yh-ice); }
body .hc-card__big{ margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
body .hc-card__text{ margin: 0; font-size: 15px; line-height: 1.55; color: #E1F3F4; flex: 1 1 auto; }
body .hc-r-cta{ padding: 0 24px 64px; }
body .hc-r-cta__panel{ background: var(--yh-teal); border-radius: 22px; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
body .hc-r-cta__copy{ flex: 999 1 480px; min-width: 0; }
body .hc-r-cta__title{ margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--yh-white); }
body .hc-r-cta__text{ margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #E1F3F4; }
body .hc-r-cta .hc-btn--white{ font-size: 17px; padding: 16px 28px; align-self: center; }
body .hc-r-more{ padding: 0 24px 72px; }
body .hc-r-more__row{ display: flex; flex-wrap: wrap; gap: 20px; }
body .hc-r-more__card{ flex: 1 1 340px; min-width: 0; background: var(--yh-white); border: 1px solid var(--yh-aqua-line); border-radius: 20px; padding: 24px; }
body .hc-r-more__card h2{ margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--yh-ink); }
body .hc-r-more__card p{ margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--yh-slate); }
body .hc-r-more__card a{ font-weight: 600; }
body .hc-copied{ margin-left: 10px; font-size: 14px; color: var(--yh-teal); }
body .hc-r-small{ margin: 24px 0 0; font-size: 14px; color: var(--yh-grey); }