/*
 * Pocketbook Solutions landing page
 * Loaded only on pages using page-pocketbook-solutions.php.
 *
 * Type scale, colours and spacing are taken from the Figma source
 * (2026 AFHE Site, frame "afhe.pocketbooksolutions" 466:183), measured at a
 * 1440px artboard. Four families are in play and they are NOT interchangeable:
 *   Alegreya Sans  — all body copy, the display headings, card text
 *   Abhaya Libre   — the survey-card headline and its caption
 *   Alegreya       — the hero subhead only
 *   Asul           — the "51%" figure only
 *
 * Every selector carries two classes on purpose: the Elementor kit styles
 * elements as `.elementor-kit-6 h1` (0,1,1), which beats a single class.
 */

/* --- self-hosted faces -------------------------------------------------
 * Alegreya (hero subhead) and Asul (the "51%" figure) are the two families
 * the design uses that the Elementor kit does not already load. Elementor
 * self-hosts its Google Fonts under uploads/elementor/google-fonts/, so
 * these are shipped with the theme rather than pulled from a CDN, to keep
 * the site's no-third-party-font-request posture intact. Latin subset only.
 */

@font-face {
	font-family: "Alegreya";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/alegreya-v41-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Asul";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/asul-v22-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pbs {
	--pbs-navy: #0a1f44;
	--pbs-ink: #030b1a;
	--pbs-red: #b23a3a;
	--pbs-gold: #e4cb68;
	--pbs-rule: #c0cee9;
	--pbs-panel: #f0f1f4;
	--pbs-muted: #6f8089;
	--pbs-sans: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
	--pbs-serif: "Abhaya Libre", Georgia, "Times New Roman", serif;
	--pbs-serif-alt: "Alegreya", Georgia, "Times New Roman", serif;
	--pbs-figure: "Asul", Georgia, "Times New Roman", serif;

	background: #fff;
	color: var(--pbs-navy);
	font-family: var(--pbs-sans);
	overflow-x: clip;
}

.pbs *,
.pbs *::before,
.pbs *::after {
	box-sizing: border-box;
}

.pbs p {
	margin: 0;
}

.pbs .pbs-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 100px;
}

/* --- shared: marker highlight -------------------------------------------
 * Figma "Rectangle 94/95": 422x64 behind a 100px line whose advance is 376,
 * i.e. 0.23em of overhang each side and 0.64em tall, sitting 0.21em down a
 * 0.92 line box. The voter-support pill uses the same device at different
 * proportions, so the geometry is exposed as custom properties.
 */

.pbs .pbs-mark {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

.pbs .pbs-mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: var(--pbs-mark-x, -0.23em);
	right: var(--pbs-mark-x, -0.23em);
	top: var(--pbs-mark-top, 0.21em);
	height: var(--pbs-mark-h, 0.64em);
	background: linear-gradient(100deg, #e7d07b 0%, var(--pbs-gold) 55%, #cdb459 100%);
	/* uneven, hand-drawn marker stroke */
	clip-path: polygon(0.6% 6%, 100% 0%, 99.4% 92%, 0% 100%);
}

.pbs .pbs-mark__text {
	position: relative;
}

/* --- shared: button ------------------------------------------------------
 * Figma: h 56, padding 16/40, radius 3, 2px border, 24px Medium, +0.5px track.
 */

.pbs .pbs-btn {
	display: inline-block;
	background: var(--pbs-red);
	border: 2px solid var(--pbs-red);
	color: #fff;
	font-family: var(--pbs-sans);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.5px;
	padding: 16px 40px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pbs .pbs-btn:hover,
.pbs .pbs-btn:focus {
	background: #8e2c2c;
	border-color: #8e2c2c;
	color: #fff;
	text-decoration: none;
}

/* --- hero ---------------------------------------------------------------
 * Figma copy column x=100 y=200 w=610. The Elementor header is fixed
 * (90px desktop / ~52px mobile) and #primary starts at y=0, so the hero
 * pays for its own clearance: 200px lands the H1 ink at the mock's y=207.
 */

.pbs .pbs-hero {
	padding: 200px 0 128px;
}

.pbs .pbs-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 610fr) minmax(0, 619fr);
	gap: 110px;
	align-items: center;
}

.pbs .pbs-hero__title {
	margin: 0;
	font-family: var(--pbs-sans);
	font-weight: 700;
	font-size: clamp(52px, 6.95vw, 100px);
	line-height: 0.92;
	letter-spacing: 0;
	color: var(--pbs-ink);
}

.pbs .pbs-hero__sub {
	margin: 30px 0 0;
	font-family: var(--pbs-serif-alt);
	font-weight: 500;
	font-size: clamp(25px, 2.22vw, 32px);
	line-height: 1.1;
	color: var(--pbs-navy);
}

.pbs .pbs-hero__lede {
	margin: 20px 0 0;
	max-width: 610px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pbs-navy);
}

.pbs .pbs-hero .pbs-btn {
	margin-top: 30px;
}

/* video facade — Figma card is 619x436 (1.42), a deliberately cropped still.
   On play it becomes 16:9 so the YouTube player isn't letterboxed. */

.pbs .pbs-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #0a1f44;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 18px 40px -18px rgba(10, 31, 68, 0.55);
	aspect-ratio: 619 / 436;
	transition: aspect-ratio 0.3s ease;
}

.pbs .pbs-video img,
.pbs .pbs-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.pbs .pbs-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.pbs .pbs-video__play svg {
	width: 44px;
	height: 44px;
	fill: var(--pbs-navy);
	margin-left: 3px;
}

.pbs .pbs-video:hover .pbs-video__play,
.pbs .pbs-video:focus-visible .pbs-video__play {
	transform: scale(1.07);
	background: #fff;
}

.pbs .pbs-video.is-playing {
	cursor: default;
	aspect-ratio: 16 / 9;
}

.pbs .pbs-video.is-playing .pbs-video__play,
.pbs .pbs-video.is-playing picture {
	display: none;
}

/* --- survey / stat ------------------------------------------------------
 * Figma: 1240x407 card, radius 20, padding 75/70, halves split by a rule.
 */

.pbs .pbs-stats {
	padding: 0 0 72px;
}

.pbs .pbs-stats__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--pbs-rule);
	border-radius: 20px;
	overflow: hidden;
}

.pbs .pbs-stats__cell {
	padding: 75px 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.pbs .pbs-stats__cell + .pbs-stats__cell {
	border-left: 1px solid var(--pbs-rule);
}

.pbs .pbs-stats__head {
	margin: 0 auto;
	max-width: 474px;
	font-family: var(--pbs-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	color: var(--pbs-navy);
}

.pbs .pbs-stats__body {
	margin: 15px auto 0;
	max-width: 474px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pbs-navy);
}

.pbs .pbs-stats__cell--figure {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 40px;
	text-align: left;
}

.pbs .pbs-donut {
	position: relative;
	flex: 0 0 auto;
	width: 221px;
	max-width: 42vw;
}

.pbs .pbs-donut svg {
	display: block;
	width: 100%;
	height: auto;
}

.pbs .pbs-donut__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pbs-figure);
	font-weight: 700;
	font-size: 45px;
	line-height: 0.92;
	color: var(--pbs-red);
}

.pbs .pbs-stats__caption {
	font-family: var(--pbs-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	color: var(--pbs-navy);
	/* the design sets these five lines explicitly; don't let them re-wrap */
	white-space: nowrap;
}

/* --- solutions ---------------------------------------------------------- */

.pbs .pbs-solutions {
	padding: 0 0 96px;
	scroll-margin-top: 120px;
}

.pbs .pbs-solutions__lede {
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--pbs-navy);
}

.pbs .pbs-solutions__title {
	margin: 65px 0 81px;
	text-align: center;
	font-family: var(--pbs-sans);
	font-weight: 700;
	font-size: clamp(48px, 6.95vw, 100px);
	line-height: 0.92;
	letter-spacing: 0;
	color: var(--pbs-navy);
}

/* accordion: columns on desktop, stacked rows on small screens.
   Figma cards are 258x304, radius 4, 7px apart. */

.pbs .pbs-acc {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
	align-items: start;
}

.pbs .pbs-acc__item {
	border: 1px solid var(--pbs-rule);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.pbs .pbs-acc__heading {
	margin: 0;
	font-family: var(--pbs-sans);
	font-size: inherit;
	font-weight: inherit;
}

.pbs .pbs-acc__trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 10px 20px 22px;
	border: 0;
	background: none;
	font-family: var(--pbs-sans);
	text-align: center;
	cursor: pointer;
	color: var(--pbs-navy);
}

.pbs .pbs-acc__num {
	font-family: var(--pbs-sans);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pbs-navy);
}

.pbs .pbs-acc__name {
	font-family: var(--pbs-sans);
	margin-top: 8px;
	flex-grow: 1; /* absorbs the height the JS equalizer adds, so pills and arrows line up across cards */
	min-height: calc(3 * 1.4em);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pbs-navy);
	text-wrap: balance;
}

.pbs .pbs-acc__support {
	--pbs-mark-x: -0.542em;
	--pbs-mark-top: 0.013em;
	--pbs-mark-h: 1.308em;

	font-family: var(--pbs-sans);
	margin-top: 22px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pbs-navy);
	white-space: nowrap;
}

.pbs .pbs-acc__arrow {
	margin-top: 20px;
	color: var(--pbs-red);
	line-height: 0;
}

.pbs .pbs-acc__arrow svg {
	width: 21px;
	height: 21px;
	transition: transform 0.22s ease;
}

.pbs .pbs-acc__trigger[aria-expanded="true"] .pbs-acc__arrow svg {
	transform: rotate(90deg);
}

.pbs .pbs-acc__trigger:hover .pbs-acc__arrow svg {
	transform: translateX(3px);
}

.pbs .pbs-acc__trigger[aria-expanded="true"]:hover .pbs-acc__arrow svg {
	transform: rotate(90deg);
}

.pbs .pbs-acc__panel-inner {
	padding: 20px 20px 32px;
	color: var(--pbs-muted);
	text-align: left;
}

.pbs .pbs-acc__body {
	font-family: var(--pbs-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.pbs .pbs-acc__example {
	font-family: var(--pbs-sans);
	margin-top: 22px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pbs-muted);
}

.pbs .pbs-acc__example ul {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
}

.pbs .pbs-acc__example li {
	margin: 0;
}

/* --- creative assets placeholder ---------------------------------------- */

.pbs .pbs-creative {
	padding: 0 0 96px;
}

.pbs .pbs-creative__rail {
	background: var(--pbs-panel);
	border-radius: 12px;
	min-height: 670px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pbs .pbs-creative__placeholder {
	font-family: var(--pbs-serif);
	font-size: 22px;
	line-height: 1.4;
	text-align: center;
	color: #a8afbd;
}

/* --- closing CTA --------------------------------------------------------
 * Figma: copy block 678 wide centred on x=504; art 918x655 bleeding right.
 * The grey creative band above it is hidden on live, so the section carries
 * less top padding than the mock implies (cards→copy 216px, not 302).
 */

.pbs .pbs-cta {
	position: relative;
	padding: 0;
	overflow: clip; /* cuts the marker cap at the section top, as in the mock */
}

.pbs .pbs-cta__inner {
	position: relative;
	z-index: 1;
	padding-top: 120px;
	padding-bottom: 90px;
}

.pbs .pbs-cta__copy {
	position: relative;
	z-index: 1;
	max-width: 678px;
	margin-left: clamp(0px, 4.5vw, 65px);
	text-align: center;
}

.pbs .pbs-cta__title {
	margin: 0;
	font-family: var(--pbs-sans);
	font-weight: 700;
	font-size: clamp(40px, 5.2vw, 75px);
	line-height: 0.92;
	letter-spacing: 0;
	color: var(--pbs-ink);
}

.pbs .pbs-cta__body {
	margin: 20px auto 0;
	max-width: 678px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pbs-navy);
}

.pbs .pbs-cta .pbs-btn {
	margin-top: 30px;
}

.pbs .pbs-cta__art {
	/* anchored to the 1440 wrap, not the viewport, so the copy and the marker
	   stay one composition on wide screens. Figma: art at x=791 of 1440, 918 wide,
	   bottom edge ~15px above the footer. */
	position: absolute;
	/* Measured off the Figma render, not the layer box: the mock draws the
	   1400x933 image at 0.622 scale, rotated -5.1deg, tip at (844, 462) of the
	   section. The tip is the pivot so it stays put when rotating. */
	left: 58.35%;
	top: -91px;
	width: 60.45%;
	max-width: 870px;
	transform: rotate(-5.1deg);
	transform-origin: 0.43% 95.4%;
	pointer-events: none;
	z-index: 0;
}

.pbs .pbs-cta__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- password gate (page in client review) ------------------------------ */

.pbs .pbs-gate {
	padding: 200px 0 160px;
}

.pbs .pbs-gate__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.pbs .pbs-gate__title {
	margin: 0;
	font-family: var(--pbs-sans);
	font-weight: 700;
	font-size: clamp(44px, 5.2vw, 72px);
	line-height: 0.92;
	color: var(--pbs-ink);
}

.pbs .pbs-gate__note {
	margin: 32px 0 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pbs-navy);
}

.pbs .pbs-gate .post-password-form {
	margin: 32px 0 0;
}

.pbs .pbs-gate .post-password-form p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pbs-navy);
}

.pbs .pbs-gate .post-password-form label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--pbs-navy);
}

.pbs .pbs-gate .post-password-form input[type="password"] {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 8px auto 0;
	padding: 13px 16px;
	border: 1px solid var(--pbs-rule);
	border-radius: 3px;
	font-family: var(--pbs-sans);
	font-size: 18px;
	color: var(--pbs-navy);
	background: #fff;
}

.pbs .pbs-gate .post-password-form input[type="password"]:focus {
	outline: 2px solid var(--pbs-red);
	outline-offset: 1px;
	border-color: var(--pbs-red);
}

.pbs .pbs-gate .post-password-form input[type="submit"] {
	display: inline-block;
	margin-top: 18px;
	background: var(--pbs-red);
	border: 2px solid var(--pbs-red);
	color: #fff;
	font-family: var(--pbs-sans);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.5px;
	padding: 15px 34px;
	border-radius: 3px;
	cursor: pointer;
}

.pbs .pbs-gate .post-password-form input[type="submit"]:hover {
	background: #8e2c2c;
	border-color: #8e2c2c;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1240px) {

	.pbs .pbs-acc__name {
		font-size: 21px;
	}

	.pbs .pbs-acc__support {
		font-size: 21px;
	}

	.pbs .pbs-stats__cell {
		padding: 56px 40px;
	}
}

@media (max-width: 1100px) {

	.pbs .pbs-acc {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 960px) {

	.pbs .pbs-hero,
	.pbs .pbs-gate {
		padding: 108px 0 56px;
	}

	.pbs .pbs-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.pbs .pbs-stats__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pbs .pbs-stats__cell + .pbs-stats__cell {
		border-left: 0;
		border-top: 1px solid var(--pbs-rule);
	}

	.pbs .pbs-cta {
		overflow: visible;
	}

	.pbs .pbs-cta__inner {
		padding-top: 72px;
		padding-bottom: 0;
	}

	.pbs .pbs-cta__copy {
		margin-left: 0;
		max-width: none;
	}

	.pbs .pbs-cta__art {
		position: static;
		transform: none;
		width: 88%;
		max-width: none;
		margin: 24px auto -4%;
	}
}

@media (max-width: 700px) {

	.pbs .pbs-wrap {
		padding-left: 22px;
		padding-right: 22px; /* not the shorthand: .pbs-cta__inner carries vertical padding */
	}

	.pbs .pbs-acc {
		grid-template-columns: minmax(0, 1fr);
	}

	.pbs .pbs-acc__trigger {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0 14px;
		padding: 18px;
		text-align: left;
	}

	.pbs .pbs-acc__num {
		font-size: 30px;
		line-height: 1.2;
	}

	.pbs .pbs-acc__name {
		margin-top: 0;
		min-height: 0;
		flex: 1;
		font-size: 19px;
	}

	.pbs .pbs-acc__support {
		margin-top: 14px;
		margin-left: 40px;
		font-size: 19px;
	}

	.pbs .pbs-acc__arrow {
		margin-top: 14px;
		margin-left: auto;
	}

	.pbs .pbs-acc__panel-inner {
		padding: 0 18px 22px;
	}

	.pbs .pbs-stats__cell--figure {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}

	.pbs .pbs-stats__head,
	.pbs .pbs-stats__caption {
		font-size: 27px;
	}

	.pbs .pbs-hard-break {
		display: none;
	}

	.pbs .pbs-stats__caption {
		white-space: normal;
	}

	.pbs .pbs-stats__body,
	.pbs .pbs-solutions__lede,
	.pbs .pbs-cta__body {
		font-size: 19px;
	}

	.pbs .pbs-btn {
		font-size: 20px;
		padding: 14px 30px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pbs *,
	.pbs *::before,
	.pbs *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}